/* ============================================================================ STORIA — Design System "Fildişi & Şampanya" — light editorial luxury Shared tokens + base + components for the landing page and the Studio app. ========================================================================= */ /* ---- Fonts --------------------------------------------------------------- Fraunces : editorial display serif (headlines, wordmark) Hanken Grotesk : refined grotesque (UI, body) Loaded via in each page's for control over preload. */ :root { /* — Surfaces (warm ivory paper) — */ --paper: #FBF8F2; /* main background */ --paper-2: #F5F0E6; /* alternate section */ --paper-3: #EFE8DA; /* deeper wash */ --surface: #FFFFFF; /* cards / panels */ --surface-warm: #FCFAF5; --glass: rgba(251,248,242,.78); /* sticky/glass bars */ --glass-strong: rgba(251,248,242,.88); /* — Ink (warm near-black) — */ --ink: #1B1712; /* headings */ --ink-2: #4B4339; /* body */ --muted: #8A7F6E; /* secondary / captions */ --faint: #B4A992; /* placeholder / disabled */ /* — Champagne / gold — */ --champ: #B4914D; /* primary accent */ --champ-2: #CBA968; /* lighter */ --champ-deep: #8B6C31; /* darker / text on light */ --champ-wash: #F1E7D3; /* soft tint background */ --champ-line: #E4D7BC; /* accent hairline */ --gold-grad: linear-gradient(122deg, #E0C588 0%, #C2A160 42%, #9C7B3B 100%); --gold-sheen: linear-gradient(122deg, #F4E6C2 0%, #D9BC80 45%, #B4914D 100%); /* — Lines — */ --line: #EAE2D3; --line-2: #DFD5C2; --line-strong: #CFC3AA; /* — Dark contrast block (footer / dramatic sections) — */ --ink-panel: #17130D; --ink-panel-2: #221C13; --on-ink: #F3ECDC; --on-ink-muted: #A99C82; /* — Feedback — */ --ok: #6E8B4E; --warn: #B8863A; --err: #B4553F; /* — Radii — */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; /* — Shadows (warm, soft) — */ --sh-1: 0 1px 2px rgba(27,23,18,.04), 0 2px 8px rgba(27,23,18,.05); --sh-2: 0 4px 14px rgba(27,23,18,.06), 0 18px 46px rgba(27,23,18,.08); --sh-3: 0 12px 30px rgba(27,23,18,.09), 0 40px 90px rgba(27,23,18,.12); --sh-gold: 0 10px 30px rgba(160,124,54,.20); /* — Type — */ --serif: 'Fraunces', 'Playfair Display', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* — Motion — */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* — Layout — */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); } /* ---- Reset & base -------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: .002em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; } ::selection { background: rgba(180,145,77,.24); color: var(--ink); } :focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 430; line-height: 1.08; letter-spacing: -.012em; margin: 0; } /* ---- Typographic scale --------------------------------------------------- */ .display { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7.2vw, 92px); line-height: .98; letter-spacing: -.022em; color: var(--ink); } .h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.018em; } .h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.015em; } .h3 { font-size: clamp(21px, 2.4vw, 28px); } .lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--ink-2); font-weight: 380; } .serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; } /* ---- Eyebrow / kicker ---------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--champ-deep); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--champ)); } .eyebrow.center::before { background: var(--champ); } /* ---- Layout helpers ------------------------------------------------------ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(44px, 6vw, 88px); } .stack > * + * { margin-top: var(--stack, 1rem); } .center { text-align: center; } .muted { color: var(--muted); } .divider { height: 1px; background: var(--line); border: 0; } /* ---- Buttons ------------------------------------------------------------- */ .btn { --pad-y: 15px; --pad-x: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--pad-y) var(--pad-x); border-radius: var(--r-pill); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em; border: 1px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); will-change: transform; } .btn:active { transform: translateY(1px) scale(.995); } .btn-gold { background: var(--gold-sheen); color: #241a08; box-shadow: var(--sh-gold); position: relative; overflow: hidden; } .btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%); transform: translateX(-130%); transition: transform .8s var(--ease); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(160,124,54,.32); } .btn-gold:hover::after { transform: translateX(130%); } .btn-ink { background: var(--ink); color: var(--on-ink); } .btn-ink:hover { transform: translateY(-2px); box-shadow: var(--sh-2); background: #241d14; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--champ); color: var(--champ-deep); background: var(--surface); } .btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); } .btn-quiet:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-1px); } .btn-lg { --pad-y: 18px; --pad-x: 34px; font-size: 16px; } .btn-sm { --pad-y: 10px; --pad-x: 18px; font-size: 13.5px; } .btn[disabled] { opacity: .5; pointer-events: none; } /* ---- Chips / tags -------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: all .3s var(--ease); } .chip:hover { border-color: var(--champ); color: var(--champ-deep); transform: translateY(-1px); box-shadow: var(--sh-1); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--champ); } /* ---- Cards --------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } .card.hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); } /* ---- Inputs -------------------------------------------------------------- */ .field { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 16px 18px; color: var(--ink); font-size: 16px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); box-shadow: var(--sh-1); } .field::placeholder { color: var(--faint); } .field:focus { outline: none; border-color: var(--champ); box-shadow: 0 0 0 4px rgba(180,145,77,.12); } textarea.field { resize: vertical; line-height: 1.55; } /* ---- Logo ---------------------------------------------------------------- */ .logo { display: inline-flex; align-items: center; gap: 12px; } .logo .mark { width: 34px; height: 34px; flex: none; } .logo .word { font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: .18em; color: var(--ink); text-transform: uppercase; padding-left: 2px; } .logo .word b { color: var(--champ-deep); font-weight: 500; } /* ---- Header -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), background .4s var(--ease); } .site-header.scrolled { border-bottom-color: var(--line); background: var(--glass-strong); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .25s; position: relative; } .nav-links a:hover { color: var(--ink); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--champ); transition: width .3s var(--ease); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; } /* ---- Footer -------------------------------------------------------------- */ .site-footer { background: var(--ink-panel); color: var(--on-ink-muted); padding-block: clamp(56px, 8vw, 96px) 40px; } .site-footer a { color: var(--on-ink-muted); transition: color .25s; } .site-footer a:hover { color: var(--on-ink); } .site-footer .word { color: var(--on-ink); } .site-footer .word b { color: var(--champ-2); } /* ---- Reveal-on-scroll ---------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } /* ---- Grain / texture overlay -------------------------------------------- */ .grain::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Accessibility ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---- Responsive nav ------------------------------------------------------ */ @media (max-width: 860px) { .nav-links { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } .nav-cta .btn-ghost { display: none; } } /* ---- Dark focus mode (Obsidian & Champagne) ------------------------------ Token-level override; components inherit through var(). Applied via data-theme="dark" on . Deliberate single accent (champagne) on a warm near-black ground. */ :root[data-theme="dark"] { --paper: #14110C; --paper-2: #1B1710; --paper-3: #241E15; --surface: #1E1A13; --surface-warm: #221D15; --glass: rgba(18,15,10,.72); --glass-strong: rgba(18,15,10,.86); --ink: #F3ECDC; --ink-2: #CFC4AE; --muted: #9A8F79; --faint: #6E6551; --champ: #CBA968; --champ-2: #E4CB93; --champ-deep: #E0C588; /* accent text must read light on dark */ --champ-wash: #2A2214; --champ-line: #3C311C; --gold-grad: linear-gradient(122deg, #E4CB93 0%, #C2A160 45%, #9C7B3B 100%); --gold-sheen: linear-gradient(122deg, #F1E2B8 0%, #D9BC80 48%, #B4914D 100%); --line: #2C261B; --line-2: #38311F; --line-strong: #4A3F29; --ink-panel: #0C0906; --ink-panel-2: #171009; --on-ink: #F3ECDC; --on-ink-muted: #A99C82; --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.28); --sh-2: 0 4px 14px rgba(0,0,0,.36), 0 18px 46px rgba(0,0,0,.44); --sh-3: 0 12px 30px rgba(0,0,0,.5), 0 40px 90px rgba(0,0,0,.6); --sh-gold: 0 10px 30px rgba(160,124,54,.34); } :root[data-theme="dark"] .grain::before { mix-blend-mode: screen; opacity: .05; } :root[data-theme="dark"] .btn-gold { color: #211803; } :root[data-theme="dark"] .btn-ink { background: var(--champ-wash); color: var(--on-ink); border-color: var(--line-strong); } :root[data-theme="dark"] .btn-ink:hover { background: #33290f; } /* "ink chip" pattern (dark bg + light text) inverts wrong in dark → use champagne */ :root[data-theme="dark"] .seg button.on { background: var(--gold-sheen); color: #211803; border-color: transparent; box-shadow: var(--sh-gold); } :root[data-theme="dark"] .mini-steps .ms.on .n { background: var(--gold-sheen); color: #211803; border-color: transparent; } :root[data-theme="dark"] .tabs button.on { color: var(--champ-2); } :root[data-theme="dark"] .toast { background: #2A2317; color: var(--on-ink); border: 1px solid var(--line-strong); }