/* ============================================================ FONT STACK -- read fonts/README.md before changing anything ============================================================ */ /* GFS DIDOT (free) -- active by default Fonts are loaded via in page to reduce render flicker. Remove this note when switching to licensed Didot. */ /* LICENSED DIDOT -- uncomment when font files are in /fonts/ See fonts/README.md for purchase + file format instructions @font-face { font-family: "Didot LT Pro"; src: url("/fonts/DidotLTPro-Roman.woff2") format("woff2"), url("/fonts/DidotLTPro-Roman.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Didot LT Pro"; src: url("/fonts/DidotLTPro-Italic.woff2") format("woff2"), url("/fonts/DidotLTPro-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } */ :root { --navy: #0d1f33; /* slightly warmer, still dark navy */ --cream: #faf5ec; /* warm off-white, not blinding */ --cream-deep: #f2e9d8; --gold: #b8922a; /* slightly deeper gold, better contrast */ --ink: #0d1f33; --muted: #2e3f52; /* 8.5:1 contrast on cream -- WCAG AAA body text */ --muted-soft: rgba(13, 31, 51, 0.55); /* labels, secondary UI only */ --line: rgba(0, 31, 63, 0.14); --line-strong: rgba(0, 31, 63, 0.22); /* Display: licensed Didot first, GFS Didot (free Google version) second, then system fallbacks. When licensed files are installed, the first entry activates automatically -- no other change needed. */ --font-display: "Didot LT Pro", "GFS Didot", "Didot", "Bodoni MT", "Bodoni 72", "Times New Roman", serif; --font-ui: "DM Sans", "Helvetica Neue", Arial, sans-serif; --font-text: "Cormorant Garamond", "Garamond", "Baskerville", serif; } * { box-sizing: border-box; } html { font-size: 24px; /* browser default 16px + 6pt total */ } html, body { margin: 0; padding: 0; } body { background: linear-gradient(rgba(255, 249, 240, 0.97), rgba(255, 249, 240, 0.97)), repeating-linear-gradient( 0deg, rgba(0, 31, 63, 0.015) 0, rgba(0, 31, 63, 0.015) 1px, transparent 1px, transparent 7px ); color: var(--ink); font-family: var(--font-text); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; } /* DEALMAX ANNOUNCEMENT STRIP */ .dealmax-strip { background: var(--navy); border: 1px solid rgba(184, 146, 42, 0.18); display: flex; align-items: center; justify-content: center; gap: 1rem 1.35rem; padding: 0.5rem 1.4rem; flex-wrap: wrap; margin-top: 1rem; } .dealmax-event { font-family: var(--font-ui); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .dealmax-pipe { width: 1px; height: 0.85em; background: rgba(184, 146, 42, 0.35); flex-shrink: 0; } .dealmax-copy { font-family: var(--font-ui); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.04em; color: rgba(250, 245, 236, 0.72); } .dealmax-cta { font-family: var(--font-ui); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(184, 146, 42, 0.38); padding-bottom: 1px; white-space: nowrap; } .dealmax-logo { height: 22px; width: auto; opacity: 0.6; flex-shrink: 0; } .dealmax-cta:hover { color: #e0b84a; border-color: rgba(224, 184, 74, 0.7); } img { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } .site-body { padding: 10px 8px 28px; } .site-shell { width: min(100%, 1180px); margin: 0 auto; } .page-frame { position: relative; background: linear-gradient(180deg, rgba(255, 249, 240, 0.985), rgba(250, 243, 232, 0.985)), var(--cream); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 18, 38, 0.08); padding: 20px 18px 28px; } .page-frame::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(212, 175, 55, 0.14); pointer-events: none; } .topbar, .section-block, .anchor-band, .cta-band, .site-footer, .page-header, .page-grid, .contact-shell, .legal-shell { position: relative; z-index: 1; } .topbar { display: grid; gap: 1rem; justify-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); } .brand-lock { display: grid; gap: 0.25rem; justify-items: center; text-align: center; } .site-tag, .eyebrow, .note-label, .stat-label, .form-note, .footer-links a, .main-nav a, .mini-nav a, .service-links a, .ledger-row span, .signal-note span, .case-label, .contact-card span, .input-label, .text-link, .button-link, .ghost-link { letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-ui); font-variant-caps: normal; } .site-tag { font-size: 0.84rem; font-weight: 600; color: var(--navy); } .eyebrow, .note-label, .form-note, .case-label, .contact-card span, .input-label, .signal-note span, .ledger-row span { font-size: 0.75rem; color: var(--gold); } .main-nav, .footer-links, .mini-nav, .service-links, .contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; } .main-nav a, .footer-links a, .mini-nav a, .service-links a { font-size: 0.78rem; color: var(--muted); padding-bottom: 0.15rem; border-bottom: 1px solid transparent; } .main-nav a:hover, .footer-links a:hover, .mini-nav a:hover, .service-links a:hover, .text-link:hover { color: var(--navy); border-color: rgba(212, 175, 55, 0.5); } .section-block, .page-header, .page-grid, .contact-shell, .legal-shell, .cta-band { padding-top: 3.25rem; } .section-heading, .page-intro, .legal-intro { display: grid; gap: 0.85rem; max-width: 42rem; } .section-heading h2, .page-intro h1, .legal-intro h1, .cta-band h2, .anchor-band h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: 0.95; letter-spacing: 0.012em; color: var(--navy); } .section-heading p, .page-intro p, .legal-copy p, .legal-copy li, .detail-block p, .anchor-band p, .cta-band p, .contact-card p, .contact-form p, .form-note, .signal-note p, .service-card p, .story-card p, .page-card p, .story-beat p, .case-row p, .timeline-item p { font-size: 1.06rem; line-height: 1.72; color: var(--muted); } .text-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--navy); } .button-row, .contact-links { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; align-items: center; } .button-link, .ghost-link { min-height: 44px; min-width: 180px; padding: 0 1.2rem; justify-content: center; align-items: center; display: inline-flex; font-size: 0.78rem; border: 1px solid var(--line-strong); } .button-link { background: var(--navy); color: var(--cream); } .ghost-link { background: transparent; color: var(--navy); } .button-link:hover, .ghost-link:hover { filter: brightness(0.98); } .service-grid, .story-grid, .page-card-grid, .contact-grid, .narrative-block, .signal-strip { display: grid; gap: 1.8rem; margin-top: 2rem; } .service-card, .story-card, .page-card, .detail-block, .contact-card, .narrative-block, .case-row { padding-top: 1.5rem; border-top: 1px solid var(--line); background: none; } .service-card, .story-card, .page-card, .contact-card { display: grid; gap: 0.7rem; } .service-card strong, .story-card strong, .page-card h2, .page-card h3, .contact-card strong, .case-row strong, .detail-block strong { font-family: var(--font-display); font-weight: 500; color: var(--navy); } .service-card strong, .story-card strong, .page-card h2, .page-card h3, .contact-card strong, .case-row strong { font-size: clamp(1.45rem, 4vw, 2.15rem); line-height: 0.98; letter-spacing: 0.01em; } .page-card h2 { max-width: 12ch; } .story-card ul, .legal-copy ul { display: grid; gap: 0.65rem; } .story-card li, .legal-copy li { position: relative; padding-left: 1rem; } .story-card li::before, .legal-copy li::before { content: "•"; position: absolute; left: 0; color: var(--gold); } .page-grid, .contact-grid { display: grid; gap: 2rem; } .detail-block { display: grid; gap: 0.55rem; } .detail-block strong { font-size: 1.45rem; line-height: 1.02; } .narrative-block { gap: 1.4rem; margin-top: 0; } .story-beat { display: grid; gap: 0.65rem; padding-top: 1.35rem; border-top: 1px solid var(--line); } .story-beat:first-child { padding-top: 0; border-top: 0; } .anchor-band { display: grid; gap: 1.2rem; padding: 2rem 1.35rem; margin-top: 3.25rem; background: linear-gradient(180deg, #001a34, #001429); color: var(--cream); border: 1px solid rgba(212, 175, 55, 0.22); } .anchor-band h2 { color: var(--cream); } .anchor-band .eyebrow, .anchor-band .note-label, .anchor-band p, .anchor-band li, .anchor-band a { color: rgba(255, 249, 240, 0.82); } .anchor-band .detail-list li::before { color: rgba(212, 175, 55, 0.78); } .site-footer { display: grid; gap: 0.9rem; justify-items: center; padding-top: 2rem; margin-top: 3.25rem; border-top: 1px solid var(--line); text-align: center; } .footer-note { font-size: 0.84rem; color: var(--muted-soft); letter-spacing: 0.08em; } .contact-form { display: grid; gap: 1rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.34); padding: 1.4rem; } .form-grid { display: grid; gap: 0.85rem; } .field { display: grid; gap: 0.35rem; } .input-label { font-size: 0.74rem; } .field input, .field textarea, .field select { width: 100%; border: 1px solid rgba(0, 31, 63, 0.18); background: rgba(255, 255, 255, 0.56); color: var(--ink); padding: 0.85rem 0.95rem; } .field textarea { min-height: 160px; resize: vertical; } .legal-copy { display: grid; gap: 1.4rem; max-width: 46rem; } .legal-copy section { display: grid; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--line); } .legal-copy section:first-child { padding-top: 0; border-top: 0; } .legal-copy h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 500; line-height: 1; color: var(--navy); } @media (max-width: 680px) { .dealmax-strip { gap: 0.65rem 1rem; padding: 0.55rem 1rem; margin-top: 0.85rem; } .dealmax-logo { display: none; } .dealmax-pipe { display: none; } } @media (min-width: 760px) { .site-body { padding: 1.5rem 1.2rem 2.6rem; } .page-frame { padding: 1.8rem 2rem 2.5rem; } .page-frame::before { inset: 12px; } .topbar { grid-template-columns: auto 1fr; align-items: end; justify-items: stretch; } .brand-lock { justify-items: start; text-align: left; } .main-nav { justify-content: flex-end; align-self: end; } .page-grid { grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr); align-items: start; } .contact-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: start; } .page-card-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .button-row, .contact-links { justify-content: flex-start; } .site-footer { grid-template-columns: 1fr auto auto; justify-items: start; align-items: center; text-align: left; } .footer-links { justify-content: flex-end; } } @media (min-width: 1080px) { .site-body { padding: 1.9rem 1.8rem 3rem; } .page-frame { padding: 2.2rem 2.5rem 2.8rem; } .section-block, .page-header, .page-grid, .contact-shell, .legal-shell, .cta-band { padding-top: 4rem; } .anchor-band { padding: 2.4rem 2rem; } }