/* ============================================================ Artistry99 — Colors & Type Foundations ============================================================ Brand: lashes • makeup • hairstyling Vibe: soft lavender dream, sage retro display, hand-fitted frame, sparkle accents. Beauty boutique meets retro. ============================================================ */ /* ---------- Web fonts ---------- */ /* Shrikhand loaded via in each HTML for faster first paint. */ /* Knockout HTF50 Welterweight — official brand sans, licensed file dropped in fonts/. */ @font-face { font-family: "Knockout 50 Welterweight"; src: url("fonts/Knockout_HTF50-Welterweight_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ============================================================ COLORS — Brand ============================================================ */ /* Lavender gradient — sampled directly from the logo background. Top-left highlight runs down-right into a richer purple. */ --lavender-50: #f7f3ff; /* almost white, top-left highlight */ --lavender-100: #f4f1ff; --lavender-200: #efe7fe; --lavender-300: #e5d8ff; --lavender-400: #ddcbff; --lavender-500: #cbafff; /* mid-tone, the "vibe" purple */ --lavender-600: #bf9dfd; /* gradient terminus, deepest */ --lavender-700: #a87df0; /* hover/press accent */ --lavender-800: #6a47b8; /* sparkle/star accent */ /* Sage — the retro Shrikhand wordmark green. */ --sage-50: #f1f4ec; --sage-100: #d9e0cc; --sage-300: #b6c39e; --sage-500: #94a480; /* the brand sage, sampled from logo */ --sage-700: #6f7d5e; --sage-900: #3f4733; /* Ink — frame, body type, hairlines. Not pure black. */ --ink-900: #161214; /* primary text + frame */ --ink-700: #2d2630; --ink-500: #5a4f5e; --ink-300: #948b96; --ink-100: #d8d2dc; --ink-50: #ece8ef; /* Pure neutrals */ --white: #ffffff; --off-white: #fbfaff; /* Semantic accents — used sparingly */ --blush: #f4c8d6; /* makeup-counter pink */ --gold: #d6b86a; /* warm metallic accent */ /* ============================================================ SEMANTIC COLORS ============================================================ */ --bg: var(--lavender-100); /* default app bg */ --bg-elevated: var(--white); --bg-deep: var(--lavender-500); --bg-gradient: linear-gradient(135deg, var(--lavender-100) 0%, var(--lavender-300) 45%, var(--lavender-600) 100%); --bg-gradient-soft: linear-gradient(160deg, var(--lavender-50) 0%, var(--lavender-200) 100%); --fg: var(--ink-900); /* primary text */ --fg-muted: var(--ink-500); --fg-subtle: var(--ink-300); --fg-on-deep: var(--white); --fg-accent: var(--sage-500); --border: var(--ink-300); /* signature thin black frame */ --border-soft: var(--ink-100); --hairline: 1.5px; --frame: 2px; /* signature outlined boxes */ --link: var(--sage-700); --link-hover: var(--ink-900); /* ============================================================ TYPE — Families ============================================================ */ --font-display: "Shrikhand", "Cooper Std", Georgia, serif; --font-sans: "Knockout 50 Welterweight", "Saira Semi Condensed", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace; /* Tracking — Saira at body sizes wants very loose tracking to read like Knockout Welterweight all-caps. */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.16em; /* default for caps eyebrow/tagline */ --tracking-widest: 0.28em; /* ============================================================ SPACING & RADII ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Shadows — kept minimal; the system relies on outlined frames, not floating cards. Use sparingly. */ --shadow-soft: 0 1px 2px rgba(106, 71, 184, 0.06), 0 8px 24px rgba(106, 71, 184, 0.08); --shadow-lift: 0 2px 4px rgba(106, 71, 184, 0.10), 0 16px 40px rgba(106, 71, 184, 0.14); } /* ============================================================ SEMANTIC TYPE STYLES ============================================================ */ .h-display, .h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 9vw, 144px); line-height: 0.92; letter-spacing: var(--tracking-tight); color: var(--sage-500); } .h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.5vw, 80px); line-height: 0.98; letter-spacing: var(--tracking-tight); color: var(--sage-500); } .h3 { font-family: var(--font-sans); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ink-900); } .h4 { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ink-900); } /* The signature "Lashes • Makeup • Hairstyling" treatment. */ .eyebrow { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink-900); } .tagline { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.1; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink-900); } p, .body { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: var(--tracking-normal); color: var(--ink-900); } .body-lg { font-family: var(--font-sans); font-weight: 400; font-size: 19px; line-height: 1.5; letter-spacing: var(--tracking-normal); color: var(--ink-900); } .body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: var(--tracking-normal); color: var(--ink-700); } .caption { font-family: var(--font-sans); font-weight: 400; font-size: 11px; line-height: 1.3; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ink-500); } code, .mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }