/* ========================================================================== KLAUSENWORKS · brand tokens The house palette, type stack and spacing, plus the theme variants: dusk is the default; "green" re-tints the deep surfaces toward forest green; "light" turns them to warm paper. Themes switch via data-theme on , kept in localStorage. Only custom properties live here; the component-level theme exceptions stay in site.css. CANONICAL HOME: klausenworks-platform/packages/brand. The landing repo carries a byte-identical vendored copy: edit only in the platform, then run `pnpm sync:brand`. Drift fails both builds. ========================================================================== */ :root{ --day:#efe7d6; --day2:#e7dcc2; --dusk:#2b2418; --night:#0e1310; --ink:#202619; --ink-soft:#4a4f40; --paper:#efe7d6; --paper-soft:rgba(239,231,214,.84); --paper-dim:rgba(239,231,214,.58); --brass:#cda661; --brass-hi:#e6c67f; --steel:#89a2ba; --accent:#8a6d28; --line-day:rgba(32,38,25,.28); --line-night:rgba(239,231,214,.16); --serif:"EB Garamond",Georgia,"Times New Roman",serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --pad:clamp(20px,4vw,48px); } /* ---- green ---- */ [data-theme="green"]{--night:#0b1410;--dusk:#1d2b1f} /* ---- light ---- */ [data-theme="light"]{ --night:#f3edde; --dusk:#eae1ca; --paper:#202619; --paper-soft:rgba(32,38,25,.82); --paper-dim:rgba(32,38,25,.55); --line-night:rgba(32,38,25,.22); --brass-hi:#8a6d28; --steel:#5c7288; } /* ========================================================================== KLAUSENWORKS · base element layer Reset and bare-element defaults. Everything here reads from tokens.css. CANONICAL HOME: klausenworks-platform/packages/brand. The landing repo carries a byte-identical vendored copy: edit only in the platform, then run `pnpm sync:brand`. Drift fails both builds. ========================================================================== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* the page may never exceed the viewport horizontally, on any engine */ html,body{max-width:100%;overflow-x:clip} body{background:var(--night);color:var(--paper);font-family:var(--serif);line-height:1.5;-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} ::selection{background:var(--brass);color:var(--night)} :focus-visible{outline:2px solid var(--brass);outline-offset:3px} [data-theme="light"] ::selection{background:var(--brass);color:#231c0d} /* ========================================================================== KLAUSENWORKS · design system "chapters at dusk" A page is a deck of chapters. Shared: photo chapter, type chapter (dusk), night close. Each department page has its own native form on top: manufacturing = catalogue ledger · development = drawing board · decoration = finish library. Day falls to night down the page as grounds, not effects. One motion: text rises as a chapter enters. Type floor: nothing under 12px, mono labels 12.5px+, body copy 16.5px+. ========================================================================== */ .wrapin{width:100%;max-width:1360px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* -------------------------------------------------------------------------- header · compact, grouped -------------------------------------------------------------------------- */ .head{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center; padding:15px var(--pad);transition:background .35s,transform .35s ease,box-shadow .35s} /* chrome hides on scroll down, returns on scroll up (desktop: the whole bar) */ @media(min-width:1024px){.head.hidden{transform:translateY(-100%)}} /* hero legibility scrim: a soft gradient wash at the very top, only before scrolling */ .head::after{content:"";position:absolute;inset:0 0 -44px 0;z-index:-1;pointer-events:none;transition:opacity .35s; background:linear-gradient(to bottom,rgba(14,19,16,.5),rgba(14,19,16,0))} body[data-tone="day"] .head::after{background:linear-gradient(to bottom,rgba(239,231,214,.6),rgba(239,231,214,0))} /* once scrolling, the scrim fades away and a solid header background takes over */ .head.solid{background:rgba(14,19,16,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 26px rgba(8,10,6,.3)} .head.solid::after{opacity:0} .head .wm{font-family:var(--mono);font-size:clamp(13px,1.2vw,15px);letter-spacing:.34em;color:var(--paper)} .head nav{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center} .head nav a{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-soft); padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .head nav a:hover{color:var(--brass-hi);border-color:var(--brass)} /* language selector · two-option segmented control, current one marked with aria-current */ .langsel{display:inline-flex;border:1px solid rgba(239,231,214,.32);border-radius:3px;overflow:hidden;line-height:1} .lang-opt{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-soft);white-space:nowrap;transition:color .2s,background .2s} .lang-opt+.lang-opt{border-left:1px solid rgba(239,231,214,.32)} .lang-opt[aria-current="page"]{background:var(--brass);color:var(--night)} .lang-opt:not([aria-current="page"]):hover{color:var(--brass-hi)} .lang-opt[aria-current="page"]:hover{color:var(--night)} .head nav .langsel .lang-opt{padding:6px 10px;font-size:12.5px;border-top:0;border-right:0;border-bottom:0} .head nav .langsel .lang-opt:first-child{border-left:0} .head nav .langsel .lang-opt:hover{border-color:rgba(239,231,214,.32)} .langsel-row{margin-top:26px;align-self:flex-start} .langsel-row .lang-opt{padding:10px 16px;font-size:13px} /* theme switcher · three dots: dusk, green, light */ .themesel{display:inline-flex;align-items:center;gap:9px} .th{width:15px;height:15px;border-radius:50%;padding:0;cursor:pointer; border:1px solid rgba(239,231,214,.5);transition:box-shadow .2s,border-color .2s} .th[data-theme-set=""]{background:#2b2418} .th[data-theme-set="green"]{background:#1d2b1f} .th[data-theme-set="light"]{background:#efe7d6} .th:hover{border-color:var(--brass-hi)} .th[aria-pressed="true"]{box-shadow:0 0 0 2px var(--brass)} .themesel-row{margin-top:26px;align-self:flex-start} .themesel-row .th{width:19px;height:19px} .foot-langsel{vertical-align:middle} .foot-langsel .lang-opt{padding:3px 9px;font-size:12px} /* audience mega-menu (desktop) */ .grp{position:relative} .grp-t::after{content:"";display:inline-block;margin-left:7px;vertical-align:2px; border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;transition:transform .2s} .grp:hover .grp-t::after,.grp:focus-within .grp-t::after{transform:translateY(2px)} .mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;display:none;min-width:300px;z-index:60} .grp:hover .mega,.grp:focus-within .mega{display:block} .mega-in{position:relative;background:rgb(16,20,17);border:1px solid rgba(205,166,97,.38); box-shadow:0 24px 60px rgba(0,0,0,.55);padding:14px 20px;display:grid;gap:2px;animation:ddin .22s ease} .mega-in::before{content:"";position:absolute;top:-5.5px;left:50%;width:9px;height:9px;background:rgb(16,20,17); transform:translateX(-50%) rotate(45deg);border-left:1px solid rgba(205,166,97,.38);border-top:1px solid rgba(205,166,97,.38)} @keyframes ddin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .head nav .mega-in a{display:flex;align-items:center;gap:12px;padding:8px 0;border:0; font-family:var(--serif);font-size:16.5px;letter-spacing:0;text-transform:none;color:var(--paper-soft);white-space:nowrap} .head nav .mega-in a::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--brass)} .head nav .mega-in a:hover{color:var(--brass-hi);border:0} /* active page */ body[data-page="workshop"] .nav-workshop, body[data-page="service"] .nav-service, body[data-page="manufacturing"] .nav-prod, body[data-page="development"] .nav-prod, body[data-page="design"] .nav-prod, body[data-page="contact"] .nav-contact{color:var(--brass-hi);border-bottom-color:var(--brass)} /* header over a day-toned hero (e.g. the drawing board) */ body[data-tone="day"] .head:not(.solid) .wm, body[data-tone="day"] .head:not(.solid) nav>a, body[data-tone="day"] .head:not(.solid) .langsel .lang-opt, body[data-tone="day"] .head:not(.solid) .navtoggle{color:var(--ink)} body[data-tone="day"] .head:not(.solid) .langsel, body[data-tone="day"] .head:not(.solid) .langsel .lang-opt+.lang-opt, body[data-tone="day"] .head:not(.solid) .navtoggle{border-color:rgba(32,38,25,.4)} body[data-tone="day"] .head:not(.solid) .langsel .lang-opt[aria-current="page"]{color:var(--night)} .navtoggle{display:none;background:none;border:1px solid rgba(239,231,214,.35);color:var(--paper); font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 13px;cursor:pointer; transition:background .3s,border-color .3s} @media(max-width:1023px){ .head nav{display:none} .navtoggle{display:block} /* on mobile the hidden header keeps only the MENIU button, floating and tappable */ .head .wm{transition:opacity .25s,transform .3s ease} .head.hidden,.head.solid.hidden{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} .head.hidden::after{opacity:0} .head.hidden .wm{opacity:0;transform:translateY(-10px);pointer-events:none} .head.hidden .navtoggle{background:rgba(14,19,16,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-color:rgba(205,166,97,.45)} } /* mobile menu */ /* while the overlay is open, the page behind it cannot scroll */ html.menu-open,html.menu-open body{overflow:hidden} .menu{position:fixed;inset:0;z-index:50;background:var(--night);display:flex;flex-direction:column;justify-content:center; padding:0 28px;overflow-y:auto;overscroll-behavior:contain; visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none; transition:opacity .34s ease,transform .4s cubic-bezier(.2,.72,.2,1),visibility 0s linear .4s} .menu.open{visibility:visible;opacity:1;transform:none;pointer-events:auto; transition:opacity .34s ease,transform .4s cubic-bezier(.2,.72,.2,1),visibility 0s} /* menu items rise and fade in, one after another */ .menu>*{opacity:0;transform:translateY(15px);transition:opacity .4s ease,transform .44s cubic-bezier(.2,.72,.2,1)} .menu.open>*{opacity:1;transform:none} /* the close button only fades: it must sit exactly where the menu button was, from the first frame */ .menu>.close{transform:none} .menu.open>*:nth-child(2){transition-delay:.07s} .menu.open>*:nth-child(3){transition-delay:.12s} .menu.open>*:nth-child(4){transition-delay:.17s} .menu.open>*:nth-child(5){transition-delay:.22s} .menu.open>*:nth-child(6){transition-delay:.27s} /* one visual grammar: mono captions label the groups, bulleted serif rows are the links */ .menu .mlabel{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--brass-hi);margin-bottom:12px} /* the close button sits exactly where the menu button was, so the thumb never moves */ .menu .close{position:absolute;top:15px;right:var(--pad);background:none;border:1px solid rgba(239,231,214,.35);color:var(--paper); font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:9px 13px;cursor:pointer} .menu .mgroup{padding:18px 0} .menu .mgroup+.mgroup{border-top:1px solid rgba(239,231,214,.08)} .menu .msub{list-style:none;margin:0;padding:0;display:grid;gap:13px} .menu .msub a{position:relative;padding-left:24px;font-family:var(--serif);font-size:clamp(20px,5.2vw,23px);color:var(--paper)} .menu .msub a::before{content:"";position:absolute;left:0;top:calc(.75em - 3px);width:6px;height:6px;border-radius:50%;background:var(--brass)} .menu .msub a:hover{color:var(--brass-hi)} /* the page you are on is marked in the menu and the footer menus */ .menu .msub a[aria-current="page"],.fmg a[aria-current="page"]:not(.lang-opt){color:var(--brass-hi); text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px; text-decoration-color:rgba(205,166,97,.45)} .menu .lang-row{margin-top:26px} .menu .lang-row a{display:inline-block;border:1px solid rgba(239,231,214,.35);font-family:var(--mono);font-size:12.5px; letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;color:var(--paper)} /* -------------------------------------------------------------------------- chapters -------------------------------------------------------------------------- */ /* the home deck snaps chapter by chapter */ html:has(body[data-page="home"]){scroll-snap-type:y mandatory} body[data-page="home"] .ch{scroll-snap-align:start} .ch{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden} /* anchor jumps land clear of the fixed header (not under it) */ .ledger,.board,.night-block,.band{scroll-margin-top:64px} body:not([data-page="home"]) .ch{scroll-margin-top:64px} /* three client-focused points inside the dusk 'why' chapter */ .trio{margin-top:clamp(30px,5vh,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);text-align:left} .trio>div{border-top:1px solid rgba(205,166,97,.4);padding-top:14px} .trio h3{font-size:clamp(18px,1.8vw,21px);font-weight:500;color:var(--paper)} .trio p{margin-top:8px;font-size:16.5px;color:var(--paper-soft);max-width:34ch} @media(max-width:760px){.trio{grid-template-columns:1fr;gap:18px}} .ch .bg{position:absolute;inset:0} .ch .bg img{width:100%;height:100%;object-fit:cover} .ch .veil{position:absolute;inset:0;background:linear-gradient(to top, rgba(14,19,16,.94) 0%, rgba(14,19,16,.62) 26%, rgba(14,19,16,.16) 58%, rgba(14,19,16,.06) 100%)} .ch .txt{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto; padding:110px var(--pad) clamp(36px,5.5vh,64px)} /* photo chapters: type always sits on a fading dark ground, belt and braces */ .ch .bg ~ .txt h1,.ch .bg ~ .txt h2,.ch .bg ~ .txt .sub,.ch .bg ~ .txt .ey, .ch .bg ~ .txt .go,.ch .bg ~ .txt .idx{ text-shadow:0 1px 18px rgba(14,19,16,.7),0 1px 3px rgba(14,19,16,.55)} /* photo chapters set their text on a full-width glass band, flush with the bottom of the viewport; content stays aligned to the 1360px grid */ .ch .bg ~ .txt{max-width:none;padding:0;margin:0} .ch .glass{width:100%;background:rgba(12,16,13,.4); border-top:1px solid rgba(239,231,214,.14); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); padding-top:clamp(22px,3vw,36px); padding-bottom:clamp(22px,3.5vh,36px); padding-left:max(var(--pad),calc((100% - 1360px)/2 + var(--pad))); padding-right:max(var(--pad),calc((100% - 1360px)/2 + var(--pad)))} @media(max-width:1023px){.ch .glass{padding-bottom:calc(clamp(22px,3.5vh,36px) + 54px)}} .ey{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi);display:block;margin-bottom:16px} .ch h1,.ch h2{font-weight:500;font-size:clamp(34px,5.2vw,64px);line-height:1.05;max-width:17ch;color:var(--paper)} .ch .sub{margin-top:16px;font-size:clamp(17px,1.6vw,21px);color:var(--paper-soft);max-width:48ch} .go{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--mono);font-size:13px; letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi)} .go::after{content:"→";transition:transform .25s} .go:hover::after{transform:translateX(6px)} .golist{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:28px} .golist .go{margin-top:0} /* scroll cue · the deck continues below */ .scrollcue{position:absolute;right:var(--pad);bottom:clamp(32px,5vh,52px);z-index:3; display:flex;flex-direction:column;align-items:center;gap:10px; font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-soft); text-shadow:0 1px 12px rgba(14,19,16,.7)} .scrollcue::after{content:"";width:1px;height:46px; background-image:linear-gradient(to bottom,transparent,var(--brass-hi),transparent), linear-gradient(rgba(239,231,214,.28),rgba(239,231,214,.28)); background-size:100% 46px,100% 100%;background-repeat:no-repeat;background-position:0 -46px,0 0; animation:cue 2.4s ease-in-out infinite} @keyframes cue{55%,100%{background-position:0 46px,0 0}} @media(max-width:1023px){ .scrollcue{bottom:calc(70px + 18px)} .scrollcue span{display:none} } /* hero previews its page's native form: a ledger entry under a hairline */ .herolot{display:block;border-top:1px solid rgba(239,231,214,.35);padding-top:clamp(20px,3vh,30px)} .stripline{display:flex;gap:8px;margin-top:26px;max-width:420px} .stripline i{display:block;flex:1;height:46px;border:1px solid rgba(239,231,214,.4);position:relative;overflow:hidden} /* type chapter · the dusk statement (tinted per department) */ .ch.type{align-items:center;background: radial-gradient(120% 90% at 50% 110%, rgba(205,166,97,.28), transparent 60%), linear-gradient(to bottom, var(--night) 0%, #241f14 45%, var(--dusk) 100%)} body[data-page="development"] .ch.type{background: radial-gradient(120% 90% at 50% 110%, rgba(137,162,186,.26), transparent 60%), linear-gradient(to bottom, var(--night) 0%, #171d22 45%, #212a31 100%)} body[data-page="decoration"] .ch.type{background: radial-gradient(120% 90% at 50% 110%, rgba(46,86,176,.32), transparent 60%), linear-gradient(to bottom, var(--night) 0%, #12182a 45%, #1a2340 100%)} /* clears the fixed header so a tall chapter's heading is never cut off at the top */ .ch.type .txt{padding-top:clamp(92px,13vh,128px);padding-bottom:clamp(48px,8vh,80px)} .ch.type h2{max-width:20ch} .ch.type .sub{color:rgba(239,231,214,.74)} /* closing cross-links · the sibling departments as cards, not bare links */ .nextgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px); max-width:880px;margin-top:clamp(30px,5vh,48px)} .nextcard{display:block;border:1px solid rgba(205,166,97,.32);background:rgba(14,19,16,.32); padding:clamp(18px,2.8vw,28px);transition:border-color .25s,background .25s} .nextcard h3{font-size:clamp(19px,1.9vw,22px);font-weight:500;color:var(--paper)} .nextcard p{margin-top:8px;font-size:16.5px;line-height:1.55;color:var(--paper-soft);max-width:40ch} .nextcard::after{content:"→";display:block;margin-top:16px;font-family:var(--mono);font-size:15px; color:var(--brass-hi);transition:transform .25s} .nextcard:hover{border-color:var(--brass);background:rgba(205,166,97,.09)} .nextcard:hover h3{color:var(--brass-hi)} .nextcard:hover::after{transform:translateX(6px)} @media(max-width:760px){.nextgrid{grid-template-columns:1fr}} /* journey · interactive accordion timeline (in the dusk goal chapter) */ .journey{list-style:none;margin:clamp(34px,5vh,56px) auto 0;padding:0;max-width:700px;position:relative;text-align:left} .journey::before{content:"";position:absolute;top:8px;bottom:20px;left:8px;width:2px;background:rgba(239,231,214,.16); transform:scaleY(0);transform-origin:top;transition:transform 1s ease} .ch.type.in .journey::before{transform:scaleY(1)} .jstage{position:relative;padding-left:40px;border-top:1px solid rgba(239,231,214,.08)} .jstage:first-child{border-top:0} .jnode{position:absolute;left:0;top:19px;width:18px;height:18px;border-radius:50%;background:var(--night); border:2px solid var(--steel);box-sizing:border-box;opacity:0;transform:scale(.4);transition:opacity .5s ease,transform .5s ease} .ch.type.in .jnode{opacity:1;transform:scale(1)} .jstage.done .jnode{border-color:var(--brass);background:var(--brass)} .jstage.done .jnode::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--night)} .jstage.progress .jnode{border-color:var(--brass);background:conic-gradient(var(--brass) 0 50%, transparent 50% 100%)} .jstage.now .jnode{border-color:var(--brass);background:var(--brass)} .jstage.now .jnode::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--brass);opacity:.7;animation:rmpulse 2.6s ease-out infinite} /* the goal, as a prize: a glowing gold node with an emblem and a soft aura */ .jstage.final{background:radial-gradient(140% 150% at 9px 30px, rgba(205,166,97,.12), transparent 62%)} .jstage.final .jnode{width:22px;height:22px;left:-2px;top:17px;border:0; background:radial-gradient(circle at 50% 36%, var(--brass-hi), var(--brass) 72%); box-shadow:0 0 0 4px rgba(205,166,97,.16), 0 0 16px 3px rgba(205,166,97,.35); animation:prizeglow 3.2s ease-in-out infinite} .jstage.final .jnode::before{content:"\2726";position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11px;line-height:1;color:var(--night)} @keyframes prizeglow{ 0%,100%{box-shadow:0 0 0 4px rgba(205,166,97,.14), 0 0 14px 2px rgba(205,166,97,.30)} 50%{box-shadow:0 0 0 6px rgba(205,166,97,.22), 0 0 24px 5px rgba(205,166,97,.52)}} .jstage.final .jlabel{color:var(--brass-hi)} .jstage.final .jstat{color:var(--brass-hi)} @media(max-width:720px){.jstage.final .jnode{left:-2px}} @keyframes rmpulse{to{transform:scale(1.9);opacity:0}} .ch.type.in .jstage:nth-child(1) .jnode{transition-delay:.10s} .ch.type.in .jstage:nth-child(2) .jnode{transition-delay:.20s} .ch.type.in .jstage:nth-child(3) .jnode{transition-delay:.30s} .ch.type.in .jstage:nth-child(4) .jnode{transition-delay:.40s} .ch.type.in .jstage:nth-child(5) .jnode{transition-delay:.50s} .ch.type.in .jstage:nth-child(6) .jnode{transition-delay:.60s} .jhead{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;cursor:pointer;text-align:left; padding:15px 0;color:inherit;font:inherit} .jlabel{font-size:clamp(18px,1.9vw,22px);font-weight:500;color:var(--paper);transition:color .2s} .jstat{margin-left:auto;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);white-space:nowrap} .jstage.done .jstat{color:var(--brass)} .jstage.now .jstat,.jstage.progress .jstat{color:var(--brass-hi)} .jchev{flex:none;width:8px;height:8px;border-right:1.5px solid var(--paper-dim);border-bottom:1.5px solid var(--paper-dim); transform:rotate(45deg);transition:transform .25s;margin-left:4px} .jstage.active .jchev{transform:rotate(-135deg)} .jbody{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s ease,opacity .45s ease} .jstage.active .jbody{max-height:34em;opacity:1;padding-bottom:16px} .jbody p{font-size:16.5px;color:var(--paper-soft);max-width:56ch} .jgroup+.jgroup{margin-top:18px} .jgroup-h{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:2px} .jitems{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .jitems li{position:relative;padding-left:18px;font-size:16px;color:var(--paper-soft)} .jitems li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brass)} @media(hover:hover){.jhead:hover .jlabel{color:var(--brass-hi)}} @media(prefers-reduced-motion:reduce){ .journey::before{transform:none;transition:none} .jnode{opacity:1;transform:none;transition:none} .jstage.now .jnode::after{animation:none;opacity:0} .jstage.final .jnode{animation:none} .jbody{transition:none} } /* night chapter · the close */ .ch.night{align-items:center;background:linear-gradient(to bottom,var(--dusk),var(--night) 34%)} .ch.night .txt{padding-top:110px;padding-bottom:56px} .night-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,80px);align-items:end} .cform.mini{gap:13px;border-left:1px solid rgba(239,231,214,.14);padding-left:clamp(20px,2.5vw,36px)} .cform.mini h3{font-weight:500;font-size:clamp(21px,2vw,26px)} .cform.mini textarea{min-height:92px} .mini-note{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:rgba(239,231,214,.55);line-height:1.9} @media(max-width:860px){ .night-grid{grid-template-columns:1fr;gap:30px} .cform.mini{border-left:none;padding-left:0;border-top:1px solid rgba(239,231,214,.14);padding-top:24px} } .contact-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .contact-row a{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper); border:1px solid rgba(239,231,214,.28);padding:15px 21px;transition:border-color .25s,color .25s} .contact-row a:hover{border-color:var(--brass);color:var(--brass-hi)} .foot-line{margin-top:64px;padding-top:24px;border-top:1px solid rgba(239,231,214,.12);display:flex;flex-wrap:wrap; gap:10px 30px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,231,214,.62)} .foot-line a:hover{color:var(--brass-hi)} /* the footer's road to the contact form: one clear button, then subject shortcuts */ .foot-cta{margin-top:28px} .cform{scroll-margin-top:78px} .subjects{margin-top:26px} .subjects .plate{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--paper-dim);margin-bottom:10px} .subjects .golist{margin-top:0} /* footer link menus, grouped by audience, with the pickers alongside */ .footmenu{margin-top:clamp(44px,7vh,64px);padding-top:30px;border-top:1px solid rgba(239,231,214,.12); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px} .fmg{display:grid;gap:9px;align-content:start;justify-items:start} .fmh{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--brass-hi);margin-bottom:3px} .fmg a{font-size:16.5px;color:var(--paper-soft);transition:color .2s} .fmg a:hover{color:var(--brass-hi)} .fmg .langsel a{font-size:12px} .foot-themesel{margin-top:6px} @media(max-width:860px){.footmenu{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}} /* full-bleed photo band with one caption (a photo used once, deliberately) */ .band{position:relative;min-height:64svh;display:flex;align-items:flex-end;overflow:hidden} .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .band .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,19,16,.74),rgba(14,19,16,.05) 48%)} .band .cap{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad) 30px; font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)} /* -------------------------------------------------------------------------- ledger chapter · day paper, structured content -------------------------------------------------------------------------- */ .ledger{background:var(--day);color:var(--ink);padding:clamp(80px,12vh,130px) 0} .ledger .ey{color:var(--accent)} .ledger h2{font-weight:500;font-size:clamp(30px,3.8vw,48px);line-height:1.08;max-width:22ch;color:var(--ink)} .ledger .intro{margin-top:16px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:58ch} .ledger + .ledger{border-top:1px solid var(--line-day)} .ledger.dim{background:var(--day2)} /* decoration's day sections carry a whisper of Geneva stripes */ body[data-page="decoration"] .ledger{background: repeating-linear-gradient(97deg, rgba(32,38,25,.025) 0 44px, transparent 44px 88px), var(--day)} body[data-page="decoration"] .ledger.dim{background: repeating-linear-gradient(97deg, rgba(32,38,25,.03) 0 44px, transparent 44px 88px), var(--day2)} /* lots · the manufacturing catalogue (typographic, no thumbnails) */ .lots{margin-top:clamp(38px,6vh,64px);display:grid} .lot{display:grid;grid-template-columns:72px 1.15fr 1fr;gap:clamp(18px,3vw,44px);align-items:baseline; border-top:1px solid var(--line-day);padding:clamp(26px,4vh,40px) 0} .lot:last-child{border-bottom:1px solid var(--line-day)} .lot .idx{font-family:var(--mono);font-size:13.5px;color:var(--accent);letter-spacing:.1em} .lot h3{font-size:clamp(24px,2.6vw,34px);font-weight:500} .lot .soon{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);border:1px solid var(--line-day);padding:5px 10px;margin-left:14px; white-space:nowrap;vertical-align:4px} .lot .what{margin-top:10px;font-size:17px;color:var(--ink-soft);max-width:40ch} .lot .spec{font-family:var(--mono);font-size:13.5px;line-height:2.05;color:var(--ink-soft);letter-spacing:.03em} .lot .spec b{color:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.1em} @media(max-width:820px){ .lot{grid-template-columns:48px 1fr;grid-template-areas:"idx name" ". spec"} .lot .idx{grid-area:idx} .lot .name{grid-area:name} .lot .spec{grid-area:spec;margin-top:6px} } /* steps (a real sequence: order carries meaning) */ .steps{margin-top:clamp(38px,6vh,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,36px); list-style:none;counter-reset:step} .steps li{border-top:2px solid var(--line-day);padding-top:18px;counter-increment:step} .steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:13.5px;color:var(--accent); letter-spacing:.1em;display:block;margin-bottom:10px} .steps h3{font-size:clamp(19px,1.8vw,23px);font-weight:500} .steps p{margin-top:8px;font-size:16.5px;color:var(--ink-soft)} @media(max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:520px){.steps{grid-template-columns:1fr}} /* manufacturing variant: process as ledger rows, not a card grid */ .steps.rows{grid-template-columns:1fr;gap:0} .steps.rows li{display:grid;grid-template-columns:72px .55fr 1fr;gap:clamp(18px,3vw,44px);align-items:baseline; border-top:1px solid var(--line-day);padding:clamp(20px,3vh,30px) 0} .steps.rows li:last-child{border-bottom:1px solid var(--line-day)} .steps.rows li::before{margin-bottom:0} .steps.rows p{margin-top:0} @media(max-width:820px){ .steps.rows li{grid-template-columns:48px 1fr} .steps.rows p{grid-column:2} } /* two modes / paired panels */ .pair{margin-top:clamp(38px,6vh,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,36px)} .pair .panel{border:1px solid var(--line-day);padding:clamp(26px,3vw,40px)} .pair .panel .ey{margin-bottom:10px} .pair .panel h3{font-size:clamp(21px,2.1vw,27px);font-weight:500} .pair .panel p{margin-top:10px;font-size:16.5px;color:var(--ink-soft)} .pair .panel .for{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-day);font-size:16px} .pair .panel .for b{display:block;margin-bottom:5px;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:400} @media(max-width:760px){.pair{grid-template-columns:1fr}} /* service tiers · one block per category */ .tiers{margin-top:clamp(38px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px)} .tiers .tier{border:1px solid var(--line-day);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column} .tiers .tier .price{font-family:var(--mono);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .tiers .tier h3{font-size:clamp(22px,2.2vw,28px);font-weight:500;margin-top:8px} .tiers .tier .what{margin-top:12px;font-size:16.5px;color:var(--ink-soft)} .tiers .tier .for{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-day);font-size:16px;color:var(--ink-soft)} .tiers .tier .for b{display:block;margin-bottom:5px;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:400} @media(max-width:820px){.tiers{grid-template-columns:1fr}} /* price table (rows generated by build.js) */ .prices{margin-top:clamp(38px,6vh,56px);width:100%;border-collapse:collapse} .prices td{border-top:1px solid var(--line-day);padding:19px 0;font-size:clamp(18px,1.7vw,21px);vertical-align:baseline} .prices tr:last-child td{border-bottom:1px solid var(--line-day)} .prices td.num{font-family:var(--mono);font-size:14.5px;letter-spacing:.05em;color:var(--accent);text-align:right;white-space:nowrap;padding-left:20px} .price-note{margin-top:24px;font-size:16.5px;color:var(--ink-soft);max-width:64ch} /* small note chips */ .marks{margin-top:clamp(32px,5vh,48px);display:flex;flex-wrap:wrap;gap:10px} .marks span{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase; border:1px solid var(--line-day);padding:9px 14px;color:var(--ink-soft)} /* -------------------------------------------------------------------------- drawing board · development's native form (no photographs) -------------------------------------------------------------------------- */ .board{background: linear-gradient(rgba(32,38,25,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(32,38,25,.05) 1px, transparent 1px), var(--day2); background-size:56px 56px,56px 56px,auto;color:var(--ink); padding:clamp(80px,12vh,130px) 0} .board .ey{color:var(--accent)} .board h2{font-weight:500;font-size:clamp(30px,3.8vw,48px);line-height:1.08;max-width:22ch} .board .intro{margin-top:16px;font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:58ch} /* hero board: dark, so the fixed header stays legible; the construction sketch is drawn in paper lines */ .ch.board{align-items:center;color:var(--paper);background: linear-gradient(rgba(239,231,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239,231,214,.05) 1px, transparent 1px), linear-gradient(to bottom,#10150e 0%,#171e14 60%,#1c2317 100%); background-size:56px 56px,56px 56px,auto} .ch.board .ey,.ch.board .go{color:var(--brass-hi)} .ch.board h1{color:var(--paper)} .ch.board .sub{color:var(--paper-soft)} /* the going-train construction sketch on the hero board */ .board-sketch{position:absolute;inset:0;width:100%;height:100%;color:var(--paper);opacity:.17;pointer-events:none} .board-sketch .m{stroke-width:1.25} .board-sketch .f{stroke-width:.7} .board-sketch .cl{stroke-width:.7;stroke-dasharray:15 5 3 5;opacity:.75} .board-sketch .tooth{stroke-width:.9} .board-sketch g[class^="sg"]{animation:sketchin 1s ease both} .board-sketch .sg2{animation-delay:.25s} .board-sketch .sg3{animation-delay:.5s} .board-sketch .sg4{animation-delay:.8s} @keyframes sketchin{from{opacity:0}} /* sheets · each service set like a plate of a technical drawing (no sketches) */ .sheets{margin-top:clamp(38px,6vh,64px);display:grid;gap:clamp(24px,3vh,36px)} .sheet{position:relative;border:1.5px solid var(--ink);outline:1px solid rgba(32,38,25,.35);outline-offset:6px; background:var(--day);padding:clamp(28px,4vw,52px);padding-bottom:clamp(56px,7vw,72px)} .sheet .tb{position:absolute;bottom:0;right:0;border-left:1px solid rgba(32,38,25,.35);border-top:1px solid rgba(32,38,25,.35); font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft); padding:9px 16px;display:flex;gap:20px;background:var(--day)} .sheet h3{font-size:clamp(24px,2.5vw,33px);font-weight:500} .sheet .what{margin-top:12px;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:46ch} .sheet .give{margin-top:16px;font-family:var(--mono);font-size:13.5px;line-height:2.05;color:var(--ink-soft);letter-spacing:.03em} .sheet .give b{color:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.1em} /* milestones · a dimension line, not a card row */ .miles{margin-top:clamp(38px,6vh,64px);list-style:none;counter-reset:m;position:relative; display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,36px)} .miles::before{content:"";position:absolute;top:8px;left:0;right:0;height:1px;background:var(--ink)} .miles li{counter-increment:m;position:relative;padding-top:36px} .miles li::before{content:"";position:absolute;top:1px;left:0;width:1px;height:15px;background:var(--ink)} .miles li::after{content:counter(m,decimal-leading-zero);position:absolute;top:14px;left:12px; font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--accent)} .miles h3{font-size:clamp(19px,1.8vw,23px);font-weight:500} .miles p{margin-top:8px;font-size:16.5px;color:var(--ink-soft)} @media(max-width:900px){ /* the dimension line turns vertical instead of disappearing */ .miles{grid-template-columns:1fr;gap:30px;padding-left:28px} .miles::before{top:4px;bottom:4px;left:0;right:auto;width:1px;height:auto} .miles li{padding-top:0} .miles li::before{top:7px;left:-28px;width:17px;height:1px} .miles li::after{position:static;display:block;margin-bottom:6px} } /* -------------------------------------------------------------------------- finish library · decoration's native form (textures drawn in CSS, no photos) -------------------------------------------------------------------------- */ .swatchgrid{margin-top:clamp(38px,6vh,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)} @media(max-width:960px){.swatchgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.swatchgrid{grid-template-columns:1fr}} .swatch .tile{aspect-ratio:4/3;border:1px solid rgba(32,38,25,.4);position:relative;overflow:hidden; box-shadow:inset 0 0 0 1px rgba(239,231,214,.25)} .swatch h3{margin-top:16px;font-size:clamp(21px,2.1vw,27px);font-weight:500} .swatch .on{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent); margin-top:6px;display:block} .swatch p{margin-top:8px;font-size:16.5px;color:var(--ink-soft)} .tx-geneva{background: linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(20,16,8,.22)), repeating-linear-gradient(97deg,#d6c59a 0 30px,#c3b083 30px 33px,#cebc90 33px 60px,#bda878 60px 63px)} .tx-perlage{background-color:#cfbf96;background-image: radial-gradient(circle, rgba(255,252,240,.5) 0 7%, rgba(255,255,255,.14) 20%, rgba(110,92,55,.30) 34%, transparent 41%), radial-gradient(circle, rgba(255,252,240,.4) 0 7%, rgba(255,255,255,.12) 20%, rgba(110,92,55,.26) 34%, transparent 41%); background-size:54px 54px,54px 54px;background-position:0 0,27px 27px} .tx-anglage{background:linear-gradient(135deg,#565b52,#2e332c 55%,#41463e)} .tx-anglage::before{content:"";position:absolute;inset:17%;background:#242920;box-shadow:0 0 0 2px #0f110c; border:13px solid;border-image:linear-gradient(135deg,#f6ebc7 0%,#8a7c58 25%,#fffbe0 50%,#6e6244 75%,#e8d9a8 100%) 1} .tx-blackpolish{background:linear-gradient(118deg,#08090a 0 40%,#2c2c33 46%,#e9e9e3 50%,#2c2c33 54%,#050607 60%)} .tx-bluing{background: radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,.32), transparent 44%), radial-gradient(70% 70% at 88% 92%, rgba(202,161,79,.28), transparent 55%), linear-gradient(115deg,#101b3e,#1f3778 42%,#2d55ad 58%,#152248)} .tx-engraving{background: linear-gradient(120deg,rgba(255,255,255,.16),rgba(80,60,20,.14)), #c8b183;display:flex;align-items:center;justify-content:center} .tx-engraving span{font-family:var(--serif);font-size:clamp(56px,6vw,84px);font-weight:500;letter-spacing:.06em; color:#7a6234;text-shadow:0 -1px 1px rgba(40,30,8,.85), 0 1px 1px rgba(255,248,220,.65)} /* -------------------------------------------------------------------------- contact page · cards + form on night -------------------------------------------------------------------------- */ .night-block{background:var(--night);padding:clamp(80px,12vh,130px) 0} /* contact · direct channels, tappable right in the hero */ .direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .dlink{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(239,231,214,.4); background:rgba(14,19,16,.42);padding:11px 16px;font-family:var(--mono);font-size:13px; letter-spacing:.06em;color:var(--paper);transition:border-color .2s,color .2s} .dlink svg{stroke:var(--brass);flex:none} .dlink:hover{border-color:var(--brass);color:var(--brass-hi)} /* contact · intent picker in the form (radios styled as the segmented control) */ .intent{border:0;margin:0 0 18px;padding:0} .intent legend{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--paper-soft);margin-bottom:8px} .intent-sel .lang-opt{position:relative;padding:9px 15px;font-size:12.5px;cursor:pointer} .cform .intent-sel input{position:absolute;left:2px;top:2px;width:1px;height:1px;min-width:0;padding:0;opacity:0;pointer-events:none} .intent-sel .lang-opt:has(input:checked){background:var(--brass);color:var(--night)} .intent-sel .lang-opt:has(input:checked):hover{color:var(--night)} .intent-sel .lang-opt:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px} /* one line of briefing, swapped with the chosen subject */ .intent-hint{margin-top:12px;font-size:16.5px;line-height:1.55;color:var(--paper-soft);max-width:56ch} .contact-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(34px,5vw,70px);align-items:start} /* columns may shrink below their content's intrinsic width (the 600px map otherwise widens the mobile viewport) */ .contact-layout>*{min-width:0} @media(max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr)}} .contact-cards{display:grid;gap:12px} .ccard{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line-night);padding:18px 20px; transition:border-color .25s} .ccard:hover{border-color:var(--brass)} .ccard svg{stroke:var(--brass);flex:none;margin-top:3px} .ccard .plate{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-soft);display:block;margin-bottom:3px} .ccard strong{font-weight:500;font-size:17.5px;display:block} .ccard .sub{display:block;font-size:16.5px;color:var(--paper-soft)} /* the appointment-only plate lives on the address card, where drop-in ideas form */ .ccard .appt{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--brass-hi)} .hours-note{margin-top:26px} /* the locator map: real OSM geometry, drawn in the house palette, links out for navigation */ .mapcard{display:block;margin-top:26px;border:1px solid var(--line-night);transition:border-color .25s} .mapcard img{display:block;width:100%;height:auto;aspect-ratio:600/450} .mapcard .mapbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px; border-top:1px solid var(--line-night);font-family:var(--mono);font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--paper-soft);transition:color .2s} .mapcard .mapbar::after{content:"→";color:var(--brass-hi);transition:transform .25s} .mapcard:hover{border-color:var(--brass)} .mapcard:hover .mapbar{color:var(--brass-hi)} .mapcard:hover .mapbar::after{transform:translateX(5px)} .hours-note .plate{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)} .hours-note p{margin-top:8px;font-size:16.5px;color:var(--paper-soft);max-width:44ch} .cform{display:grid;gap:16px} .cform h2{font-weight:500;font-size:clamp(25px,2.7vw,33px)} .form-intro{font-size:16.5px;color:var(--paper-soft);max-width:52ch} .cform label{display:grid;gap:7px} .cform .plate{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-soft)} .cform input,.cform textarea{background:rgba(239,231,214,.06);border:1px solid var(--line-night);color:var(--paper); font-family:var(--serif);font-size:16.5px;padding:13px 14px;width:100%;transition:border-color .2s} .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--brass)} .cform textarea{min-height:130px;resize:vertical} .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.cform .row2{grid-template-columns:1fr}} .cform ::placeholder{color:rgba(239,231,214,.38)} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .btn{display:inline-block;background:none;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.16em; text-transform:uppercase;padding:16px 28px;border:1px solid rgba(239,231,214,.35);color:var(--paper); transition:border-color .25s,color .25s,background .25s;justify-self:start} .btn.brass{border-color:var(--brass);color:var(--brass-hi)} .btn.brass:hover{background:var(--brass);color:var(--night)} .form-status{font-size:16.5px;color:var(--brass-hi);min-height:1.2em} .form-status a{color:var(--brass-hi);text-decoration:underline} .consent{font-size:16.5px;color:var(--paper-dim);max-width:52ch} /* -------------------------------------------------------------------------- motion · one orchestrated moment -------------------------------------------------------------------------- */ .r{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease} .r.d1{transition-delay:.08s} .r.d2{transition-delay:.16s} .r.d3{transition-delay:.24s} .in .r{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .r{opacity:1;transform:none;transition:none} .dd-in{animation:none} .scrollcue::after{animation:none;background-position:0 0,0 0} html{scroll-behavior:auto} .menu,.menu.open{transform:none;transition:opacity .18s linear,visibility 0s} .menu:not(.open){transition:opacity .18s linear,visibility 0s .18s} .menu>*,.menu.open>*{transform:none;transition:opacity .18s linear;transition-delay:0s} .board-sketch g[class^="sg"]{animation:none} .head,.bar,.head .wm,.navtoggle{transition:none} } /* -------------------------------------------------------------------------- mobile action bar -------------------------------------------------------------------------- */ .bar{position:fixed;bottom:0;left:0;right:0;z-index:45;display:none;grid-template-columns:1fr 1fr; background:rgba(14,19,16,.96);border-top:1px solid var(--line-night);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform .3s ease} .bar.hidden{transform:translateY(100%)} .bar a{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);text-align:center;padding:15px 0} .bar a+a{border-left:1px solid var(--line-night)} /* the page you are on is marked in the bar */ body[data-page="contact"] .bar .bar-contact, body[data-page="workshop"] .bar .bar-workshop{color:var(--brass-hi); text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px; text-decoration-color:rgba(205,166,97,.45)} @media(max-width:1023px){ .bar{display:grid} .ch .txt{padding-bottom:calc(clamp(36px,5.5vh,64px) + 58px)} .ch.type .txt{padding-bottom:44px} .ch.night .txt{padding-bottom:88px} .ledger,.board{padding-bottom:calc(clamp(80px,12vh,130px) + 30px)} .night-block{padding-bottom:calc(clamp(80px,12vh,130px) + 40px)} } /* ========================================================================== themes · dusk is the default; "green" re-tints the deep surfaces toward forest green; "light" turns the deep surfaces to warm paper while the photo chapters keep their dark veils (photos stay photos). Switched via data-theme on (header dots), kept in localStorage. ========================================================================== */ /* ---- green ---- */ [data-theme="green"] .ch.type{background: radial-gradient(120% 90% at 50% 110%, rgba(126,166,120,.24), transparent 60%), linear-gradient(to bottom, var(--night) 0%, #152119 45%, #1d2b21 100%)} [data-theme="green"] .head.solid{background:rgba(10,18,13,.94)} [data-theme="green"] .bar{background:rgba(10,18,13,.96)} [data-theme="green"] .mega-in{background:rgb(12,20,15)} [data-theme="green"] .mega-in::before{background:rgb(12,20,15)} [data-theme="green"] .head.hidden .navtoggle{background:rgba(10,18,13,.62)} [data-theme="green"] .ch.board{background: linear-gradient(rgba(239,231,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239,231,214,.05) 1px, transparent 1px), linear-gradient(to bottom,#0d150f 0%,#142016 60%,#1a2a1d 100%); background-size:56px 56px,56px 56px,auto} /* ---- light ---- */ /* the deep sections become paper */ [data-theme="light"] .ch.type{background: radial-gradient(120% 90% at 50% 110%, rgba(205,166,97,.20), transparent 60%), linear-gradient(to bottom, #f6f0e2 0%, #efe6d0 45%, #e7dcc0 100%)} [data-theme="light"] .ch.type .sub{color:rgba(32,38,25,.76)} [data-theme="light"] .journey::before{background:rgba(32,38,25,.18)} [data-theme="light"] .jstage{border-top-color:rgba(32,38,25,.1)} [data-theme="light"] .nextcard{background:rgba(32,38,25,.04)} [data-theme="light"] .rcard{background:rgba(32,38,25,.04)} /* form + night furnishings on paper */ [data-theme="light"] .cform input,[data-theme="light"] .cform textarea{background:rgba(32,38,25,.05)} [data-theme="light"] .cform ::placeholder{color:rgba(32,38,25,.42)} [data-theme="light"] .btn{border-color:rgba(32,38,25,.35)} [data-theme="light"] .btn.brass{border-color:var(--brass)} [data-theme="light"] .btn.brass:hover{color:#231c0d} [data-theme="light"] .lang-opt[aria-current="page"], [data-theme="light"] .intent-sel .lang-opt:has(input:checked){color:#231c0d} [data-theme="light"] .langsel{border-color:rgba(32,38,25,.35)} [data-theme="light"] .lang-opt+.lang-opt{border-left-color:rgba(32,38,25,.35)} [data-theme="light"] .contact-row a{border-color:rgba(32,38,25,.3)} [data-theme="light"] .cform.mini{border-left-color:rgba(32,38,25,.16)} @media(max-width:860px){[data-theme="light"] .cform.mini{border-top-color:rgba(32,38,25,.16)}} [data-theme="light"] .mini-note{color:rgba(32,38,25,.6)} [data-theme="light"] .foot-line{border-top-color:rgba(32,38,25,.16);color:rgba(32,38,25,.65)} [data-theme="light"] .footnav a{color:rgba(32,38,25,.65)} [data-theme="light"] .th{border-color:rgba(32,38,25,.45)} /* chrome on paper */ [data-theme="light"] .head.solid{background:rgba(243,237,222,.94);box-shadow:0 6px 26px rgba(60,54,38,.18)} [data-theme="light"] .bar{background:rgba(243,237,222,.96)} [data-theme="light"] .navtoggle,[data-theme="light"] .menu .close{border-color:rgba(32,38,25,.4)} [data-theme="light"] .head.hidden .navtoggle{background:rgba(243,237,222,.72)} [data-theme="light"] .menu .mgroup+.mgroup{border-top-color:rgba(32,38,25,.12)} [data-theme="light"] .mega-in{background:rgb(246,240,226);border-color:rgba(138,109,40,.5)} [data-theme="light"] .mega-in::before{background:rgb(246,240,226);border-color:rgba(138,109,40,.5)} /* the dev hero returns to a day drawing board, sketched in ink */ [data-theme="light"] .ch.board{background: linear-gradient(rgba(32,38,25,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(32,38,25,.06) 1px, transparent 1px), var(--day2); background-size:56px 56px,56px 56px,auto} [data-theme="light"] .board-sketch{color:var(--ink);opacity:.13} /* photo chapters keep their dark veils: text over photos stays paper-lit */ [data-theme="light"] .ch .bg ~ .txt h1,[data-theme="light"] .ch .bg ~ .txt h2{color:#efe7d6} [data-theme="light"] .ch .bg ~ .txt .sub{color:rgba(239,231,214,.86)} [data-theme="light"] .ch .bg ~ .txt .ey,[data-theme="light"] .ch .bg ~ .txt .go, [data-theme="light"] .ch .bg ~ .txt .idx{color:#e6c67f} [data-theme="light"] .scrollcue{color:rgba(239,231,214,.84)} [data-theme="light"] .ch .bg ~ .txt .dlink{color:#efe7d6} [data-theme="light"] .ch.night .dlink{border-color:rgba(32,38,25,.35);background:rgba(32,38,25,.05)} [data-theme="light"] .footmenu{border-top-color:rgba(32,38,25,.16)} [data-theme="light"] .band .cap{color:#efe7d6} [data-theme="light"] .ch .bg ~ .txt .herolot h1{color:#efe7d6} /* header floating over a photo hero stays light; once solid it turns to ink */ [data-theme="light"] .head:not(.solid) .wm, [data-theme="light"] .head:not(.solid) nav>a, [data-theme="light"] .head:not(.solid) .grp-t, [data-theme="light"] .head:not(.solid) .navtoggle{color:#efe7d6} [data-theme="light"] .head:not(.solid) .navtoggle{border-color:rgba(239,231,214,.4)} [data-theme="light"] .head:not(.solid) .langsel{border-color:rgba(239,231,214,.4)} [data-theme="light"] .head:not(.solid) .lang-opt{color:rgba(239,231,214,.84)} [data-theme="light"] .head:not(.solid) .lang-opt+.lang-opt{border-left-color:rgba(239,231,214,.4)} [data-theme="light"] .head:not(.solid) .th{border-color:rgba(239,231,214,.5)} /* except over the (now light) drawing-board hero, where it needs ink */ [data-theme="light"] [data-page="development"] .head:not(.solid) .wm, [data-theme="light"] [data-page="development"] .head:not(.solid) nav>a, [data-theme="light"] [data-page="development"] .head:not(.solid) .grp-t, [data-theme="light"] [data-page="development"] .head:not(.solid) .navtoggle{color:var(--ink)} [data-theme="light"] [data-page="development"] .head:not(.solid) .navtoggle{border-color:rgba(32,38,25,.4)} [data-theme="light"] [data-page="development"] .head:not(.solid) .langsel{border-color:rgba(32,38,25,.4)} [data-theme="light"] [data-page="development"] .head:not(.solid) .lang-opt{color:rgba(32,38,25,.75)} [data-theme="light"] [data-page="development"] .head:not(.solid) .lang-opt+.lang-opt{border-left-color:rgba(32,38,25,.4)} [data-theme="light"] [data-page="development"] .head::after{background:linear-gradient(to bottom,rgba(239,231,214,.6),rgba(239,231,214,0))} /* the mobile hidden-chrome state stays transparent in every theme (these live after the theme .head.solid overrides so they win the tie) */ @media(max-width:1023px){ [data-theme="green"] .head.hidden,[data-theme="green"] .head.solid.hidden, [data-theme="light"] .head.hidden,[data-theme="light"] .head.solid.hidden{ background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} } /* the mobile menu is tinted glass over the page (solid night stays the fallback) */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .menu{background:rgba(12,17,13,.72);backdrop-filter:blur(22px) saturate(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.05)} [data-theme="green"] .menu{background:rgba(9,17,12,.72)} [data-theme="light"] .menu{background:rgba(243,237,222,.78)} }