/* ===================================================================== ADAMAR · PRIVATE CATALOGUE · FOUR STYLE DIRECTIONS Loaded after every other stylesheet. Nothing here applies unless is set. 1 Warm Onyx the website's own warm charcoal, hairline brass 2 Ivory & Ink deeper ink ground, ivory hairlines, brass only on hover 3 Bronze Atelier warm brown-black, bronze underline buttons that draw 4 Midnight Champagne very deep blue-black, champagne double hairlines Shared structure first (uses the --t-* tokens each theme defines), then each theme's own palette and button / tab / chip / table voice. ===================================================================== */ /* --------------------------------------------------------------------- 0 · TOKENS PER THEME --------------------------------------------------------------------- */ html[data-theme="1"]{ --t-beam:240,224,194; --t-tint:rgba(201,150,61,.55); --basalt:#1C1B19; --shadow:#211F1C; --shadow-2:#1E1C1A; --formwork:#35302A; --joint:#28251F; --titanium:#B9B5AB; --porcelain:#ECE8DF; --daylight:#F4F0E7; --pounamu:#C9963D; --brass:#C9963D; --brass-bright:#D9AE62; --t-rgb:28,27,25; --t-bar:25,24,22; --t-panel:#1F1D1A; --t-deep:#161513; --t-accent:#C9963D; --t-accent-rgb:201,150,61; --t-accent-hi:#DDB872; --t-hair:rgba(236,232,223,.075); --t-line:rgba(201,150,61,.28); --t-ring:rgba(236,232,223,.28); --t-silk1:#6E665A; --t-silk2:#413B33; --t-silk3:#25221E; --t-silk4:#201E1B; --t-tyre:#171614; --t-slab-a:#221E18; --t-slab-b:#15130F; --t-slab-c:rgba(90,70,40,.5); } html[data-theme="2"]{ --t-beam:244,240,231; --t-tint:rgba(180,150,105,.35); --basalt:#171614; --shadow:#1D1B19; --shadow-2:#1A1917; --formwork:#302D29; --joint:#23211E; --titanium:#B4B0A6; --porcelain:#EDE9E0; --daylight:#F6F2E9; --pounamu:#C9963D; --brass:#C9963D; --brass-bright:#D9AE62; --t-rgb:23,22,20; --t-bar:20,19,17; --t-panel:#1B1A18; --t-deep:#121110; --t-accent:#EDE9E0; --t-accent-rgb:237,233,224; --t-accent-hi:#D9B77A; --t-hair:rgba(237,233,224,.08); --t-line:rgba(237,233,224,.22); --t-ring:rgba(237,233,224,.34); --t-silk1:#6A655E; --t-silk2:#3D3A35; --t-silk3:#232120; --t-silk4:#1D1C1A; --t-tyre:#121110; --t-slab-a:#1E1C19; --t-slab-b:#121110; --t-slab-c:rgba(70,60,45,.45); } html[data-theme="3"]{ --t-beam:238,212,172; --t-tint:rgba(176,120,55,.7); --basalt:#1D1914; --shadow:#241F18; --shadow-2:#201B15; --formwork:#3E3428; --joint:#2C251D; --titanium:#BDB3A1; --porcelain:#EFE6D5; --daylight:#F5EDDD; --pounamu:#B08546; --brass:#B08546; --brass-bright:#C9A064; --t-rgb:29,25,20; --t-bar:26,22,17; --t-panel:#211C16; --t-deep:#17130F; --t-accent:#B08546; --t-accent-rgb:176,133,70; --t-accent-hi:#D1AA6C; --t-hair:rgba(239,230,213,.075); --t-line:rgba(176,133,70,.34); --t-ring:rgba(239,230,213,.26); --t-silk1:#766850; --t-silk2:#463B2D; --t-silk3:#2A231B; --t-silk4:#221C16; --t-tyre:#16120E; --t-slab-a:#2A2016; --t-slab-b:#17120D; --t-slab-c:rgba(120,82,40,.45); } html[data-theme="4"]{ --t-beam:240,230,205; --t-tint:rgba(200,170,110,.45); --basalt:#15171C; --shadow:#1A1C22; --shadow-2:#17191F; --formwork:#302F31; --joint:#232428; --titanium:#B7B3AB; --porcelain:#EEE9DE; --daylight:#F5F1E7; --pounamu:#D4BC8C; --brass:#D4BC8C; --brass-bright:#E6D3AA; --t-rgb:21,23,28; --t-bar:18,20,25; --t-panel:#181A20; --t-deep:#101216; --t-accent:#D4BC8C; --t-accent-rgb:212,188,140; --t-accent-hi:#EADBB8; --t-hair:rgba(238,233,222,.07); --t-line:rgba(212,188,140,.26); --t-ring:rgba(212,188,140,.4); --t-silk1:#6F695E; --t-silk2:#3D3B3B; --t-silk3:#23242A; --t-silk4:#1C1D22; --t-tyre:#101216; --t-slab-a:#1D1F26; --t-slab-b:#0F1014; --t-slab-c:rgba(60,64,82,.5); } /* --------------------------------------------------------------------- 1 · SHARED: grounds, panels, lines, textures (no cold grey anywhere) --------------------------------------------------------------------- */ html[data-theme]{--t-ease:cubic-bezier(.45,.05,.25,1);background:var(--basalt)} html[data-theme] body{background:var(--basalt)} html[data-theme] ::selection{background:rgba(var(--t-accent-rgb),.28);color:var(--daylight)} /* bars */ html[data-theme] .site-bar{background:rgba(var(--t-bar),.94) !important;border-bottom-color:var(--t-hair) !important} html[data-theme] .top{background:rgba(var(--t-bar),.88) !important;border-bottom:1px solid var(--t-hair) !important} html[data-theme] .top nav a{position:relative;transition:color .9s var(--t-ease)} html[data-theme] .top nav a:not(.cta)::after{content:"";position:absolute;left:0;right:.24em;bottom:-7px;height:1px;background:var(--t-accent); transform:scaleX(0);transform-origin:left;transition:transform 1s var(--t-ease)} html[data-theme] .top nav a:not(.cta):hover::after{transform:scaleX(1)} @media (max-width:1060px){ html[data-theme] .top nav{background:rgba(var(--t-bar),.98) !important;border-bottom-color:var(--t-hair) !important} html[data-theme] .top nav a{border-bottom-color:var(--t-hair) !important} html[data-theme] .top nav a:not(.cta)::after{display:none} } html[data-theme] .menu-btn{border-color:var(--t-line)} html[data-theme] .welcome{background:var(--shadow-2);border-bottom-color:var(--t-hair)} /* gate: warm formwork, quieter grain */ html[data-theme] .gate .formwork{background: repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(var(--t-accent-rgb),.035) calc(25% - 1px) 25%), repeating-linear-gradient(0deg,transparent 0 calc(33.3% - 1px),rgba(var(--t-accent-rgb),.022) calc(33.3% - 1px) 33.3%)} html[data-theme] .gate .grain{opacity:.045} html[data-theme] .gate h1{text-shadow:0 0 60px rgba(var(--t-rgb),.6)} html[data-theme] .gate-foot{border-top-color:var(--t-hair)} html[data-theme] .field input,html[data-theme] .field select,html[data-theme] .field textarea{border-bottom-color:rgba(236,232,223,.2);transition:border-color 1s var(--t-ease),box-shadow 1s var(--t-ease)} html[data-theme] .field input:focus,html[data-theme] .field select:focus,html[data-theme] .field textarea:focus{border-bottom-color:var(--t-accent);box-shadow:none} html[data-theme] .field select option{background:var(--shadow)} html[data-theme] .roles label span{border-color:var(--t-line);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:11px 16px;transition:all 1s var(--t-ease)} html[data-theme] .roles input:checked+span{background:rgba(var(--t-accent-rgb),.08);color:var(--daylight);border-color:rgba(var(--t-accent-rgb),.7)} /* hero */ html[data-theme] .hero{background:var(--basalt)} html[data-theme] .hero .ph::after{background: linear-gradient(90deg,var(--basalt) 0%,rgba(var(--t-rgb),.86) 12%,rgba(var(--t-rgb),.18) 36%,rgba(var(--t-rgb),0) 52%), linear-gradient(0deg,rgba(var(--t-rgb),.8) 0%,rgba(var(--t-rgb),0) 26%)} @media (max-width:860px){html[data-theme] .hero .ph::after{background:linear-gradient(0deg,var(--basalt) 0%,rgba(var(--t-rgb),0) 34%)}} html[data-theme] .hero-meta div{border-left-color:var(--t-line)} /* the hall */ html[data-theme] .hall{background:var(--joint);border-color:var(--joint)} html[data-theme] .bay{background:var(--t-panel);transition:background 1.2s var(--t-ease)} html[data-theme] a.bay:hover{background:var(--shadow)} html[data-theme] .bay .pshot::after{background:linear-gradient(0deg,var(--t-panel),transparent 38%),linear-gradient(180deg,var(--t-panel),transparent 22%);transition:opacity 1.2s var(--t-ease)} html[data-theme] a.bay:hover .pshot{filter:brightness(1.06);transition:filter 1.2s var(--t-ease)} html[data-theme] .bay .status::before{width:4px;height:4px;border-color:var(--titanium);opacity:.8} html[data-theme] .bay.lit{background:var(--shadow)} html[data-theme] .bay.lit .status::before{background:var(--t-accent);border-color:var(--t-accent);box-shadow:0 0 8px rgba(var(--t-accent-rgb),.6)} html[data-theme] .bay.lit .shot::after{background:radial-gradient(90% 70% at 52% 18%,transparent 40%,rgba(var(--t-rgb),.55) 80%),linear-gradient(0deg,var(--shadow),transparent 30%)} html[data-theme] .olabel{border-top-color:var(--t-hair)} html[data-theme] a.bay:hover .olabel h4{text-decoration:none} html[data-theme] .olabel h4{font-weight:500;letter-spacing:.32em} html[data-theme] .cmp-tile{background:var(--shadow-2)} html[data-theme] .veilplate{background:radial-gradient(60% 70% at 50% 0%,rgba(244,240,231,.08),transparent 70%),var(--t-panel);border-color:var(--t-hair)} @media (max-width:640px){ html[data-theme] .hall{background:none} html[data-theme] .covered{background:var(--joint);border-color:var(--joint)} html[data-theme] .bay.lit,html[data-theme] .cmp-tile{border-color:var(--joint)} } /* covered machines: warm silk instead of cold grey */ html[data-theme] #silk stop:nth-child(1){stop-color:var(--t-silk1)} html[data-theme] #silk stop:nth-child(2){stop-color:var(--t-silk2)} html[data-theme] #silk stop:nth-child(3){stop-color:var(--t-silk3)} html[data-theme] #silk stop:nth-child(4){stop-color:var(--t-silk4)} html[data-theme] svg circle[fill="#16181A"]{fill:var(--t-tyre)} /* photographs of the concrete hall: a gentle warm grade so they sit on the ground */ html[data-theme] .hero .ph::before,html[data-theme] .break::before,html[data-theme] .bay.lit .shot::before,html[data-theme] .fphoto .crop::before{ content:"";position:absolute;inset:0;background:var(--t-tint);mix-blend-mode:color;opacity:.32;pointer-events:none} html[data-theme] .break{isolation:isolate} /* the roof-slot light takes the theme's warmth */ html[data-theme] .bay .stage::before{background:linear-gradient(180deg,rgba(var(--t-beam),.15),rgba(var(--t-beam),.045) 55%,rgba(var(--t-beam),.01))} html[data-theme] .bay .stage::after{background:rgb(var(--t-beam));box-shadow:0 0 12px rgba(var(--t-beam),.55)} html[data-theme] .veilplate::before{background:linear-gradient(180deg,rgba(var(--t-beam),.16),rgba(var(--t-beam),.02))} /* folio */ html[data-theme] .folio{background:linear-gradient(180deg,var(--basalt),var(--shadow-2) 30%,var(--basalt))} html[data-theme] .fphoto .pimg::after{box-shadow:inset 0 0 120px rgba(var(--t-rgb),.45)} html[data-theme] .fphoto .crop::after{box-shadow:inset 0 0 120px rgba(var(--t-rgb),.5)} html[data-theme] .trip .ph{filter:grayscale(.1) sepia(.06) contrast(1.03)} html[data-theme] .fnav{border-top-color:var(--t-hair)} html[data-theme] .fnav button b{transition:color 1s var(--t-ease)} html[data-theme] .fnav button:hover b{text-decoration:none;color:var(--t-accent-hi)} /* other sections */ html[data-theme] .signal{background:var(--t-deep)} html[data-theme] .slab{background: radial-gradient(55% 80% at 76% 8%,rgba(var(--t-accent-rgb),.16),transparent 62%), radial-gradient(40% 60% at 12% 100%,var(--t-slab-c),transparent 70%), linear-gradient(160deg,var(--t-slab-a),var(--t-slab-b)) !important} html[data-theme] .sys{border-top-color:var(--t-line)} html[data-theme] .sys>div{border-right-color:var(--t-hair)} html[data-theme] .tele{border-color:var(--t-hair)} html[data-theme] .hour{background:radial-gradient(60% 50% at 70% 40%,rgba(var(--t-accent-rgb),.06),transparent 70%),var(--basalt)} html[data-theme] #face stop{stop-color:var(--basalt)} html[data-theme] .dial .hand circle[r="10"]{fill:var(--basalt)} html[data-theme] #arcFast{stroke:var(--pounamu)} html[data-theme] .readings{border-top-color:var(--t-line)} html[data-theme] .break::after{background:linear-gradient(0deg,var(--basalt) 2%,rgba(var(--t-rgb),.55) 40%,rgba(var(--t-rgb),.05) 75%),linear-gradient(180deg,var(--basalt),transparent 12%)} html[data-theme] .dlband{border-color:var(--t-hair);background:linear-gradient(100deg,var(--shadow) 0%,var(--basalt) 60%)} html[data-theme] .cover{background:var(--t-deep);box-shadow:28px 30px 60px rgba(0,0,0,.6),1px 0 0 var(--formwork) inset} html[data-theme] .pages{background:var(--shadow)} html[data-theme] form.req{background:linear-gradient(180deg,var(--shadow),var(--shadow-2));border-color:var(--t-hair)} html[data-theme] .facts{border-top-color:var(--t-line)} html[data-theme] .facts div{border-bottom-color:var(--t-hair)} html[data-theme] footer,html[data-theme] .legal{border-color:var(--t-hair)} html[data-theme] .colo .web{border-bottom-color:var(--t-line);transition:color 1s var(--t-ease)} html[data-theme] .cat-back a{transition:color 1s var(--t-ease),border-color 1s var(--t-ease)} html[data-theme] .cat-back a:hover{border-color:var(--t-accent)} /* small controls */ html[data-theme] .cpy{border-color:var(--t-line);font-weight:400;letter-spacing:.24em;padding:8px 13px;transition:color 1s var(--t-ease),border-color 1s var(--t-ease),background 1s var(--t-ease)} html[data-theme] .cpy:hover{border-color:var(--t-accent);color:var(--daylight);background:rgba(var(--t-accent-rgb),.06)} html[data-theme] .linkish{text-decoration:none;background:linear-gradient(var(--t-accent),var(--t-accent)) 0 100%/0 1px no-repeat,linear-gradient(rgba(236,232,223,.28),rgba(236,232,223,.28)) 0 100%/100% 1px no-repeat; padding:4px 0 6px;font-weight:400;letter-spacing:.24em;transition:color 1s var(--t-ease),background-size 1.1s var(--t-ease)} html[data-theme] .linkish:hover{color:var(--daylight);background-size:100% 1px,100% 1px} /* --------------------------------------------------------------------- 2 · SHARED BUTTON MECHANICS (each theme sets its own voice below) --------------------------------------------------------------------- */ html[data-theme] .btn,html[data-theme] .btn.xl,html[data-theme] .btn:hover,html[data-theme] .btn.xl:hover{ background:transparent !important;box-shadow:none !important} html[data-theme] .btn{position:relative;isolation:isolate;overflow:hidden; font:400 11px/1 var(--ui);letter-spacing:.34em;padding:20px 30px 20px 34px;gap:18px; transition:color 1s var(--t-ease),border-color 1s var(--t-ease),outline-color 1s var(--t-ease),outline-offset 1s var(--t-ease)} html[data-theme] .btn.xl{font-size:11px;padding:21px 32px 21px 36px} html[data-theme] .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--t-btn-fill,transparent); transform:scaleX(0);transform-origin:right center;transition:transform 1.1s var(--t-ease)} html[data-theme] .btn:hover::before,html[data-theme] .btn:focus-visible::before{transform:scaleX(1);transform-origin:left center} /* the arrow becomes a drawn hairline arrow */ html[data-theme] .btn .ar{font-size:0;line-height:0;display:inline-block;position:relative;width:22px;height:1px;background:currentColor;transform:none;flex:none; transition:width 1s var(--t-ease)} html[data-theme] .btn .ar::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transform-origin:center} html[data-theme] .btn:hover .ar{width:36px} html[data-theme] #dlBtn .ar{width:1px;height:14px;top:-1px} html[data-theme] #dlBtn .ar::after{right:auto;left:-3px;top:auto;bottom:0;transform:rotate(135deg)} html[data-theme] #dlBtn:hover .ar{width:1px;height:20px} html[data-theme] .fctas{gap:18px 30px} html[data-theme] .hero .ctas{gap:18px 30px} @media (max-width:520px){html[data-theme] .btn.xl{letter-spacing:.24em;padding:20px 22px;font-size:10.5px}} /* section-bar CTA: hairline, never filled */ html[data-theme] .top nav a.cta{background:transparent !important;color:var(--porcelain) !important;border:1px solid rgba(var(--t-accent-rgb),.5) !important; padding:10px 18px 10px 20px;letter-spacing:.28em;transition:border-color 1s var(--t-ease),background 1s var(--t-ease),color 1s var(--t-ease)} html[data-theme] .top nav a.cta:hover{background:rgba(var(--t-accent-rgb),.08) !important;border-color:var(--t-accent) !important;color:var(--daylight) !important} /* --------------------------------------------------------------------- 3 · SHARED TABS (sliding hairline indicator is .cat-ind, added by index.html) --------------------------------------------------------------------- */ html[data-theme] .tabs{position:relative;border-bottom:0;box-shadow:inset 0 -1px 0 var(--t-hair);gap:clamp(24px,2.8vw,46px)} html[data-theme] .tabs button,html[data-theme] .tabs button:first-child{position:relative;padding:20px 0 18px;border-bottom:0;margin-bottom:0; font:400 10.5px/1 var(--ui);letter-spacing:.3em;color:var(--titanium);transition:color 1s var(--t-ease)} html[data-theme] .tabs button::before{display:none} html[data-theme] .tabs button:hover{color:var(--porcelain)} html[data-theme] .tabs button[aria-selected="true"]{color:var(--daylight);border-bottom-color:transparent} html[data-theme] .tabs button.is-lit::after{content:"";position:absolute;top:14px;right:-9px;width:3px;height:3px;border-radius:50%;background:var(--t-accent-hi);opacity:.85} html[data-theme] .cat-ind{display:block;position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--t-accent);pointer-events:none; transition:left 1.1s var(--t-ease),width 1.1s var(--t-ease)} .cat-ind{display:none} /* --------------------------------------------------------------------- 4 · SHARED FINISH SWATCHES --------------------------------------------------------------------- */ html[data-theme] .finishes-h{margin-top:40px;padding-top:0} html[data-theme] .finishes.many{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 18px;margin-top:22px !important} html[data-theme] .finishes.many .sw,html[data-theme] .finishes .sw{font:400 10px/1.35 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--titanium);gap:14px; transition:color 1s var(--t-ease);cursor:default} html[data-theme] .finishes.many .sw i,html[data-theme] .sw i.c,html[data-theme] .sw i.c2{width:13px;height:13px;flex:none;border:0; box-shadow:inset 0 -2px 3px rgba(0,0,0,.28);outline:1px solid var(--t-ring);outline-offset:3px; transition:outline-color 1s var(--t-ease),outline-offset 1s var(--t-ease)} html[data-theme] .sw i.c{background:radial-gradient(70% 70% at 34% 28%,rgba(255,255,255,.26),transparent 60%),var(--c)} html[data-theme] .sw i.c2{background:radial-gradient(70% 70% at 34% 28%,rgba(255,255,255,.22),transparent 60%),linear-gradient(135deg,var(--c) 50%,var(--c2) 50%)} html[data-theme] .finishes.many .sw:hover{color:var(--daylight)} html[data-theme] .finishes.many .sw:hover i{outline-color:var(--t-accent);outline-offset:5px} html[data-theme] .sw i.open{width:13px;height:13px;border:1px dashed var(--t-line);outline:0;box-shadow:none} @media (max-width:1180px){html[data-theme] .finishes.many{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:900px){html[data-theme] .finishes.many{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:640px){html[data-theme] .finishes.many{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}} /* --------------------------------------------------------------------- 5 · SHARED SPEC TABLE, PRICE, COMPARE --------------------------------------------------------------------- */ html[data-theme] .ledger{margin-top:40px;border-top:1px solid var(--t-line)} html[data-theme] .ledger div{padding:15px 0 14px;border-bottom:1px solid var(--t-hair)} html[data-theme] .ledger dt{font-size:10px;letter-spacing:.28em} html[data-theme] .ledger dd{font-size:15px;letter-spacing:.01em} html[data-theme] .ledger dd .tbc{font-size:16.5px;color:rgba(185,181,171,.78)} html[data-theme] .price{border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-hair);padding:24px 0;margin:42px 0 34px} html[data-theme] .ctable{border-top:1px solid var(--t-line)} html[data-theme] .crow{border-bottom-color:var(--t-hair);padding:15px 0 14px} html[data-theme] .crow.hd{border-bottom-color:var(--t-line)} html[data-theme] .crow .k.label{font-size:10px;letter-spacing:.28em} html[data-theme] .crow .v .tbc{color:rgba(185,181,171,.78);font-size:16.5px} html[data-theme] .crow .st{margin-top:12px} html[data-theme] .crow .st::before{width:4px;height:4px} html[data-theme] .crow .st.lit::before{background:var(--t-accent);border-color:var(--t-accent)} html[data-theme] .pick{gap:10px} html[data-theme] .pick span{border-color:var(--t-line);padding:12px 18px 12px 16px;font-size:10.5px;letter-spacing:.26em;gap:12px; transition:color 1s var(--t-ease),border-color 1s var(--t-ease),background 1s var(--t-ease)} html[data-theme] .pick span::before{width:5px;height:5px;border-radius:50%;border:1px solid currentColor;opacity:.7;transition:background 1s var(--t-ease)} html[data-theme] .pick label:hover span{color:var(--porcelain);border-color:rgba(var(--t-accent-rgb),.55)} html[data-theme] .pick input:checked+span{background:rgba(var(--t-accent-rgb),.07);color:var(--daylight);border-color:rgba(var(--t-accent-rgb),.75)} html[data-theme] .pick input:checked+span::before{background:var(--t-accent-hi);border-color:var(--t-accent-hi);opacity:1} html[data-theme] .scale .track{background:repeating-linear-gradient(90deg,var(--joint) 0 1px,transparent 1px calc(100%/12));border-bottom-color:var(--formwork)} /* ===================================================================== THEME 1 · WARM ONYX The website's own warm charcoal. Brass appears only as a hairline. ===================================================================== */ html[data-theme="1"] .btn,html[data-theme="1"] .btn.xl{--t-btn-fill:rgba(201,150,61,.11); border:1px solid rgba(201,150,61,.55) !important;color:var(--porcelain) !important} html[data-theme="1"] .btn:hover,html[data-theme="1"] .btn.xl:hover{border-color:#C9963D !important;color:var(--daylight) !important} /* secondary: text with a hairline that brass draws across */ html[data-theme="1"] .btn.ghost{border:0 !important;padding:20px 2px;color:var(--titanium) !important;overflow:visible} html[data-theme="1"] .btn.ghost::before{display:none} html[data-theme="1"] .btn.ghost::after{content:"";position:absolute;left:2px;right:calc(2px + .34em);bottom:12px;height:1px; background:linear-gradient(#C9963D,#C9963D) 0 0/0 100% no-repeat,rgba(236,232,223,.3);transition:background-size 1.1s var(--t-ease)} html[data-theme="1"] .btn.ghost:hover{color:var(--daylight) !important} html[data-theme="1"] .btn.ghost:hover::after{background-size:100% 100%,auto} html[data-theme="1"] .tabs button[aria-selected="true"]{color:var(--daylight)} /* ===================================================================== THEME 2 · IVORY & INK Deeper ink ground, ivory hairlines, couture serif tabs. Brass is kept back for the hover only. ===================================================================== */ html[data-theme="2"] .btn,html[data-theme="2"] .btn.xl{--t-btn-fill:rgba(201,150,61,.07); border:1px solid rgba(237,233,224,.6) !important;color:var(--porcelain) !important;letter-spacing:.32em;font-size:10.5px} html[data-theme="2"] .btn:hover,html[data-theme="2"] .btn.xl:hover{border-color:#C9963D !important;color:#E3C48E !important} html[data-theme="2"] .fctas,html[data-theme="4"] .fctas{gap:14px 14px} html[data-theme="2"] .btn.ghost,html[data-theme="4"] .btn.ghost{padding:20px 22px 20px 26px} html[data-theme="2"] .btn.ghost{border-color:rgba(237,233,224,.2) !important;color:var(--titanium) !important;--t-btn-fill:rgba(237,233,224,.04)} html[data-theme="2"] .btn.ghost:hover{border-color:rgba(237,233,224,.55) !important;color:var(--daylight) !important} html[data-theme="2"] .top nav a.cta{border-color:rgba(237,233,224,.45) !important} html[data-theme="2"] .top nav a.cta:hover{border-color:#C9963D !important;background:rgba(201,150,61,.07) !important;color:#E3C48E !important} html[data-theme="2"] .top nav a:not(.cta)::after{background:var(--porcelain)} /* tabs set in the display serif, like a couture house's collection list */ html[data-theme="2"] .tabs{gap:clamp(26px,3vw,52px)} html[data-theme="2"] .tabs button,html[data-theme="2"] .tabs button:first-child{font:400 20px/1 var(--didone);letter-spacing:.02em;text-transform:none;padding:18px 0 17px;color:rgba(180,176,166,.85)} html[data-theme="2"] .tabs button[aria-selected="true"]{color:var(--daylight);font-style:italic} html[data-theme="2"] .tabs button.is-lit::after{top:15px;right:-8px;background:#C9963D} html[data-theme="2"] .cat-ind{background:var(--porcelain)} /* chips: ivory ring, names in small serif caps */ html[data-theme="2"] .finishes.many .sw{font:400 15px/1.2 var(--didone);letter-spacing:.06em;text-transform:none;font-variant:small-caps;color:var(--titanium)} html[data-theme="2"] .finishes.many .sw:hover i{outline-color:#C9963D} html[data-theme="2"] .ledger{border-top-color:rgba(237,233,224,.3)} html[data-theme="2"] .price{border-top-color:rgba(237,233,224,.3)} html[data-theme="2"] .pick input:checked+span{border-color:rgba(237,233,224,.6);background:rgba(237,233,224,.05)} html[data-theme="2"] .pick input:checked+span::before{background:#C9963D;border-color:#C9963D} html[data-theme="2"] .linkish{background:linear-gradient(#C9963D,#C9963D) 0 100%/0 1px no-repeat,linear-gradient(rgba(236,232,223,.28),rgba(236,232,223,.28)) 0 100%/100% 1px no-repeat} html[data-theme="2"] .linkish:hover{background-size:100% 1px,100% 1px} /* ===================================================================== THEME 3 · BRONZE ATELIER Richer warm brown-black. Buttons are words on a bronze rule that redraws itself; the spec table reads like a watchmaker's sheet. ===================================================================== */ html[data-theme="3"] .btn,html[data-theme="3"] .btn.xl{border:0 !important;padding:16px 0 18px;justify-content:flex-start;gap:22px;overflow:visible; color:var(--porcelain) !important;letter-spacing:.32em} html[data-theme="3"] .btn::before{inset:auto 0 0 0;height:1px;z-index:0;background:rgba(176,133,70,.45);transform:none;transition:none} html[data-theme="3"] .btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#D1AA6C; transform:scaleX(0);transform-origin:right center;transition:transform 1.2s var(--t-ease)} html[data-theme="3"] .btn:hover::before{transform:none} html[data-theme="3"] .btn:hover::after,html[data-theme="3"] .btn:focus-visible::after{transform:scaleX(1);transform-origin:left center} html[data-theme="3"] .btn:hover{color:#E8CFA0 !important} html[data-theme="3"] .btn .ar{width:44px} html[data-theme="3"] .btn:hover .ar{width:64px} html[data-theme="3"] #dlBtn .ar{width:1px} html[data-theme="3"] .btn.ghost{color:var(--titanium) !important} html[data-theme="3"] .btn.ghost::before{background:rgba(239,230,213,.2)} html[data-theme="3"] .btn.ghost:hover{color:var(--daylight) !important} html[data-theme="3"] .fctas,html[data-theme="3"] .hero .ctas{gap:20px 52px} html[data-theme="3"] .req .submit .btn{justify-content:space-between} html[data-theme="3"] .top nav a.cta{border:0 !important;padding:10px 0;color:#E8CFA0 !important; background:linear-gradient(#B08546,#B08546) 0 100%/100% 1px no-repeat !important} html[data-theme="3"] .top nav a.cta:hover{background:linear-gradient(#D1AA6C,#D1AA6C) 0 100%/100% 1px no-repeat !important;color:var(--daylight) !important} /* tabs: small roman numerals, bronze hairline */ html[data-theme="3"] .tabs{counter-reset:tab} html[data-theme="3"] .tabs button{counter-increment:tab} html[data-theme="3"] .tabs button::before{display:inline-block;content:counter(tab,upper-roman);width:auto;height:auto;border:0;border-radius:0;opacity:1; font:italic 400 14px/1 var(--voice);letter-spacing:.04em;color:rgba(176,133,70,.9);margin-right:10px;transform:translateY(1px)} html[data-theme="3"] .tabs button.is-lit::before{background:none;border:0} html[data-theme="3"] .tabs button.is-lit::after{display:none} html[data-theme="3"] .cat-ind{background:#B08546} /* chips: names in italic serif */ html[data-theme="3"] .finishes.many .sw{font:italic 400 16px/1.2 var(--voice);letter-spacing:.01em;text-transform:none;color:var(--porcelain)} html[data-theme="3"] .finishes.many .sw i,html[data-theme="3"] .sw i.c,html[data-theme="3"] .sw i.c2{width:12px;height:12px;outline-color:rgba(176,133,70,.5)} /* spec table with dotted leaders, values set right */ html[data-theme="3"] .ledger{border-top:1px solid rgba(176,133,70,.45)} html[data-theme="3"] .ledger div{grid-template-columns:auto minmax(0,1fr) auto;gap:0 14px;border-bottom:0;padding:11px 0 10px} html[data-theme="3"] .ledger div::after{content:"";grid-column:2;grid-row:1;align-self:end;height:1px;margin-bottom:6px; background:radial-gradient(circle,rgba(176,133,70,.55) .6px,transparent 1px) 0 0/6px 1px repeat-x} html[data-theme="3"] .ledger dt{grid-column:1;grid-row:1} html[data-theme="3"] .ledger dd{grid-column:3;grid-row:1;text-align:right} html[data-theme="3"] .ledger div:last-child{border-bottom:1px solid rgba(176,133,70,.45);padding-bottom:16px} html[data-theme="3"] .price{border-top:0;border-bottom:1px solid rgba(176,133,70,.45)} html[data-theme="3"] .crow{border-bottom-style:dotted;border-bottom-color:rgba(176,133,70,.28)} /* ===================================================================== THEME 4 · MIDNIGHT CHAMPAGNE A barely-blue midnight ground. Champagne double hairlines that close into one on hover; a small diamond rides the tab rule. ===================================================================== */ html[data-theme="4"] .btn,html[data-theme="4"] .btn.xl{--t-btn-fill:rgba(212,188,140,.09); border:1px solid rgba(212,188,140,.62) !important;outline:1px solid rgba(212,188,140,.2);outline-offset:4px;color:#EFE6D2 !important; letter-spacing:.3em;margin:5px} html[data-theme="4"] .btn:hover,html[data-theme="4"] .btn.xl:hover{border-color:#D4BC8C !important;outline-color:rgba(212,188,140,0);outline-offset:0;color:#F5ECD8 !important} html[data-theme="4"] .btn.ghost{border-color:rgba(238,233,222,.2) !important;outline:0;color:var(--titanium) !important;--t-btn-fill:rgba(238,233,222,.04)} html[data-theme="4"] .btn.ghost:hover{border-color:rgba(212,188,140,.6) !important;color:var(--daylight) !important} html[data-theme="4"] .req .submit .btn{width:calc(100% - 10px)} html[data-theme="4"] .top nav a.cta{outline:1px solid rgba(212,188,140,.18);outline-offset:3px;transition:outline-offset 1s var(--t-ease),outline-color 1s var(--t-ease),border-color 1s var(--t-ease),background 1s var(--t-ease)} html[data-theme="4"] .top nav a.cta:hover{outline-offset:0;outline-color:transparent} html[data-theme="4"] .tabs button,html[data-theme="4"] .tabs button:first-child{letter-spacing:.34em;font-size:10px;padding:22px 0 20px} html[data-theme="4"] .tabs button[aria-selected="true"]{color:#EFE3C8} html[data-theme="4"] .cat-ind::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;background:var(--basalt); border:1px solid #D4BC8C;transform:translateX(-50%) rotate(45deg);box-sizing:border-box} html[data-theme="4"] .tabs{box-shadow:inset 0 -1px 0 rgba(212,188,140,.14)} html[data-theme="4"] .finishes.many .sw i,html[data-theme="4"] .sw i.c,html[data-theme="4"] .sw i.c2{width:15px;height:15px} html[data-theme="4"] .ledger div{border-bottom-color:rgba(212,188,140,.1)} html[data-theme="4"] .ledger dt{color:rgba(212,188,140,.85)} html[data-theme="4"] .crow .k.label{color:rgba(212,188,140,.85)} html[data-theme="4"] .crow{border-bottom-color:rgba(212,188,140,.1)} html[data-theme="4"] .price .label{color:rgba(212,188,140,.85)} html[data-theme="4"] .olabel dt{color:rgba(212,188,140,.8)} /* --------------------------------------------------------------------- THE STYLE SWITCHER (preview only) --------------------------------------------------------------------- */ .cat-sw{position:fixed;left:18px;bottom:18px;z-index:9000;display:flex;align-items:center;gap:14px;padding:9px 18px 9px 18px;border-radius:99px; background:rgba(var(--t-bar,24,23,21),.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(var(--t-accent-rgb,201,150,61),.35);box-shadow:0 14px 40px -18px rgba(0,0,0,.9); font:400 10px/1 "Jost","Helvetica Neue",Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#B9B5AB; transition:border-color 1s cubic-bezier(.45,.05,.25,1),background 1s cubic-bezier(.45,.05,.25,1)} .cat-sw .cat-sw-k{color:#B9B5AB} .cat-sw .cat-sw-n{display:flex;align-items:center;gap:2px} .cat-sw .cat-sw-n span{color:rgba(185,181,171,.45);letter-spacing:0;padding:0 1px} .cat-sw button{appearance:none;background:none;border:0;cursor:pointer;color:#B9B5AB;font:inherit;letter-spacing:.1em;padding:6px 5px;position:relative; transition:color .8s cubic-bezier(.45,.05,.25,1)} .cat-sw button::after{content:"";position:absolute;left:4px;right:4px;bottom:1px;height:1px;background:var(--t-accent-hi,#C9963D);transform:scaleX(0); transition:transform .9s cubic-bezier(.45,.05,.25,1)} .cat-sw button:hover{color:#ECE8DF} .cat-sw button[aria-pressed="true"]{color:#F4F0E7} .cat-sw button[aria-pressed="true"]::after{transform:scaleX(1)} .cat-sw .cat-sw-name{font:italic 400 16px/1 "Cormorant Garamond","Times New Roman",Georgia,serif;letter-spacing:.02em;text-transform:none;color:#ECE8DF; padding-left:14px;border-left:1px solid rgba(236,232,223,.16);white-space:nowrap} @media (max-width:520px){.cat-sw{left:10px;bottom:10px;gap:10px;padding:7px 14px}.cat-sw .cat-sw-k{display:none}.cat-sw .cat-sw-name{font-size:14px;padding-left:10px}} @media print{.cat-sw{display:none}} /* ===== 1.36-15: exact website charcoal — no brown tint ===== Same colours as every other page: #1B1D1F background, #24272A panels, off-white text, brass accents. */ html[data-theme="1"]{ --basalt:#1B1D1F; --shadow:#1F2123; --shadow-2:#1D1F21; --formwork:#2A2D30; --joint:#26292C; --t-rgb:27,29,31; --t-bar:27,29,31; --t-panel:#212326; --t-deep:#17191B; --t-silk1:#5E6166; --t-silk2:#3A3D41; --t-silk3:#26282B; --t-silk4:#202225; --t-tyre:#161819; --t-slab-a:#23252A; --t-slab-b:#17191B; --t-slab-c:rgba(201,150,61,.18); --t-hair:rgba(236,232,223,.08); } html[data-theme="1"] body{ background:#1B1D1F !important; } html[data-theme="1"] .trip .ph{ filter:none !important; } html[data-theme="1"] .slab{ background:radial-gradient(55% 80% at 76% 8%,rgba(201,150,61,.16),transparent 62%),linear-gradient(160deg,#23252A,#17191B) !important; } /* ===== 1.36-16: same light and mood as the Technology page ===== Deep charcoal #1B1D1F, panels #24272A, quiet brass, low-key lighting. The bright concrete studio photos are dimmed and edged into the charcoal so no grey or brown cast remains. */ html[data-theme="1"]{ --shadow:#24272A; --shadow-2:#202326; --formwork:#2C3033; --joint:rgba(236,232,223,.12); --t-panel:#24272A; --t-hair:rgba(236,232,223,.12); --t-line:rgba(201,150,61,.30); --t-silk1:#4A4E53; --t-silk2:#2F3236; --t-silk3:#222528; --t-silk4:#1E2023; --t-beam:236,226,205; } html[data-theme="1"] .hero .ph, html[data-theme="1"] .bay.lit .shot, html[data-theme="1"] .fphoto .crop, html[data-theme="1"] .t1 .ph, html[data-theme="1"] .t2 .ph, html[data-theme="1"] .t3 .ph, html[data-theme="1"] .sig-pair .a, html[data-theme="1"] .sig-pair .b, html[data-theme="1"] .break{ filter:brightness(.66) contrast(1.08) saturate(.85) !important; box-shadow:inset 0 0 140px 30px rgba(27,29,31,.85) !important; } html[data-theme="1"] .hero .ph{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%); } html[data-theme="1"] .gate .beam, html[data-theme="1"] .gate .slot, html[data-theme="1"] .gate .pool{ opacity:.55 !important; } html[data-theme="1"] .gate .formwork{ opacity:.35 !important; } /* ===== 1.36-17: flat charcoal exactly like Philosophy / Technology ===== One charcoal everywhere (no lighter grey bands), photos pulled down into the dark. */ html[data-theme="1"]{ --shadow:#1B1D1F; --shadow-2:#1B1D1F; --formwork:#1B1D1F; --t-panel:#1B1D1F; --t-deep:#1B1D1F; --t-slab-a:#1B1D1F; --t-slab-b:#1B1D1F; } html[data-theme="1"] section, html[data-theme="1"] main, html[data-theme="1"] footer{ background-color:#1B1D1F; } html[data-theme="1"] .hero .ph, html[data-theme="1"] .break{ filter:brightness(.5) contrast(1.12) saturate(.8) !important; box-shadow:inset 0 0 220px 60px #1B1D1F !important; } html[data-theme="1"] .bay.lit .shot, html[data-theme="1"] .fphoto .crop, html[data-theme="1"] .t1 .ph, html[data-theme="1"] .t2 .ph, html[data-theme="1"] .t3 .ph, html[data-theme="1"] .sig-pair .a, html[data-theme="1"] .sig-pair .b{ filter:brightness(.56) contrast(1.1) saturate(.8) !important; box-shadow:inset 0 0 160px 40px #1B1D1F !important; } html[data-theme="1"] .gate .beam, html[data-theme="1"] .gate .slot, html[data-theme="1"] .gate .pool{ opacity:.35 !important; } html[data-theme="1"] .gate .formwork, html[data-theme="1"] .gate .grain{ opacity:0 !important; } /* ===== 1.36-18: Highway X3 studio photos (dark navy studio) instead of the grey concrete shots ===== */ html[data-theme="1"] .hero .ph{ background:url(../assets/x3-red-front.jpg) 62% 55%/cover no-repeat !important; filter:none !important; box-shadow:inset 0 0 200px 50px #1B1D1F !important; } html[data-theme="1"] .break{ background:url(../assets/x3-red-angle.jpg) 50% 60%/cover no-repeat !important; filter:none !important; box-shadow:inset 0 0 220px 60px #1B1D1F !important; } html[data-theme="1"] .bay.lit .shot{ background:url(../assets/x3-main.jpg) 50% 55%/cover no-repeat !important; filter:none !important; box-shadow:inset 0 0 90px 20px #1B1D1F !important; } html[data-theme="1"] .fphoto .crop{ background:url(../assets/x3-main.jpg) 50% 55%/cover no-repeat !important; filter:none !important; box-shadow:inset 0 0 120px 30px #1B1D1F !important; } html[data-theme="1"] .t1 .ph{ background:url(../assets/x3-red-front.jpg) 40% 55%/cover no-repeat !important; filter:none !important; } html[data-theme="1"] .t2 .ph{ background:url(../assets/x3-main.jpg) 50% 55%/cover no-repeat !important; filter:none !important; } html[data-theme="1"] .t3 .ph{ background:url(../assets/x3-red-angle.jpg) 55% 55%/cover no-repeat !important; filter:none !important; } html[data-theme="1"] .t1 .ph, html[data-theme="1"] .t2 .ph, html[data-theme="1"] .t3 .ph{ box-shadow:inset 0 0 100px 20px #1B1D1F !important; } /* ===== 1.36-23: one title style everywhere = the About page titles (Cormorant Garamond, upright, 400) ===== */ h1,h2,h3, .about-card-label,.gb-cap-title,.cs-title,.fqc-q,.fqc-ch-title,.st-title,.ph-lead,.display{ font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif !important; font-weight:400 !important; font-style:normal !important; } h2.sr,.sr-only{ font-family:inherit; } h1 em,h2 em,h3 em{ font-style:italic; } /* ===== 1.36-26: Private Catalogue uses exactly the About page fonts ===== */ .site-bar .sb-mark{ font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif !important; font-weight:600 !important; letter-spacing:.16em !important; } .voice,.tbc,.dash,dd,.btn .ar{ font-family:'Jost','Helvetica Neue',Arial,sans-serif !important; font-style:normal !important; font-weight:300 !important; } .xm i,.v,blockquote,blockquote *{ font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif !important; font-style:normal !important; font-weight:400 !important; } svg text{ font-family:'Jost','Helvetica Neue',Arial,sans-serif !important; font-style:normal !important; } .plate-no span{ font-family:"Jost","Helvetica Neue",Arial,sans-serif !important; font-style:normal !important; font-weight:300 !important; }