/* ===================================================================== SC Tee Times — V2 Token System Source of truth: design-system/colors_and_type.css + all 8 approved screens Built: 2026-05-25 (Phase 1b) | Stress-tested + locked: 2026-05-25 Usage: load via in base-v2.njk — NOT via @import. Fonts are loaded separately via in base-v2.njk. V1 templates keep using main.css only. Rules for all V2 component CSS: - Never hardcode hex values. Always use var(--sct-*). - Never use font family strings directly. Always use var(--sct-font-*). - Typescale classes define ONLY font/size/line-height/letter-spacing. Color is set by component CSS, not by typescale class. ===================================================================== */ /* --- Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Remove browser default margin/padding so full-bleed sections work */ body, main { margin: 0; padding: 0; } body { /* Prevent horizontal scroll from overflow issues */ overflow-x: hidden; } /* ======================================================================= TOKENS ======================================================================= */ :root { /* === BRAND CORE ================================================= */ --sct-green-900: #0E2E22; --sct-green-800: #14402F; /* primary brand green — nav, hero, buttons */ --sct-green-700: #1B5239; /* hover / pressed */ --sct-green-600: #2A6A4A; /* secondary surfaces, status */ --sct-green-500: #3F8A63; /* accent on dark, success */ --sct-green-400: #6BAE89; /* hairlines on dark */ --sct-green-300: #A5CCB6; /* muted text on dark */ --sct-green-200: #D2E5DA; --sct-green-100: #E8F1EC; --sct-green-50: #F4F8F5; /* tile hover background */ --sct-gold-900: #6E5410; --sct-gold-800: #8A6914; --sct-gold-700: #A98220; /* primary gold — rule, medal trim, eyebrow */ --sct-gold-600: #C29A37; /* hover, double rule lines */ --sct-gold-500: #D4B25A; /* accent / eyebrow on dark */ --sct-gold-300: #E8D49B; /* muted nav hover */ --sct-gold-100: #F6EDD2; --sct-gold-50: #FBF6E6; /* === NEUTRALS — warm "Linen" grays ============================== */ --sct-ink-900: #15171A; /* primary text */ --sct-ink-800: #22262B; --sct-ink-700: #3A3F46; /* secondary text, summary pill */ --sct-ink-600: #555B63; /* step body copy */ --sct-ink-500: #757B83; /* captions, city subtext, labels */ --sct-ink-400: #9AA0A8; /* placeholder, timestamps, chevrons */ --sct-ink-300: #C7CCD2; /* inactive options, heavy dividers */ --sct-ink-200: #E2E5E9; /* light dividers, mode pair border */ --sct-ink-100: #EFF1F3; --sct-ink-50: #F7F8F9; --sct-linen: #F4F0E6; /* signature warm canvas — page bg */ --sct-linen-deep: #ECE5D2; /* card on canvas, group label bg */ --sct-paper: #FBF8F1; /* cards, search card, step cards */ --sct-white: #FFFFFF; /* === SKELETON COLORS =========================================== */ --sct-skeleton-base: #E8E3D9; --sct-skeleton-shimmer: #EDE8DF; /* === ALPHA OVERLAYS ============================================ */ --sct-overlay-border-xs: rgba(20, 64, 47, 0.04); --sct-overlay-border-sm: rgba(20, 64, 47, 0.06); --sct-overlay-border: rgba(20, 64, 47, 0.08); --sct-overlay-border-md: rgba(20, 64, 47, 0.10); --sct-overlay-border-lg: rgba(20, 64, 47, 0.12); --sct-overlay-border-xl: rgba(20, 64, 47, 0.16); --sct-overlay-border-2xl: rgba(20, 64, 47, 0.18); --sct-overlay-border-3xl: rgba(20, 64, 47, 0.28); --sct-overlay-field-focus: rgba(20, 64, 47, 0.045); --sct-overlay-dark-divider-xs: rgba(255, 255, 255, 0.06); --sct-overlay-dark-divider-sm: rgba(255, 255, 255, 0.18); --sct-overlay-nav-gold: rgba(169, 130, 32, 0.45); /* === STATUS ==================================================== */ --sct-status-open: #2A6A4A; --sct-status-filling: #C29A37; --sct-status-closed: #A23A2A; --sct-status-rain: #4F6B8C; /* === TYPE STACK ================================================ */ --sct-font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; --sct-font-ui: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --sct-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* === RADII ===================================================== */ --sct-radius-xs: 4px; --sct-radius-sm: 8px; --sct-radius-md: 12px; --sct-radius-lg: 18px; --sct-radius-xl: 28px; --sct-radius-full: 9999px; /* === SPACING (4pt grid) ======================================== */ --sct-space-1: 4px; --sct-space-2: 8px; --sct-space-3: 12px; --sct-space-4: 16px; --sct-space-5: 20px; --sct-space-6: 24px; --sct-space-8: 32px; --sct-space-10: 40px; --sct-space-12: 48px; --sct-space-16: 64px; --sct-space-20: 80px; /* === TAP TARGETS =============================================== */ --sct-tap-min: 44px; --sct-btn-height: 48px; --sct-btn-large: 52px; --sct-field-min: 64px; --sct-nav-height: 48px; /* === BREAKPOINTS (documentation only) ========================= */ --sct-bp-sm: 390px; --sct-bp-md: 768px; --sct-bp-lg: 1024px; --sct-bp-xl: 1280px; /* === ELEVATION ================================================= */ --sct-shadow-1: 0 1px 0 rgba(20, 64, 47, 0.06), 0 1px 2px rgba(20, 64, 47, 0.04); --sct-shadow-2: 0 2px 4px rgba(20, 64, 47, 0.06), 0 6px 14px -4px rgba(20, 64, 47, 0.10); --sct-shadow-3: 0 8px 22px -6px rgba(20, 64, 47, 0.18), 0 2px 6px rgba(20, 64, 47, 0.06); --sct-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(20, 64, 47, 0.08); /* === RULES / BORDERS =========================================== */ --sct-rule-fine: 1px solid rgba(20, 64, 47, 0.10); --sct-rule-medium: 1px solid rgba(20, 64, 47, 0.18); --sct-rule-strong: 2px solid var(--sct-green-800); --sct-rule-gold: 1px solid var(--sct-gold-600); /* === Z-INDEX =================================================== */ --sct-z-base: 1; --sct-z-raised: 2; --sct-z-dropdown: 10; --sct-z-nav: 20; --sct-z-sheet: 30; --sct-z-modal: 40; --sct-z-toast: 50; /* === TRANSITIONS =============================================== */ --sct-transition-fast: 120ms ease; --sct-transition-normal: 200ms ease; --sct-transition-slow: 300ms ease; /* === LAYOUT ==================================================== */ --sct-content-max: 1280px; --sct-page-gutter: 16px; --sct-page-gutter-md: 24px; --sct-page-gutter-lg: 32px; } /* ======================================================================= TYPESCALE ======================================================================= */ .sct-type-display { font-family: var(--sct-font-display); font-weight: 700; font-size: clamp(56px, 7.5vw, 112px); line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; } .sct-type-h1 { font-family: var(--sct-font-display); font-weight: 700; font-size: 60px; line-height: 0.94; letter-spacing: -0.005em; text-transform: uppercase; } .sct-type-h1-mobile { font-family: var(--sct-font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; } .sct-type-hero-mobile { font-family: var(--sct-font-display); font-weight: 700; font-size: 40px; line-height: 0.96; letter-spacing: -0.005em; text-transform: uppercase; } .sct-type-h2 { font-family: var(--sct-font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; } .sct-type-nav-item { font-family: var(--sct-font-display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; } .sct-type-h3 { font-family: var(--sct-font-ui); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; } .sct-type-card-name { font-family: var(--sct-font-ui); font-weight: 700; font-size: 16px; line-height: 1.2; } .sct-type-h4 { font-family: var(--sct-font-ui); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: 0; } .sct-type-body { font-family: var(--sct-font-ui); font-weight: 400; font-size: 15px; line-height: 1.55; letter-spacing: 0; } .sct-type-body-lg { font-family: var(--sct-font-ui); font-weight: 400; font-size: 17px; line-height: 1.55; } .sct-type-body-step { font-family: var(--sct-font-ui); font-weight: 400; font-size: 16px; line-height: 1.5; } .sct-type-caption { font-family: var(--sct-font-ui); font-weight: 500; font-size: 12px; line-height: 1.35; letter-spacing: 0.02em; } .sct-type-caption-sm { font-family: var(--sct-font-ui); font-weight: 400; font-size: 11px; line-height: 1.2; } .sct-type-eyebrow { font-family: var(--sct-font-ui); font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; } .sct-type-field-label { font-family: var(--sct-font-ui); font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; } .sct-type-filter-label { font-family: var(--sct-font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .sct-type-group-label { font-family: var(--sct-font-ui); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } .sct-type-tile-time { font-family: var(--sct-font-ui); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .sct-type-tile-et { font-family: var(--sct-font-ui); font-size: 10px; font-weight: 400; letter-spacing: 0.02em; } .sct-type-tile-price { font-family: var(--sct-font-ui); font-weight: 600; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; } .sct-type-tile-meta { font-family: var(--sct-font-ui); font-weight: 400; font-size: 11px; line-height: 1; } .sct-type-mono { font-family: var(--sct-font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0; font-feature-settings: "tnum" 1, "ss01" 1; } .sct-type-quote { font-family: var(--sct-font-ui); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.4; } .sct-type-hero-sub { font-family: var(--sct-font-ui); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.35; } .sct-type-summary { font-family: var(--sct-font-ui); font-size: 13px; line-height: 1.2; } .sct-type-auth-btn { font-family: var(--sct-font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; } /* ======================================================================= CANVAS HELPERS ======================================================================= */ .sct-canvas { background: var(--sct-linen); color: var(--sct-ink-900); } .sct-canvas-paper { background: var(--sct-paper); color: var(--sct-ink-900); } .sct-canvas-dark { background: var(--sct-green-800); color: var(--sct-paper); } .sct-canvas-deeper { background: var(--sct-green-900); color: var(--sct-paper); } /* ======================================================================= DECORATIVE ELEMENTS ======================================================================= */ .sct-rule-double { height: 4px; background: linear-gradient( to bottom, var(--sct-gold-600) 0, var(--sct-gold-600) 1px, transparent 1px, transparent 3px, var(--sct-gold-600) 3px, var(--sct-gold-600) 4px ); } .sct-texture-topo { background-image: radial-gradient(var(--sct-overlay-border-sm) 1px, transparent 1px), radial-gradient(var(--sct-overlay-border-xs) 1px, transparent 1px); background-size: 22px 22px, 13px 13px; background-position: 0 0, 11px 11px; } /* ======================================================================= SKELETON / LOADING STATES ======================================================================= */ @keyframes sct-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .sct-skeleton { background: var(--sct-skeleton-base); background-image: linear-gradient( 90deg, var(--sct-skeleton-base) 0px, var(--sct-skeleton-shimmer) 40px, var(--sct-skeleton-base) 80px ); background-size: 400px 100%; animation: sct-shimmer 1.4s ease-in-out infinite; border-radius: var(--sct-radius-xs); } /* ======================================================================= UTILITY ======================================================================= */ .sct-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sct-tabular { font-variant-numeric: tabular-nums; } .sct-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sct-balance { text-wrap: balance; } .sct-pretty { text-wrap: pretty; }