/* ========================================================================== 01-TOKENS.CSS — THE ONLY FILE WITH RAW VALUES IN IT -------------------------------------------------------------------------- Every colour, font size, spacing step, radius and animation speed used anywhere on this site is defined here as a CSS custom property. If you want to change how the site looks, change it HERE and nowhere else. No other CSS file contains a hex code or a raw pixel colour. ========================================================================== */ :root { /* ------------------------------------------------------------------ SURFACES — warm paper, never pure white ------------------------------------------------------------------ */ --cream: #FDFBF5; /* page background (matches the logo background) */ --cream-deep: #F6F1E4; /* alternating section wash — reserved for later sections */ --surface: #FFFFFF; /* cards, the desktop menu panel */ /* ------------------------------------------------------------------ BRAND ORANGE — sampled from the logo ribbon ------------------------------------------------------------------ */ --orange: #F26A21; /* primary brand orange */ --orange-bright: #F7941D; /* ribbon highlight / gradient start */ --orange-deep: #D9531E; /* ribbon shadow / gradient end, hover state */ --amber: #F59E0B; /* Amber Minimal accent — glows, subtle fills */ --amber-wash: #FEF3E2; /* tinted wash — the feature icon tiles sit on this */ --amber-wash-deep: rgba(245, 158, 11, 0.18); /* ...and deepen to this on hover */ /* ------------------------------------------------------------------ INK — the wordmark black is warm, not neutral ------------------------------------------------------------------ */ --ink: #14110F; /* headings */ --ink-soft: #4A4341; /* body copy */ --ink-muted: #6F6763; /* captions, meta, small labels — 5.34:1 on cream (WCAG AA pass). NOTE: the original brief specified #8A817C here, but that only reaches 3.68:1 against the cream background and fails the 4.5:1 accessibility floor. Darkened so muted TEXT stays readable. */ --ink-faint: #8A817C; /* the original lighter tone — DECORATION ONLY, never text. Used for the scroll-cue chevron, which carries no information. */ /* ------------------------------------------------------------------ TEXT ON COLOURED BACKGROUNDS ------------------------------------------------------------------ */ --on-brand: #FFFFFF; /* label colour sitting on the orange CTA */ /* ------------------------------------------------------------------ LINES, GRADIENTS & SHADOWS ------------------------------------------------------------------ */ --hairline: rgba(20, 17, 15, 0.08); --hairline-strong: rgba(20, 17, 15, 0.14); --ink-wash: rgba(20, 17, 15, 0.04); /* faint tint behind the secondary button on hover */ --orange-ring: rgba(242, 106, 33, 0.10); /* soft halo around an active step number */ --brand-gradient: linear-gradient(135deg, var(--orange-bright) 0%, var(--orange) 55%, var(--orange-deep) 100%); --glow-amber: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0) 68%); --shadow-sm: 0 1px 2px rgba(20, 17, 15, 0.04), 0 2px 8px rgba(20, 17, 15, 0.04); --shadow-md: 0 4px 12px rgba(20, 17, 15, 0.06), 0 12px 32px rgba(20, 17, 15, 0.07); --shadow-cta: 0 4px 14px rgba(242, 106, 33, 0.24), 0 10px 30px rgba(242, 106, 33, 0.18); --shadow-cta-hover: 0 6px 18px rgba(242, 106, 33, 0.30), 0 16px 40px rgba(242, 106, 33, 0.22); /* ------------------------------------------------------------------ GLASS — the navbar's translucent background at each scroll state. These are pre-mixed rgba versions of --cream. If you change --cream, change these three to match. ------------------------------------------------------------------ */ --nav-glass: rgba(253, 251, 245, 0.55); /* top of page */ --nav-glass-scrolled: rgba(253, 251, 245, 0.72); /* after the hero */ --nav-glass-solid: rgba(253, 251, 245, 0.92); /* fallback where blur is unsupported */ --nav-blur: blur(16px) saturate(160%); /* ------------------------------------------------------------------ THE TWO LIGHT SWEEPS (the signature motion moment, and its small echo) ------------------------------------------------------------------ */ --gloss-wordmark: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0) 62%); --gloss-cta: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 70%); /* ------------------------------------------------------------------ MENU OVERLAY ------------------------------------------------------------------ */ --menu-backdrop: rgba(20, 17, 15, 0.28); /* ------------------------------------------------------------------ SOCIAL BRAND COLOURS — each mark keeps its own real colour ------------------------------------------------------------------ */ --social-facebook: #1877F2; --social-youtube: #FF0000; --social-pinterest: #E60023; --social-whatsapp: #25D366; --social-email: #EA4335; --ig-1: #F58529; /* Instagram official gradient, 45deg, four stops */ --ig-2: #DD2A7B; --ig-3: #8134AF; --ig-4: #515BD4; /* ------------------------------------------------------------------ TYPOGRAPHY — three faces, one job each ------------------------------------------------------------------ */ --font-display: 'Playfair Display', Georgia, serif; /* hero wordmark + future headings */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* everything functional */ --font-eyebrow: 'Montserrat', system-ui, sans-serif; /* small uppercase labels only */ /* Fluid scale — these grow with the screen, so type needs no media queries */ --fs-hero: clamp(2.75rem, 9.5vw, 7rem); --fs-h2: clamp(1.9rem, 4vw, 3rem); --fs-lead: clamp(1rem, 1.05vw + 0.82rem, 1.1875rem); --fs-body: 1rem; --fs-nav: 0.9375rem; --fs-eyebrow: clamp(0.6875rem, 0.9vw, 0.8125rem); --fs-menu-link: clamp(1.75rem, 5vw, 2.25rem); --fs-menu-link-short: 1.25rem; /* menu links when the screen is very short (landscape phone) */ --fs-brand: clamp(1rem, 2.2vw, 1.1875rem); /* "Ever Invites" in the navbar */ --fs-cta: 1rem; --fs-marquee: clamp(1.25rem, 3.2vw, 2.25rem); /* the coming-soon ticker items */ --fs-card-title: clamp(1.375rem, 2.2vw, 1.75rem); /* a template's name on its card */ --fs-price: clamp(1.125rem, 1.8vw, 1.375rem); /* what a template costs now */ --fs-price-was: 0.9375rem; /* ...and what it cost before */ --fs-offer: 0.75rem; /* "50% off — festive offer" */ --fs-step-title: clamp(1.25rem, 2.4vw, 1.625rem); /* "Choose Your Template" etc. */ --fs-step-num: 1.125rem; /* the 1 / 2 / 3 inside the circles */ --fs-feature-title: clamp(1.0625rem, 1.6vw, 1.25rem); /* "Done For You" etc. */ --fs-feature-body: 0.9375rem; /* a feature card's paragraph */ --fs-faq-question: clamp(1rem, 1.5vw, 1.125rem); /* an FAQ question */ --fs-faq-closing: clamp(1.125rem, 2vw, 1.375rem); /* "Still have a question?" */ --fs-subscribe: clamp(1.125rem, 2vw, 1.375rem); /* "Get new templates..." */ --fs-footer-blurb: 0.9375rem; /* the line about the business */ --fs-footer-small: 0.8125rem; /* copyright, note, bottom links */ --lh-tight: 1.05; --lh-body: 1.75; --ls-eyebrow: 0.22em; --ls-offer: 0.08em; /* the small uppercase offer line on a template card */ --ls-wordmark: -0.015em; --measure: 68ch; /* body copy never runs wider than this */ /* ------------------------------------------------------------------ SPACING ------------------------------------------------------------------ */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 7rem; /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container: 1200px; --container-narrow: 780px; --card-max: 880px; /* reserved — no longer used by the template row */ --templates-max: 1000px; /* the row of template previews, capped and centred */ --phone-w: 300px; /* how wide a phone mockup renders */ --phone-col-min: 260px; /* narrowest a template column may get, which is what caps the row at three across */ --phone-w-sm: 240px; /* ...on a small phone screen */ --phone-ratio: 251 / 480; /* the trimmed picture's real shape, used by the placeholder so a missing image does not change the height of the row */ --process-max: 760px; /* the How It Works steps never grow wider than this */ --features-max: 1040px; /* the feature card grid never grows wider than this */ --faq-max: 820px; /* the FAQ list never grows wider than this */ --footer-max: 1100px; /* the footer never grows wider than this */ --subscribe-max: 520px; /* the subscribe box, centred inside it */ --measure-blurb: 40ch; /* the one line about the business */ --gutter: clamp(1.25rem, 5vw, 3rem); /* The How It Works rail — the left-hand column holding the numbered circles and the connecting line. The line's position is worked out FROM --rail-w, so changing the rail width at a breakpoint moves the line with it and the two can never drift apart. */ --rail-w: 56px; --circle-size: 48px; --rail-line: 2px; --measure-step: 58ch; /* step body copy never runs wider than this */ --measure-feature: 70ch; /* the wide feature card's copy stops well short of the edge */ --tile-size: 44px; /* the rounded square behind a feature icon */ --tile-icon: 22px; /* the icon drawn inside it */ --tile-social: 40px; /* the circular tile behind a footer social mark */ --tile-social-lg: 44px; /* ...grown on small screens, to stay easy to tap */ --glyph-social: 18px; /* the mark drawn inside it */ --measure-answer: 62ch; /* an FAQ answer never runs wider than this */ --faq-row-min: 56px; /* every FAQ row is at least this tall to tap */ --faq-icon: 20px; /* the + / − at the end of a row */ --wa-glyph: 18px; /* the WhatsApp mark inside the chat button */ --nav-h: 72px; /* navbar height, desktop */ --nav-h-mobile: 60px; /* navbar height, mobile */ --panel-w: 420px; /* slide-in menu width, desktop */ --tap: 44px; /* minimum tap target — never go below this */ --mark-h: 24px; /* logo mark height, mobile */ --mark-h-lg: 28px; /* logo mark height, desktop */ --burger-w: 20px; /* hamburger line width */ --burger-bar: 1.5px; /* hamburger line thickness */ --burger-gap: 5px; /* space between hamburger lines */ --social-size: 22px; /* social icon glyph size */ --social-gap: 4px; /* 44px tap targets + 4px = icon centres exactly 48px apart */ --btn-h-card: 48px; /* minimum height of the buttons on a template card */ --star-size: 14px; /* the sparkle between ticker items */ --star-size-sm: 12px; /* ...on a template card's offer line */ --star-size-lg: 32px; /* ...on a missing-image placeholder */ --rule-w: 48px; /* length of the hairlines flanking an eyebrow label */ --rule-w-section: 40px; /* ...slightly shorter on section headings than in the hero */ --anchor-offset: 88px; /* stops the fixed navbar covering a heading when you jump to it */ /* ------------------------------------------------------------------ SHAPE ------------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 14px; --radius-pill: 999px; /* ------------------------------------------------------------------ MOTION ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* the house easing — use everywhere */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 180ms; --dur-base: 340ms; --dur-slow: 700ms; --dur-sweep: 1600ms; /* the one-off ribbon-light sweep across the hero wordmark */ --delay-sweep: 400ms; --stagger: 90ms; /* gap between each item in the page-load sequence */ --stagger-menu: 55ms; /* gap between each menu link as the panel opens */ --stagger-icon: 80ms; /* how far a feature's icon trails its own card */ /* How long the coming-soon ticker takes to complete one full loop. Bigger number = slower, calmer scroll. This is the one dial to turn if the speed ever feels wrong. The mobile value is in 99-responsive.css. */ --marquee-duration: 42s; /* ------------------------------------------------------------------ TEXTURE ------------------------------------------------------------------ */ --grain-opacity: 0.025; /* set to 0 to remove the paper grain entirely */ }