/* ───────────────────────────────────────────────────────────── Project Sixty — shared site styles Two themes, driven by a class on : .theme-dark → hero over video (white text) .theme-linen → text pages (linen bg, warm-gray ink) Colors sourced from Figma: linen #ede4e4 · ink #736b6b · hero CTA text #3175a1 ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --linen: #ede4e4; --ink: #736b6b; /* wordmark, nav, headings, CTA fill */ --ink-body: #736b6b; /* body copy — matches the Figma type color (#736b6b). NOTE: ~3.8:1 on linen, below WCAG AA. For AA use #58524f. */ --ink-soft: #9b938f; /* muted labels */ --rule: rgba(115, 107, 107, 0.18); --cta-blue: #3175a1; /* CTA text on the hero */ --max-w: 640px; /* body column (mock doesn't specify — chosen) */ } html, body { width: 100%; min-height: 100%; } body { font-family: 'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--fg); } /* ── Theme tokens ───────────────────────────────── */ body.theme-linen { --bg: var(--linen); --fg: var(--ink); --btn-bg: var(--ink); --btn-fg: #fff; --menu-bg: rgba(255, 255, 255, 0.55); --menu-fg: var(--ink); --menu-hover: rgba(115, 107, 107, 0.12); } body.theme-dark { --bg: #000; --fg: #fff; --btn-bg: #fff; --btn-fg: var(--cta-blue); --menu-bg: rgba(18, 20, 24, 0.34); --menu-fg: #fff; --menu-hover: rgba(255, 255, 255, 0.16); } /* ── Header ─────────────────────────────────────── */ /* Three-column grid keeps the wordmark optically centered while the side clusters align to its vertical center — matches the Figma header, which sits well below the top edge (generous top margin). */ .site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding: clamp(40px, 8vh, 80px) clamp(28px, 6.5vw, 104px) 28px; transition: opacity 0.45s ease, transform 0.45s ease; } /* On the hero, the header floats over the video */ body.theme-dark .site-header { position: fixed; inset: 0 0 auto 0; } .wordmark { justify-self: center; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(24px, 6.5vw, 72px); /* scales linearly with window width */ line-height: 1; letter-spacing: -0.01em; color: var(--fg); text-decoration: none; white-space: nowrap; } /* ── Primary nav (left) ─────────────────────────── */ .nav-left { justify-self: start; display: flex; align-items: center; gap: clamp(36px, 4.5vw, 64px); } .nav-link { position: relative; font-size: 16px; letter-spacing: -0.16px; color: var(--fg); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; transition: opacity 0.2s; } .nav-link:hover { opacity: 0.62; } /* active page marker (the underline under “About”) */ .nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; } /* ── Legal dropdown ─────────────────────────────── */ .legal { position: relative; } .legal__toggle { display: inline-flex; align-items: center; gap: 6px; } .legal__menu { position: absolute; top: calc(100% + 12px); left: -14px; min-width: 128px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--menu-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } /* Invisible bridge across the gap so a hover survives the trip from the "Legal" label down to the menu items. */ .legal__menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .legal.is-open .legal__menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .legal__menu a { font-size: 15px; letter-spacing: -0.15px; color: var(--menu-fg); text-decoration: none; padding: 8px 12px; border-radius: 7px; transition: background 0.15s; } .legal__menu a:hover { background: var(--menu-hover); } /* ── Mobile hamburger nav (hidden on desktop) ───── */ .mobilenav { display: none; position: relative; } .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 30px; height: 30px; padding: 4px; background: none; border: none; cursor: pointer; } .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--fg); transition: transform 0.2s ease, opacity 0.2s ease; } .mobilenav.is-open .hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .mobilenav.is-open .hamburger span:nth-child(2) { opacity: 0; } .mobilenav.is-open .hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .mobilemenu { position: absolute; top: calc(100% + 14px); left: 0; min-width: 190px; display: flex; flex-direction: column; padding: 8px; border-radius: 12px; background: var(--menu-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .mobilenav.is-open .mobilemenu { opacity: 1; transform: translateY(0); pointer-events: auto; } .mobilemenu a { font-size: 16px; letter-spacing: -0.16px; color: var(--menu-fg); text-decoration: none; padding: 11px 12px; border-radius: 7px; transition: background 0.15s; } .mobilemenu a:hover { background: var(--menu-hover); } /* ── Download CTA (right) ───────────────────────── */ .nav-right { justify-self: end; position: relative; /* anchor for the note that hangs below */ display: flex; align-items: center; /* button centers on the header's centerline */ } .download-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; font-size: 16px; font-weight: 500; letter-spacing: -0.16px; white-space: nowrap; /* never wrap to two lines */ color: var(--btn-fg); background: var(--btn-bg); border-radius: 100px; text-decoration: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity 0.2s, transform 0.2s; } .download-btn:hover { opacity: 0.88; } .download-btn:active { transform: translateY(1px); } /* Hangs below the button, centered under it and out of normal flow so opening the Legal menu can never nudge it sideways. */ .cta-note { position: absolute; top: calc(100% + 13px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: -0.12px; color: var(--fg); opacity: 0.9; } /* ── Long-form text pages (linen) ───────────────── */ .doc { max-width: var(--max-w); margin: 0 auto; padding: clamp(40px, 7vw, 88px) 24px 120px; } .page-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; } .doc h1 { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: clamp(25px, 4.2vw, 36px); /* ~30% smaller than the serif title */ font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; } .effective-date { font-size: 13px; color: var(--ink-soft); margin-bottom: 56px; } .doc hr { border: none; border-top: 1px solid var(--rule); margin: 40px 0; } .doc h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 48px; margin-bottom: 16px; } .doc p { font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; color: var(--ink-body); margin-bottom: 16px; } .doc ul, .doc ol { font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; color: var(--ink-body); padding-left: 20px; margin-bottom: 16px; } .doc li { margin-bottom: 8px; } .doc strong { color: var(--ink); font-weight: 600; } .doc a { color: var(--ink); text-underline-offset: 3px; } .doc a:hover { color: var(--ink-body); } /* ── Story (About) ──────────────────────────────── */ .story { max-width: var(--max-w); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 28px 96px; } /* Body copy — matches the Figma type system (Instrument Sans / 400 / #736b6b / -0.01em). Size 15px, line-height 1.6 chosen (mock defines no paragraph). */ .story__body { font-family: 'Instrument Sans', system-ui, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; color: var(--ink-body); } .story__body p + p { margin-top: 1em; } .story__body strong { color: var(--ink); font-weight: 600; } .story__contact { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline; font-family: 'Instrument Sans', sans-serif; font-size: 13px; color: var(--ink-soft); } .story__contact a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; } .story__contact a:hover { text-decoration: underline; } /* ── Footer (linen pages) ───────────────────────── */ .site-footer { max-width: var(--max-w); margin: 0 auto; padding: 32px 24px 48px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-soft); } .site-footer a { color: var(--ink-soft); text-decoration: none; } .site-footer a:hover { color: var(--ink); } /* ── Responsive ─────────────────────────────────── */ /* The header stays a single row at every width; only its contents adapt. */ /* Keep the CTA on one line — shed "for iOS" before it would ever wrap. */ @media (max-width: 800px) { .cta-ios { display: none; } } /* Phone: swap the inline About/Legal for a hamburger; header stays one row. Logo sits left-aligned, 24px right of the hamburger (not centered). */ @media (max-width: 640px) { .site-header { grid-template-columns: auto auto 1fr; /* hamburger · logo · (space) button */ column-gap: 24px; padding: 24px clamp(18px, 5vw, 28px) 20px; } .nav-desktop { display: none; } .mobilenav { display: block; } .wordmark { justify-self: start; } .cta-note { display: none; } .download-btn { height: 40px; padding: 0 18px; font-size: 15px; } } /* ── Cross-page transitions ─────────────────────── */ /* Same-origin cross-document view transitions: a soft, blurred cross-fade so moving between pages feels fluid and almost ethereal. Browsers without support just navigate instantly — graceful, no JS fallback needed. */ @view-transition { navigation: auto; } @keyframes p6-vt-in { from { opacity: 0; filter: blur(8px); transform: scale(1.012); } to { opacity: 1; filter: blur(0); transform: none; } } @keyframes p6-vt-out { from { opacity: 1; filter: blur(0); transform: none; } to { opacity: 0; filter: blur(8px); transform: scale(0.994); } } ::view-transition-old(root) { animation: p6-vt-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; } ::view-transition-new(root) { animation: p6-vt-in 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; } /* The wordmark holds its place while the page behind it dissolves. */ .wordmark { view-transition-name: p6-wordmark; } ::view-transition-group(p6-wordmark) { animation-duration: 0.5s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(p6-wordmark) { animation: none !important; } }