/* ========================================================================== 777cx game — play777cx.pk tokens.css — Design tokens: colour, type, spacing, elevation, motion Light-mode only. Emerald + Gold on soft ivory. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. COLOUR — Base / Surfaces ---------------------------------------------------------------------- */ --c-ivory: #FAF9F6; /* page base */ --c-ivory-deep: #F4F1E9; /* alternating band */ --c-white: #FFFFFF; /* cards, header */ --c-paper: #FCFBF8; /* subtle card wash */ /* Emerald — primary accent */ --c-emerald-900: #033A20; --c-emerald-800: #046A38; /* brand primary */ --c-emerald-700: #0B8457; --c-emerald-600: #12A06B; --c-emerald-100: #E4F1EA; /* tint surface */ --c-emerald-050: #F1F8F4; /* faintest tint */ /* Gold — premium accent */ --c-gold-700: #9A7B14; /* AA-safe gold text on light */ --c-gold-600: #C9A227; --c-gold-500: #D4AF37; /* brand gold */ --c-gold-300: #E8D08A; --c-gold-100: #F7EFD6; --c-gold-050: #FDF9EE; /* Ink / Text */ --c-ink: #10201A; /* headings */ --c-body: #3D4B45; /* body copy */ --c-muted: #66766E; /* secondary copy */ --c-faint: #8C9A93; /* captions */ /* Lines & dividers */ --c-line: #E6E1D5; --c-line-soft: #F0ECE2; --c-line-gold: rgba(212, 175, 55, .38); --c-line-emerald: rgba(4, 106, 56, .14); /* Status */ --c-success: #12A06B; --c-warn: #B4761A; --c-danger: #B3261E; /* ---------------------------------------------------------------------- 2. GRADIENTS ---------------------------------------------------------------------- */ --g-emerald: linear-gradient(135deg, #046A38 0%, #0B8457 52%, #12A06B 100%); --g-emerald-deep: linear-gradient(160deg, #033A20 0%, #046A38 60%, #0B8457 100%); --g-gold: linear-gradient(135deg, #E8D08A 0%, #D4AF37 38%, #C9A227 68%, #E8D08A 100%); --g-gold-soft: linear-gradient(135deg, #FDF9EE 0%, #F7EFD6 100%); --g-ivory: linear-gradient(180deg, #FFFFFF 0%, #FAF9F6 100%); --g-hairline: linear-gradient(90deg, transparent, var(--c-gold-500), transparent); --g-sheen: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.62) 48%, transparent 66%); /* ---------------------------------------------------------------------- 3. TYPOGRAPHY ---------------------------------------------------------------------- */ --f-display: "Outfit", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --f-body: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid type scale (mobile-first, clamps to desktop) */ --t-hero: clamp(2.35rem, 1.30rem + 4.5vw, 4.35rem); --t-h1: clamp(2.05rem, 1.35rem + 3.0vw, 3.40rem); --t-h2: clamp(1.70rem, 1.22rem + 2.0vw, 2.65rem); --t-h3: clamp(1.28rem, 1.08rem + 0.85vw, 1.72rem); --t-h4: clamp(1.08rem, 0.99rem + 0.40vw, 1.28rem); --t-lead: clamp(1.03rem, 0.97rem + 0.32vw, 1.20rem); --t-body: clamp(0.985rem, 0.95rem + 0.16vw, 1.06rem); --t-small: 0.905rem; --t-tiny: 0.795rem; --t-micro: 0.715rem; --lh-tight: 1.08; --lh-snug: 1.28; --lh-normal: 1.60; --lh-loose: 1.78; --ls-tight: -0.022em; --ls-normal: 0; --ls-wide: 0.06em; --ls-caps: 0.16em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---------------------------------------------------------------------- 4. SPACING (8pt base with fluid section rhythm) ---------------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 104px; --section-y: clamp(56px, 3.4rem + 3.2vw, 108px); --block-gap: clamp(28px, 1.6rem + 1.8vw, 56px); /* ---------------------------------------------------------------------- 5. LAYOUT — deliberately generous left/right breathing room ---------------------------------------------------------------------- */ --container: 1180px; --container-wide: 1340px; --container-text: 760px; --gutter: clamp(20px, 6.2vw, 92px); /* outer blank space */ --header-h: 78px; --header-h-sm: 64px; /* ---------------------------------------------------------------------- 6. RADII ---------------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ---------------------------------------------------------------------- 7. ELEVATION — soft, paper-like ---------------------------------------------------------------------- */ --e-0: none; --e-1: 0 1px 2px rgba(16, 32, 26, .05), 0 2px 8px rgba(16, 32, 26, .04); --e-2: 0 2px 6px rgba(16, 32, 26, .06), 0 10px 24px rgba(16, 32, 26, .06); --e-3: 0 4px 12px rgba(16, 32, 26, .07), 0 18px 44px rgba(16, 32, 26, .09); --e-4: 0 10px 24px rgba(16, 32, 26, .09), 0 30px 70px rgba(16, 32, 26, .12); --e-gold: 0 6px 20px rgba(201, 162, 39, .28), 0 2px 6px rgba(201, 162, 39, .18); --e-emerald: 0 8px 26px rgba(4, 106, 56, .22); --e-inset-gold: inset 0 0 0 1px rgba(212, 175, 55, .40); /* ---------------------------------------------------------------------- 8. MOTION ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(.22, .78, .34, 1); --ease-inout: cubic-bezier(.65, .02, .28, 1); --ease-spring:cubic-bezier(.34, 1.42, .48, 1); --d-fast: 160ms; --d-base: 280ms; --d-slow: 520ms; --d-reveal: 780ms; /* ---------------------------------------------------------------------- 9. Z-INDEX SCALE ---------------------------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 500; --z-drawer: 700; --z-fab: 800; --z-modal: 900; --z-skip: 1000; /* ---------------------------------------------------------------------- 10. COMPONENT TOKENS ---------------------------------------------------------------------- */ --logo-w: 200px; /* master logo width — crop maths keys off this */ --logo-w-sm: 156px; --logo-w-footer: 224px; --device-w: clamp(238px, 23vw, 306px); --focus-ring: 0 0 0 3px var(--c-white), 0 0 0 5.5px var(--c-emerald-700); } /* Reduced-motion users: collapse durations, keep layout identical */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; } }