/* ========================================================================== Zephyr marketing site — design tokens & shared styles Dark, premium, Linear/Superhuman-class. Fixed dark theme by design. ========================================================================== */ :root { /* Surfaces */ --bg: #08090b; --bg-alt: #0d1015; --surface: #151a20; --surface-2: #1b212b; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); /* Text */ --text: #f3f5f7; --text-muted: rgba(243, 245, 247, 0.6); --text-faint: rgba(243, 245, 247, 0.46); /* Accents */ --mint: #74ddb4; --mint-hover: #8ce6c3; --mint-wash: rgba(116, 221, 180, 0.12); --brass-from: #8ce6c3; --brass-to: #5fc49c; --on-brass: #08090b; --indigo: #f3f5f7; --indigo-wash: rgba(243, 245, 247, 0.1); --amber: #f2925e; --amber-wash: rgba(242, 146, 94, 0.12); --coral: #f2925e; --coral-wash: rgba(242, 146, 94, 0.12); --ember: #f2925e; --ember-hover: #f5a67a; /* Brand only: the mark, the app icon, the favicon. Never a control, never text, never a border — mint is the interface, cyan is the brand, and putting cyan on a button collapses the distinction. */ --cyan: #5acbde; /* Type */ --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; /* Shape */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Shadow — restrained, single soft layer */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.6); --max-width: 1120px; color-scheme: dark; } @media (prefers-reduced-motion: no-preference) { :root { --transition: 160ms cubic-bezier(0.2, 0, 0, 1); } } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* The page ground lives on so body::before (the fixed ambient layer, further down) paints above it rather than behind body's own background. */ html { background-color: var(--bg); } body { margin: 0; background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; } /* ---------- Focus states (accessibility) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--mint); color: #06110d; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; z-index: 200; transition: top var(--transition); } .skip-link:focus { top: 1rem; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 640px) { .wrap { padding-inline: 2rem; } } .section { padding-block: clamp(3.5rem, 7vw, 6.5rem); } .section-border { border-top: 1px solid var(--border); } .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mint); font-weight: 500; } .section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 600; letter-spacing: -0.01em; margin-top: 0.6rem; line-height: 1.2; } .section-head p { margin-top: 0.9rem; color: var(--text-muted); font-size: 1.05rem; max-width: 56ch; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.3rem; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.95rem; line-height: 1; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); white-space: nowrap; } .btn-primary { background: var(--mint); color: var(--on-brass); } .btn-primary:hover { background: var(--mint-hover); } .btn-secondary { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover { border-color: var(--mint); color: var(--mint-hover); } .btn-ghost { background: transparent; color: var(--text-muted); padding-inline: 0.25rem; } .btn-ghost:hover { color: var(--text); } .btn-block { width: 100%; } /* ========================================================================== Header / nav ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; /* The bar carries its own warm gradient in the same corner rather than being made transparent, so the ambient light appears to continue through it while nav text keeps a fully opaque ground — no text ghosting through from the content scrolling underneath. Deliberately not backdrop-filter: that would leave legibility depending on a blur some engines skip. */ background-color: #08090c; background-image: radial-gradient( 54% 420% at 100% 0%, rgba(206, 66, 24, 0.30) 0%, rgba(198, 58, 20, 0.10) 42%, rgba(193, 68, 14, 0) 76% ); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text); } /* The mark is the D-032 app mark, drawn inline as SVG so the site and the app render the same logo. Geometry lives in the markup, not here. */ .wordmark-mark { width: 28px; height: 28px; flex-shrink: 0; } .nav-links { display: none; align-items: center; gap: 2rem; } .nav-links a { font-size: 0.92rem; color: var(--text-muted); transition: color var(--transition); } .nav-links a:hover { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav-actions .btn-secondary { display: none; } /* Below ~480px the header CTA, the wordmark and the menu button stop fitting on one row (the bar needs 364px of content plus breathing room). The mobile menu carries the same CTA, so drop it from the bar rather than cramping it. */ @media (max-width: 479px) { .nav-actions .btn-primary { display: none; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); } @media (min-width: 900px) { .nav-links { display: flex; } .nav-toggle { display: none; } .nav-actions .btn-secondary { display: inline-flex; } } .mobile-menu { display: none; border-top: 1px solid var(--border); padding: 1rem 0 1.25rem; } .mobile-menu.is-open { display: block; } .mobile-menu a { display: block; padding: 0.65rem 0; color: var(--text-muted); font-size: 0.98rem; } .mobile-menu a:hover { color: var(--text); } .mobile-menu .btn { margin-top: 0.5rem; } @media (min-width: 900px) { .mobile-menu { display: none !important; } } /* ========================================================================== Hero ========================================================================== */ .hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 480px; background: radial-gradient( 50% 50% at 50% 0%, rgba(217, 180, 65, 0.06) 0%, rgba(217, 180, 65, 0) 70% ); pointer-events: none; } .hero-grid { position: relative; display: grid; gap: 3rem; align-items: center; } @media (min-width: 980px) { .hero-grid { grid-template-columns: 1fr 0.92fr; gap: 2rem; } } .hero-copy h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; max-width: 15ch; } .hero-copy .eyebrow { margin-bottom: 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem; } .hero-copy .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); } .hero-sub { margin-top: 1.25rem; font-size: 1.1rem; color: var(--text-muted); max-width: 46ch; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } .hero-proof { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .hero-proof div { min-width: 120px; } .hero-proof strong { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; } .hero-proof span { font-size: 0.82rem; color: var(--text-muted); } /* ---------- Phone mockup ---------- */ .hero-visual { display: flex; justify-content: center; } .phone { width: min(340px, 100%); aspect-ratio: 375 / 780; background: #0c0e12; border-radius: 42px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; padding: 14px; position: relative; } .phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; background: #05060a; border-radius: 12px; z-index: 5; } .phone-screen { height: 100%; width: 100%; background: var(--bg-alt); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; position: relative; border: 1px solid rgba(255, 255, 255, 0.04); } .phone-statusbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 4px; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); } .phone-body { flex: 1; padding: 18px 16px 14px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; } .phone-greeting .eyebrow { font-size: 0.62rem; } .phone-greeting h3 { font-size: 1.15rem; font-weight: 600; margin-top: 0.3rem; letter-spacing: -0.01em; } .attention-counts { display: flex; gap: 0.5rem; } .attention-chip { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px; text-align: center; } .attention-chip strong { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.1; } .attention-chip span { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-family: var(--font-mono); } .attention-chip.overdue strong { color: var(--coral); } .attention-chip.today strong { color: var(--amber); } .attention-chip.waiting strong { color: var(--indigo); } .priority-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 13px 14px; position: relative; } .priority-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--coral); } .priority-card .tag { font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--coral); } .priority-card h4 { font-size: 0.92rem; font-weight: 600; margin-top: 4px; line-height: 1.3; } .priority-card p { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; } .priority-card .cta { display: inline-flex; margin-top: 10px; font-size: 0.72rem; font-weight: 600; color: var(--mint); background: var(--mint-wash); padding: 5px 10px; border-radius: 7px; } .mini-list { display: flex; flex-direction: column; gap: 8px; } .mini-list-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 2px; } .mini-item { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; } .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dot.p-high { background: var(--coral); } .dot.p-med { background: var(--amber); } .dot.p-low { background: var(--indigo); } .dot.p-done { background: var(--mint); } .mini-item .body { flex: 1; min-width: 0; /* Title and meta are spans; stack them rather than letting them run together. */ display: grid; gap: 1px; } .mini-item .title { font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-item .meta { font-size: 0.66rem; color: var(--text-muted); } .phone-tabbar { display: flex; justify-content: space-around; align-items: center; padding: 10px 8px 16px; border-top: 1px solid var(--border); background: var(--bg-alt); } .tab-icon { width: 20px; height: 20px; border-radius: 6px; background: var(--surface); } .tab-icon.active { background: var(--mint); } .tab-fab { width: 30px; height: 30px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; color: var(--on-brass); font-weight: 700; font-size: 16px; margin-top: -14px; box-shadow: 0 4px 14px rgba(123, 216, 188, 0.35); } /* ========================================================================== Pillars ========================================================================== */ .pillars-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); } } .pillar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; transition: border-color var(--transition), transform var(--transition); } .pillar-card:hover { border-color: var(--border-strong); } .pillar-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .pillar-icon.mint { background: var(--mint-wash); color: var(--mint); } .pillar-icon.indigo { background: var(--indigo-wash); color: var(--indigo); } .pillar-icon.amber { background: var(--amber-wash); color: var(--amber); } .pillar-card h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; } .pillar-card p { margin-top: 0.6rem; color: var(--text-muted); font-size: 0.95rem; } /* ========================================================================== How it works ========================================================================== */ .steps { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding: 1.5rem 1.25rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .step-number { font-family: var(--font-mono); font-size: 0.75rem; color: var(--mint); border: 1px solid var(--border-strong); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .step h3 { font-size: 1rem; font-weight: 600; } .step p { margin-top: 0.5rem; font-size: 0.88rem; color: var(--text-muted); } .steps-connector { display: none; } @media (min-width: 760px) { .step:not(:last-child)::after { content: ""; position: absolute; top: 2.65rem; right: -0.65rem; width: 0.9rem; height: 1px; background: var(--border-strong); } } .approval-note { margin-top: 2rem; display: flex; gap: 0.9rem; align-items: flex-start; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius); padding: 1.1rem 1.25rem; } .approval-note .glyph { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--mint-wash); color: var(--mint); display: flex; align-items: center; justify-content: center; } .approval-note p { font-size: 0.92rem; color: var(--text-muted); } .approval-note strong { color: var(--text); } /* ========================================================================== Audience strip ========================================================================== */ .audience { background: var(--bg-alt); } .audience-head { text-align: center; max-width: 620px; margin-inline: auto; } .audience-head h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 600; letter-spacing: -0.01em; } .role-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 2rem; } .role-chip { border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.85rem; color: var(--text-muted); background: var(--surface); } /* ========================================================================== Pricing ========================================================================== */ .pricing-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { /* Four cards, so the grid goes 1 -> 2 -> 4. It deliberately skips three: at four cards, a three-column row would leave one card orphaned on a line of its own, which reads as a mistake rather than a plan. */ .pricing-grid { grid-template-columns: repeat(4, 1fr); } } .price-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; position: relative; } .price-card.featured { border-color: var(--mint); background: linear-gradient(180deg, rgba(123, 216, 188, 0.07), var(--surface) 40%); box-shadow: 0 0 0 1px rgba(123, 216, 188, 0.25); } /* The Team card advertises a plan that does not exist yet. It has to be legible enough to signal intent to someone evaluating for a team, and visibly inert enough that nobody believes they can buy it today — hence the dashed edge and the muted contents, rather than a card that merely lacks the featured treatment. */ .price-card-soon { border-style: dashed; background: transparent; } .price-card-soon .price-tier, .price-card-soon .price-amount, .price-card-soon .price-features { opacity: 0.62; } .price-badge-soon { background: transparent; color: var(--text-faint); border: 1px dashed var(--border); } .price-badge { position: absolute; top: -0.7rem; left: 1.4rem; background: var(--mint); color: var(--on-brass); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.28rem 0.6rem; border-radius: 999px; } .price-tier { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); } .price-card.featured .price-tier { color: var(--mint-hover); } .price-amount { margin-top: 0.6rem; display: flex; align-items: baseline; gap: 0.35rem; } .price-amount .num { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; } .price-amount .period { font-size: 0.85rem; color: var(--text-muted); } .price-note { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.25rem; } .price-features { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; } .price-features li { display: flex; gap: 0.55rem; font-size: 0.87rem; color: var(--text-muted); align-items: flex-start; } .price-features li svg { flex-shrink: 0; margin-top: 3px; color: var(--mint); } .price-card .btn { margin-top: 1.6rem; } .pricing-fineprint { margin-top: 1.75rem; font-size: 0.8rem; color: var(--text-faint); text-align: center; } /* ========================================================================== Audit teaser ========================================================================== */ .audit-teaser { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-xl); padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 2rem; align-items: center; } @media (min-width: 860px) { .audit-teaser { grid-template-columns: 1.1fr 0.9fr; } } .audit-teaser h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.01em; margin-top: 0.6rem; } .audit-teaser p { margin-top: 0.9rem; color: var(--text-muted); max-width: 52ch; } .audit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 0.75rem; } .audit-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; } .audit-stat strong { display: block; font-size: 1.5rem; font-weight: 600; color: var(--mint); } .audit-stat span { font-size: 0.75rem; color: var(--text-muted); } /* ========================================================================== FAQ ========================================================================== */ .faq-list { max-width: 760px; border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { cursor: pointer; list-style: none; padding: 1.35rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 500; font-size: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; position: relative; } .faq-item .icon::before, .faq-item .icon::after { content: ""; position: absolute; background: var(--text-muted); transition: transform var(--transition); } .faq-item .icon::before { width: 9px; height: 1px; } .faq-item .icon::after { width: 1px; height: 9px; } .faq-item[open] .icon::after { transform: scaleY(0); } .faq-item .a { padding-bottom: 1.35rem; color: var(--text-muted); font-size: 0.95rem; max-width: 62ch; } /* ========================================================================== CTA band ========================================================================== */ .cta-band { border-top: 1px solid var(--border); text-align: center; padding-block: clamp(3.5rem, 7vw, 6rem); } .cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -0.01em; max-width: 24ch; margin-inline: auto; } .cta-band p { margin-top: 0.9rem; color: var(--text-muted); } .cta-band .hero-ctas { justify-content: center; } /* ========================================================================== Footer ========================================================================== */ .site-footer { border-top: 1px solid var(--border); padding-block: 3rem 2.5rem; background: var(--bg-alt); } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } } .footer-brand p { margin-top: 0.9rem; color: var(--text-muted); font-size: 0.88rem; max-width: 32ch; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.9rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { font-size: 0.9rem; color: var(--text-muted); } .footer-col a:hover { color: var(--text); } .footer-bottom { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.8rem; color: var(--text-faint); } /* ========================================================================== Simple / legal pages ========================================================================== */ .page-hero { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; border-bottom: 1px solid var(--border); } .page-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.01em; } .page-hero p { margin-top: 0.75rem; color: var(--text-muted); } .draft-flag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); background: var(--amber-wash); border: 1px solid rgba(227, 164, 85, 0.35); padding: 0.4rem 0.75rem; border-radius: 999px; margin-bottom: 1.25rem; } .legal-body { max-width: 760px; padding-block: clamp(2rem, 4vw, 3rem) 4rem; } .legal-body h2 { font-size: 1.2rem; font-weight: 600; margin-top: 2.25rem; letter-spacing: -0.01em; } .legal-body h2:first-child { margin-top: 0; } .legal-body p, .legal-body li { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.75rem; } .legal-body ul { padding-left: 1.1rem; } .legal-body li { list-style: disc; margin-top: 0.4rem; } .legal-body a { color: var(--mint); } .legal-body a:hover { color: var(--mint-hover); } /* ========================================================================== Audit page ========================================================================== */ .audit-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; } .audit-hero h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 600; letter-spacing: -0.02em; max-width: 20ch; } .audit-hero p { margin-top: 1rem; color: var(--text-muted); max-width: 56ch; font-size: 1.05rem; } .privacy-note { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.5rem; padding: 0.9rem 1.1rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); max-width: 56ch; } .privacy-note .glyph { flex-shrink: 0; color: var(--mint); margin-top: 2px; } .privacy-note p { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .audit-tool { display: grid; gap: 1.5rem; padding-block: 1.5rem 4rem; } @media (min-width: 900px) { .audit-tool { grid-template-columns: 1fr 1fr; align-items: start; } } .audit-panel { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem; } .audit-panel h2 { font-size: 1.05rem; font-weight: 600; } .audit-panel .hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4rem; } #audit-input { width: 100%; /* Textareas carry an intrinsic minimum from their `cols`; without this a narrow phone gets a horizontally scrolling page. */ min-width: 0; margin-top: 1.1rem; min-height: 260px; resize: vertical; background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: 0.92rem; padding: 0.9rem 1rem; line-height: 1.55; } #audit-input::placeholder { color: var(--text-faint); } .audit-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } .audit-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); } .audit-actions { display: flex; gap: 0.6rem; } .result-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.25rem; } .result-stat { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius); padding: 0.9rem 1rem; } .result-stat strong { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; } .result-stat span { font-size: 0.76rem; color: var(--text-muted); } .result-stat.overdue strong { color: var(--coral); } .result-stat.actions strong { color: var(--indigo); } .result-stat.deadlines strong { color: var(--amber); } .result-stat.effort strong { color: var(--mint); } .result-detail { margin-top: 1.25rem; } .result-detail h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.6rem; } .finding-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.1rem; } .finding { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.85rem; } .finding .dot { margin-top: 6px; } .finding .tag { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); text-transform: uppercase; display: block; } .audit-empty { color: var(--text-faint); font-size: 0.88rem; margin-top: 1rem; text-align: center; padding: 2rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); } .audit-cta { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .audit-cta p { font-size: 0.85rem; color: var(--text-muted); max-width: 34ch; } .audit-method { margin-top: 0.75rem; } .audit-method summary { cursor: pointer; font-size: 0.82rem; color: var(--mint); } .audit-method .a { margin-top: 0.7rem; font-size: 0.82rem; color: var(--text-muted); } .audit-method .a p + p { margin-top: 0.5rem; } /* ========================================================================== Expanded site — navigation, content pages, blog, help centre Everything below is shared by the feature, blog, help, legal and company pages. Same tokens, same dark ground; no new dependencies. ========================================================================== */ /* ---------- Active nav state ---------- */ .nav-links a.is-active { color: var(--text); } .nav-links a.is-active::after { content: ""; display: block; height: 1px; margin-top: 4px; background: var(--mint); } .mobile-menu a.is-active { color: var(--text); } /* ---------- Narrow reading column ---------- */ .wrap-narrow { max-width: 760px; } /* ---------- Breadcrumbs ---------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: clamp(1.75rem, 4vw, 2.5rem); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--text-faint); } .crumbs a { color: var(--text-muted); transition: color var(--transition); } .crumbs a:hover { color: var(--text); } .crumb-sep { color: var(--text-faint); } /* ---------- Page hero additions ---------- */ .page-hero .eyebrow { display: block; margin-bottom: 0.7rem; } .page-hero p { max-width: 62ch; font-size: 1.05rem; } .page-hero .hero-ctas { margin-top: 1.5rem; } .page-hero.no-rule { border-bottom: 0; } /* Give anchored headings room under the sticky header. */ :target { scroll-margin-top: 6rem; } /* ---------- Generic card grid ---------- */ .card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } .card-grid.cols-2 { grid-template-columns: 1fr; } @media (min-width: 760px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } .ui-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; transition: border-color var(--transition), transform var(--transition); } a.ui-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .ui-card h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .ui-card p { margin-top: 0.6rem; color: var(--text-muted); font-size: 0.95rem; } .card-more { display: inline-block; margin-top: 1rem; font-size: 0.85rem; color: var(--mint); font-weight: 500; } /* ---------- Two-column split block ---------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse > *:first-child { order: 2; } } .split h2, .split h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -0.01em; margin-top: 0.6rem; line-height: 1.25; } .split p { margin-top: 0.9rem; color: var(--text-muted); } /* ---------- Checkmark feature list ---------- */ .feature-list { display: grid; gap: 0.85rem; margin-top: 1.5rem; } /* Block layout with an absolutely-positioned marker, deliberately not flex: a flex row would make every inline / its own flex item and blow the list's min-content width past the grid track that holds it. */ .feature-list li { position: relative; padding-left: 1.85rem; color: var(--text-muted); font-size: 0.95rem; overflow-wrap: anywhere; } .feature-list li::before { content: ""; position: absolute; left: 0; width: 18px; height: 18px; top: 0.2rem; border-radius: 999px; background-color: var(--mint-wash); border: 1px solid rgba(217, 180, 65, 0.35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' stroke='%23d9b441' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; } .feature-list li strong { color: var(--text); font-weight: 600; } /* ---------- Callouts ---------- */ .callout { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--mint); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-top: 1.75rem; } .callout p { color: var(--text-muted); font-size: 0.95rem; } .callout p + p { margin-top: 0.7rem; } .callout strong { color: var(--text); font-weight: 600; } .callout.ember { border-left-color: var(--ember-hover); } .callout .glyph { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--mint-wash); color: var(--mint); } .callout.ember .glyph { background: var(--coral-wash); color: var(--ember-hover); } /* ---------- Status note ---------- */ .status-note { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 1rem 1.15rem; color: var(--text-muted); font-size: 0.9rem; background: rgba(255, 255, 255, 0.015); } .status-note strong { color: var(--text); font-weight: 600; } .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-wash); } /* ---------- Stat row ---------- */ .stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; } @media (min-width: 800px) { .stat-row { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.15rem 1.25rem; } .stat strong { display: block; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 500; color: var(--mint); letter-spacing: -0.01em; } .stat span { display: block; margin-top: 0.4rem; color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; } /* ---------- Pill row ---------- */ .pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; } .pill { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--text-muted); border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0.4rem 0.85rem; } /* ---------- Comparison table ---------- */ .table-scroll { overflow-x: auto; margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); } .compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; } .compare-table th, .compare-table td { text-align: left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); vertical-align: top; } .compare-table thead th { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; background: rgba(255, 255, 255, 0.02); } .compare-table tbody th { font-weight: 500; color: var(--text); width: 34%; } .compare-table td { color: var(--text-muted); } .compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; } .compare-table .yes { color: var(--mint); } .compare-table .no { color: var(--text-faint); } .table-note { margin-top: 0.9rem; color: var(--text-faint); font-size: 0.82rem; } /* ---------- Prose (blog posts, help articles) ---------- */ .prose { padding-block: clamp(2rem, 4vw, 3rem) 4rem; font-size: 1.02rem; line-height: 1.72; color: rgba(245, 245, 250, 0.78); } .prose > * + * { margin-top: 1.15rem; } .prose h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-top: 2.75rem; line-height: 1.3; } .prose h3 { font-size: 1.08rem; font-weight: 600; color: var(--text); margin-top: 2rem; } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--mint-hover); } .prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.6rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li::marker { color: var(--text-faint); } .prose blockquote { margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--mint); color: var(--text); font-size: 1.1rem; line-height: 1.55; } .prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0.1rem 0.35rem; color: var(--indigo); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } .prose .figure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; font-size: 0.95rem; } .prose .figure h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-bottom: 0.8rem; } /* ---------- Table of contents ---------- */ .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; } .toc h2 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin: 0 0 0.8rem; } .toc ol { list-style: none; padding: 0; display: grid; gap: 0.45rem; margin: 0; } .toc a { color: var(--text-muted); text-decoration: none; font-size: 0.92rem; } .toc a:hover { color: var(--text); } /* ---------- Blog ---------- */ .post-list { display: grid; gap: 1rem; padding-block: clamp(2rem, 4vw, 3rem) 0; } .post-card { display: block; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem 1.75rem; transition: border-color var(--transition), transform var(--transition); } .post-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .post-card h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.65rem; line-height: 1.3; } .post-card p { margin-top: 0.65rem; color: var(--text-muted); font-size: 0.96rem; max-width: 68ch; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); } .post-meta .post-tag { color: var(--mint); } .post-meta .sep { opacity: 0.5; } .post-header { padding-block: clamp(1.5rem, 3vw, 2.25rem) 1.75rem; border-bottom: 1px solid var(--border); } .post-header h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.18; margin-top: 0.8rem; } .post-header .standfirst { margin-top: 1rem; color: var(--text-muted); font-size: 1.08rem; max-width: 62ch; } .post-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .post-nav { display: grid; gap: 1rem; margin-top: 1.5rem; } @media (min-width: 700px) { .post-nav { grid-template-columns: repeat(2, 1fr); } } /* ---------- Help centre ---------- */ .help-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; padding-block: clamp(2rem, 4vw, 3rem) 0; } @media (min-width: 760px) { .help-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .help-grid { grid-template-columns: repeat(3, 1fr); } } .help-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem; } .help-card h2 { font-size: 1.02rem; font-weight: 600; margin-top: 0.9rem; } .help-card p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.92rem; } .help-card ul { margin-top: 1rem; display: grid; gap: 0.5rem; } .help-card ul a { color: var(--text-muted); font-size: 0.92rem; transition: color var(--transition); } .help-card ul a:hover { color: var(--mint); } .help-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--mint-wash); color: var(--mint); } /* ---------- Contact ---------- */ .contact-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; padding-block: clamp(2rem, 4vw, 3rem) 0; } @media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } .contact-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem 1.75rem; } .contact-card h2 { font-size: 1.05rem; font-weight: 600; margin-top: 0.85rem; } .contact-card p { margin-top: 0.55rem; color: var(--text-muted); font-size: 0.94rem; } .contact-card .mail { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.88rem; color: var(--mint); word-break: break-all; } .contact-card .mail:hover { color: var(--mint-hover); } /* ---------- Store badges ---------- */ .store-badges { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; } .store-badge { display: inline-flex; align-items: center; gap: 0.7rem; border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius); padding: 0.7rem 1.1rem; min-height: 56px; color: var(--text-faint); cursor: not-allowed; } .store-badge .label { display: grid; line-height: 1.25; } .store-badge .label small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; } .store-badge .label span { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); } /* ---------- Roadmap timeline ---------- */ .timeline { display: grid; gap: 0; margin-top: 2rem; border-left: 1px solid var(--border); padding-left: 1.75rem; } .timeline-item { position: relative; padding-bottom: 2.25rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: calc(-1.75rem - 5px); top: 6px; width: 9px; height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); } .timeline-item.done::before { background: var(--mint); border-color: var(--mint); } .timeline-item.next::before { background: var(--ember-hover); border-color: var(--ember-hover); } .timeline-item h3 { font-size: 1.02rem; font-weight: 600; margin-top: 0.4rem; } .timeline-item p { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.94rem; max-width: 68ch; } .phase-state { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .timeline-item.done .phase-state { color: var(--mint); } .timeline-item.next .phase-state { color: var(--ember-hover); } /* ---------- Footer additions ---------- */ .footer-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem !important; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } /* ---------- 404 ---------- */ .notfound { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; } .notfound .code { font-family: var(--font-mono); font-size: 3rem; color: var(--mint); letter-spacing: -0.02em; } .notfound h1 { margin-top: 0.75rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; } .notfound p { margin-top: 0.9rem; color: var(--text-muted); max-width: 46ch; margin-inline: auto; } .notfound .hero-ctas { justify-content: center; margin-top: 1.75rem; } /* ---------- Grid items must be allowed to shrink ---------- A grid item's automatic minimum is its min-content width, which lets one long word, a mailto address or a textarea widen the whole track and push the page into horizontal scroll. Every multi-column container here opts out. */ .split > *, .card-grid > *, .hero-grid > *, .contact-grid > *, .help-grid > *, .pricing-grid > *, .audit-tool > *, .audit-teaser > *, .stat-row > *, .post-nav > * { min-width: 0; } /* Long, unbreakable strings (email addresses, URLs) must wrap rather than widen their container. */ .prose, .ui-card p, .callout p, .status-note, .timeline-item p, .split p { overflow-wrap: break-word; } /* The audit's three buttons don't fit on one row on a small phone. */ .audit-actions, .audit-controls, .hero-ctas, .store-badges { flex-wrap: wrap; } /* ========================================================================== Ambient corner light A fixed layer behind every page: blood-orange light bleeding in from the top-right corner, with the Zephyr mark silhouetted inside it as a shadow. position:fixed means it stays put while content scrolls over it, and it is painted below everything (z-index -1) and ignores pointer events, so it can never intercept a click. ========================================================================== */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; /* Topmost layer first: the mark reads as a shadow because it is drawn in the page ground colour — visible only where the light behind it lifts the surrounding pixels, and invisible everywhere else. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cg stroke='%23090909' stroke-opacity='0.82' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 7.2H15.4L8.6 16.8H20.4'/%3E%3Cpath d='M17.6 12H12.4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient( 42% 38% at 100% 6%, rgba(255, 132, 68, 0.32) 0%, rgba(255, 132, 68, 0) 76% ), radial-gradient( 94% 80% at 103% 2%, rgba(198, 58, 20, 0.46) 0%, rgba(190, 56, 18, 0.22) 34%, rgba(184, 53, 17, 0.08) 58%, rgba(180, 52, 16, 0) 84% ); /* The mark clears the sticky header (74px tall) rather than sitting half behind it, so the whole silhouette reads. */ background-position: right -56px top 96px, 0 0, 0 0; background-size: min(30vw, 340px) min(30vw, 340px), 100% 100%, 100% 100%; } /* A phone has no clear band between the header and the headline, so the mark has to share space with the copy. It gets smaller and a softer stroke there (0.5 rather than 0.82) so it reads as texture behind the words instead of competing with them. */ @media (max-width: 700px) { body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cg stroke='%23090909' stroke-opacity='0.5' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 7.2H15.4L8.6 16.8H20.4'/%3E%3Cpath d='M17.6 12H12.4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient( 46% 30% at 100% 4%, rgba(255, 132, 68, 0.28) 0%, rgba(255, 132, 68, 0) 76% ), radial-gradient( 104% 56% at 103% 1%, rgba(198, 58, 20, 0.42) 0%, rgba(190, 56, 18, 0.18) 36%, rgba(180, 52, 16, 0) 84% ); background-position: right -38px top 80px, 0 0, 0 0; background-size: 150px 150px, 100% 100%, 100% 100%; } } /* Printing a page of gradient is a waste of ink and hurts legibility. */ @media print { body::before { display: none; } }