/* ============================================================ QUILLON — design system Living paper · sober editorial · navy + cream + forest tick Fonts are loaded via in each page's (parallel, non-blocking) instead of a render-blocking @import here. ============================================================ */ :root{ /* ink / warm near-black (no navy) */ --ink: #1a1712; --ink-900: #13110b; --ink-850: #18150f; --ink-800: #211d15; --ink-700: #2d281d; --ink-soft: #3c382c; --ink-line: rgba(26,23,18,.13); --ink-line-2: rgba(26,23,18,.06); /* paper — warm white canvas, pure-white documents */ --paper: #f4f1e9; --paper-2: #ece7db; --paper-hi: #ffffff; --paper-edge: #e3dccb; /* accent — deep heritage pine green */ --tick: #22503f; --tick-deep: #163829; --tick-soft: #8fb0a2; --tick-glow: rgba(34,80,63,.11); --tick-hi: #cfe7dc; /* antique gold — heritage secondary / shimmer highlight */ --seal: #b08a4e; --gold: #b08a4e; --gold-soft: #e2c894; /* text on paper */ --t-strong: #1a1712; --t-body: #4a453c; --t-mute: #6a6455; /* text on ink */ --on-ink: #efeae0; --on-ink-mute:#a8a394; --shadow-paper: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(26,20,10,.08), 0 8px 16px -6px rgba(26,20,10,.16), 0 28px 56px -20px rgba(26,20,10,.32); --maxw: 1280px; --ease: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); --font-serif: 'Spectral', Georgia, serif; --font-sans: 'Spline Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ font-family:var(--font-sans); background:var(--paper); color:var(--t-body); line-height:1.6; overflow-x:hidden; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } /* ---------- type ---------- */ .serif{ font-family:var(--font-serif); } .mono{ font-family:var(--font-mono); } h1,h2,h3,h4{ font-family:var(--font-serif); color:var(--t-strong); font-weight:600; line-height:1.02; letter-spacing:-.015em; } h1{ font-size:clamp(2.8rem, 7vw, 6.4rem); font-weight:500; } h2{ font-size:clamp(2.1rem, 4.6vw, 4rem); font-weight:500; } h3{ font-size:clamp(1.4rem, 2.4vw, 2.1rem); } p{ text-wrap:pretty; } .eyebrow{ font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--tick); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--tick); display:inline-block; opacity:.6; } .on-ink .eyebrow{ color:var(--tick-soft); } .on-ink .eyebrow::before{ background:var(--tick-soft); } .lede{ font-size:clamp(1.05rem,1.4vw,1.32rem); line-height:1.55; color:var(--t-body); max-width:46ch; } .on-ink{ color:var(--on-ink); } .on-ink h1,.on-ink h2,.on-ink h3,.on-ink h4{ color:var(--paper-hi); } .on-ink .lede{ color:var(--on-ink-mute); } /* ---------- layout ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.4rem,4vw,3.5rem); } section{ position:relative; } .pad{ padding-block:clamp(5rem,11vh,10rem); } /* ---------- buttons ---------- */ .btn{ --bg:var(--ink); --fg:var(--paper-hi); display:inline-flex; align-items:center; gap:.7em; font-family:var(--font-sans); font-weight:600; font-size:.96rem; padding:1.05em 1.7em; border-radius:2px; background:var(--bg); color:var(--fg); border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease); box-shadow:0 12px 26px -14px rgba(8,20,36,.6); } .btn .arr{ transition:transform .45s var(--ease); } .btn:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -16px rgba(8,20,36,.7); } .btn:hover .arr{ transform:translateX(5px); } .btn--tick{ --bg:var(--tick); --fg:#fff; } .btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink-line); box-shadow:none; } /* green-outline secondary CTA — "in colour" but subordinate to the filled primary */ .btn--tickline{ --bg:transparent; --fg:var(--tick); border-color:var(--tick); box-shadow:none; } .btn--tickline:hover{ background:var(--tick-glow); } .on-ink .btn--tickline{ --fg:var(--tick-soft); border-color:var(--tick-soft); } .on-ink .btn--ghost{ --fg:var(--on-ink); border-color:rgba(237,230,212,.25); } .btn--ghost:hover{ background:rgba(14,31,51,.04); } .on-ink .btn--ghost:hover{ background:rgba(237,230,212,.07); } /* ---------- nav ---------- */ .nav{ position:fixed; inset:0 0 auto 0; z-index:400; display:flex; align-items:center; justify-content:space-between; padding:1.05rem clamp(1.4rem,4vw,3.5rem); transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, padding .5s var(--ease); border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(246,244,239,.82); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--ink-line); padding-block:.7rem; } .nav.on-dark:not(.scrolled){ color:var(--on-ink); } .nav__logo{ display:flex; align-items:center; gap:.6rem; height:30px; } .nav__logo img{ height:30px; width:auto; transition:opacity .4s; } .nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.4rem); } .nav__links a{ font-size:.92rem; font-weight:500; position:relative; padding:.3em 0; white-space:nowrap; color:inherit; opacity:.82; transition:opacity .3s; } .nav__links a:hover{ opacity:1; } .nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--tick); transition:width .35s var(--ease); } .nav__links a:hover::after,.nav__links a.active::after{ width:100%; } .nav__cta{ font-size:.84rem; padding:.6em 1.05em; } .nav__actions{ display:flex; align-items:center; gap:.55rem; } .nav__burger{ display:none; } @media(max-width:860px){ .nav__links{ display:none; } } /* ---------- footer ---------- */ .foot{ background:var(--ink-900); color:var(--on-ink-mute); padding-top:clamp(4rem,8vh,7rem); position:relative; overflow:hidden; } .foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-bottom:4rem; } .foot__grid img{ height:34px; margin-bottom:1.4rem; } .foot h4{ color:var(--paper-hi); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; margin-bottom:1.2rem; } .foot a{ display:block; padding:.4em 0; font-size:.95rem; transition:color .3s, transform .3s; } .foot a:hover{ color:var(--paper-hi); transform:translateX(4px); } .foot__bar{ border-top:1px solid rgba(237,230,212,.12); padding:1.6rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; font-family:var(--font-mono); } @media(max-width:760px){ .foot__grid{ grid-template-columns:1fr; gap:2rem; } } /* ---------- reveal primitives ---------- */ [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); } [data-reveal].in{ opacity:1; transform:none; } [data-reveal-d]{ transition-delay:var(--d,0s); } .split-line{ display:block; overflow:hidden; } .split-line > span{ display:block; transform:translateY(110%); transition:transform 1.05s var(--ease); } .in .split-line > span, .split-line.in > span{ transform:none; } /* ---------- shared bits ---------- */ .tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--tick); border:1px solid var(--tick-soft); padding:.35em .7em; border-radius:2px; display:inline-block; background:var(--tick-glow); } .rule{ height:1px; background:var(--ink-line); border:0; } .on-ink .rule{ background:rgba(237,230,212,.14); } ::selection{ background:var(--tick); color:#fff; } /* ============================================================ CLOSING SECTION — theme-aware page closer (replaces the old forced-dark CTA slab). Light paper in light theme; rich ink in dark theme. Centred editorial statement + brand watermark. ============================================================ */ .close{ position:relative; overflow:hidden; text-align:center; padding-block:clamp(6rem,13vh,11rem); background:radial-gradient(125% 92% at 50% -4%, var(--paper-hi) 0%, var(--paper) 56%, var(--paper-2) 100%); border-top:1px solid var(--ink-line); } .close__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; } .close .eyebrow{ display:inline-flex; } .close__h{ font-size:clamp(2.4rem,5.6vw,4.8rem); line-height:1.0; letter-spacing:-.03em; margin:1.4rem 0 0; color:var(--t-strong); max-width:18ch; } .close__h .em{ font-style:italic; color:var(--tick); } .close__sub{ font-size:clamp(1.06rem,1.5vw,1.3rem); line-height:1.5; color:var(--t-body); max-width:46ch; margin:1.6rem auto 0; text-wrap:balance; } .close__cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.7rem; } .close__foot{ margin-top:2.4rem; display:flex; align-items:center; gap:1.1rem; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; color:var(--t-mute); flex-wrap:wrap; justify-content:center; } .close__foot .dotsep{ width:4px; height:4px; border-radius:50%; background:var(--tick); opacity:.55; } .close__mail{ color:var(--tick); border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .3s var(--ease); } .close__mail:hover{ border-bottom-color:var(--tick); } .close__mark{ position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none; opacity:.05; } .close__mark svg{ width:min(56vw,580px); height:auto; fill:none; stroke:var(--tick); stroke-width:.9; } @media(max-width:560px){ .close__cta{ width:100%; } .close__cta .btn{ flex:1 1 14rem; justify-content:center; } }