/* ============================================================ MIRAI Design System — base.css (the engine / theme-agnostic) Goal: give Claude Code the "design-system inheritance" that Claude Design does automatically. Brand values live in themes/*.css; this file holds primitives + atmosphere + motion. Anti-"AI slop" contract: - distinctive type pairing (no Inter/Roboto/Arial defaults) - dominant ink + ONE sharp accent (no even purple-on-white) - atmosphere over flat fills (grain / grid / glow) - ONE orchestrated load reveal, not scattered micro-noise ============================================================ */ :root{ /* --- token contract: themes override these --- */ --ds-bg:#0c0e0d; --ds-surface:#121514; --ds-text:#ECE7DA; --ds-text-dim:rgba(236,231,218,.56); --ds-line:rgba(236,231,218,.14); --ds-line-soft:rgba(236,231,218,.07); --ds-accent:#C9F24D; --ds-accent-ink:#0c0e0d; --ds-flag:#E0533A; --ds-font-display:'Zen Old Mincho',serif; /* JP display */ --ds-font-display-en:'Fraunces',serif; /* Latin / figures */ --ds-font-mono:'IBM Plex Mono',ui-monospace,monospace; --ds-font-body:'Zen Kaku Gothic New',system-ui,sans-serif; --ds-radius:6px; --ds-maxw:1240px; /* fluid type scale */ --ds-step--1:clamp(.78rem,.9vw,.84rem); --ds-step-0 :clamp(1rem,1.4vw,1.16rem); --ds-step-2 :clamp(1.4rem,2.4vw,1.85rem); --ds-display:clamp(2.9rem,7.4vw,6rem); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--ds-font-body);color:var(--ds-text);background:var(--ds-bg); line-height:1.6;min-height:100vh;overflow-x:hidden} .mono{font-family:var(--ds-font-mono);font-feature-settings:"liga" 0} .ds-wrap{max-width:var(--ds-maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)} /* --- atmosphere (compose on ) -------------------------- */ .ds-grid{background-image: repeating-linear-gradient(0deg ,transparent 0 47px,var(--ds-line-soft) 47px 48px), repeating-linear-gradient(90deg,transparent 0 47px,var(--ds-line-soft) 47px 48px);} .ds-glow{background-image: radial-gradient(60vw 50vh at 12% 0%, color-mix(in srgb,var(--ds-accent) 12%,transparent),transparent 60%), radial-gradient(45vw 45vh at 100% 100%, color-mix(in srgb,var(--ds-flag) 11%,transparent),transparent 55%);} .ds-grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* --- type primitives ---------------------------------------- */ .ds-kicker{display:flex;align-items:center;gap:.7rem;font-family:var(--ds-font-mono); font-size:var(--ds-step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--ds-accent)} .ds-kicker::before{content:"";width:34px;height:1px;background:var(--ds-accent);opacity:.7} .ds-display{font-family:var(--ds-font-display);font-weight:900;font-size:var(--ds-display); line-height:1.0;letter-spacing:.01em} .ds-lede{font-size:var(--ds-step-0);line-height:1.85;color:var(--ds-text-dim);max-width:32em} .ds-lede b{color:var(--ds-text);font-weight:700} .ds-flag-txt{color:var(--ds-flag);font-weight:700} mark.ds-hl{position:relative;isolation:isolate;color:inherit;background:none} mark.ds-hl::before{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.07em;height:.32em; background:var(--ds-accent);border-radius:1px;z-index:-1;transform:scaleX(0);transform-origin:left; animation:ds-swipe .55s cubic-bezier(.6,0,.2,1) 1.05s forwards} /* --- buttons ------------------------------------------------- */ .ds-btn{font-family:var(--ds-font-body);font-weight:700;font-size:.95rem;text-decoration:none; padding:.92rem 1.5rem;border-radius:4px;display:inline-flex;align-items:center;gap:.6rem; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s,border-color .25s} .ds-btn--primary{background:var(--ds-accent);color:var(--ds-accent-ink)} .ds-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px color-mix(in srgb,var(--ds-accent) 50%,transparent)} .ds-btn--ghost{border:1px solid var(--ds-line);color:var(--ds-text)} .ds-btn--ghost:hover{border-color:var(--ds-text);background:color-mix(in srgb,var(--ds-text) 5%,transparent)} .ds-btn .arw{transition:transform .25s}.ds-btn:hover .arw{transform:translateX(4px)} /* --- surface / catalogue card ------------------------------- */ .ds-card{position:relative;border:1px solid var(--ds-line);border-radius:var(--ds-radius); padding:clamp(22px,2.6vw,34px);box-shadow:0 40px 80px -40px rgba(0,0,0,.7); background:linear-gradient(180deg,color-mix(in srgb,var(--ds-text) 4%,transparent),transparent 40%),var(--ds-surface)} .ds-tag{font-family:var(--ds-font-mono);font-size:var(--ds-step--1);letter-spacing:.1em; color:var(--ds-text-dim);border:1px solid var(--ds-line);border-radius:3px;padding:.25rem .6rem} /* registration corner marks: ×4 */ .ds-mk{position:absolute;width:11px;height:11px;opacity:.5} .ds-mk::before,.ds-mk::after{content:"";position:absolute;background:var(--ds-text-dim)} .ds-mk::before{left:5px;top:0;width:1px;height:11px}.ds-mk::after{top:5px;left:0;height:1px;width:11px} .ds-mk.tl{top:9px;left:9px}.ds-mk.tr{top:9px;right:9px}.ds-mk.bl{bottom:9px;left:9px}.ds-mk.br{bottom:9px;right:9px} /* --- stat strip --------------------------------------------- */ .ds-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ds-line);padding:28px 0} @media(max-width:760px){.ds-stats{grid-template-columns:repeat(2,1fr);gap:24px 0}} .ds-stat{padding:0 clamp(10px,2vw,28px);border-left:1px solid var(--ds-line-soft)} .ds-stat:first-child{border-left:0;padding-left:0} .ds-stat .big{display:block;font-family:var(--ds-font-display-en);font-size:var(--ds-step-2)} .ds-stat .lbl{display:block;margin-top:.35rem;font-family:var(--ds-font-mono);font-size:var(--ds-step--1);color:var(--ds-text-dim)} /* --- motion: one orchestrated load -------------------------- */ .ds-reveal{opacity:0;transform:translateY(22px);animation:ds-fadeUp .85s cubic-bezier(.2,.8,.2,1) forwards} .ds-line{display:block;overflow:hidden;padding-bottom:.06em} .ds-line>span{display:inline-block;transform:translateY(112%);animation:ds-lineUp .9s cubic-bezier(.2,.85,.25,1) forwards} @keyframes ds-fadeUp{to{opacity:1;transform:none}} @keyframes ds-lineUp{to{transform:translateY(0)}} @keyframes ds-swipe {to{transform:scaleX(1)}} .ds-d1{animation-delay:.18s}.ds-d2{animation-delay:.34s}.ds-d3{animation-delay:.5s} .ds-d4{animation-delay:.66s}.ds-d5{animation-delay:.82s}.ds-d6{animation-delay:1s} @media(prefers-reduced-motion:reduce){ .ds-reveal,.ds-line>span{opacity:1!important;transform:none!important;animation:none!important} mark.ds-hl::before{transform:scaleX(1);animation:none} }