/* ====================================================== Carmen Parsons | Artist MASTER STYLESHEET Last Updated: 13-09-2026 Colour system: rgb() + CSS variables only (no hex). Primitives in :root; components use var(--token). ====================================================== */ :root { --teal-deep: rgb(6, 78, 81); --teal: rgb(10, 107, 110); --teal-mid: rgb(0, 150, 160); --teal-pop: rgb(0, 175, 201); --teal-light: rgb(26, 154, 158); --teal-vivid: rgb(0, 179, 169); --teal-bright: rgb(16, 186, 167); --sage: rgb(132, 174, 158); --mint: rgb(184, 209, 196); --teal-soft: rgb(230, 243, 243); --coral-bright: rgb(246, 84, 67); --coral: rgb(240, 122, 90); --coral-vivid: rgb(255, 133, 110); --coral-soft: rgb(247, 159, 146); --peach: rgb(241, 185, 159); --red: rgb(200, 0, 0); --pink: rgb(232, 90, 139); --rose: rgb(242, 126, 155); --pink-vivid: rgb(251, 136, 158); --pink-soft: rgb(255, 148, 167); --fb-primary: rgb(0, 82, 196); --fb-alt: rgb(28, 124, 255); --ig-primary: rgb(131, 22, 211); --ig-alt: rgb(255, 205, 0); --tt-primary: rgb(255, 0, 68); --tt-alt: rgb(0, 255, 249); --az-primary: rgb(250, 176, 5); --az-alt: rgb(221, 128, 0); --gr-primary: rgb(234, 110, 34); --gr-alt: rgb(234, 110, 34); --bc-primary: rgb(186, 14, 62); --bc-alt: rgb(255, 43, 96); --mauve-deep: rgb(74, 39, 64); --mauve: rgb(107, 58, 93); --mauve-mid: rgb(161, 99, 147); --mauve-soft: rgb(186, 144, 179); --cream-deep: rgb(220, 210, 194); --sand: rgb(242, 225, 199); --cream-warm: rgb(239, 228, 217); --beige: rgb(240, 230, 220); --offwhite-dark: rgb(234, 233, 225); --ivory: rgb(242, 237, 227); --offwhite-soft: rgb(241, 239, 233); --cream: rgb(249, 245, 241); --offwhite: rgb(255, 252, 250); --white: rgb(254, 254, 254); --text-dark: rgb(44, 44, 44); --text-mid: rgb(90, 90, 90); --text-forest: rgb(72, 81, 74); --font: Poppins, sans-serif; --text-primary: var(--text-dark); --text-secondary: var(--text-mid); --text-muted: var(--text-forest); --text-link: var(--teal-mid); --text-inverse: var(--white); --text: var(--text-primary); --background-default: var(--offwhite); --background-subtle: var(--offwhite-soft); --background-elevated: var(--white); --panel-surface: var(--cream); --panel-surface-border: var(--sage); --border-default: var(--teal-mid); --border-subtle: var(--teal-soft); --border-strong: var(--teal-pop); --border-other: var(--sage); --border-other-hover: var(--mint); --cursor-select: pointer; --cursor: default; --cursor-blank: not-allowed; --color-primary: var(--teal-mid); --color-primary-hover: var(--teal-pop); --color-primary-soft: var(--teal-soft); --color-blend: var(--offwhite); --color-accent: var(--coral); --color-accent-hover: var(--coral-bright); --color-accent-soft: var(--peach); --color-success: var(--sage); --color-warning: var(--coral-bright); --color-error: var(--red); --color-info: var(--teal-bright); --color-sub: var(--teal-mid); --color-copy: var(--mint); --color-copy-hover: var(--sage); --color-fb1: var(--fb-primary); --color-fb2: var(--fb-alt); --color-ig1: var(--ig-primary); --color-ig2: var(--ig-alt); --color-tt1: var(--tt-primary); --color-tt2: var(--tt-alt); --color-az1: var(--az-primary); --color-az2: var(--az-alt); --color-gr1: var(--gr-primary); --color-gr2: var(--gr-alt); --color-bc1: var(--bc-alt); --color-bc2: var(--bc-primary); --select-border-color: var(--teal-mid); --select-checked-color: var(--teal-pop); --select-hover-color: var(--teal-pop); --select-disabled-bg-color: var(--mint); --checkbox-border-color: var(--teal-mid); --checkbox-checked-color: var(--teal-pop); --checkbox-hover-color: var(--teal-pop); --checkbox-disabled-bg-color: var(--mint); --radio-border-color: var(--teal-mid); --radio-checked-color: var(--teal-pop); --radio-hover-color: var(--teal-pop); --radio-disabled-bg-color: var(--mint); --shadow: 6px 12px 20px rgb(90, 90, 90, 0.40); --shadow-hover: 6px 12px 24px rgb(44, 44, 44, 0.40); --shadow-dark: 6px 12px 20px rgb(0, 0, 0, 0.93); --shadow-forest: 6px 12px 20px rgb(72, 81, 74, 0.40); --shadow-pop: 6px 12px 24px rgb(0, 175, 201, 0.40); --shadow-toolbar: 6px 12px 24px rgb(179, 201, 214, 0.40); --shadow-sub: 3px 3px 6px rgba(230, 243, 243, 0.69), 2px 2px 4px rgba(6, 78, 91, 0.69); --shadow-error-text: 3px 3px 6px rgba(255, 0, 0, 0.40); --border-standard: 2px; --border-thin: 1px; --border-hidden: 0; --radius-full: 50%; --radius-14: 14px; --radius-9: 9px; --radius-6: 6px; --radius-3: 3px; --radius-0: 0; --transition-cubic: 1s cubic-bezier(0.25, 0.46, 0.45, .97); --transition-logo: 3s ease; --transition: 0.69s ease; --transition-slow: 2s ease; --transition-fast: 0.36s ease; } html { scroll-behavior: smooth; } /* ====================================================== SITE SCROLLBARS — match Wall Colour menu (thin teal, transparent track) ====================================================== */ html { scrollbar-width: thin; scrollbar-color: rgb(0, 150, 160, 0.45) transparent; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgb(0, 150, 160, 0.4); border-radius: var(--radius-6); border: var(--border-standard) solid transparent; background-clip: padding-box; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: rgb(0, 100, 110, 0.75); /* light → dark on hover */ background-clip: padding-box; border-radius: var(--radius-9); } /* Any overflow panel on the site */ * { scrollbar-width: thin; scrollbar-color: rgb(0, 150, 160, 0.45) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; margin-block: 8px; } *::-webkit-scrollbar-thumb { background: rgb(0, 150, 160, 0.4); border-radius: var(--radius-6); border: var(--border-thin) solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgb(0, 100, 110, 0.75); background-clip: padding-box; border-radius: var(--radius-9); } body { font-family: var(--font); font-size: 16px; background: linear-gradient(175deg, var(--offwhite) 99%, var(--teal-soft) 10%), var(--offwhite); color: var(--text-primary); line-height: 1.6; } h1 { font-size: 32px; margin-bottom: 0.3em; font-family: var(--font); color: var(--text-secondary); } h2 { font-size: 28px; margin-bottom: 0.3em; font-family: var(--font); } h3 { font-size: 16px; margin-bottom: 0.3em; font-family: var(--font); } /* Lead line under H1 — breathing room + softer emphasis */ .sub-heading { font-family: Poppins, sans-serif; font-size: 18px; font-weight: 400; font-style: italic; color: var(--color-sub, var(--text-secondary)); line-height: 1.7; letter-spacing: 0.01em; margin: 0 0 1.25em; max-width: 48em; } .hero-text { display: block; margin: auto; padding: 6px; border: var(--border-hidden); border-radius: var(--radius-6); text-align: center; color: var(--text-inverse); font-family: var(--font); font-size: 15px; font-weight: bold; } .hero-h1 { display: block; margin: auto; padding: 6px; border: var(--border-hidden); border-radius: var(--radius-6); text-align: center; color: var(--text-inverse); font-family: var(--font); font-size: 36px; } img { max-width: 100%; height: auto; display: block; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .container { max-width: 1200px; margin: auto; padding: 0 20px; } section { width: 100%; } .table { border-collapse: collapse; font-family: Poppins, sans-serif; display: inline-block; max-width: 1160px; margin: 0; padding: 10px; border: var(--border-thin) solid var(--color-primary); border-radius: var(--radius-6); font-size: 16px; } th, td { border: var(--border-thin) solid var(--color-primary); padding: 10px; text-align: center; vertical-align: middle; } th { background-color: rgb(251, 253, 255); vertical-align: bottom; } tr:nth-child(even) { background-color: rgb(249, 249, 249); } tr:hover { background-color: rgb(241, 241, 241); } .spacer { display: block; width: 100%; margin: 0; padding: 0; border: var(--border-hidden); } .spacer-50 { height: 50px; } .spacer-45 { height: 45px; } .spacer-40 { height: 40px; } .spacer-35 { height: 35px; } .spacer-30 { height: 30px; } .spacer-25 { height: 25px; } .spacer-20 { height: 20px; } .spacer-15 { height: 15px; } .spacer-10 { height: 10px; } .spacer-5 { height: 5px; } /* Accessibility focus rings ───────────────────────── Site-wide: :focus shows outline on links/buttons (keyboard AND mouse) so interactive elements are always visible — as preferred for this site. Lightbox chrome: mouse clicks must NOT flash outlines or strip transforms. :focus:not(:focus-visible) suppresses ring for pointer users only. Keyboard users still get the global :focus outline on lightbox controls. CRITICAL — .lightbox-nav is vertically centered with translateY(-50%). Never set transform:none on those arrows or they drop on click. */ a:focus, button:focus, input:focus, textarea:focus, #go2Top:focus, select:focus { outline: 2px dashed var(--color-primary-hover); box-shadow: 0 0 20px rgb(0, 175, 201, 0.40); outline-offset: 9px; border-radius: var(--radius-6); transition: outline 0.1s, var(--transition-fast); } /* Circular lightbox controls — never inherit radius-6 from button:focus */ .lightbox-nav:focus, .lightbox-nav:focus-visible, .lightbox-nav:active, .lightbox-nav:hover, .lightbox-works-nav:focus, .lightbox-works-nav:focus-visible, .lightbox-works-nav:active, .lightbox-works-nav:hover, .lightbox-thumbs-nav:focus, .lightbox-thumbs-nav:focus-visible, .lightbox-thumbs-nav:active, .lightbox-thumbs-nav:hover { border-radius: 50%; } a:focus::after, button:focus::after, input:focus::after, textarea:focus::after, #go2Top:focus::after, select:focus::after { display: none; } /* Lightbox chrome — no mouse-focus flash; do not touch .lightbox-nav transform here */ .lightbox-tool:focus:not(:focus-visible):not(:hover), .lightbox .close:focus:not(:focus-visible):not(:hover), .lightbox-works-nav:focus:not(:focus-visible):not(:hover), .lightbox-thumbs-nav:focus:not(:focus-visible):not(:hover), .lightbox-work:focus:not(:focus-visible):not(:hover), .lightbox-thumb:focus:not(:focus-visible):not(:hover), .lightbox-frame-option:focus:not(:focus-visible):not(:hover), .lightbox-wall-option:focus:not(:focus-visible):not(:hover) { outline: none; box-shadow: none; transform: none; } /* Prev/Next (teal side arrows): keep centering on mouse focus */ /* Mouse-focus only: no flash — but still allow :hover styles when pointer is over the control */ .lightbox-nav:focus:not(:focus-visible):not(:hover) { outline: none; box-shadow: none; transform: translateY(-50%); border-radius: 50%; } .lightbox-nav:focus:not(:focus-visible):hover, .lightbox-nav:hover { background: rgb(0, 175, 201); /* teal-pop */ transform: translateY(-50%) scale(1.1); outline: 2px dashed rgb(0, 175, 201); /* teal-pop */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 16px rgb(0, 175, 201, 0.55); /*teal-pop */ } /* Keyboard focus on side arrows — keep centering + scale */ .lightbox-nav:focus-visible { outline: 2px solid rgb(0, 175, 201); /* teal-pop */ outline-offset: 9px; box-shadow: 0 0 16px rgb(0, 175, 201, 0.45); transform: translateY(-50%) scale(1.1); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: var(--border-hidden); } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 100000; background: var(--color-primary); color: var(--text-inverse); padding: 10px 16px; border-radius: var(--radius-6); font-weight: bold; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 12px; outline: 2px solid var(--color-primary-hover); outline-offset: 9px; } .skip-link::after { display: none; } /* Header */ header { background: var(--background-default); position: relative; top: 0; z-index: 9000; display: flex; flex-wrap: wrap; align-content: center; border-bottom: 1px dotted rgb(242, 237, 227); } .header-inner { display: flex; height: 40px; justify-content: center; align-items: center; padding: 0; gap: 20px; } .logo-picture { display: block; margin: 0 auto; max-width: 100%; } .logo { max-height: 127px; width: auto; max-width: min(654px, 92vw); padding: 10px; margin: 0 auto; transition: var(--transition-logo); cursor: var(--cursor-select); } .logo:hover { transform: scale(1.1); } /* Logo Animation */ @keyframes flipAnimation { 0% { transform: perspective(700px) rotateY(0); } 100% { transform: perspective(700px) rotateY(360deg); } } .cpa-flip { animation-name: flipAnimation; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; box-shadow: 0 0 18px rgb(200, 0, 0, 0.3); } /* Error and Thankyou Animation */ @keyframes slideDownAnimation { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .letemroll { animation-name: slideDownAnimation; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-delay: 1.0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; } .letemroll-2 { animation-name: slideDownAnimation; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-delay: 2.5s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; } .letemroll-3 { animation-name: slideDownAnimation; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); animation-delay: 4.0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; } /* Hero */ .hero a { display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 auto; } .hero a::after { display: none; } a { background: transparent; cursor: var(--cursor-select); color: var(--color-primary); font-size: 16px; text-decoration: none; font-weight: bold; position: relative; transition: color var(--transition); } a:hover, a.active { background: transparent; color: var(--color-primary-hover); border: var(--border-hidden); border-radius: var(--radius-6); } a:hover::after { width: 100%; } a::after { content: ''; background: transparent; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; transition: width var(--transition); } .menu-toggle { display: none; font-size: 30px; color: var(--color-primary); cursor: var(--cursor-select); background: none; border: none; z-index: 9000; } nav { display: flex; gap: 20px; z-index: 9000; font-family: Poppins, system-ui, sans-serif; /* same face as body on every page */ } nav a { background: none; cursor: var(--cursor-select); color: var(--color-primary); font-family: Poppins, system-ui, sans-serif; font-size: 16px; font-weight: 700; /* matches loaded Poppins 700 — not browser "bold" fallback */ line-height: 1.2; letter-spacing: 0; text-decoration: none; position: relative; white-space: nowrap; } nav a:hover, nav a.active { color: var(--color-primary-hover); } nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: var(--color-primary-hover); transition: var(--transition); } /* Device: underline 50% closer to link text (−5px → −2.5px) */ @media (max-width: 768px) { nav a::after { bottom: -2.5px; } } nav a:hover::after, nav a.active::after { width: 100%; } #go2Top { display: none; position: fixed; bottom: 100px; right: 20px; z-index: 9000; border: var(--border-standard) solid var(--text-inverse); outline: none; background-color: var(--color-primary); color: var(--text-inverse); font-size: 16px; font-weight: bold; text-decoration: none; cursor: var(--cursor-select); padding: 15px; border-radius: var(--radius-6); transition: var(--transition-fast); } #go2Top:hover { background: rgb(0, 175, 201); box-shadow: 0 0 24px rgb(0, 175, 201, 0.40); border: 2px solid rgb(0, 175, 201); border-radius: var(--radius-6); transform: scale(1.1); outline: 2px dashed rgb(0, 175, 201); outline-offset: 9px; } .hero { position: relative; overflow: hidden; background: var(--background-default); color: var(--text-primary); font-weight: bold; text-align: center; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } .hero .container { z-index: 99; display: flex; justify-content: center; align-items: center; width: 100%; margin-left: auto; margin-right: auto; text-align: center; } .block { box-shadow: 0 0 18px rgb(0, 175, 201, 0.3); background: url("/img/cpa/backgrounds/cpa-background-1.webp"); background-position: top center; background-size: cover; background-repeat: no-repeat; position: center; border: var(--border-thin) solid rgb(0, 150, 160); border-radius: var(--radius-14); padding: 44px 54px; color: var(--text-primary); font-family: Poppins, sans-serif; } .block-error { box-shadow: 0 0 18px rgb(255, 0, 0, 0.3); background: url("/img/cpa/backgrounds/cpa-background-5.webp"); background-position: top center; background-size: cover; background-repeat: no-repeat; position: center; border: var(--border-thin) solid rgb(200, 0, 0); border-radius: var(--radius-14); padding: 44px 54px; color: var(--text-primary); font-family: Poppins, sans-serif; } .block-error-logo { border: 1px solid rgb(200, 0, 0); border-radius: var(--radius-14); object-fit: contain; width: 150px; height: 150px; align-content: center; justify-content: center; padding: 0; margin: 0; } .block-error-logo img { border: 1px solid rgb(200, 0, 0); border-radius: var(--radius-14); object-fit: contain; width: 100%; cursor: var(--cursor-select); align-content: center; justify-self: center; padding: 0; margin: 0; } .block-error-text { color: var(--text-primary); font-family: Poppins, sans-serif; } .sub-heading-error { font-family: Poppins, sans-serif; font-size: 18px; font-weight: 700; font-style: italic; color: var(--color-warning); line-height: 1.7; letter-spacing: 0.01em; margin: 0 0 1em; max-width: 99%; } @keyframes block-error-h1-animation { 0% { transform: rotate(0deg); } 1% { transform: translateX(0); } 10% { transform: rotate(0.9deg); } 20% { transform: rotate(-0.04deg); } 30% { transform: rotate(0.01deg); } 40% { transform: rotate(-0.01deg); } 50% { transform: rotate(0.01deg); } 60% { transform: rotate(-0.01deg); } 70% { transform: translateX(2px); } 75% { transform: rotate(-0.01deg); } 80% { transform: translateX(-1px); } 90% { transform: rotate(0.01deg); } 100% { transform: rotate(0.01deg); } } .block-error-h1 h1 { color: var(--color-error); font-family: Poppins, sans-serif; font-size: 36px; opacity: 0.8; text-shadow: -1px -1px 0 rgba(0, 255, 0), -2px -2px 1px rgba(0, 255, 0, 0.2), 1px 1px 1px rgba(255, 0, 0, 0.2); /*text-shadow: -1px -1px 0px rgba(0, 255, 0, 0.8);*/ } .block-error-h1a { animation-name: block-error-h1-animation; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-delay: 7s; animation-iteration-count: infinite; animation-direction: normal; } .block-logo { border: 1px solid var(--rose); border-radius: var(--radius-14); object-fit: contain; width: 260px; height: 260px; align-content: center; justify-self: center; transition: background-color var(--transition-logo), transform var(--transition-logo), box-shadow var(--transition-logo), color var(--transition-logo), opacity var(--transition-logo), font-size var(--transition-logo); } .block-logo img { border: 1px solid var(--rose); border-radius: var(--radius-14); align-content: center; justify-self: center; width: 100%; cursor: var(--cursor-select); border-radius: var(--radius-14); } .block-whitebg { box-shadow: 0 0 30px rgb(230, 243, 243, 0.3); border-radius: var(--radius-14); padding: 20px; background: var(--background-default); border: var(--border-thin) solid rgb(230, 243, 243, 0.3); } .block-footer { position: sticky; bottom: 0; height: 60px; display: flex; flex-wrap: wrap; align-content: center; padding: 10px; background: var(--background-default); } form { max-width: 700px; margin: 10px auto; } form input, form textarea { width: 100%; padding: 12px; border: 2px solid rgb(0, 150, 160); border-radius: var(--radius-6); margin-bottom: 15px; font-size: 16px; font-family: Poppins, sans-serif; /* Pre-set outline so focus never flashes browser-default black */ outline: 2px dashed transparent; outline-offset: 9px; transition: border-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease; } form input:focus, form input:focus-visible, form textarea:focus, form textarea:focus-visible { border-color: var(--color-primary-hover); outline: 2px dashed var(--color-primary-hover); outline-offset: 9px; box-shadow: 0 0 20px rgb(0, 175, 201, 0.40); border-radius: var(--radius-6); } form textarea { min-height: 140px; } .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } select { box-sizing: border-box; width: 100px; height: 50px; margin: 0; padding: 12px; border: 2px solid rgb(0, 150, 160); border-radius: var(--radius-6); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--background-default); background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234169E1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; outline: none; transition: var(--transition-fast); font-family: inherit; font-size: inherit; color: var(--text-primary); cursor: var(--cursor-select); } select:not(:disabled):hover, select:not(:disabled):focus-visible { border-color: var(--select-hover-color); box-shadow: var(--shadow-hover); } select:disabled { background-color: var(--select-disabled-bg-color); border-color: var(--select-disabled-bg-color); cursor: var(--cursor-blank); } @media (prefers-reduced-motion: reduce) { select { transition: none; } } input[type="checkbox"] { box-sizing: border-box; width: 24px; height: 24px; margin: 0; padding: 0; border: var(--border-standard) solid var(--checkbox-border-color); appearance: none; background-color: var(--background-default); cursor: var(--cursor-select); } input[type="checkbox"]:checked { border-color: var(--checkbox-checked-color); background-color: var(--checkbox-checked-color); background-image: url('data:image/svg+xml;utf8,'); background-size: 16px; background-repeat: no-repeat; background-position: center; } input[type="checkbox"]:disabled { background-color: var(--checkbox-disabled-bg-color); cursor: var(--cursor-blank); } @media (hover: hover) { input[type="checkbox"]:not(:disabled):hover { box-shadow: var(--shadow-hover); } } input[type="checkbox"]:focus-visible { box-shadow: var(--shadow-hover); } input[type="radio"] { box-sizing: border-box; width: 20px; height: 20px; margin: 6px; padding: 0; border: 2px solid rgb(0, 150, 160); border-radius: 50%; appearance: none; background-color: var(--background-default); outline: none; transition: outline 0.1s, var(--transition-fast); cursor: var(--cursor-select); } input[type="radio"]:not(:disabled):checked { border-color: var(--radio-checked-color); background-color: var(--radio-checked-color); background-clip: content-box; padding: 2px; background-image: radial-gradient(circle, var(--radio-checked-color) 0%, var(--radio-checked-color) 50%, transparent 60%, transparent 100%); } input[type="radio"]:disabled { background-color: var(--radio-disabled-bg-color); cursor: var(--cursor-blank); } @media (hover: hover) { input[type="radio"]:not(:disabled):hover { outline: 6px solid var(--radio-hover-color); } } input[type="radio"]:focus-visible { outline: 6px solid var(--radio-hover-color); } .button { display: inline-block; background: var(--color-primary); color: var(--text-inverse); padding: 12px 20px; border: var(--border-standard) solid var(--color-primary); border-radius: var(--radius-6); text-decoration: none; font-weight: bold; transition: outline 0.1s, var(--transition); cursor: var(--cursor-select); } .button:hover { background: var(--color-primary-hover); color: var(--text-inverse); border: var(--border-standard) solid var(--color-primary-hover); outline: 2px solid var(--color-primary-hover); outline-offset: 9px; box-shadow: var(--shadow-hover); transform: scale(1.1); } /* Semantic action colours — rgb only (no hex) to match site tokens */ .button-green { background: rgb(12, 125, 0); border-color: rgb(12, 125, 0); box-shadow: var(--shadow-forest); } .button-green:hover { background: rgb(19, 168, 3); border-color: rgb(19, 168, 3); box-shadow: var(--shadow-hover); } .button-red { background: rgb(221, 5, 5); border-color: rgb(221, 5, 5); box-shadow: var(--shadow-forest); } .button-red:hover { background: rgb(205, 4, 4); border-color: rgb(205, 4, 4); box-shadow: var(--shadow-hover); } .button-blue { background: rgb(65, 105, 225); border-color: rgb(65, 105, 225); box-shadow: var(--shadow-forest); } .button-blue:hover { background: rgb(35, 88, 246); border-color: rgb(35, 88, 246); box-shadow: var(--shadow-hover); } .grid-error { display: flex; grid-template-columns: auto auto auto auto; gap: 20px; padding: 20px 0; justify-content: center; align-items: center; flex-wrap: wrap } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px 0; } .card, .card-carmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; background: var(--text-inverse); color: var(--text-primary); /* never inherit white / inverse text */ border: var(--border-standard) solid var(--color-primary); border-radius: var(--radius-9); padding: 6px; box-shadow: var(--shadow-forest); overflow: hidden; transition: var(--transition); } .card:hover, .card-carmen:hover { transform: scale(1.04); } .card img, .card-carmen img, .card-carmen-img { width: 100%; object-fit: cover; cursor: var(--cursor-select); transition: var(--transition); border-radius: var(--radius-9); } .card img:hover, .card-carmen img:hover { transform: scale(1.04); } /* Carmen portrait card — photo sits on soft surface. Text inside the card uses dark primary so it stays readable. Use the colour portrait (not *-white.png) unless a dark panel is intentional. */ .card-carmen { background-color: var(--mauve-soft); background-image: url("/img/cpa/backgrounds/cpa-about.webp"); background-size: contain; background-position: center; border-radius: var(--radius-9); color: var(--background-default); } .card-carmen p, .card-carmen h1, .card-carmen h2, .card-carmen h3, .card-carmen span { color: var(--background-default); font-family: var(--font); } /* Error Page portrait card — photo sits on soft surface. Text inside the card uses dark primary so it stays readable. Use the colour portrait (not *-white.png) unless a dark panel is intentional. */ .card-error { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 20px; background: var(--text-inverse); color: var(--text-primary); /* never inherit white / inverse text */ border: var(--border-standard) solid var(--color-error); border-radius: var(--radius-14); padding: 6px; box-shadow: 0 0 18px rgb(255, 0, 0, 0.3); overflow: hidden; transition: var(--transition); } .card-error:hover { transform: scale(1.04); } .card-error img, .card-error-img { width: 100%; object-fit: cover; cursor: var(--cursor-select); transition: var(--transition); } .card-error img:hover { transform: scale(1.04); } /* Carmen portrait card — photo sits on soft surface. Text inside the card uses dark primary so it stays readable. Use the colour portrait (not *-white.png) unless a dark panel is intentional. */ .card-error-1 { background-color: var(--text-inverse); background-image: url("/img/cpa/backgrounds/1.webp"); background-size: contain; background-position: center; color: var(--background-default); } .card-error-2 { background-color: var(--text-inverse); background-image: url("/img/cpa/backgrounds/2.webp"); background-size: contain; background-position: center; color: var(--background-default); } .card-error-lemon { background-color: var(--text-inverse); background-image: url("/img/cpa/backgrounds/lemon.webp"); background-size: contain; background-position: center; color: var(--background-default); } .card-error p, .card-error h1, .card-error h2, .card-error h3, .card-error span { color: var(--background-default); font-family: var(--font); line-height: 1.0; font-size: 16px; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 700; color: var(--text-primary, var(--text-secondary)); line-height: 1.7; letter-spacing: 0.01em; margin: 0 0 1.25em; max-width: 99%; } /* ====================================================== CORE WEB VITALS NOTES (do not remove guidance) LCP — logo has fetchpriority="high" + preload in HTML; keep LCP image small CLS — always set width + height on ; gallery thumbs fixed height 260px INP — lightbox is event-delegated; avoid heavy work on click path Fonts — Poppins loaded with display=swap (HTML) ====================================================== */ /* Gallery */ /* ═══════════════════════════════════════════════════════════════════════════ IMAGE STRATEGY (gallery + lightbox) ───────────────────────────────────────────────────────────────────────── Grid thumbs (what users see first — keep LIGHT): • Prefer WebP 400w + 800w only in • fallback = 400.png (never 1600/2400) • sizes ≈ "(max-width: 600px) 92vw, (max-width: 1000px) 45vw, 280px" • width="400" height="260" always (CLS) • loading="lazy" decoding="async" on all but the first 1–2 LCP candidates Lightbox viewer (data-gallery-images): • WebP long-edge 1600 (or 800 on very small works) — sharp, not huge Download / full fidelity (data-gallery-pngs): • PNG long-edge 2400 — opened only via PNG button Do NOT put 2400 in grid srcset — it slows the gallery page. Formats: WebP primary; PNG fallback; AVIF optional later if you encode it. ═══════════════════════════════════════════════════════════════════════════ */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 40px 0; } /* content-visibility skips off-screen paint work when many thumbs exist */ .gallery-item { content-visibility: auto; contain-intrinsic-size: 400px 272px; position: relative; border: var(--border-standard) solid var(--color-primary); border-radius: var(--radius-6); overflow: hidden; background: var(--text-inverse); padding: 6px; transition: var(--transition); box-shadow: var(--shadow-forest); } .gallery-item:hover { transform: scale(1.04); box-shadow: var(--shadow-hover); } .gallery-item picture { display: block; width: 100%; } .gallery-item img, .gallery-img { width: 100%; height: 260px; object-fit: cover; cursor: var(--cursor-select); transition: var(--transition-cubic); } .gallery-item:hover img { transform: scale(1.06); } .gallery-thumbs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; } .gallery-thumb { width: 100px; height: 100px; object-fit: cover; cursor: var(--cursor-select); border: var(--border-standard) solid var(--text-inverse); border-radius: var(--radius-6); box-shadow: 0 0 30px rgb(255, 255, 255, 0.1); outline: 2px solid rgb(255, 255, 255, 0.1); outline-offset: 9px; transition: outline 0.1s, var(--transition-fast); opacity: 0.8; flex-shrink: 0; } .gallery-thumb:hover { transform: scale(1.04); opacity: 1; border: var(--border-standard) solid var(--color-primary-hover); outline: 2px solid var(--color-primary-hover); box-shadow: var(--shadow-hover); outline-offset: 6px; } .active-thumb { opacity: 1; border: var(--border-standard) solid var(--color-primary-hover); outline: 2px solid var(--color-primary-hover); box-shadow: var(--shadow-forest); outline-offset: 6px; } .gallery-thumb-block { margin-top: 20px; background: var(--text-inverse); border: var(--border-standard) solid var(--color-primary); border-radius: var(--radius-6); padding: 20px; } .gallery-viewer { width: 100%; display: flex; justify-content: center; align-items: center; padding: 30px; } #main-gallery-image { display: block; width: 100%; max-width: 450px; height: auto; padding: 0; cursor: var(--cursor-select); border-radius: var(--radius-6); box-shadow: var(--shadow-forest); object-fit: cover; transition: var(--transition); } #main-gallery-image:hover { transform: scale(1.04); } .badge { position: absolute; top: 10px; left: 10px; color: var(--text-inverse); padding: 4px 8px; border-radius: var(--radius-6); font-size: 11px; text-decoration: none; font-weight: bold; z-index: 5; } .new { background: rgb(12, 125, 0); border: var(--border-standard) solid rgb(12, 125, 0); } .best { background: rgb(122, 0, 153); border: var(--border-standard) solid rgb(122, 0, 153); } .size { position: absolute; bottom: 10px; left: 10px; background: var(--text-primary); color: var(--text-inverse); padding: 4px 8px; border-radius: var(--radius-6); border: var(--border-standard) solid var(--text-primary); font-size: 11px; text-decoration: none; font-weight: bold; z-index: 5; } .price, .sold { position: absolute; bottom: 10px; right: 10px; color: var(--text-inverse); padding: 4px 8px; border-radius: var(--radius-6); font-size: 11px; text-decoration: none; font-weight: bold; z-index: 5; } .price { background: var(--text-primary); border: var(--border-standard) solid var(--text-primary); } .sold { background: rgb(139, 0, 0); border: var(--border-standard) solid rgb(139, 0, 0); } .etsy-link { position: absolute; bottom: 10px; left: 70px; background: rgb(173, 196, 203); color: var(--text-inverse); padding: 4px 8px; border-radius: var(--radius-6); border: var(--border-standard) solid var(--text-inverse); font-size: 11px; text-decoration: none; font-weight: bold; z-index: 5; } .etsy-link:hover { background: rgb(181, 221, 255); transform: scale(1.04); } /* ====================================================== SOCIAL ICONS — footer + about-stores Markup contract: .footer-socials > a.footer-socials-{network} > img[width=40 height=40] .about-stores > a.about-stores-{network} > img[width=40 height=40] Hover styles target the so scale/outline sit on the icon, not the link box. ====================================================== */ .social-section { text-align: center; padding: 0; } .footer-socials { display: flex; justify-content: center; align-items: center; gap: 30px; margin: 20px 0; min-height: 56px; padding: 8px 0; overflow: visible; } /* Fixed hit-area so icons never resize the footer row */ .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; transform: none; border: none; text-decoration: none; background: transparent; padding: 0; margin: 0; } .footer-socials a::after { display: none; } /* Hard 40×40 icons — object-fit keeps brand marks inside the circle */ .footer-socials img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; display: block; object-fit: contain; flex-shrink: 0; border: 1px solid rgb(255, 252, 250); border-radius: 50%; opacity: 0.8; outline: 1px solid transparent; outline-offset: 9px; transition: transform 0.36s ease, opacity 0.36s ease, box-shadow 0.36s ease, outline-color 0.36s ease; will-change: transform; } /* Shared lift on any social hover / keyboard focus */ .footer-socials:hover::before, .footer-socials-facebook:hover::before, .footer-socials-instagram:hover::before, .footer-socials-tiktok:hover::before, .footer-socials-amazon:hover::before, .footer-socials-goodreads:hover::before, .footer-socials-donate:hover::before { box-shadow: 0 0 1px rgb(0, 150, 160, .6); } .footer-socials a:hover img, .footer-socials a:focus-visible img { opacity: 1; transform: translateY(-6px); } /* Brand-coloured glow per network */ .footer-socials-facebook:hover img, .footer-socials-facebook:focus-visible img { opacity: 1; transform: scale(1.6); border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-fb1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-fb2); } .footer-socials-instagram:hover img, .footer-socials-instagram:focus-visible img { opacity: 1; transform: scale(1.6); border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-ig1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-ig2); } /* TikTok — cyan + hot-pink brand pair */ .footer-socials-tiktok:hover img, .footer-socials-tiktok:focus-visible img { opacity: 1; transform: scale(1.6); border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-tt1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-tt2); } .footer-socials-amazon:hover img, .footer-socials-amazon:focus-visible img { opacity: 1; transform: scale(1.6); border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-az1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-az2); } .footer-socials-goodreads:hover img, .footer-socials-goodreads:focus-visible img { opacity: 1; transform: scale(1.6); border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-gr1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-gr2); } .footer-socials-donate:hover img, .footer-socials-donate:focus-visible img { opacity: 1; transform: scale(1.6); border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-bc1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 24px var(--color-bc2); } /* ------------------------------------------------------ About page — book store icons (Amazon / Goodreads) Must stay the same visual size as footer icons (40px). ------------------------------------------------------ */ .about-stores { display: flex; width: 100%; max-width: 100%; align-items: center; justify-content: center; /* centre Amazon + Goodreads as a pair */ gap: 24px; margin: 12px auto; padding: 0; box-sizing: border-box; } .about-stores a { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex-shrink: 0; text-decoration: none; background: transparent; border: none; padding: 0; margin: 0; } .about-stores a::after { display: none; } .about-stores a img { width: 54px; height: 54px; max-width: 54px; max-height: 54px; display: block; object-fit: contain; border: 1px solid rgb(255, 252, 250); border-radius: 50%; opacity: 0.8; outline: 2px solid transparent; outline-offset: 9px; transition: transform 0.36s ease, opacity 0.36s ease, box-shadow 0.36s ease, outline-color 0.36s ease; } .about-stores a:hover img, .about-stores a:focus-visible img { opacity: 1; transform: translateY(-6px) scale(1.04); } .about-stores-amazon:hover img, .about-stores-amazon:focus-visible img { opacity: 1; border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-az1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-az2); } .about-stores-goodreads:hover img, .about-stores-goodreads:focus-visible img { opacity: 1; border: 3px solid rgb(255, 252, 250); outline: 2px dotted var(--color-gr1); outline-offset: 9px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 20px var(--color-gr2); } footer .copyright, footer p { font-family: Poppins, sans-serif; color: var(--color-copy); position: relative; margin-top: 4px; margin-bottom: 6px; font-size: 0.5rem; opacity: 0.8; padding: 0.35rem 0.35rem; transition: background-color var(--transition-logo), transform var(--transition-logo), box-shadow var(--transition-logo), color var(--transition-logo), opacity var(--transition-logo), font-size var(--transition-logo); } footer .copyright:hover { font-family: var(--font); color: var(--text-primary); opacity: 1; transform: scale(1.5); } footer p sub, footer p small { font-size: 10px; color: var(--color-copy); } footer { background: var(--offwhite); color: var(--color-copy); text-align: center; padding: 5px; } .site-footer footer { background: var(--offwhite); color: var(--color-copy); text-align: center; padding: 5px; } .footer-nav { display: flex; z-index: 99; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; margin: 20px 30px; } .footer-nav a { color: var(--color-primary); text-decoration: none; font-weight: bold; position: relative; } .footer-nav a:hover, .footer-nav a.active { color: var(--color-primary-hover); } .footer-nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--color-primary-hover); transition: var(--transition-fast); } .footer-nav a:hover::after, .footer-nav a.active::after { width: 100%; } /* ====================================================== LIGHTBOX / ART VIEWER ====================================================== */ body.lightbox-open { overflow: hidden; } .lightbox { display: none; /* JS sets display:flex when open */ position: fixed; inset: 0; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; padding: 56px 12px 16px; cursor: var(--cursor-select); box-sizing: border-box; transition: background 0.35s ease; } .lightbox-toolbar { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 16px; z-index: 10005; pointer-events: none; background: linear-gradient(to bottom, rgb(1, 4, 16, 0.39), transparent); } .lightbox-tool, .lightbox .close { pointer-events: auto; font-family: var(--font); font-size: 14px; font-weight: bold; line-height: 1; border-radius: var(--radius-6); border: var(--border-standard) solid rgb(255, 252, 250, 0.85); background: rgb(40, 48, 65, 0.9); color: var(--color-blend); padding: 8px 12px; cursor: var(--cursor-select); transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; user-select: none; display: inline-flex; align-items: center; gap: 6px; } .lightbox-tool:hover, .lightbox-tool:focus-visible { background: rgb(121, 138, 164); transform: scale(1.1); outline: none; } /* Zoom label cycles 100% / 125% / … / 300% — fixed width stops toolbar jump */ #lightbox-zoom-reset { min-width: 4.25em; /* fits "300%" */ width: 4.25em; justify-content: center; font-variant-numeric: tabular-nums; text-align: center; box-sizing: border-box; } /* Close — red so it stands out */ .lightbox .close { font-size: 22px; padding: 6px 12px; background: var(--bc-primary); border-color: var(--color-blend); } .lightbox .close:hover, .lightbox .close:focus-visible { background: var(--bc-alt); transform: scale(1.1); outline: none; } /* Wall Colour picker (same pattern as Frame) */ .lightbox-wall-wrap { position: relative; display: inline-flex; pointer-events: auto; } .lightbox-wall-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; left: 1px; width: min(90vw, 280px); max-width: 90vw; max-height: 90vh; overflow-x: hidden; overflow-y: auto; padding: 10px; border-radius: var(--radius-14); background: var(--background-default); border: var(--border-thin) solid var(--border-subtle); box-shadow: 0 12px 32px rgb(0, 0, 0, 0.28), 0 0 0 1px rgb(179, 201, 214, 0.12); z-index: 10010; flex-direction: column; gap: 4px; /* Thin scrollbar that does not cover the rounded corners */ scrollbar-width: thin; /* Firefox */ scrollbar-color: rgb(0, 150, 160, 0.45) transparent; } .lightbox-wall-menu:hover { scrollbar-color: rgb(0, 100, 110, 0.75) transparent; } .lightbox-wall-menu.is-open { display: flex; } /* WebKit scrollbar — narrow track, transparent gutter, inset from radius */ .lightbox-wall-menu::-webkit-scrollbar { width: 6px; } .lightbox-wall-menu::-webkit-scrollbar-track { background: transparent; margin-block: 12px; /* keep thumb clear of border-radius */ } .lightbox-wall-menu::-webkit-scrollbar-thumb { background: rgb(0, 150, 160, 0.4); border-radius: var(--radius-6); border: var(--border-thin) solid transparent; background-clip: padding-box; } .lightbox-wall-menu::-webkit-scrollbar-thumb:hover { background: rgb(0, 100, 110, 0.75); /* light → dark */ background-clip: padding-box; } .lightbox-wall-group { margin: 8px 4px 2px; padding: 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; } .lightbox-wall-group:first-child { margin-top: 2px; } .lightbox-wall-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: var(--border-thin) solid transparent; border-radius: var(--radius-6); background: transparent; color: var(--text-primary); font-family: var(--font); font-weight: 600; cursor: var(--cursor-select); text-align: left; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .lightbox-wall-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lightbox-wall-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.25; } .lightbox-wall-feel { font-size: 11px; font-weight: 400; color: var(--text-secondary); line-height: 1.3; } .lightbox-wall-option:hover, .lightbox-wall-option:focus-visible { background: var(--color-primary-soft); border-color: var(--border-default); outline: none; transform: translateX(3px); } .lightbox-wall-option.is-selected { border-color: var(--color-primary-hover); background: rgb(0, 175, 201, 0.12); box-shadow: inset 0 0 0 1px var(--color-primary-hover); } .lightbox-wall-swatch { width: 22px; height: 22px; border-radius: var(--radius-3); border: var(--border-thin) solid rgb(44, 44, 44, 0.2); flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lightbox-wall-option:hover .lightbox-wall-swatch, .lightbox-wall-option:focus-visible .lightbox-wall-swatch { transform: scale(1.1); box-shadow: 0 0 0 2px var(--color-primary-hover); } .lightbox-wall-swatch.swatch-wall-default { background: rgb(8, 8, 8); } .lightbox-wall-swatch.swatch-wall-white { background: rgb(254, 254, 254); } .lightbox-wall-swatch.swatch-wall-offwhite { background: rgb(255, 252, 250); } .lightbox-wall-swatch.swatch-wall-cream { background: rgb(249, 245, 241); } .lightbox-wall-swatch.swatch-wall-ivory { background: rgb(242, 237, 227); } .lightbox-wall-swatch.swatch-wall-beige { background: rgb(240, 230, 220); } .lightbox-wall-swatch.swatch-wall-teal-soft { background: rgb(230, 243, 243); } .lightbox-wall-swatch.swatch-wall-mint { background: rgb(184, 209, 196); } .lightbox-wall-swatch.swatch-wall-sage { background: rgb(132, 174, 158); } .lightbox-wall-swatch.swatch-wall-teal-mid { background: rgb(0, 150, 160); } .lightbox-wall-swatch.swatch-wall-black { background: rgb(8, 8, 8); } .lightbox-wall-swatch.swatch-wall-museum-white { background: rgb(250, 249, 246); } .lightbox-wall-swatch.swatch-wall-plaster { background: rgb(244, 241, 234); } .lightbox-wall-swatch.swatch-wall-linen { background: rgb(232, 225, 212); } .lightbox-wall-swatch.swatch-wall-putty { background: rgb(214, 208, 198); } .lightbox-wall-swatch.swatch-wall-graphite { background: rgb(54, 54, 52); } .lightbox-wall-swatch.swatch-wall-charcoal { background: rgb(32, 32, 30); } .lightbox-wall-swatch.swatch-wall-seafoam-mist { background: rgb(220, 236, 232); } .lightbox-wall-swatch.swatch-wall-midnight { background: rgb(1, 4, 16); } .lightbox-wall-swatch.swatch-wall-navy { background: rgb(0, 0, 89); } .lightbox-wall-swatch.swatch-wall-clear-skies { background: rgb(186, 243, 254); } .lightbox-wall-swatch.swatch-wall-storm { background: rgb(74, 95, 111); } .lightbox-wall-swatch.swatch-wall-morning-glow { background: rgb(255, 255, 213); } .lightbox-wall-swatch.swatch-wall-reef-sand { background: rgb(236, 226, 210); } .lightbox-wall-swatch.swatch-wall-coral-dust { background: rgb(245, 220, 212); } .lightbox-wall-swatch.swatch-wall-dusk-mauve { background: rgb(210, 198, 208); } .lightbox-wall-swatch.swatch-wall-deep-lagoon { background: rgb(18, 72, 78); } .lightbox-wall-swatch.swatch-wall-night-harbour { background: rgb(12, 28, 34); } .lightbox-wall-swatch.swatch-wall-champagne { background: rgb(242, 232, 214); } .lightbox-wall-swatch.swatch-wall-taupe-silk { background: rgb(186, 174, 160); } .lightbox-wall-swatch.swatch-wall-velvet-blush { background: rgb(168, 120, 128); } .lightbox-wall-swatch.swatch-wall-oxblood { background: rgb(78, 28, 36); } .lightbox-wall-swatch.swatch-wall-forest-smoke { background: rgb(48, 58, 52); } .lightbox-wall-swatch.swatch-wall-ink { background: rgb(14, 16, 20); } .lightbox-wall-swatch.swatch-wall-burnished-rose { background: rgb(168, 106, 101); } .lightbox-wall-swatch.swatch-wall-quiet-rose { background: rgb(171, 136, 130); } .lightbox-wall-swatch.swatch-wall-rosewater-glow { background: rgb(216, 166, 148); } .lightbox-wall-swatch.swatch-wall-porcelain-blush { background: rgb(224, 203, 185); } .lightbox-wall-swatch.swatch-wall-mulled-plum { background: rgb(117, 75, 77); } .lightbox-wall-swatch.swatch-wall-eucalyptus-mist { background: rgb(153, 176, 174); } .lightbox-wall-swatch.swatch-wall-whisper-rose { background: rgb(230, 186, 188); } .lightbox-wall-swatch.swatch-wall-blush-petal { background: rgb(243, 167, 182); } .lightbox-wall-swatch.swatch-wall-velvet-taupe { background: rgb(169, 145, 138); } .lightbox-wall-swatch.swatch-wall-coral-kiss { background: rgb(217, 126, 117); } .lightbox-wall-swatch.swatch-wall-cocoa-velvet { background: rgb(99, 55, 38); } .lightbox-wall-swatch.swatch-wall-apricot-light { background: rgb(245, 192, 138); } .lightbox-wall-swatch.swatch-wall-amber-sun { background: rgb(239, 168, 91); } .lightbox-wall-swatch.swatch-wall-peony-flame { background: rgb(217, 107, 124); } .lightbox-wall-swatch.swatch-wall-cranberry-velvet { background: rgb(163, 72, 99); } .lightbox-wall-swatch.swatch-wall-lavender-haze { background: rgb(148, 132, 153); } .lightbox-wall-swatch.swatch-wall-silver-storm { background: rgb(189, 189, 198); } .lightbox-wall-swatch.swatch-wall-soft-terracotta { background: rgb(214, 179, 164); } .lightbox-wall-swatch.swatch-wall-blue-steel { background: rgb(121, 138, 164); } .lightbox-wall-swatch.swatch-wall-mauve-whisper { background: rgb(201, 161, 160); } .lightbox-wall-swatch.swatch-wall-morning-blush { background: rgb(232, 196, 169); } .lightbox-wall-swatch.swatch-wall-alpine-rose { background: rgb(194, 150, 129); } .lightbox-wall-swatch.swatch-wall-sage-veil { background: rgb(185, 175, 145); } .lightbox-wall-swatch.swatch-wall-golden-wildflower { background: rgb(215, 169, 88); } .lightbox-wall-swatch.swatch-wall-evergreen-hush { background: rgb(109, 121, 105); } .lightbox-wall-swatch.swatch-wall-velvet-currant { background: rgb(75, 22, 25); } .lightbox-wall-swatch.swatch-wall-black-velvet { background: rgb(30, 10, 13); } .lightbox-wall-swatch.swatch-wall-maroon-allure { background: rgb(106, 40, 51); } .lightbox-wall-swatch.swatch-wall-amber-blush { background: rgb(211, 150, 130); } .lightbox-wall-swatch.swatch-wall-antique-bronze { background: rgb(142, 103, 87); } .lightbox-wall-swatch.swatch-wall-ember-heart { background: rgb(105, 50, 39); } .lightbox-wall-swatch.swatch-wall-burnished-terracotta { background: rgb(166, 93, 74); } .lightbox-wall-swatch.swatch-wall-blush-sunset { background: rgb(217, 147, 124); } .lightbox-wall-swatch.swatch-wall-serene-nude { background: rgb(239, 196, 174); } .lightbox-wall-swatch.swatch-wall-ethereal-blush { background: rgb(248, 228, 215); } .lightbox-wall-swatch.swatch-wall-dawn-lilac { background: rgb(236, 218, 232); } .lightbox-wall-swatch.swatch-wall-valley-rose { background: rgb(170, 145, 161); } .lightbox-wall-swatch.swatch-wall-lilac-grove { background: rgb(137, 117, 140); } .lightbox-wall-swatch.swatch-wall-stormy-twilight { background: rgb(93, 98, 122); } .lightbox-wall-swatch.swatch-wall-midnight-valley { background: rgb(41, 48, 76); } .lightbox-wall-swatch.swatch-wall-sherbet-rose { background: rgb(244, 207, 199); } .lightbox-wall-swatch.swatch-wall-coral-radiance { background: rgb(231, 151, 150); } .lightbox-wall-swatch.swatch-wall-peach-glow { background: rgb(255, 190, 152); } .lightbox-wall-swatch.swatch-wall-golden-sunset { background: rgb(255, 201, 139); } .lightbox-wall-swatch.swatch-wall-sage-meadow { background: rgb(198, 192, 156); } .lightbox-wall-swatch.swatch-wall-masters-midnight { background: rgb(11, 20, 33); } .lightbox-wall-swatch.swatch-wall-ophelia-night { background: rgb(40, 48, 65); } .lightbox-wall-swatch.swatch-wall-midnight-brocade { background: rgb(52, 57, 74); } .lightbox-wall-swatch.swatch-wall-silver-whisper { background: rgb(181, 185, 188); } .lightbox-wall-swatch.swatch-wall-mountain-mist { background: rgb(230, 235, 234); } .lightbox-wall-swatch.swatch-wall-gully-blue { background: rgb(184, 196, 204); } .lightbox-wall-swatch.swatch-wall-forest-dawn { background: rgb(122, 140, 133); } .lightbox-wall-swatch.swatch-wall-forest-dusk { background: rgb(47, 63, 58); } .lightbox-wall-swatch.swatch-wall-deep-forest { background: rgb(26, 36, 34); } .lightbox-wall-swatch.swatch-wall-lavender-cream { background: rgb(245, 239, 234); } .lightbox-wall-swatch.swatch-wall-cinnamon-glow { background: rgb(240, 215, 177); } .lightbox-wall-swatch.swatch-wall-mollys-shell { background: rgb(244, 231, 205); } .lightbox-wall-swatch.swatch-wall-golden-custard { background: rgb(236, 203, 142); } .lightbox-wall-swatch.swatch-wall-caramel-fudge { background: rgb(236, 203, 142); } .lightbox-wall-swatch.swatch-wall-burnt-brick { background: rgb(166, 99, 72); } .lightbox-wall-swatch.swatch-wall-golden-ochre { background: rgb(216, 152, 40); } .lightbox-wall-swatch.swatch-wall-mossy-forest { background: rgb(53, 71, 40); } .lightbox-wall-swatch.swatch-wall-warm-sandstone { background: rgb(201, 169, 131); } .lightbox-wall-swatch.swatch-wall-twilight-indigo { background: rgb(35, 44, 66); } .lightbox-wall-swatch.swatch-wall-black-cherry { background: rgb(25, 9, 10); } .lightbox-wall-swatch.swatch-wall-ripe-cherry { background: rgb(59, 27, 29); } .lightbox-wall-swatch.swatch-wall-deep-iris { background: rgb(113, 66, 72); } .lightbox-wall-swatch.swatch-wall-corimbia-shadow { background: rgb(136, 129, 87); } .lightbox-wall-swatch.swatch-wall-mountain-eucalyptus { background: rgb(152, 170, 157); } .lightbox-wall-swatch.swatch-wall-misty-hollow { background: rgb(179, 201, 214); } .lightbox-wall-swatch.swatch-wall-plaster-alcove { background: rgb(242, 239, 226); } .lightbox-wall-swatch.swatch-wall-soot { background: rgb(45, 53, 54); } .lightbox-wall-swatch.swatch-wall-old-moss { background: rgb(105, 124, 112); } .lightbox-wall-swatch.swatch-wall-cadet-grey { background: rgb(156, 164, 174); } .lightbox-wall-swatch.swatch-wall-steel-smoke { background: rgb(63, 79, 98); } .lightbox-wall-swatch.swatch-wall-aged-lavender { background: rgb(124, 101, 121); } .lightbox-wall-swatch.swatch-wall-northern-violet { background: rgb(78, 60, 82); } .lightbox-wall-swatch.swatch-wall-slate-grey { background: rgb(113, 124, 140); } /* Frame picker */ .lightbox-frame-wrap { position: relative; display: inline-flex; pointer-events: auto; } /* Frame picker — wide enough for long labels (e.g. Moulded Gold, Redwood). Mobile: cap to viewport so it never overflows the toolbar. */ .lightbox-frame-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: min(220px, 92vw); width: max-content; max-width: min(280px, 92vw); padding: 10px; border-radius: var(--radius-14); background: var(--background-default); border: var(--border-thin) solid var(--border-subtle); box-shadow: 0 12px 32px rgb(0, 0, 0, 0.28), 0 0 0 1px rgb(0, 175, 201, 0.12); z-index: 10010; flex-direction: column; gap: 6px; box-sizing: border-box; } .lightbox-frame-menu.is-open { display: flex; } .lightbox-frame-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: var(--border-thin) solid transparent; border-radius: var(--radius-6); background: transparent; color: var(--text-primary); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: var(--cursor-select); text-align: left; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .lightbox-frame-option:hover, .lightbox-frame-option:focus-visible { background: var(--color-primary-soft); border-color: var(--border-default); outline: none; transform: translateX(3px); } .lightbox-frame-option.is-selected { border-color: var(--color-primary-hover); background: rgb(0, 175, 201, 0.12); box-shadow: inset 0 0 0 1px var(--shadow-toolbar); } .lightbox-frame-swatch { width: 22px; height: 22px; border-radius: var(--radius-3); border: var(--border-thin) solid rgb(44, 44, 44, 0.2); flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .lightbox-frame-option:hover .lightbox-frame-swatch, .lightbox-frame-option:focus-visible .lightbox-frame-swatch { transform: scale(1.1); box-shadow: 0 0 0 2px var(--color-primary-hover); } .lightbox-frame-swatch.frame-gloss-white-swatch { background-color: rgb(255, 255, 255); background-image: url("/img/gallery/frames/frame-gloss-white-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-gloss-gold-swatch { background-color: rgb(222, 163, 53); background-image: url("/img/gallery/frames/frame-gloss-gold-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-gloss-black-swatch { background-color: rgb(0, 0, 0); background-image: url("/img/gallery/frames/frame-gloss-black-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-timber-white-swatch { background-color: rgb(255, 252, 250); background-image: url("/img/gallery/frames/frame-timber-white-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-timber-grey-swatch { background-color: rgb(150, 150, 150); background-image: url("/img/gallery/frames/frame-timber-grey-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-timber-light-swatch { background-color: rgb(236, 200, 180); background-image: url("/img/gallery/frames/frame-timber-light-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-timber-swatch { background-color: rgb(138, 62, 48); background-image: url("/img/gallery/frames/frame-timber-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-timber-redwood-swatch { background-color: rgb(218, 126, 103); background-image: url("/img/gallery/frames/frame-timber-redwood-swatch.webp"); background-size: cover; } .lightbox-frame-swatch.frame-timber-black-swatch { background-color: rgb(22, 22, 22); background-image: url("/img/gallery/frames/frame-timber-black-swatch.webp"); background-size: cover; } /*.lightbox-frame-swatch.frame-moulded-gold-swatch { background-color: rgb(218, 126, 103); background-image: url("/img/gallery/frames/frame-moulded-gold-swatch.webp"); background-size: cover; } */ /* Stage: stack works / framed image / caption / thumbs. Image size is driven ONLY by vw/vh on #lightbox-img (not % heights). Percentage max-height fails inside flex and caused desktop width-fill + crop. */ .lightbox-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; max-width: calc(100% - 120px); max-height: 100%; gap: 8px; cursor: var(--cursor); z-index: 1; } .lightbox-works, .lightbox-thumbs, .lightbox-caption, .lightbox-counter, .lightbox-bottom-panel { flex-shrink: 0; } .lightbox-inner { position: relative; display: flex; align-items: center; justify-content: center; width: auto; max-width: 100%; overflow: visible; /* do not clip the mat or painting */ cursor: var(--cursor); pointer-events: auto; } .lightbox-inner.is-zoomed { overflow: auto; max-width: min(90vw, 100%); max-height: 90vh; border-radius: var(--radius-9); /* Firefox — same teal system as Wall menu / site */ scrollbar-width: thin; scrollbar-color: rgb(0, 150, 160, 0.55) rgb(0, 0, 0, 0.15); } .lightbox-inner.is-zoomed::-webkit-scrollbar { width: 8px; height: 8px; } .lightbox-inner.is-zoomed::-webkit-scrollbar-corner { background: transparent; } .lightbox-inner.is-zoomed::-webkit-scrollbar-track { background: rgb(0, 0, 0, 0.12); border-radius: var(--radius-9); margin: 6px; } .lightbox-inner.is-zoomed::-webkit-scrollbar-thumb { background: rgb(0, 150, 160, 0.55); border-radius: var(--radius-9); border: var(--border-standard) solid transparent; background-clip: padding-box; } .lightbox-inner.is-zoomed::-webkit-scrollbar-thumb:hover { background: rgb(0, 100, 110, 0.85); /* light → dark */ background-clip: padding-box; } /* Frame mat = padding on all four sides (even picture frame). Size comes from the image; no max-height on the box itself. */ .lightbox-frame-box { display: inline-block; box-sizing: border-box; padding: 24px; /* even mat: top, right, bottom, left */ border-radius: var(--radius-0); line-height: 0; max-width: 100%; box-shadow: var(--shadow-forest), 0 0 40px rgb(0, 0, 0, 0.55); transition: background 0.35s ease, box-shadow 0.35s ease; background: var(--background-default); } /* Frame materials — textures in /img/gallery/frames/ Gloss white / matte black / pine / timber (512px WebP + PNG masters) */ .lightbox-frame-box.frame-gloss-white { background-color: rgb(255, 255, 255); background-image: url("/img/gallery/frames/frame-gloss-white.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); } .lightbox-frame-box.frame-gloss-gold { background-color: rgb(222, 163, 53); background-image: url("/img/gallery/frames/frame-gloss-gold.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); } .lightbox-frame-box.frame-gloss-black { background-color: rgb(0, 0, 0); background-image: url("/img/gallery/frames/frame-gloss-black.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); } .lightbox-frame-box.frame-timber-white { background-color: rgb(255, 252, 250); background-image: url("/img/gallery/frames/frame-timber-white.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } .lightbox-frame-box.frame-timber-grey { background-color: rgb(150, 150, 150); background-image: url("/img/gallery/frames/frame-timber-grey.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } .lightbox-frame-box.frame-timber-light { background-color: rgb(236, 200, 180); background-image: url("/img/gallery/frames/frame-timber-light.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } .lightbox-frame-box.frame-timber { background-color: rgb(138, 62, 48); background-image: url("/img/gallery/frames/frame-timber.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } .lightbox-frame-box.frame-timber-redwood { background-color: rgb(218, 126, 103); background-image: url("/img/gallery/frames/frame-timber-redwood.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } .lightbox-frame-box.frame-timber-black { background-color: rgb(22, 22, 22); background-image: url("/img/gallery/frames/frame-timber-black.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } /*.lightbox-frame-box.frame-moulded-gold { background-color: rgb(218, 126, 103); background-image: url("/img/gallery/frames/frame-moulded-gold.webp"); background-size: cover; background-position: center; box-shadow: 3px 6px 15px rgb(0, 0, 0, 0.40); object-fit: scale-down; image-rendering: high-quality; } */ /* Desktop + mobile: constrain with viewport units only. ~65vh leaves room for toolbar, artworks strip, caption, thumbs, and mat padding so the full painting (including signature) stays visible. */ #lightbox-img { display: block; width: auto; height: auto; max-width: min(82vw, 1100px); max-height: 58vh; /* leave room for top + bottom cards */ object-fit: contain; object-position: center; /* 2px edge between painting and frame mat */ border: 2px solid rgb(66, 66, 66); border-top-color: rgb(22, 22, 22) !important; border-right-color: rgb(90, 90, 90) !important; border-bottom-color: rgb(45, 45, 45) !important; border-left-color: rgb(33, 33, 33) !important; border-radius: var(--radius-0); box-shadow: none; cursor: var(--cursor); pointer-events: none; transform-origin: center center; user-select: none; -webkit-user-drag: none; transition: opacity 0.25s ease, transform 0.25s ease; background: transparent; box-sizing: border-box; } #lightbox-img.is-loading { opacity: 0.8; } .lightbox-loader { position: absolute; width: 40px; height: 40px; border: 3px solid rgb(0, 175, 201, 0.25); border-top-color: rgb(0, 175, 201); border-radius: 50%; animation: lightbox-spin 1s linear infinite; z-index: 2; pointer-events: none; } @keyframes lightbox-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lightbox-loader { animation: none; } #lightbox-img { transition: none; } } /* Caption lives inside .lightbox-bottom-panel (light card). Min-height = 2 lines so 1↔2 line text never jumps the stage. */ .lightbox-caption { display: none; margin: 0; width: 100%; max-width: 100%; min-height: calc(1.35em * 2); text-align: center; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--text-primary); text-shadow: none; pointer-events: none; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; } /* TOP: artworks navigator — coral controls */ /* Top artworks strip — panel matches site default (off-white / soft border / radius-14) */ .lightbox-works { display: none; /* Grid pins arrows to outer edges; track stays centred */ grid-template-columns: 36px minmax(0, 1fr) 36px; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 6px; width: min(92vw, 520px); max-width: min(92vw, 520px); min-width: min(92vw, 280px); padding: 12px 14px; pointer-events: auto; z-index: 10001; box-sizing: border-box; background: var(--panel-surface); border: 1px solid var(--panel-surface-border); border-radius: var(--radius-14); box-shadow: 0 4px 18px rgb(0, 0, 0, 0.18); } .lightbox-works[style*="flex"], .lightbox-works[style*="grid"] { display: grid !important; } .lightbox-works-label { grid-column: 1 / -1; display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 0; pointer-events: none; } /* Coral nav — light → dark on hover. Arrows are CSS triangles (W3C-style geometric carets), not unicode glyphs, so they centre truly in the circle. */ .lightbox-works-nav { width: 36px; height: 36px; border-radius: 50%; border: var(--border-standard) solid rgb(255, 252, 250, 0.95); background: var(--coral-soft); color: transparent; /* hide ‹ › text nodes */ font-size: 0; line-height: 0; cursor: var(--cursor-select); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; margin: 0; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; position: relative; } .lightbox-works-nav::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-radius: 50%; /* default size — direction set per button */ flex-shrink: 0; } #works-prev::before, .lightbox-works-nav#works-prev::before { border-width: 7px 11px 7px 0; border-color: transparent var(--color-blend) transparent transparent; margin-right: 2px; /* optical balance of triangle weight */ border-radius: 50%; } #works-next::before, .lightbox-works-nav#works-next::before { border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--color-blend); margin-left: 2px; border-radius: 50%; } .lightbox-works-nav:hover, .lightbox-works-nav:focus-visible { background: rgb(246, 84, 67); /* coral bright */ transform: scale(1.1); outline: 2px dashed rgb(246, 84, 67); /* coral bright */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 12px rgb(246, 84, 67, 0.45); /* coral bright */ } .lightbox-works-nav:disabled { opacity: 0.35; cursor: var(--cursor); transform: none; box-shadow: none; } .lightbox-works-track { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; width: 100%; } .lightbox-work { width: 48px; height: 36px; padding: 0; border-radius: var(--radius-3); border: var(--border-standard) solid rgb(255, 252, 250, 0.25); cursor: var(--cursor-select); opacity: 0.8; filter: brightness(0.8); transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; flex-shrink: 0; background: rgb(30, 30, 30); overflow: hidden; display: block; } .lightbox-work img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .lightbox-work.is-side:hover, .lightbox-work.is-side:focus-visible { opacity: 0.96; filter: brightness(0.96); border-color: rgb(0, 150, 160, 0.96); outline: none; } .lightbox-work.is-active { opacity: 1; filter: brightness(1.02); border-color: var(--color-accent); box-shadow: 0 0 15px rgb(255, 133, 110); border: 2px solid rgb(255, 133, 110); border-radius: var(--radius-3); transform: scale(1.06); width: 76px; height: 56px; z-index: 2; } .lightbox.lightbox--wall-white .lightbox-work:not(.is-active), .lightbox.lightbox--wall-offwhite .lightbox-work:not(.is-active), .lightbox.lightbox--wall-cream .lightbox-work:not(.is-active), .lightbox.lightbox--wall-ivory .lightbox-work:not(.is-active), .lightbox.lightbox--wall-beige .lightbox-work:not(.is-active), .lightbox.lightbox--wall-teal-soft .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mint .lightbox-work:not(.is-active), .lightbox.lightbox--wall-sage .lightbox-work:not(.is-active), .lightbox.lightbox--wall-teal-mid .lightbox-work:not(.is-active), .lightbox.lightbox--wall-black .lightbox-work:not(.is-active), .lightbox.lightbox--wall-museum-white .lightbox-work:not(.is-active), .lightbox.lightbox--wall-plaster .lightbox-work:not(.is-active), .lightbox.lightbox--wall-linen .lightbox-work:not(.is-active), .lightbox.lightbox--wall-putty .lightbox-work:not(.is-active), .lightbox.lightbox--wall-graphite .lightbox-work:not(.is-active), .lightbox.lightbox--wall-charcoal .lightbox-work:not(.is-active), .lightbox.lightbox--wall-seafoam-mist .lightbox-work:not(.is-active), .lightbox.lightbox--wall-midnight .lightbox-work:not(.is-active), .lightbox.lightbox--wall-navy .lightbox-work:not(.is-active), .lightbox.lightbox--wall-clear-skies .lightbox-work:not(.is-active), .lightbox.lightbox--wall-storm .lightbox-work:not(.is-active), .lightbox.lightbox--wall-morning-glow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-reef-sand .lightbox-work:not(.is-active), .lightbox.lightbox--wall-coral-dust .lightbox-work:not(.is-active), .lightbox.lightbox--wall-dusk-mauve .lightbox-work:not(.is-active), .lightbox.lightbox--wall-deep-lagoon .lightbox-work:not(.is-active), .lightbox.lightbox--wall-night-harbour .lightbox-work:not(.is-active), .lightbox.lightbox--wall-champagne .lightbox-work:not(.is-active), .lightbox.lightbox--wall-taupe-silk .lightbox-work:not(.is-active), .lightbox.lightbox--wall-velvet-blush .lightbox-work:not(.is-active), .lightbox.lightbox--wall-oxblood .lightbox-work:not(.is-active), .lightbox.lightbox--wall-forest-smoke .lightbox-work:not(.is-active), .lightbox.lightbox--wall-ink .lightbox-work:not(.is-active), .lightbox.lightbox--wall-burnished-rose .lightbox-work:not(.is-active), .lightbox.lightbox--wall-quiet-rose .lightbox-work:not(.is-active), .lightbox.lightbox--wall-rosewater-glow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-porcelain-blush .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mulled-plum .lightbox-work:not(.is-active), .lightbox.lightbox--wall-eucalyptus-mist .lightbox-work:not(.is-active), .lightbox.lightbox--wall-whisper-rose .lightbox-work:not(.is-active), .lightbox.lightbox--wall-blush-petal .lightbox-work:not(.is-active), .lightbox.lightbox--wall-velvet-taupe .lightbox-work:not(.is-active), .lightbox.lightbox--wall-coral-kiss .lightbox-work:not(.is-active), .lightbox.lightbox--wall-cocoa-velvet .lightbox-work:not(.is-active), .lightbox.lightbox--wall-apricot-light .lightbox-work:not(.is-active), .lightbox.lightbox--wall-amber-sun .lightbox-work:not(.is-active), .lightbox.lightbox--wall-peony-flame .lightbox-work:not(.is-active), .lightbox.lightbox--wall-cranberry-velvet .lightbox-work:not(.is-active), .lightbox.lightbox--wall-lavender-haze .lightbox-work:not(.is-active), .lightbox.lightbox--wall-silver-storm .lightbox-work:not(.is-active), .lightbox.lightbox--wall-soft-terracotta .lightbox-work:not(.is-active), .lightbox.lightbox--wall-blue-steel .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mauve-whisper .lightbox-work:not(.is-active), .lightbox.lightbox--wall-morning-blush .lightbox-work:not(.is-active), .lightbox.lightbox--wall-alpine-rose .lightbox-work:not(.is-active), .lightbox.lightbox--wall-sage-veil .lightbox-work:not(.is-active), .lightbox.lightbox--wall-golden-wildflower .lightbox-work:not(.is-active), .lightbox.lightbox--wall-evergreen-hush .lightbox-work:not(.is-active), .lightbox.lightbox--wall-velvet-currant .lightbox-work:not(.is-active), .lightbox.lightbox--wall-black-velvet .lightbox-work:not(.is-active), .lightbox.lightbox--wall-maroon-allure .lightbox-work:not(.is-active), .lightbox.lightbox--wall-amber-blush .lightbox-work:not(.is-active), .lightbox.lightbox--wall-antique-bronze .lightbox-work:not(.is-active), .lightbox.lightbox--wall-ember-heart .lightbox-work:not(.is-active), .lightbox.lightbox--wall-burnished-terracotta .lightbox-work:not(.is-active), .lightbox.lightbox--wall-blush-sunset .lightbox-work:not(.is-active), .lightbox.lightbox--wall-serene-nude .lightbox-work:not(.is-active), .lightbox.lightbox--wall-ethereal-blush .lightbox-work:not(.is-active), .lightbox.lightbox--wall-dawn-lilac .lightbox-work:not(.is-active), .lightbox.lightbox--wall-valley-rose .lightbox-work:not(.is-active), .lightbox.lightbox--wall-lilac-grove .lightbox-work:not(.is-active), .lightbox.lightbox--wall-stormy-twilight .lightbox-work:not(.is-active), .lightbox.lightbox--wall-midnight-valley .lightbox-work:not(.is-active), .lightbox.lightbox--wall-sherbet-rose .lightbox-work:not(.is-active), .lightbox.lightbox--wall-coral-radiance .lightbox-work:not(.is-active), .lightbox.lightbox--wall-peach-glow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-golden-sunset .lightbox-work:not(.is-active), .lightbox.lightbox--wall-sage-meadow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-masters-midnight .lightbox-work:not(.is-active), .lightbox.lightbox--wall-ophelia-night .lightbox-work:not(.is-active), .lightbox.lightbox--wall-midnight-brocade .lightbox-work:not(.is-active), .lightbox.lightbox--wall-silver-whisper .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mountain-mist .lightbox-work:not(.is-active), .lightbox.lightbox--wall-gully-blue .lightbox-work:not(.is-active), .lightbox.lightbox--wall-forest-dawn .lightbox-work:not(.is-active), .lightbox.lightbox--wall-forest-dusk .lightbox-work:not(.is-active), .lightbox.lightbox--wall-deep-forest .lightbox-work:not(.is-active), .lightbox.lightbox--wall-lavender-cream .lightbox-work:not(.is-active), .lightbox.lightbox--wall-cinnamon-glow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mollys-shell .lightbox-work:not(.is-active), .lightbox.lightbox--wall-golden-custard .lightbox-work:not(.is-active), .lightbox.lightbox--wall-caramel-fudge .lightbox-work:not(.is-active), .lightbox.lightbox--wall-burnt-brick .lightbox-work:not(.is-active), .lightbox.lightbox--wall-golden-ochre .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mossy-forest .lightbox-work:not(.is-active), .lightbox.lightbox--wall-warm-sandstone .lightbox-work:not(.is-active), .lightbox.lightbox--wall-twilight-indigo .lightbox-work:not(.is-active), .lightbox.lightbox--wall-black-cherry .lightbox-work:not(.is-active), .lightbox.lightbox--wall-ripe-cherry .lightbox-work:not(.is-active), .lightbox.lightbox--wall-deep-iris .lightbox-work:not(.is-active), .lightbox.lightbox--wall-corimbia-shadow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-mountain-eucalyptus .lightbox-work:not(.is-active), .lightbox.lightbox--wall-misty-hollow .lightbox-work:not(.is-active), .lightbox.lightbox--wall-plaster-alcove .lightbox-work:not(.is-active), .lightbox.lightbox--wall-soot .lightbox-work:not(.is-active), .lightbox.lightbox--wall-old-moss .lightbox-work:not(.is-active), .lightbox.lightbox--wall-cadet-grey .lightbox-work:not(.is-active), .lightbox.lightbox--wall-steel-smoke .lightbox-work:not(.is-active), .lightbox.lightbox--wall-aged-lavender .lightbox-work:not(.is-active), .lightbox.lightbox--wall-northern-violet .lightbox-work:not(.is-active), .lightbox.lightbox--wall-slate-grey .lightbox-work:not(.is-active) { border-color: rgb(44, 44, 44, 0.25); background: var(--background-default); } /* BOTTOM: views of current painting — teal */ /* Bottom panel — same card language as top works strip. Holds caption (min 2 lines) + alternate-view thumbnails. */ /* Bottom panel — same footprint language as top .lightbox-works card. Caption + carousel (muted sides, highlighted centre, mauve nav arrows). */ .lightbox-bottom-panel { display: none; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; /* Fixed width matches top works card — caption length cannot resize the box */ width: min(92vw, 520px); max-width: min(92vw, 520px); min-width: min(92vw, 280px); padding: 12px 14px; box-sizing: border-box; background: var(--panel-surface); border: var(--border-thin) solid var(--panel-surface-border); border-radius: var(--radius-14); box-shadow: 0 4px 18px rgb(0, 0, 0, 0.18); pointer-events: auto; z-index: 10001; flex-shrink: 0; overflow: visible; /* never crop thumbs or arrows */ } .lightbox-bottom-panel.is-visible, .lightbox-bottom-panel[style*="flex"] { display: flex !important; } /* Same grid as top works: arrows on outer edges, track centred */ .lightbox-thumbs-row { display: none; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; column-gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } .lightbox-thumbs-row[style*="flex"], .lightbox-thumbs-row[style*="grid"] { display: grid !important; } .lightbox-thumbs-nav { width: 36px; height: 36px; border-radius: 50%; border: var(--border-standard) solid rgb(255, 252, 250, 0.95); background: rgb(255, 148, 167, 0.95); /* pink-soft */ color: transparent; font-size: 0; line-height: 0; cursor: var(--cursor-select); display: none; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; margin: 0; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; position: relative; } .lightbox-thumbs-nav::before { content: ""; display: block; width: 0; height: 0; border-style: solid; flex-shrink: 0; } #thumbs-prev::before { border-width: 7px 11px 7px 0; border-color: transparent var(--color-blend) transparent transparent; margin-right: 2px; } #thumbs-next::before { border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--color-blend); margin-left: 2px; } .lightbox-thumbs-nav:hover, .lightbox-thumbs-nav:focus-visible { background: rgb(232, 90, 139); /* pink */ transform: scale(1.1); outline: 2px dashed rgb(232, 90, 139); /* pink */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 12px rgb(232, 90, 139, 0.75); /* pink */ } .lightbox-thumbs { display: none; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; width: 100%; max-width: 100%; padding: 0; pointer-events: auto; z-index: 1; background: transparent; border: var(--border-hidden); box-shadow: none; min-width: 0; } /* Match top .lightbox-work sizing: side muted, centre highlighted */ .lightbox-thumb { width: 48px; height: 36px; padding: 0; border-radius: var(--radius-3); border: var(--border-standard) solid rgb(44, 44, 44, 0.2); cursor: var(--cursor-select); opacity: 0.8; filter: brightness(0.8); transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; flex-shrink: 0; background: rgb(30, 30, 30); overflow: hidden; display: block; } .lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .lightbox-thumb.is-side:hover, .lightbox-thumb.is-side:focus-visible { opacity: 0.96; filter: brightness(0.96); border-color: rgb(0, 150, 160, 0.96); border-radius: var(--radius-3); outline: none; } .lightbox-thumb.is-active { opacity: 1; filter: brightness(1.04); border-color: var(--pink); box-shadow: 0 0 15px rgb(251, 136, 158); /* pink-vivid */ border: 2px solid rgb(251, 136, 158); border-radius: var(--radius-3); transform: scale(1.06); width: 76px; height: 56px; z-index: 2; } .lightbox.lightbox--wall-white .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-offwhite .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-cream .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-ivory .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-beige .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-teal-soft .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mint .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-sage .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-teal-mid .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-black .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-museum-white .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-plaster .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-linen .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-putty .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-graphite .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-charcoal .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-seafoam-mist .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-midnight .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-navy .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-clear-skies .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-storm .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-morning-glow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-reef-sand .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-coral-dust .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-dusk-mauve .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-deep-lagoon .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-night-harbour .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-champagne .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-taupe-silk .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-velvet-blush .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-oxblood .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-forest-smoke .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-ink .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-burnished-rose .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-quiet-rose .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-rosewater-glow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-porcelain-blush .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mulled-plum .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-eucalyptus-mist .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-whisper-rose .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-blush-petal .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-velvet-taupe .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-coral-kiss .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-cocoa-velvet .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-apricot-light .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-amber-sun .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-peony-flame .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-cranberry-velvet .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-lavender-haze .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-silver-storm .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-soft-terracotta .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-blue-steel .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mauve-whisper .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-morning-blush .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-alpine-rose .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-sage-veil .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-golden-wildflower .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-evergreen-hush .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-velvet-currant .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-black-velvet .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-maroon-allure .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-amber-blush .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-antique-bronze .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-ember-heart .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-burnished-terracotta .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-blush-sunset .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-serene-nude .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-ethereal-blush .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-dawn-lilac .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-valley-rose .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-lilac-grove .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-stormy-twilight .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-midnight-valley .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-sherbet-rose .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-coral-radiance .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-peach-glow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-golden-sunset .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-sage-meadow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-masters-midnight .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-ophelia-night .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-midnight-brocade .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-silver-whisper .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mountain-mist .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-gully-blue .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-forest-dawn .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-forest-dusk .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-deep-forest .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-lavender-cream .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-cinnamon-glow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mollys-shell .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-golden-custard .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-caramel-fudge .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-burnt-brick .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-golden-ochre .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mossy-forest .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-warm-sandstone .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-twilight-indigo .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-black-cherry .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-ripe-cherry .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-deep-iris .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-corimbia-shadow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-mountain-eucalyptus .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-misty-hollow .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-plaster-alcove .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-soot .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-old-moss .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-cadet-grey .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-steel-smoke .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-aged-lavender .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-northern-violet .lightbox-thumb:not(.is-active), .lightbox.lightbox--wall-slate-grey .lightbox-thumb:not(.is-active) { border-color: rgb(44, 44, 44, 0.35); background: var(--background-default); } /* Side arrows = views of current work (teal) */ /* Side arrows (prev/next alternate views). Vertical centering MUST use translateY(-50%) on every state (default, hover, focus, active). Stripping transform causes the button to drop on click. */ /* Side arrows (prev/next alternate views) — mauve so teal stays free for wall colours. Always keep translateY(-50%) on every state. */ .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: var(--border-standard) solid rgb(255, 252, 250, 0.95); border-radius: 50%; background: rgb(0, 175, 201, 0.95); /* teal-pop */ color: transparent; /* hide ‹ › text */ font-size: 0; line-height: 0; cursor: var(--cursor-select); z-index: 10002; display: none; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; padding: 0; margin: 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; user-select: none; will-change: transform; box-sizing: border-box; } .lightbox-nav::before { content: ""; display: block; width: 0; height: 0; border-style: solid; flex-shrink: 0; } .lightbox-prev::before { border-width: 10px 14px 10px 0; border-color: transparent var(--color-blend) transparent transparent; margin-right: 3px; } .lightbox-next::before { border-width: 10px 0 10px 14px; border-color: transparent transparent transparent var(--color-blend); margin-left: 3px; } .lightbox-nav:hover, .lightbox-nav:focus-visible { background: rgb(0, 175, 201); /* teal-pop */ transform: translateY(-50%) scale(1.1); outline: 2px dashed rgb(0, 175, 201); /* teal-pop */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 16px rgb(0, 175, 201, 0.55); /*teal-pop */ } .lightbox-nav:active { background: rgb(0, 175, 201); /* teal-pop */ transform: translateY(-50%) scale(1.1); border-radius: 50%; outline: 2px dashed rgb(0, 175, 201); /*teal-pop */ outline-offset: 9px; box-shadow: 0 0 12px rgb(0, 175, 201, 0.45); /* teal-pop */ } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } /* Image counter — overlaid on the lower centre of the framed image. */ .lightbox-counter { display: none; position: absolute; left: 50%; bottom: 36px; /* clear frame mat */ transform: translateX(-50%); color: var(--color-blend); font-size: 13px; font-weight: bold; background: rgb(0, 0, 0, 0.65); padding: 5px 14px; border-radius: var(--radius-6); border: var(--border-thin) solid rgb(255, 252, 250, 0.25); pointer-events: none; z-index: 5; line-height: 1.2; max-width: calc(100% - 24px); box-sizing: border-box; white-space: nowrap; } .lightbox.lightbox--wall-white .lightbox-counter, .lightbox.lightbox--wall-offwhite .lightbox-counter, .lightbox.lightbox--wall-cream .lightbox-counter, .lightbox.lightbox--wall-ivory .lightbox-counter, .lightbox.lightbox--wall-beige .lightbox-counter, .lightbox.lightbox--wall-teal-soft .lightbox-counter, .lightbox.lightbox--wall-mint .lightbox-counter, .lightbox.lightbox--wall-sage .lightbox-counter, .lightbox.lightbox--wall-teal-mid .lightbox-counter, .lightbox.lightbox--wall-black .lightbox-counter, .lightbox.lightbox--wall-museum-white .lightbox-counter, .lightbox.lightbox--wall-plaster .lightbox-counter, .lightbox.lightbox--wall-linen .lightbox-counter, .lightbox.lightbox--wall-putty .lightbox-counter, .lightbox.lightbox--wall-graphite .lightbox-counter, .lightbox.lightbox--wall-charcoal .lightbox-counter, .lightbox.lightbox--wall-seafoam-mist .lightbox-counter, .lightbox.lightbox--wall-midnight .lightbox-counter, .lightbox.lightbox--wall-navy .lightbox-counter, .lightbox.lightbox--wall-clear-skies .lightbox-counter, .lightbox.lightbox--wall-storm .lightbox-counter, .lightbox.lightbox--wall-morning-glow .lightbox-counter, .lightbox.lightbox--wall-reef-sand .lightbox-counter, .lightbox.lightbox--wall-coral-dust .lightbox-counter, .lightbox.lightbox--wall-dusk-mauve .lightbox-counter, .lightbox.lightbox--wall-deep-lagoon .lightbox-counter, .lightbox.lightbox--wall-night-harbour .lightbox-counter, .lightbox.lightbox--wall-champagne .lightbox-counter, .lightbox.lightbox--wall-taupe-silk .lightbox-counter, .lightbox.lightbox--wall-velvet-blush .lightbox-counter, .lightbox.lightbox--wall-oxblood .lightbox-counter, .lightbox.lightbox--wall-forest-smoke .lightbox-counter, .lightbox.lightbox--wall-ink .lightbox-counter, .lightbox.lightbox--wall-burnished-rose .lightbox-counter, .lightbox.lightbox--wall-quiet-rose .lightbox-counter, .lightbox.lightbox--wall-rosewater-glow .lightbox-counter, .lightbox.lightbox--wall-porcelain-blush .lightbox-counter, .lightbox.lightbox--wall-mulled-plum .lightbox-counter, .lightbox.lightbox--wall-eucalyptus-mist .lightbox-counter, .lightbox.lightbox--wall-whisper-rose .lightbox-counter, .lightbox.lightbox--wall-blush-petal .lightbox-counter, .lightbox.lightbox--wall-velvet-taupe .lightbox-counter, .lightbox.lightbox--wall-coral-kiss .lightbox-counter, .lightbox.lightbox--wall-cocoa-velvet .lightbox-counter, .lightbox.lightbox--wall-apricot-light .lightbox-counter, .lightbox.lightbox--wall-amber-sun .lightbox-counter, .lightbox.lightbox--wall-peony-flame .lightbox-counter, .lightbox.lightbox--wall-cranberry-velvet .lightbox-counter, .lightbox.lightbox--wall-lavender-haze .lightbox-counter, .lightbox.lightbox--wall-silver-storm .lightbox-counter, .lightbox.lightbox--wall-soft-terracotta .lightbox-counter, .lightbox.lightbox--wall-blue-steel .lightbox-counter, .lightbox.lightbox--wall-mauve-whisper .lightbox-counter, .lightbox.lightbox--wall-morning-blush .lightbox-counter, .lightbox.lightbox--wall-alpine-rose .lightbox-counter, .lightbox.lightbox--wall-sage-veil .lightbox-counter, .lightbox.lightbox--wall-golden-wildflower .lightbox-counter, .lightbox.lightbox--wall-evergreen-hush .lightbox-counter, .lightbox.lightbox--wall-velvet-currant .lightbox-counter, .lightbox.lightbox--wall-black-velvet .lightbox-counter, .lightbox.lightbox--wall-maroon-allure .lightbox-counter, .lightbox.lightbox--wall-amber-blush .lightbox-counter, .lightbox.lightbox--wall-antique-bronze .lightbox-counter, .lightbox.lightbox--wall-ember-heart .lightbox-counter, .lightbox.lightbox--wall-burnished-terracotta .lightbox-counter, .lightbox.lightbox--wall-blush-sunset .lightbox-counter, .lightbox.lightbox--wall-serene-nude .lightbox-counter, .lightbox.lightbox--wall-ethereal-blush .lightbox-counter, .lightbox.lightbox--wall-dawn-lilac .lightbox-counter, .lightbox.lightbox--wall-valley-rose .lightbox-counter, .lightbox.lightbox--wall-lilac-grove .lightbox-counter, .lightbox.lightbox--wall-stormy-twilight .lightbox-counter, .lightbox.lightbox--wall-midnight-valley .lightbox-counter, .lightbox.lightbox--wall-sherbet-rose .lightbox-counter, .lightbox.lightbox--wall-coral-radiance .lightbox-counter, .lightbox.lightbox--wall-peach-glow .lightbox-counter, .lightbox.lightbox--wall-golden-sunset .lightbox-counter, .lightbox.lightbox--wall-sage-meadow .lightbox-counter, .lightbox.lightbox--wall-masters-midnight .lightbox-counter, .lightbox.lightbox--wall-ophelia-night .lightbox-counter, .lightbox.lightbox--wall-midnight-brocade .lightbox-counter, .lightbox.lightbox--wall-silver-whisper .lightbox-counter, .lightbox.lightbox--wall-mountain-mist .lightbox-counter, .lightbox.lightbox--wall-gully-blue .lightbox-counter, .lightbox.lightbox--wall-forest-dawn .lightbox-counter, .lightbox.lightbox--wall-forest-dusk .lightbox-counter, .lightbox.lightbox--wall-deep-forest .lightbox-counter, .lightbox.lightbox--wall-lavender-cream .lightbox-counter, .lightbox.lightbox--wall-cinnamon-glow .lightbox-counter, .lightbox.lightbox--wall-mollys-shell .lightbox-counter, .lightbox.lightbox--wall-golden-custard .lightbox-counter, .lightbox.lightbox--wall-caramel-fudge .lightbox-counter, .lightbox.lightbox--wall-burnt-brick .lightbox-counter, .lightbox.lightbox--wall-golden-ochre .lightbox-counter, .lightbox.lightbox--wall-mossy-forest .lightbox-counter, .lightbox.lightbox--wall-warm-sandstone .lightbox-counter, .lightbox.lightbox--wall-twilight-indigo .lightbox-counter, .lightbox.lightbox--wall-black-cherry .lightbox-counter, .lightbox.lightbox--wall-ripe-cherry .lightbox-counter, .lightbox.lightbox--wall-deep-iris .lightbox-counter, .lightbox.lightbox--wall-corimbia-shadow .lightbox-counter, .lightbox.lightbox--wall-mountain-eucalyptus .lightbox-counter, .lightbox.lightbox--wall-misty-hollow .lightbox-counter, .lightbox.lightbox--wall-plaster-alcove .lightbox-counter, .lightbox.lightbox--wall-soot .lightbox-counter, .lightbox.lightbox--wall-old-moss .lightbox-counter, .lightbox.lightbox--wall-cadet-grey .lightbox-counter, .lightbox.lightbox--wall-steel-smoke .lightbox-counter, .lightbox.lightbox--wall-aged-lavender .lightbox-counter, .lightbox.lightbox--wall-northern-violet .lightbox-counter, .lightbox.lightbox--wall-slate-grey .lightbox-counter { color: rgb(44, 44, 44); background: rgb(255, 252, 250, 0.92); border-color: rgb(44, 44, 44, 0.15); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (max-width: 768px) { .menu-toggle { display: block; } nav { flex-direction: column; width: 100%; max-height: 0; overflow: hidden; background: var(--background-default); transition: var(--transition-fast); } nav.active { max-height: 900px; padding-bottom: 18px; /* room for last-link underline */ } nav a { padding: 12px 0 16px; /* extra bottom so underline is not clipped */ text-align: center; } .hero h1, .block-error-h1 { font-size: 32px; } .hero p, .hero-text, .block-error-text p { font-size: 20px; } .footer-nav { flex-direction: column; gap: 12px; padding: 0 10px; } .header-inner { flex-direction: column; gap: 20px; height: auto; } .logo, .logo-picture { max-width: 90%; max-height: 127px; width: auto; height: auto; border: var(--border-hidden); z-index: 99; margin-left: auto; margin-right: auto; display: block; } .hero, .hero .container, .hero a { justify-content: center; align-items: center; text-align: center; width: 100%; } .block { padding: 24px 16px; } .lightbox { padding: 52px 8px 8px; } .lightbox-stage { max-width: calc(100% - 72px); gap: 6px; } .lightbox-frame-box { padding: 12px; border-radius: var(--radius-0); } #lightbox-img { max-width: min(92vw, 100%); max-height: 48vh; /* room for top + bottom cards on small screens */ border: var(--border-standard) solid rgb(72, 81, 74) !important; border-radius: var(--radius-0); } .lightbox-inner { overflow: visible; } .lightbox-works { gap: 6px; width: min(92vw, 520px); max-width: min(92vw, 520px); padding: 10px 10px; } .lightbox-work:not(.is-active) { width: 48px; height: 36px; } .lightbox-work.is-active { width: 76px; height: 56px; } .lightbox-works-nav { width: 32px; height: 32px; font-size: 18px; border-radius: 50%; } .lightbox-bottom-panel { width: min(92vw, 520px); max-width: min(92vw, 520px); padding: 10px 10px; gap: 6px; } .lightbox-thumbs { gap: 6px; max-width: 100%; } .lightbox-thumb:not(.is-active) { width: 48px; height: 36px; } .lightbox-thumb.is-active { width: 76px; height: 56px; } .lightbox-thumbs-nav { width: 32px; height: 32px; font-size: 18px; } .lightbox-nav { width: 40px; height: 40px; font-size: 22px; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } .lightbox-counter { font-size: 12px; padding: 4px 10px; bottom: 28px; } .lightbox-toolbar { gap: 6px; padding: 8px; } .lightbox-tool, .lightbox .close { font-size: 12px; padding: 6px 8px; } .lightbox-caption { font-size: 11px; min-height: calc(1.35em * 2); } .information-grid { grid-template-columns: 1fr; } } /*============================================================================== Wall Colour Labels Keys must match cpa-lightbox.js and gallery.html exactly. ==============================================================================*/ .lightbox.lightbox--wall-default { background: rgb(8, 8, 8, 0.96); } .lightbox-wall-swatch.swatch-wall-default { background: rgb(8, 8, 8, 0.96); } .lightbox.lightbox--wall-white { background: rgb(254, 254, 254); } .lightbox-wall-swatch.swatch-wall-white { background: rgb(254, 254, 254); } .lightbox.lightbox--wall-offwhite { background: rgb(255, 252, 250); } .lightbox-wall-swatch.swatch-wall-offwhite { background: rgb(255, 252, 250); } .lightbox.lightbox--wall-cream { background: rgb(249, 245, 241); } .lightbox-wall-swatch.swatch-wall-cream { background: rgb(249, 245, 241); } .lightbox.lightbox--wall-ivory { background: rgb(242, 237, 227); } .lightbox-wall-swatch.swatch-wall-ivory { background: rgb(242, 237, 227); } .lightbox.lightbox--wall-beige { background: rgb(240, 230, 220); } .lightbox-wall-swatch.swatch-wall-beige { background: rgb(240, 230, 220); } .lightbox.lightbox--wall-teal-soft { background: rgb(230, 243, 243); } .lightbox-wall-swatch.swatch-wall-teal-soft { background: rgb(230, 243, 243); } .lightbox.lightbox--wall-mint { background: rgb(184, 209, 196); } .lightbox-wall-swatch.swatch-wall-mint { background: rgb(184, 209, 196); } .lightbox.lightbox--wall-sage { background: rgb(132, 174, 158); } .lightbox-wall-swatch.swatch-wall-sage { background: rgb(132, 174, 158); } .lightbox.lightbox--wall-teal-mid { background: rgb(0, 150, 160); } .lightbox-wall-swatch.swatch-wall-teal-mid { background: rgb(0, 150, 160); } .lightbox.lightbox--wall-black { background: rgb(8, 8, 8); } .lightbox-wall-swatch.swatch-wall-black { background: rgb(8, 8, 8); } .lightbox.lightbox--wall-museum-white { background: rgb(250, 249, 246); } .lightbox-wall-swatch.swatch-wall-museum-white { background: rgb(250, 249, 246); } .lightbox.lightbox--wall-plaster { background: rgb(244, 241, 234); } .lightbox-wall-swatch.swatch-wall-plaster { background: rgb(244, 241, 234); } .lightbox.lightbox--wall-linen { background: rgb(232, 225, 212); } .lightbox-wall-swatch.swatch-wall-linen { background: rgb(232, 225, 212); } .lightbox.lightbox--wall-putty { background: rgb(214, 208, 198); } .lightbox-wall-swatch.swatch-wall-putty { background: rgb(214, 208, 198); } .lightbox.lightbox--wall-graphite { background: rgb(54, 54, 52); } .lightbox-wall-swatch.swatch-wall-graphite { background: rgb(54, 54, 52); } .lightbox.lightbox--wall-charcoal { background: rgb(32, 32, 30); } .lightbox-wall-swatch.swatch-wall-charcoal { background: rgb(32, 32, 30); } .lightbox.lightbox--wall-seafoam-mist { background: rgb(220, 236, 232); } .lightbox-wall-swatch.swatch-wall-seafoam-mist { background: rgb(220, 236, 232); } .lightbox.lightbox--wall-midnight { background: rgb(1, 4, 16); } .lightbox-wall-swatch.swatch-wall-midnight { background: rgb(1, 4, 16); } .lightbox.lightbox--wall-navy { background: rgb(0, 0, 89); } .lightbox-wall-swatch.swatch-wall-navy { background: rgb(0, 0, 89); } .lightbox.lightbox--wall-clear-skies { background: rgb(186, 243, 254); } .lightbox-wall-swatch.swatch-wall-clear-skies { background: rgb(186, 243, 254); } .lightbox.lightbox--wall-storm { background: rgb(74, 95, 111); } .lightbox-wall-swatch.swatch-wall-storm { background: rgb(74, 95, 111); } .lightbox.lightbox--wall-morning-glow { background: rgb(255, 255, 213); } .lightbox-wall-swatch.swatch-wall-morning-glow { background: rgb(255, 255, 213); } .lightbox.lightbox--wall-reef-sand { background: rgb(236, 226, 210); } .lightbox-wall-swatch.swatch-wall-reef-sand { background: rgb(236, 226, 210); } .lightbox.lightbox--wall-coral-dust { background: rgb(245, 220, 212); } .lightbox-wall-swatch.swatch-wall-coral-dust { background: rgb(245, 220, 212); } .lightbox.lightbox--wall-dusk-mauve { background: rgb(210, 198, 208); } .lightbox-wall-swatch.swatch-wall-dusk-mauve { background: rgb(210, 198, 208); } .lightbox.lightbox--wall-deep-lagoon { background: rgb(18, 72, 78); } .lightbox-wall-swatch.swatch-wall-deep-lagoon { background: rgb(18, 72, 78); } .lightbox.lightbox--wall-night-harbour { background: rgb(12, 28, 34); } .lightbox-wall-swatch.swatch-wall-night-harbour { background: rgb(12, 28, 34); } .lightbox.lightbox--wall-champagne { background: rgb(242, 232, 214); } .lightbox-wall-swatch.swatch-wall-champagne { background: rgb(242, 232, 214); } .lightbox.lightbox--wall-taupe-silk { background: rgb(186, 174, 160); } .lightbox-wall-swatch.swatch-wall-taupe-silk { background: rgb(186, 174, 160); } .lightbox.lightbox--wall-velvet-blush { background: rgb(168, 120, 128); } .lightbox-wall-swatch.swatch-wall-velvet-blush { background: rgb(168, 120, 128); } .lightbox.lightbox--wall-oxblood { background: rgb(78, 28, 36); } .lightbox-wall-swatch.swatch-wall-oxblood { background: rgb(78, 28, 36); } .lightbox.lightbox--wall-forest-smoke { background: rgb(48, 58, 52); } .lightbox-wall-swatch.swatch-wall-forest-smoke { background: rgb(48, 58, 52); } .lightbox.lightbox--wall-ink { background: rgb(14, 16, 20); } .lightbox-wall-swatch.swatch-wall-ink { background: rgb(14, 16, 20); } .lightbox.lightbox--wall-burnished-rose { background: rgb(168, 106, 101); } .lightbox-wall-swatch.swatch-wall-burnished-rose { background: rgb(168, 106, 101); } .lightbox.lightbox--wall-quiet-rose { background: rgb(171, 136, 130); } .lightbox-wall-swatch.swatch-wall-quiet-rose { background: rgb(171, 136, 130); } .lightbox.lightbox--wall-rosewater-glow { background: rgb(216, 166, 148); } .lightbox-wall-swatch.swatch-wall-rosewater-glow { background: rgb(216, 166, 148); } .lightbox.lightbox--wall-porcelain-blush { background: rgb(224, 203, 185); } .lightbox-wall-swatch.swatch-wall-porcelain-blush { background: rgb(224, 203, 185); } .lightbox.lightbox--wall-mulled-plum { background: rgb(117, 75, 77); } .lightbox-wall-swatch.swatch-wall-mulled-plum { background: rgb(117, 75, 77); } .lightbox.lightbox--wall-eucalyptus-mist { background: rgb(153, 176, 174); } .lightbox-wall-swatch.swatch-wall-eucalyptus-mist { background: rgb(153, 176, 174); } .lightbox.lightbox--wall-whisper-rose { background: rgb(230, 186, 188); } .lightbox-wall-swatch.swatch-wall-whisper-rose { background: rgb(230, 186, 188); } .lightbox.lightbox--wall-blush-petal { background: rgb(243, 167, 182); } .lightbox-wall-swatch.swatch-wall-blush-petal { background: rgb(243, 167, 182); } .lightbox.lightbox--wall-velvet-taupe { background: rgb(169, 145, 138); } .lightbox-wall-swatch.swatch-wall-velvet-taupe { background: rgb(169, 145, 138); } .lightbox.lightbox--wall-coral-kiss { background: rgb(217, 126, 117); } .lightbox-wall-swatch.swatch-wall-coral-kiss { background: rgb(217, 126, 117); } .lightbox.lightbox--wall-cocoa-velvet { background: rgb(99, 55, 38); } .lightbox-wall-swatch.swatch-wall-cocoa-velvet { background: rgb(99, 55, 38); } .lightbox.lightbox--wall-apricot-light { background: rgb(245, 192, 138); } .lightbox-wall-swatch.swatch-wall-apricot-light { background: rgb(245, 192, 138); } .lightbox.lightbox--wall-amber-sun { background: rgb(239, 168, 91); } .lightbox-wall-swatch.swatch-wall-amber-sun { background: rgb(239, 168, 91); } .lightbox.lightbox--wall-peony-flame { background: rgb(217, 107, 124); } .lightbox-wall-swatch.swatch-wall-peony-flame { background: rgb(217, 107, 124); } .lightbox.lightbox--wall-cranberry-velvet { background: rgb(163, 72, 99); } .lightbox-wall-swatch.swatch-wall-cranberry-velvet { background: rgb(163, 72, 99); } .lightbox.lightbox--wall-lavender-haze { background: rgb(148, 132, 153); } .lightbox-wall-swatch.swatch-wall-lavender-haze { background: rgb(148, 132, 153); } .lightbox.lightbox--wall-silver-storm { background: rgb(189, 189, 198); } .lightbox-wall-swatch.swatch-wall-silver-storm { background: rgb(189, 189, 198); } .lightbox.lightbox--wall-soft-terracotta { background: rgb(214, 179, 164); } .lightbox-wall-swatch.swatch-wall-soft-terracotta { background: rgb(214, 179, 164); } .lightbox.lightbox--wall-blue-steel { background: rgb(121, 138, 164); } .lightbox-wall-swatch.swatch-wall-blue-steel { background: rgb(121, 138, 164); } .lightbox.lightbox--wall-mauve-whisper { background: rgb(201, 161, 160); } .lightbox-wall-swatch.swatch-wall-mauve-whisper { background: rgb(201, 161, 160); } .lightbox.lightbox--wall-morning-blush { background: rgb(232, 196, 169); } .lightbox-wall-swatch.swatch-wall-morning-blush { background: rgb(232, 196, 169); } .lightbox.lightbox--wall-alpine-rose { background: rgb(194, 150, 129); } .lightbox-wall-swatch.swatch-wall-alpine-rose { background: rgb(194, 150, 129); } .lightbox.lightbox--wall-sage-veil { background: rgb(185, 175, 145); } .lightbox-wall-swatch.swatch-wall-sage-veil { background: rgb(185, 175, 145); } .lightbox.lightbox--wall-golden-wildflower { background: rgb(215, 169, 88); } .lightbox-wall-swatch.swatch-wall-golden-wildflower { background: rgb(215, 169, 88); } .lightbox.lightbox--wall-evergreen-hush { background: rgb(109, 121, 105); } .lightbox-wall-swatch.swatch-wall-evergreen-hush { background: rgb(109, 121, 105); } .lightbox.lightbox--wall-velvet-currant { background: rgb(75, 22, 25); } .lightbox-wall-swatch.swatch-wall-velvet-currant { background: rgb(75, 22, 25); } .lightbox.lightbox--wall-black-velvet { background: rgb(30, 10, 13); } .lightbox-wall-swatch.swatch-wall-black-velvet { background: rgb(30, 10, 13); } .lightbox.lightbox--wall-maroon-allure { background: rgb(106, 40, 51); } .lightbox-wall-swatch.swatch-wall-maroon-allure { background: rgb(106, 40, 51); } .lightbox.lightbox--wall-amber-blush { background: rgb(211, 150, 130); } .lightbox-wall-swatch.swatch-wall-amber-blush { background: rgb(211, 150, 130); } .lightbox.lightbox--wall-antique-bronze { background: rgb(142, 103, 87); } .lightbox-wall-swatch.swatch-wall-antique-bronze { background: rgb(142, 103, 87); } .lightbox.lightbox--wall-ember-heart { background: rgb(105, 50, 39); } .lightbox-wall-swatch.swatch-wall-ember-heart { background: rgb(105, 50, 39); } .lightbox.lightbox--wall-burnished-terracotta { background: rgb(166, 93, 74); } .lightbox-wall-swatch.swatch-wall-burnished-terracotta { background: rgb(166, 93, 74); } .lightbox.lightbox--wall-blush-sunset { background: rgb(217, 147, 124); } .lightbox-wall-swatch.swatch-wall-blush-sunset { background: rgb(217, 147, 124); } .lightbox.lightbox--wall-serene-nude { background: rgb(239, 196, 174); } .lightbox-wall-swatch.swatch-wall-serene-nude { background: rgb(239, 196, 174); } .lightbox.lightbox--wall-ethereal-blush { background: rgb(248, 228, 215); } .lightbox-wall-swatch.swatch-wall-ethereal-blush { background: rgb(248, 228, 215); } .lightbox.lightbox--wall-dawn-lilac { background: rgb(236, 218, 232); } .lightbox-wall-swatch.swatch-wall-dawn-lilac { background: rgb(236, 218, 232); } .lightbox.lightbox--wall-valley-rose { background: rgb(170, 145, 161); } .lightbox-wall-swatch.swatch-wall-valley-rose { background: rgb(170, 145, 161); } .lightbox.lightbox--wall-lilac-grove { background: rgb(137, 117, 140); } .lightbox-wall-swatch.swatch-wall-lilac-grove { background: rgb(137, 117, 140); } .lightbox.lightbox--wall-stormy-twilight { background: rgb(93, 98, 122); } .lightbox-wall-swatch.swatch-wall-stormy-twilight { background: rgb(93, 98, 122); } .lightbox.lightbox--wall-midnight-valley { background: rgb(41, 48, 76); } .lightbox-wall-swatch.swatch-wall-midnight-valley { background: rgb(41, 48, 76); } .lightbox.lightbox--wall-sherbet-rose { background: rgb(244, 207, 199); } .lightbox-wall-swatch.swatch-wall-sherbet-rose { background: rgb(244, 207, 199); } .lightbox.lightbox--wall-coral-radiance { background: rgb(231, 151, 150); } .lightbox-wall-swatch.swatch-wall-coral-radiance { background: rgb(231, 151, 150); } .lightbox.lightbox--wall-peach-glow { background: rgb(255, 190, 152); } .lightbox-wall-swatch.swatch-wall-peach-glow { background: rgb(255, 190, 152); } .lightbox.lightbox--wall-golden-sunset { background: rgb(255, 201, 139); } .lightbox-wall-swatch.swatch-wall-golden-sunset { background: rgb(255, 201, 139); } .lightbox.lightbox--wall-sage-meadow { background: rgb(198, 192, 156); } .lightbox-wall-swatch.swatch-wall-sage-meadow { background: rgb(198, 192, 156); } .lightbox.lightbox--wall-masters-midnight { background: rgb(11, 20, 33); } .lightbox-wall-swatch.swatch-wall-masters-midnight { background: rgb(11, 20, 33); } .lightbox.lightbox--wall-ophelia-night { background: rgb(40, 48, 65); } .lightbox-wall-swatch.swatch-wall-ophelia-night { background: rgb(40, 48, 65); } .lightbox.lightbox--wall-midnight-brocade { background: rgb(52, 57, 74); } .lightbox-wall-swatch.swatch-wall-midnight-brocade { background: rgb(52, 57, 74); } .lightbox.lightbox--wall-silver-whisper { background: rgb(181, 185, 188); } .lightbox-wall-swatch.swatch-wall-silver-whisper { background: rgb(181, 185, 188); } .lightbox.lightbox--wall-mountain-mist { background: rgb(230, 235, 234); } .lightbox-wall-swatch.swatch-wall-mountain-mist { background: rgb(230, 235, 234); } .lightbox.lightbox--wall-gully-blue { background: rgb(184, 196, 204); } .lightbox-wall-swatch.swatch-wall-gully-blue { background: rgb(184, 196, 204); } .lightbox.lightbox--wall-forest-dawn { background: rgb(122, 140, 133); } .lightbox-wall-swatch.swatch-wall-forest-dawn { background: rgb(122, 140, 133); } .lightbox.lightbox--wall-forest-dusk { background: rgb(47, 63, 58); } .lightbox-wall-swatch.swatch-wall-forest-dusk { background: rgb(47, 63, 58); } .lightbox.lightbox--wall-deep-forest { background: rgb(26, 36, 34); } .lightbox-wall-swatch.swatch-wall-deep-forest { background: rgb(26, 36, 34); } .lightbox.lightbox--wall-lavender-cream { background: rgb(245, 239, 234); } .lightbox-wall-swatch.swatch-wall-lavender-cream { background: rgb(245, 239, 234); } .lightbox.lightbox--wall-cinnamon-glow { background: rgb(240, 215, 177); } .lightbox-wall-swatch.swatch-wall-cinnamon-glow { background: rgb(240, 215, 177); } .lightbox.lightbox--wall-mollys-shell { background: rgb(244, 231, 205); } .lightbox-wall-swatch.swatch-wall-mollys-shell { background: rgb(244, 231, 205); } .lightbox.lightbox--wall-golden-custard { background: rgb(236, 203, 142); } .lightbox-wall-swatch.swatch-wall-golden-custard { background: rgb(236, 203, 142); } .lightbox.lightbox--wall-caramel-fudge { background: rgb(236, 203, 142); } .lightbox-wall-swatch.swatch-wall-caramel-fudge { background: rgb(236, 203, 142); } .lightbox.lightbox--wall-burnt-brick { background: rgb(166, 99, 72); } .lightbox-wall-swatch.swatch-wall-burnt-brick { background: rgb(166, 99, 72); } .lightbox.lightbox--wall-golden-ochre { background: rgb(216, 152, 40); } .lightbox-wall-swatch.swatch-wall-golden-ochre { background: rgb(216, 152, 40); } .lightbox.lightbox--wall-mossy-forest { background: rgb(53, 71, 40); } .lightbox-wall-swatch.swatch-wall-mossy-forest { background: rgb(53, 71, 40); } .lightbox.lightbox--wall-warm-sandstone { background: rgb(201, 169, 131); } .lightbox-wall-swatch.swatch-wall-warm-sandstone { background: rgb(201, 169, 131); } .lightbox.lightbox--wall-twilight-indigo { background: rgb(35, 44, 66); } .lightbox-wall-swatch.swatch-wall-twilight-indigo { background: rgb(35, 44, 66); } .lightbox.lightbox--wall-black-cherry { background: rgb(25, 9, 10); } .lightbox-wall-swatch.swatch-wall-black-cherry { background: rgb(25, 9, 10); } .lightbox.lightbox--wall-ripe-cherry { background: rgb(59, 27, 29); } .lightbox-wall-swatch.swatch-wall-ripe-cherry { background: rgb(59, 27, 29); } .lightbox.lightbox--wall-deep-iris { background: rgb(113, 66, 72); } .lightbox-wall-swatch.swatch-wall-deep-iris { background: rgb(113, 66, 72); } .lightbox.lightbox--wall-corimbia-shadow { background: rgb(136, 129, 87); } .lightbox-wall-swatch.swatch-wall-corimbia-shadow { background: rgb(136, 129, 87); } .lightbox.lightbox--wall-mountain-eucalyptus { background: rgb(152, 170, 157); } .lightbox-wall-swatch.swatch-wall-mountain-eucalyptus { background: rgb(152, 170, 157); } .lightbox.lightbox--wall-misty-hollow { background: rgb(179, 201, 214); } .lightbox-wall-swatch.swatch-wall-misty-hollow { background: rgb(179, 201, 214); } .lightbox.lightbox--wall-plaster-alcove { background: rgb(242, 239, 226); } .lightbox-wall-swatch.swatch-wall-plaster-alcove { background: rgb(242, 239, 226); } .lightbox.lightbox--wall-soot { background: rgb(45, 53, 54); } .lightbox-wall-swatch.swatch-wall-soot { background: rgb(45, 53, 54); } .lightbox.lightbox--wall-old-moss { background: rgb(105, 124, 112); } .lightbox-wall-swatch.swatch-wall-old-moss { background: rgb(105, 124, 112); } .lightbox.lightbox--wall-cadet-grey { background: rgb(156, 164, 174); } .lightbox-wall-swatch.swatch-wall-cadet-grey { background: rgb(156, 164, 174); } .lightbox.lightbox--wall-steel-smoke { background: rgb(63, 79, 98); } .lightbox-wall-swatch.swatch-wall-steel-smoke { background: rgb(63, 79, 98); } .lightbox.lightbox--wall-aged-lavender { background: rgb(124, 101, 121); } .lightbox-wall-swatch.swatch-wall-aged-lavender { background: rgb(124, 101, 121); } .lightbox.lightbox--wall-northern-violet { background: rgb(78, 60, 82); } .lightbox-wall-swatch.swatch-wall-northern-violet { background: rgb(78, 60, 82); } .lightbox.lightbox--wall-slate-grey { background: rgb(113, 124, 140); } .lightbox-wall-swatch.swatch-wall-slate-grey { background: rgb(113, 124, 140); } /* ============================================================ LIGHTBOX STRIP ARROWS — hover always wins after click/focus Bottom = alternate views (thumbs-nav); Top = works navigator ============================================================ */ .lightbox-thumbs-nav:hover, .lightbox-thumbs-nav:focus-visible, button.lightbox-thumbs-nav:hover, button.lightbox-thumbs-nav:focus-visible { background: rgb(232, 90, 139) !important; /* pink */ transform: scale(1.1); outline: 2px dashed rgb(232, 90, 139); /* pink */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 12px rgb(232, 90, 139, 0.75); /* pink */ } .lightbox-works-nav:hover, .lightbox-works-nav:focus-visible, button.lightbox-works-nav:hover, button.lightbox-works-nav:focus-visible { background: rgb(246, 84, 67) !important; /* coral bright */ transform: scale(1.1); outline: 2px dashed rgb(246, 84, 67); /* coral bright */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 12px rgb(246, 84, 67, 0.45); /* coral bright */ } .lightbox-nav:hover, .lightbox-nav:focus-visible, button.lightbox-nav:hover, button.lightbox-nav:focus-visible { background: rgb(0, 175, 201) !important; /* teal-pop */ transform: translateY(-50%) scale(1.1); outline: 2px dashed rgb(0, 175, 201); /* teal-pop */ outline-offset: 9px; border-radius: 50%; box-shadow: 0 0 16px rgb(0, 175, 201, 0.55); /* teal-pop */ } /* Side arrows (prev/next) — outline-offset 6px on hover, active, keyboard focus */ .lightbox-nav:hover, .lightbox-nav:active, .lightbox-nav:focus-visible, button.lightbox-nav:hover, button.lightbox-nav:active, button.lightbox-nav:focus-visible { outline: 2px dashed rgb(0, 175, 201); /*teal-pop */ outline-offset: 9px; border-radius: 50%; }