/* ========================================================================== ALLIN — base.css Dual-theme design system (Indigo Ink + Electric Violet). Theme switched via [data-theme="dark"|"light"] on . ========================================================================== */ @import url("fonts.css"); /* ----- Theme tokens ------------------------------------------------------ */ :root{ /* brand accent — electric violet, identical hue in both themes (token names kept as --gold* so every section keeps reading them) */ --gold:#7b5cff; --gold-soft:#9d86ff; --gold-deep:#5b3fe0; /* fonts */ --font-body:"Inter","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-head:"Epilogue","Inter",system-ui,sans-serif; /* fluid type scale */ --fs-xs:clamp(.72rem,.68rem + .2vw,.8rem); --fs-sm:clamp(.84rem,.8rem + .2vw,.92rem); --fs-base:clamp(.95rem,.9rem + .25vw,1.05rem); --fs-md:clamp(1.1rem,1rem + .4vw,1.25rem); --fs-lg:clamp(1.3rem,1.1rem + .8vw,1.6rem); --fs-xl:clamp(1.7rem,1.3rem + 1.6vw,2.4rem); --fs-2xl:clamp(2.1rem,1.5rem + 2.6vw,3.2rem); --fs-3xl:clamp(2.6rem,1.7rem + 3.6vw,4rem); /* spacing + structure */ --nav-h:74px; --container:1200px; --radius:18px; --radius-sm:12px; --radius-lg:26px; --gut:clamp(1rem,4vw,2rem); --shadow-sm:0 2px 10px rgba(8,15,30,.06); --shadow:0 14px 40px rgba(8,15,30,.12); --shadow-lg:0 30px 70px rgba(8,15,30,.18); --ease:cubic-bezier(.22,.61,.36,1); } /* DARK (default) — deep indigo ink */ :root, [data-theme="dark"]{ --bg:#0a0e1d; --bg-1:#10152a; --bg-2:#171d38; --surface:#131a32; --surface-2:#1b2240; --border:rgba(123,92,255,.22); --border-soft:rgba(255,255,255,.08); --text:#eef0fb; --text-soft:#bdc3dc; --text-mute:#868eb5; --heading:#ffffff; --on-gold:#ffffff; --shadow:0 18px 50px rgba(0,0,0,.45); --shadow-lg:0 36px 80px rgba(0,0,0,.55); color-scheme:dark; } /* LIGHT — porcelain + indigo ink */ [data-theme="light"]{ --bg:#f6f6fc; --bg-1:#ffffff; --bg-2:#eeeff8; --surface:#ffffff; --surface-2:#f3f3fb; --border:rgba(91,63,224,.18); --border-soft:rgba(20,18,48,.08); --text:#1a1836; --text-soft:#474268; --text-mute:#6c688a; --heading:#120f2e; --on-gold:#ffffff; --shadow-sm:0 2px 10px rgba(15,27,48,.06); --shadow:0 14px 40px rgba(15,27,48,.1); --shadow-lg:0 30px 70px rgba(15,27,48,.16); color-scheme:light; } /* ----- Reset ------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)} body{ font-family:var(--font-body); font-size:var(--fs-base); line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background .4s var(--ease),color .4s var(--ease); } img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea,select{font:inherit;color:inherit} ul{list-style:none} ::selection{background:var(--gold);color:var(--on-gold)} h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--heading);line-height:1.12;font-weight:700;letter-spacing:-.01em} h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-lg)} p{color:var(--text-soft)} em{font-style:normal;color:var(--gold)} /* ----- Layout helpers ---------------------------------------------------- */ .container{width:min(100% - 2*var(--gut),var(--container));margin-inline:auto} .container-wide{width:min(100% - 2*var(--gut),1400px);margin-inline:auto} .section{padding:clamp(3.5rem,8vw,7rem) 0} .section-sm{padding:clamp(2.5rem,5vw,4rem) 0} .bg-1{background:var(--bg-1)} .bg-2{background:var(--bg-2)} .center{text-align:center} .mx-auto{margin-inline:auto} /* ----- Shared atoms ------------------------------------------------------ */ .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-body);font-weight:700;font-size:var(--fs-xs); letter-spacing:.14em;text-transform:uppercase;color:var(--gold); padding:.4rem .9rem;border:1px solid var(--border);border-radius:999px; background:color-mix(in srgb,var(--gold) 8%,transparent); } .section-head{max-width:720px;margin:0 auto clamp(2rem,4vw,3.2rem)} .section-title{font-size:var(--fs-xl);margin:.7rem 0 .6rem} .section-sub{color:var(--text-soft);font-size:var(--fs-md)} .text-soft{color:var(--text-soft)} .text-mute{color:var(--text-mute)} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm); padding:.8rem 1.5rem;border-radius:999px;border:1px solid transparent; cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s; white-space:nowrap;line-height:1; } .btn:hover{transform:translateY(-2px)} .btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:0 10px 26px color-mix(in srgb,var(--gold) 35%,transparent)} .btn-gold:hover{background:var(--gold-soft)} .btn-outline{border-color:var(--border);color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent)} .btn-outline:hover{border-color:var(--gold);color:var(--gold)} .btn-ghost{color:var(--text-soft)} .btn-ghost:hover{color:var(--gold)} .btn-lg{padding:1rem 1.9rem;font-size:var(--fs-base)} .btn-block{width:100%} /* chips */ .chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:600; padding:.45rem .85rem;border-radius:999px;border:1px solid var(--border); background:var(--surface-2);color:var(--text-soft)} .chip-gold{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)} /* card base */ .card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius); padding:clamp(1.3rem,3vw,1.8rem); box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--border)} /* ----- Scroll reveal ----------------------------------------------------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* accessibility */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .skip-link{position:fixed;top:-60px;left:1rem;z-index:2000;background:var(--gold);color:var(--on-gold); padding:.6rem 1rem;border-radius:0 0 10px 10px;transition:top .2s} .skip-link:focus{top:0} /* ----- Large screens (16in laptops, desktops, TV, projector, 4K) --------- */ @media (min-width:1600px){ :root{--container:1340px} .container-wide{width:min(100% - 2*var(--gut),1560px)} } @media (min-width:2000px){ :root{--container:1500px;--fs-base:clamp(1.05rem,.95rem + .25vw,1.18rem)} .container-wide{width:min(100% - 2*var(--gut),1760px)} } @media (min-width:2600px){ html{font-size:20px} /* TV / 4K: scale rem-based type up */ :root{--container:1720px} .container-wide{width:min(100% - 2*var(--gut),2100px)} }