/* ============================================================ FONTS — Adobe Fonts kit "akp7ntv" (Adobe CDN, cannot be self-hosted). Freight Big → display serif (headers, gallery titles) Neue Haas Grotesk → UI + body sans (Display + Text optical sizes) Fira Mono → labels / counts / EXIF Family names applied in tokens/typography.css. ============================================================ */ @import url("https://use.typekit.net/akp7ntv.css"); /* ============================================================ COLOR — barely-there palette. Photos supply the color; the UI stays cool-neutral so it never competes. Light neutrals sit on a cool hue (~255) at very low chroma. Accent is a muted slate. ============================================================ */ :root { /* --- Warm paper → ink ramp (Studio app + light gallery) --- */ --paper-0: oklch(0.993 0.004 255); /* page white — cool */ --paper-1: oklch(0.975 0.006 255); /* sunken / rails */ --paper-2: oklch(0.951 0.008 256); /* hover fill */ --stone-1: oklch(0.902 0.010 258); /* hairline-heavy borders */ --stone-2: oklch(0.834 0.012 258); /* borders */ --stone-3: oklch(0.699 0.013 256); /* faint text, icons */ --stone-4: oklch(0.551 0.013 255); /* muted text */ --ink-3: oklch(0.404 0.012 255); /* secondary text */ --ink-2: oklch(0.304 0.011 255); /* body text */ --ink-1: oklch(0.224 0.010 255); /* strong text */ --ink-0: oklch(0.160 0.009 258); /* headings, primary fills */ /* --- Noir ramp (dark gallery skin) --- */ --noir-0: oklch(0.155 0.005 68); /* deepest — full-bleed bg */ --noir-1: oklch(0.196 0.005 68); /* surface */ --noir-2: oklch(0.246 0.006 68); /* raised / cards */ --noir-3: oklch(0.312 0.007 68); /* borders */ --noir-4: oklch(0.430 0.008 70); /* faint text on dark */ --chalk-2: oklch(0.720 0.006 78); /* muted text on dark */ --chalk-1: oklch(0.880 0.005 80); /* body text on dark */ --chalk-0: oklch(0.965 0.004 82); /* strong text on dark */ /* --- Accent: slate. Used sparingly for selection, focus, and a single primary action. --- */ --clay-tint: oklch(0.945 0.020 250); --clay: oklch(0.550 0.055 250); --clay-strong: oklch(0.470 0.060 250); /* --- Quiet semantics (kept low-chroma) --- */ --positive: oklch(0.560 0.056 155); --caution: oklch(0.720 0.070 75); --critical: oklch(0.560 0.095 25); --critical-tint: oklch(0.945 0.022 25); /* ============================================================ SEMANTIC ALIASES — reference these in product code. ============================================================ */ /* Surfaces (light) */ --surface-page: var(--paper-0); --surface-sunken: var(--paper-1); --surface-card: var(--paper-0); --surface-hover: var(--paper-2); --surface-inset: var(--paper-1); /* Text (light) */ --text-strong: var(--ink-0); --text-body: var(--ink-2); --text-muted: var(--stone-4); --text-faint: var(--stone-3); --text-onfill: var(--paper-0); /* Lines */ --border: var(--stone-2); --border-soft: var(--stone-1); --border-strong: var(--ink-1); /* Interaction */ --accent: var(--clay); --accent-strong: var(--clay-strong); --accent-tint: var(--clay-tint); --accent-contrast: var(--paper-0); --focus-ring: oklch(0.550 0.055 250 / 0.45); /* Primary action = ink (editorial), accent reserved for highlights */ --action: var(--ink-0); --action-hover: var(--ink-1); --action-contrast: var(--paper-0); /* Photo scrim (protection gradient over imagery) */ --scrim-strong: oklch(0.155 0.005 68 / 0.55); --scrim-soft: oklch(0.155 0.005 68 / 0.28); } /* ---- Dark scope ---- data-skin="noir" → client gallery dark skin (scoped) data-theme="dark" → app-wide dark mode (set on by the theme resolver, from the user's light/dark/system preference). Both reuse the same Noir ramp. */ [data-skin="noir"], [data-theme="dark"] { --surface-page: var(--noir-0); --surface-sunken: var(--noir-1); --surface-card: var(--noir-2); --surface-hover: var(--noir-2); --surface-inset: var(--noir-1); --text-strong: var(--chalk-0); --text-body: var(--chalk-1); --text-muted: var(--chalk-2); --text-faint: var(--noir-4); --text-onfill: var(--noir-0); --border: var(--noir-3); --border-soft: var(--noir-2); --border-strong: var(--chalk-2); --action: var(--chalk-0); --action-hover: var(--chalk-1); --action-contrast: var(--noir-0); --accent-contrast: var(--noir-0); } /* ============================================================ TYPE — modern-sans setting. Display : Neue Haas Grotesk (sans) — titles, headlines, gallery names Sans : Neue Haas Grotesk — all UI, body, controls Mono : Fira Mono — labels, counts, metadata, EXIF Serif : Freight Big (--font-serif) — editorial alternative, opt-in Scale is a ~1.2 minor-third for UI, larger jumps for display. ============================================================ */ :root { --font-display: var(--font-sans-display); /* titles set in Neue Haas (modern sans) */ --font-serif: "freight-big-pro", Georgia, "Times New Roman", serif; /* large client-gallery hero titles only (≥24px) */ --font-sans: "neue-haas-grotesk-text", system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans-display: "neue-haas-grotesk-display", system-ui, sans-serif; --font-mono: "fira-mono", ui-monospace, "SF Mono", Menlo, monospace; /* Display (serif) — for headings & editorial moments */ --display-2xl: 600 clamp(40px, 6vw, 72px)/1.02 var(--font-display); --display-xl: 600 clamp(32px, 4.4vw, 52px)/1.05 var(--font-display); --display-lg: 500 34px/1.1 var(--font-display); --display-md: 500 26px/1.15 var(--font-display); --display-sm: 500 20px/1.25 var(--font-display); /* Sans — UI + body */ --text-lg: 500 18px/1.5 var(--font-sans); --text-base: 400 15px/1.55 var(--font-sans); --text-sm: 400 13px/1.5 var(--font-sans); --text-xs: 500 12px/1.4 var(--font-sans); /* Mono — technical labels (uppercase, tracked) */ --label: 500 11px/1.3 var(--font-mono); --label-sm: 500 10px/1.2 var(--font-mono); --label-track: 0.08em; /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; } /* ============================================================ SPACING — 4px base. Editorial layouts run generous; the Studio app runs one notch tighter than the client gallery. ============================================================ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Layout rails */ --rail-sidebar: 236px; /* Studio app nav */ --gutter-app: 28px; /* Studio content padding */ --gutter-gallery: 48px; /* Client gallery margins */ --maxw-reading: 68ch; --maxw-content: 1280px; /* Photo grid */ --tile-gap: 4px; /* gallery masonry — tight, photos breathe */ --tile-gap-app: 8px; /* Studio grid — a touch looser for controls */ } /* ============================================================ RADIUS — editorial = crisp. Small radii on controls, near-square on photo tiles, a touch more on modals. Nothing pill-soft except intentional chips/toggles. ============================================================ */ :root { --radius-none: 0; --radius-xs: 0px; --radius-sm: 0px; /* inputs, buttons, tiles — square */ --radius-md: 0px; /* cards */ --radius-lg: 0px; /* modals, large surfaces */ --radius-xl: 0px; /* device / feature surfaces */ --radius-pill: 999px; } /* ============================================================ SHADOW — restrained. Editorial UI leans on hairline borders, not heavy elevation. Shadows are low, diffuse, warm-tinted; used mostly for overlays (menus, dialogs, floating trays). ============================================================ */ :root { --shadow-none: none; --shadow-xs: 0 1px 2px oklch(0.168 0.007 60 / 0.05); --shadow-sm: 0 1px 3px oklch(0.168 0.007 60 / 0.07), 0 1px 2px oklch(0.168 0.007 60 / 0.04); --shadow-md: 0 4px 12px oklch(0.168 0.007 60 / 0.08), 0 1px 3px oklch(0.168 0.007 60 / 0.05); --shadow-lg: 0 12px 32px oklch(0.168 0.007 60 / 0.14), 0 3px 8px oklch(0.168 0.007 60 / 0.07); --shadow-pop: 0 20px 48px oklch(0.155 0.005 68 / 0.24), 0 6px 14px oklch(0.155 0.005 68 / 0.12); /* Ring used for focus (paired with --focus-ring color) */ --ring-focus: 0 0 0 3px var(--focus-ring); --ring-select: inset 0 0 0 2px var(--accent); } /* ============================================================ MOTION — calm, precise, "engineered". No bounce. A single confident ease-out for entrances; quick, near-linear for hovers. Photos fade, they never slide-jank. ============================================================ */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* confident settle */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-quick: cubic-bezier(0.4, 0, 0.2, 1); --dur-instant: 90ms; --dur-fast: 150ms; /* hovers, presses */ --dur-base: 240ms; /* menus, toggles */ --dur-slow: 360ms; /* dialogs, page transitions */ --dur-photo: 480ms; /* image fade-in */ --hover-lift: -1px; /* subtle */ --press-scale: 0.985; /* barely perceptible squeeze */ }