/* ========================================================= SHALLON FADLIEN — Design Tokens Single source of truth for the artist portfolio site. Referenced by every page. Do not duplicate values. ========================================================= */ :root { /* ---------- FORMAL PALETTE (PRD v2: navy / gold / cream) ---------- */ --navy-deep: #1E2A3A; /* header, footer, dark sections */ --navy: #2B3A52; /* primary brand */ --navy-light: #3D5168; /* hover states */ --gold: #B8963E; /* accents, CTAs, highlights */ --gold-light: #D4B876; /* hover/active gold */ --gold-muted: #C4A96A; /* subtle gold text */ --cream: #FAF8F5; /* main background */ --cream-warm: #F5F0E8; /* card backgrounds, alt sections */ --cream-cool: #EEF2F7; /* light blue sections — About timeline */ --ink: #1A1A1A; /* body text */ --ink-soft: #4A4A4A; /* secondary text */ --ink-muted: #8A8A7A; /* captions, dates, metadata */ --white: #FFFFFF; --border-light: rgba(26,26,26,0.08); --shadow-soft: 0 4px 24px rgba(26,26,26,0.06); --shadow-hover: 0 8px 40px rgba(26,26,26,0.12); --coral: #C87865; /* warmth hint — used sparingly */ /* ---------- Backwards-compatible aliases (do not remove) ---------- */ /* Existing pages reference --deep-blue, --warm-brown, --gallery-white, --mist-blue, --soft-black. Keep them working by aliasing to the new system. */ --deep-blue: var(--navy); --deep-blue-hi: var(--navy-light); --warm-brown: var(--gold); --soft-black: var(--navy-deep); /* dark sections now use navy-deep */ --accent-blue: var(--navy-light); --gallery-white: var(--cream); --mist-blue: var(--cream-cool); --ink-subtle: var(--ink-muted); /* old middle value repoints to new muted */ /* Lines */ --line: var(--border-light); --line-warm: rgba(184, 150, 62, 0.22); /* ---------- Type System ---------- */ --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif; --font-accent: 'Cormorant Garamond', 'Playfair Display', serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Scale (fluid where useful) */ --fs-hero: clamp(3rem, 6vw + 1rem, 5rem); /* 48-80px */ --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem); --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 3rem); --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.75rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.875rem; --fs-caption:0.75rem; --lh-display: 1.08; --lh-heading: 1.2; --lh-body: 1.7; --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-widest: 0.18em; /* ---------- Spacing (8px base) ---------- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; --s-12:96px; --s-16:128px; --s-20:160px; --s-24:192px; /* ---------- Layout ---------- */ --max-w: 1400px; --max-w-prose: 68ch; --gutter: 24px; --gutter-mobile:12px; /* ---------- Elevation (color-tinted) ---------- */ --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.06), 0 1px 2px rgba(27, 42, 74, 0.04); --shadow-md: 0 8px 24px rgba(27, 42, 74, 0.08), 0 2px 6px rgba(27, 42, 74, 0.05); --shadow-lg: 0 12px 40px rgba(27, 42, 74, 0.12), 0 4px 12px rgba(27, 42, 74, 0.06); --shadow-xl: 0 24px 60px rgba(27, 42, 74, 0.18), 0 8px 20px rgba(27, 42, 74, 0.08); --shadow-warm: 0 10px 40px rgba(139, 111, 71, 0.15), 0 4px 12px rgba(139, 111, 71, 0.08); --ring-inset-hi: inset 0 1px 0 rgba(255,255,255,0.06); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth:cubic-bezier(0.32, 0.72, 0, 1); --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 800ms; --dur-reveal:1200ms; /* ---------- Radii ---------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 24px; --r-pill: 999px; } /* ========================================================= BASE TYPOGRAPHY + RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--gallery-white); font-feature-settings: 'ss01' on, 'cv11' on; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; } p { margin: 0 0 1em; color: var(--ink-muted); max-width: var(--max-w-prose); } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: var(--r-sm); } /* ========================================================= UTILITIES ========================================================= */ .sf-container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-4); } @media (max-width: 768px){ .sf-container { padding: 0 var(--s-3); } } /* PRD v2 §4.1 — Global container. Use on every page root + breadcrumbs + headers. */ .container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); } /* Hero scrim helpers — NEVER stack multiple scrims on one hero. Pick ONE. */ .sf-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, rgba(10,18,36,0.72) 0%, rgba(10,18,36,0.42) 40%, rgba(10,18,36,0) 72%), linear-gradient(180deg, rgba(10,18,36,0.35) 0%, rgba(10,18,36,0) 30%); } /* Scroll progress bar (PRD §3.5) */ .sf-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 9999; pointer-events: none; } .sf-scroll-progress__bar { width: 0%; height: 100%; background: var(--gold); transform-origin: left center; } /* Back to top (PRD §3.12) */ .sf-back-to-top { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); display: grid; place-items: center; box-shadow: var(--shadow-hover); opacity: 0; pointer-events: none; transform: translateY(12px) scale(0.92); transition: opacity 300ms var(--ease-smooth), transform 300ms var(--ease-smooth), background 300ms; z-index: 50; } .sf-back-to-top.is-show { opacity: 1; pointer-events: auto; transform: none; } .sf-back-to-top:hover { background: var(--gold-light); transform: translateY(-2px) scale(1.03); } /* Loading screen (PRD §3.9) — fast, with a gold ring spinning around the monogram */ .sf-loader { position: fixed; inset: 0; z-index: 10000; background: var(--navy-deep); display: grid; place-items: center; transition: opacity 350ms var(--ease-smooth); } .sf-loader.is-hidden { opacity: 0; pointer-events: none; } .sf-loader__ring { position: relative; width: 140px; height: 140px; display: grid; place-items: center; } .sf-loader__ring::before, .sf-loader__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; } .sf-loader__ring::before { border-top-color: var(--gold); border-right-color: var(--gold-light); animation: sf-ring-spin 1s cubic-bezier(0.65, 0.02, 0.35, 1) infinite; } .sf-loader__ring::after { /* inner faint ring, counter-rotating for depth */ inset: 14px; border-top-color: rgba(184,150,62,0.3); border-left-color: rgba(184,150,62,0.3); animation: sf-ring-spin 1.6s linear reverse infinite; } .sf-loader__mark { position: relative; z-index: 1; font-family: var(--font-display); font-size: 52px; color: var(--gold); letter-spacing: -0.04em; line-height: 1; animation: sf-mark-breathe 1.6s ease-in-out infinite; } @keyframes sf-ring-spin { to { transform: rotate(360deg); } } @keyframes sf-mark-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sf-loader__ring::before, .sf-loader__ring::after, .sf-loader__mark { animation: none; } } /* Page-transition overlay (PRD §3.6) — hidden by default, shown during nav */ .sf-page-wipe { position: fixed; inset: 0; z-index: 9998; pointer-events: none; } .sf-page-wipe__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--gold); will-change: width; } .sf-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--warm-brown); font-weight: 500; } .sf-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; } .sf-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: var(--r-pill); font-size: 14px; letter-spacing: 0.04em; font-weight: 500; transition: transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth); will-change: transform; } .sf-btn--primary { background: var(--deep-blue); color: #fff; box-shadow: var(--shadow-md); } .sf-btn--primary:hover { background: var(--soft-black); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .sf-btn--primary:active { transform: scale(.98); } .sf-btn--ghost { border: 1px solid var(--warm-brown); color: var(--warm-brown); } .sf-btn--ghost:hover { background: var(--warm-brown); color: #fff; } .sf-btn .sf-arrow { width: 32px; height: 32px; border-radius: var(--r-pill); background: rgba(255,255,255,0.14); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-smooth); } .sf-btn:hover .sf-arrow { transform: translate(2px, -1px); } .sf-link-underline { position: relative; display: inline-block; padding-bottom: 2px; } .sf-link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width var(--dur-base) var(--ease-out); } .sf-link-underline:hover::after { width: 100%; } /* Tinted image frame */ .sf-frame { position: relative; overflow: hidden; border-radius: var(--r-sm); box-shadow: var(--shadow-md); background: var(--mist-blue); } .sf-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(27,42,74,0.25) 100%); pointer-events: none; } /* Reveal on scroll — faster, smaller travel, no blur (blur is expensive on mobile) */ .sf-reveal { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 500ms var(--ease-smooth), transform 500ms var(--ease-smooth); } .sf-reveal.is-in { opacity: 1; transform: none; } /* On mobile and tablet, reveal animations are perceived as lag. Skip gating entirely. */ @media (max-width: 900px) { .sf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Stagger children */ .sf-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); } /* Custom cursor — desktop only (keep hidden on touch) */ @media (hover: hover) and (pointer: fine) { body { cursor: none; } .sf-cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--deep-blue); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: width 220ms var(--ease-smooth), height 220ms var(--ease-smooth), background 220ms var(--ease-smooth), mix-blend-mode 220ms; } .sf-cursor.is-hover { width: 48px; height: 48px; background: rgba(139,111,71,0.25); mix-blend-mode: multiply; } a, button, [role="button"], input, label, .sf-hoverable { cursor: none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .sf-reveal { opacity: 1; transform: none; filter: none; } } /* Selection */ ::selection { background: var(--warm-brown); color: #fff; } /* ========================================================= SEAMLESS SECTION & PAGE TRANSITIONS Use these to remove visible section seams. Every section should fade into the next via color echo, not hard edge. ========================================================= */ /* Section that fades from one background to another */ .sf-bridge-down { position: relative; } .sf-bridge-down::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; background: linear-gradient(to bottom, transparent, var(--_bridge-to, var(--gallery-white))); pointer-events: none; z-index: 1; } .sf-bridge-up { position: relative; } .sf-bridge-up::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 120px; background: linear-gradient(to top, transparent, var(--_bridge-from, var(--gallery-white))); pointer-events: none; z-index: 1; } /* Edge-softener — a gentle radial that dissolves a section into the next */ .sf-soften-bottom { mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%); } .sf-soften-top { mask-image: linear-gradient(to top, #000 0, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 0, #000 82%, transparent 100%); } /* Hero text readability — layered legibility scrim */ .sf-legibility { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 80% 70% at 20% 40%, rgba(0,0,0,0.55), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.55) 100%); } .sf-legibility--dark { background: radial-gradient(ellipse 100% 90% at 20% 50%, rgba(0,0,0,0.7), transparent 70%), linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.65) 100%); } /* Typography refinement for hero over imagery */ .sf-hero-type { text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 2px 12px rgba(0,0,0,0.45), 0 8px 40px rgba(0,0,0,0.35); } /* Body-background context anchor — pages can set these as CSS vars so the is subtly tinted to bridge the hero and first section */ body { background-color: var(--page-bg, var(--gallery-white)); } /* Grain overlay — fixed, pointer-events-none, GPU-safe */ .sf-grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; }