/* ========================================================================== ANNEXIA — pre-launch page Tokens are taken verbatim from the client's brand board (navy/gold system, 2026-06-29): gold #F3D97A/#D9B54A/#C5A03A, deep navy #0F233E, warm ivory #F8F5EE, slate #5B6773. Type: Cinzel (headings) + Inter (body). Two documented traps are deliberately avoided here: - no `overflow-x: hidden` on (DEC-147: breaks lazy-loading in WebKit) - no opacity entrance animation on content (DEC-218/219: caps FCP/LCP at the animation length; the only animation on this page is a decorative pseudo- element that never gates content paint, and it is disabled under prefers-reduced-motion) ========================================================================== */ @font-face { font-family: 'Cinzel'; src: url('/assets/fonts/cinzel-latin-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-var.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } :root { --navy: #0F233E; --navy-deep: #0A1930; --gold-100: #F3D97A; --gold-200: #D9B54A; --gold-300: #C5A03A; --ivory: #F8F5EE; /* The brand board's slate (#5B6773) is listed as an OPTIONAL ACCENT, and it is one: on the navy ground it measures 2.73:1, well under the 4.5:1 AA floor for text this small. Labels therefore use a tint of it that keeps the same cool cast at 5.3:1. The accent value is kept for any non-text use. */ --slate: #5B6773; --slate-text: #8B98A6; --serif: 'Cinzel', 'Times New Roman', Times, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --measure: 34rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--navy-deep); color: var(--ivory); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --- stage ---------------------------------------------------------------- */ .stage { position: relative; flex: 1 0 auto; display: grid; place-items: center; padding: clamp(3rem, 10vh, 7rem) 1.5rem; isolation: isolate; background: radial-gradient(120% 90% at 50% 0%, #162F52 0%, var(--navy) 45%, var(--navy-deep) 100%); } /* Decorative warmth behind the mark. A pseudo-content layer only — it is never in the content flow, so it cannot delay first paint of anything readable. */ .glow { position: absolute; z-index: -1; top: clamp(2rem, 12vh, 8rem); left: 50%; translate: -50% 0; width: min(38rem, 90vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217, 181, 74, 0.16) 0%, rgba(217, 181, 74, 0) 62%); opacity: 0.85; animation: breathe 9s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 0.70; } 50% { opacity: 1; } } .card { width: 100%; max-width: var(--measure); text-align: center; } /* --- identity ------------------------------------------------------------- */ .mark { display: block; width: clamp(6.25rem, 21vw, 10rem); height: auto; margin: 0 auto clamp(1.25rem, 3vw, 1.75rem); } .wordmark { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 11vw, 4.25rem); line-height: 1; letter-spacing: 0.14em; /* the wordmark is set in caps but stored in sentence case so assistive tech reads it as a word rather than spelling it out */ text-transform: uppercase; /* indent compensates for the trailing letter-spacing on the final glyph, which would otherwise push the centred wordmark visibly left */ text-indent: 0.14em; color: var(--gold-100); } @supports (background-clip: text) or (-webkit-background-clip: text) { .wordmark { background: linear-gradient(180deg, #FBEBA8 0%, var(--gold-200) 52%, var(--gold-300) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } } .tagline { margin: clamp(0.75rem, 2vw, 1rem) 0 0; font-size: clamp(0.66rem, 2.6vw, 0.85rem); font-weight: 500; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: var(--gold-200); } /* --- divider (echoes the ornament in the brand lockup) -------------------- */ .divider { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: clamp(2rem, 6vw, 2.75rem) auto; width: min(16rem, 70%); } .divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217, 181, 74, 0) 0%, var(--gold-200) 100%); } .divider__line:last-of-type { background: linear-gradient(90deg, var(--gold-200) 0%, rgba(217, 181, 74, 0) 100%); } .divider__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-200); } /* --- message -------------------------------------------------------------- */ .lede { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 5.2vw, 1.9rem); line-height: 1.35; letter-spacing: 0.01em; color: var(--ivory); /* prevents the orphaned last word this line wraps into at phone widths */ text-wrap: balance; } .sub { margin: 0.9rem auto 0; max-width: 24rem; font-size: clamp(0.94rem, 3.4vw, 1rem); color: rgba(248, 245, 238, 0.72); text-wrap: pretty; } /* --- contact -------------------------------------------------------------- */ .contact { list-style: none; margin: clamp(2rem, 6vw, 2.75rem) 0 0; padding: 0; display: grid; /* small, because each link now carries its own 44px touch padding */ gap: 0.35rem; } .contact__label { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; color: var(--slate-text); } .contact__value { display: inline-block; font-size: clamp(0.98rem, 3.6vw, 1.06rem); color: var(--gold-100); /* Padding (not a border) carries the touch target to >=44px. The rule under the text is text-decoration rather than border-bottom precisely so that growing the hit area cannot drag the underline away from the text. */ padding: 0.7rem 0.75rem 0.65rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(243, 217, 122, 0.3); transition: color 0.2s ease, text-decoration-color 0.2s ease; } .contact__value:hover, .contact__value:focus-visible { color: #FBEBA8; text-decoration-color: var(--gold-100); } :focus-visible { outline: 2px solid var(--gold-100); outline-offset: 4px; border-radius: 2px; } /* --- footer --------------------------------------------------------------- */ .foot { flex-shrink: 0; padding: 1.75rem 1.5rem 2.25rem; text-align: center; background: var(--navy-deep); } .foot p { margin: 0; font-size: 0.78rem; letter-spacing: 0.04em; /* 0.52 is the floor that keeps this 12.5px line at AA (5.1:1) on --navy-deep; the 0.42 it started at measured 3.8:1. */ color: rgba(248, 245, 238, 0.52); } /* --- motion preference ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .glow { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }