/* ========================================================================== NORWYN K - SHARED STYLESHEET Speaker · Author · Communication Advisor ARCHITECTURE NOTE (important): All content is VISIBLE BY DEFAULT. Animation is layered on only after JavaScript successfully initialises and adds `.js-anim` to . If JS fails, is disabled, or the ambient canvas throws, the page still renders completely. Nothing here depends on WebGL, GSAP or Three.js. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root{ --bg:#0A0A0A; --surface:#111111; --surface-2:#151515; --grid-line:rgba(255,255,255,0.05); --hairline:rgba(255,255,255,0.09); --text:#F0EDE6; --text-2:#8A8580; --text-3:#5F5A55; --amber:#C9A96E; --amber-soft:rgba(201,169,110,.14); --amber-line:rgba(201,169,110,.32); --red:#E5484D; --white:#FFFFFF; --font-display:"Playfair Display", Georgia, serif; --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace; --w-narrow:720px; --w-mid:880px; --w-wide:1140px; --nav-h:68px; --ease:cubic-bezier(.22,1,.36,1); } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; } img,svg,canvas,video{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } ul,ol{ list-style:none; } ::selection{ background:rgba(201,169,110,.3); color:var(--white); } /* Visible, consistent focus for keyboard users */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; } /* Anchor targets clear the sticky nav */ [id]{ scroll-margin-top:calc(var(--nav-h) + 2rem); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:#0A0A0A; padding:.9rem 1.4rem; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; } .skip-link:focus{ left:1rem; top:1rem; } /* -------------------------------------------------------------------------- 3. PROGRESSIVE REVEAL Default = visible. Only `.js-anim` (set by JS after successful init) opts content into the hidden-then-animate state. -------------------------------------------------------------------------- */ html.js-anim .reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); will-change:opacity, transform; } html.js-anim .reveal.is-in{ opacity:1; transform:none; } html.js-anim .reveal-d1{ transition-delay:.08s; } html.js-anim .reveal-d2{ transition-delay:.16s; } html.js-anim .reveal-d3{ transition-delay:.24s; } @media (prefers-reduced-motion: reduce){ html.js-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* -------------------------------------------------------------------------- 4. AMBIENT BACKGROUND (stage light + grid) Pure CSS. The optional 2D canvas layers on top and can fail safely. -------------------------------------------------------------------------- */ .bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; } .bg-stage{ background: radial-gradient(ellipse 70% 50% at 50% -8%, rgba(201,169,110,.10), transparent 70%), radial-gradient(ellipse 50% 40% at 12% 8%, rgba(201,169,110,.05), transparent 70%); } .bg-grid{ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:76px 76px; mask-image:radial-gradient(ellipse 110% 100% at 50% 25%, #000 25%, transparent 92%); -webkit-mask-image:radial-gradient(ellipse 110% 100% at 50% 25%, #000 25%, transparent 92%); } #ambient-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55; } main{ position:relative; z-index:2; } /* -------------------------------------------------------------------------- 5. STICKY NAVIGATION -------------------------------------------------------------------------- */ .nav{ position:sticky; top:0; z-index:100; background:rgba(10,10,10,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease; } .nav.is-stuck{ border-bottom-color:var(--hairline); background:rgba(10,10,10,.94); } .nav-inner{ max-width:var(--w-wide); margin:0 auto; height:var(--nav-h); padding:0 clamp(1.2rem,4vw,2.4rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .nav-brand{ font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.26em; text-transform:uppercase; text-decoration:none; color:var(--text); white-space:nowrap; flex-shrink:0; } .nav-brand span{ color:var(--amber); } .nav-menu{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.9rem); } .nav-menu a{ font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; color:var(--text-2); white-space:nowrap; transition:color .25s ease; padding:.4rem 0; } .nav-menu a:hover{ color:var(--text); } .nav-menu a[aria-current="page"]{ color:var(--amber); } .nav-cta{ color:#0A0A0A !important; background:var(--amber); padding:.72rem 1.25rem !important; font-weight:500; transition:background .25s ease, transform .25s ease; } .nav-cta:hover{ background:#DBBE84; transform:translateY(-1px); } .nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; flex-shrink:0; } .nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } @media (max-width:940px){ .nav-toggle{ display:flex; } .nav-menu{ position:fixed; inset:var(--nav-h) 0 auto 0; background:rgba(10,10,10,.985); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); flex-direction:column; align-items:flex-start; gap:0; padding:1.2rem clamp(1.2rem,5vw,2rem) 2.2rem; border-bottom:1px solid var(--hairline); max-height:calc(100vh - var(--nav-h)); overflow-y:auto; display:none; } .nav-menu.is-open{ display:flex; } .nav-menu a{ width:100%; padding:1rem 0; font-size:13px; letter-spacing:.16em; border-bottom:1px solid rgba(255,255,255,.05); } .nav-cta{ margin-top:1.2rem; width:auto; text-align:center; border-bottom:none !important; padding:1rem 1.6rem !important; } } /* -------------------------------------------------------------------------- 6. LAYOUT -------------------------------------------------------------------------- */ section{ position:relative; padding:clamp(4.5rem,10vh,7.5rem) clamp(1.3rem,5vw,3rem); } .shell{ max-width:var(--w-mid); margin:0 auto; } .shell-wide{ max-width:var(--w-wide); margin:0 auto; } .shell-narrow{ max-width:var(--w-narrow); margin:0 auto; } .sec-divider{ border-top:1px solid var(--hairline); } /* -------------------------------------------------------------------------- 7. TYPOGRAPHY -------------------------------------------------------------------------- */ .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); opacity:.85; display:flex; align-items:center; gap:.85rem; margin-bottom:1.6rem; } .eyebrow::after{ content:""; height:1px; flex:1 1 auto; max-width:64px; background:linear-gradient(90deg,var(--amber-line),transparent); } .eyebrow-plain{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:1.4rem; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; } .h-hero{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.5rem,6.6vw,5rem); line-height:1.04; letter-spacing:-0.02em; color:var(--text); } .h-1{ font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.1; letter-spacing:-0.015em; } .h-2{ font-size:clamp(1.65rem,3.6vw,2.6rem); line-height:1.16; letter-spacing:-0.01em; } .h-3{ font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.24; } .lede{ font-size:clamp(1.06rem,1.8vw,1.22rem); line-height:1.75; color:var(--text-2); max-width:36em; } .body-text{ color:var(--text-2); line-height:1.8; max-width:36em; } .body-text + .body-text{ margin-top:1.2rem; } .body-text strong{ color:var(--text); font-weight:500; } .pull{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,2.5vw,1.7rem); line-height:1.42; color:var(--text); max-width:22em; } .pull-amber{ color:var(--amber); } .amber{ color:var(--amber); } .muted{ color:var(--text-3); } .link-inline{ color:var(--amber); text-decoration:none; border-bottom:1px solid var(--amber-line); transition:border-color .25s ease, color .25s ease; } .link-inline:hover{ color:var(--text); border-color:var(--amber); } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family:var(--font-mono); font-size:12px; letter-spacing:.17em; text-transform:uppercase; text-decoration:none; text-align:center; padding:1.05rem 2rem; border:1px solid var(--amber); position:relative; overflow:hidden; transition:color .3s ease, background .3s ease, transform .25s ease; } .btn-primary{ background:var(--amber); color:#0A0A0A; font-weight:500; } .btn-primary:hover{ background:#DBBE84; border-color:#DBBE84; transform:translateY(-2px); } .btn-ghost{ background:transparent; color:var(--text); border-color:rgba(201,169,110,.42); } .btn-ghost:hover{ background:var(--amber); color:#0A0A0A; border-color:var(--amber); transform:translateY(-2px); } .btn-quiet{ background:transparent; color:var(--text-2); border-color:rgba(255,255,255,.16); } .btn-quiet:hover{ color:var(--text); border-color:var(--text-2); } .btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; } .text-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-2); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:3px; transition:color .25s ease, border-color .25s ease; display:inline-block; } .text-link:hover{ color:var(--amber); border-color:var(--amber); } /* -------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .hero{ padding-top:clamp(3.5rem,8vh,6rem); padding-bottom:clamp(3.5rem,8vh,6rem); } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; } @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:2.6rem; } } .hero-sub{ margin-top:1.7rem; font-size:clamp(1.02rem,1.7vw,1.16rem); line-height:1.75; color:var(--text-2); max-width:34em; } /* -------------------------------------------------------------------------- 10. MEDIA PLACEHOLDER Explicitly labelled. Never a stand-in for fabricated imagery. -------------------------------------------------------------------------- */ .media-slot{ position:relative; border:1px dashed rgba(201,169,110,.34); background: repeating-linear-gradient( -45deg, rgba(201,169,110,.028) 0 12px, transparent 12px 24px ), var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1.4rem; min-height:260px; gap:.7rem; } .media-slot.ratio-portrait{ aspect-ratio:4/5; } .media-slot.ratio-video{ aspect-ratio:16/9; } .media-slot-tag{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); opacity:.9; } .media-slot-label{ font-family:var(--font-display); font-size:1.05rem; color:var(--text-2); line-height:1.4; max-width:22em; } .media-slot-note{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-3); line-height:1.7; max-width:26em; } /* ---- Real stage photography ---- Falls back to the labelled media slot if the file is not present yet, so the page never shows a broken image. */ .stage-figure{ margin:0; } .stage-media{ position:relative; } .stage-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,10,10,.7)); pointer-events:none; } .stage-media::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1; background:linear-gradient(90deg,var(--amber),transparent); opacity:.6; } .stage-img{ width:100%; display:block; background:var(--surface); filter:grayscale(100%) contrast(1.05) brightness(1.02); } .stage-img--portrait{ aspect-ratio:4/5; object-fit:cover; object-position:63% 38%; } .stage-img--wide{ aspect-ratio:3/2; object-fit:cover; object-position:center 42%; } /* Archive / "then" imagery - warmer, slightly faded, era-appropriate */ .stage-img--then{ aspect-ratio:4/5; object-fit:cover; object-position:center 46%; filter:grayscale(18%) sepia(12%) contrast(1.04) brightness(.98); } .then-badge{ position:absolute; top:0; left:0; z-index:2; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:#0A0A0A; background:var(--amber); padding:.45rem .85rem; } @media (max-width:900px){ .stage-img--portrait{ aspect-ratio:3/2; object-position:63% 40%; } .stage-img--then{ aspect-ratio:1/1; } } .stage-fallback{ display:none; } .stage-figure.img-missing .stage-img{ display:none; } .stage-figure.img-missing .stage-fallback{ display:flex; } .stage-figure.img-missing .stage-media::after, .stage-figure.img-missing .stage-media::before{ display:none; } /* Real portrait */ .portrait{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%; filter:grayscale(12%) contrast(1.06); } .portrait-wrap{ position:relative; } .portrait-wrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(10,10,10,.72)); pointer-events:none; } .portrait-cap{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-top:.85rem; } /* -------------------------------------------------------------------------- 11. WAVEFORM (spoken-word cue) -------------------------------------------------------------------------- */ .waveform{ display:flex; align-items:center; gap:3px; height:26px; margin:1.6rem 0; } .waveform span{ display:block; width:2px; background:var(--amber); opacity:.42; border-radius:1px; height:var(--h,40%); } html.js-anim .waveform span{ animation:wave 1.5s ease-in-out infinite; animation-delay:var(--d,0s); } @keyframes wave{ 0%,100%{ transform:scaleY(.45); opacity:.3; } 50%{ transform:scaleY(1); opacity:.75; } } @media (prefers-reduced-motion: reduce){ html.js-anim .waveform span{ animation:none; } } /* -------------------------------------------------------------------------- 12. LOGO STRIP -------------------------------------------------------------------------- */ .proof-band{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:rgba(255,255,255,.012); } .proof-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3); text-align:center; display:block; margin-bottom:2.2rem; } .logo-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem 3rem; } .logo-grid img{ height:30px; width:auto; max-width:118px; object-fit:contain; filter:brightness(0) invert(1); opacity:.42; transition:opacity .3s ease, filter .3s ease; } .logo-grid img:hover{ opacity:.95; filter:none; } @media (max-width:600px){ .logo-grid{ gap:1.5rem 2rem; } .logo-grid img{ height:23px; max-width:88px; } } /* -------------------------------------------------------------------------- 13. STATS -------------------------------------------------------------------------- */ .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2rem; margin-top:2.8rem; } .stat{ } .stat-num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4.2vw,2.9rem); color:var(--amber); line-height:1; } .stat-label{ display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); line-height:1.7; } /* -------------------------------------------------------------------------- 14. CARDS -------------------------------------------------------------------------- */ .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:3rem; } .card-grid-2{ grid-template-columns:repeat(2,1fr); } @media (max-width:920px){ .card-grid{ grid-template-columns:1fr; } .card-grid-2{ grid-template-columns:1fr; } } .card{ border:1px solid var(--hairline); background:rgba(255,255,255,.014); padding:2.2rem 1.9rem; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:border-color .35s ease, background .35s ease, transform .35s var(--ease); } .card::before{ content:""; position:absolute; top:0; left:0; height:1px; width:0; background:linear-gradient(90deg,var(--amber),transparent); transition:width .55s var(--ease); } .card:hover{ border-color:var(--amber-line); background:rgba(201,169,110,.028); transform:translateY(-3px); } .card:hover::before{ width:100%; } .card-kicker{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); opacity:.8; margin-bottom:1rem; } .card h3{ font-size:clamp(1.25rem,2.1vw,1.5rem); line-height:1.22; margin-bottom:.85rem; color:var(--text); } .card p{ color:var(--text-2); font-size:.97rem; line-height:1.68; margin-bottom:1.4rem; } .card .btn,.card .text-link{ margin-top:auto; align-self:flex-start; } .card-for{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; color:var(--text-3); margin-bottom:1rem; line-height:1.6; } /* -------------------------------------------------------------------------- 15. BULLET LISTS -------------------------------------------------------------------------- */ .bullets{ display:flex; flex-direction:column; gap:.65rem; } .bullets li{ position:relative; padding-left:1.3rem; color:var(--text-2); font-size:.99rem; line-height:1.65; } .bullets li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--amber); opacity:.75; } .bullets-2col{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem 2.4rem; } @media (max-width:640px){ .bullets-2col{ grid-template-columns:1fr; } } /* -------------------------------------------------------------------------- 16. COMPARISON (Trojan Horse) -------------------------------------------------------------------------- */ .compare{ display:flex; flex-direction:column; margin-top:2.6rem; border-top:1px solid var(--hairline); } .compare-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2.5rem); align-items:center; padding:1.5rem .2rem; border-bottom:1px solid var(--hairline); transition:background .3s ease; } .compare-row:hover{ background:rgba(201,169,110,.02); } .compare-a{ color:var(--text-3); font-size:.99rem; line-height:1.6; } .compare-b{ color:var(--text); font-size:.99rem; line-height:1.6; font-weight:500; } .compare-arrow{ font-family:var(--font-mono); font-size:11px; color:var(--amber); opacity:.65; white-space:nowrap; } @media (max-width:700px){ .compare-row{ grid-template-columns:1fr; gap:.4rem; padding:1.2rem .2rem; } .compare-arrow{ display:none; } .compare-a::after{ content:" ↓"; color:var(--amber); opacity:.6; } } /* -------------------------------------------------------------------------- 17. KEYNOTE LIST -------------------------------------------------------------------------- */ .keynote-feature{ border:1px solid var(--amber-line); background:linear-gradient(180deg,rgba(201,169,110,.05),rgba(201,169,110,.015)); padding:clamp(2rem,4vw,3rem); margin-top:2.4rem; } .keynote-feature h3{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.14; margin-bottom:1rem; } .keynote-feature .sub{ color:var(--text-2); font-size:1.03rem; line-height:1.7; max-width:40em; margin-bottom:1.8rem; } .topic-list{ margin-top:2.4rem; border-top:1px solid var(--hairline); } .topic-list li{ display:flex; align-items:baseline; gap:1.4rem; padding:1.25rem .2rem; border-bottom:1px solid var(--hairline); transition:padding-left .35s var(--ease), background .3s ease; } .topic-list li:hover{ padding-left:.8rem; background:rgba(255,255,255,.014); } .topic-num{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--text-3); flex-shrink:0; transition:color .3s ease; } .topic-list li:hover .topic-num{ color:var(--amber); } .topic-name{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--text-2); transition:color .3s ease; } .topic-list li:hover .topic-name{ color:var(--text); } /* -------------------------------------------------------------------------- 18. FORM -------------------------------------------------------------------------- */ .form-wrap{ border:1px solid var(--hairline); background:rgba(255,255,255,.015); padding:clamp(1.8rem,4vw,2.8rem); margin-top:2.4rem; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; } @media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:.5rem; } .field-full{ grid-column:1 / -1; } .field label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); } .field label .req{ color:var(--amber); } .field input, .field select, .field textarea{ background:transparent; border:1px solid rgba(255,255,255,.14); color:var(--text); font-family:var(--font-body); font-size:1rem; padding:.85rem .95rem; width:100%; transition:border-color .25s ease; } .field textarea{ min-height:130px; resize:vertical; line-height:1.65; } .field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%), linear-gradient(135deg,var(--text-3) 50%,transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.4rem; } .field select option{ background:var(--surface); color:var(--text); } .field input::placeholder, .field textarea::placeholder{ color:var(--text-3); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--amber); outline:none; } .field input.err, .field textarea.err{ border-color:var(--red); } .form-actions{ margin-top:1.8rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; } .form-note{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--text-3); line-height:1.7; margin-top:1.2rem; } .form-status{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; line-height:1.7; margin-top:1.2rem; display:none; } .form-status.is-ok{ display:block; color:var(--amber); } .form-status.is-err{ display:block; color:var(--red); } .form-success{ font-family:var(--font-display); font-size:clamp(1.2rem,2.2vw,1.5rem); color:var(--amber); line-height:1.5; font-weight:600; } /* -------------------------------------------------------------------------- 19. BOOK -------------------------------------------------------------------------- */ .book-feature{ display:grid; grid-template-columns:158px 1fr; gap:clamp(1.8rem,4vw,3rem); align-items:start; margin-top:2.6rem; } @media (max-width:620px){ .book-feature{ grid-template-columns:1fr; } .book-cover{ max-width:170px; } } .book-cover{ aspect-ratio:5/7; background:#1C1A17; border:1px solid rgba(201,169,110,.24); box-shadow:0 0 50px rgba(201,169,110,.07); display:flex; flex-direction:column; padding:1.15rem .95rem; text-decoration:none; transition:box-shadow .5s ease, border-color .5s ease, transform .5s var(--ease); } .book-cover:hover{ box-shadow:0 0 80px rgba(201,169,110,.17); border-color:rgba(201,169,110,.5); transform:translateY(-4px); } .bc-1,.bc-2,.bc-3{ font-family:var(--font-display); line-height:1.04; display:block; } .bc-1{ margin-top:17%; font-weight:800; font-size:1.28rem; color:#F0EDE6; } .bc-2{ font-style:italic; font-weight:600; font-size:1.14rem; color:#F0EDE6; text-align:center; } .bc-3{ font-weight:800; font-size:1.28rem; color:#3B3834; text-align:right; } .bc-author{ margin-top:auto; font-family:var(--font-body); font-size:.56rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#F0EDE6; } /* -------------------------------------------------------------------------- 20. QUOTE -------------------------------------------------------------------------- */ .quote-block{ border-left:2px solid var(--amber-line); padding-left:clamp(1.2rem,3vw,2rem); margin:2.4rem 0; } .quote-block p{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.5; color:var(--text); max-width:24em; } .quote-attr{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-top:1rem; display:block; } /* Testimonial cards (attributed honestly per context) */ .quote-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.3rem; margin-top:2.4rem; } .quote-card{ border:1px solid var(--hairline); padding:1.9rem 1.7rem; transition:border-color .35s ease, background .35s ease; } .quote-card:hover{ border-color:var(--amber-line); background:rgba(201,169,110,.022); } .quote-card p{ font-style:italic; color:var(--text-2); font-size:1rem; line-height:1.72; margin-bottom:1.2rem; } .quote-card cite{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-style:normal; } /* -------------------------------------------------------------------------- 21. CTA BAND -------------------------------------------------------------------------- */ .cta-band{ border:1px solid var(--amber-line); background:linear-gradient(180deg,rgba(201,169,110,.055),rgba(201,169,110,.012)); padding:clamp(2.4rem,5vw,3.8rem); text-align:center; margin-top:1rem; } .cta-band h2{ margin-bottom:1.2rem; } .cta-band p{ color:var(--text-2); font-size:1.03rem; line-height:1.75; max-width:40em; margin:0 auto 2rem; } .cta-band .btn-row{ justify-content:center; margin-top:0; } .cta-band-small{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; color:var(--text-3); margin-top:2rem; } .cta-band-small a{ color:var(--text-2); } .cta-band-small a:hover{ color:var(--amber); } /* -------------------------------------------------------------------------- 22. FOOTER -------------------------------------------------------------------------- */ .site-foot{ border-top:1px solid var(--hairline); padding:clamp(3rem,6vw,4.5rem) clamp(1.3rem,5vw,3rem) 3rem; position:relative; z-index:2; } .foot-inner{ max-width:var(--w-wide); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.6rem; } @media (max-width:780px){ .foot-inner{ grid-template-columns:1fr; gap:2.2rem; } } .foot-brand{ font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--text); margin-bottom:.9rem; display:block; } .foot-brand span{ color:var(--amber); } .foot-tag{ color:var(--text-3); font-size:.93rem; line-height:1.7; max-width:26em; } .foot-head{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); margin-bottom:1.1rem; display:block; } .foot-links{ display:flex; flex-direction:column; gap:.65rem; } .foot-links a{ color:var(--text-2); text-decoration:none; font-size:.93rem; transition:color .25s ease; } .foot-links a:hover{ color:var(--amber); } .foot-bottom{ max-width:var(--w-wide); margin:2.8rem auto 0; padding-top:1.8rem; border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); } .foot-bottom a{ color:var(--text-3); text-decoration:none; } .foot-bottom a:hover{ color:var(--amber); } /* -------------------------------------------------------------------------- 23. UTILITIES -------------------------------------------------------------------------- */ .mt-0{ margin-top:0; } .mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; } .center{ text-align:center; } .center .lede, .center .body-text{ margin-left:auto; margin-right:auto; } .max-narrow{ max-width:var(--w-narrow); } @media print{ .nav,.bg-layer,#ambient-canvas,.skip-link{ display:none !important; } body{ background:#fff; color:#000; } }