/* ========================================================= JTDigital — home.css (theme-complete) - SaaS (dark), Art (friendly light), Editorial (slate dark) - Whole page transforms: bg layers, fonts, nav, cards, etc. - Switch via: ========================================================= */ /* ========== Base tokens (default = SaaS / dark) ========== */ :root{ /* Color system */ --bg:#0b1016; --surface:#111826; --text:#e5e7eb; --muted:#9aa4b2; --border:#1f2a36; --accent:#0EA5A8; --accent-2:#24E5F5; /* “Paper/ink/line” for inner surfaces */ --paper:#0f172a; --ink:#e6edf3; --line:#1f2a36; /* Glow + device + artist tile */ --glow-a: rgba(36,229,245,.18); --glow-b: rgba(14,165,168,.16); --device-top:#0f1720; --device-bottom:#0b1016; --tile-artist-bg:#0e141c; /* Mesh tints */ --mesh-a: rgba(14,165,168,.32); --mesh-b: rgba(36,229,245,.22); --mesh-c: rgba(124,58,237,.12); /* Type */ --ui-font: Inter, system-ui, sans-serif; --nav-font: Inter, system-ui, sans-serif; --heading-font: Inter, system-ui, sans-serif; /* Layout */ --radius:16px; --hdr:64px; --shadow-1:0 10px 28px rgba(0,0,0,.16); --shadow-2:0 18px 60px rgba(0,0,0,.28); --elev-1:0 10px 28px rgba(0,0,0,.18); --elev-2:0 18px 60px rgba(0,0,0,.26); /* Hero tilt */ --rx: 0deg; --ry: 0deg; /* Demo palette (CraftyK9) */ --sage:#DDECE4; --sage-ink:#0f2a1f; --sand:#F5EBDD; --pebble:#E5DED2; } /* ========== Theme: Artistic Pastel (FRIENDLY LIGHT) ========== */ html[data-site-theme="art"]{ /* Flip to light UI */ --bg:#fff8f4; /* page background goes light */ --surface:#ffffff; /* cards/surfaces */ --text:#0f172a; /* main text now dark */ --muted:#475569; /* slate-ish muted */ --border:#e9ded3; /* warm light border */ --accent:#f59e0b; /* warm amber */ --accent-2:#a78bfa; /* pastel violet */ --paper:#ffffff; /* light paper */ --ink:#0f172a; /* dark ink */ --line:#e9ded3; --glow-a: rgba(249,168,212,.22); --glow-b: rgba(253,230,138,.20); --device-top:#f7eee6; /* device tint light */ --device-bottom:#f3e7dd; --tile-artist-bg:#f4ecff; /* friendly dark-on-light prism frame */ /* Mesh tints (soft, friendly) */ --mesh-a: rgba(253,230,138,.35); /* pastel yellow */ --mesh-b: rgba(147,197,253,.28); /* baby blue */ --mesh-c: rgba(249,168,212,.30); /* pink */ /* Fonts */ --ui-font: "DM Sans", Inter, system-ui, sans-serif; --nav-font: "DM Sans", Inter, system-ui, sans-serif; --heading-font: "Caveat", "Comic Neue", system-ui, cursive; } /* ========== Theme: Editorial Minimal (SLATE DARK) ========== */ html[data-site-theme="editorial"]{ --bg:#0b0e12; --surface:#0f141a; --text:#e5e7eb; --muted:#a5b4c0; --border:#1b2632; --accent:#94a3b8; --accent-2:#cbd5e1; --paper:#0f141a; --ink:#e5e7eb; --line:#1b2632; --glow-a: rgba(148,163,184,.18); --glow-b: rgba(100,116,139,.14); --device-top:#0e1216; --device-bottom:#0a0d10; --tile-artist-bg:#0b1016; --mesh-a: rgba(148,163,184,.22); --mesh-b: rgba(100,116,139,.18); --mesh-c: rgba(51,65,85,.16); --ui-font: "IBM Plex Sans", Inter, system-ui, sans-serif; --nav-font: "EB Garamond", Georgia, serif; /* classic nav/brand */ --heading-font: "EB Garamond", Georgia, serif; /* elegant headings */ } /* ========== Global resets & typography ========== */ *{ box-sizing:border-box; } html,body{ margin:0; } body{ background:var(--bg); color:var(--text); font-family:var(--ui-font); overflow-x:hidden; } a{ color:inherit; text-decoration:none; } .wrap{ width:min(1200px,94vw); margin-inline:auto; } /* ========== Background layers (per-theme) ========== */ #stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85; } .bg-overlays>*{ position:fixed; inset:0; z-index:0; pointer-events:none; } /* Grain */ .bg-grain{ opacity:.05; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAMUlEQVQYV2NkwA7+Z2BgYGB4wMDA8J8B8c9gYGBg+M8gEw0MQ8QYxgYGBrgYg4oGAAy8wP8c0wJywAAAABJRU5ErkJggg=='); mix-blend-mode:overlay; } /* Mesh (uses theme tints) */ .bg-mesh{ opacity:.18; filter:blur(18px); background: radial-gradient(60% 60% at 20% 30%, var(--mesh-a), transparent 60%) 0% 0% / 140% 140% no-repeat, radial-gradient(50% 50% at 80% 70%, var(--mesh-b), transparent 60%) 0% 0% / 140% 140% no-repeat, radial-gradient(40% 50% at 50% 10%, var(--mesh-c), transparent 70%) 0% 0% / 160% 160% no-repeat; } /* Vignette */ .bg-vignette{ opacity:.22; background: radial-gradient(60% 60% at 50% 50%, transparent 60%, rgba(0,0,0,.6) 100%); } /* LIGHT tuning for Art */ html[data-site-theme="art"] #stars{ opacity:.22; } /* calm the starfield in light mode */ html[data-site-theme="art"] .bg-grain{ opacity:.12; } /* a bit more texture on light */ html[data-site-theme="art"] .bg-mesh{ opacity:.22; filter: blur(14px); } html[data-site-theme="art"] .bg-vignette{ opacity:.14; /* lighter vignette on light bg */ background: radial-gradient(60% 60% at 50% 50%, transparent 60%, rgba(0,0,0,.18) 100%); } /* EDITORIAL tuning */ html[data-site-theme="editorial"] .bg-grain{ opacity:.04; } html[data-site-theme="editorial"] .bg-mesh{ opacity:.20; } html[data-site-theme="editorial"] .bg-vignette{ opacity:.28; } /* ========== Header / Navbar ========== */ .site-header{ position:sticky; top:0; z-index:1000; transition: background .35s, border-color .35s, box-shadow .35s; backdrop-filter: saturate(130%) blur(8px); -webkit-backdrop-filter: saturate(130%) blur(8px); font-family: var(--nav-font); } .site-header .wrap{ padding:12px 0; display:flex; align-items:center; gap:16px; } /* Transparent */ .site-header.is-transparent{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 10%), transparent); border-bottom: 1px solid transparent; } /* Light variant */ html[data-site-theme="art"] .site-header.is-transparent{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 4%), transparent); } /* Solid */ .site-header.is-solid{ background: color-mix(in oklab, var(--bg), #000 12%); border-bottom: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.25); } /* Solid (light) */ html[data-site-theme="art"] .site-header.is-solid{ background: color-mix(in oklab, var(--surface), #000 6%); border-bottom-color: var(--line); box-shadow: 0 6px 22px rgba(0,0,0,.08); } .brand{ font-weight:900; letter-spacing:-.02em; white-space:nowrap; } .site-nav{ margin-left:auto; display:flex; gap:18px; } .site-nav a{ color: color-mix(in oklab, var(--text), transparent 20%); font-weight:700; font-size:.95rem; } .site-nav a:hover{ color: var(--text); } .hdr-ctas{ display:flex; gap:10px; margin-left:16px; } /* Link underline accent */ .site-nav a{ position: relative; padding: .35rem .2rem; text-decoration: none; } .site-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } html[data-site-theme="editorial"] .site-nav a::after{ height:1px; background: color-mix(in oklab, var(--accent), #fff 15%); } .site-nav a:hover::after, .site-nav a:focus-visible::after{ transform: scaleX(1); } .site-nav a.is-active{ color: var(--text); } .site-nav a.is-active::after{ transform: scaleX(1); } /* Header progress */ .scrollbar{ height:2px; background: color-mix(in oklab, var(--text) 12%, transparent); } .scrollbar span{ display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width .2s; } @supports (animation-timeline: scroll(root)){ .scrollbar span{ animation: grow linear both; animation-timeline: scroll(root); animation-range: 0 100%; } @keyframes grow{ to{ width:100% } } } /* Mobile nav button */ .hamburger{ display:none; background:transparent; border:none; width:44px; height:44px; margin-left:8px; } .hamburger span{ display:block; width:22px; height:2px; background:var(--text); margin:5px auto; transition: transform .2s, opacity .2s; } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 } .hamburger[aria-expanded="true"] span:first-child{ transform: translateY(6px) rotate(45deg); } .hamburger[aria-expanded="true"] span:last-child{ transform: translateY(-6px) rotate(-45deg); } /* ========== Buttons ========== */ .btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:10px 14px; font-weight:800; transition: transform .08s, box-shadow .2s, border-color .2s, background .2s; } .btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-1); } .btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); } .btn-primary.outline{ background:transparent; border:2px solid var(--accent); color:var(--accent); } .btn-primary.outline:hover{ background: color-mix(in oklab, var(--accent), transparent 85%); } .btn-secondary{ border:2px solid color-mix(in oklab, var(--accent), var(--border) 65%); color:var(--accent); } .btn-secondary:hover{ border-color:var(--accent); transform:translateY(-1px); } html[data-site-theme="editorial"] .btn-secondary{ border-color: color-mix(in oklab, var(--accent), var(--border) 50%); color: var(--accent); } /* ========== Hero ========== */ .hero{ position:relative; min-height: calc(100svh - var(--hdr)); display:grid; place-items:center; text-align:center; overflow:hidden; perspective:1000px; isolation:isolate; } .hero .wrap{ display:grid; place-items:center; } .hero-inner{ width:100%; padding: clamp(24px, 6vh, 80px) 0 clamp(16px, 4vh, 60px); will-change: transform; transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transition: transform .12s ease-out; } .hero-copy h1{ margin:.1rem 0 .25rem; line-height:1.02; position:relative; font-size: clamp(2.2rem, 6.2vw, 3.6rem); font-weight:900; letter-spacing:-.02em; font-family: var(--heading-font); } .section-hd h2{ font-family: var(--heading-font); font-size: clamp(1.6rem, 3.8vw, 2.2rem); margin: 0 0 .25rem; letter-spacing:-.01em; } .hero p{ margin:.25rem auto .8rem; color: color-mix(in oklab, var(--text), transparent 18%); max-width: 780px; } .btn-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .hero-notes{ opacity:.75; margin-top:.6rem; } /* Hero decor */ .hero-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; } .orb{ position:absolute; width:44vmin; height:44vmin; border-radius:999px; filter: blur(24px); opacity:.45; } .orb-a{ left:-8vmin; top:-6vmin; background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent), #fff 14%), transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--accent-2), #fff 8%), transparent 62%); } .orb-b{ right:-10vmin; bottom:-12vmin; width:52vmin; height:52vmin; background: radial-gradient(circle at 60% 40%, rgba(124,58,237,.18), transparent 60%), radial-gradient(circle at 40% 70%, rgba(14,165,168,.12), transparent 62%); } /* Adjust for themes */ html[data-site-theme="art"] .orb-a{ background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent-2), #fff 22%), transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--accent), #fff 16%), transparent 62%); } html[data-site-theme="editorial"] .orb-a{ background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent), #fff 12%), transparent 60%), radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--accent-2), #fff 6%), transparent 62%); } /* Spotlight + sheen */ .hero-spot{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(28vmin 28vmin at var(--mx,50%) var(--my,50%), rgba(255,255,255,.035), transparent 60%); mix-blend-mode: screen; } .hero-title .hero-sheen{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.18) 50%, transparent 60% 100%); mix-blend-mode: screen; opacity:0; } /* Scroll cue */ .scroll-cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background: transparent; border:1px solid color-mix(in oklab, var(--text), transparent 70%); color: color-mix(in oklab, var(--text), transparent 30%); font-weight:800; font-size:.8rem; padding:6px 10px; border-radius:999px; pointer-events:none; animation: cueBounce 1.8s ease-in-out infinite; } @keyframes cueBounce{ 0%,100%{ transform:translate(-50%,0); opacity:.9 } 50%{ transform:translate(-50%,4px); opacity:.65 } } @media (prefers-reduced-motion: reduce){ .orb,.hero-spot,.hero-title .hero-sheen{ display:none; } .scroll-cue{ animation:none } .hero .hero-inner{ transform:none !important; } } /* ========== Sections / helpers ========== */ .section{ position:relative; padding: clamp(36px, 8vw, 80px) 0; } .section-hd p{ margin:0 0 1rem; color: color-mix(in oklab, var(--text), transparent 24%); } .section .divider{ position:absolute; left:50%; transform:translateX(-50%) scaleX(0); transform-origin:left; top:0; width:min(1200px,94vw); height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); opacity:.9; } .grid{ display:grid; gap:14px; align-items:stretch; } .grid.three{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 960px){ .grid.three{ grid-template-columns: 1fr; } } /* ========== Process cards ========== */ .card{ border-radius:14px; padding:16px; background: color-mix(in oklab, var(--surface), transparent 12%); border:1px solid color-mix(in oklab, var(--border), transparent 35%); box-shadow: var(--elev-1); } .card h3{ margin:.1rem 0 .25rem; display:flex; align-items:center; gap:10px; font-family: var(--heading-font); } .card p{ margin:0; color: color-mix(in oklab, var(--text), transparent 22%); } .step-badge{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background: color-mix(in oklab, var(--accent), #fff 80%); color:#082f32; font-weight:900; } /* ===== Stack grid — branded, bigger, animated ===== */ .section-stack .stack-filters{ display:flex; gap:8px; margin: 6px 0 14px; flex-wrap: wrap; } .section-stack .chip{ border:1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 8%); color: var(--text); border-radius:999px; padding:6px 10px; font: 700 .85rem var(--ui-font); cursor:pointer; } .section-stack .chip.is-active{ border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 85%); } .stack-grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns: repeat(6, minmax(0,1fr)); } @media (max-width: 1100px){ .stack-grid{ grid-template-columns: repeat(4, 1fr) } } @media (max-width: 740px){ .stack-grid{ grid-template-columns: repeat(2, 1fr) } } .stack-card{ --brand: var(--accent); position:relative; overflow:hidden; display:grid; align-content:space-between; justify-items:start; gap:10px; padding:14px; min-height:140px; border-radius:16px; border:1px solid color-mix(in oklab, var(--border), transparent 25%); background: radial-gradient(120% 120% at 10% -10%, color-mix(in oklab, var(--brand) 20%, transparent) 0%, transparent 50%), color-mix(in oklab, var(--surface), transparent 8%); box-shadow: var(--elev-1); cursor: pointer; transform-style: preserve-3d; transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; } .stack-card:hover{ box-shadow: var(--elev-2); border-color: color-mix(in oklab, var(--brand), var(--border) 45%); } /* animated conic ring */ .stack-card .ring{ position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background: conic-gradient(from 210deg, color-mix(in oklab, var(--brand), transparent 0%) 0 20%, transparent 20% 60%, color-mix(in oklab, var(--brand), transparent 0%) 60% 80%, transparent 80% 100%); opacity:.35; filter: blur(10px) saturate(115%); transform: translateZ(0); transition: opacity .25s ease; } .stack-card:hover .ring{ opacity:.6; } /* icon */ .stack-card .logo{ width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background: color-mix(in oklab, var(--brand) 26%, var(--surface)); color: color-mix(in oklab, var(--brand), #fff 20%); transform: translateZ(24px); box-shadow: 0 6px 24px color-mix(in oklab, var(--brand), transparent 75%); } .stack-card .logo svg{ width:34px; height:34px; display:block; } /* label */ .stack-card .meta{ transform: translateZ(20px); } .stack-card strong{ font:800 .98rem var(--heading-font); letter-spacing:.01em; } .stack-card small{ display:block; opacity:.8; } /* focus */ .stack-card:focus-visible{ outline:none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 55%); } /* brand palettes */ .brand--react{ --brand:#61dafb; } .brand--next{ --brand:#ffffff; } .brand--gsap{ --brand:#88ce02; } .brand--node{ --brand:#68a063; } .brand--php{ --brand:#777bb3; } .brand--pg{ --brand:#336791; } .brand--tailwind{ --brand:#38bdf8; } .brand--vite{ --brand:#646cff; } .brand--cloudflare{ --brand:#f38020; } .brand--vercel{ --brand:#ffffff; } .brand--aws{ --brand:#ff9900; } .brand--stripe{ --brand:#635bff; } /* adapt for editorial (thin ring, higher contrast logo) */ html[data-site-theme="editorial"] .stack-card .logo{ background: color-mix(in oklab, var(--brand) 24%, #0e141a); color: color-mix(in oklab, var(--brand), #fff 18%); } /* hidden via filtering */ .stack-card[hidden]{ display:none !important; } /* tiny “copied” toast */ .stack-toast{ position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--paper); color: var(--ink); border:1px solid var(--line); padding: 8px 12px; border-radius: 999px; box-shadow: var(--shadow-2); z-index: 10002; font: 700 .85rem var(--ui-font); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; } .stack-toast.show{ opacity:1; transform: translateX(-50%) translateY(-4px); } /* ================= Style Kits ================ */ .style-kits .kit-grid{ display:grid; grid-template-columns: repeat(4, minmax(300px, 1fr)); /* a bit bigger */ gap: clamp(16px, 2.2vw, 24px); } @media (max-width: 1200px){ .style-kits .kit-grid{ grid-template-columns: repeat(3, minmax(300px, 1fr)); } } @media (max-width: 900px){ .style-kits .kit-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); } } @media (max-width: 580px){ .style-kits .kit-grid{ grid-template-columns: 1fr; } } .kit{ /* Site theme chrome (matches the website) */ position:relative; display:flex; flex-direction:column; min-height: 400px; /* ~bigger */ border-radius: 18px; padding: 16px; background: color-mix(in oklab, var(--surface), transparent 6%); border:1px solid color-mix(in oklab, var(--border), transparent 28%); box-shadow: var(--elev-2); overflow:hidden; isolation:isolate; will-change: transform, box-shadow, border-color; } .kit > *{ position:relative; z-index:1; } /* Subtle kit-tinted chrome so each card has its own vibe */ .kit::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:46px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, color-mix(in oklab, var(--kit-accent), transparent 76%), transparent 85%); pointer-events:none; z-index:0; opacity:.95; } .kit::after{ content:""; position:absolute; left:10%; right:10%; bottom:-10px; height:34px; border-radius: 50%; background: radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--kit-accent), transparent 84%), transparent 72%); filter: blur(18px); opacity:.7; z-index:0; pointer-events:none; } /* Hover/active state: still sitey, but tinted by the kit accent */ .kit:hover{ transform: translateY(-3px); box-shadow: 0 28px 90px color-mix(in oklab, var(--kit-accent), transparent 82%); border-color: color-mix(in oklab, var(--kit-accent), var(--border) 70%); } /* Header matches site typography; small accent dot from kit */ .kit-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 12px; } .kit-title{ margin:0; font-size:1.08rem; letter-spacing:.01em; font-family: var(--heading-font); display:flex; align-items:center; gap:8px; } .kit-title::before{ content:""; width:10px; height:10px; border-radius:999px; flex:0 0 10px; background: var(--kit-accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--kit-accent), transparent 86%); } .kit-tags{ color: color-mix(in oklab, var(--text), transparent 26%); font-weight:600; font-size:.9rem; } /* TYPE PREVIEW — stylised per kit, on a “paper” surface */ .kit-type{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 12px; background: var(--kit-paper); color: var(--kit-ink); border-radius: 14px; padding: 12px; border:1px solid color-mix(in oklab, var(--kit-ink), transparent 85%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); } @media (max-width: 680px){ .kit-type{ grid-template-columns: 1fr; } } .type-head{ font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.01em; } .type-body{ opacity:.9; margin-top: 2px; font-size: .96rem; } .type-right{ position:relative; border-radius: 10px; background: color-mix(in oklab, var(--kit-ink), transparent 92%); } .type-right::before{ content:""; position:absolute; inset:6px; border-radius: 8px; background: linear-gradient(to right, color-mix(in oklab, var(--kit-ink), transparent 88%) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--kit-ink), transparent 88%) 1px, transparent 1px); background-size: 22px 16px; opacity:.7; } .type-right.cart .badge{ position:absolute; right:10px; bottom:10px; font-size:.7rem; font-weight:900; background: var(--kit-accent); color:#fff; padding:4px 8px; border-radius:6px; box-shadow: 0 6px 16px color-mix(in oklab, var(--kit-accent), transparent 50%); } .type-right.rule{ background: color-mix(in oklab, var(--kit-ink), transparent 94%); } .type-right.rule::after{ content:""; position:absolute; left:8px; right:8px; top:42%; height:1px; background: color-mix(in oklab, var(--kit-ink), transparent 70%); } .type-right.rule .drop-a{ position:absolute; left:12px; top:8px; font-size: 28px; font-weight:700; color: color-mix(in oklab, var(--kit-ink), transparent 12%); } .type-right.blobs{ filter: blur(10px); background: radial-gradient(36% 46% at 30% 60%, color-mix(in oklab, var(--kit-accent), #fff 18%), transparent 70%), radial-gradient(40% 50% at 70% 40%, color-mix(in oklab, var(--kit-accent-2), #fff 12%), transparent 70%); } /* Swatches */ .kit-swatches{ list-style:none; margin: 12px 0 0; padding:0; display:flex; gap:8px; flex-wrap:wrap; } .kit-swatches li{ width: 28px; height: 28px; border-radius: 9px; background: var(--c); border:1px solid color-mix(in oklab, #000, var(--c) 80%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } /* Buttons + tokens (stylised per kit, but framed by site chrome) */ .kit-ui{ margin-top: 12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .kit-btn{ font-weight:800; border-radius: 12px; padding: 8px 12px; cursor:default; border: 2px solid transparent; box-shadow: var(--shadow-1); background: color-mix(in oklab, var(--kit-accent), transparent 0%); color:#fff; } .kit-btn.ghost{ background: transparent; color: var(--kit-accent); border-color: color-mix(in oklab, var(--kit-accent), var(--line) 60%); box-shadow:none; } .token{ width: 38px; height: 28px; border-radius: var(--kit-radius); } .token-radius{ background: color-mix(in oklab, var(--kit-surface), var(--kit-paper) 40%); border:1px dashed color-mix(in oklab, var(--kit-ink), transparent 70%); } .token-shadow{ background: var(--kit-surface); box-shadow: 0 12px 28px rgba(0,0,0,.28); border:1px solid color-mix(in oklab, var(--kit-ink), transparent 85%); } /* Footer meta (keeps site look) */ .kit-foot{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top: 12px; border-top:1px dashed color-mix(in oklab, var(--border), transparent 25%); } .kit-foot code{ font-size:.82rem; opacity:.92; } /* Per-kit tokens (only the preview area changes style) */ .kit-saas{ --kit-head: Inter, system-ui, sans-serif; --kit-body: Inter, system-ui, sans-serif; --kit-accent:#0EA5A8; --kit-accent-2:#24E5F5; --kit-paper:#0f172a; --kit-ink:#e6edf3; --kit-surface:#111826; --kit-radius: 12px; } .kit-ecom{ --kit-head: "DM Sans", system-ui, sans-serif; --kit-body: "DM Sans", system-ui, sans-serif; --kit-accent:#F59E0B; --kit-accent-2:#34D399; --kit-paper:#ffffff; --kit-ink:#0f172a; --kit-surface:#F7FAFC; --kit-radius: 14px; } .kit-editorial{ --kit-head: "EB Garamond", Georgia, serif; --kit-body: "IBM Plex Sans", system-ui, sans-serif; --kit-accent:#94A3B8; --kit-accent-2:#CBD5E1; --kit-paper:#0f141a; --kit-ink:#e5e7eb; --kit-surface:#0b1016; --kit-radius: 8px; } .kit-portfolio{ --kit-head: "Outfit", Inter, system-ui, sans-serif; --kit-body: "Outfit", Inter, system-ui, sans-serif; --kit-accent:#A78BFA; --kit-accent-2:#22D3EE; --kit-paper:#0f172a; --kit-ink:#e6edf3; --kit-surface:#101827; --kit-radius: 16px; } /* Buttons + tokens */ .kit-ui{ margin-top: 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .kit-btn{ font-weight:800; border-radius: 12px; padding: 8px 12px; cursor:default; border: 2px solid transparent; box-shadow: var(--shadow-1); background: color-mix(in oklab, var(--kit-accent), transparent 0%); color:#fff; } .kit-btn.ghost{ background: transparent; color: var(--kit-accent); border-color: color-mix(in oklab, var(--kit-accent), var(--line) 60%); box-shadow:none; } .token{ width: 36px; height: 26px; border-radius: var(--kit-radius); } .token-radius{ background: color-mix(in oklab, var(--kit-surface), var(--kit-paper) 40%); border:1px dashed color-mix(in oklab, var(--kit-ink), transparent 70%); } .token-shadow{ background: var(--kit-surface); box-shadow: 0 12px 28px rgba(0,0,0,.28); border:1px solid color-mix(in oklab, var(--kit-ink), transparent 85%); } /* Footer meta */ .kit-foot{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top: 10px; border-top:1px dashed color-mix(in oklab, var(--border), transparent 25%); } .kit-foot code{ font-size:.8rem; opacity:.9; } /* Per-kit tokens (fonts/colors) */ .kit-saas{ --kit-head: Inter, system-ui, sans-serif; --kit-body: Inter, system-ui, sans-serif; --kit-accent:#0EA5A8; --kit-accent-2:#24E5F5; --kit-paper:#0f172a; --kit-ink:#e6edf3; --kit-surface:#111826; --kit-radius: 12px; } .kit-ecom{ --kit-head: "DM Sans", system-ui, sans-serif; --kit-body: "DM Sans", system-ui, sans-serif; --kit-accent:#F59E0B; --kit-accent-2:#34D399; --kit-paper:#ffffff; --kit-ink:#0f172a; --kit-surface:#F7FAFC; --kit-radius: 14px; } .kit-editorial{ --kit-head: "EB Garamond", Georgia, serif; --kit-body: "IBM Plex Sans", system-ui, sans-serif; --kit-accent:#94A3B8; --kit-accent-2:#CBD5E1; --kit-paper:#0f141a; --kit-ink:#e5e7eb; --kit-surface:#0b1016; --kit-radius: 8px; } .kit-portfolio{ --kit-head: "Outfit", Inter, system-ui, sans-serif; --kit-body: "Outfit", Inter, system-ui, sans-serif; --kit-accent:#A78BFA; --kit-accent-2:#22D3EE; --kit-paper:#0f172a; --kit-ink:#e6edf3; --kit-surface:#101827; --kit-radius: 16px; } /* ========== Featured Work (device + glow are theme-driven) ========== */ .section-featured .case{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; border-radius:20px; padding:18px; position:relative; isolation:isolate; background: color-mix(in oklab, var(--surface), transparent 8%); border:1px solid color-mix(in oklab, var(--border), transparent 28%); box-shadow: var(--elev-2); } @media (max-width: 900px){ .section-featured .case{ grid-template-columns: 1fr; } } .section-featured .case::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:.6; background: radial-gradient(80% 80% at 22% 12%, var(--glow-a), transparent 70%), radial-gradient(70% 70% at 78% 60%, var(--glow-b), transparent 72%); } .case-content h3{ margin:.2rem 0 .4rem; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-family: var(--heading-font); } .case-logo{ display:inline-grid; place-items:center; height:34px; padding:0 10px; border-radius:10px; font-weight:900; letter-spacing:.01em; background: linear-gradient(180deg, var(--sage), var(--pebble)); color: var(--sage-ink); border:1px solid #dae7df; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .case-points{ margin:.4rem 0 .8rem; padding-left:18px; } .case-cta{ display:flex; gap:10px; } /* Device preview */ .case-media{ display:grid; place-items:center; } .device{ width:100%; max-width:520px; aspect-ratio: 16/10; border-radius:18px; background: linear-gradient(180deg, var(--device-top), var(--device-bottom)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 24px 80px rgba(0,0,0,.35); position:relative; overflow:hidden; } .device .screen{ position:absolute; inset:10px; border-radius:12px; background: transparent; } /* Mini K9 site — per-theme remaps */ .k9-site{ --k9-ink: #143127; --k9-sage: #DDECE4; --k9-sage-600: #2F5E4F; --k9-sage-500: #3A6B5A; --k9-beige: #F5EBDD; --k9-peach: #F6D1B1; --k9-peach-600: #D89A6C; --k9-line: #E6E2D9; height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:12px; color: var(--k9-ink); background: linear-gradient(180deg, var(--k9-beige), #ffffff); box-shadow: inset 0 0 0 1px var(--k9-line); } .k9-header{ display:flex; align-items:center; justify-content:space-between; margin:8px; padding:8px 10px; border-radius:10px; background:#fff; border:1px solid var(--k9-line); } .k9-logo{ font-weight:900; letter-spacing:-.01em; } .k9-logo span{ color: var(--k9-sage-600); } .k9-nav{ display:flex; gap:10px; color: var(--k9-sage-500); font-weight:700; font-size:11px; } /* Theme remaps */ html[data-site-theme="saas"] .k9-site{ --k9-ink:#102a2d; --k9-beige:#eaf7f6; --k9-sage:#d9fbff; --k9-sage-600:#137d86; --k9-sage-500:#17919b; --k9-peach:#e6fbff; --k9-peach-600:#0ea5a8; --k9-line:#d4eef0; } html[data-site-theme="art"] .k9-site{ --k9-ink:#3b2f2a; --k9-beige:#fff7ee; --k9-sage:#fde2f1; --k9-sage-600:#d67fb5; --k9-sage-500:#e1a7cc; --k9-peach:#fce6b7; --k9-peach-600:#e0a86d; --k9-line:#f3d5c6; } html[data-site-theme="editorial"] .k9-site{ --k9-ink:#e5e7eb; --k9-beige:#0f141a; --k9-sage:#0f141a; --k9-sage-600:#94a3b8; --k9-sage-500:#a5b4c0; --k9-peach:#11171c; --k9-peach-600:#64748b; --k9-line:#1f2a36; background: linear-gradient(180deg, var(--k9-beige), #0b1016); } html[data-site-theme="editorial"] .k9-header, html[data-site-theme="editorial"] .k9-card, html[data-site-theme="editorial"] .k9-foot{ background:#0d1218 !important; } /* ========== Pricing ========== */ .section-pricing{ background: color-mix(in oklab, var(--surface), transparent 82%); position: relative; } .section-pricing .wrap{ display:block; } .section-pricing::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top: clamp(14px, 3vw, 28px); width:min(1100px,92vw); height: 520px; background: radial-gradient(60% 100% at 50% 0%, rgba(14,165,168,.18), transparent 70%); filter: blur(10px); opacity:.5; pointer-events:none; border-radius: 24px; } html[data-site-theme="art"] .section-pricing::before{ background: radial-gradient(60% 100% at 50% 0%, rgba(249,168,212,.22), transparent 70%); } html[data-site-theme="editorial"] .section-pricing::before{ background: radial-gradient(60% 100% at 50% 0%, rgba(148,163,184,.18), transparent 70%); } .price-grid{ display:grid; grid-template-columns: repeat(3, minmax(340px, 1fr)); gap: clamp(14px, 2vw, 22px); align-items: stretch; } @media (max-width: 1100px){ .price-grid{ grid-template-columns: repeat(2, minmax(300px, 1fr)); } } @media (max-width: 720px){ .price-grid{ grid-template-columns: 1fr; } } .price-card{ display:flex; flex-direction:column; overflow:hidden; min-height: clamp(320px, 36vh, 420px); border-radius:18px; padding: clamp(16px, 2.2vw, 22px); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border:1px solid color-mix(in oklab, var(--border), transparent 22%); box-shadow: var(--elev-2); transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; } @media (hover:hover){ .price-card:hover{ transform: translateY(-4px); box-shadow: 0 28px 90px rgba(0,0,0,.18); border-color: color-mix(in oklab, var(--accent), var(--border) 35%); } } .price-card.is-popular{ border-color: color-mix(in oklab, var(--accent), var(--border) 25%); box-shadow: 0 34px 120px rgba(14,165,168,.28); } html[data-site-theme="art"] .price-card.is-popular{ box-shadow: 0 34px 120px rgba(249,168,212,.32); } html[data-site-theme="editorial"] .price-card.is-popular{ box-shadow: 0 34px 120px rgba(148,163,184,.28); } .pc-badge{ position:absolute; top:12px; right:12px; background: var(--accent); color:#fff; font-size:.72rem; font-weight:900; padding:4px 8px; border-radius:6px; } .pc-head{ margin-bottom: 8px; } .pc-title{ margin:.1rem 0 .1rem; font-size: clamp(1.05rem,1.2vw,1.2rem); letter-spacing:.01em; font-family: var(--heading-font); } .pc-sub{ margin:.1rem 0 .6rem; color: color-mix(in oklab, var(--text), transparent 20%); text-wrap: balance; } .pc-body{ flex: 1 1 auto; } .pc-features{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .pc-features li{ display:flex; gap:10px; align-items:flex-start; color: color-mix(in oklab, var(--text), transparent 12%); } .pc-features li::before{ content:""; flex: 0 0 12px; height:12px; margin-top:.35rem; border-radius:3px; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 75%); } @media (min-width: 1000px){ .pc-features{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .pc-foot{ margin-top:auto; padding-top:12px; border-top:1px dashed color-mix(in oklab, var(--border), transparent 25%); display:flex; gap:10px; } .price-footnote{ max-width:56ch; margin:16px 0 0; } /* ========== Testimonials ========== */ .quotes-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; } @media (max-width: 900px){ .quotes-grid{ grid-template-columns: 1fr; } } .quote-card{ border-radius:16px; padding:16px; background: color-mix(in oklab, var(--surface), transparent 10%); border:1px solid color-mix(in oklab, var(--border), transparent 30%); box-shadow: var(--elev-1); position:relative; overflow:hidden; } .quote-card::before{ content:"“"; position:absolute; right:12px; top:-12px; font-size: 80px; opacity:.06; } html[data-site-theme="art"] .quote-card::before{ opacity:.07; color: color-mix(in oklab, var(--ink), transparent 80%); } html[data-site-theme="editorial"] .quote-card::before{ opacity:.05; } .q-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; } .avatar{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:900; background: color-mix(in oklab, var(--accent), #fff 80%); color:#082f32; } /* ========== Final CTA band ========== */ .section-cta-band{ background: linear-gradient(120deg, color-mix(in oklab, var(--accent), #1a2a32 55%), color-mix(in oklab, var(--accent-2), #16222a 70%)); border-block: 1px solid rgba(255,255,255,.08); } html[data-site-theme="art"] .section-cta-band{ background: linear-gradient(120deg, color-mix(in oklab, var(--accent), #fff 65%), color-mix(in oklab, var(--accent-2), #fff 72%)); border-block: 1px solid rgba(0,0,0,.06); } .cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; } @media (max-width: 860px){ .cta-band-inner{ flex-direction:column; text-align:center; } } .section-cta-band h2{ margin:.1rem 0 .25rem; font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-family: var(--heading-font); } .section-cta-band p{ margin:0; opacity:.9; } /* ========== Contact ========== */ .contact-form{ border:1px solid color-mix(in oklab, var(--border), transparent 35%); background: color-mix(in oklab, var(--surface), transparent 10%); border-radius:18px; padding: 16px; box-shadow: var(--elev-2); } .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .form-grid .full{ grid-column: 1 / -1; } label span{ display:block; font-weight:700; font-size:.92rem; margin: 0 0 6px; color: color-mix(in oklab, var(--text), transparent 15%); } input, textarea{ width:100%; border-radius:12px; border:1px solid color-mix(in oklab, var(--border), transparent 30%); background: color-mix(in oklab, var(--surface), transparent 6%); color: var(--text); padding:12px; font: inherit; outline:none; transition: border-color .2s, background .2s; } input:focus, textarea:focus{ border-color: var(--accent); background: color-mix(in oklab, var(--surface), transparent 0%); } .form-actions{ display:flex; gap:10px; align-items:center; margin-top: 10px; flex-wrap:wrap; } /* ========== Footer ========== */ .site-footer{ border-top:1px solid var(--border); margin-top: 36px; background: color-mix(in oklab, var(--bg), #000 6%); } html[data-site-theme="art"] .site-footer{ background: color-mix(in oklab, var(--bg), #000 2%); /* very light tint */ border-top-color: var(--line); } .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; padding: 24px 0; align-items:start; } .f-brand .brand{ font-weight:900; margin: 0 0 6px; font-family: var(--nav-font); } .f-brand p{ margin:.2rem 0 .6rem; color: color-mix(in oklab, var(--text), transparent 20%); } .f-nav h4, .f-contact h4{ margin:.2rem 0 .4rem; font-family: var(--heading-font); } .f-nav a, .f-contact a{ display:block; color: color-mix(in oklab, var(--text), transparent 20%); margin:.14rem 0; } .f-nav a:hover, .f-contact a:hover{ color: var(--text); } .socials{ display:flex; gap:10px; } .legal{ border-top:1px solid color-mix(in oklab, var(--border), transparent 35%); padding: 10px 0 18px; } /* ========== Reveal hooks ========== */ .reveal{ opacity:0; transform: translateY(14px); } /* optional: stop clipping on .wipe now that the overlay is gone */ .wipe{ overflow: visible; } /* ===== Off-canvas Mobile Drawer (separate from desktop nav) ===== */ /* Hide desktop nav + CTAs on mobile; show hamburger right-aligned */ @media (max-width: 960px){ .site-nav, .hdr-ctas{ display:none !important; } .hamburger{ display:block; margin-left:auto; padding:10px; border-radius:10px; border:1px solid var(--border); background: var(--surface); } } /* Drawer panel (inserted by JS) */ .mobile-drawer{ position: fixed; left: 0; right: 0; top: var(--hdr, 64px); bottom: 0; background: var(--bg); border-top: 1px solid var(--border); z-index: 10002; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); overflow: auto; } .mobile-open .mobile-drawer{ transform: translateY(0); opacity: 1; pointer-events: auto; } /* Scrim behind the drawer */ .mobile-scrim{ position: fixed; inset: 0; background: color-mix(in oklab, var(--bg) 85%, #000 15%); z-index: 10001; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .mobile-open .mobile-scrim{ opacity: 1; pointer-events: auto; } /* Vertical link stack */ .md-links{ display:grid; gap:8px; } .mobile-drawer a{ display:block; padding:.9rem .25rem; font-weight:800; border-radius:10px; color: var(--text); } .mobile-drawer a:active{ background: color-mix(in oklab, var(--accent), transparent 88%); } /* Drawer actions (duplicated CTAs) */ .md-actions{ display:flex; gap:8px; margin-top:10px; border-top:1px dashed var(--border); padding-top:12px; } /* Keep drawer out of the way on desktop */ @media (min-width: 961px){ .mobile-drawer, .mobile-scrim{ display:none !important; } } /* Safety: no horizontal overflow */ html, body{ max-width:100%; overflow-x:hidden; } img, svg, canvas, video{ max-width:100%; height:auto; } /* Theme picker stays above drawer/scrim and inside viewport */ .theme-picker{ z-index:10003; right:max(12px, env(safe-area-inset-right,0) + 12px); bottom:max(12px, env(safe-area-inset-bottom,0) + 12px); } .theme-panel{ inline-size: clamp(220px, 88vw, 360px); } /* ========== Focus styles & smooth theme transitions ========== */ .site-nav a:focus-visible, .hamburger:focus-visible, .btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 10px; } @media (prefers-reduced-motion: no-preference){ html, body, .site-header, .card, .btn, .price-card, .quote-card, .device, .k9-card, .style-tile, .section-cta-band, .contact-form, .footer-grid, .hero, .bg-overlays > * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease; } } /* ===== THEME PICKER (visible; pairs with your JS) ================== */ .theme-picker{ position: fixed; right: 16px; bottom: 16px; z-index: 10000; display: grid; gap: 8px; pointer-events: auto; } .theme-trigger{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background: color-mix(in oklab, var(--surface), transparent 0%); color:var(--text); font-weight:800; box-shadow: var(--shadow-1); cursor: pointer; } .theme-trigger:hover{ box-shadow: var(--shadow-2); } .theme-trigger .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; } .dot-saas{ background:#0ea5a8; } .dot-art{ background:#f59e0b; } .dot-editorial{ background:#94a3b8; } .theme-trigger-label{ opacity:.9; } .theme-panel{ position:absolute; right:0; bottom:calc(100% + 8px); width:240px; background: var(--paper); color: var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow-2); padding:8px; } .theme-panel[hidden]{ display:none !important; } /* JS toggles [hidden] */ .theme-option{ display:grid; grid-template-columns:36px 1fr; align-items:center; gap:8px; padding:8px; border-radius:10px; cursor:pointer; user-select:none; color: inherit; } .theme-option:hover, .theme-option:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 60%); } .theme-option[aria-current="true"]{ background: color-mix(in oklab, var(--paper), transparent 0%); border:1px solid color-mix(in oklab, var(--accent), var(--line) 60%); } .swatch{ border-radius:8px; height:28px; width:100%; border:1px solid color-mix(in oklab, var(--line), transparent 20%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); } .swatch-saas{ background: linear-gradient(135deg, #0ea5a8, #24e5f5); } .swatch-art{ background: linear-gradient(135deg, #fde68a, #f9a8d4 50%, #93c5fd); } .swatch-editorial{ background: linear-gradient(135deg, #0b1016, #334155); } @media (max-width: 960px){ .theme-picker{ z-index: 10001; } } @media (prefers-reduced-motion: no-preference){ .theme-trigger, .theme-panel{ transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; } } /* ===== THEME PICKER — first-run coachmark ===== */ .theme-trigger{ position: relative; } /* anchor for the halo */ .theme-picker.nudge-show .theme-trigger::before{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid var(--accent); opacity:.65; pointer-events:none; animation: themeHalo 1.6s ease-out infinite; } @keyframes themeHalo{ 0%{ transform:scale(1); opacity:.65 } 70%{transform:scale(1.12);opacity:0 } 100%{transform:scale(1.12);opacity:0 } } @media (prefers-reduced-motion: reduce){ .theme-picker.nudge-show .theme-trigger::before{ animation:none } } /* bubble */ .theme-nudge{ position:absolute; right:0; bottom:calc(100% + 10px); width:min(320px, 88vw); background: var(--paper); color: var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow-2); padding:10px 12px; z-index:10002; display:none; } .theme-picker.nudge-show .theme-nudge{ display:block; animation:nudgeIn .28s ease-out both; } @keyframes nudgeIn{ from{ transform:translateY(6px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } } @media (prefers-reduced-motion: reduce){ .theme-picker.nudge-show .theme-nudge{ animation:none } } .theme-nudge strong{ display:block; font:700 .95rem var(--nav-font); margin:0 0 2px; } .theme-nudge p{ margin:0; font:400 .85rem/1.35 var(--ui-font); opacity:.9; } .theme-nudge .nudge-actions{ display:flex; gap:8px; margin-top:8px; } .theme-nudge .nudge-try{ background: var(--accent); color:#fff; border:0; border-radius:999px; padding:6px 10px; font-weight:800; cursor:pointer; } .theme-nudge .nudge-dismiss{ background: transparent; color: inherit; border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer; } /* little arrow */ .theme-nudge::after{ content:""; position:absolute; right:18px; bottom:-8px; border:8px solid transparent; border-top-color: var(--paper); filter: drop-shadow(0 -1px 0 var(--line)); } /* keep above mobile drawer too */ @media (max-width:960px){ .theme-picker{ z-index:10001 } } /* ========================= Pastel-friendly shadows ========================= */ /* Artistic Pastel — swap harsh black shadows for brand-tinted, airy ones */ html[data-site-theme="art"] { /* soften the generic elevation tokens too (buttons, quotes, etc.) */ --elev-1: 0 8px 26px color-mix(in oklab, var(--accent), transparent 78%), 0 2px 10px color-mix(in oklab, var(--accent-2), transparent 82%); --elev-2: 0 16px 60px color-mix(in oklab, var(--accent), transparent 76%), 0 6px 22px color-mix(in oklab, var(--accent-2), transparent 84%); } /* Stack cards: use the card’s --brand as the shadow tint */ html[data-site-theme="art"] .stack-card{ box-shadow: 0 10px 28px color-mix(in oklab, var(--brand), transparent 80%), 0 4px 14px color-mix(in oklab, var(--brand), transparent 86%); } html[data-site-theme="art"] .stack-card:hover{ box-shadow: 0 18px 60px color-mix(in oklab, var(--brand), transparent 74%), 0 10px 26px color-mix(in oklab, var(--brand), transparent 82%); } /* make the little icon tile shadow colored too */ html[data-site-theme="art"] .stack-card .logo{ box-shadow: 0 8px 28px color-mix(in oklab, var(--brand), transparent 72%); } /* editorial: keep it subtle, tint toward slate instead of pure black */ html[data-site-theme="editorial"] { --elev-1: 0 8px 24px color-mix(in oklab, #64748b, transparent 76%); --elev-2: 0 16px 52px color-mix(in oklab, #94a3b8, transparent 75%); } html[data-site-theme="editorial"] .stack-card{ box-shadow: 0 10px 26px color-mix(in oklab, #94a3b8, transparent 78%), 0 4px 12px color-mix(in oklab, #64748b, transparent 84%); } /* ================================ Stack cards — pastel-friendly edge ================================= */ /* kill the default li borders only in the Stack section */ .section-stack .logo-grid li{ border: none !important; background: transparent; /* the card itself provides the surface */ padding: 0; /* your card already has padding */ } /* make the card edge an INNER stroke so no halo fights the background */ .stack-card{ position: relative; border: none !important; /* remove physical border */ background-clip: padding-box; /* keep gradients away from the edge */ } .stack-card::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; /* default stroke (SaaS): subtle, uses your light line token */ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--line), transparent 10%); } /* Artistic Pastel — brand-tinted inner stroke */ html[data-site-theme="art"] .stack-card::before{ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand), #fff 70%); } /* Editorial Minimal — slate-tinted inner stroke */ html[data-site-theme="editorial"] .stack-card::before{ box-shadow: inset 0 0 0 1px color-mix(in oklab, #94a3b8, transparent 35%); } /* focus state: colored ring + keep the soft shadow */ .stack-card:focus-visible{ outline: none; } html[data-site-theme="art"] .stack-card:focus-visible{ box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand), transparent 30%), 0 18px 60px color-mix(in oklab, var(--brand), transparent 76%); } html[data-site-theme="editorial"] .stack-card:focus-visible{ box-shadow: inset 0 0 0 2px color-mix(in oklab, #94a3b8, transparent 30%), 0 16px 52px color-mix(in oklab, #94a3b8, transparent 78%); } /* ===== Stack — clean/transparent variant ================================= */ /* kill any panel look on the section/grid */ .section-stack, .section-stack .wrap, .section-stack .logo-grid, .section-stack .logo-grid li{ background: transparent !important; box-shadow: none !important; border: 0 !important; filter: none !important; } /* card: no fill, no lift by default */ .stack-card{ background: transparent !important; /* remove radial/soft fill */ box-shadow: none !important; /* no default shadow */ transform: none !important; /* no lift by default */ } /* inner hairline stroke (theme-aware) */ .stack-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--line), transparent 10%); } html[data-site-theme="art"] .stack-card::before{ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand), #fff 85%); } html[data-site-theme="editorial"] .stack-card::before{ box-shadow: inset 0 0 0 1px color-mix(in oklab, #94a3b8, transparent 45%); } /* conic ring: keep, but very subtle */ .stack-card .ring{ opacity: .10 !important; filter: blur(4px) saturate(105%) !important; /* was ~10px; much softer */ } .stack-card:hover .ring{ opacity: .16 !important; } /* hover: a whisper of shadow + tiny translate */ .stack-card:hover{ transform: translateY(-2px) !important; box-shadow: 0 8px 22px color-mix(in oklab, var(--brand), transparent 88%), 0 2px 8px color-mix(in oklab, var(--brand), transparent 92%) !important; } /* logo tile: smaller, cleaner shadow */ .stack-card .logo{ box-shadow: 0 4px 12px color-mix(in oklab, var(--brand), transparent 85%) !important; background: color-mix(in oklab, var(--brand) 18%, var(--surface)) !important; } /* reduce “brand glow” in art; keep slate vibe in editorial */ html[data-site-theme="art"] .stack-card:hover{ box-shadow: 0 10px 26px color-mix(in oklab, var(--brand), transparent 86%), 0 4px 12px color-mix(in oklab, var(--brand), transparent 92%) !important; } html[data-site-theme="editorial"] .stack-card:hover{ box-shadow: 0 10px 24px color-mix(in oklab, #94a3b8, transparent 86%), 0 4px 10px color-mix(in oklab, #64748b, transparent 90%) !important; } /* optional: even softer text contrast inside cards */ .section-stack .stack-card small{ opacity: .72; } /* Hide honeypot field */ .hp{position:absolute!important;left:-9999px!important;height:0!important;overflow:hidden!important} /* Optional status line */ .form-status{margin-top:0.75rem;font-size:.95rem;opacity:.9} /* Optional simple toast used by contact.js */ .toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%); padding:.75rem 1rem;border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.15); background:var(--card, #111);color:var(--text, #fff);z-index:9999} .toast-success{background:var(--accent, #16a34a)} /* ========================= MOBILE NAV / HAMBURGER FIX ========================= */ /* Ensure header reports a stable height (var(--hdr)) */ .site-header .wrap{ min-height: var(--hdr, 64px); } /* Right-align hamburger when nav/CTAs collapse */ @media (max-width: 960px){ .site-nav{ display:none; } .hdr-ctas{ display:none; } .hamburger{ display:block; margin-left:auto; /* <-- pushes it to the far right */ padding:10px; border-radius:10px; border:1px solid var(--border); background: var(--surface); } /* Drawer open state (use --hdr so it always sits below the header) */ .site-header.is-open::after{ content:""; position: fixed; inset: 0; background: color-mix(in oklab, var(--bg) 85%, #000 15%); z-index: 2; } .site-header.is-open .site-nav, .site-header.is-open .hdr-ctas{ display:block; position: fixed; left: 0; right: 0; top: var(--hdr, 64px); background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.35); z-index: 4; animation: navSlide .18s ease forwards; } .site-header.is-open .site-nav{ display:grid; gap: 6px; padding: 12px 16px; } .site-header.is-open .site-nav a{ padding: .85rem .25rem; font-size: 1.05rem; border-radius: 10px; } .site-header.is-open .site-nav a:active{ background: color-mix(in oklab, var(--accent), transparent 88%); } .site-header.is-open .hdr-ctas{ display:flex; gap: .5rem; padding: 12px 16px 18px; border-top: 1px dashed var(--border); } @keyframes navSlide{ from{ transform: translateY(-8px); opacity:0 } to{ transform:none; opacity:1 } } /* Lock scroll behind drawer */ body.nav-open{ overflow:hidden; } } /* Avoid any horizontal scrollbars on mobile */ html, body{ max-width:100%; overflow-x:hidden; } .wrap{ width:min(1200px, 94vw); } /* ========================= THEME PICKER — RESPONSIVE ========================= */ /* Respect notches / safe areas and keep fully inside viewport */ .theme-picker{ right: max(12px, env(safe-area-inset-right, 0px) + 12px); bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px); } /* Make panel width fluid and never overflow screen */ .theme-panel{ inline-size: clamp(220px, 88vw, 360px); right: 0; /* anchor to the trigger’s right edge */ bottom: calc(100% + 8px); } /* Compact trigger on small phones */ @media (max-width: 420px){ .theme-trigger{ padding:8px 10px; gap:6px; } .theme-trigger-label{ font-size:.9rem; } } /* Optional: bottom-sheet style on very small screens */ @media (max-width: 360px){ .theme-panel{ position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px); border-radius: 14px; } } /* Keep theme picker above mobile drawer overlay */ @media (max-width:960px){ .theme-picker{ z-index:10003 } } /* ========================= GENERAL MOBILE FIT & FLOW ========================= */ /* Give content a little more breathing room edge-to-edge */ @media (max-width: 960px){ .wrap{ width: min(1200px, 92vw); } .section{ padding: clamp(28px, 7vw, 56px) 0; } .btn{ padding:10px 14px; font-size:.95rem; } } /* Style kits grid and pricing cards: no overflow on narrow devices */ @media (max-width: 580px){ .style-kits .kit-grid{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .price-grid{ grid-template-columns: 1fr; } } /* Featured “device” always fits */ .section-featured .case{ grid-template-columns: 1fr; } .device{ width:100%; max-width:100%; } /* Contact form: single column on phones */ @media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } } /* Footer stacks nicely */ @media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr; } } /* Prevent any stray children from causing horizontal overflow */ *{ max-width: 100%; } img, svg, canvas, video{ max-width:100%; height:auto; } /* ===== Fixed header, safe-area aware, mobile-friendly ===== */ :root{ --hdr:64px; /* updated dynamically by JS */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: background .35s, border-color .35s, box-shadow .35s; backdrop-filter: saturate(130%) blur(8px); -webkit-backdrop-filter: saturate(130%) blur(8px); } /* inner layout */ .site-header .wrap{ display:flex; align-items:center; gap:16px; padding: calc(10px + var(--safe-top)) 0 10px; /* include notch */ position: relative; } /* states */ .site-header.is-transparent{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 10%), transparent); border-bottom: 1px solid transparent; } html[data-site-theme="art"] .site-header.is-transparent{ background: linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 4%), transparent); } .site-header.is-solid{ background: color-mix(in oklab, var(--bg), #000 12%); border-bottom: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0,0,0,.25); } html[data-site-theme="art"] .site-header.is-solid{ background: color-mix(in oklab, var(--surface), #000 6%); border-bottom-color: var(--line); box-shadow: 0 6px 22px rgba(0,0,0,.08); } /* brand + desktop nav + ctas */ .brand{ font-weight:900; letter-spacing:-.02em; white-space:nowrap; } .site-nav{ margin-left:auto; display:flex; gap:18px; } .site-nav a{ color: color-mix(in oklab, var(--text), transparent 20%); font-weight:700; font-size:.95rem; } .site-nav a:hover{ color: var(--text); } .hdr-ctas{ display:flex; gap:10px; margin-left:16px; } /* progress bar glued to header bottom */ .scrollbar{ position:absolute; left:0; right:0; bottom:0; height:2px; background: color-mix(in oklab, var(--text) 12%, transparent); } .scrollbar span{ display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); } /* Mobile: hide desktop nav, right-align hamburger */ @media (max-width: 960px){ .site-nav, .hdr-ctas{ display:none !important; } .hamburger{ display:block; margin-left:auto; width:44px; height:44px; padding:10px; border-radius:10px; border:1px solid var(--border); background: var(--surface); } .hamburger span{ display:block; width:22px; height:2px; background:var(--text); margin:5px auto; transition: transform .2s, opacity .2s; } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 } .hamburger[aria-expanded="true"] span:first-child{ transform: translateY(6px) rotate(45deg); } .hamburger[aria-expanded="true"] span:last-child{ transform: translateY(-6px) rotate(-45deg); } } /* Keep page content from tucking under fixed header */ body{ padding-top: var(--hdr); } /* ===== Off-canvas drawer (already provided earlier) ===== */ .mobile-drawer{ position: fixed; left: 0; right: 0; top: var(--hdr); bottom: 0; background: var(--bg); border-top: 1px solid var(--border); z-index: 10002; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; padding: 12px 16px max(16px, var(--safe-bottom)); overflow: auto; } .mobile-open .mobile-drawer{ transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-scrim{ position: fixed; inset: 0; background: color-mix(in oklab, var(--bg) 85%, #000 15%); z-index: 10001; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .mobile-open .mobile-scrim{ opacity: 1; pointer-events: auto; } .md-links{ display:grid; gap:8px; } .mobile-drawer a{ display:block; padding:.9rem .25rem; font-weight:800; border-radius:10px; color: var(--text); } .mobile-drawer a:active{ background: color-mix(in oklab, var(--accent), transparent 88%); } .md-actions{ display:flex; gap:8px; margin-top:10px; border-top:1px dashed var(--border); padding-top:12px; } @media (min-width: 961px){ .mobile-drawer, .mobile-scrim{ display:none !important; } } /* ===== Theme picker pinned within viewport on mobile ===== */ .theme-picker{ right: max(12px, var(--safe-right) + 12px); bottom: max(12px, var(--safe-bottom) + 12px); z-index: 10003; } .theme-panel{ inline-size: clamp(220px, 88vw, 360px); } /* Safety: never overflow horizontally */ html, body{ max-width:100%; overflow-x:hidden; } img, svg, canvas, video{ max-width:100%; height:auto; } /* === Theme picker — wider, readable on mobile === */ :root{ --safe-left: env(safe-area-inset-left, 0px); } /* Give the panel more usable width on phones, but keep it in-bounds */ @media (max-width: 960px){ .theme-panel{ /* Up to 420px, or nearly full viewport minus padding & notches */ inline-size: min(420px, calc(100vw - (var(--safe-left) + var(--safe-right) + 50px))); } /* Slightly larger hit targets and spacing in the panel */ .theme-option{ grid-template-columns: 65px 1fr; padding: 10px; } .swatch{ height: 32px; border-radius: 10px; } } /* Keep the floating picker itself inside the viewport on small screens */ .theme-picker{ right: max(12px, calc(var(--safe-right) + 12px)); bottom: max(12px, calc(var(--safe-bottom) + 12px)); } /* --- Theme picker: make the panel wider & readable on phones --- */ .theme-panel{ /* Grow on mobile but never overflow the viewport */ width: auto; min-width: clamp(280px, 92vw, 480px); max-width: calc(100vw - 16px); } .theme-option{ grid-template-columns: 44px 1fr; /* more room for labels */ column-gap: 10px; align-items: center; } .theme-option span{ white-space: normal; /* allow wrapping */ overflow-wrap: anywhere; /* break long words if needed */ line-height: 1.25; } /* Slightly larger swatch so the ‘colors sized nicely’ feeling stays */ .theme-panel .swatch{ height: 32px; border-radius: 10px; } /* Ultra-narrow devices: tighten layout without truncating text */ @media (max-width: 380px){ .theme-option{ grid-template-columns: 38px 1fr; } .theme-panel .swatch{ height: 28px; } } /* Keep the trigger in view on tiny screens */ .theme-picker{ right: 12px; bottom: 12px; } /* Prevent compounding min-height on the header wrapper */ .site-header .wrap{ min-height: 0 !important; } /* --- Hero floaters (behind content, above bg) --- */ .hero { position: relative; } .hero-floaters{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .hero-floaters .floater{ position:absolute; width: clamp(10px, 1.6vw, 18px); height: clamp(10px, 1.6vw, 18px); border-radius: 8px; opacity: .35; background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); will-change: transform; } .hero-floaters .floater.circle{ border-radius: 999px; } .hero-floaters .floater.diamond{ transform: rotate(45deg); border-radius: 6px; } /* soften for the light theme */ html[data-site-theme="art"] .hero-floaters .floater{ opacity:.5; filter: drop-shadow(0 8px 18px rgba(0,0,0,.08)); } /* ---------- Style Kits: new themes ---------- */ /* Minimal / Editorial */ .kit-minimal{ --kit-head: "EB Garamond", Georgia, serif; --kit-body: "IBM Plex Sans", Inter, system-ui, sans-serif; --kit-accent:#94A3B8; --kit-accent-2:#CBD5E1; --kit-paper:#0f141a; --kit-ink:#e5e7eb; --kit-surface:#0b1016; --kit-radius: 10px; } /* Playful */ .kit-playful{ --kit-head: "DM Sans", Inter, system-ui, sans-serif; --kit-body: "DM Sans", Inter, system-ui, sans-serif; --kit-accent:#F59E0B; --kit-accent-2:#A78BFA; --kit-paper:#ffffff; --kit-ink:#0f172a; --kit-surface:#FFF7EE; --kit-radius: 16px; } /* Business */ .kit-business{ --kit-head: Inter, system-ui, sans-serif; --kit-body: "IBM Plex Sans", Inter, system-ui, sans-serif; --kit-accent:#0EA5A8; --kit-accent-2:#24E5F5; --kit-paper:#ffffff; --kit-ink:#0f172a; --kit-surface:#F8FAFC; --kit-radius: 12px; } /* Antique / Old style */ .kit-antique{ --kit-head: "EB Garamond", Georgia, serif; --kit-body: "EB Garamond", Georgia, serif; --kit-accent:#8B5E34; --kit-accent-2:#C7A97B; --kit-paper:#F7F1E3; --kit-ink:#2B231A; --kit-surface:#EFE6D6; --kit-radius: 8px; } /* ---------- Mini preview “assets” inside cards ---------- */ /* Playful: confetti block with a cheerful badge */ .type-right.confetti{ background: radial-gradient(10px 10px at 20% 30%, color-mix(in oklab, var(--kit-accent), #fff 18%), transparent 60%), radial-gradient(12px 12px at 70% 50%, color-mix(in oklab, var(--kit-accent-2), #fff 15%), transparent 60%), radial-gradient(8px 8px at 40% 70%, #34D39966, transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--kit-ink), transparent 94%), transparent); border-radius: 12px; position: relative; } .type-right.confetti .badge{ position:absolute; left:10px; bottom:10px; font-size:.72rem; font-weight:900; background: var(--kit-accent); color:#fff; padding:4px 8px; border-radius:8px; box-shadow: 0 8px 18px color-mix(in oklab, var(--kit-accent), transparent 55%); } /* Business: tiny bar chart */ .type-right.bars{ position: relative; overflow:hidden; border-radius: 10px; background: linear-gradient(180deg, color-mix(in oklab, var(--kit-ink), transparent 96%), transparent), repeating-linear-gradient( to top, color-mix(in oklab, var(--kit-ink), transparent 88%) 0 1px, transparent 1px 18px ); } .type-right.bars::after{ content:""; position:absolute; left:10px; right:10px; bottom:10px; height:40%; background: linear-gradient(0deg, color-mix(in oklab, var(--kit-accent), transparent 10%) 0 28%, transparent 28% 100%), linear-gradient(0deg, color-mix(in oklab, var(--kit-accent-2), transparent 10%) 0 50%, transparent 50% 100%), linear-gradient(0deg, color-mix(in oklab, #10B981, transparent 10%) 0 70%, transparent 70% 100%); background-size: 16% 100%, 16% 100%, 16% 100%; background-repeat: no-repeat; background-position: 0% 100%, 24% 100%, 48% 100%; border-radius: 6px; } .type-right.bars .badge{ position:absolute; right:10px; top:10px; font-size:.72rem; font-weight:900; background: var(--kit-accent-2); color:#0b1016; padding:4px 8px; border-radius:8px; box-shadow: 0 8px 18px color-mix(in oklab, var(--kit-accent-2), transparent 55%); } /* Antique: parchment panel + wax seal */ .type-right.parchment{ position: relative; border-radius: 10px; background: radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--kit-accent-2), transparent 88%), transparent 70%), linear-gradient(180deg, var(--kit-paper), color-mix(in oklab, var(--kit-paper), #000 6%)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kit-accent-2), transparent 65%); } .type-right.parchment::before{ content:""; position:absolute; inset:8px; border-radius: 8px; border:1px dashed color-mix(in oklab, var(--kit-accent-2), transparent 55%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .type-right.parchment .seal{ position:absolute; right:12px; bottom:10px; width:18px; height:18px; border-radius:999px; background: radial-gradient(circle at 30% 30%, #B45309, #8B5E34); box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.2); } /* Minimal/Editorial uses your existing .type-right.rule block; keep as-is */ /* ---------- Mobile polish for kit cards ---------- */ @media (max-width: 520px){ .kit .kit-hd{ margin-bottom: 10px; } .kit-title{ font-size: 1rem; } .kit-type{ grid-template-columns: 1fr; } .kit-ui{ gap:8px; } .kit-btn{ padding: 7px 10px; } } /* === Style kits: tighter, no overlap, mobile-first === */ .style-kits .kit-grid{ display:grid; grid-template-columns: repeat(4, minmax(280px,1fr)); gap: clamp(12px, 2vw, 20px); } @media (max-width: 1200px){ .style-kits .kit-grid{ grid-template-columns: repeat(3, minmax(260px,1fr)); } } @media (max-width: 900px){ .style-kits .kit-grid{ grid-template-columns: repeat(2, minmax(240px,1fr)); } } @media (max-width: 640px){ .style-kits .kit-grid{ grid-template-columns: 1fr; } } /* card internals */ .kit{ display:flex; flex-direction:column; min-height: 0; /* allow content to size naturally */ padding: 14px; } .kit-hd{ margin-bottom: 10px; } .kit-title{ font-size:1.02rem; line-height:1.1; } .kit-tags{ font-size:.9rem; opacity:.9; } .kit-type{ grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; /* prevent grid overflow */ } @media (max-width: 900px){ .kit-type{ grid-template-columns: 1fr; } } /* right-hand demo blocks won’t overflow at small sizes */ .type-right{ min-height: 90px; overflow:hidden; } /* controls never collide; buttons shrink/wrap cleanly */ .kit-ui{ margin-top: 12px; display:flex; flex-wrap:wrap; gap:10px; } .kit-ui .kit-btn{ flex:1 1 140px; min-width: 0; } .kit-swatches{ gap:8px; } .kit-swatches li{ width:26px; height:26px; border-radius:8px; } /* footer stays pinned to bottom without overlapping */ .kit-foot{ margin-top:auto; padding-top:12px; } /* ultra-small phones */ @media (max-width: 400px){ .kit{ padding: 12px; } .kit-ui .kit-btn{ flex:1 1 120px; } .kit-swatches li{ width:22px; height:22px; } } /* === Theme coachmark: keep actions inside, align nicely === */ .theme-nudge{ box-sizing: border-box; max-width: min(340px, 92vw); padding: 12px; } .theme-nudge .nudge-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .theme-nudge .nudge-try, .theme-nudge .nudge-dismiss{ flex: 1 1 140px; /* grow but respect bubble width */ min-width: 0; /* allow shrinking */ line-height: 1; /* avoid oversized line box */ } .theme-nudge .nudge-dismiss{ border:1px solid var(--line); background: transparent; } @media (max-width: 420px){ .theme-nudge .nudge-try, .theme-nudge .nudge-dismiss{ flex: 1 0 100%; } /* stack */ } /* Make media fill the device “screen” perfectly */ .case-media .screen > video, .case-media .screen > img, .case-media .screen > picture, .case-media .screen > iframe{ display:block; width:100%; height:100%; border:0; border-radius: inherit; /* matches .screen’s 12px */ object-fit: cover; /* crops nicely; use contain for full-page */ } /* If you prefer to see the whole page inside an iframe later: */ /* .case-media .screen > iframe { object-fit: contain; } */