/* ========================================================================== SENESCHAL · www.seneschalhq.com Design system. Navy and gold, Playfair display type, parchment counterpoint. Generated from src/ by build.mjs. Safe to edit by hand if you prefer. ========================================================================== */ /* ---------- 0. Fonts (self hosted, no third party call) ------------------ */ @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-italic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800-normal.woff2") format("woff2"); } /* ---------- 1. Tokens ---------------------------------------------------- */ :root { --navy: #0d1b2a; --navy-deep: #070f18; --navy-header: #1a3a6b; --navy-panel: #101f31; --navy-line: rgba(212, 160, 23, 0.22); --gold: #d4a017; --gold-bright: #e8c874; --gold-deep: #a87c0c; --parchment: #f6f2e9; --parchment-2: #ece5d6; --ink: #16202c; --ink-soft: #45525f; --text: #e7ecf3; --text-soft: #b3c0d1; --text-dim: #8c9bb0; --red: #e24b4a; --amber: #e8a838; --green: #97c459; --blue: #4a86c8; --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 1180px; --wrap-narrow: 820px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.38); --shadow-lift: 0 26px 70px rgba(0, 0, 0, 0.5); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- 2. Reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; /* Keep the scrollbar track present so the page never reflows to make room for it. The opening sequence starts at `html.fx body { overflow: hidden }` and fx.js switches it to visible once the curtain lifts. With no overflow set here, BODY's overflow propagates to the viewport, so that toggle adds and removes the scrollbar AFTER first paint. On a desktop browser with a classic space-taking scrollbar it hands 19px of width back and forth and every element on the page moves at once. Search Console logged it as a 0.384 shift on : the whole of the site's Poor CLS. `overflow-y: scroll` makes HTML the scroll container, so body's overflow no longer propagates to the viewport and the track is always there. Measured on the live page: 19px of reflow before, 0px after. scrollbar-gutter: stable does NOT solve this on its own -- it only applies to a scroll container, and html computes to overflow: visible without the line below. Tested; it left the full 19px shift in place. Do not swap one for the other. Overlay scrollbars (macOS, most touch devices) take no width, so this changes nothing there. */ overflow-y: scroll; } body { margin: 0; background: var(--navy); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.72; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { color: var(--gold-bright); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--gold); } button { font: inherit; cursor: pointer; } ul, ol { margin: 0; padding: 0; } h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: var(--navy); padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* ---------- 3. Layout ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: var(--wrap-narrow); } .section { position: relative; padding: 104px 0; } .section-sm { padding: 72px 0; } .section-lg { padding: 128px 0; } /* Dark band, the default */ .band-navy { background: var(--navy); } .band-deep { background: linear-gradient(180deg, var(--navy-deep), var(--navy) 60%, var(--navy-deep)); } .band-panel { background: var(--navy-panel); } /* Parchment band, the light counterpoint */ .band-parchment { background: radial-gradient(1200px 500px at 80% -10%, rgba(212,160,23,.10), transparent 60%), linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%); color: var(--ink); } .band-parchment h1, .band-parchment h2, .band-parchment h3, .band-parchment h4 { color: var(--ink); } .band-parchment p { color: var(--ink-soft); } .band-parchment .eyebrow { color: var(--gold-deep); } .band-parchment .lead { color: var(--ink); } .band-parchment a { color: var(--gold-deep); } .band-parchment a:hover { color: var(--ink); } /* A hairline gold divider between bands */ .band-edge-top::before, .band-edge-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .45; } .band-edge-top::before { top: 0; } .band-edge-bottom::after { bottom: 0; } /* ---------- 4. Type helpers --------------------------------------------- */ .eyebrow { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .display-xl { font-size: clamp(2.5rem, 6.2vw, 4.4rem); } .display-lg { font-size: clamp(2.1rem, 4.6vw, 3.3rem); } .display-md { font-size: clamp(1.6rem, 3vw, 2.2rem); } .display-sm { font-size: clamp(1.25rem, 2vw, 1.5rem); } .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; color: var(--text-soft); } .band-parchment .lead { color: var(--ink-soft); } .muted { color: var(--text-dim); } .gold { color: var(--gold-bright); } .center { text-align: center; } .measure { max-width: 68ch; } .center .measure, .measure.center { margin-left: auto; margin-right: auto; } /* Gold diamond rule, echoes the wordmark */ .rule { display: flex; align-items: center; gap: 14px; margin: 26px 0; } .rule.center { justify-content: center; } .rule::before, .rule::after { content: ""; height: 1px; flex: 1; max-width: 140px; background: linear-gradient(90deg, transparent, var(--gold)); } .rule::after { background: linear-gradient(90deg, var(--gold), transparent); } .rule i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; } .rule.left::before { display: none; } .rule.left { justify-content: flex-start; } .rule.left::after { max-width: 220px; } /* Underline flourish under a section heading */ .head-flourish { margin-bottom: 56px; } .head-flourish.center { text-align: center; } .head-flourish .lead { margin-top: 18px; } /* ---------- 5. Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 32px; border-radius: var(--r-pill); font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); white-space: nowrap; text-align: center; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); color: var(--navy); box-shadow: 0 10px 30px rgba(212, 160, 23, .28); } .btn-gold:hover { color: var(--navy-deep); box-shadow: 0 16px 42px rgba(212, 160, 23, .42); } .btn-ghost { background: rgba(13, 27, 42, .5); border-color: rgba(212, 160, 23, .55); color: var(--gold-bright); } .btn-ghost:hover { background: rgba(212, 160, 23, .12); border-color: var(--gold); color: var(--gold-bright); } .band-parchment .btn-ghost { background: transparent; border-color: var(--gold-deep); color: var(--ink); } .band-parchment .btn-ghost:hover { background: rgba(212,160,23,.14); color: var(--ink); } .btn-sm { padding: 11px 22px; font-size: 13px; } .btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .btn-row.center { justify-content: center; } /* ---------- 6. Header ---------------------------------------------------- */ .topline { height: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep)); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(7, 15, 24, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(212, 160, 23, .18); transition: background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease); } .site-header.is-stuck { background: rgba(7, 15, 24, .95); box-shadow: 0 10px 34px rgba(0, 0, 0, .45); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; max-width: var(--wrap); margin: 0 auto; transition: padding .3s var(--ease); } .site-header.is-stuck .header-inner { padding: 10px 24px; } .brand-lockup { display: flex; align-items: center; gap: 13px; flex: none; } .brand-lockup img.mark { width: 34px; height: auto; transition: width .3s var(--ease); } .site-header.is-stuck .brand-lockup img.mark { width: 28px; } .brand-lockup .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-lockup .brand-name { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .16em; color: var(--text); } .brand-lockup .brand-sub { font-size: 8.5px; letter-spacing: .21em; text-transform: uppercase; color: var(--gold); margin-top: 5px; font-weight: 600; } .nav-desktop { display: flex; align-items: center; gap: 30px; margin-left: auto; } .nav-desktop a.navlink { position: relative; font-size: 14px; font-weight: 600; letter-spacing: .05em; color: var(--text-soft); text-transform: uppercase; padding: 6px 0; } .nav-desktop a.navlink::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width .28s var(--ease); } .nav-desktop a.navlink:hover { color: var(--text); } .nav-desktop a.navlink:hover::after, .nav-desktop a.navlink.is-current::after { width: 100%; } .nav-desktop a.navlink.is-current { color: var(--gold-bright); } .nav-cta { margin-left: 6px; } .nav-toggle { display: none; background: none; border: 1px solid rgba(212,160,23,.5); color: var(--gold); width: 44px; height: 44px; border-radius: var(--r-sm); align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: background .2s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .28s var(--ease), top .2s var(--ease); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } .nav-mobile { display: none; border-top: 1px solid rgba(212,160,23,.18); background: rgba(7, 15, 24, .98); padding: 12px 24px 24px; } .nav-mobile.is-open { display: block; } .nav-mobile a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--text); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 14px; } .nav-mobile a.is-current { color: var(--gold-bright); } .nav-mobile .btn { width: 100%; margin-top: 20px; } /* ---------- 7. Hero ------------------------------------------------------ */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -2; /* The hero photograph is the largest thing on the first screen, so it is cut three ways and the browser is handed only the one it needs. A phone gets 11KB instead of 145KB. The plain JPEG on the first line is the fallback for anything that cannot read image-set or WebP. */ background-image: url("../img/castle-storm.jpg"); background-image: image-set(url("../img/castle-storm-760.webp") type("image/webp")); background-size: cover; background-position: center 32%; transform: scale(1.06); will-change: transform; } @media (min-width: 620px) { .hero-media { background-image: image-set(url("../img/castle-storm-1200.webp") type("image/webp")); } } @media (min-width: 1280px) { .hero-media { background-image: image-set(url("../img/castle-storm-1800.webp") type("image/webp")); } } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,15,24,.94) 0%, rgba(7,15,24,.80) 38%, rgba(7,15,24,.30) 68%, rgba(7,15,24,.36) 100%), linear-gradient(180deg, rgba(7,15,24,.55) 0%, transparent 26%, rgba(7,15,24,.55) 78%, var(--navy) 100%), radial-gradient(820px 400px at 20% 58%, rgba(13,27,42,.66), transparent 72%); } .hero-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 140px 24px 110px; position: relative; z-index: 1; } .hero-wordmark { width: min(430px, 76vw); margin-bottom: 34px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); } .hero h1 { font-size: clamp(2.2rem, 5.4vw, 4.05rem); line-height: 1.1; max-width: 17ch; text-shadow: 0 3px 26px rgba(0,0,0,.6); } .hero h1 .accent { display: block; background: linear-gradient(100deg, var(--gold-bright) 12%, var(--gold) 52%, #f0dda6 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); } .hero .lead { max-width: 60ch; margin-top: 26px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #ccd8e6; text-shadow: 0 2px 14px rgba(0,0,0,.55); } .hero .btn-row { margin-top: 40px; } .hero-note { margin-top: 30px; font-size: 14px; color: var(--text-dim); display: flex; align-items: center; gap: 10px; } .hero-note::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; } .hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; color: var(--gold); opacity: .75; animation: bob 2.4s var(--ease) infinite; } @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } } /* Inner page hero, shorter */ .hero-page { position: relative; padding: 132px 0 76px; background: radial-gradient(1000px 460px at 78% -20%, rgba(212,160,23,.16), transparent 62%), linear-gradient(180deg, var(--navy-deep), var(--navy)); border-bottom: 1px solid rgba(212,160,23,.18); overflow: hidden; } .hero-page::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 380px; height: 380px; background: url("../img/shield-200.webp") center/contain no-repeat; opacity: .05; pointer-events: none; } .hero-page h1 { max-width: 20ch; } .hero-page .lead { max-width: 62ch; margin-top: 20px; } /* ---------- 8. Proof strip ---------------------------------------------- */ .proof-strip { border-top: 1px solid rgba(212,160,23,.2); border-bottom: 1px solid rgba(212,160,23,.2); background: rgba(7,15,24,.55); } .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .proof-item { padding: 34px 24px; text-align: center; border-left: 1px solid rgba(212,160,23,.16); } .proof-item:first-child { border-left: 0; } .proof-stat { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--gold-bright); line-height: 1; margin-bottom: 10px; } .proof-label { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; } /* ---------- 9. Cards ----------------------------------------------------- */ .grid { display: grid; gap: 26px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { position: relative; background: linear-gradient(160deg, rgba(26,58,107,.30), rgba(13,27,42,.92) 55%); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 34px 30px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity .3s var(--ease); } .card:hover { transform: translateY(-6px); border-color: rgba(212,160,23,.5); box-shadow: var(--shadow-lift); } .card:hover::before { opacity: 1; } .card h3 { font-size: 1.3rem; margin-bottom: 12px; } .card p { color: var(--text-soft); font-size: 15.5px; margin: 0; } .band-parchment .card { background: #fffdf8; border-color: rgba(168,124,12,.28); box-shadow: 0 10px 34px rgba(22,32,44,.07); } .band-parchment .card:hover { border-color: var(--gold-deep); box-shadow: 0 22px 54px rgba(22,32,44,.14); } .band-parchment .card p { color: var(--ink-soft); } /* Icon medallion */ .medallion { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 32% 28%, rgba(232,200,116,.24), rgba(212,160,23,.08)); border: 1px solid rgba(212,160,23,.45); color: var(--gold-bright); margin-bottom: 20px; flex: none; } .medallion svg { width: 26px; height: 26px; } .band-parchment .medallion { background: radial-gradient(circle at 32% 28%, rgba(212,160,23,.20), rgba(212,160,23,.06)); border-color: rgba(168,124,12,.5); color: var(--gold-deep); } /* ---------- 10. Comparison table ---------------------------------------- */ .compare { border: 1px solid var(--navy-line); border-radius: var(--r-lg); overflow: hidden; background: rgba(7,15,24,.5); } .compare-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,.07); } .compare-row:last-child { border-bottom: 0; } .compare-row > div { padding: 20px 26px; font-size: 15.5px; } .compare-row > div:first-child { color: var(--text-dim); border-right: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.16); } .compare-row > div:last-child { color: var(--text); } .compare-head > div { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; background: rgba(0,0,0,.3) !important; padding: 18px 26px; letter-spacing: .04em; } .compare-head > div:last-child { color: var(--gold-bright); background: rgba(212,160,23,.10) !important; } .compare-row > div:last-child strong { color: var(--gold-bright); font-weight: 600; } /* ---------- 11. Feature sections (deep pages) --------------------------- */ .feature-block { padding: 92px 0; position: relative; } .feature-block + .feature-block { border-top: 1px solid rgba(212,160,23,.14); } .feature-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; } .feature-block:nth-child(even) .feature-grid > .feature-aside { order: -1; } .feature-aside { position: sticky; top: 112px; background: linear-gradient(160deg, rgba(26,58,107,.28), rgba(13,27,42,.9)); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 30px; } .feature-aside h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 700; } .check-list { list-style: none; display: grid; gap: 14px; } .check-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: var(--text-soft); line-height: 1.6; } .check-list li::before { content: ""; flex: none; margin-top: 8px; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(212,160,23,.16); } .band-parchment .check-list li { color: var(--ink-soft); } .feature-body p { color: var(--text-soft); font-size: 16.5px; } .feature-body .lead { color: var(--text); font-weight: 400; margin-bottom: 22px; } /* Numbered steps */ .steps { display: grid; gap: 4px; counter-reset: step; } .step { display: grid; grid-template-columns: 96px 1fr; gap: 30px; align-items: start; padding: 34px 0; border-bottom: 1px solid rgba(212,160,23,.15); } .step:last-child { border-bottom: 0; } .step-num { font-family: var(--serif); font-size: 3.1rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); opacity: .85; } .band-parchment .step-num { -webkit-text-stroke: 1px var(--gold-deep); } .step h3 { font-size: 1.4rem; margin-bottom: 10px; } /* Timeline of the day */ .timeline { position: relative; padding-left: 34px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .5; } .tl-item { position: relative; padding: 0 0 40px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -34px; top: 8px; width: 16px; height: 16px; background: var(--navy); border: 2px solid var(--gold); transform: rotate(45deg); } .band-parchment .tl-item::before { background: var(--parchment); } .tl-time { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .tl-item h3 { font-size: 1.25rem; margin-bottom: 8px; } /* ---------- 12. Pricing -------------------------------------------------- */ .founding-banner { position: relative; border: 1px solid rgba(212,160,23,.5); border-radius: var(--r-lg); background: radial-gradient(700px 260px at 12% 0%, rgba(212,160,23,.20), transparent 65%), linear-gradient(135deg, rgba(26,58,107,.5), rgba(13,27,42,.94)); padding: 46px 44px; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; } .founding-banner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: url("../img/shield-200.webp") center/contain no-repeat; opacity: .07; } .badge { display: inline-block; padding: 6px 16px; border-radius: var(--r-pill); background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px; } .plan { display: flex; flex-direction: column; background: linear-gradient(170deg, rgba(26,58,107,.24), rgba(13,27,42,.94)); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 38px 32px; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(212,160,23,.45); } .plan.is-featured { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212,160,23,.3), var(--shadow-soft); background: linear-gradient(170deg, rgba(26,58,107,.42), rgba(13,27,42,.96)); } .plan-flag { align-self: flex-start; margin-bottom: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 5px 13px; border-radius: var(--r-pill); } .plan h3 { font-size: 1.65rem; margin-bottom: 4px; } .plan .for-who { font-size: 14px; color: var(--text-dim); margin-bottom: 24px; } .plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .plan-price .cur { font-size: 1.3rem; color: var(--gold-bright); font-family: var(--serif); } .plan-price .amt { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--gold-bright); } .plan-price .per { font-size: 14px; color: var(--text-dim); } .plan-year { font-size: 14px; color: var(--text-dim); margin-bottom: 26px; } .plan .check-list { margin-bottom: 30px; } .plan .check-list li { font-size: 15px; } .plan .btn { margin-top: auto; width: 100%; } /* ---------- 13. FAQ ------------------------------------------------------ */ .faq-group + .faq-group { margin-top: 56px; } .faq-group > h2 { font-size: 1.05rem; font-family: var(--sans); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(212,160,23,.3); } .faq-item { border-bottom: 1px solid rgba(255,255,255,.08); } .band-parchment .faq-item { border-bottom-color: rgba(22,32,44,.12); } .faq-q { display: flex; width: 100%; gap: 20px; align-items: flex-start; justify-content: space-between; background: none; border: 0; text-align: left; padding: 24px 0; color: inherit; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.4; transition: color .2s var(--ease); } .faq-q:hover { color: var(--gold-bright); } .band-parchment .faq-q:hover { color: var(--gold-deep); } .faq-q .chev { flex: none; width: 24px; height: 24px; margin-top: 3px; border: 1px solid rgba(212,160,23,.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); transition: transform .3s var(--ease), background .3s var(--ease); } .faq-q .chev::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); } .faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); background: rgba(212,160,23,.16); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease), opacity .3s var(--ease), padding .3s var(--ease); opacity: 0; } .faq-a > div { padding: 0 60px 26px 0; color: var(--text-soft); font-size: 16px; } .band-parchment .faq-a > div { color: var(--ink-soft); } .faq-item.is-open .faq-a { max-height: 900px; opacity: 1; } /* ---------- 14. Forms ---------------------------------------------------- */ .form-shell { background: linear-gradient(165deg, rgba(26,58,107,.30), rgba(13,27,42,.95)); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: 44px; } .field { margin-bottom: 24px; } .field label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } .field label .req { color: var(--gold); margin-left: 4px; } .field input, .field select, .field textarea { width: 100%; padding: 14px 16px; background: rgba(7,15,24,.72); border: 1px solid rgba(212,160,23,.28); border-radius: var(--r-sm); color: var(--text); font-family: var(--sans); font-size: 16px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .field textarea { min-height: 140px; resize: vertical; line-height: 1.6; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4a017' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; } .field select option { background: var(--navy); color: var(--text); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,160,23,.16); background: rgba(7,15,24,.9); } .field input::placeholder, .field textarea::placeholder { color: #6d7b8c; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; } .field .err { display: none; margin-top: 7px; font-size: 13px; color: var(--red); letter-spacing: .02em; text-transform: none; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); } .field.has-error .err { display: block; } .form-note { font-size: 13.5px; color: var(--text-dim); margin-top: 18px; } .form-status { display: none; margin-top: 24px; padding: 22px 26px; border-radius: var(--r-md); border: 1px solid; } .form-status.is-visible { display: block; } .form-status h3 { font-size: 1.3rem; margin-bottom: 8px; } .form-status.ok { border-color: rgba(151,196,89,.5); background: rgba(151,196,89,.10); } .form-status.ok h3 { color: var(--green); } .form-status.bad { border-color: rgba(226,75,74,.5); background: rgba(226,75,74,.10); } .form-status.bad h3 { color: var(--red); } .form-status p { color: var(--text-soft); margin: 0; font-size: 15.5px; } .reassure { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .reassure span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid rgba(212,160,23,.32); background: rgba(212,160,23,.07); font-size: 13.5px; color: var(--text-soft); } .reassure span::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); } .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ---------- 15. Quote / callout ------------------------------------------ */ .quote-block { position: relative; border-left: 3px solid var(--gold); padding: 6px 0 6px 34px; } .quote-block p { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.6; color: var(--text); } .band-parchment .quote-block p { color: var(--ink); } .quote-attr { margin-top: 18px; font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .pillars-band-img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--navy-line); } /* Big statement panel */ .statement { position: relative; border: 1px solid rgba(212,160,23,.4); border-radius: var(--r-lg); padding: 58px 52px; background: radial-gradient(760px 300px at 85% 10%, rgba(212,160,23,.14), transparent 62%), linear-gradient(140deg, rgba(26,58,107,.42), rgba(7,15,24,.96)); overflow: hidden; } .statement h2 { max-width: 22ch; } /* Roadmap / honesty list */ .honest-item { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .honest-item:last-child { border-bottom: 0; } .honest-item .dot { width: 10px; height: 10px; margin-top: 10px; flex: none; border: 1.5px solid var(--amber); transform: rotate(45deg); } .honest-item h4 { font-size: 1.12rem; margin-bottom: 6px; } .honest-item p { font-size: 15.5px; color: var(--text-dim); margin: 0; } /* ---------- 16. Legal pages ---------------------------------------------- */ .legal h2 { font-size: 1.45rem; margin: 44px 0 14px; } .legal h2:first-of-type { margin-top: 0; } .legal p { color: var(--text-soft); } .legal .updated { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 30px; } /* ---------- 17. Final CTA ------------------------------------------------ */ .final-cta { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); border-top: 1px solid rgba(212,160,23,.28); } .final-cta::before { content: ""; position: absolute; inset: 0; /* Sits at 17 percent opacity behind the closing panel, so the small file is more than enough here at any screen size. */ background: url("../img/castle-storm.jpg") center 40% / cover no-repeat; background-image: image-set(url("../img/castle-storm-760.webp") type("image/webp")); opacity: .17; filter: saturate(.7); } @media (min-width: 900px) { .final-cta::before { background-image: image-set(url("../img/castle-storm-1200.webp") type("image/webp")); } } .final-cta .wrap { position: relative; z-index: 1; } .final-cta img.shield { width: 78px; margin: 0 auto 26px; opacity: .95; } /* ---------- 18. Footer --------------------------------------------------- */ .site-footer { background: var(--navy-deep); border-top: 1px solid rgba(212,160,23,.25); padding: 70px 0 34px; font-size: 15px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); } .footer-brand img { width: 220px; margin-bottom: 20px; opacity: .95; } .footer-brand p { color: var(--text-dim); font-size: 15px; max-width: 42ch; } .footer-col h4 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .footer-col ul { list-style: none; display: grid; gap: 11px; } .footer-col a { color: var(--text-soft); font-size: 15px; } .footer-col a:hover { color: var(--gold-bright); } .footer-promise { margin: 34px 0 26px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold-bright); } .footer-legal { font-size: 12.5px; color: #6f7d90; line-height: 1.7; text-align: center; max-width: 76ch; margin: 0 auto 20px; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 12.5px; color: #6f7d90; border-top: 1px solid rgba(255,255,255,.06); padding-top: 22px; } .footer-bottom a { color: #8c9bb0; } /* ---------- 19. Reveal animation ----------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .09s; } .reveal.d2 { transition-delay: .18s; } .reveal.d3 { transition-delay: .27s; } .reveal.d4 { transition-delay: .36s; } .reveal.d5 { transition-delay: .45s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .hero-scroll { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---------- 20. Responsive ----------------------------------------------- */ @media (max-width: 1024px) { .feature-grid { grid-template-columns: 1fr; gap: 34px; } .feature-aside { position: static; } .feature-block:nth-child(even) .feature-grid > .feature-aside { order: 0; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 900px) { .nav-desktop { display: none; } .nav-toggle { display: flex; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .proof-grid { grid-template-columns: repeat(2, 1fr); } .proof-item:nth-child(3) { border-left: 0; } .proof-item:nth-child(n+3) { border-top: 1px solid rgba(212,160,23,.16); } .founding-banner { grid-template-columns: 1fr; padding: 36px 30px; } .section { padding: 78px 0; } .section-lg { padding: 90px 0; } .hero { min-height: auto; } .hero-inner { padding: 110px 24px 92px; } /* Narrow screens crop the castle out of frame. Pull the framing right so it stays in shot, and dim from the bottom instead of the side. */ .hero-media { background-position: 74% 22%; } .hero-media::after { background: linear-gradient(180deg, rgba(7,15,24,.62) 0%, rgba(7,15,24,.50) 18%, rgba(7,15,24,.86) 52%, var(--navy) 100%), radial-gradient(700px 520px at 30% 70%, rgba(7,15,24,.80), transparent 74%); } .statement { padding: 40px 28px; } .form-shell { padding: 30px 24px; } } @media (max-width: 640px) { body { font-size: 16px; } .wrap { padding: 0 20px; } .header-inner { padding: 12px 20px; } .brand-lockup .brand-name { font-size: 19px; letter-spacing: .13em; } .brand-lockup .brand-sub { font-size: 7.5px; letter-spacing: .16em; } .grid-4 { grid-template-columns: 1fr; } .proof-grid { grid-template-columns: 1fr; } .proof-item { border-left: 0; border-top: 1px solid rgba(212,160,23,.16); } .proof-item:first-child { border-top: 0; } .step { grid-template-columns: 1fr; gap: 8px; } .step-num { font-size: 2.3rem; } .field-row { grid-template-columns: 1fr; gap: 0; } .compare-row > div { padding: 15px 16px; font-size: 14.5px; } .btn { width: 100%; } .btn-row { flex-direction: column; align-items: stretch; } .nav-cta .btn, .header-inner .btn { width: auto; } .card { padding: 28px 22px; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } .faq-a > div { padding-right: 8px; } .hero-inner { padding: 88px 20px 72px; } .hero-wordmark { margin-bottom: 26px; } .feature-block { padding: 62px 0; } .plan { padding: 30px 24px; } } /* ========================================================================== VERSION 2 · DEPTH, LIGHT AND MOTION ========================================================================== */ /* ---------- Atmosphere: aurora, grain ------------------------------------ */ .atmos { position: relative; isolation: isolate; overflow: hidden; } .aurora { position: absolute; inset: -30% -10%; z-index: -1; pointer-events: none; filter: blur(90px); opacity: .55; } .aurora span { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; } .aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -6%; top: 4%; background: radial-gradient(circle, rgba(212,160,23,.42), transparent 66%); animation: drift1 26s ease-in-out infinite alternate; } .aurora span:nth-child(2) { width: 40vw; height: 40vw; right: -4%; top: 22%; background: radial-gradient(circle, rgba(26,58,107,.85), transparent 66%); animation: drift2 32s ease-in-out infinite alternate; } .aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 34%; bottom: -12%; background: radial-gradient(circle, rgba(79,184,200,.22), transparent 68%); animation: drift3 38s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } } @keyframes drift2 { to { transform: translate3d(-8vw, 10vh, 0) scale(1.14); } } @keyframes drift3 { to { transform: translate3d(6vw, -8vh, 0) scale(1.22); } } .grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .15; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .grain > * { position: relative; z-index: 1; } .hairline { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, rgba(212,160,23,.7) 22%, rgba(212,160,23,.7) 78%, transparent); } /* ---------- Gradient type ------------------------------------------------ */ .grad-gold { background: linear-gradient(104deg, #f2e2b4 6%, var(--gold-bright) 26%, var(--gold) 52%, #f6ead0 78%, var(--gold-bright) 96%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); animation: sheen 9s ease-in-out infinite; } @keyframes sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---------- Button shine ------------------------------------------------- */ .btn-gold { position: relative; overflow: hidden; } .btn-gold::after { content: ""; position: absolute; top: -60%; left: -30%; width: 34%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg) translateX(-160%); transition: transform .75s var(--ease); pointer-events: none; } .btn-gold:hover::after { transform: skewX(-18deg) translateX(420%); } .btn-xl { padding: 19px 44px; font-size: 16px; } /* ---------- Ticker ------------------------------------------------------- */ .ticker { position: relative; overflow: hidden; border-top: 1px solid rgba(212,160,23,.2); border-bottom: 1px solid rgba(212,160,23,.2); background: rgba(5,10,17,.7); padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .ticker-track { display: flex; width: max-content; animation: roll 46s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-group { display: flex; align-items: center; gap: 46px; padding-right: 46px; } .ticker-item { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .ticker-item::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; } @keyframes roll { to { transform: translateX(-50%); } } /* ---------- Bento -------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .bento > * { grid-column: span 2; } .bento > .b-wide { grid-column: span 3; } .bento > .b-hero { grid-column: span 4; } .tile { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--navy-line); background: radial-gradient(520px 240px at 12% 0%, rgba(26,58,107,.55), transparent 62%), linear-gradient(165deg, rgba(19,38,60,.85), rgba(9,18,29,.96)); padding: 32px 28px; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(320px 170px at 50% 0%, rgba(212,160,23,.16), transparent 62%); opacity: 0; transition: opacity .35s var(--ease); } .tile:hover { transform: translateY(-5px); border-color: rgba(212,160,23,.55); box-shadow: var(--shadow-lift); } .tile:hover::after { opacity: 1; } .tile h3 { font-size: 1.35rem; margin-bottom: 11px; } .tile p { color: var(--text-soft); font-size: 15.5px; margin: 0; } .tile .medallion { margin-bottom: 18px; } .tile-accent { border-color: rgba(212,160,23,.45); background: radial-gradient(620px 300px at 82% 6%, rgba(212,160,23,.20), transparent 64%), linear-gradient(150deg, rgba(30,64,112,.85), rgba(9,18,29,.97)); } /* ---------- Metrics ------------------------------------------------------ */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(212,160,23,.22); border: 1px solid rgba(212,160,23,.22); border-radius: var(--r-lg); overflow: hidden; } .metric { background: rgba(7,15,24,.92); padding: 34px 22px; text-align: center; } .metric .m-num { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; margin-bottom: 12px; } .metric .m-lab { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; } /* ---------- Product tour ------------------------------------------------- */ /* Cancels the html scroll-padding for this one jump. The header hides on the way down, so the reserved 96px would only show the band above it. */ #tour { scroll-margin-top: -96px; } .tour-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; } .tour-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--r-pill); background: rgba(212,160,23,.08); border: 1px solid rgba(212,160,23,.34); color: var(--text-soft); font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: all .28s var(--ease); } .tour-btn svg { width: 17px; height: 17px; } .tour-btn:hover { border-color: var(--gold); color: var(--text); } .tour-btn[aria-selected="true"] { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: var(--gold); color: var(--navy); box-shadow: 0 10px 30px rgba(212,160,23,.3); } .tour-panel { display: none; } .tour-panel.is-active { display: block; animation: fadeup .55s var(--ease) both; } @keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .tour-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; } .tour-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; } .tour-copy .lead { margin-bottom: 20px; } /* ---------- Versus ------------------------------------------------------- */ .versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; } .versus-side { padding: 38px 34px; border: 1px solid var(--navy-line); } .versus-side:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); background: linear-gradient(160deg, rgba(30,36,44,.7), rgba(10,14,19,.9)); border-right: 0; } .versus-side:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; background: radial-gradient(500px 260px at 70% 0%, rgba(212,160,23,.18), transparent 64%), linear-gradient(160deg, rgba(26,58,107,.6), rgba(9,18,29,.96)); border-left: 0; border-color: rgba(212,160,23,.5); } .versus-mid { width: 62px; display: flex; align-items: center; justify-content: center; position: relative; } .versus-mid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent); } .versus-mid span { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: var(--navy-deep); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright); } .versus-head { font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; } .versus-side:first-child .versus-head { color: #7c8797; } .versus-side:last-child .versus-head { color: var(--gold); } .versus-list { list-style: none; display: grid; gap: 15px; } .versus-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; } .versus-side:first-child .versus-list li { color: #8e99a8; } .versus-side:last-child .versus-list li { color: var(--text); } .versus-list li::before { content: ""; flex: none; margin-top: 7px; width: 9px; height: 9px; } .versus-side:first-child .versus-list li::before { border: 1.5px solid #5d6874; border-radius: 50%; } .versus-side:last-child .versus-list li::before { background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(212,160,23,.18); } /* ---------- Pull statement ----------------------------------------------- */ .pull { text-align: center; padding: 22px 0; } .pull .k { font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; } .pull h2 { font-size: clamp(2rem, 5.4vw, 3.9rem); line-height: 1.08; max-width: 17ch; margin: 0 auto; } /* ---------- Founder card ------------------------------------------------- */ .founder-card { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; border: 1px solid rgba(212,160,23,.35); border-radius: var(--r-lg); background: radial-gradient(600px 300px at 8% 0%, rgba(26,58,107,.6), transparent 62%), linear-gradient(150deg, rgba(16,32,50,.9), rgba(8,16,26,.97)); padding: 44px; } .founder-seal { width: 132px; height: 132px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(232,200,116,.22), rgba(212,160,23,.05)); border: 1px solid rgba(212,160,23,.5); padding: 16px; } .founder-seal img { width: 100%; height: auto; } /* ---------- Flow steps --------------------------------------------------- */ .flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; } .flow-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,160,23,.55), rgba(212,160,23,.55), transparent); } .flow-step { position: relative; text-align: center; } .flow-num { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.7rem; color: var(--gold-bright); background: var(--navy-deep); border: 1px solid rgba(212,160,23,.55); box-shadow: 0 0 0 8px var(--navy), 0 0 30px rgba(212,160,23,.22); } .flow-step h3 { font-size: 1.16rem; margin-bottom: 10px; } .flow-step p { font-size: 14.5px; color: var(--text-dim); } .sec-index { font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: #b8912a; margin-bottom: 14px; display: block; } /* ---------- Screens ------------------------------------------------------ */ .shot { position: relative; } .shot-cap { margin-top: 16px; text-align: center; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .shot-cap b { color: var(--gold); font-weight: 700; } .tilt-l { transform: perspective(1900px) rotateY(4.5deg) rotateX(1.6deg); } .tilt-r { transform: perspective(1900px) rotateY(-4.5deg) rotateX(1.6deg); } .tilt-flat { transform: perspective(2200px) rotateX(2.4deg); } /* ---------- Hero device -------------------------------------------------- */ .hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; } .hero-device { position: relative; padding: 26px 0; } /* On a big screen the hero breaks out of the standard column so the picture of the app is large enough to actually read. Everything else on the page stays on the 1180 grid. */ @media (min-width: 1240px) { .hero .hero-inner { max-width: 1300px; } .hero-split { grid-template-columns: .94fr 1.06fr; gap: 64px; } } @media (min-width: 1560px) { .hero .hero-inner { max-width: 1440px; } .hero-split { grid-template-columns: .9fr 1.1fr; gap: 72px; } } .chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: var(--r-pill); background: rgba(7,15,24,.92); border: 1px solid rgba(212,160,23,.5); box-shadow: 0 16px 40px rgba(0,0,0,.6); font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; backdrop-filter: blur(8px); } .chip i { width: 8px; height: 8px; flex: none; border-radius: 50%; } .chip i.g { background: var(--green); box-shadow: 0 0 10px var(--green); } .chip i.a { background: var(--amber); box-shadow: 0 0 10px var(--amber); } .chip-1 { top: -20px; right: 6%; } .chip-2 { bottom: -18px; left: 3%; } /* ---------- v2 responsive ------------------------------------------------ */ @media (max-width: 1080px) { .hero-split { grid-template-columns: 1fr; gap: 48px; } .tour-grid { grid-template-columns: 1fr; gap: 34px; } .tilt-l, .tilt-r, .tilt-flat { transform: none; } .chip-1 { right: 2%; } .chip-2 { left: 2%; } .bento > * { grid-column: span 3; } .bento > .b-hero, .bento > .b-wide { grid-column: span 6; } .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 34px; } .flow-steps::before { display: none; } .metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .versus { grid-template-columns: 1fr; } .versus-side:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--navy-line); border-bottom: 0; } .versus-side:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); border-left: 1px solid rgba(212,160,23,.5); } .versus-mid { width: auto; height: 56px; } .versus-mid::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .founder-card { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; text-align: center; } .founder-seal { margin: 0 auto; width: 110px; height: 110px; } .bento { gap: 16px; } .bento > *, .bento > .b-hero, .bento > .b-wide { grid-column: span 6; } .tile { padding: 26px 22px; } .flow-steps { grid-template-columns: 1fr; } .metrics { grid-template-columns: 1fr; } .chip { display: none; } .tour-btn { padding: 10px 16px; font-size: 12px; } .ticker-item { font-size: 11.5px; letter-spacing: .12em; } .ticker-group { gap: 30px; padding-right: 30px; } } @media (prefers-reduced-motion: reduce) { .aurora span, .grad-gold, .ticker-track { animation: none !important; } } /* ---------- Accessibility: links must not rely on colour alone ----------- */ .legal a, .footer-bottom a, .form-status a, p a:not(.btn) { text-decoration: underline; text-decoration-color: rgba(212, 160, 23, .55); text-underline-offset: 3px; text-decoration-thickness: 1px; } .legal a:hover, .footer-bottom a:hover, .form-status a:hover, p a:not(.btn):hover { text-decoration-color: currentColor; } .footer-col a { text-decoration: none; } .footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; } /* footer column heading, styled like the old h4 but a proper h2 for the outline */ .fcol-h { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; line-height: 1.4; } .band-parchment .sec-index { color: var(--gold-deep); } /* aside heading, styled like the old h4 but an h3 so the outline stays sequential */ .aside-h { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; font-weight: 700; line-height: 1.4; } .honest-h { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 6px; line-height: 1.3; } /* ========================================================================== VERSION 3 · CINEMA Preloader, WebGL layer, scroll story, cursor, masked text. All of it is additive. Without JavaScript the site below still works. ========================================================================== */ /* ---------- Opening curtain ---------------------------------------------- */ #preloader { position: fixed; inset: 0; z-index: 9999; background: var(--navy-deep); display: flex; align-items: center; justify-content: center; } .pre-inner { text-align: center; } .pre-inner img { width: 76px; margin: 0 auto 26px; opacity: .95; } .pre-bar { width: 190px; height: 2px; margin: 0 auto; background: rgba(212,160,23,.2); overflow: hidden; } .pre-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transform: scaleX(0); transform-origin: left center; } .pre-word { margin-top: 20px; font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); } /* The curtain must already be covering the page during the very first paint, otherwise the content flashes into view and is then covered up, which reads as the page loading twice. It is therefore visible by default and taken down by script. A noscript rule in the page head removes it for anyone without JavaScript. */ html.is-return #preloader { display: none; } /* If the motion script never arrives at all, whether the network dropped it, an extension blocked it, or it simply failed, the curtain takes itself down on a timer written in CSS. Nothing that can hide the whole page is allowed to depend on JavaScript running successfully. */ #preloader { animation: pre-bail 1ms linear 6s forwards; } @keyframes pre-bail { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* Hold the page still until the curtain lifts, but only on a first arrival. */ html.fx body { overflow: hidden; } html.fx.is-ready body, html.fx.is-return body, html:not(.fx) body { overflow: visible; } /* ---------- WebGL atmosphere --------------------------------------------- */ .atmos-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; } /* ---------- Scroll progress rail ----------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; background: transparent; } .scroll-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold)); transform: scaleX(0); transform-origin: left center; } /* ---------- Header hide on scroll down ----------------------------------- */ .site-header { transition: transform .5s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease); } .site-header.is-hidden { transform: translateY(-102%); } /* ---------- Masked word reveal ------------------------------------------- */ .w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; } .w-in { display: inline-block; will-change: transform; } /* a block level element wrapped whole, such as the gold accent line */ .w-mask.w-block, .w-in.w-block { display: block; } /* ---------- Custom cursor ------------------------------------------------ */ html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .tour-btn, html.has-cursor .faq-q { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; will-change: transform; /* Centring is handled once, in JavaScript, via xPercent and yPercent. Do NOT add a negative margin here as well or the two offsets stack and the ring drifts away from the dot. */ } .cursor-dot { width: 7px; height: 7px; background: var(--gold-bright); box-shadow: 0 0 12px rgba(232,200,116,.9); } .cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(212,160,23,.6); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .cursor-ring.is-hot { width: 62px; height: 62px; background: rgba(212,160,23,.10); border-color: var(--gold-bright); } /* ---------- THE SCROLL STORY --------------------------------------------- */ .story { position: relative; background: var(--navy-deep); } .story-stage { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; position: relative; overflow: hidden; } /* The font-size: 10px that used to sit here is gone. Every other mock on the site inherits the body's 17px; the story's were shrunk to 10 on top of the zoom, which is why these were the only screens nobody could read. Measured both ways first: the screens come out exactly the same height either way, so it cost legibility and bought nothing. The .ui-greet and .ui-num rules went with it; neither class appears anywhere in the markup. */ .story-screens .doc-paper { font-size: 8.6px; } .story-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 560px at 50% 40%, rgba(26,58,107,.4), transparent 70%); } .story-inner { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: center; } /* left rail: the clock */ .story-rail { position: relative; } .story-rail::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, transparent, rgba(212,160,23,.45), transparent); } .story-tick { position: relative; padding: 0 0 30px 34px; opacity: .34; transition: opacity .45s var(--ease); } .story-tick:last-child { padding-bottom: 0; } .story-tick::before { content: ""; position: absolute; left: 1px; top: 5px; width: 13px; height: 13px; transform: rotate(45deg); border: 1.5px solid rgba(212,160,23,.55); background: var(--navy-deep); transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); } .story-tick.is-on { opacity: 1; } .story-tick.is-on::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(212,160,23,.16), 0 0 20px rgba(212,160,23,.55); } .story-time { display: block; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; } .story-tick h3 { font-size: 1.08rem; line-height: 1.3; } /* right: the stacked screens */ /* All four screens occupy the same grid cell, so the container is exactly as tall as the tallest one and nothing can overflow the pinned area. */ .story-screens { display: grid; } .story-screen { grid-area: 1 / 1; display: flex; align-items: center; } .story-screen > * { width: 100%; } /* the caption under the screens */ .story-caps { display: grid; margin-top: 26px; } .story-cap { grid-area: 1 / 1; font-size: 16.5px; line-height: 1.65; color: var(--text-soft); max-width: 62ch; } .story-cap b { color: var(--gold-bright); font-weight: 600; } .story-head { text-align: center; padding: 96px 24px 8px; max-width: 900px; margin: 0 auto; } /* Without the motion layer, the story becomes a plain readable stack. */ html:not(.fx) .story-screens, html:not(.fx) .story-caps { display: block; } html:not(.fx) .story-screen, html:not(.fx) .story-cap { opacity: 1; margin-bottom: 34px; } html:not(.fx) .story-inner { grid-template-columns: 1fr; } html:not(.fx) .story-tick { opacity: 1; } /* ---------- Holding the screen still, in CSS ------------------------------ The stage used to be held by ScrollTrigger's pin. Pinning works by wrapping the element in a spacer and giving that spacer four extra screens of height at the moment the pin is built, which is after the page is already on screen. Everything below the story therefore dropped 4.2 screens a quarter second in. Cloudflare scored it: 1.997 on the story, 0.329 on the footer. TWO FIXES WERE TRIED AND BOTH FAILED, on 2026-08-19. Building the pin early, under the curtain, killed the story outright: a scrub trigger created before the Lenis scrollerProxy is live gets a dead scroll mapping. Reserving the space in CSS and handing it back when the pin appeared failed worse, because the handback is tied to a function that runs late, and on the runs where it did not fire the visitor scrolled through four screens of nothing. So there is no pin and no handback. .story-scroll is a real element with a real height, present from the first paint, and the stage is held by position: sticky, which is the browser's own job and needs no script. The page reaches its final height before a line of JavaScript has run, so there is no shift to score, and the story cannot be caught half-built because there is no build step to catch. ScrollTrigger still drives the crossfades. It just does not move anything any more, and its end is read off this element's height so the fade and the sticky travel cannot drift apart. ------------------------------------------------------------------------ */ /* The height condition is as load-bearing as the width one. Sticky means the stage is exactly one screen tall and clips what does not fit, where the old min-height let it grow. On a 700px-tall window the screens need 769px, so without this floor a short window would slice the bottom off the app. Below 830 the whole treatment is off and the story is a plain readable stack. */ @media (min-width: 1081px) and (min-height: 830px) and (prefers-reduced-motion: no-preference) { .story-stage { position: sticky; top: 0; height: 100vh; min-height: 0; } .story-scroll { height: 420vh; } /* moments * 105%, same number scrollStory uses */ } /* No GSAP: fx.js sets this under the curtain, before anything has been seen, and the section goes back to being an ordinary tall block. */ html.no-fx .story-scroll { display: none; } html.no-fx .story-stage { position: static; height: auto; min-height: 100vh; } /* And when the stylesheet has decided not to do any of it, scrollStory says so here rather than crossfading four screens nobody can see holding still. Same plain stack the no-JavaScript and phone layouts get. */ .story.story--flat .story-screens, .story.story--flat .story-caps { display: block; } .story.story--flat .story-screen, .story.story--flat .story-cap { opacity: 1; visibility: visible; margin-bottom: 34px; } .story.story--flat .story-tick { opacity: 1; } /* ---------- How big the app screen gets ---------------------------------- The screens are true miniatures: laid out at the application's own 1400px width and scaled with zoom, stepped off the width of the column they land in. That ladder is in ui.css. Wider column, bigger screen. But the stage is exactly one screen tall and clips what does not fit, so how wide the column may be depends on how TALL the window is. Measured, at each rung: column width, the zoom it lands on, and the height the screens then need including 128px of caption, 26px of gap and 80px of stage padding. 1280 -> col 938, zoom .64, needs 798 1380 -> col 1038, zoom .70, needs 848 1480 -> col 1138, zoom .76, needs 899 1580 -> col 1252, zoom .87, needs 992 THE FLOOR AT 830 MATTERS. An earlier version of this had none, so the 1280 rung applied at every height and a short window clipped the screens. Below 830 nothing here applies and the layout falls back to the 1180 default, which needs 767. Do not remove the height condition from the first rule. */ @media (min-width: 1081px) and (min-height: 830px) { .story-inner { max-width: 1280px; grid-template-columns: 250px 1fr; gap: 44px; } } @media (min-width: 1081px) and (min-height: 880px) { .story-inner { max-width: 1380px; } } @media (min-width: 1081px) and (min-height: 940px) { .story-inner { max-width: 1480px; } } /* The top rung, and it does more than widen. The four screens are not the same shape. Measured at the .87 rung: the briefing is 750 tall, the inbox 742, the document scene 475 and the listing post 560. They share one grid cell, so the cell is as tall as the briefing and the two short ones float in the middle of it with dead space above and below. That is why 3 and 4 read as smaller than 1 and 2 even though every one of them is filling the column edge to edge. Three things happen here, and each is aimed at one of them. 1. The column goes to 1396, which is the .93 rung, the top of the ladder in ui.css. Past this the zoom stops climbing and extra width buys nothing but margin. The left rail gives up 50px and the gap 8 to pay for it. 2. The stage padding drops from 40 to 24. At .93 the tallest screen needs 1011 of a 1052 window and 40px either end did not leave enough room. 3. The listing post gets its own zoom. It is the shortest of the four app screens, so it can go a rung past the others without making the shared cell any taller: .99 puts it at 1396 wide, exactly the column, which is the most it can take before the stage clips it. The document scene is not a zoomed screen at all, it is an ordinary layout with 8.4px type, which is why no amount of width ever made it readable. Its font steps up with the column instead, further down. */ @media (min-width: 1081px) and (min-height: 1030px) { .story-inner { max-width: 1680px; grid-template-columns: 200px 1fr; gap: 36px; } .story-stage { padding: 24px 0; } .story-screen:nth-child(4) .ui { zoom: .99; } } /* The document panel's own type. It is laid out at a fixed size rather than zoomed, so this is the only thing that makes it bigger. Stepped with the column so it never outgrows the width it has. */ @media (min-width: 1081px) and (min-height: 830px) { .story-screens .doc-paper { font-size: 9.5px; } } @media (min-width: 1081px) and (min-height: 940px) { .story-screens .doc-paper { font-size: 10.5px; } } @media (min-width: 1081px) and (min-height: 1030px) { .story-screens .doc-paper { font-size: 11.5px; } } @media (max-width: 1080px) { .story-inner { grid-template-columns: 1fr; gap: 34px; } .story-stage { min-height: auto; padding: 72px 0; } .story-screens, .story-caps { display: block; } .story-screen { margin-bottom: 30px; } .story-cap { margin-bottom: 26px; } .story-rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .story-rail::before { display: none; } .story-tick { opacity: 1; padding-left: 26px; padding-bottom: 14px; } } /* ---------- Page to page transitions ------------------------------------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .28s var(--ease) both; } ::view-transition-new(root) { animation: vt-in .42s var(--ease) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-8px) scale(.995); } } @keyframes vt-in { from { opacity: 0; transform: translateY(10px) scale(1.004); } } /* Browsers without view transitions get an equivalent fade, so moving between pages feels the same everywhere rather than snapping on some and gliding on others. */ html.is-return main { animation: page-in .42s var(--ease) both; } @keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.is-return main { animation: none; } } /* ---------- Motion off ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #preloader { display: none !important; } .cursor-dot, .cursor-ring, .atmos-canvas, .scroll-progress { display: none !important; } html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; } .site-header.is-hidden { transform: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .story-screens, .story-caps { display: block !important; } .story-screen, .story-cap { opacity: 1; margin-bottom: 30px; } } /* ========================================================================== VERSION 4 · THE BACKGROUND The navy was flat and empty behind the content. This gives every page a living surface: a slow colour mesh, a heraldic weave, drifting light, and a horizon glow where sections meet. All of it sits behind everything and never touches readability. ========================================================================== */ /* ---------- 1. The permanent backdrop ------------------------------------ */ /* One fixed layer behind the whole document, so no section is ever bare. */ body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(1100px 800px at 12% -5%, rgba(26, 58, 107, .55), transparent 62%), radial-gradient(900px 700px at 92% 18%, rgba(212, 160, 23, .13), transparent 60%), radial-gradient(1000px 900px at 50% 55%, rgba(20, 44, 78, .45), transparent 66%), radial-gradient(1200px 800px at 8% 92%, rgba(79, 184, 200, .09), transparent 62%), linear-gradient(180deg, #0a1522 0%, #0d1b2a 45%, #091320 100%); } /* ---------- 2. Heraldic weave -------------------------------------------- */ /* A gold diamond lattice at a whisper of opacity. You should feel texture rather than see a pattern. */ body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d4a017' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Cpath d='M32 18 46 32 32 46 18 32Z' stroke-opacity='.05'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='1' fill='%23d4a017' fill-opacity='.10'/%3E%3C/svg%3E"); background-size: 64px 64px; -webkit-mask-image: radial-gradient(1200px 900px at 50% 30%, #000 10%, transparent 85%); mask-image: radial-gradient(1200px 900px at 50% 30%, #000 10%, transparent 85%); } /* Dark bands become see-through so the backdrop shows everywhere. */ .band-navy { background: transparent; } .band-deep { background: linear-gradient(180deg, rgba(7,15,24,.72), rgba(7,15,24,.14) 42%, rgba(7,15,24,.78)); } .band-panel { background: rgba(16, 31, 49, .55); } .story { background: linear-gradient(180deg, rgba(6,12,20,.86), rgba(6,12,20,.55) 50%, rgba(6,12,20,.88)); } .site-footer { background: linear-gradient(180deg, rgba(7,15,24,.55), rgba(5,10,17,.95)); } .final-cta { background: linear-gradient(180deg, rgba(13,27,42,.35) 0%, rgba(7,15,24,.9) 100%); } /* The parchment bands stay solid, they are the deliberate contrast. */ /* ---------- 3. Horizon glow between sections ----------------------------- */ /* A soft band of light where one dark section meets the next, so the page reads as a landscape instead of stacked boxes. */ .band-navy + .band-deep::before, .band-deep + .band-navy::before, .band-navy + .band-navy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; pointer-events: none; z-index: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(212,160,23,.10), transparent 72%); } /* Every parchment band gets a lit edge above and below it. */ .band-parchment { position: relative; } .band-parchment::before, .band-parchment::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(212,160,23,.75) 20%, rgba(232,200,116,.9) 50%, rgba(212,160,23,.75) 80%, transparent); } .band-parchment::before { top: 0; } .band-parchment::after { bottom: 0; } /* ---------- 4. Stronger, slower drifting light --------------------------- */ .aurora { opacity: .78; filter: blur(84px); } .aurora span:nth-child(1) { background: radial-gradient(circle, rgba(212,160,23,.50), transparent 66%); } .aurora span:nth-child(2) { background: radial-gradient(circle, rgba(30,70,128,.95), transparent 66%); } .aurora span:nth-child(3) { background: radial-gradient(circle, rgba(79,184,200,.28), transparent 68%); } /* Sections that had no atmosphere get a quiet one of their own. */ .section::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 78% 12%, rgba(26,58,107,.30), transparent 70%); } .band-parchment.section::after, .story .section::after { display: none; } /* ---------- 5. Watermark crest ------------------------------------------- */ /* The shield, very faint, anchoring the big empty stretches. */ .crest-mark { position: absolute; pointer-events: none; z-index: 0; width: min(430px, 30vw); aspect-ratio: 406 / 440; background: url("../img/shield-200.webp") center / contain no-repeat; opacity: .035; } .crest-right { right: 3%; top: 10%; } .crest-left { left: 3%; bottom: 6%; } /* Never mirror the crest. Flipping it reverses the crown, the compass and the lion, which is wrong for a coat of arms. */ .band-parchment .crest-mark { opacity: .05; } .section > .wrap { position: relative; z-index: 1; } /* ---------- 6. Panels lift off the new backdrop -------------------------- */ /* With a live background behind them, the cards need a touch more presence so they read as objects sitting on it. */ .tile, .plan, .card, .compare, .form-shell, .feature-aside, .founding-banner, .statement { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 22px 60px -28px rgba(0, 0, 0, .85); } /* ---------- 7. Quiet it all down on small screens ------------------------ */ @media (max-width: 1280px) { .crest-mark { display: none; } } @media (max-width: 760px) { body::after { opacity: .3; } .tile, .plan, .card, .compare, .form-shell, .feature-aside, .founding-banner, .statement { backdrop-filter: none; -webkit-backdrop-filter: none; } .aurora { opacity: .5; filter: blur(60px); } } /* ========================================================================== PRICING CARDS · every tier lights up Solo is permanently lit because it is the recommendation. The other two used to sit dim no matter what you did. Now hovering, tabbing to, or clicking any card gives it the same gold treatment, so choosing between them feels like choosing rather than reading. ========================================================================== */ .plan { cursor: pointer; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); } .plan:hover, .plan:focus-within, .plan.is-picked { transform: translateY(-6px); border-color: var(--gold); background: radial-gradient(600px 300px at 50% 0%, rgba(212,160,23,.14), transparent 62%), linear-gradient(170deg, rgba(26,58,107,.46), rgba(13,27,42,.97)); box-shadow: 0 0 0 1px rgba(212,160,23,.35), 0 0 46px -12px rgba(212,160,23,.45), 0 30px 70px -26px rgba(0,0,0,.85); } /* the outline button fills in gold, matching the featured card */ .plan:hover .btn-ghost, .plan:focus-within .btn-ghost, .plan.is-picked .btn-ghost { background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); border-color: transparent; color: var(--navy); box-shadow: 0 10px 30px rgba(212,160,23,.30); } /* the price brightens too */ .plan:hover .amt, .plan:focus-within .amt, .plan.is-picked .amt { filter: brightness(1.12); } /* a picked card keeps a visible mark of being chosen */ .plan.is-picked { border-width: 1px; } .plan.is-picked::after { content: "Selected"; position: absolute; top: 14px; right: 16px; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 4px 10px; border-radius: var(--r-pill); } .plan { position: relative; } /* On touch there is no hover, so the tap-to-pick state carries the whole job. */ @media (hover: none) { .plan:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .plan:hover, .plan:focus-within, .plan.is-picked { transform: none; } } /* ========================================================================== PRICING · only one card lit at a time Solo carries a permanent lit treatment because it is the recommendation. Once the visitor actually chooses a different tier, that recommendation should step back. Two cards glowing at once makes the choice unreadable. ========================================================================== */ .is-choosing .plan:not(.is-picked), .is-choosing .plan.is-featured:not(.is-picked) { border-color: var(--navy-line); background: linear-gradient(170deg, rgba(26, 58, 107, .24), rgba(13, 27, 42, .94)); box-shadow: 0 22px 60px -28px rgba(0, 0, 0, .85); transform: none; } /* the recommended card's solid gold button becomes an outline like the rest */ .is-choosing .plan:not(.is-picked) .btn-gold { background: rgba(13, 27, 42, .5); border-color: rgba(212, 160, 23, .55); color: var(--gold-bright); box-shadow: none; } .is-choosing .plan:not(.is-picked) .btn-gold::after { display: none; } /* the recommendation flag quietens down but stays readable */ .is-choosing .plan:not(.is-picked) .plan-flag { opacity: .45; } .is-choosing .plan:not(.is-picked) .amt { filter: none; } /* Hovering an unselected card still previews it, so the row stays alive to the pointer even after a choice has been made. */ .is-choosing .plan:not(.is-picked):hover { transform: translateY(-6px); border-color: var(--gold); background: radial-gradient(600px 300px at 50% 0%, rgba(212,160,23,.14), transparent 62%), linear-gradient(170deg, rgba(26,58,107,.46), rgba(13,27,42,.97)); box-shadow: 0 0 0 1px rgba(212,160,23,.35), 0 0 46px -12px rgba(212,160,23,.45), 0 30px 70px -26px rgba(0,0,0,.85); } .is-choosing .plan:not(.is-picked):hover .btn-gold, .is-choosing .plan:not(.is-picked):hover .btn-ghost { background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); border-color: transparent; color: var(--navy); box-shadow: 0 10px 30px rgba(212,160,23,.30); } .is-choosing .plan:not(.is-picked):hover .plan-flag { opacity: 1; } /* ========================================================================== SENESCHAL · PRODUCT SCREENS -------------------------------------------------------------------------- Faithful recreations of the real Seneschal interface, drawn in HTML and CSS so they stay crisp at any size, weigh a fraction of a screenshot, and can animate. Every measurement and colour below was read out of the application's own stylesheets, not invented: brand gold #c9a84c (--brand-gold in the app) nav navy #0d1b2a (--nav-navy) card fill rgba(13,27,42,.5) with a 2px backdrop blur background /backgrounds/castle-storm.jpg, cover, right top sidebar 280px wide, 8px 6px padding, 14px gaps, 225px pill cap header band 150px, crest = band minus 30px counter tiles four at 175px, 12px gaps, 3px coloured top rule email row grid 30px 90px 1.1fr 1.5fr 220px, 12px gaps deal card 25% basis capped at 250px, 8px gaps, 11px type THE SCALE TRICK The frames are laid out at 1400px, the app's own coordinate space, then scaled down with `zoom` to fit whatever column they land in. So these are true miniatures of the app rather than a smaller thing that resembles it. ========================================================================== */ /* ---------- Browser frame ------------------------------------------------ */ /* .shot is the container the zoom steps below measure against. */ .shot { container-type: inline-size; } .ui { --g: #c9a84c; /* the locked brand gold */ --g-lt: #e0c16b; --navy: #0d1b2a; --ink: #e8edf4; --dim: #aeb8c6; --faint: rgba(240, 230, 208, .6); --line: rgba(201, 168, 76, .32); position: relative; border-radius: 14px; overflow: hidden; background: var(--navy); border: 1px solid rgba(201, 168, 76, .34); box-shadow: 0 2px 0 rgba(255, 255, 255, .05) inset, 0 40px 90px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--ink); line-height: 1.5; /* The frames are laid out at the app's own coordinate space and then scaled to fit. Two bands: at 560 container pixels and up the inner width holds at 1400, the app's desktop width. Below that it switches to 760 and the app's own narrow layout, which is what the app itself does at its 780, 760 and 600 pixel breakpoints. Every step below is chosen to keep the inner width on its band's number, so the miniature never re-flows into a layout the app would not show. */ zoom: .39; } /* --- narrow band, inner width holds at 760 --- */ @container (min-width: 340px) { .ui { zoom: .45; } } @container (min-width: 380px) { .ui { zoom: .50; } } /* --- wide band, inner width holds at 1400 --- */ @container (min-width: 430px) { .ui { zoom: .31; } } @container (min-width: 470px) { .ui { zoom: .335; } } @container (min-width: 510px) { .ui { zoom: .365; } } @container (min-width: 560px) { .ui { zoom: .40; } } @container (min-width: 620px) { .ui { zoom: .44; } } @container (min-width: 680px) { .ui { zoom: .49; } } @container (min-width: 740px) { .ui { zoom: .53; } } @container (min-width: 820px) { .ui { zoom: .59; } } @container (min-width: 900px) { .ui { zoom: .64; } } @container (min-width: 980px) { .ui { zoom: .70; } } @container (min-width: 1060px) { .ui { zoom: .76; } } @container (min-width: 1140px) { .ui { zoom: .81; } } @container (min-width: 1220px) { .ui { zoom: .87; } } @container (min-width: 1300px) { .ui { zoom: .93; } } /* faint glow behind a screen */ .ui-glow { position: relative; } .ui-glow::before { /* Nothing sideways: a negative horizontal inset here put 21 pixels past the right edge of a phone screen, which is enough to make the whole document scroll sideways by one pixel. The 48px blur spreads it wide enough on its own. */ content: ""; position: absolute; inset: -12% 0 -18%; background: radial-gradient(60% 55% at 50% 45%, rgba(201, 168, 76, .30), transparent 70%); filter: blur(48px); z-index: -1; pointer-events: none; } .ui-chrome { display: flex; align-items: center; gap: 14px; padding: 16px 26px; background: #05080d; border-bottom: 1px solid rgba(255, 255, 255, .07); } .ui-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; } .ui-dot:nth-child(1) { background: #ff5f57; } .ui-dot:nth-child(2) { background: #febc2e; } .ui-dot:nth-child(3) { background: #28c840; } .ui-url { margin-left: 16px; flex: 1; background: rgba(255, 255, 255, .06); border-radius: 30px; padding: 7px 20px; font-size: 17px; color: #8fa0b5; letter-spacing: .02em; } /* ---------- The application shell ---------------------------------------- */ /* The app's own storm background, its own navy underneath it. */ .a-app { --band: 150px; background-color: var(--navy); /* The app's own storm photograph, held back under a navy wash. The real application runs it brighter; at mockup scale, and on a page that already has weather of its own, this reads far cleaner while staying the same picture. */ background-image: linear-gradient(180deg, rgba(13, 27, 42, .58) 0%, rgba(13, 27, 42, .80) 55%, rgba(13, 27, 42, .93) 100%), url("../img/app/castle-storm.webp"); background-size: cover, cover; background-position: center, right top; background-repeat: no-repeat; font-size: 14px; } /* ---------- Header ------------------------------------------------------- */ /* Three columns: crest and wordmark left over the nav column, the time-of-day greeting centred, the date and Generate Morning Briefing banner right. */ .a-head { position: relative; min-height: var(--band); padding: 14px 28px 28px 28px; display: flex; align-items: center; justify-content: space-between; } .a-crest { position: absolute; top: 14px; left: 10px; line-height: 0; } .a-crest img { height: calc(var(--band) - 30px); width: auto; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55)); } .a-brand { padding-left: 280px; } .a-brand-name { display: block; font-family: Georgia, 'Cormorant Garamond', serif; font-size: 16px; font-weight: 400; letter-spacing: .15em; color: #fff; } .a-auth { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .9); } .a-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #4cdb8a; box-shadow: 0 0 7px rgba(76, 219, 138, .8); } .a-quote { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); max-width: 520px; text-align: center; } .a-greet { font-family: Georgia, 'Cormorant Garamond', serif; font-size: 26px; color: var(--g); letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); } .a-right { align-self: flex-start; margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .a-date { font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap; } .a-generate { display: block; width: 250px; height: auto; } /* ---------- Sidebar ------------------------------------------------------ */ .a-body { display: flex; align-items: flex-start; padding-bottom: 30px; } .a-nav { flex: none; width: 280px; padding: 8px 6px; display: flex; flex-direction: column; gap: 14px; } .a-nav-btn { display: block; line-height: 0; } .a-nav-pill { display: block; width: 100%; max-width: 225px; height: auto; /* The app gives its nav no lit state at all, so you cannot tell which tab you are on. Dimming the others is the one thing here that improves on the real interface rather than copying it. */ opacity: .62; filter: saturate(.6) brightness(.85); transition: opacity .2s, filter .2s; } .a-nav-btn.is-on .a-nav-pill { opacity: 1; filter: none; --dr: drop-shadow(0 0 9px rgba(201, 168, 76, .5)); -webkit-filter: var(--dr); filter: var(--dr); } /* ---------- Main column -------------------------------------------------- */ .a-main { flex: 1; min-width: 0; padding: 0 28px 0 0; } /* The app's .section-title: a gold outlined lozenge on navy. */ .a-title { display: inline-block; font-size: 14px; font-weight: 600; color: var(--g); background: #0d1b2a; border: 1px solid var(--g); border-radius: 999px; padding: 4px 14px; } /* ---------- Today's Schedule --------------------------------------------- */ .a-cal { padding: 0 0 18px; } .a-cal-count { margin-left: 12px; color: var(--g); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .a-cal-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-width: 736px; } .a-cal-ev { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 12px; background: rgba(13, 27, 42, .55); border: 1px solid rgba(201, 168, 76, .18); border-radius: 7px; } .a-cal-ev .t { color: var(--g); font-size: 13px; font-weight: 600; } .a-cal-ev .n { color: #e8e8e8; font-size: 13px; font-weight: 500; } /* ---------- Scan banner --------------------------------------------------- */ .a-banner { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; background: rgba(13, 27, 42, .85); border: 1px solid var(--g); border-radius: 16px; color: var(--g); font-size: 14px; } .a-banner-ico { font-size: 18px; } .a-banner-btn { border: 1px solid var(--g); border-radius: 6px; padding: 4px 12px; font-size: 12px; } /* ---------- Counter tiles ------------------------------------------------- */ .a-grid { display: grid; grid-template-columns: repeat(4, 175px); justify-content: start; gap: 12px; margin-bottom: 6px; } .a-card { background: rgba(13, 27, 42, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid var(--g); border-radius: 16px; padding: 10px; text-align: center; color: var(--g); } .a-card.red { border-top: 3px solid #d9534f; } .a-card.orange { border-top: 3px solid #e0913b; } .a-card.blue { border-top: 3px solid #4c86c6; } .a-card.green { border-top: 3px solid #4f9d5d; } .a-num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: .5px; } .a-card.red .a-num { color: #ea7a74; } .a-card.orange .a-num { color: #e6a457; } .a-card.blue .a-num { color: #77aee0; } .a-card.green .a-num { color: #6fbf7e; } .a-oval-wrap { margin-top: 8px; } .a-oval { display: inline-block; background: var(--navy); color: #cdd5e0; border: 1px solid var(--g); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; letter-spacing: .3px; } /* ---------- Today's Priorities -------------------------------------------- */ .a-priorities { padding: 20px 0 0; } .a-plist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; align-items: start; } .a-pcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .a-prow { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 9px 12px; background: rgba(13, 27, 42, .55); border: 1px solid var(--line); border-radius: 12px; } .a-pleft { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; } .a-pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; } .a-pill { display: inline-block; flex: none; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .5px; } .a-pill.overdue { background: rgba(226, 75, 74, .18); color: #e24b4a; border: 1px solid #e24b4a; } .a-pill.due { background: rgba(232, 168, 56, .18); color: #e8a838; border: 1px solid #e8a838; } .a-pill.contact { background: var(--navy); color: var(--g); border: 1px solid var(--g); } .a-pname { color: var(--ink); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .a-pmeta { display: block; color: var(--dim); font-size: 11px; letter-spacing: .2px; padding-left: 16px; } .a-ptasks { list-style: none; width: 100%; margin: 2px 0 0; padding: 0 0 0 16px; } .a-ptasks li { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--dim); padding: 2px 0; } .a-ptasks .due { color: var(--g); white-space: nowrap; } /* ---------- Ornate sub-navigation ----------------------------------------- */ /* The app wraps these into a ragged row. A fixed three-across grid is the same artwork at the same size, laid out so the rows line up. */ .a-pillrow { display: grid; grid-template-columns: repeat(3, 234px); gap: 10px; margin-bottom: 18px; } .a-subpill { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } .a-subpill { opacity: .72; } .a-subpill.is-on { opacity: 1; filter: drop-shadow(0 0 8px rgba(201, 168, 76, .5)); } /* ---------- Category pills ------------------------------------------------ */ .a-cats { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .a-cat { display: inline-flex; align-items: center; gap: 6px; background: var(--g); color: #0d1b2a; border: 1px solid var(--g); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; } .a-cat-n { background: #0d1b2a; color: var(--g); padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; } .a-cat.on { background: #0d1b2a; color: var(--g); } .a-cat.on .a-cat-n { background: var(--g); color: #0d1b2a; } /* ---------- Email table ---------------------------------------------------- */ .a-table { background: rgba(13, 27, 42, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid var(--g); border-radius: 16px; overflow: hidden; } .a-erow { display: grid; grid-template-columns: 30px 90px 1.1fr 1.5fr 220px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(201, 168, 76, .15); } .a-erow:last-child { border-bottom: none; } .a-erow-head { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7e8b9c; padding: 10px 16px; background: rgba(0, 0, 0, .22); } .a-erow.is-open { background: rgba(201, 168, 76, .07); border-bottom-color: transparent; } .a-chk { width: 15px; height: 15px; border-radius: 3px; border: 1px solid rgba(201, 168, 76, .5); display: block; } .a-edate { font-size: 14px; color: #9ba8b5; white-space: nowrap; } .a-ename { font-size: 16px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-txn { background: rgba(201, 168, 76, .25); color: var(--g); border: 1px solid var(--g); font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 4px; flex: none; } .a-etopic { color: #cdd5e0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a-eacts { display: flex; gap: 6px; justify-content: flex-end; } .a-abtn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border: 1px solid rgba(201, 168, 76, .4); border-radius: 5px; color: var(--g); font-size: 12px; line-height: 1; } .a-abtn.wide { font-size: 11px; letter-spacing: .03em; } .a-expand { padding: 0 16px 16px; border-bottom: 1px solid rgba(201, 168, 76, .15); } /* ---------- Drafted reply / drafted post ----------------------------------- */ .a-draft { background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 168, 76, .4); border-left: 3px solid var(--g); border-radius: 10px; padding: 14px 16px; } .a-draft-head { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g); margin-bottom: 7px; } .a-draft p + .a-draft-head { margin-top: 14px; } .a-draft p { font-size: 14px; color: #d7dfea; margin: 0 0 8px; max-width: 92ch; } .a-caret { display: inline-block; width: 2px; height: 14px; vertical-align: -2px; margin-left: 3px; background: var(--g); animation: a-blink 1.1s steps(1) infinite; } @keyframes a-blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } } .a-draft-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .a-btn { display: inline-block; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; } .a-btn.primary { background: var(--g); color: #05080d; } .a-btn.ghost { border: 1px solid rgba(201, 168, 76, .45); color: var(--g); } /* ---------- Pipeline ------------------------------------------------------- */ .a-stagegroup { margin-bottom: 18px; } .a-stagehead { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid rgba(201, 168, 76, .25); font-family: Georgia, 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--g); } .a-chev { font-size: 10px; line-height: 1; } .a-count { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 700; color: #0d1b2a; background: var(--g); border-radius: 999px; padding: 1px 7px; } .a-count-plain { margin-left: 12px; color: var(--g); font-size: 12px; font-weight: 600; letter-spacing: .4px; } .a-deals { display: flex; flex-wrap: wrap; gap: 8px; } .a-deals > * { flex: 0 0 calc(25% - 6px); max-width: 250px; } .a-deal { display: flex; flex-direction: column; background: rgba(13, 27, 42, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--g); border-radius: 8px; padding: 8px 10px; color: #f0e6d0; font-size: 11px; } .a-deal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .a-stage { display: block; height: 32px; width: auto; max-width: 100%; flex-shrink: 1; min-width: 0; } .a-days { margin-left: auto; color: var(--g); font-size: 11px; white-space: nowrap; } .a-edit { flex: none; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(201, 168, 76, .45); color: var(--g); font-size: 10px; font-weight: 600; } .a-deal-names { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a-deal-phones { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #c8b98a; margin-bottom: 4px; } .a-deal-addr { font-size: 11px; font-weight: 600; color: #8f8fbe; margin-bottom: 3px; } .a-deal-closing { font-size: 11px; line-height: 1.7; margin-bottom: 3px; } .a-deal-closing .crit { color: #ef4444; font-weight: 700; } .a-deal-closing .soon { color: #d3a43c; } .a-deal-last { font-size: 10px; color: var(--faint); margin-bottom: 5px; } .a-prog { margin-top: auto; padding-top: 5px; border-top: 1px solid rgba(201, 168, 76, .25); } .a-prog-n { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #e5e7eb; margin-bottom: 6px; } .a-prog-n b { font-weight: 600; color: var(--g); } .a-prog-bar { height: 4px; background: rgba(255, 255, 255, .18); border-radius: 3px; overflow: hidden; } .a-prog-bar i { display: block; height: 100%; border-radius: 3px; background: var(--g); box-shadow: 0 0 6px rgba(201, 168, 76, .4); } /* ---------- Generic panel (Proclamations, Contacts) ------------------------ */ .a-panel { background: rgba(13, 27, 42, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid var(--g); border-radius: 16px; padding: 16px 18px; } .a-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .a-postgrid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; } .a-postside { display: flex; flex-direction: column; gap: 10px; } .a-sidebox { background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 168, 76, .28); border-radius: 10px; padding: 11px 13px; } .a-sidelab { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g); margin-bottom: 7px; } .a-sideval { display: block; font-size: 14px; color: var(--ink); } .a-sideval.small { font-size: 12px; color: var(--dim); line-height: 1.5; } .a-dests { display: flex; gap: 6px; flex-wrap: wrap; } .a-dest { padding: 4px 11px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(201, 168, 76, .4); color: var(--dim); } .a-dest.on { background: var(--g); color: #05080d; font-weight: 700; border-color: var(--g); } /* ---------- Contacts table -------------------------------------------------- */ .a-ctable { display: grid; } .a-crow { display: grid; grid-template-columns: 1.3fr .9fr .8fr 1.1fr; gap: 14px; align-items: center; padding: 11px 4px; border-bottom: 1px solid rgba(201, 168, 76, .15); } .a-crow:last-child { border-bottom: none; } .a-crow-head { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7e8b9c; padding-bottom: 8px; } .a-cname { font-size: 15px; font-weight: 600; color: var(--ink); } .a-crow span { font-size: 13px; color: var(--dim); } .a-crow span.warn { color: #e8a838; } .a-cnext { color: #cdd5e0 !important; } .a-tag { display: inline-block; font-style: normal; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; } .a-tag.seller { background: rgba(45, 212, 191, .16); color: #5eead4; border: 1px solid rgba(45, 212, 191, .5); } .a-tag.buyer { background: rgba(74, 222, 128, .16); color: #86efac; border: 1px solid rgba(74, 222, 128, .5); } .a-tag.uc { background: rgba(201, 168, 76, .2); color: var(--g-lt); border: 1px solid var(--g); } .a-tag.past { background: rgba(139, 92, 246, .16); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, .5); } .a-tag.nurture { background: rgba(255, 255, 255, .07); color: #c0c0d8; border: 1px solid rgba(255, 255, 255, .2); } /* ---------- Motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .a-caret { animation: none; } } /* ---------- Document extraction diagram --------------------------------- */ .doc-scene { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: center; } .doc-paper { position: relative; background: linear-gradient(180deg, #fdfcf8 0%, #f4f1e8 100%); border-radius: 3px; padding: 18px 20px 14px; color: #24303f; font-family: var(--sans); font-size: 8.4px; line-height: 1.55; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .88), 0 2px 0 rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(0, 0, 0, .35); /* Sits square. It used to be tilted like a sheet on a desk, which read as a mistake more often than as a flourish. */ } /* the turned corner */ .doc-paper::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 20px 20px 0; border-style: solid; border-color: transparent #ddd7c8 transparent transparent; filter: drop-shadow(-2px 2px 2px rgba(0,0,0,.14)); } /* header block */ .doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1.6px solid #24303f; } .doc-title { font-family: var(--serif); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; color: #16202c; } .doc-sub { font-size: 8px; color: #6a7484; margin-top: 2px; letter-spacing: .02em; } .doc-code { flex: none; text-align: right; font-size: 7.4px; line-height: 1.5; color: #6a7484; border: 1px solid #cfc9ba; border-radius: 2px; padding: 4px 7px; } .doc-code b { display: block; font-size: 9px; color: #24303f; letter-spacing: .04em; } .doc-code span { display: block; } /* party and property fields */ .doc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-bottom: 10px; } .doc-meta > div { border-bottom: 1px solid #d8d2c4; padding-bottom: 2px; font-size: 8.4px; color: #24303f; } .doc-meta i { font-style: normal; font-size: 6.6px; letter-spacing: .13em; text-transform: uppercase; color: #8b93a1; margin-right: 6px; } .doc-meta-wide { grid-column: 1 / -1; } /* numbered clauses */ .doc-clauses { margin: 0 0 10px; padding-left: 13px; display: grid; gap: 6px; } .doc-clauses li { color: #3a4655; text-align: justify; } .doc-clauses li b { color: #16202c; } .doc-clauses::marker { color: #6a7484; } /* the lines Seneschal pulls out */ .doc-hit { display: block; position: relative; margin: 4px 0 3px -4px; padding: 3px 6px; border-radius: 2px; background: rgba(212, 160, 23, .28); box-shadow: inset 0 0 0 1px rgba(168, 124, 12, .5); font-weight: 600; color: #24303f; } .doc-hit b { color: #7d5f07; } /* checkboxes */ .doc-box { display: inline-block; width: 8px; height: 8px; margin: 0 3px 0 2px; border: 1px solid #8b93a1; border-radius: 1px; text-align: center; line-height: 7px; font-size: 7px; color: #16202c; vertical-align: -1px; } .doc-box.is-on { background: #eee7d2; border-color: #4a5566; } /* initials strip */ .doc-initials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 7px 0; margin-bottom: 8px; border-top: 1px solid #ddd7c8; border-bottom: 1px solid #ddd7c8; } .doc-initials span { display: flex; flex-direction: column; gap: 1px; } .doc-initials i { font-style: normal; font-size: 6.4px; letter-spacing: .12em; text-transform: uppercase; color: #8b93a1; } .doc-initials b { font-family: var(--serif); font-size: 9.5px; color: #34506e; border-bottom: 1px solid #cfc9ba; padding-bottom: 1px; } /* signature */ .doc-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 9px; } .doc-sign-line { flex: 1; } .doc-scrawl { display: block; font-family: var(--serif); font-style: italic; font-size: 17px; color: #2f4f78; line-height: 1; padding-bottom: 2px; border-bottom: 1px solid #b9b2a2; } .doc-sign-line i { display: block; font-style: normal; margin-top: 3px; font-size: 6.4px; letter-spacing: .12em; text-transform: uppercase; color: #8b93a1; } .doc-sign-stamp { flex: none; text-align: center; border: 1px solid rgba(47, 79, 120, .45); border-radius: 2px; padding: 4px 8px; color: #2f4f78; font-size: 6.6px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; } .doc-sign-stamp span { letter-spacing: .02em; text-transform: none; color: #6a7484; } /* footer */ .doc-foot { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid #ddd7c8; font-size: 6.4px; letter-spacing: .1em; text-transform: uppercase; color: #a4a99f; } .doc-out { display: grid; gap: 9px; } .doc-out-head { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; } .doc-date { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; background: rgba(13, 27, 42, .88); border: 1px solid rgba(212, 160, 23, .4); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 13px; } .doc-date.crit { border-left-color: var(--red); } .doc-date .d { font-family: var(--serif); font-size: 15px; color: var(--gold-bright); line-height: 1; white-space: nowrap; } .doc-date.crit .d { color: var(--red); } .doc-date .t { font-size: 11.5px; color: var(--text); } .doc-date .t small { display: block; font-size: 9.5px; color: var(--text-dim); letter-spacing: .04em; } .doc-date .c { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .doc-date.crit .c { color: var(--red); } /* the flowing connector between paper and dates */ .doc-flow { position: relative; } .doc-flow::before { content: ""; position: absolute; left: -26px; top: 8%; bottom: 8%; width: 2px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .55; } .doc-flow::after { content: ""; position: absolute; left: -30px; top: 8%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px 3px rgba(212, 160, 23, .7); animation: docrun 3.4s var(--ease) infinite; } @keyframes docrun { 0% { top: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 88%; opacity: 0; } } /* ---------- Narrow screens ------------------------------------------------ */ @media (max-width: 900px) { .doc-scene { grid-template-columns: 1fr; gap: 30px; } .doc-flow::before, .doc-flow::after { display: none; } .doc-paper { transform: none; } } /* ---------- The app's own narrow layout ------------------------------------ Below 430 container pixels the inner width is 760, so these mirror what the real app does at its 780px, 760px and 600px breakpoints: the nav becomes a centred wrapping row of pills, the counters go two across, the priorities and the deals go one across. -------------------------------------------------------------------------- */ @container (max-width: 429px) { .a-app { --band: 92px; } /* Two rows: crest and wordmark beside the date and the briefing button, then the greeting centred underneath. */ .a-head { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; padding: 12px 16px 14px; } .a-crest { left: 8px; top: 10px; } .a-brand { padding-left: 92px; grid-area: 1 / 1; } .a-right { grid-area: 1 / 2; align-self: center; margin-top: 0; align-items: flex-end; gap: 5px; } .a-generate { width: 200px; } .a-quote { grid-area: 2 / 1 / 3 / 3; position: static; transform: none; max-width: none; text-align: center; } .a-greet { font-size: 21px; } .a-body { flex-direction: column; align-items: stretch; padding-bottom: 22px; } .a-nav { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; padding: 4px 16px 14px; } .a-nav-pill { max-width: 148px; margin: 0 auto; } .a-main { padding: 0 16px; } .a-cal-list { max-width: none; } .a-cal-ev { grid-template-columns: 70px 1fr; gap: 8px; } .a-grid { grid-template-columns: repeat(2, 1fr); } .a-plist { grid-template-columns: 1fr; } .a-pillrow { grid-template-columns: repeat(2, 1fr); } .a-deals > * { flex: 0 0 100%; max-width: none; } .a-postgrid { grid-template-columns: 1fr; } .a-cats { justify-content: flex-start; } /* The inbox drops the checkbox and the action buttons, exactly as the app does when there is no room for them. */ .a-erow { grid-template-columns: 74px 1fr; gap: 6px 10px; padding: 10px 12px; } .a-erow-head, .a-chk, .a-eacts { display: none; } .a-etopic { grid-column: 2; white-space: normal; } .a-expand { padding: 0 12px 12px; } .a-crow { grid-template-columns: 1fr auto; gap: 4px 10px; } .a-crow-head { display: none; } .a-crow span:nth-child(3) { grid-column: 1; } .a-crow .a-cnext { text-align: right; } }