/* ============================================================================ Dakkak Labs — design system v2 (premium) Light + dark themes · accessibility modes (contrast / motion / text size) Distinctive type (Instrument Serif + Geist), depth, orchestrated motion. Themes/modes are driven by data-attributes on , set by dakkak.js before first paint and persisted to localStorage. ========================================================================== */ :root{ /* ---- DARK theme (default) ---- */ --ink-0:#0A0916; --ink-1:#15122F; --ink-2:#1F1B45; --ink-3:#2A2557; --cream:#F4F1EA; --cream-2:#CFCAE6; --faint:#8983B8; --rule:rgba(244,241,234,.12); --rule-soft:rgba(244,241,234,.05); --paper:#1A1640; --paper-ink:#F4F1EA; --paper-soft:#A29DCB; --paper-rule:rgba(244,241,234,.10); --glass:rgba(26,22,64,.55); --shadow-1:0 1px 0 rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.45); --shadow-2:0 1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.55); --lavender:#818CF8; --lavender-soft:#B5BCEC; --lavender-deep:#4F46E5; --sage:#7FA899; --copper:#D9905A; --gold:#FDE68A; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace; --max:1160px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px; --ease:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --text-scale:1; color-scheme:dark; } /* ---- LIGHT theme ---- */ html[data-theme="light"]{ --ink-0:#FBFAF6; --ink-1:#FFFFFF; --ink-2:#F4F1E8; --ink-3:#ECE7DA; --cream:#1B1736; --cream-2:#46406E; --faint:#6E699A; --rule:rgba(27,23,54,.14); --rule-soft:rgba(27,23,54,.06); --paper:#F1ECE0; --paper-ink:#1B1736; --paper-soft:#5C5780; --paper-rule:rgba(27,23,54,.10); --glass:rgba(255,255,255,.6); --shadow-1:0 1px 0 rgba(27,23,54,.04), 0 14px 36px rgba(27,23,54,.10); --shadow-2:0 1px 0 rgba(27,23,54,.05), 0 26px 60px rgba(27,23,54,.14); --lavender-deep:#4338CA; color-scheme:light; } /* ---- HIGH CONTRAST mode (user setting OR OS) ---- */ html[data-contrast="more"]{ --rule:var(--cream); --rule-soft:var(--cream); --paper-rule:var(--paper-ink); --faint:var(--cream); --paper-soft:var(--paper-ink); --cream-2:var(--cream); } html[data-contrast="more"] .craft,html[data-contrast="more"] .voice, html[data-contrast="more"] .reading,html[data-contrast="more"] .btn, html[data-contrast="more"] .a11y-row{ border-width:2px !important } @media (prefers-contrast:more){ :root:not([data-contrast="less"]){ --faint:var(--cream-2) } } /* ---- LARGER TEXT — zoom the content so the WHOLE site follows the setting ---- */ main, .site-footer{ zoom:var(--text-scale) } /* ---- REDUCE MOTION (user setting OR OS) ---- */ html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } @media (prefers-reduced-motion:reduce){ :root:not([data-motion="no"]) *{ animation-duration:.001ms !important; transition-duration:.001ms !important } } /* ── Reset ─────────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body,h1,h2,h3,h4,p,ul,figure,blockquote{ margin:0 } ul{ list-style:none; padding:0 } img,svg{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } body{ font-family:var(--sans); background:var(--ink-0); color:var(--cream); line-height:1.62; font-size:17px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; min-height:100vh; overflow-x:hidden; transition:background-color .5s var(--ease), color .35s var(--ease); } /* Atmospheric backdrop: gradient mesh + grain */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(1100px 700px at 12% -8%, color-mix(in srgb,var(--lavender) 16%,transparent), transparent 60%), radial-gradient(900px 600px at 92% 4%, color-mix(in srgb,var(--copper) 9%,transparent), transparent 60%), radial-gradient(1000px 800px at 50% 120%, color-mix(in srgb,var(--sage) 11%,transparent), transparent 60%); transition:opacity .5s var(--ease); } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Highlights live ON interactive elements (links, cards, buttons) — never as a free-floating background glow that points at nothing the user can use. */ /* ── The mark ──────────────────────────────────────────────────────────── */ .mark{ width:1em; height:1em; fill:currentColor; flex:none } /* ── Layout ────────────────────────────────────────────────────────────── */ .wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,5vw,44px) } .section{ padding-block:clamp(64px,10vw,132px); position:relative } .section--paper{ background:var(--paper); color:var(--paper-ink) } .section--paper .eyebrow,.section--paper .lede,.section--paper .kicker{ color:var(--paper-soft) } /* ── Type ──────────────────────────────────────────────────────────────── */ .eyebrow{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:10px; margin-bottom:22px } .eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6 } .display{ font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.015em; font-size:clamp(52px,10vw,128px); text-wrap:balance } .display em{ font-style:italic; color:var(--lavender-soft) } .h2{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.01em; font-size:clamp(32px,5.5vw,62px); text-wrap:balance } .h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,3vw,32px); line-height:1.12 } .lede{ font-size:clamp(18px,2.2vw,23px); color:var(--faint); max-width:46ch; line-height:1.5; text-wrap:pretty } .muted{ color:var(--faint) } .kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint) } /* ── Header — logo/back left · nav centre · Yovel right ────────────────── */ .site-header{ position:sticky; top:0; z-index:60; backdrop-filter:blur(16px) saturate(1.3); background:color-mix(in srgb,var(--ink-0) 72%,transparent); border-bottom:1px solid var(--rule-soft) } .site-header .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:70px; gap:18px } .brand{ justify-self:start; display:inline-flex; align-items:center; gap:11px; font-family:var(--serif); font-size:23px; letter-spacing:-.01em; padding:6px 8px; margin-left:-8px; border-radius:10px; transition:background-color .2s } .brand .mark{ width:23px; height:23px; color:var(--lavender); transition:transform .5s var(--ease-spring) } .brand:hover{ background:var(--rule-soft) } .brand:hover .mark{ transform:translateX(3px) } .brand em{ font-style:italic; color:var(--lavender-soft) } /* Back affordance on inner pages: "← Dakkak Labs" */ .brand--back .back-chevron{ font-family:var(--sans); font-size:20px; line-height:1; color:var(--faint); margin-right:1px; transition:transform .3s var(--ease), color .2s } .brand--back:hover .back-chevron{ transform:translateX(-4px); color:var(--cream) } .brand--back:hover .mark{ transform:none } .nav{ justify-self:center; display:flex; align-items:center; gap:2px } .nav a{ position:relative; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:10px 14px; min-height:44px; display:inline-flex; align-items:center; border-radius:10px; transition:color .2s var(--ease), background-color .2s var(--ease) } .nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:7px; height:1.5px; background:var(--lavender); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) } .nav a:hover{ color:var(--cream); background:var(--rule-soft) } .nav a:hover::after{ transform:scaleX(1) } .nav a[aria-current="page"]{ color:var(--lavender-soft) } .nav a[aria-current="page"]::after{ transform:scaleX(1) } .cta{ justify-self:end; display:inline-flex; align-items:center; gap:6px; color:var(--ink-0); background:var(--lavender); font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; border-radius:var(--r-pill); padding:0 17px; min-height:44px; transition:background-color .2s,transform .15s var(--ease) } .cta:hover{ background:var(--lavender-soft); transform:translateY(-1px) } .icon-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); border:1px solid var(--rule); background:transparent; color:var(--cream); cursor:pointer; transition:background-color .2s,border-color .2s,transform .15s var(--ease) } .icon-btn:hover{ background:var(--rule-soft); border-color:var(--cream); transform:translateY(-1px) } .icon-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round } @media (max-width:760px){ .site-header .nav{ display:none } .site-header .cta{ display:none } .site-header .menu-toggle{ display:inline-flex } .site-header .wrap{ grid-template-columns:1fr auto } } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero{ position:relative; padding-block:clamp(80px,13vw,168px) } .hero-mark{ width:clamp(84px,13vw,132px); height:clamp(84px,13vw,132px); color:var(--lavender); margin-bottom:30px; filter:drop-shadow(0 16px 50px color-mix(in srgb,var(--lavender) 50%,transparent)) } @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) .hero-mark{ animation:markIn 1s var(--ease-spring) both, markFloat 6s ease-in-out 1.1s infinite } } @keyframes markIn{ from{ opacity:0; transform:translateX(-14px) scale(.9) } to{ opacity:1; transform:none } } @keyframes markFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } } .crafts-line{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:30px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) } .crafts-line span{ display:inline-flex; align-items:center; gap:8px } .crafts-line .dot{ width:7px; height:7px; border-radius:50% } /* ── Buttons (with cursor sheen) ───────────────────────────────────────── */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border-radius:var(--r-pill); font-family:var(--sans); font-weight:600; font-size:16px; cursor:pointer; border:1px solid transparent; transition:transform .14s var(--ease), background-color .2s, border-color .2s, box-shadow .2s } .btn:active{ transform:scale(.97) } .btn::before{ content:""; position:absolute; inset:0; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 60%); opacity:0; transition:opacity .25s } .btn:hover::before{ opacity:1 } .btn-primary{ background:var(--lavender); color:var(--ink-0); box-shadow:0 8px 28px color-mix(in srgb,var(--lavender) 35%,transparent) } .btn-primary:hover{ background:var(--lavender-soft); transform:translateY(-2px); box-shadow:0 14px 40px color-mix(in srgb,var(--lavender) 45%,transparent) } .btn-ghost{ border-color:var(--rule); color:var(--cream) } .btn-ghost:hover{ border-color:var(--cream); transform:translateY(-2px) } .section--paper .btn-ghost{ border-color:var(--paper-rule); color:var(--paper-ink) } /* ── Cards: crafts / voices / readings (cursor-tilt + glow) ────────────── */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px } @media (max-width:860px){ .grid-3{ grid-template-columns:1fr } } .tilt{ transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; transform-style:preserve-3d; will-change:transform } .craft,.voice,.reading{ border:1px solid var(--rule); border-radius:var(--r-md); background:color-mix(in srgb,var(--ink-1) 70%,transparent); position:relative; overflow:hidden } .craft::after,.voice::after{ content:""; position:absolute; width:240px; height:240px; left:var(--gx,50%); top:var(--gy,0%); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(circle, color-mix(in srgb,var(--vc,var(--lavender)) 22%,transparent), transparent 65%) } .craft:hover::after,.voice:hover::after{ opacity:1 } .craft{ padding:30px; display:flex; flex-direction:column; gap:12px } .craft:hover,.voice:hover{ border-color:color-mix(in srgb,var(--vc,var(--lavender)) 50%,var(--rule)); box-shadow:var(--shadow-1) } .craft .mark{ width:36px; height:36px; position:relative; z-index:1 } .craft h3{ font-family:var(--serif); font-size:28px; position:relative; z-index:1 } .craft p{ color:var(--faint); font-size:16px; line-height:1.55; position:relative; z-index:1 } .craft .tag{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); position:relative; z-index:1 } .section--paper .craft{ background:color-mix(in srgb,var(--ink-1) 50%, var(--paper)); } .section--paper .craft p,.section--paper .craft .tag{ color:var(--paper-soft) } .voices{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px } @media (max-width:860px){ .voices{ grid-template-columns:1fr } } .voice{ padding:28px; display:flex; flex-direction:column; gap:14px; --vc:var(--lavender) } .voice::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--vc); z-index:1 } .voice .mark{ width:42px; height:42px; color:var(--vc); position:relative; z-index:1 } .voice .vkicker{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); position:relative; z-index:1 } .voice h3{ font-family:var(--serif); font-size:30px; position:relative; z-index:1 } .voice p{ color:var(--faint); font-size:15.5px; line-height:1.55; position:relative; z-index:1 } .voice .swatch{ margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--faint); display:flex; align-items:center; gap:9px; position:relative; z-index:1 } .voice .swatch i{ width:14px; height:14px; border-radius:4px; background:var(--vc) } .voice--lav{ --vc:var(--lavender) } .voice--sage{ --vc:var(--sage) } .voice--copper{ --vc:var(--copper) } .readings{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px } @media (max-width:720px){ .readings{ grid-template-columns:repeat(2,1fr) } } .reading{ text-align:center; padding:26px 14px; transition:transform .25s var(--ease), border-color .25s } .reading:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--lavender) 50%,var(--rule)) } .reading .mark{ width:42px; height:42px; margin:0 auto 14px; color:var(--lavender-soft); transition:transform .4s var(--ease-spring) } .reading:hover .mark{ transform:translateX(4px) } .reading b{ font-family:var(--serif); font-weight:400; font-size:21px; display:block; margin-bottom:4px } .reading span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) } /* ── Featured (Yovel) ──────────────────────────────────────────────────── */ .feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,60px); align-items:center } @media (max-width:860px){ .feature{ grid-template-columns:1fr } } .feature .panel{ border:1px solid var(--rule); border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); min-height:300px; background:linear-gradient(160deg,var(--ink-2),var(--ink-1)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-2) } .feature .panel .mark{ width:100px; height:100px; color:var(--sage); filter:drop-shadow(0 14px 44px color-mix(in srgb,var(--sage) 50%,transparent)) } /* ── Footer ────────────────────────────────────────────────────────────── */ .site-footer{ border-top:1px solid var(--rule-soft); padding-block:clamp(40px,6vw,64px); background:var(--ink-0) } .site-footer .wrap{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start } .footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:20px } .footer-brand .mark{ width:20px; height:20px; color:var(--lavender) } .footer-cols{ display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap } .footer-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; font-weight:500 } .footer-col a{ display:block; padding:6px 0; color:var(--faint); font-size:14px; min-height:34px; transition:color .15s } .footer-col a:hover{ color:var(--cream) } .footer-legal{ width:100%; border-top:1px solid var(--rule-soft); margin-top:8px; padding-top:20px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; color:var(--faint); font-size:13px } /* ── Accessibility panel ───────────────────────────────────────────────── */ .a11y-panel{ position:fixed; z-index:90; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); width:min(340px,calc(100vw - 36px)); background:var(--glass); backdrop-filter:blur(20px) saturate(1.4); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:18px; transform-origin:bottom right; transition:opacity .25s var(--ease), transform .3s var(--ease-spring); } .a11y-panel[hidden]{ display:none } .a11y-panel.closing{ opacity:0; transform:scale(.94) translateY(8px) } .a11y-panel h2{ font-family:var(--serif); font-size:22px; margin-bottom:2px } .a11y-panel .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:14px } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--rule-soft) } .a11y-row .lbl{ font-size:14.5px } .a11y-row .lbl small{ display:block; color:var(--faint); font-size:12px; margin-top:2px } .a11y-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; background:transparent; color:var(--faint); cursor:pointer; border-radius:8px } .a11y-close:hover{ color:var(--cream); background:var(--rule-soft) } .seg{ display:inline-flex; background:var(--rule-soft); border:1px solid var(--rule); border-radius:var(--r-pill); padding:3px } .seg button{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); background:transparent; border:0; padding:7px 11px; border-radius:var(--r-pill); cursor:pointer; min-height:34px; transition:color .15s, background-color .15s } .seg button[aria-pressed="true"]{ color:var(--ink-0); background:var(--lavender) } .switch{ position:relative; width:48px; height:28px; flex:none; border-radius:999px; border:1px solid var(--rule); background:var(--rule-soft); cursor:pointer; transition:background-color .2s } .switch[aria-checked="true"]{ background:var(--lavender); border-color:var(--lavender) } .switch::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--cream); transition:transform .25s var(--ease-spring) } html[data-theme="light"] .switch::after{ background:#fff } .switch[aria-checked="true"]::after{ transform:translateX(20px); background:var(--ink-0) } /* ── A11y plumbing + motion ────────────────────────────────────────────── */ a:focus-visible,button:focus-visible,.btn:focus-visible,.switch:focus-visible,.seg button:focus-visible{ outline:3px solid var(--lavender); outline-offset:3px; border-radius:8px } .skip{ position:absolute; left:-9999px; top:8px; background:var(--lavender); color:var(--ink-0); padding:10px 16px; border-radius:8px; z-index:1000 } .skip:focus{ left:12px } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease) } :root:not([data-motion="reduce"]) .reveal.in{ opacity:1; transform:none } :root:not([data-motion="reduce"]) .stagger>*{ opacity:0; transform:translateY(16px); animation:rise .7s var(--ease) forwards } :root:not([data-motion="reduce"]) .stagger.in>*{ animation-play-state:running } } @keyframes rise{ to{ opacity:1; transform:none } } .stagger.in>*:nth-child(1){ animation-delay:.05s } .stagger.in>*:nth-child(2){ animation-delay:.13s } .stagger.in>*:nth-child(3){ animation-delay:.21s } .stagger.in>*:nth-child(4){ animation-delay:.29s } @media print, (prefers-reduced-motion:reduce){ .reveal,.stagger>*{ opacity:1 !important; transform:none !important } } /* ── Floating controls (bottom-right, like Yovel) ──────────────────────── */ .float-controls{ position:fixed; z-index:80; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px } .float-controls .icon-btn{ width:52px; height:52px; background:var(--glass); backdrop-filter:blur(16px) saturate(1.4); box-shadow:var(--shadow-1) } .float-controls .icon-btn svg{ width:21px; height:21px } /* panel opens above the floating cluster */ .a11y-panel{ bottom:max(150px,calc(env(safe-area-inset-bottom) + 150px)); top:auto } @media (max-width:520px){ .a11y-panel{ bottom:max(132px,calc(env(safe-area-inset-bottom) + 132px)) } } .nowrap{white-space:nowrap} /* ── Accessibility modes (modelled on the Yovel app) ───────────────────── */ html[data-transparency="reduce"] .site-header, html[data-transparency="reduce"] .a11y-panel, html[data-transparency="reduce"] .float-controls .icon-btn{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--ink-1) !important } html[data-theme="light"][data-transparency="reduce"] .a11y-panel, html[data-theme="light"][data-transparency="reduce"] .float-controls .icon-btn{ background:#fff !important } html[data-underline="on"] main a:not(.btn):not(.brand):not(.craft):not(.swatch){ text-decoration:underline; text-underline-offset:3px } html[data-targets="large"] .nav a, html[data-targets="large"] .footer-col a, html[data-targets="large"] .btn, html[data-targets="large"] main a:not(.craft){ min-height:52px } html[data-targets="large"] .footer-col a{ padding-block:12px } /* ── Accessibility panel — head + scrollable body + clear close + stepper ─ */ .a11y-panel{ padding:0 !important; overflow:hidden; max-height:min(78vh,640px); display:flex; flex-direction:column } .a11y-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 18px 12px } .a11y-body{ overflow-y:auto; padding:0 18px 4px } .a11y-close{ position:static; width:40px; height:40px; flex:none; border:1px solid var(--rule); border-radius:var(--r-pill); background:var(--rule-soft); color:var(--cream); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background-color .15s, color .15s } .a11y-close:hover{ background:var(--cream); color:var(--ink-0) } .a11y-close svg{ width:18px; height:18px } .a11y-reset{ margin:4px 14px 14px; padding:11px; border:1px solid var(--rule); background:transparent; color:var(--faint); border-radius:var(--r-sm); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:color .15s, border-color .15s } .a11y-reset:hover{ color:var(--cream); border-color:var(--cream) } .stepper{ display:inline-flex; align-items:center; gap:2px; background:var(--rule-soft); border:1px solid var(--rule); border-radius:var(--r-pill); padding:3px } .stepper button{ width:36px; height:36px; border:0; background:transparent; color:var(--cream); cursor:pointer; border-radius:var(--r-pill); font-family:var(--serif); font-size:17px; line-height:1 } .stepper button:hover{ background:var(--rule-soft) } .stepper .lvl{ font-family:var(--mono); font-size:12px; color:var(--faint); min-width:50px; text-align:center } /* ── Minimal brand hero (homepage) ─────────────────────────────────────── */ .hero--brand{ text-align:center; min-height:80vh; display:flex; align-items:center; padding-block:clamp(48px,8vw,96px) } .hero--brand .wrap{ display:flex; flex-direction:column; align-items:center } .hero--brand .hero-mark{ margin:0 auto 6px } .brandmark{ font-family:var(--serif); font-weight:400; line-height:.88; letter-spacing:-.025em; margin:4px 0 0; font-size:clamp(72px,17vw,224px); display:flex; flex-direction:column } .brandmark .em{ font-style:italic; color:var(--lavender-soft) } .crafts-nav{ display:flex; gap:8px 28px; flex-wrap:wrap; justify-content:center; margin-top:32px; font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase } .crafts-nav a{ position:relative; display:inline-flex; align-items:center; gap:9px; color:var(--faint); padding:8px 4px; min-height:40px; transition:color .2s var(--ease) } .crafts-nav a::after{ content:""; position:absolute; left:20px; right:4px; bottom:3px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) } .crafts-nav a:hover{ color:var(--cream) } .crafts-nav a:hover::after{ transform:scaleX(1) } .crafts-nav .dot{ width:7px; height:7px; border-radius:50% } .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:42px } /* ── Home: one quiet product teaser under the brand name ───────────────── */ .home-teaser{ padding-block:clamp(28px,6vw,64px) } .home-teaser .wrap{ max-width:560px } .home-teaser .eyebrow{ justify-content:center } .home-app{ display:flex; align-items:center; gap:18px; text-align:left; border:1px solid var(--rule); border-radius:var(--r-md); background:color-mix(in srgb,var(--ink-1) 70%,transparent); padding:20px 22px; box-shadow:var(--shadow-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s } .home-app:hover{ border-color:color-mix(in srgb,var(--sage) 55%,var(--rule)); box-shadow:var(--shadow-2) } .home-app .mark{ width:44px; height:44px; color:var(--sage); flex:none } .home-app .ta{ flex:1; min-width:0 } .home-app .vkicker{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:5px } .home-app .ttl{ font-family:var(--serif); font-weight:400; font-size:27px; line-height:1; display:block } .home-app .desc{ color:var(--faint); font-size:14.5px; line-height:1.5; margin-top:6px; display:block } .home-app .go{ margin-left:6px; font-size:20px; color:var(--faint); flex:none; transition:transform .3s var(--ease), color .2s } .home-app:hover .go{ transform:translate(3px,-3px); color:var(--sage) } @media (max-width:520px){ .home-app{ flex-wrap:wrap } .home-app .go{ display:none } } /* ── Mobile menu — accessible disclosure dialog (phones only) ──────────── */ .menu-toggle{ display:none; justify-self:end; width:46px; height:46px; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:12px; background:transparent; color:var(--cream); cursor:pointer; transition:background-color .2s, border-color .2s } .menu-toggle:hover{ background:var(--rule-soft); border-color:var(--cream) } .menu-toggle .bars{ position:relative; width:20px; height:14px } .menu-toggle .bars i{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .3s var(--ease), opacity .2s var(--ease) } .menu-toggle .bars i:nth-child(1){ top:0 } .menu-toggle .bars i:nth-child(2){ top:6px } .menu-toggle .bars i:nth-child(3){ top:12px } .menu-toggle[aria-expanded="true"] .bars i:nth-child(1){ transform:translateY(6px) rotate(45deg) } .menu-toggle[aria-expanded="true"] .bars i:nth-child(2){ opacity:0 } .menu-toggle[aria-expanded="true"] .bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) } .mobile-nav{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:color-mix(in srgb,var(--ink-0) 97%,transparent); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); padding:max(14px,env(safe-area-inset-top)) clamp(20px,6vw,40px) max(28px,env(safe-area-inset-bottom)); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .28s var(--ease), transform .32s var(--ease), visibility 0s linear .32s } .mobile-nav.open{ opacity:1; visibility:visible; transform:none; transition:opacity .28s var(--ease), transform .32s var(--ease-spring), visibility 0s } .mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; min-height:70px; flex:none } .mobile-nav .m-brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-size:21px } .mobile-nav .m-brand .mark{ width:21px; height:21px; color:var(--lavender) } .mobile-nav .m-brand em{ font-style:italic; color:var(--lavender-soft) } .mobile-nav .m-close{ width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:var(--r-pill); background:var(--rule-soft); color:var(--cream); cursor:pointer; transition:background-color .15s, color .15s } .mobile-nav .m-close:hover{ background:var(--cream); color:var(--ink-0) } .mobile-nav .m-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round } .mobile-nav nav{ margin-top:14px; overflow-y:auto } .mobile-nav ul{ display:flex; flex-direction:column } .mobile-nav li{ border-top:1px solid var(--rule-soft) } .mobile-nav li:last-child{ border-bottom:1px solid var(--rule-soft) } .mobile-nav li a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 4px; min-height:60px; font-family:var(--serif); font-size:clamp(26px,8vw,32px); color:var(--cream); transition:color .15s var(--ease), padding-left .25s var(--ease) } .mobile-nav li a:hover{ color:var(--lavender-soft); padding-left:12px } .mobile-nav li a[aria-current="page"]{ color:var(--lavender-soft) } .mobile-nav .sec{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint) } .mobile-nav .m-cta{ margin-top:24px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:58px; background:var(--lavender); color:var(--ink-0); border-radius:var(--r-pill); font-family:var(--sans); font-weight:600; font-size:18px; transition:background-color .2s } .mobile-nav .m-cta:hover{ background:var(--lavender-soft) } @media (min-width:761px){ .mobile-nav{ display:none } } /* ============================================================================ Premium craft layer — typographic finish, focus system, high-contrast, print. All additive and accessibility-positive (2026 benchmark pass). ========================================================================== */ /* Typeset wrapping: even headings, no orphan words in body copy. */ .h3, .voice h3, .craft h3, .feature h2, .home-app .ttl{ text-wrap:balance } p, li, figcaption{ text-wrap:pretty } /* Fixed-width figures so numbers never shimmy or misalign. */ .kicker, .eyebrow, .footer-legal, .a11y-panel .lvl, [data-year], time, .vkicker{ font-variant-numeric:tabular-nums } /* Anchored sections clear the sticky header when jumped to (#statement). */ [id]{ scroll-margin-top:88px } /* Designed focus ring — keyboard / assistive-tech only, on EVERY control. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline:3px solid var(--lavender); outline-offset:3px; border-radius:10px; } /* Fallback for engines without :focus-visible — never leave a control unmarked. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus{ outline:3px solid var(--lavender); outline-offset:3px } :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible){ outline:none } /* Footer legal links (e.g. accessibility statement). */ .footer-legal a{ color:var(--faint); text-decoration:underline; text-underline-offset:3px; transition:color .15s } .footer-legal a:hover{ color:var(--cream) } /* Windows High Contrast / forced-colors — map to the user's system palette. The single most-skipped a11y feature; load-bearing for this studio. */ @media (forced-colors: active){ .craft, .voice, .reading, .home-app, .feature .panel, .a11y-panel, .a11y-row, .mobile-nav, .site-header{ border:1px solid CanvasText; background:Canvas; color:CanvasText; } .btn, .cta, .icon-btn, .menu-toggle, .a11y-close, .a11y-reset, .stepper button, .seg button, .switch{ border:1px solid ButtonText; color:ButtonText } a{ color:LinkText } .nav a[aria-current="page"], .mobile-nav a[aria-current="page"]{ color:LinkText; text-decoration:underline } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline-color:Highlight } .switch[aria-checked="true"]::after{ background:Highlight } } /* Honour the OS "increase contrast" request even without the manual toggle. */ @media (prefers-contrast: more){ :root:not([data-contrast="less"]){ --faint:var(--cream-2); --rule-soft:var(--rule) } } /* Clean print / save-as-PDF. */ @media print{ body{ background:#fff; color:#000 } body::before, body::after{ display:none !important } .site-header, .float-controls, .a11y-panel, .menu-toggle, .mobile-nav, .hero-cta{ display:none !important } main, .site-footer{ zoom:1 } .section, .hero{ padding-block:18px } .display, .h2, .h3, .brandmark, .brandmark .em{ color:#000 } .section--paper{ background:#fff } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.82em; color:#555; word-break:break-all } }