/* ========================================================================== Ghostwrights — Design System Dual-mode via [data-theme] on . All colors referenced as variables. ========================================================================== */ /* ---- Tokens -------------------------------------------------------------- */ :root, html[data-theme="dark"] { --bg: #0D0F12; --surface: #14171B; --surface-raised: #191C21; --text: #EDE6D6; --text-secondary: #9A958A; --hairline: #23262B; --accent: #C9A227; --accent-strong: #A8871F; --gold-text: #C9A227; --accent-contrast: #0D0F12; --shadow: 0 24px 60px -24px rgba(0,0,0,0.65); --watermark-opacity: 0.16; --grid-line: rgba(201,162,39,0.08); --hero-glow: radial-gradient(620px 420px at 88% 6%, rgba(201,162,39,0.24), transparent 70%); } html[data-theme="light"] { --bg: #FAFAF7; --surface: #FFFFFF; --surface-raised: #FFFFFF; --text: #14171B; --text-secondary: #6A675E; --hairline: #E7E5DD; --accent: #C9A227; --accent-strong: #A8871F; --gold-text: #A8871F; --accent-contrast: #14171B; --shadow: 0 24px 50px -24px rgba(20,23,27,0.18); --watermark-opacity: 0.11; --grid-line: rgba(168,135,31,0.032); --hero-glow: none; } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } body { background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; color: var(--text); font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, .font-serif { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: clamp(2.25rem, 4.5vw + 1rem, 4rem); font-weight: 480; } h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); } h3 { font-size: 1.25rem; font-weight: 600; font-family: 'Space Grotesk', sans-serif; } p { color: var(--text); } .text-secondary { color: var(--text-secondary); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- Layout ---------------------------------------------------------------- */ .container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; } section { position: relative; padding-block: clamp(56px, 9vw, 108px); overflow: hidden; } .section-tight { padding-block: clamp(40px, 6vw, 72px); } .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 14px; } .section-head { max-width: 640px; margin-bottom: 44px; } .section-head p { margin-top: 14px; font-size: 1.0625rem; color: var(--text-secondary); } /* ghosted oversized watermark numerals behind sections */ .watermark { position: absolute; top: -0.3em; right: -0.04em; font-family: 'Fraunces', serif; font-size: clamp(7rem, 18vw, 15rem); font-weight: 400; color: var(--accent); opacity: var(--watermark-opacity); line-height: 1; pointer-events: none; user-select: none; z-index: 0; } section > .container { position: relative; z-index: 1; } /* ---- Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.01em; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent-strong); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--hairline); } .btn-secondary:hover { border-color: var(--accent); color: var(--gold-text); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---- Trust strip ---------------------------------------------------------------- */ .trust-line { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 0.8125rem; color: var(--text-secondary); } .trust-line span { display: inline-flex; align-items: center; gap: 8px; } .trust-line span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } /* ---- Header ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; } .gw-logo { height: 44px; width: auto; } .gw-logo__wordmark { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.01em; } .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav > ul { display: flex; align-items: center; gap: 2px; } .main-nav a.nav-link { display: inline-flex; align-items: center; padding: 10px 14px; font-size: 0.9rem; font-weight: 500; color: var(--text); border-radius: 8px; transition: color .15s ease, background-color .15s ease; } .main-nav a.nav-link:hover { color: var(--gold-text); } .nav-item-dropdown { position: relative; } .nav-item-dropdown > button.nav-link { display: inline-flex; align-items: center; gap: 6px; font: inherit; } .nav-item-dropdown .chev { width: 9px; height: 9px; transition: transform .15s ease; } .nav-item-dropdown[data-open="true"] .chev { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; } .nav-item-dropdown[data-open="true"] .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 0.875rem; color: var(--text); } .dropdown-menu a:hover { background: var(--bg); color: var(--gold-text); } .dropdown-menu a[aria-current="page"] { color: var(--gold-text); } .header-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); color: var(--text); flex: none; } .theme-toggle:hover { border-color: var(--accent); color: var(--gold-text); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } .nav-toggle { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--hairline); align-items: center; justify-content: center; } .nav-toggle svg { width: 18px; height: 18px; } /* Mobile nav trigger */ @media (max-width: 900px) { .main-nav { display: none; } .nav-toggle { display: inline-flex; } } /* ---- Mobile full-screen menu overlay ---------------------------------------------------------------- */ .mobile-menu { display: none; position: fixed; inset: 0; height: 100dvh; z-index: 200; background: var(--bg); flex-direction: column; } .mobile-menu[data-open="true"] { display: flex; } body.menu-open { overflow: hidden; } .mobile-menu__header { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hairline); min-height: 76px; } .mobile-menu__logo { display: flex; align-items: center; } .mobile-menu__logo .gw-logo { height: 36px; } .mobile-menu__close { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--hairline); color: var(--text); } .mobile-menu__close svg { width: 20px; height: 20px; } .mobile-menu__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px; } .mobile-menu__nav > ul { display: flex; flex-direction: column; } .mobile-menu__link { display: flex; align-items: center; min-height: 44px; padding: 12px 4px; font-size: 1.0625rem; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--hairline); } .mobile-menu__link[aria-current="page"] { color: var(--gold-text); } .mobile-menu__accordion { border-bottom: 1px solid var(--hairline); } .mobile-menu__accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 12px 4px; font: inherit; font-size: 1.0625rem; font-weight: 500; color: var(--text); } .mobile-menu__accordion-trigger .chev { width: 12px; height: 12px; flex: none; transition: transform .2s ease; } .mobile-menu__accordion[data-open="true"] .chev { transform: rotate(180deg); } .mobile-menu__accordion-panel { display: none; flex-direction: column; padding: 0 0 10px 12px; } .mobile-menu__accordion[data-open="true"] .mobile-menu__accordion-panel { display: flex; } .mobile-menu__sublink { display: flex; align-items: center; min-height: 44px; padding: 10px 4px; font-size: 0.9375rem; color: var(--text-secondary); } .mobile-menu__sublink[aria-current="page"] { color: var(--gold-text); } .mobile-menu__footer { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px 24px; border-top: 1px solid var(--hairline); } .mobile-menu__cta { flex: 1; justify-content: center; min-height: 48px; } .mobile-menu__theme-toggle { flex: none; } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding-block: clamp(64px, 11vw, 128px) clamp(48px, 8vw, 96px); overflow: hidden; background-image: var(--hero-glow); } .hero-inner { max-width: 760px; } .hero .eyebrow-strip { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 24px; } .hero h1 { margin-bottom: 22px; } .hero .lede { font-size: 1.1875rem; color: var(--text-secondary); max-width: 620px; margin-bottom: 32px; } .hero .lede em { color: var(--text); font-style: normal; } /* ---- Problem ---------------------------------------------------------------- */ .problem-copy { max-width: 720px; } .problem-copy p { font-size: 1.0625rem; color: var(--text-secondary); margin-top: 16px; } .problem-copy p strong { color: var(--text); font-weight: 600; } .problem-copy .kicker { font-size: 1.0625rem; color: var(--text); margin-top: 20px; } /* ---- Cards / grids ---------------------------------------------------------------- */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s ease, transform .2s ease; } .card:hover { border-color: var(--accent); transform: translateY(-3px); } .card .card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bg); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 4px; } .card .card-icon svg { width: 20px; height: 20px; } .card h3 { font-size: 1.0625rem; } .card p { font-size: 0.9375rem; color: var(--text-secondary); flex: 1; } .card .card-link { font-size: 0.875rem; font-weight: 600; color: var(--gold-text); margin-top: 4px; } .card .card-link:hover { text-decoration: underline; } html[data-theme="light"] .card .card-link { color: #80671A; } .pillar { display: flex; flex-direction: column; gap: 12px; } .pillar .pillar-num { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--gold-text); } .pillar h3 { font-size: 1.125rem; } .pillar p { font-size: 0.9375rem; color: var(--text-secondary); } /* ---- How it works teaser ---------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { padding-top: 20px; border-top: 2px solid var(--hairline); } .step .step-num { font-family: 'Fraunces', serif; font-size: 1.75rem; color: var(--gold-text); display: block; margin-bottom: 10px; } .step h3 { font-size: 1rem; margin-bottom: 6px; } .step p { font-size: 0.9rem; color: var(--text-secondary); } /* ---- Proof strip ---------------------------------------------------------------- */ .proof-strip { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .proof-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .proof-strip p { font-size: 1rem; color: var(--text); max-width: 720px; } .proof-strip .card-link { font-size: 0.9rem; font-weight: 600; color: var(--gold-text); white-space: nowrap; } .proof-strip .card-link:hover { text-decoration: underline; } html[data-theme="light"] .proof-strip .card-link { color: #80671A; } /* ---- CTA banner ---------------------------------------------------------------- */ .cta-banner { background: var(--surface); border: 1px solid var(--hairline); border-radius: 24px; padding: clamp(36px, 6vw, 64px); text-align: center; max-width: 860px; margin-inline: auto; } .cta-banner h2 { margin-bottom: 16px; } .cta-banner p { color: var(--text-secondary); font-size: 1.0625rem; max-width: 620px; margin-inline: auto; margin-bottom: 28px; } .cta-banner .btn-row { justify-content: center; } .cta-banner .trust-line { justify-content: center; } html[data-theme="light"] .cta-banner .eyebrow { color: #80671A; } /* ---- Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hairline); padding-block: 56px 32px; background: var(--bg); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand .gw-logo { height: 40px; margin-bottom: 14px; } .footer-tagline { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 18px; } .footer-brand p.text-secondary { font-size: 0.875rem; max-width: 280px; } .footer-col p.footer-col-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 14px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 0.9rem; color: var(--text); } .footer-col a:hover { color: var(--gold-text); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--hairline); font-size: 0.8125rem; color: var(--text-secondary); } .footer-legal { display: flex; gap: 20px; } .footer-legal a:hover { color: var(--gold-text); } /* ---- Skip link ---------------------------------------------------------------- */ .skip-link { position: absolute; left: -999px; top: auto; background: var(--accent); color: var(--accent-contrast); padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 600; font-size: 0.875rem; } .skip-link:focus { left: 24px; top: 12px; } /* ---- Breadcrumb ---------------------------------------------------------------- */ .breadcrumb { font-size: 0.8125rem; color: var(--text-secondary); padding-top: 22px; position: relative; z-index: 1; } .breadcrumb a { color: var(--text-secondary); } .breadcrumb a:hover { color: var(--gold-text); } .breadcrumb .sep { margin: 0 6px; opacity: 0.5; } /* ---- Sub-page hero ---------------------------------------------------------------- */ .page-hero { padding-block: clamp(40px, 7vw, 76px) clamp(40px, 6vw, 64px); overflow: hidden; } .page-hero-inner { max-width: 720px; } .page-hero h1 { margin-bottom: 18px; } .page-hero .lede { font-size: 1.125rem; color: var(--text-secondary); max-width: 620px; } /* ---- FAQ ---------------------------------------------------------------- */ .faq { margin-top: 8px; } .faq-item { border-top: 1px solid var(--hairline); padding: 22px 0; } .faq-item:last-child { border-bottom: 1px solid var(--hairline); } .faq-item h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.0625rem; font-weight: 600; margin-bottom: 8px; } .faq-item p { font-size: 0.9375rem; color: var(--text-secondary); } /* ---- Detailed process steps (how-it-works) ---------------------------------------------------------------- */ .process { margin-top: 8px; } .process-step { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--hairline); } .process-step:last-child { border-bottom: 1px solid var(--hairline); } .process-step .num { font-family: 'Fraunces', serif; font-size: 1.75rem; color: var(--gold-text); } .process-step h3 { font-size: 1.0625rem; margin-bottom: 8px; } .process-step p { font-size: 0.9375rem; color: var(--text-secondary); } @media (max-width: 560px) { .process-step { grid-template-columns: 1fr; gap: 8px; } } /* ---- Case studies ---------------------------------------------------------------- */ .case-study { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(24px, 3vw, 32px); margin-bottom: 20px; } .case-study .cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tag-badge { font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--text-secondary); } .tag-badge.country { color: var(--gold-text); border-color: var(--gold-text); } .case-study h3 { font-size: 1.1875rem; margin-bottom: 16px; } .cs-block { margin-bottom: 14px; } .cs-block:last-child { margin-bottom: 0; } .cs-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-text); margin-bottom: 4px; } .case-study p { font-size: 0.9375rem; color: var(--text-secondary); } .cs-closing { max-width: 640px; margin-top: 12px; } .cs-closing p { font-size: 1rem; color: var(--text-secondary); } /* ---- Legal prose ---------------------------------------------------------------- */ .legal-content { max-width: 760px; position: relative; z-index: 1; } .legal-updated { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 32px; } .legal-content h2 { font-size: 1.375rem; margin-top: 40px; margin-bottom: 14px; } .legal-content h2:first-of-type { margin-top: 0; } .legal-content p, .legal-content li { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.75; margin-bottom: 14px; } .legal-content ul { list-style: disc; padding-left: 22px; } .legal-content ul li { margin-bottom: 8px; } .legal-content strong { color: var(--text); } .legal-flag { background: var(--surface); border: 1px solid var(--gold-text); border-radius: 12px; padding: 16px 20px; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 32px; } .legal-flag strong { color: var(--gold-text); } /* ---- Contact ---------------------------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 48px; align-items: start; position: relative; z-index: 1; } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } } .form-field { margin-bottom: 20px; } .form-field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.9375rem; transition: border-color .15s ease; } .form-field textarea { min-height: 140px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .form-actions { margin-top: 8px; } .form-note { font-size: 0.875rem; color: var(--text-secondary); margin-top: 20px; } .honeypot-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .contact-sidebar { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 28px; } .contact-sidebar h3 { font-size: 1rem; margin-bottom: 14px; } .contact-sidebar p { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 12px; } .contact-sidebar a.email-link { color: var(--gold-text); font-weight: 600; } .contact-sidebar .pilot-note { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline); } /* ---- Form status messages ---------------------------------------------------------------- */ .form-status { display: none; padding: 14px 16px; border-radius: 10px; font-size: 0.9375rem; margin-bottom: 20px; } .form-status.is-visible { display: block; } .form-status.success { background: var(--surface); border: 1px solid var(--gold-text); color: var(--text); } .form-status.error { background: var(--surface); border: 1px solid #B3453B; color: var(--text); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }