/* ============================================================ StudioPIC — shared design system Premium-restrained · Google-style soft shadows · purple + teal ============================================================ */ /* ---- Fonts: switchable pairs via [data-fontpair] on ---- */ :root{ --font-head: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; } html[data-fontpair="geometric"]{ --font-head: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Albert Sans', system-ui, sans-serif; } html[data-fontpair="serif"]{ --font-head: 'Newsreader', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; } /* ---- Color + token system ---- */ :root{ --ink: #18151F; --ink-soft: #4B4754; --muted: #8A8693; --faint: #B6B2BC; --line: rgba(24,21,31,0.09); --line-soft: rgba(24,21,31,0.05); --bg: #FAFAFB; --surface: #FFFFFF; --surface-2: #F4F2F7; --surface-3: #ECE9F2; --purple: #7C3FC4; --purple-600: #6A2EB3; --purple-700: #5A2599; --purple-50: #F3ECFC; --purple-100: #E8DCF7; --teal: #1FA99B; --teal-50: #E7F6F4; --teal-100: #CFEDE9; --accent: var(--purple); --accent-2: var(--teal); /* Soft, layered Google-style elevation */ --sh-1: 0 1px 2px rgba(24,21,31,.06), 0 1px 3px rgba(24,21,31,.05); --sh-2: 0 2px 6px rgba(24,21,31,.05), 0 6px 16px rgba(24,21,31,.07); --sh-3: 0 8px 20px rgba(24,21,31,.07), 0 18px 44px rgba(24,21,31,.10); --sh-4: 0 14px 32px rgba(24,21,31,.10), 0 30px 70px rgba(24,21,31,.14); --sh-accent: 0 6px 16px rgba(124,63,196,.34); --r-xs: 10px; --r-sm: 10px; --r: 10px; --r-lg: 10px; --r-xl: 10px; --r-pill: 999px; --maxw: 1200px; --gut: clamp(20px, 5vw, 64px); --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* accent treatments (Tweak) */ html[data-accent="mono"]{ --accent-2: var(--purple); --teal-50:#F3ECFC; --teal-100:#E8DCF7; } html[data-accent="minimal"]{ --accent: var(--ink); --accent-2: var(--purple); } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--purple-100); color:var(--purple-700); } h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--ink); } html[data-fontpair="serif"] h1, html[data-fontpair="serif"] h2, html[data-fontpair="serif"] h3{ font-weight:500; letter-spacing:-.01em; } p{ margin:0; } /* ---- Layout helpers ---- */ .sp-wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); } .sp-section{ padding-block:clamp(64px,9vw,128px); } .sp-eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--purple); font-weight:700; display:inline-flex; align-items:center; gap:10px; } .sp-eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--purple); display:inline-block; } .sp-h2{ font-size:clamp(30px,4.6vw,52px); } .sp-lede{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-soft); max-width:60ch; line-height:1.55; } /* ---- Buttons ---- */ .sp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:16px; line-height:1; padding:15px 26px; border-radius:var(--r); border:1px solid transparent; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease), background .2s var(--ease), color .2s; will-change:transform; white-space:nowrap; } .sp-btn svg{ width:18px; height:18px; } .sp-btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--sh-accent); position:relative; overflow:hidden; } .sp-btn--primary::before{ content:""; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-18deg); animation:btnShimmer 5.5s ease-in-out infinite; pointer-events:none; } @keyframes btnShimmer{ 0%{ left:-60%; } 16%{ left:135%; } 100%{ left:135%; } } @media (prefers-reduced-motion:reduce){ .sp-btn--primary::before{ animation:none; display:none; } } .sp-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(124,63,196,.46); background:var(--purple-600); } .sp-btn--ghost{ background:var(--surface); color:var(--ink); box-shadow:0 3px 10px rgba(24,21,31,.10); border-color:var(--line); } .sp-btn--ghost:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(24,21,31,.16); } .sp-btn--quiet{ background:transparent; color:var(--ink); padding-inline:6px; } .sp-btn--quiet:hover{ color:var(--purple); } .sp-btn--lg{ padding:18px 32px; font-size:17px; } /* arrow nudge */ .sp-btn .arr{ transition:transform .3s var(--ease-out); } .sp-btn:hover .arr{ transform:translateX(4px); } /* default inline-icon sizing (prevents unsized SVGs filling their container) */ .arr{ width:18px; height:18px; flex-shrink:0; } /* ---- Cards ---- */ .sp-card{ background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line-soft); box-shadow:var(--sh-2); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease); } .sp-card--hover:hover{ transform:translateY(-6px); box-shadow:var(--sh-4); } /* ---- Chips / tags ---- */ .sp-chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:7px 13px; border-radius:var(--r); background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line-soft); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .sp-chip--accent{ background:var(--purple-50); color:var(--purple-700); border-color:var(--purple-100); } .sp-chip--teal{ background:var(--teal-50); color:var(--teal); border-color:var(--teal-100); } /* ---- Image placeholder (striped, mono-labelled) ---- */ .sp-ph{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background: repeating-linear-gradient(135deg, var(--surface-2) 0 14px, var(--surface-3) 14px 28px); color:var(--muted); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-align:center; border-radius:var(--r); } .sp-ph span{ background:var(--surface); padding:6px 12px; border-radius:var(--r-pill); box-shadow:var(--sh-1); } /* ---- Reveal on scroll (fail-safe: only hides when html.sp-anim is set by JS) ---- */ .sp-reveal{ opacity:1; transform:none; } html.sp-anim .sp-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } html.sp-anim .sp-reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html.sp-anim .sp-reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ---- Polaroid frame (used in hero + galleries) ---- */ .sp-polaroid{ background:#fff; padding:10px 10px 38px; border-radius:6px; box-shadow:var(--sh-3); position:relative; } .sp-polaroid img, .sp-polaroid .sp-ph{ border-radius:2px; aspect-ratio:1/1; object-fit:cover; width:100%; } .sp-polaroid .cap{ position:absolute; bottom:10px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--muted); } /* ---- Divider ---- */ .sp-rule{ height:1px; background:var(--line); border:0; margin:0; } /* ---- Language switch: instant, no fade (removes the white flash) ---- */ /* ===================== Logo ===================== */ .sp-logo{ display:inline-flex; align-items:center; gap:10px; } .sp-logo__mark{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--accent); color:#fff; font-size:20px; box-shadow:var(--sh-accent); transition:transform .4s var(--ease-out); } .sp-logo:hover .sp-logo__mark{ transform:rotate(-8deg) scale(1.05); } .sp-logo__txt{ font-family:var(--font-head); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--ink); } .sp-logo__txt b{ color:var(--accent); font-weight:700; } /* ===================== Language toggle ===================== */ .sp-lang{ display:inline-flex; padding:3px; gap:2px; background:var(--surface-2); border-radius:var(--r); border:1px solid var(--line-soft); } .sp-lang__b{ border:0; background:transparent; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); padding:6px 11px; border-radius:7px; transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .sp-lang__b.is-on{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); } /* ===================== Header ===================== */ .sp-header{ position:sticky; top:0; z-index:60; transition:padding .3s var(--ease), background .3s; } .sp-header__in{ max-width:var(--maxw); margin:14px auto 0; padding:11px 14px 11px 18px; display:flex; align-items:center; gap:18px; background:rgba(255,255,255,.78); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--sh-2); transition:box-shadow .3s var(--ease), margin .3s var(--ease); } .sp-header.is-stuck .sp-header__in{ box-shadow:var(--sh-3); margin-top:8px; } .sp-header__nav{ display:flex; gap:4px; margin-inline:auto; } .sp-header__nav a{ font-size:15px; font-weight:500; color:var(--ink-soft); padding:9px 14px; border-radius:var(--r); transition:background .2s var(--ease), color .2s var(--ease); position:relative; } .sp-header__nav a:hover{ color:var(--ink); background:var(--surface-2); } .sp-header__right{ display:flex; align-items:center; gap:10px; } .sp-header__phone{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px; color:var(--ink); padding:8px 12px; border-radius:var(--r); transition:background .2s var(--ease), color .2s var(--ease); } .sp-header__phone:hover{ background:var(--surface-2); color:var(--purple); } .sp-header__phone svg{ font-size:17px; color:var(--purple); } .sp-burger{ display:none; width:42px; height:42px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center; font-size:21px; color:var(--ink); } @media (max-width:980px){ .sp-header__nav, .sp-header__phone{ display:none; } .sp-burger{ display:inline-flex; } } @media (max-width:600px){ .sp-header__right .sp-btn--primary{ display:none; } .sp-header__in{ margin-top:8px; padding:9px 10px 9px 14px; gap:10px; } } /* mobile sheet */ .sp-msheet{ position:fixed; inset:0; z-index:80; background:rgba(24,21,31,.4); opacity:0; pointer-events:none; transition:.3s; } .sp-msheet.is-open{ opacity:1; pointer-events:auto; } .sp-msheet__panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:var(--surface); box-shadow:var(--sh-4); transform:translateX(100%); transition:transform .4s var(--ease-out); display:flex; flex-direction:column; padding:22px; gap:6px; } .sp-msheet.is-open .sp-msheet__panel{ transform:none; } .sp-msheet__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .sp-msheet a{ font-family:var(--font-head); font-size:24px; font-weight:600; color:var(--ink); padding:11px 0; border-bottom:1px solid var(--line-soft); transition:color .2s var(--ease); } .sp-msheet a:hover{ color:var(--purple); } /* smooth accent/theme switching (Tweaks) */ .sp-logo__mark, .sp-chip--accent, .sp-chip--teal, .sp-eyebrow, .sp-eyebrow::before{ transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } /* ===================== Footer ===================== */ .sp-footer{ background:var(--ink); color:#fff; padding-block:clamp(56px,7vw,88px) 34px; margin-top:0; } .sp-footer a{ color:rgba(255,255,255,.72); transition:.2s; } .sp-footer a:hover{ color:#fff; } .sp-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:48px; } .sp-footer h4{ color:#fff; font-size:13px; font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; font-weight:700; } .sp-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:15px; } .sp-footer .sp-logo__txt{ color:#fff; } .sp-footer__lede{ color:rgba(255,255,255,.62); font-size:15px; max-width:34ch; margin-top:16px; line-height:1.55; } .sp-footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top:54px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.5); } @media (max-width:860px){ .sp-footer__grid{ grid-template-columns:1fr 1fr; gap:36px; } } @media (max-width:520px){ .sp-footer__grid{ grid-template-columns:1fr; } }