/* ════════════════════════════════════════════════════════════ DATUMETRY UI KIT — core tokens Dark-only · Hanken Grotesk · Chakra Petch logo-only Gradient allowed: hero/dark-band glow + thin accents ONLY ════════════════════════════════════════════════════════════ */ @font-face { font-display: swap; } :root{ /* —— brand constants —— */ --ink:#0B0E16; --paper:#F6F6F2; --blue:#3415EE; --blue-deep:#2A10C4; --violet:#6E3BF2; --azure:#19C2FF; --grad:linear-gradient(135deg,#6E3BF2 0%,#3415EE 50%,#19C2FF 100%); /* —— theme (DARK · only theme) —— */ --bg:#0B0E16; --bg-card:#12161F; --bg-sunken:#070910; --bg-hover:#1A1F2B; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18); --text:#F6F6F2; --text-2:rgba(246,246,242,.64); --text-3:rgba(246,246,242,.38); --accent:#7A8CFF; /* blue lifted for dark contrast */ --accent-hover:#94A3FF; --accent-soft:rgba(122,140,255,.10); --ring:0 0 0 3px rgba(122,140,255,.30); --success:#3DDCA8; --success-bg:rgba(61,220,168,.10); --success-bd:rgba(61,220,168,.30); --warn:#E9BA4D; --warn-bg:rgba(233,186,77,.10); --warn-bd:rgba(233,186,77,.30); --danger:#FF6B85; --danger-bg:rgba(255,107,133,.10); --danger-bd:rgba(255,107,133,.30); --info:#4FC9F5; --info-bg:rgba(79,201,245,.10); --info-bd:rgba(79,201,245,.30); --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-3:0 24px 60px rgba(0,0,0,.6); /* —— spacing · 4-base —— */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* —— radius —— */ --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px; /* —— motion —— */ --ease:cubic-bezier(.22,.8,.3,1); /* default settle */ --ease-io:cubic-bezier(.45,0,.2,1); /* fades / theme */ --t1:120ms; --t2:200ms; --t3:320ms; --t4:520ms; --pad:clamp(20px,5vw,76px); } /* data-theme="dark" stays on so dark-specific component rules (e.g. .btn.primary ink text) still match; the tokens above are the base. */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;background:var(--bg);color:var(--text); font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; transition:background var(--t3) var(--ease-io),color var(--t3) var(--ease-io); } h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.08;text-wrap:balance;} p{margin:0;text-wrap:pretty;} a{color:inherit;} button{font-family:inherit;} /* —— type roles —— */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2); } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);flex:none;} .small-label{font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);} .muted{color:var(--text-2);} /* —— layout scaffold —— */ .wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad);} section.band{padding-block:clamp(52px,8vw,108px);border-bottom:1px solid var(--line);} .sec-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:clamp(32px,4.5vw,56px);} .sec-head h2{font-size:clamp(26px,4vw,42px);} .sec-head p{color:var(--text-2);font-size:clamp(15px,1.5vw,17.5px);max-width:62ch;} .grid{display:grid;gap:20px;} .g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);} @media(max-width:1020px){.g4,.g3{grid-template-columns:repeat(2,1fr);}} @media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr;}} /* spec frame for kit demos */ .spec{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card); overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);} .spec .stage{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; padding:clamp(24px,3.5vw,40px);min-height:140px;position:relative;} .spec .meta{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 16px;border-top:1px solid var(--line);} .spec .meta .nm{font-size:13px;font-weight:600;color:var(--text-2);} .spec .meta .tg{font-size:12px;color:var(--text-3);} /* the dark ink band (heroes, footers) — constant across themes */ .ink-band{position:relative;overflow:hidden;background:var(--ink);color:#F6F6F2;} .ink-band .glow{position:absolute;inset:0;pointer-events:none; background: radial-gradient(55% 75% at 12% 115%, rgba(110,59,242,.42), transparent 60%), radial-gradient(70% 90% at 88% 122%, rgba(52,21,238,.5), transparent 56%), radial-gradient(40% 60% at 58% 126%, rgba(25,194,255,.36), transparent 60%);} /* thin gradient accents — the only other place gradient may appear */ .grad-rule{height:2px;border:none;background:var(--grad);border-radius:2px;margin:0;} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} }