@import url('https://fonts.googleapis.com/css?family=Hind:400,500,700');
/* ============================================================
Gallery Font Theme Token Cascade
This file loads AFTER ks.min.css in every gallery template,
so same-specificity rules here win by cascade order.
============================================================ */
/* Apply the artist's chosen body font to the body element.
All elements without their own font-family rule inherit from here.
Fallback is Source Sans Pro — the de-facto default on gallery pages
(matches the hardcoded value most .tx* classes use in ks.min.css),
so artists without a saved preference see no visual change. */
body {
padding: 0;
margin: 0;
color: #333333;
font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
width:100%;
display: table;
}
/* Heading elements use the heading font when one is chosen */
header,
h1, h2, h3, h4, h5, h6 {
font-family: var(--gal-font-heading, inherit);
}
/* Most gallery copy is also wrapped in /; repeating the rule here
ensures these elements get the body token even when a more specific rule
in ks.min.css already set something else (same specificity + later load). */
p, a, td, font {
font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}
/* Typography size-utility classes from ks.min.css all hard-code "Source Sans Pro".
Same specificity here but loaded later, so these override to the body token. */
.tx2, .tx2l, .tx2b,
.tx3, .tx3menu, .tx3b, .tx3b2,
.tx4, .tx45, .tx4s, .tx4l,
.tx5, .tx5l, .tx55l, .tx5s, .tx55,
.tx6l {
font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}
#footer{
height: 100% !important;
text-shadow: 0px 0px 0px #ffffff;
text-align: left !important;
}
#footer a{
text-shadow: 0px 0px 0px #ffffff;
}
#footer li{
text-align: left !important;
}
#footer li a{
font-size: 13px !important;
line-height: 1.7;
}
newsletter-signup{
text-align: left !important;
}
.columnsContainer { position: relative; margin: .5em; }
.columnsContainer {
max-width:1200px;
margin: 0 auto;
padding:0px 20px 20px 20px;
}
.applybutton {
cursor:pointer;
background-color:var(--gal-accent, #de256d);
color:#FFFFFF;
border-radius:10px;
border-width:0px;
padding: 5px 10px 5px 10px;
margin:4px;
}
/* MEDIA QUERIES */
#flipstyle,#fliproom {
cursor:pointer
}
#panelroom,#panelstyle,#paneltheme,#panelsize,#panelcolors {
display: none;
}
.category-title{
font-family: var(--gal-font-heading, 'Hind', sans-serif);
font-size: calc(16px * var(--gal-font-scale, 1));
font-weight: var(--gal-heading-weight, 600);
text-transform: var(--gal-title-transform, uppercase);
font-variant: var(--gal-title-variant, normal);
letter-spacing: var(--gal-title-tracking, 0);
position: relative;
}
font.category-title:after {
position: absolute;
bottom: -7px;
left: 0;
content: "";
width: 32px;
height: 4px;
background: #E5E5E5;
}
.style-list td a:first-child{
border-top: 0px !important;;
}
.room-list td a:first-child{
border-top: 0px !important;;
}
.img-box{
position: relative;
}
/*.img-box img{
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}*/
.img-box .img-hover{
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.img-default{
display: block;
}
.img-hover{
opacity: 0;
z-index: -1;
}
.img-box:hover .img-default{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.img-box:hover .img-hover{
z-index: 999;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.gal-width.gallery-item{
padding: 0px 12px;
padding-bottom:20px;
}
.gal-width{
width: 34%;
}
.desc p{
margin:0;
padding:0;
}
.desc{
margin: 16px 0px 15px 5px;
padding: 0px 5px 5px 5px;
}
/* Artwork captions and artwork title in masonry/grid layouts:
family/case/tracking follow the theme, size scales.
.artist-name is the artwork title (uppercase small text under each image).
.img-title is the artist attribution line below that. */
.artist-name,
.img-title{
font-family: var(--gal-font-heading, 'Hind', sans-serif);
font-size: calc(12.9px * var(--gal-font-scale, 1));
text-transform: var(--gal-title-transform, none);
font-variant: var(--gal-title-variant, normal);
letter-spacing: var(--gal-title-tracking, 0);
color: #595959;
line-height: 17px;
color: #b0b0b0;
}
.img-price{
font-size: calc(12.9px * var(--gal-font-scale, 1));
color: #000;
line-height: 15px;
}
.select-box{
padding: 6px 94px;
border: 1px solid #aaa;
}
.top-box{
padding: 4px 10px 4px 10px;
margin:2px 5px 2px 5px;
border: 1px solid #aaa;
font-size:12px;
display:inline-block;
}
option {
font-weight: normal;
display: block;
white-space: pre;
min-height: 1.2em;
padding: 0px 2px 1px;
}
.active{
display:block;
}
.room-list span:first-child {
border-top: 0px !important;
}
@media(max-width:850px){
.col-md-3.sidebar{
display:none;
}
}
@media(max-width:550px){
.gal-width{
width: 50%;
}
}
@media(max-width:850px){
.gal-width{
width: 49%;
}
}
@media(min-width:1510px){
.gal-width{
width: 24%;
}
.container{
width: 1480px;
}
}
@media(min-width:1610px){
.gal-width{
width: 19%;
}
.container{
width: 1610px;
}
}
@media(min-width:1800px){
.gal-width{
width: 19.8%;
}
.container{
width: 1770px;
}
}
.masonry { /* Masonry container */
column-count: 6;
column-gap: 1em;
}
@media only screen and (min-width: 100px) {
.masonrybig {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
column-gap: 1em;
}
}
@media only screen and (min-width: 900px) {
.masonrybig {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
column-gap: 1em;
}
}
@media only screen and (min-width: 1400px) {
.masonrybig {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
column-gap: 1em;
}
}
.itemmasonry { /* Masonry bricks or child elements */
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemmasonrybig { /* Masonry bricks or child elements */
display: inline-block;
margin: 10px;
width: 95%;
}
@media only screen and (min-width: 100px) {
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 1400px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
/* Wall room preview thumbnails */
.wall-room-thumb {
display: inline-block;
border-radius: 4px;
border: 2px solid transparent;
margin: 2px 1px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wall-room-thumb img {
display: block;
border-radius: 2px;
}
.wall-room-thumb:hover {
border-color: #3abf6e;
box-shadow: 0 0 0 1px #3abf6e;
transform: scale(1.12);
}
/* Row wrapper: align thumbnails and the "view on my wall" box on the same bottom edge */
.wall-room-row a,
.wall-room-row img {
vertical-align: bottom;
}
/* "View on my wall" box shown after the wall room thumbnails — opens the AI room tool */
.wall-room-airoom {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: bottom;
/* 52px content + 1px borders = 54px, same outer height as the 50px thumbs with their 2px border */
height: 52px;
max-width: 62px;
margin: 2px 1px;
padding: 0 7px;
border: 1px solid #c4c4c4;
border-radius: 0;
background: #f7f7f7;
font-size: 9px;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #666;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease;
}
.wall-room-airoom:hover,
.wall-room-airoom:focus {
border-color: #3abf6e;
color: #3abf6e;
text-decoration: none;
}
/* Smaller variant used on the v2 template (45px thumbnails, no border/margin on the anchors) */
.wall-room-airoom--sm {
height: 43px;
margin: 0 1px;
}
/* Variant shown inside the product panels, below each size listing */
.wall-room-row--panel {
margin-top: 24px;
margin-bottom: 10px;
}
/* Like button & like count */
.btn-like-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 20px;
border: 1.5px solid #d0d0d0;
color: #888;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-decoration: none;
background: #f7f7f7;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
vertical-align: middle;
}
.btn-like-action i {
font-size: 14px;
transition: transform 0.2s ease, color 0.22s ease;
}
.btn-like-action:hover,
.btn-like-action:focus {
background: #fff0f5;
border-color: #de256f;
color: #de256f;
text-decoration: none;
box-shadow: 0 2px 10px rgba(222, 37, 111, 0.18);
outline: none;
}
.btn-like-action:hover i,
.btn-like-action:focus i {
transform: scale(1.35);
color: #de256f;
}
.like-count-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 20px;
background: #f0f0f0;
color: #666;
font-size: 12px;
font-weight: 600;
vertical-align: middle;
}
.like-count-badge i {
color: #de256f;
font-size: 12px;
}
/* ---- Gallery nav (Gallery / About / Cart / Checkout) ----
.txmedium is the wrapper div and carries a class selector, which means its
font-family declaration beats inherited values on the children and
prevents the generic p,a,td,font token rule from taking effect in some
engines. This same-specificity rule appears after the ks.min.css definition
so it wins the cascade and correctly applies the artist's body font.
.menuartist inherits letter-spacing: -1px from .txmedium; since inheritance
loses to any directly-applied rule, the token applied here overrides it.
The -1px fallback keeps every existing gallery unchanged when no tracking
preference is saved. */
.txmedium {
font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}
.menuartist {
letter-spacing: var(--gal-title-tracking, -1px);
}
/* Style-1 sidebar category list items use .tx2l; the class is defined in
ks.min.css with hardcoded Source Sans Pro. This same-specificity rule loads
after ks.min.css and wins the cascade, applying the artist's body font. */
.tx2l {
font-family: var(--gal-font-body, 'Source Sans Pro', sans-serif);
}
/* Category pill button text colour.
Selector specificity (0,1,1) beats the HTML attribute (0,0,0).
When --gal-cat-text is not set the var() resolution is guaranteed-invalid
(no fallback given), so the declaration is treated as if it never existed and
the attributes keep controlling the text colour — existing
galleries are unchanged. When the artist does set a colour the variable wins. */
.category-title > font {
color: var(--gal-cat-text);
}
/* ---- Gallery logo heading ----
Artists who upload a gallery logo show the logo instead of their name, and the
name is skipped, so those pages previously had no heading at all. The logo
link is now wrapped in an carrying this class, which reproduces exactly the
plain `div style="display:inline-block"` it replaced: every h1 default that would
otherwise shift the layout (block display, margins, font metrics that grow the
line box around the inline logo image) is neutralised, so the rendering is
unchanged and only the document outline gains the heading.
The gallery links this file through hp_url_assets_versioned() so this rule
actually reaches clients — hp_url_assets() alone only carries the global
assetsHash, which does not move when a stylesheet is edited, and a cached copy
without this rule would let the h1 defaults through and shift the logo. */
.gallery-logo-title {
display: inline-block;
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
letter-spacing: normal;
text-transform: none;
}
|