/* ========================================================= Nails by Jenni — Colors & Type Editorial-luxe foundation. Warm neutrals carry the system; blush + oxblood accents flex from "soft & cute" to "dark & edgy." The system is intentionally quiet so nail photography is the hero. ========================================================= */ /* ---- Webfonts (Google Fonts) ------------------------------------------- Display: Bodoni Moda — high-contrast editorial serif (Vogue-adjacent) Body: Manrope — modern geometric sans, warm enough for body Script: Italianno — signature flourish, used sparingly ----------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=Italianno&display=swap'); :root { /* ---- Core neutrals (the canvas) ---- */ --bone: #F4EEE5; /* primary background, warm cream */ --ivory: #FAF6F0; /* elevated surfaces, cards */ --paper: #FFFFFF; /* pure white — sparingly */ --shell: #ECE3D6; /* subtle band / divider tint */ --stone: #C9BDAE; /* hairline, muted ui */ --mocha: #8C7C6E; /* secondary text */ --cocoa: #4A3F37; /* tertiary headings */ --ink: #1C1714; /* primary text — warm near-black */ --noir: #0B0907; /* true dark, for moody sections */ /* ---- Accents ---- */ --blush: #EBD2CC; /* soft pink — "cute" register */ --rose: #C97A7E; /* deeper rose — CTA, link */ --oxblood: #5C1F26; /* moody, editorial accent */ --champagne: #C9B28C; /* warm metallic, used at tiny sizes */ --sage: #A8B0A0; /* one cool tone for variety */ /* ---- Semantic foreground / background ---- */ --bg: var(--bone); --bg-elevated: var(--ivory); --bg-deep: var(--noir); --fg-1: var(--ink); /* primary text */ --fg-2: var(--cocoa); /* secondary text */ --fg-3: var(--mocha); /* tertiary / captions */ --fg-4: var(--stone); /* placeholder / disabled */ --fg-on-dark: var(--bone); --hairline: rgba(28, 23, 20, 0.12); --hairline-strong: rgba(28, 23, 20, 0.22); /* ---- Brand semantic ---- */ --accent: var(--rose); --accent-soft: var(--blush); --accent-deep: var(--oxblood); --accent-metal: var(--champagne); /* ---- Status (kept restrained — no candy colors) ---- */ --success: #6B7F58; --warning: #B88B4A; --danger: #8C2F2F; /* ---- Type families ---- */ --font-display: 'DM Serif Display', 'Didot', Georgia, serif; --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-script: 'Italianno', 'Apple Chancery', 'Snell Roundhand', cursive; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Type scale (modular, 1.25 trad) ---- */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 88px; --fs-6xl: 120px; /* ---- Tracking ---- */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* eyebrow caps */ --tracking-widest: 0.32em; /* tiny caps signage */ /* ---- Leading ---- */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.55; --lh-loose: 1.75; /* ---- Spacing (4-based) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- Radii (mostly square; soft only on input chrome) ---- */ --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* ---- Shadows (subtle, never blue) ---- */ --shadow-1: 0 1px 2px rgba(28,23,20,0.06); --shadow-2: 0 4px 16px rgba(28,23,20,0.08); --shadow-3: 0 16px 48px rgba(28,23,20,0.12); --shadow-inset: inset 0 0 0 1px var(--hairline); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms; --dur-4: 800ms; } /* ========================================================= Semantic typography classes Use these in markup; they map to the scale above. ========================================================= */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .h-display { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(56px, 9vw, var(--fs-6xl)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); line-height: var(--lh-snug); } .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-3); } .lede { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-lg); line-height: var(--lh-base); color: var(--fg-2); } .p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--fg-2); } .caption { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--fg-3); letter-spacing: 0.01em; } .signature { font-family: var(--font-script); font-weight: 400; font-size: var(--fs-3xl); line-height: 1; color: var(--fg-1); } /* Decorative all-caps wordmark/wayfinding (used for nav, signage) */ .smallcaps { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-widest); }