/* ============================================================================= HEXADU — Colors & Type The visual foundation for a moody-purple, gold-piece puzzle game. ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR — PURPLE FOUNDATION The world of Hexadu lives in deep, slightly magenta-leaning purples. Surfaces ladder from near-black-indigo to luminous violet. ---------------------------------------------------------------------------*/ --hx-bg-deep: #120726; /* darkest — app background, edges, vignette */ --hx-bg: #1c0d3a; /* default background — most screens */ --hx-bg-raised: #2a1452; /* cards, sheets, raised surfaces */ --hx-bg-elevated: #3a1f6e; /* dialogs, popovers, top sheets */ --hx-surface-hi: #4d2a8f; /* the lit edge / inner top of pieces */ --hx-violet: #7a3fc8; /* primary brand violet */ --hx-violet-soft: #9a6ad9; /* lighter violet for borders, inactive */ --hx-pink: #d166e8; /* pinkish accent — sparkles, particles */ --hx-pink-soft: #f0a8ff; /* lightest pink — highlights, glows */ /* --------------------------------------------------------------------------- COLOR — GOLD / AMBER (the pieces themselves) The hexagon coins are warm, almost honey-yellow with deep amber shadows. ---------------------------------------------------------------------------*/ --hx-gold-hi: #ffe48a; /* the brightest specular highlight */ --hx-gold: #ffb627; /* base gold — pieces, score, CTAs */ --hx-gold-mid: #f59300; /* mid-tone — gradient anchor */ --hx-gold-deep: #c47a0b; /* deep amber — piece outline, deep shadow */ --hx-gold-shadow: #7a4500; /* the absolute darkest amber — under pieces */ /* --------------------------------------------------------------------------- COLOR — SEMANTIC STATES Used sparingly. The world is purple; states are subtle accents. ---------------------------------------------------------------------------*/ --hx-success: #4ade80; /* row clear, level up */ --hx-success-glow: #86efac; --hx-warning: #fb923c; /* low space warning */ --hx-danger: #f43f5e; /* game over, invalid placement */ --hx-info: #60a5fa; /* tips, hints */ /* --------------------------------------------------------------------------- COLOR — TEXT White-leaning at the top of the hierarchy; muted purple as it recedes. ---------------------------------------------------------------------------*/ --hx-fg: #ffffff; /* primary text on dark surfaces */ --hx-fg-1: #f4ecff; /* near-white, slight warm violet tint */ --hx-fg-2: #c9b8e8; /* secondary — labels, metadata */ --hx-fg-3: #8a78b0; /* tertiary — disabled, captions */ --hx-fg-on-gold: #3a1f00; /* dark amber-brown — text ON gold buttons */ /* --------------------------------------------------------------------------- COLOR — BOARD CELLS The empty hex cells of the play board. ---------------------------------------------------------------------------*/ --hx-cell-empty: rgba(122, 63, 200, 0.18); /* hollow violet glass */ --hx-cell-stroke: rgba(154, 106, 217, 0.45); --hx-cell-preview: rgba(255, 182, 39, 0.35); /* about-to-place ghost */ --hx-cell-invalid: rgba(244, 63, 94, 0.30); /* can't place here */ /* --------------------------------------------------------------------------- RADII — soft, generous, the pieces are gemstones not buttons ---------------------------------------------------------------------------*/ --hx-r-xs: 6px; --hx-r-sm: 10px; --hx-r-md: 16px; --hx-r-lg: 24px; --hx-r-xl: 32px; --hx-r-pill: 999px; /* --------------------------------------------------------------------------- SPACING — 4px base ---------------------------------------------------------------------------*/ --hx-s-1: 4px; --hx-s-2: 8px; --hx-s-3: 12px; --hx-s-4: 16px; --hx-s-5: 20px; --hx-s-6: 24px; --hx-s-8: 32px; --hx-s-10: 40px; --hx-s-12: 48px; --hx-s-16: 64px; /* --------------------------------------------------------------------------- SHADOWS — two systems 1. "Glow" — outer color halo, used on pieces, CTAs, particles. 2. "Drop" — neutral elevation shadow, used on sheets and dialogs. ---------------------------------------------------------------------------*/ --hx-glow-violet: 0 0 24px rgba(154, 106, 217, 0.55), 0 0 4px rgba(208, 102, 232, 0.4); --hx-glow-pink: 0 0 32px rgba(240, 168, 255, 0.55), 0 0 8px rgba(208, 102, 232, 0.5); --hx-glow-gold: 0 0 28px rgba(255, 182, 39, 0.65), 0 0 8px rgba(255, 228, 138, 0.5); --hx-glow-gold-sm: 0 0 12px rgba(255, 182, 39, 0.55); --hx-drop-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --hx-drop-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --hx-drop-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35); /* Inset shadows — used for the "pressed coin" look on gold pieces */ --hx-inset-gold-top: inset 0 2px 0 rgba(255, 240, 180, 0.85), inset 0 -3px 0 rgba(196, 122, 11, 0.9), inset 0 0 0 1px rgba(122, 69, 0, 0.4); /* --------------------------------------------------------------------------- BORDERS Hexadu uses very subtle borders. Most separation is shadow/glow. ---------------------------------------------------------------------------*/ --hx-border: 1px solid rgba(154, 106, 217, 0.25); --hx-border-strong: 1px solid rgba(154, 106, 217, 0.55); --hx-hairline: 1px solid rgba(244, 236, 255, 0.08); /* --------------------------------------------------------------------------- GRADIENTS — set pieces ---------------------------------------------------------------------------*/ --hx-grad-bg: radial-gradient(120% 80% at 50% 0%, #3a1f6e 0%, #1c0d3a 55%, #120726 100%); --hx-grad-violet: linear-gradient(180deg, #9a6ad9 0%, #7a3fc8 50%, #4d2a8f 100%); --hx-grad-gold: linear-gradient(180deg, #ffe48a 0%, #ffb627 45%, #f59300 80%, #c47a0b 100%); --hx-grad-pink: linear-gradient(180deg, #f0a8ff 0%, #d166e8 60%, #9a3fc8 100%); --hx-grad-overlay: radial-gradient(60% 40% at 50% 50%, rgba(208,102,232,0.25), transparent 70%); /* --------------------------------------------------------------------------- EASING — Hexadu motion is bouncy and confident, never linear. ---------------------------------------------------------------------------*/ --hx-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --hx-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot — taps */ --hx-ease-pop: cubic-bezier(0.16, 1.6, 0.5, 1); /* heavier pop — clears */ --hx-ease-snap: cubic-bezier(0.5, 0, 0.1, 1); /* board snap */ --hx-dur-fast: 120ms; --hx-dur-base: 220ms; --hx-dur-slow: 420ms; --hx-dur-pop: 600ms; /* --------------------------------------------------------------------------- TYPOGRAPHY Page-level overrides (currently Open Sans) live in the page