/** * styles.css — 44 North Incorporated * * The look and feel is inherited from the Greetlet design system * ("Quiet Gallery, Living Compass"): a warm-paper ground, one owned accent * (coral), dark "night" bands for the immersive moments, Inter for display * and Source Serif 4 for the card voice. * * RULES (same as the product): * • Never hardcode a colour — reach for a token. * • Text must be legible in BOTH themes; verify light + dark. * • Every interactive control >= 44px touch target. * • Honour prefers-reduced-motion. * * @company 44 North Incorporated * @copyright © 2026 44 North Incorporated. All Rights Reserved. */ /* ===================================================================== 1. TOKENS — the warm-paper palette, lifted from the Greetlet system ===================================================================== */ :root { color-scheme: light; --bg: #FBF7F2; --bg-elev: #FFFFFF; --ink: #1A1714; --ink-soft: #4A4540; --muted: #8B8278; --accent: #E8624A; --accent-soft: #F4B4A6; --divider: rgba(26, 23, 20, 0.08); --edge: rgba(26, 23, 20, 0.16); --surface: #FFFFFF; --on-accent: #FFFFFF; /* The dark "card stage" — theme-invariant, exactly as the product's hero and recipient share page are always dark whatever the visitor's OS is set to. */ --night: #14110E; --on-night: #F2EDE5; --on-night-dim:rgba(242, 237, 229, 0.72); --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff); --accent-surface: color-mix(in srgb, var(--accent) 10%, transparent); --accent-outline: color-mix(in srgb, var(--accent) 34%, transparent); --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06), 0 1px 1px rgba(26, 23, 20, 0.04); --shadow-md: 0 6px 24px rgba(26, 23, 20, 0.10); --shadow-lg: 0 24px 60px rgba(26, 23, 20, 0.18); --shadow-accent: 0 4px 14px rgba(232, 98, 74, 0.30); /* Type */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-body-lg: 17px; --fs-h3: 21px; --fs-h1: clamp(27px, 5vw, 36px); --fs-display: clamp(34px, 7.5vw, 56px); /* Spacing — base 8 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Motion */ --t-snap: 150ms; --t-medium: 300ms; --easing: cubic-bezier(0.16, 0.84, 0.32, 1); --wrap: 1100px; } /* Dark theme — driven by the data-theme attribute the FOUC script stamps on , NOT by the media query alone, so the in-page toggle actually wins. */ [data-theme='dark'] { color-scheme: dark; --bg: #1F1B17; --bg-elev: #2A2521; --ink: #F2EDE5; --ink-soft:#C9C2B8; --muted: #9A9189; --divider: rgba(242, 237, 229, 0.10); --edge: rgba(242, 237, 229, 0.22); --surface: #2A2521; --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30); --shadow-md: 0 6px 24px rgba(0,0,0,0.44); --shadow-lg: 0 24px 60px rgba(0,0,0,0.55); } /* ===================================================================== 2. RESET + BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { font-family: inherit; cursor: pointer; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } .skip-link { position: absolute; left: -9999px; top: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--accent); color: var(--on-accent); border-radius: var(--r-md); font-weight: 600; z-index: 100; } .skip-link:focus { left: var(--sp-4); } .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--sp-5); } /* ===================================================================== 3. TYPOGRAPHY VOCABULARY ===================================================================== */ .display { margin: 0 0 var(--sp-5); font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .h1 { margin: 0 0 var(--sp-4); font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; } .eyebrow { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .eyebrow-on-night { color: var(--on-night-dim); } .lede { margin: 0 auto; max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-body-lg); line-height: 1.55; text-wrap: pretty; } .lede-on-night { color: var(--on-night-dim); } .lede strong { color: var(--ink); font-weight: 600; } .lede-on-night strong { color: var(--on-night); } /* ===================================================================== 4. THE COMPANY LOCKUP ----------------------------------------------------------------------- Two files, swapped by theme. The logo's ink is #1B1B1B, which sits at 1.01:1 against the dark ground — invisible. The dark file carries that ink recoloured to --ink (#F2EDE5) with the orange left alone. The compass mark that used to live here was an inline SVG tinted by currentColor, so it needed no such treatment. A raster lockup cannot be tinted, hence the pair. ===================================================================== */ .company-logo { display: inline-flex; flex-shrink: 0; } .company-logo img { display: block; width: auto; } .company-logo .logo-dark { display: none; } [data-theme='dark'] .company-logo .logo-light { display: none; } [data-theme='dark'] .company-logo .logo-dark { display: block; } .brandbar-logo img { height: 30px; } .footer-logo { justify-content: center; margin: 0 auto var(--sp-3); } .footer-logo img { height: 26px; } /* ===================================================================== 5. BRAND BAR ===================================================================== */ .brandbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); max-width: var(--wrap); margin: 0 auto; padding: 14px var(--sp-5); padding-top: max(14px, env(safe-area-inset-top)); } .brandbar-mark { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .brandbar-names { display: flex; flex-direction: column; min-width: 0; } .brandbar-sub { font-size: var(--fs-caption); color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brandbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); transition: background var(--t-snap) var(--easing), color var(--t-snap) var(--easing); } .theme-toggle:hover { background: var(--divider); color: var(--ink); } .theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; } .theme-toggle .icon-moon { display: none; } [data-theme='dark'] .theme-toggle .icon-sun { display: none; } [data-theme='dark'] .theme-toggle .icon-moon { display: block; } /* ===================================================================== 6. BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 11px 20px; border-radius: var(--r-md); border: 0; font-size: 15px; font-weight: 700; white-space: nowrap; transition: transform var(--t-snap) var(--easing), background var(--t-snap) var(--easing), box-shadow var(--t-snap) var(--easing); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font-size: 14px; padding: 10px 16px; } .btn-ghost:hover { background: var(--accent-surface); } /* On the night stage, where a coral outline would be the third coral thing. */ .btn-quiet { border: 1.5px solid rgba(242, 237, 229, 0.28); background: transparent; color: var(--on-night); } .btn-quiet:hover { border-color: rgba(242, 237, 229, 0.55); } .btn-arrow { transition: transform var(--t-medium) var(--easing); } .btn:hover .btn-arrow, .product-link:hover .btn-arrow { transform: translateX(3px); } /* ===================================================================== 7. BANDS + HERO ===================================================================== */ .band { padding: var(--sp-8) 0; } .band-tight { padding: var(--sp-7) 0; } .night { background: var(--night); color: var(--on-night); } .section-head { text-align: center; margin-bottom: var(--sp-7); } .hero { position: relative; overflow: hidden; padding: clamp(56px, 12vw, 104px) 0 clamp(64px, 13vw, 112px); } .hero-inner { position: relative; z-index: 1; text-align: center; } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); } /* The hero field: a warm compass glow over a quiet waveform, echoing the product's audio visualiser without pretending to be one. */ .hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-glow { position: absolute; left: 50%; top: 42%; width: min(1000px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient( circle, rgba(232, 98, 74, 0.24) 0%, rgba(232, 98, 74, 0.09) 38%, transparent 68% ); } .hero-bars { position: absolute; inset: auto 0 0 0; height: 46%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-inline: var(--sp-2); opacity: 0.5; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, transparent 100%); } .hero-bar { flex: 1 1 auto; max-width: 14px; border-radius: 3px 3px 0 0; background: linear-gradient(to top, rgba(232, 98, 74, 0.55), rgba(232, 98, 74, 0.14)); transform-origin: bottom; animation: bar-breathe 3.6s var(--easing) infinite alternate; } @keyframes bar-breathe { from { transform: scaleY(0.72); } to { transform: scaleY(1.12); } } /* ===================================================================== 8. PRODUCT CARD ===================================================================== */ .product-card { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 48px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--divider); box-shadow: var(--shadow-md); text-align: center; } .product-logo img { height: 46px; width: auto; margin: 0 auto; } .product-logo .logo-dark { display: none; } [data-theme='dark'] .product-logo .logo-light { display: none; } [data-theme='dark'] .product-logo .logo-dark { display: block; } .product-tagline { margin: var(--sp-5) 0 var(--sp-4); font-family: var(--font-serif); font-size: clamp(22px, 3.4vw, 27px); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } .product-body { margin: 0 auto; max-width: 56ch; color: var(--ink-soft); font-size: var(--fs-body-lg); line-height: 1.6; text-wrap: pretty; } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-6); padding: 0; list-style: none; } .chip { padding: 7px 14px; border-radius: var(--r-pill); background: var(--accent-surface); border: 1px solid var(--accent-outline); color: var(--accent); font-size: var(--fs-small); font-weight: 600; } .product-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--accent); font-size: var(--fs-body-lg); font-weight: 700; } .product-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* ===================================================================== 8b. THE LIVING-LINK STAGE ----------------------------------------------------------------------- One wedding link walked through six moments. The card is --night in both themes, matching the product's own share page, which is always dark whatever the visitor's OS is set to. The URL row is the argument the whole device makes: it is pinned above the tabs and never changes while everything below it does. Do not make it react to the active step. Behaviour is main.js §3. Note the panels carry no inline `style` attribute anywhere — the CSP has no 'unsafe-inline' in style-src, so dynamic values are set through the CSSOM from the script instead. ===================================================================== */ .stage { max-width: 880px; margin: 0 auto; border-radius: var(--r-xl); overflow: hidden; background: var(--night); color: var(--on-night); border: 1px solid rgba(242, 237, 229, 0.10); box-shadow: var(--shadow-lg); } /* ── The part that never changes ────────────────────────────────────── */ .stage-url { display: flex; align-items: center; gap: var(--sp-2); padding: 13px clamp(16px, 3vw, 22px); background: rgba(242, 237, 229, 0.05); border-bottom: 1px solid rgba(242, 237, 229, 0.09); font-size: var(--fs-small); } .stage-lock { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--on-night-dim); stroke-width: 1.9; } .stage-url-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; letter-spacing: -0.005em; } .stage-url-text .dim { color: var(--on-night-dim); font-weight: 500; } .stage-pin { flex-shrink: 0; margin-left: auto; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(232, 98, 74, 0.18); color: var(--accent-soft); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; } /* ── The timeline rail ──────────────────────────────────────────────── */ .stage-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding: var(--sp-5) var(--sp-3) var(--sp-2); } .stage-rail::-webkit-scrollbar { display: none; } .stage-tab { position: relative; flex: 1 0 auto; min-width: 124px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 26px 6px 8px; border: 0; background: transparent; color: var(--on-night-dim); scroll-snap-align: center; text-align: center; transition: color var(--t-snap) var(--easing); } .stage-tab:hover { color: var(--on-night); } .stage-tab.is-on { color: var(--on-night); } /* The line the dots sit on. Trimmed to the centre at each end so the timeline starts and stops at the first and last dot, not off-card. */ .stage-tab::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; height: 2px; background: rgba(242, 237, 229, 0.13); } .stage-tab:first-child::before { left: 50%; } .stage-tab:last-child::before { right: 50%; } .stage-tab::after { content: ''; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--night); border: 2px solid rgba(242, 237, 229, 0.30); transition: background var(--t-medium) var(--easing), border-color var(--t-medium) var(--easing), box-shadow var(--t-medium) var(--easing); } .stage-tab.is-done::after { background: rgba(232, 98, 74, 0.55); border-color: transparent; } .stage-tab.is-on::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(232, 98, 74, 0.18); } .stage-when { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-dim); } .stage-what { font-family: var(--font-serif); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } /* ── The part that does change ──────────────────────────────────────── */ /* All six moments are stacked in ONE grid cell, so the card is always as tall as the longest of them and never resizes under the reader mid-step. Doing it this way rather than with a min-height means there is no magic number to re-tune when the copy or the breakpoint changes. */ .stage-panels { display: grid; padding: var(--sp-4) clamp(20px, 4vw, 34px) clamp(22px, 4vw, 30px); } .stage-panel { grid-area: 1 / 1; animation: stage-in 420ms var(--easing) both; } /* Deliberately overriding the UA's `display: none` for [hidden]: the inactive moments have to keep occupying the cell or they cannot hold it open. `visibility: hidden` is what does the hiding, and unlike opacity it takes them out of the accessibility tree and out of tab order too — so the tab / tabpanel contract still holds. */ .stage-panel[hidden] { display: block; visibility: hidden; pointer-events: none; } .stage-panel > p { margin: 0; max-width: 60ch; color: var(--on-night-dim); font-size: var(--fs-body-lg); line-height: 1.6; text-wrap: pretty; } @keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .stage-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; } .stage-chips li { padding: 5px 12px; border-radius: var(--r-pill); background: rgba(242, 237, 229, 0.08); border: 1px solid rgba(242, 237, 229, 0.14); color: var(--on-night); font-size: var(--fs-small); font-weight: 600; } /* The dwell meter for the auto-advance. Driven from main.js §3 and reset to zero the moment a visitor takes over. */ .stage-progress { height: 2px; background: rgba(242, 237, 229, 0.09); } .stage-progress-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; } /* ── The three notes under the stage ────────────────────────────────── */ .notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); } .note { padding: 22px 22px 24px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--divider); box-shadow: var(--shadow-sm); } .note-icon { display: block; font-size: 20px; margin-bottom: var(--sp-2); } .note h3 { margin: 0 0 var(--sp-2); font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; } .note p { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; } /* ===================================================================== 8c. THE BUILDING BLOCKS ===================================================================== */ .starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-7); } .start { padding: 24px 22px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--divider); box-shadow: var(--shadow-sm); text-align: center; } .start-icon { display: block; font-size: 24px; margin-bottom: var(--sp-3); } .start h3 { margin: 0 0 var(--sp-2); font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; } .start p { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; } /* A centred cloud rather than a grid: the count changes as the product grows, and a ragged last row should sit under the middle of the ones above it instead of hanging off to the left. */ .blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .block { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 17px 10px 14px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--divider); box-shadow: var(--shadow-sm); font-size: var(--fs-body); font-weight: 600; } .block-icon { font-size: 16px; line-height: 1; } .closing { margin: var(--sp-7) auto 0; max-width: 64ch; color: var(--ink-soft); font-size: var(--fs-body-lg); line-height: 1.6; text-align: center; text-wrap: pretty; } /* ===================================================================== 9. TILES ===================================================================== */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--sp-4); } .tile { padding: 26px 24px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--divider); box-shadow: var(--shadow-sm); } .tile-icon { display: block; font-size: 22px; margin-bottom: var(--sp-3); } .tile h3 { margin: 0 0 var(--sp-2); font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; } .tile p { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; } /* ===================================================================== 10. MISSION ===================================================================== */ .mission { text-align: center; } .mission blockquote { margin: 0 auto; max-width: 760px; font-family: var(--font-serif); font-style: italic; font-size: clamp(21px, 3.6vw, 31px); line-height: 1.42; color: var(--on-night); text-wrap: pretty; } /* ===================================================================== 11. CONTACT ===================================================================== */ .contact { text-align: center; } .contact-mail { display: inline-block; margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-2) 0; color: var(--accent); font-size: clamp(19px, 3.2vw, 25px); font-weight: 700; letter-spacing: -0.015em; word-break: break-word; } .contact-mail:hover { text-decoration: underline; text-underline-offset: 5px; } .contact-note { margin: 0 auto; max-width: 46ch; color: var(--muted); font-size: var(--fs-body); } .contact-note a { color: var(--ink-soft); text-decoration: underline; } /* ===================================================================== 12. FOOTER ===================================================================== */ .footer { padding: 36px var(--sp-5) 40px; padding-bottom: max(40px, env(safe-area-inset-bottom)); text-align: center; background: var(--bg); border-top: 1px solid var(--divider); color: var(--ink-soft); font-size: var(--fs-caption); line-height: 1.6; } .footer-line { margin: 0 0 6px; } .footer-line a { text-decoration: underline; text-underline-offset: 2px; } .footer-copy { margin: var(--sp-3) 0 0; color: var(--muted); } /* ===================================================================== 13. REVEAL ON SCROLL ===================================================================== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 640ms ease, transform 640ms cubic-bezier(.2,.7,.2,1); } .reveal.is-shown { opacity: 1; transform: none; } /* ===================================================================== 14. RESPONSIVE + MOTION ===================================================================== */ @media (max-width: 560px) { .brandbar-sub { display: none; } .brandbar .btn-ghost { display: none; } .brandbar-logo img { height: 26px; } .hero-cta .btn { width: 100%; } /* The rail scrolls at this width, so the tabs stop stretching to fill and size to their labels instead — main.js keeps the current one centred. */ .stage-tab { flex: 0 0 auto; min-width: 116px; } .stage-panel > p { font-size: var(--fs-body); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* Never leave a revealed section stranded at opacity 0 when the transition that would have shown it has been reduced away. */ .reveal { opacity: 1; transform: none; } }