/* ========================================================================== Plunk.io — warm-editorial design system (see MAIN-DESIGN.md) Cream canvas · oversized radii · circular-portrait constellation · floating pill nav · ink-black CTAs · Sofia Sans. ========================================================================== */ /* ---- Tokens ------------------------------------------------------------- */ :root { /* Surfaces */ --canvas: #F3F0EE; /* warm putty canvas — never pure white */ --lifted: #FCFBFA; /* paper-on-paper raised sections */ --white: #FFFFFF; --ink: #141413; /* warm near-black: CTAs, headings, footer */ --charcoal: #262627; --slate: #696969; /* muted secondary text */ --dust: #D1CDC7; /* whisper text / hairlines */ --ghost: #E8E2DA; /* cream-on-cream watermark headlines */ /* Accent — SWITCHABLE. Default = doc orange. Alternative = Digital auburn via . */ --accent: #CF4500; /* Signal Orange */ --accent-light: #F37338; /* Light Signal Orange — arcs, indicators */ /* Type */ --font: 'Sofia Sans', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Radii — small / button / hero-stadium / pill */ --r-sm: 6px; --r-btn: 20px; --r-stadium: 40px; --r-pill: 999px; /* Spacing (8px base) */ --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; /* Elevation — atmospheric, never hard */ --shadow-nav: rgba(0, 0, 0, 0.04) 0px 4px 24px 0px; --shadow-lift: rgba(0, 0, 0, 0.08) 0px 24px 48px 0px; --container: 1280px; --gutter: 48px; } :root[data-accent="auburn"] { --accent: #b85c3f; /* Digital auburn */ --accent-light: #cf7a5c; } /* ---- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; overflow-x: clip; /* guard against stray horizontal overflow (decorative bleed, long headings) on mobile — clip is sticky-safe */ font-family: var(--font); font-weight: 450; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; } h1, .h1-scale { font-size: clamp(40px, 6vw, 72px); line-height: 1.0; } /* Visual H1 scale without claiming the H1 semantic — for section headlines that read at hero size but aren't the document's top-level heading. */ .h1-scale { white-space: normal; } /* wrap freely — nowrap ran headings off-screen on mobile */ h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.12; } h3 { font-size: 24px; line-height: 1.2; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } main { margin-bottom: 64px; } .section { padding-block: clamp(64px, 11vw, 64px); } .section.constellation { padding-top: 192px; } .section--lifted { background: var(--lifted); } /* ---- Eyebrow (dot + uppercase tracking) --------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; padding: 14px 26px; border-radius: var(--r-btn); border: 1.5px solid var(--ink); cursor: pointer; transition: transform 120ms ease, background 160ms ease, color 160ms ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--ink); color: var(--canvas); } .btn--primary:hover { background: #000; } .btn--secondary { background: var(--white); color: var(--ink); } .btn--secondary:hover { background: var(--ink); color: var(--canvas); } .btn svg { width: 16px; height: 16px; } /* Satellite micro-CTA — white circle with arrow, docks on a portrait */ .satellite { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lift); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .satellite svg { width: 20px; height: 20px; } /* ---- Floating pill nav -------------------------------------------------- */ .nav-wrap { position: sticky; top: 24px; z-index: 100; padding-inline: var(--gutter); animation: nav-slide-down 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.6s both; /* slide in on load — all widths */ } .nav { display: flex; position: relative; align-items: center; gap: 32px; max-width: var(--container); margin-inline: auto; padding: 14px 16px 14px 28px; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-radius: var(--r-pill); box-shadow: var(--shadow-nav); } .nav__logo img { height: 26px; width: auto; } .nav__links { display: flex; gap: 36px; margin: 0 auto 0 16px; padding: 0; list-style: none; } .nav__links a { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); transition: color 160ms ease; } .nav__links a:hover { color: var(--accent); } .nav__cta { padding: 10px 22px; } .nav__toggle { display: none; } .nav__only-mobile { display: none; } /* a "Request a demo" entry shown only in the mobile dropdown */ /* ---- Nav overlaid on media-hero pages (home) ---------------------------- Fixed at all widths so it stays pinned while scrolling and overlays the hero video. Slides in on load via the .nav-wrap animation above. */ .has-media-hero .nav-wrap { position: fixed; top: 24px; left: 0; right: 0; } @keyframes nav-slide-down { from { transform: translateY(calc(-100% - 32px)); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .nav-wrap { animation: none; } } /* Wide container — the media frame breaks past the nav's width (1280), but caps so it isn't edge-to-edge on large screens. */ .container--wide { max-width: 1500px; padding-inline: clamp(24px, 3.5vw, 40px); } /* Card-style container: paper-on-paper lifted surface with oversized radius. Used to lift a single section into a card rather than tinting the whole section-band background. */ .container--card { background: var(--lifted); border-radius: 92px; padding-block: clamp(64px, 8vw, 120px); padding-inline: clamp(40px, 6vw, 96px); } /* ---- Hero — wide media frame (video placeholder), text below ------------ */ .hero--media { padding-block: 16px 0; } .hero__media { position: relative; height: 840px; /* fixed — fills most of a typical screen, does not shrink with the window */ border-radius: clamp(40px, 6vw, 88px); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--ink); /* solid fallback; the hero