/* ========================================================================== Travelogue — design tokens Values only. No selectors beyond :root. Every value is justified in DESIGN.md §2; change it there first, then here. ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------ Two reds, and the difference matters. #F92029 is sampled from the client logo. White text on it measures 3.99:1, which fails WCAG AA for normal text (PRD §32 requires AA). #E11019 measures 4.90:1 and is visually indistinguishable to a visitor. So: --tg-red is for the logo, display type, icon fills and graphic shapes that carry no small text. Anything with a label on it uses --tg-red-ink. --------------------------------------------------------------------- */ --tg-red: #F92029; --tg-red-ink: #E11019; --tg-red-deep: #B0141A; --tg-red-wash: #FEF1F1; /* The brand red on a dark ground reaches only 4.27:1, and small uppercase type is exactly where that shows. Eight per cent toward white takes it to 4.50 without reading as a different colour. PRD 32. */ --tg-red-on-dark: #F9323A; /* --- Neutrals --------------------------------------------------------- True neutral. No warm cast, no blue cast. The site is white; cream and beige were rejected. #767676 is the lightest grey that still passes AA on white (4.54:1). Nothing lighter may carry text. --------------------------------------------------------------------- */ --tg-ink: #141414; --tg-ink-2: #4A4A4A; /* #767676 came to 4.24:1 on the tinted section, just under AA. This is the lightest grey that clears 4.5 there. PRD 32. */ --tg-ink-3: #717171; --tg-line: #E4E4E4; --tg-surface: #FFFFFF; /* Sparing use only: at most two sections per page, never two adjacent. The default answer for any new section is white. */ --tg-surface-2: #F7F7F7; /* --- Chalkboard ------------------------------------------------------- The activity board — DESIGN.md §1. Used in exactly one place on the site. Nothing else may adopt this treatment. --------------------------------------------------------------------- */ --tg-board: #1C1C1C; --tg-board-2: #2A2A2A; --tg-chalk: #EDEDED; --tg-chalk-dim: #9A9A9A; /* --- Type ------------------------------------------------------------- */ --tg-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --tg-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Sized against the reference travel template the client bought, which runs h1 to 72px and h2 to 58px. The earlier scale topped out at 44px, and that one difference is most of why the page read as ordinary: on a photo-led travel site, large type IS the design. */ --tg-h1: clamp(2.25rem, 5.6vw, 4.5rem); /* 36 -> 72 */ --tg-h2: clamp(2rem, 4.4vw, 3.625rem); /* 32 -> 58 */ --tg-h3: clamp(1.25rem, 2.2vw, 1.5rem); /* 20 -> 24 */ --tg-lead: clamp(1rem, 1.6vw, 1.125rem); /* 16 -> 18 */ --tg-body-size: 1.0625rem; /* 17px. This is an informative site; 15px is too small for the reading it asks for. */ --tg-small: 0.9375rem; /* 15px */ --tg-eyebrow: 0.8125rem; /* 13px */ --tg-lh-body: 1.6; --tg-lh-heading: 1.06; --tg-track-tight: -0.03em; --tg-track-wide: 0.12em; /* Long-form is the point. Cap the measure and keep it comfortable. */ --tg-measure: 68ch; /* --- Space ------------------------------------------------------------ */ --tg-1: 4px; --tg-2: 8px; --tg-3: 12px; --tg-4: 16px; --tg-5: 24px; --tg-6: 32px; --tg-7: 48px; --tg-8: 64px; --tg-9: 96px; --tg-10: 128px; /* Section rhythm. Sections are separated by space and a hairline, never by alternating background colours. */ --tg-section-y: var(--tg-8); --tg-card-shadow: 0 32px 64px -12px rgba(0, 0, 0, .15); /* --- Containers ------------------------------------------------------- */ --tg-gutter: 20px; --tg-w-text: 680px; /* no paragraph runs wider than this, ever */ --tg-w-content: 1200px; --tg-w-bleed: 1440px; /* --- Radius ----------------------------------------------------------- Softer than the original 12px cap. That cap came from a general rule that over-rounded cards read as generated. True for SaaS, wrong for travel: the reference template the client bought uses 24px and 32px throughout and reads as premium, not templated. --------------------------------------------------------------------- */ --tg-r-sm: 12px; /* inputs, chips, small media */ --tg-r-md: 24px; /* cards */ --tg-r-lg: 32px; /* hero and large media blocks */ --tg-r-pill: 999px; /* badges, nav pills, buttons */ /* --- Elevation -------------------------------------------------------- Borders and space before shadows. This shadow is for the sticky mobile booking bar and open dropdowns only. --------------------------------------------------------------------- */ --tg-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06); /* --- Motion ----------------------------------------------------------- MOTION_INTENSITY 5. Scroll reveals plus one signature moment. --------------------------------------------------------------------- */ /* One curve for the whole site. The reference templates use cubic-bezier(0.16, 1, 0.3, 1) forty-eight times and nothing else: a hard ease-out that arrives fast and settles. The softer curve used before is most of why the motion read as limp. */ --tg-ease: cubic-bezier(.16, 1, .3, 1); --tg-dur-fast: .18s; --tg-dur: .4s; --tg-dur-slow: .8s; --tg-stagger: .07s; /* --- Overlay ---------------------------------------------------------- Only where text sits on a photo. Photos are otherwise untinted. --------------------------------------------------------------------- */ --tg-photo-scrim: linear-gradient(to top, rgba(0, 0, 0, .72), transparent 60%); } @media (min-width: 1024px) { :root { --tg-gutter: 44px; --tg-section-y: 100px; } }