/* WINDROSE — Quiet Instruments · shared stylesheet Source of rules: handoff/design/WINDROSE-DESIGN-LANGUAGE.md Living reference: handoff/design/windrose-dna-ive.html The ONLY per-site override allowed is --accent (set on per product). */ :root{ /* material */ --paper:#FAFAF7; /* base surface — never pure white for pages */ --raised:#FFFFFF; /* cards on paper */ --ink:#141413; /* primary text */ --ink-soft:#4A4A48; /* long-form body */ --gray:#87867F; /* secondary text, eyebrows */ --hair:#E4E3DD; /* hairlines */ --hair-strong:#C9C8C1; /* card borders */ /* meaning (global, never repurposed) */ --red:#C0182B; /* the needle: warnings, "wrong", true north */ --ok:#0E6B4F; /* APPROVED / calibrated / live */ --warn:#8F6400; /* AI-DRAFT / directional */ /* dark band (trust, finales) */ --dark:#141413; --dark-text:#F4F4F1; --dark-gray:#9C9C97; --dark-hair:#3A3A38; /* product accent — THE ONLY PER-SITE OVERRIDE */ --accent:#141413; /* institute default */ /* atlas: --accent:#14557B (cartographic blue) */ /* logbook: --accent:#C0182B (equals needle red — intentional) */ /* type */ --serif:"STIX Two Text",Georgia,serif; --sans:"IBM Plex Sans",-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono","SF Mono",Menlo,monospace; /* motion */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.2s; --t-reveal:.7s; /* geometry */ --radius:2px; /* instrument precision; never larger */ --section-pad:clamp(96px,14vh,168px); --measure:34em; /* body max width */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--radius)} ::selection{background:var(--hair)} /* ── masthead ─────────────────────────────────────────── */ .masthead{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between; min-height:54px;padding:5px max(24px,4vw);background:rgba(250,250,247,.72); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid transparent;transition:border-color .4s var(--ease)} .masthead.scrolled{border-bottom-color:var(--hair)} .brand{display:flex;align-items:center;gap:10px;font-size:15px;min-height:44px} .brand b{font-weight:500;color:var(--accent)} .brand .org{color:var(--ink)} .brand .sep{color:var(--hair-strong)} .compass{width:18px;height:18px;transform:rotate(-18deg);transition:transform .8s var(--ease)} body.settled .compass,.brand:hover .compass{transform:rotate(0deg)} .navlinks{display:flex;gap:26px;align-items:center;flex-wrap:wrap} .navlinks a{font-size:13px;color:var(--gray);transition:color var(--t-fast) var(--ease);padding:12px 0} .navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)} .lang-switch{display:inline-flex;gap:10px;padding-left:14px;margin-left:4px;border-left:1px solid var(--hair); font:500 11px/1 var(--mono);letter-spacing:.08em} .lang-switch a{color:var(--gray);padding:12px 2px} .lang-switch a:hover{color:var(--ink)} .lang-switch a[aria-current="true"]{color:var(--ink)} /* mobile nav — native
, no JS */ .nav-mobile{display:none;position:relative} .nav-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center; width:44px;height:44px;color:var(--ink)} .nav-mobile summary::-webkit-details-marker{display:none} .nav-drop{position:absolute;right:0;top:48px;background:var(--paper);border:1px solid var(--hair-strong); border-radius:var(--radius);min-width:230px;padding:10px 0;display:flex;flex-direction:column} .nav-drop a{font-size:14px;color:var(--ink);padding:12px 22px} .nav-drop a:hover{background:var(--raised)} .nav-drop .lang-switch{border-left:0;border-top:1px solid var(--hair);margin:8px 0 0;padding:10px 22px 2px} @media (max-width:760px){ .navlinks{display:none} .nav-mobile{display:block} } /* ── section grammar ──────────────────────────────────── */ section{padding:var(--section-pad) max(24px,6vw);display:flex;flex-direction:column;align-items:center;text-align:center} .vh{min-height:100svh;justify-content:center} .needle{display:inline-block;width:2px;height:20px;background:var(--red);margin-bottom:26px} .eyebrow{font:500 11px/1.6 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--gray);margin-bottom:30px} .display{font:400 clamp(56px,9vw,128px)/1.03 var(--serif);letter-spacing:-.015em;color:var(--ink)} .display-2{font:400 clamp(34px,4.5vw,54px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink)} .display-3{font:400 clamp(24px,3vw,34px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)} .giant{font:400 clamp(84px,14vw,200px)/1 var(--serif);letter-spacing:-.02em} .sub{font-size:clamp(17px,1.5vw,20px);color:var(--gray);max-width:var(--measure);margin-top:30px} .sub-left{text-align:left} /* paragraphs longer than two lines are left-aligned */ .prose{max-width:var(--measure);text-align:left;color:var(--ink-soft)} .prose p{margin-top:1.2em} .prose p:first-child{margin-top:0} .prose strong{color:var(--ink);font-weight:500} .small{font-size:14px} /* ── links & buttons ──────────────────────────────────── */ .quiet-link{display:inline-block;margin-top:38px;font:400 15px var(--sans);color:var(--ink); border-bottom:1px solid var(--hair-strong);padding-bottom:3px;text-decoration:none; transition:border-color var(--t-fast) var(--ease)} .quiet-link:hover{border-color:var(--accent)} .quiet-link .arrow{display:inline-block;transition:transform var(--t-fast) var(--ease)} .quiet-link:hover .arrow{transform:translateX(4px)} .button{display:inline-block;font:500 15px var(--sans);background:var(--accent);color:var(--paper); padding:14px 26px;border-radius:var(--radius);border:0;cursor:pointer} /* ── instrument card (run card) — markup fixed per §5.4 ─ */ .run-card{background:var(--raised);border:1px solid var(--hair-strong);border-radius:var(--radius); padding:22px 26px;max-width:460px;width:100%;text-align:left;margin-top:52px} .run-card figcaption{font:500 11px var(--mono);letter-spacing:.22em;color:var(--accent); padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:6px} .run-card dl div{display:flex;justify-content:space-between;gap:24px;padding:11px 0;border-bottom:1px solid var(--hair)} .run-card dl div:last-child{border-bottom:0} .run-card dt{font:400 12.5px var(--mono);color:var(--gray)} .run-card dd{font:400 12.5px var(--mono);color:var(--ink);text-align:right} .v-warn{color:var(--warn)!important}.v-red{color:var(--red)!important}.v-ok{color:var(--ok)!important} /* ── provenance tags ──────────────────────────────────── */ .tagrow{display:flex;gap:12px;justify-content:center;margin-top:44px;flex-wrap:wrap} .tag{font:500 11px var(--mono);letter-spacing:.14em;border:1px solid var(--hair-strong); border-radius:var(--radius);padding:6px 11px;color:var(--ink);background:var(--raised)} .t-warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--hair-strong))} .t-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--hair-strong))} /* ── principles list ──────────────────────────────────── */ .plist{max-width:780px;width:100%;margin-top:8px;text-align:left} .plist>div{padding:34px 0;border-bottom:1px solid var(--hair)} .plist>div:last-child{border-bottom:none} .plist h2,.plist h3{font:400 clamp(26px,3.4vw,38px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)} .plist p{margin-top:12px;color:var(--ink-soft);max-width:var(--measure)} /* ── product / instrument catalogue card ──────────────── */ .inst{max-width:780px;width:100%;text-align:left;padding:40px 0;border-bottom:1px solid var(--hair)} .inst:last-of-type{border-bottom:none} .inst .kicker{font:500 11px/1.6 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gray)} .inst h2{font:400 clamp(28px,3.6vw,42px)/1.15 var(--serif);letter-spacing:-.01em;margin-top:10px} .inst h2 b{font-weight:600} .inst p{margin-top:14px;color:var(--ink-soft);max-width:var(--measure)} .inst .quiet-link{margin-top:22px} /* ── steps (numbered where order is real) ─────────────── */ .steps{max-width:780px;width:100%;text-align:left} .steps>div{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid var(--hair)} .steps>div:last-child{border-bottom:none} .steps .n{font:400 12.5px/2 var(--mono);color:var(--gray);flex:none;width:34px} .steps h3{font:500 17px/1.4 var(--sans);color:var(--ink);display:inline} .steps p{color:var(--ink-soft);margin-top:6px} .steps .tag{margin-left:10px;vertical-align:2px} /* ── FAQ ──────────────────────────────────────────────── */ .faq{max-width:720px;width:100%;text-align:left} .faq>div{padding:26px 0;border-bottom:1px solid var(--hair)} .faq>div:last-child{border-bottom:none} .faq h3{font:500 17px/1.4 var(--sans);color:var(--ink)} .faq p{margin-top:10px;color:var(--ink-soft)} /* ── dark band ────────────────────────────────────────── */ .band{background:var(--dark);color:var(--dark-text)} .band .eyebrow{color:var(--dark-gray)} .band .sub,.band .prose,.band p{color:var(--dark-gray)} .band .display-2,.band .display-3,.band h2{color:var(--dark-text)} .band .quiet-link{color:var(--dark-text);border-color:var(--dark-hair)} .band .quiet-link:hover{border-color:var(--dark-text)} .band .needle{background:#EF6B7A} .band .steps h3,.band .faq h3,.band .small{color:var(--dark-text)} .band .steps>div,.band .faq>div{border-color:var(--dark-hair)} .band .steps p,.band .faq p{color:var(--dark-gray)} .band a{color:inherit} /* ── definition rows (contact, download, meta) ────────── */ .rows{max-width:640px;width:100%;text-align:left} .rows>div{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--hair);flex-wrap:wrap} .rows>div:last-child{border-bottom:none} .rows dt,.rows .k{font:400 12.5px/2 var(--mono);letter-spacing:.08em;color:var(--gray);text-transform:uppercase} .rows dd,.rows .v{font-size:15px;color:var(--ink)} /* ── changelog ────────────────────────────────────────── */ .log{max-width:720px;width:100%;text-align:left} .log article{padding:30px 0;border-bottom:1px solid var(--hair)} .log article:last-child{border-bottom:none} .log h2{font:500 15px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink)} .log h3{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin:18px 0 6px} .log p,.log li{color:var(--ink-soft);font-size:15px} .log ul{list-style:none} .log li{padding:6px 0} .log .tag{margin-right:8px} /* ── footer (class-scoped so ported pages can reuse it) ─ */ .wr-footer{padding:46px max(24px,6vw) 64px;text-align:center;color:var(--gray); font:400 12.5px/1.6 var(--sans);border-top:1px solid var(--hair);background:var(--paper)} .wr-footer .fam{font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--gray);margin-bottom:22px} .wr-footer .flinks{display:flex;gap:22px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;list-style:none} .wr-footer .flinks a{padding:8px 0;color:var(--gray)} .wr-footer a:hover{color:var(--ink)} .wr-footer .publisher{margin-top:18px} /* ── motion ───────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .compass{transform:none;transition:none} }