/* ============================================================ FIORELLA SALAZAR — Colors & Type Foundations Visual Identity System · 2026 ------------------------------------------------------------ Raleway is self-hosted below (brand font files). Cormorant Garamond is loaded from Google Fonts in each HTML : ============================================================ */ /* ---- Self-hosted Raleway (brand-supplied .ttf) ---- */ @font-face { font-family: "Raleway"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Raleway-Thin.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Raleway-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Raleway-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Raleway-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Raleway-Light.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Raleway-LightItalic.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Raleway-Regular.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Raleway-Italic.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Raleway-Medium.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Raleway-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Raleway-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Raleway-Bold.ttf") format("truetype"); } :root { /* ---- Brand palette (5 colors, each with a defined role) ---- */ --sanctuary: #F5F0EA; /* "The air" — background. Should feel inevitable, never a choice. */ --salted-stone: #D9D3C5; /* Secondary neutral — cards, dividers, quiet fills. */ --fiorella-sand:#C4AD8F; /* THE HEARTBEAT — primary accent. On every touchpoint. Never approximate. */ --sea-glass: #8FAAB8; /* Cool accent — a spark for transcendence. Sparingly. NEVER in navigation. */ --tides-dark: #553927; /* Text & gravity. Sparingly — not across large areas. */ /* ---- Tonal extensions (derived in oklch from the palette, for hovers/borders only) ---- */ --sand-deep: #B09875; /* Fiorella Sand pressed/hover darken */ --sand-soft: #D8C8B2; /* Fiorella Sand at rest on Sanctuary, tints */ --stone-line: #C9C2B2; /* Hairline borders on Sanctuary */ --tides-soft: #6E4E37; /* Slightly lifted text on darker grounds */ --sea-glass-deep:#7C99A8; /* ---- Semantic color roles ---- */ --bg: var(--sanctuary); --bg-raised: #FBF8F3; /* a half-step above Sanctuary for layered surfaces */ --surface: var(--salted-stone); --fg: var(--tides-dark); /* primary text — used sparingly, for gravity */ --fg-muted: #8A7A66; /* warm muted text (Tides Dark lightened) */ --fg-faint: #A89A86; /* captions, metadata */ --accent: var(--fiorella-sand); --accent-cool: var(--sea-glass); --threshold: var(--sea-glass); /* CTAs, links, hover, active nav — "the moment of being asked to move" */ --threshold-deep: var(--sea-glass-deep); /* hover/pressed state of threshold elements */ --line: var(--stone-line); --on-sand: #F5F0EA; /* text/logo when set on Fiorella Sand */ --on-dark: #F5F0EA; /* text/logo when set on Tides Dark */ /* ---- Type families ---- */ --serif-display: "Cormorant Garamond", "Cormorant", Georgia, serif; /* display, headlines, voice */ --sans-body: "Raleway", "Helvetica Neue", Arial, sans-serif; /* body & navigation */ /* ---- Type weights ---- */ --w-body: 300; /* Raleway Light — all body copy */ --w-nav: 400; /* Raleway Regular — navigation */ --w-display: 300; /* Cormorant Garamond Light — hero feels airier at 300 */ --w-subhead: 400; /* Cormorant Garamond Regular */ /* ---- Type scale (px). Fluid clamps used in semantic rules below. ---- */ --fs-hero: 72px; /* 56–80px display/hero */ --fs-h1: 56px; --fs-h2: 40px; /* 28–40px sub-head */ --fs-h3: 28px; --fs-voice: 24px; /* 20–28px accent/voice, italic */ --fs-body-lg: 20px; /* 16–20px body */ --fs-body: 18px; --fs-small: 16px; --fs-nav: 13px; /* 12–14px navigation */ --fs-caption: 12px; /* ---- Leading / tracking ---- */ --lh-display: 1.0; --lh-subhead: 1.1; --lh-voice: 1.2; --lh-body: 1.5; --tr-tight: -0.01em; /* sub-head −1% */ --tr-nav: 0.08em; /* navigation 5–10% */ --tr-eyebrow: 0.18em; /* sectional eyebrows / labels */ /* ---- Spacing scale (8px base, generous) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 144px; /* threshold breathing room between sections */ /* ---- Radii — soft, never techy ---- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ---- Hairline borders & quiet shadows ---- */ --border-hair: 1px solid var(--line); --border-sand: 1px solid var(--fiorella-sand); --shadow-soft: 0 1px 24px rgba(85, 57, 39, 0.06); /* barely-there lift, warm-cast */ --shadow-rest: 0 1px 2px rgba(85, 57, 39, 0.04); /* ---- Motion — slow, settling, never bouncy ---- */ --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-quiet: 600ms; --dur-calm: 900ms; } /* ============================================================ SEMANTIC TYPE — apply directly or copy into components ============================================================ */ .display, .h-hero { font-family: var(--serif-display); font-weight: var(--w-display); font-size: clamp(48px, 6vw, 80px); line-height: var(--lh-display); letter-spacing: 0; color: var(--fg); } h1, .h1 { font-family: var(--serif-display); font-weight: var(--w-display); font-size: clamp(40px, 4.5vw, 56px); line-height: 1.05; letter-spacing: 0; color: var(--fg); } h2, .h2 { font-family: var(--serif-display); font-weight: var(--w-subhead); font-size: clamp(28px, 3vw, 40px); line-height: var(--lh-subhead); letter-spacing: var(--tr-tight); color: var(--fg); } h3, .h3 { font-family: var(--serif-display); font-weight: var(--w-subhead); font-size: clamp(24px, 2.2vw, 28px); line-height: var(--lh-subhead); letter-spacing: var(--tr-tight); color: var(--fg); } /* Accent / Voice — emotional moments, always italic Cormorant */ .voice { font-family: var(--serif-display); font-style: italic; font-weight: var(--w-subhead); font-size: clamp(20px, 2vw, 28px); line-height: var(--lh-voice); color: var(--fg-muted); } p, .body { font-family: var(--sans-body); font-weight: var(--w-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.005em; color: var(--fg-muted); text-wrap: pretty; } .body-lg { font-family: var(--sans-body); font-weight: var(--w-body); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--fg-muted); } .small { font-family: var(--sans-body); font-weight: var(--w-body); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-faint); } /* Navigation — Raleway Regular, tracked, never tight */ .nav { font-family: var(--sans-body); font-weight: var(--w-nav); font-size: var(--fs-nav); letter-spacing: var(--tr-nav); color: var(--fg); } /* Eyebrow / sectional label — widely tracked, uppercase, faint */ .eyebrow { font-family: var(--sans-body); font-weight: var(--w-nav); font-size: var(--fs-caption); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-faint); } /* The logotype — the name IS the mark. Always mixed case. */ .logotype { font-family: var(--serif-display); font-weight: 400; letter-spacing: 0.01em; color: var(--fg); }