/* =========================================================================
Glass Eyes Online — 2026 stylesheet
Design direction: "The Cabinet" — a natural-history specimen cabinet.
Glass eyes are literally spheres of colour, so every category is given
its own iris tone and shown as a hand-blown sphere + specimen tag,
the way a Victorian taxonomy drawer would label a set of drawers.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{
/* --- palette: cabinet, paper, ink, brass, and the iris tones --- */
--paper: #EFE8D6;
--paper-dim: #E4DBC5;
--cabinet: #17231C;
--cabinet-2: #1F3226;
--ink: #241F1A;
--ink-soft: #5A5145;
--brass: #B4863C;
--brass-light: #D9B36C;
--line: #C9BE9F;
--iris-bird: #C1782B;
--iris-mammal: #5B6E44;
--iris-fish: #2E6E6B;
--iris-human: #8B4A4A;
--iris-teddy: #6B4A2F;
--iris-reptile: #4B5A63;
--iris-blank: #8A8168;
--iris-acrylic: #6E5A8B;
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Inter', -apple-system, Segoe UI, sans-serif;
--font-mono: 'Space Mono', 'Courier New', monospace;
--radius: 3px;
--shadow-card: 0 1px 2px rgba(36,31,26,.08), 0 8px 24px -12px rgba(36,31,26,.25);
--max: 1180px;
}
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
html{ max-width:100%; overflow-x:hidden; }
body{
margin:0;
max-width:100%;
overflow-x:hidden;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; }
/* -------------------------------------------------------------------- */
/* Header / nav */
/* -------------------------------------------------------------------- */
.site-header{
background:#fff;
border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:40;
}
.header-row{
display:flex; align-items:center; justify-content:space-between;
gap:24px; padding-top:16px; padding-bottom:16px;
}
.logo-link{ display:flex; align-items:center; gap:12px; flex-shrink:1; min-width:0; }
.logo-link img{ height:88px; width:auto; max-width:100%; }
.header-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.main-nav{ position:relative; }
.main-nav > ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.main-nav > ul > li > a{
display:block; padding:10px 14px; font-size:14px; font-weight:600;
color:var(--ink); border-radius:var(--radius);
}
.main-nav > ul > li > a:hover{ background:var(--paper-dim); }
.main-nav > ul > li > a[aria-current="page"]{ background:var(--paper-dim); color:var(--brass); }
.main-nav .has-sub{ position:relative; }
.main-nav .has-sub:hover > ul,
.main-nav .has-sub:focus-within > ul{ display:grid; }
.main-nav .has-sub > ul{
display:none; position:absolute; top:100%; left:0; z-index:50;
background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card);
min-width:230px; padding:6px; grid-template-columns:1fr; gap:2px; list-style:none; margin:0;
}
.main-nav .has-sub > ul li{ float:none !important; }
.main-nav .has-sub > ul a{
display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:13.5px; font-weight:500; border-radius:var(--radius);
}
.main-nav .has-sub > ul a:hover{ background:var(--paper-dim); }
.main-nav .has-sub > ul a[aria-current="page"]{ background:var(--paper-dim); color:var(--brass); font-weight:700; }
.main-nav .has-sub > ul img{ width:22px; height:22px; object-fit:cover; border-radius:50%; flex-shrink:0; }
.nav-toggle{ display:none; }
@media (max-width:900px){
.logo-link img{ height:56px; }
.header-row{ flex-wrap:wrap; }
.header-right{ width:100%; align-items:stretch; }
.main-nav{ width:100%; order:2; }
.nav-toggle{
display:block; margin-left:auto; background:var(--ink); color:var(--paper);
border:none; padding:9px 14px; font-family:var(--font-mono); font-size:12px; border-radius:var(--radius);
}
.main-nav > ul{ display:none; flex-direction:column; width:100%; padding:12px 0; }
.main-nav.open > ul{ display:flex; }
.main-nav .has-sub > ul{ position:static; box-shadow:none; display:none; margin:4px 0 4px 14px; }
.main-nav .has-sub.open > ul{ display:grid; }
.site-search-form{ max-width:none; }
}
/* -------------------------------------------------------------------- */
/* Hero */
/* -------------------------------------------------------------------- */
.hero{
position:relative;
min-height:min(58vh, 480px);
display:flex; align-items:flex-end;
overflow:hidden;
color:var(--ink);
}
.hero-media{
position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero-media img{
position:absolute; top:50%; left:50%;
width:calc(100% + 240px); height:calc(100% + 240px);
max-width:none;
object-fit:cover;
transform:translate(-50%, -50%) translate(-75px, -65px);
}
.hero .wrap{ position:relative; z-index:1; padding-left:24px; padding-right:24px; }
.hero-inner{ padding:32px 0; }
.hero-panel{
padding:8px 0; max-width:640px;
}
.hero-eyebrow{
font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:var(--brass); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.hero-eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass); display:inline-block; }
.hero h2{
color:var(--ink); font-size:clamp(30px, 4.4vw, 50px); line-height:1.05; max-width:14ch; margin-bottom:.35em;
text-shadow:0 1px 3px rgba(239,232,214,.9), 0 1px 14px rgba(239,232,214,.8);
}
.hero h2 em{ font-style:italic; color:var(--brass); }
.hero p.lede{
max-width:46ch; font-size:16.5px; color:var(--ink);
text-shadow:0 1px 3px rgba(239,232,214,.9), 0 1px 14px rgba(239,232,214,.8);
}
.hero-actions{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }
.btn{
display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius);
font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer;
}
.btn-brass{ background:var(--brass); color:#fff; border-color:var(--brass); }
.btn-brass:hover{ background:#9c7233; }
.btn-secondary{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--brass); color:var(--brass); }
@media (max-width:600px){
.hero{ min-height:min(29vh, 240px); }
.hero .wrap{ padding-left:28px; padding-right:28px; }
.hero h2{ font-size:clamp(26px, 8vw, 34px); max-width:12ch; }
.hero p.lede{ font-size:15px; }
}
.site-search-form{
display:flex; align-items:center; gap:0; background:#fff; border:1px solid var(--line);
border-radius:100px; padding:5px 6px 5px 16px; box-shadow:var(--shadow-card);
width:100%; max-width:340px;
}
.site-search-form img{ flex-shrink:0; opacity:.75; }
.site-search-form input[type="text"]{
border:none; outline:none; background:transparent; font-family:var(--font-body);
font-size:14.5px; padding:8px 10px; flex:1; color:var(--ink); width:100px;
}
.site-search-form button{
border:none; background:var(--ink); color:var(--paper); font-family:var(--font-body);
font-weight:600; font-size:14px; padding:10px 20px; border-radius:100px; cursor:pointer; flex-shrink:0;
}
.site-search-form button:hover{ background:var(--cabinet-2); }
/* -------------------------------------------------------------------- */
/* Category carousel — replaces the jssor slider */
/* -------------------------------------------------------------------- */
.carousel-section{ background:#fff; padding:40px 0 46px; border-bottom:1px solid var(--line); }
.carousel-section .section-head{ color:var(--ink); margin-bottom:18px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.carousel-section h2{ color:var(--ink); font-size:22px; margin:0; }
.carousel-section .section-head p{ margin:0; color:var(--brass); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; }
.carousel{ position:relative; }
.carousel-track{
display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0;
border-radius:6px; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{
position:relative; flex:0 0 100%; scroll-snap-align:start;
aspect-ratio:16/6.4; min-height:220px;
}
.slide-link{
display:block; position:relative; width:100%; height:100%; overflow:hidden;
}
.slide-link img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.slide-link:hover img,
.slide-link:focus-visible img{ transform:scale(1.04); }
@media (max-width:760px){
.slide-link img{ object-position:right center; }
}
.slide-caption{
position:absolute; left:0; right:0; bottom:0;
padding:22px 26px;
background:linear-gradient(0deg, rgba(15,19,15,.82), transparent);
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.slide-caption .slide-title{
color:#fff; font-family:var(--font-display); font-size:clamp(20px,3vw,30px); font-weight:600;
}
.slide-caption .view{
font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
color:var(--cabinet); background:var(--brass-light); padding:8px 14px; border-radius:var(--radius);
white-space:nowrap; transition:background .2s;
}
.slide-link:hover .view,
.slide-link:focus-visible .view{ background:#fff; }
.carousel-arrow{
position:absolute; top:50%; translate:0 -50%; z-index:5;
width:42px; height:42px; border-radius:50%; border:1px solid rgba(239,232,214,.35);
background:rgba(15,19,15,.55); color:var(--paper); font-size:18px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover{ background:rgba(15,19,15,.85); }
.carousel-arrow.prev{ left:14px; } .carousel-arrow.next{ right:14px; }
.carousel-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.carousel-dots button{
width:9px; height:9px; border-radius:50%; border:1px solid var(--brass-light); background:transparent; padding:0; cursor:pointer;
}
.carousel-dots button[aria-selected="true"]{ background:var(--brass-light); }
/* -------------------------------------------------------------------- */
/* Intro strip */
/* -------------------------------------------------------------------- */
.intro{ padding:52px 0 8px; }
.intro-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
.intro h2{ font-size:30px; max-width:16ch; }
.intro .lede{ color:var(--ink-soft); font-size:16px; max-width:52ch; }
.intro-card{
background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px 24px;
font-family:var(--font-body); font-size:15px; line-height:1.75; color:var(--ink);
}
.intro-card strong{ display:block; font-family:var(--font-body); font-size:16px; margin-bottom:8px; }
.intro-card .tel{ color:var(--brass); font-weight:700; font-size:19px; display:inline-block; margin-bottom:6px; }
@media (max-width:800px){ .intro-grid{ grid-template-columns:1fr; } }
/* Quick-link shelves (gallery / offers / colour) */
.shelf-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:34px 0 8px; }
.shelf{
position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; background:var(--cabinet);
}
.shelf img{ width:100%; height:100%; object-fit:cover; opacity:.72; transition:opacity .25s, transform .4s; }
.shelf:hover img{ opacity:.55; transform:scale(1.04); }
.shelf .shelf-label{
position:absolute; inset:auto 0 0 0; padding:16px 18px;
font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; font-size:13px; color:#fff;
}
@media (max-width:760px){ .shelf-row{ grid-template-columns:1fr; } }
/* -------------------------------------------------------------------- */
/* Colour finder chips */
/* -------------------------------------------------------------------- */
.finder{ padding:40px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:44px; }
.finder-row{ display:flex; gap:28px; flex-wrap:wrap; }
.finder-block h3{ font-size:13px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.chip-set{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line);
border-radius:100px; font-size:13.5px; font-weight:500; background:#fff;
}
.chip:hover{ border-color:var(--brass); background:var(--paper-dim); }
.chip .dot{ width:10px; height:10px; border-radius:50%; box-shadow:inset 0 -2px 2px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.5); }
/* -------------------------------------------------------------------- */
/* Specimen category sections */
/* -------------------------------------------------------------------- */
.catalogue{ padding:56px 0; }
.catalogue > .wrap > h2{ font-size:30px; margin-bottom:6px; }
.catalogue > .wrap > .lede{ color:var(--ink-soft); max-width:60ch; margin-bottom:34px; }
.category-block{
border:1px solid var(--line); border-radius:8px; background:#fff; margin-bottom:26px; overflow:hidden;
}
.category-block-head{
display:flex; align-items:center; gap:16px; padding:20px 24px;
border-bottom:1px solid var(--line);
}
.category-sphere{
width:52px; height:52px; border-radius:50%; flex-shrink:0;
box-shadow:inset 0 -6px 10px rgba(0,0,0,.28), inset 0 3px 5px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.15);
}
.category-block-head h3{ font-size:20px; margin:0 0 3px; }
.category-block-head p{ margin:0; color:var(--ink-soft); font-size:14px; }
.category-block-head .cat-link{
margin-left:auto; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
color:var(--brass); white-space:nowrap; border:1px solid var(--brass); padding:8px 12px; border-radius:var(--radius);
}
.category-block-head .cat-link:hover{ background:var(--brass); color:#fff; }
.specimen-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1px; background:var(--line); }
.specimen{ background:#fff; padding:18px 20px; display:flex; gap:14px; }
.specimen-img-link{ flex-shrink:0; display:block; border-radius:50%; }
.specimen-img-link:hover img{ border-color:var(--brass); }
.specimen img{ width:46px; height:46px; object-fit:cover; border-radius:50%; border:1px solid var(--line); flex-shrink:0; transition:border-color .15s; }
.specimen-body strong{ display:block; font-size:14.5px; margin-bottom:2px; }
.specimen-code{
display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:10.5px; color:#6B4A18; background:var(--paper-dim);
padding:1px 6px; border-radius:3px; margin-bottom:5px;
}
.specimen-body p{ margin:0 0 8px; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.specimen-body a{ font-size:12.5px; font-weight:600; color:var(--ink); }
.specimen-body a:hover{ color:var(--brass); }
/* -------------------------------------------------------------------- */
/* 404 error page */
/* -------------------------------------------------------------------- */
.error-page{ padding:76px 0 90px; text-align:center; }
.error-page .wrap{ max-width:640px; }
.error-illustration{ margin:0 auto 30px; width:120px; height:120px; }
.error-eyebrow{
font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:var(--brass); margin-bottom:14px;
}
.error-page h1{ font-size:clamp(28px, 4.4vw, 42px); margin-bottom:14px; }
.error-page p.lede{ color:var(--ink-soft); font-size:16.5px; max-width:52ch; margin:0 auto 30px; }
.error-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.error-search{ display:flex; justify-content:center; margin-bottom:44px; }
.error-page .jump-nav-label{
font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:14px;
}
.error-page .chip-set{ justify-content:center; }
/* -------------------------------------------------------------------- */
/* Contact page */
/* -------------------------------------------------------------------- */
.contact-section{ padding:44px 0 8px; }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:24px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-card{
background:#fff; border:1px solid var(--line); border-radius:8px; padding:24px 26px; margin-bottom:20px;
}
.contact-info-card h3{
font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
color:var(--brass); margin-bottom:10px;
}
.contact-info-card p{ font-size:14.5px; color:var(--ink); line-height:1.7; margin:0; }
.contact-info-card .tel-number{ color:var(--brass); font-weight:700; font-size:18px; }
.contact-form-card{
background:#fff; border:1px solid var(--line); border-radius:8px; padding:32px 36px;
}
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea{
width:100%; border:1px solid var(--line); border-radius:6px; padding:11px 13px;
font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:#fff;
}
.form-field input:focus, .form-field textarea:focus{
outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);
}
.form-field textarea{ resize:vertical; min-height:110px; }
.form-hint{ font-size:12.5px; color:var(--ink-soft); margin:16px 0 20px; }
.form-privacy{ font-size:13px; color:var(--ink-soft); margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.form-privacy a{ color:var(--brass); font-weight:600; }
.form-privacy a:hover{ text-decoration:underline; }
/* honeypot field — hidden from people, still reachable by simple bots */
.hp-field{
position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
/* human verification widget */
.human-check{ margin:22px 0 4px; }
.human-check p{ margin:0 0 12px; font-size:14px; color:var(--ink); }
.human-grid{ display:flex; gap:10px; flex-wrap:wrap; }
.human-tile{
border:2px solid var(--line); border-radius:10px; padding:4px; background:#fff; cursor:pointer;
}
.human-tile img{ display:block; width:110px; height:82px; object-fit:cover; border-radius:6px; }
.human-tile:hover{ border-color:var(--brass); }
.human-tile.is-selected{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(180,134,60,.2); }
#humanMsg{
margin-top:12px; padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--ink);
background:var(--paper-dim); border:1px solid var(--line); border-radius:6px; display:inline-block;
}
/* -------------------------------------------------------------------- */
/* Content panel — generic white document panel */
/* For pages with no hero/page-header: header nav straight into a */
/* plain white panel. Intended as a stable template other server-side */
/* generated pages (e.g. Perl) can drop content into: just h1/h2/h3, */
/* p, table, ol/ul, and a.btn — no bespoke classes required. */
/* -------------------------------------------------------------------- */
.content-section{ padding:40px 0 60px; }
.content-panel{
background:#fff; border:1px solid var(--line); border-radius:8px; padding:40px 44px;
}
.content-panel h1{ font-size:clamp(26px, 3.6vw, 36px); margin:0 0 26px; }
.content-panel h2{
font-size:20px; margin:32px 0 14px; padding-top:26px; border-top:1px solid var(--line);
}
.content-panel h2:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.content-panel h3{
font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
color:var(--brass); margin:22px 0 8px;
}
.content-panel h3:first-of-type{ margin-top:0; }
.content-panel p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 14px; }
.content-panel p strong{ color:var(--ink); }
.content-panel a{ color:var(--brass); font-weight:600; }
.content-panel a:hover{ text-decoration:underline; }
.content-panel a.button,
.content-panel a.button:hover{ color:#fff; text-decoration:none; }
.content-panel table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:14px; }
.content-panel th, .content-panel td{ border:1px solid var(--line); padding:11px 15px; text-align:left; }
.content-panel th{
background:var(--paper-dim); font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
letter-spacing:.04em; color:var(--ink); font-weight:700;
}
.content-panel td strong{ color:var(--brass); white-space:nowrap; }
.content-panel ol, .content-panel ul{ padding-left:22px; margin:0 0 16px; }
.content-panel ol li, .content-panel ul li{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:10px; }
.content-panel .panel-back{
display:inline-flex; align-items:center; gap:8px; margin-top:8px;
font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
color:var(--ink-soft); background:none; border:1px solid var(--line); border-radius:100px;
padding:9px 16px; cursor:pointer;
}
.content-panel .panel-back:hover{ border-color:var(--brass); color:var(--brass); }
@media (max-width:600px){ .content-panel{ padding:28px 22px; } }
/* -------------------------------------------------------------------- */
/* Internal page header — for pages other than the homepage */
/* -------------------------------------------------------------------- */
.page-header{ background:#fcfbf8; border-bottom:1px solid var(--line); padding:44px 0 36px; }
.page-header h1{ font-size:clamp(28px, 4.2vw, 42px); margin-bottom:10px; }
.page-header p{ color:var(--ink-soft); max-width:62ch; margin:0; font-size:16px; }
/* -------------------------------------------------------------------- */
/* Gallery grid */
/* -------------------------------------------------------------------- */
.gallery-section{ padding:8px 0 60px; }
.gallery-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;
}
.gallery-item{
position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:8px;
overflow:hidden; background:#fff; cursor:pointer; text-align:left; font:inherit; color:inherit;
aspect-ratio:4/3;
}
.gallery-item img{
width:100%; height:100%; object-fit:cover; transition:transform .4s ease;
}
.gallery-item:hover img, .gallery-item:focus-visible img{ transform:scale(1.06); }
.gallery-caption{
position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
background:linear-gradient(0deg, rgba(15,19,15,.85), rgba(15,19,15,0));
display:flex; flex-direction:column; gap:2px;
}
.gallery-title{ color:#fff; font-size:14px; font-weight:600; }
.gallery-code{ color:var(--brass-light); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; }
.gallery-item::after{
content:"View full size"; position:absolute; top:12px; right:12px;
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
color:#fff; background:rgba(15,19,15,.55); padding:6px 10px; border-radius:100px;
opacity:0; transition:opacity .2s;
}
.gallery-item:hover::after, .gallery-item:focus-visible::after{ opacity:1; }
/* -------------------------------------------------------------------- */
/* Lightbox */
/* -------------------------------------------------------------------- */
.lightbox{
position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
}
.lightbox[hidden]{ display:none; }
.lightbox-backdrop{
position:absolute; inset:0; background:rgba(15,19,15,.88);
}
.lightbox-panel{
position:relative; z-index:1; width:min(920px, 92vw); max-height:90vh;
display:flex; flex-direction:column; align-items:center;
}
.lightbox-image{
max-width:100%; max-height:70vh; object-fit:contain; border-radius:6px; background:#111;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-info{ text-align:center; margin-top:16px; color:var(--paper); }
.lightbox-title{ font-family:var(--font-display); font-size:19px; margin:0 0 4px; }
.lightbox-code{ font-family:var(--font-mono); font-size:12px; color:var(--brass-light); margin:0 0 10px; letter-spacing:.04em; }
.lightbox-link{
display:inline-flex; font-size:13.5px; font-weight:600; color:var(--brass-light); border-bottom:1px solid transparent;
}
.lightbox-link:hover{ border-color:var(--brass-light); }
.lightbox-close{
position:absolute; top:-6px; right:-6px; z-index:2; width:40px; height:40px; border-radius:50%;
background:rgba(15,19,15,.7); color:#fff; border:1px solid rgba(239,232,214,.3); font-size:20px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(15,19,15,.9); }
.lightbox-nav{
position:absolute; top:35%; translate:0 -50%; z-index:2; width:44px; height:44px; border-radius:50%;
background:rgba(15,19,15,.6); color:#fff; border:1px solid rgba(239,232,214,.3); font-size:20px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:rgba(15,19,15,.85); }
.lightbox-nav.prev{ left:-8px; } .lightbox-nav.next{ right:-8px; }
@media (max-width:640px){
.lightbox-nav.prev{ left:4px; } .lightbox-nav.next{ right:4px; }
.lightbox-close{ top:8px; right:8px; }
}
/* -------------------------------------------------------------------- */
/* Ordering steps */
/* -------------------------------------------------------------------- */
.steps-section{ padding:48px 0 8px; }
.steps-section h2{ font-size:26px; margin-bottom:8px; }
.steps-section > .wrap > p.lede{ color:var(--ink-soft); max-width:64ch; margin-bottom:30px; }
.steps-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.step-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:26px 24px; position:relative; }
.step-number{
display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
border-radius:50%; background:var(--brass); color:#fff; font-family:var(--font-mono); font-weight:700;
font-size:15px; margin-bottom:16px;
}
.step-card h3{ font-size:17px; margin-bottom:8px; }
.step-card p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6; }
.steps-note{
margin-top:22px; font-family:var(--font-mono); font-size:12.5px; color:var(--brass);
background:var(--paper-dim); border-radius:6px; padding:12px 16px; display:inline-block;
}
@media (max-width:820px){ .steps-grid{ grid-template-columns:1fr; } }
/* -------------------------------------------------------------------- */
/* Browse quick links */
/* -------------------------------------------------------------------- */
.browse-links{ padding:36px 0; }
.browse-links h2{ font-size:20px; margin-bottom:16px; }
/* -------------------------------------------------------------------- */
/* Policy / returns content */
/* -------------------------------------------------------------------- */
.policy-section{ background:var(--paper-dim); padding:52px 0; }
.policy-section h2{ font-size:26px; margin-bottom:24px; }
.policy-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:32px 36px; }
.policy-card h3{
font-size:15px; margin:26px 0 10px; padding-top:22px; border-top:1px solid var(--line);
color:var(--ink);
}
.policy-card h3:first-child{ margin-top:0; padding-top:0; border-top:none; }
.policy-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 12px; }
.policy-card p:last-child{ margin-bottom:0; }
.policy-card ul{ margin:0 0 16px; padding-left:22px; }
.policy-card li{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:6px; }
.policy-card a{ color:var(--brass); font-weight:600; }
.policy-card a:hover{ text-decoration:underline; }
.policy-card h3[id]{ scroll-margin-top:110px; }
.policy-card p.legal-lede{ font-size:15px; color:var(--ink); margin-bottom:0; }
.jump-nav{ padding:36px 0 0; }
.jump-nav h2{ font-size:13px; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
/* -------------------------------------------------------------------- */
/* Colour gallery — large swatch photos */
/* -------------------------------------------------------------------- */
.colour-gallery{ padding:44px 0 8px; }
.colour-gallery h2{ font-size:24px; margin-bottom:18px; }
.colour-shelf-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .colour-shelf-row{ grid-template-columns:1fr; } }
/* -------------------------------------------------------------------- */
/* Site map link groups */
/* -------------------------------------------------------------------- */
.sitemap-links{ padding:12px 0 56px; }
.sitemap-links h2{ font-size:24px; margin-bottom:18px; }
.sitemap-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.sitemap-group{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px 24px; }
.sitemap-group h3{
font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
color:var(--brass); margin-bottom:14px;
}
.sitemap-group ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.sitemap-group a{ font-size:14px; color:var(--ink); font-weight:500; }
.sitemap-group a:hover{ color:var(--brass); text-decoration:underline; }
/* -------------------------------------------------------------------- */
/* Help section */
/* -------------------------------------------------------------------- */
.help{ background:var(--paper-dim); padding:52px 0; }
.help h2{ font-size:26px; margin-bottom:24px; }
.help-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.help-card{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:18px 20px; }
.help-card strong{ display:block; font-size:15px; margin-bottom:4px; }
.help-card p{ margin:0; font-size:13px; color:var(--ink-soft); }
/* -------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------- */
.site-footer{ background:#d6d6d6; color:var(--ink); padding:52px 0 30px; }
.footer-top{ margin-bottom:34px; }
.site-footer h2{ color:var(--ink); font-size:20px; margin-bottom:8px; }
.footer-tagline{ color:#4a453d; font-size:14px; max-width:48ch; margin:0 0 22px; }
.footer-nav ul{
list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:16px 30px;
}
.footer-nav a{ display:flex; align-items:center; gap:9px; color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap; }
.footer-nav a img{ width:25px; height:25px; object-fit:cover; border-radius:50%; flex-shrink:0; }
.footer-nav a:hover{ color:var(--brass); text-decoration:underline; }
.footer-contact{ max-width:420px; margin-bottom:34px; }
.footer-contact p{ font-size:14px; color:var(--ink); margin-bottom:10px; }
.footer-contact .tel{ color:var(--brass); font-weight:700; font-size:17px; }
.social-link{
display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; font-size:14px;
}
.social-link svg{ color:var(--brass); flex-shrink:0; }
.social-link:hover{ color:var(--brass); }
.social-link:hover svg{ color:#9c7233; }
.footer-bottom{
border-top:1px solid rgba(36,31,26,.18); padding-top:20px;
display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
font-size:12.5px; color:var(--ink-soft);
}
.footer-bottom a{ color:var(--ink-soft); }
.footer-bottom a:hover{ color:var(--brass); }
.trust-seal img{ height:44px; }
/* -------------------------------------------------------------------- */
/* Cookie / privacy banner */
/* -------------------------------------------------------------------- */
.cookie-banner{
position:fixed; left:0; right:0; bottom:0; z-index:70;
background:var(--cabinet); color:var(--paper); box-shadow:0 -6px 24px rgba(0,0,0,.18);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{
display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
padding:16px 24px;
}
.cookie-banner-inner p{ margin:0; font-size:13.5px; color:#E7E1CE; max-width:64ch; }
.cookie-banner-inner a{ color:var(--brass-light); font-weight:600; }
.cookie-banner-inner a:hover{ text-decoration:underline; }
.cookie-banner-inner .btn{ flex-shrink:0; padding:10px 22px; }
.back-to-top{
position:fixed; right:20px; bottom:20px; z-index:60;
background:var(--brass); color:var(--cabinet); border:none; border-radius:50%;
width:46px; height:46px; font-size:18px; cursor:pointer; display:none; box-shadow:var(--shadow-card);
}
.back-to-top.show{ display:block; }
.back-to-top:hover{ background:var(--brass-light); }
.visually-hidden{
position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* -------------------------------------------------------------------- */
/* .icon-graphic — utility class to force a consistent icon size, */
/* regardless of the image's native dimensions or any width/height */
/* attribute already on the tag. Add wherever a small inline icon */
/* needs to be a predictable size, e.g.: */
/* 
*/
/* -------------------------------------------------------------------- */
.icon-graphic{
width:20px !important;
height:20px !important;
object-fit:contain;
}
/* -------------------------------------------------------------------- */
/* Department pages (Perl-generated, hundreds of pages) */
/* Shared header/footer + this stylesheet + css/productboxes.css. */
/* Starting point for box2 — to be enhanced. */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* box2 — used two ways in the Perl output: */
/* (a) department entry-point listings: several .box2 siblings, each */
/* a teaser card linking into a sub-range (this is the one that */
/* gets the grid treatment below) */
/* (b) a single product's full detail box (photo, description, size */
/* dropdown, Add to Cart form) — only one .box2 on the page, left */
/* in normal block flow so its floated main photo keeps working */
/* -------------------------------------------------------------------- */
.box2{
background:#fff;
border:1px solid var(--line);
border-radius:8px;
padding:20px 22px;
box-shadow:0 1px 2px rgba(36,31,26,.05);
transition:box-shadow .2s ease, transform .2s ease;
}
/* Contain any floated child (e.g. the main product photo,
style="float:right") so the card border wraps around its full
height instead of collapsing to the height of the text. */
.box2::after{ content:""; display:table; clear:both; }
/* Floated thumbnails with no explicit width/height (like .itemview)
default to their native image size, which can dwarf the card —
give them a sensible cap. */
.box2 img.itemview{ max-width:140px; height:auto; }
/* Grid only kicks in once there are two or more box2 siblings, i.e. a
department listing rather than a single product detail box.
Covers two shapes: box2s as direct children of content-panel, and
box2s wrapped together in a single form (e.g. a wish list). */
.content-panel:has(> .box2 ~ .box2),
.content-panel > form:has(> .box2 ~ .box2){
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:22px;
align-items:stretch;
}
.content-panel:has(> .box2 ~ .box2) > :not(.box2),
.content-panel > form:has(> .box2 ~ .box2) > :not(.box2){ grid-column:1 / -1; }
.content-panel:has(> .box2 ~ .box2) > .box2,
.content-panel > form:has(> .box2 ~ .box2) > .box2{
display:flex; flex-direction:column; height:100%;
}
.content-panel:has(> .box2 ~ .box2) > .box2:hover,
.content-panel > form:has(> .box2 ~ .box2) > .box2:hover{
box-shadow:0 10px 24px rgba(36,31,26,.13); transform:translateY(-2px);
}
/* Breadcrumb line above the grid */
.content-panel > p.breadcrumb{
font-size:13.5px; color:var(--ink-soft); margin:0 0 26px;
padding-bottom:16px; border-bottom:1px solid var(--line);
}
.content-panel > p.breadcrumb b{ color:var(--ink); }
.content-panel > p.breadcrumb img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
/* Card internals for the department-listing shape */
.box2-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:10px; }
.box2-thumb{
flex-shrink:0; width:60px; height:60px; border-radius:50%; overflow:hidden;
border:1px solid var(--line); display:block;
}
.box2-thumb img{ width:100%; height:100%; object-fit:cover; }
.box2 h3{ font-size:16px; margin:2px 0 0; line-height:1.35; }
.box2 h3 a{ color:var(--ink); }
.box2 h3 a:hover{ color:var(--brass); }
.box2 > p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 10px; }
.box2-footer{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); flex-wrap:wrap;
}
.box2-explore{
font-size:12.5px; font-weight:600; color:var(--brass); display:inline-flex; align-items:center; gap:6px;
}
.box2-explore:hover{ text-decoration:underline; }
.box2-explore img{ width:15px; height:15px; }
.box2-profile{ display:flex; gap:6px; flex-shrink:0; }
.box2-profile img{
width:44px; height:44px; object-fit:contain; background:var(--paper-dim);
border-radius:6px; padding:4px; border:1px solid var(--line);
}
/* Small inline icons (pack-size pairs, size-ladder swatches, suggestion
thumbnails) need to sit side-by-side, not stack — the site-wide
img{ display:block } reset was overriding that. The main product
photo (style="float:right") is unaffected: floated elements always
compute to block regardless of this. */
.box2 img{ display:inline; }
.box2-thumb img,
.box2-profile img{ display:block; }
/* Same fix, broader net: any icon that sits inside a within
content-panel (breadcrumb trails, inline icon+link patterns) should
flow inline with the text and any sibling icons, not stack. */
.content-panel p img{ display:inline; }
/* -------------------------------------------------------------------- */
/* leftboxacrylic — Acrylic Eyes product cards. Each card is a */
/* complete, ready-to-buy item (photo, size dropdown, Add to Cart), */
/* several sitting side by side on the department page. Grid kicks in */
/* once there are two or more, same pattern as box2. */
/* -------------------------------------------------------------------- */
.leftboxacrylic{
background:#fff;
border:1px solid var(--line);
border-radius:8px;
padding:20px 22px;
box-shadow:0 1px 2px rgba(36,31,26,.05);
max-width:300px;
transition:box-shadow .2s ease, transform .2s ease;
}
/* Covers two shapes: cards as direct children of content-panel, and
cards wrapped together in a single form (e.g. a wish list). */
.content-panel:has(> .leftboxacrylic ~ .leftboxacrylic),
.content-panel > form:has(> .leftboxacrylic ~ .leftboxacrylic){
display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px, 300px));
gap:22px;
}
.content-panel:has(> .leftboxacrylic ~ .leftboxacrylic) > :not(.leftboxacrylic),
.content-panel > form:has(> .leftboxacrylic ~ .leftboxacrylic) > :not(.leftboxacrylic){
grid-column:1 / -1;
}
.content-panel:has(> .leftboxacrylic ~ .leftboxacrylic) > .leftboxacrylic:hover,
.content-panel > form:has(> .leftboxacrylic ~ .leftboxacrylic) > .leftboxacrylic:hover{
box-shadow:0 10px 24px rgba(36,31,26,.13); transform:translateY(-2px);
}
.leftboxacrylic h3{ font-size:16px; margin:0 0 14px; text-align:center; }
.content-panel .leftboxacrylic img{
display:block; margin:0 auto 12px; border-radius:6px; max-width:100%; height:auto;
}
/* Small icons (e.g. the 20x20 wish-list "Remove" cross) should stay
inline next to their link text, not become the big centred photo. */
.content-panel .leftboxacrylic img[width="20"],
.content-panel .leftboxacrylic img[height="20"]{
display:inline; margin:0; border-radius:0; vertical-align:baseline;
}
.leftboxacrylic form p{ margin:0 0 12px; text-align:center; }
.leftboxacrylic form p:last-child{ margin-bottom:0; }
.leftboxacrylic .select,
.leftboxacrylic .smallselect{ width:100%; }
.leftboxacrylic input.button,
.leftboxacrylic input[type="submit"]{ width:100%; justify-content:center; }
/* Some department pages wrap each box2 in its own