/* ============================================================================ SocialAutoUpload — Shared Site Design System · site.css v2 ---------------------------------------------------------------------------- ONE responsive foundation for every static page (marketing, docs, blog, legal, pricing). Token-driven, intrinsically responsive (clamp + auto-fit), dual-theme, and aligned with the React/Tailwind SPA's values. CONVENTIONS • Tokens name a ROLE or SIZE, never a page or component. • Spacing = --s{n} where value = n × 0.25rem (Tailwind scale; rem = a11y). • Semantic colors come as symmetric quads: --{role}-bg/-border/-ink/-solid. • Component defaults for a page family are set via :where(.landing/.doc) (zero specificity) so component classes (.cta, .feature…) always win, independent of source order. • Tables are styled only inside .table-wrap (mandatory responsive wrapper). • Utilities are prefixed .u- ; status cells .t- ; nothing squats on generic names like .section / .next. THEME — two authored blocks (light in :root, dark override). color-scheme also flips native controls. ⚠ KEEP THE DARK BLOCK IN SYNC (see marker). If you adopt a Sass/PostCSS build, define the dark map once instead. BRAND — reskin a new product with: and [data-brand="x"]{ --brand:#…; --brand-2:#…; --brand-ink:#…; } Contents: 1 Tokens · 2 Dark · 3 Reset/base · 4 Containers · 5 Type scopes 6 Utilities · 7 Components · 8 Print ============================================================================ */ /* ── 1. TOKENS ────────────────────────────────────────────────────────────── */ :root{ color-scheme:light dark; /* Brand (override under [data-brand] to reskin) */ --brand:#6d4aff; --brand-strong:#5a37e0; /* hover / press */ --brand-2:#7d51ec; /* gradient light stop — WCAG-tuned: white text ≥4.9:1 */ --grad-brand:linear-gradient(135deg,var(--brand-2),var(--brand)); /* Typography — role/size scale (no page names) */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Myanmar","Pyidaungsu",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fs-xs:.78rem; --fs-sm:.88rem; --fs-base:1rem; --fs-md:clamp(1.05rem,1rem + .35vw,1.2rem); --fs-lg:clamp(1.2rem,1.08rem + .6vw,1.45rem); --fs-xl:clamp(1.4rem,1.2rem + 1vw,1.85rem); --fs-2xl:clamp(1.7rem,1.4rem + 1.6vw,2.35rem); --fs-3xl:clamp(2rem,1.5rem + 2.6vw,3rem); --lh-body:1.6; --lh-heading:1.2; --lh-tight:1.1; --measure:72ch; /* comfortable reading column (~45–75ch target) */ /* Spacing — value = n × 0.25rem (rem so it scales with user font size) */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --gutter:clamp(1rem,4vw,2.75rem); /* fluid page side padding (full-width edge breathing room) */ --gap:clamp(1rem,2.5vw,1.75rem); /* grid gap */ --pad-card:clamp(1.25rem,3vw,2.5rem); /* card / section padding */ /* Containers — generous caps so pages fill wide screens (fluid gutter scales the rest) */ --w-page:1360px; --w-wide:1520px; --w-mid:1120px; /* Radius */ --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px; /* Shadow */ --shadow-sm:0 1px 3px rgba(20,20,40,.08); --shadow:0 2px 8px rgba(20,20,40,.10); --shadow-lg:0 14px 34px rgba(109,74,255,.16); /* Controls / layout */ --tap:44px; --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; /* Neutrals + theme surfaces (LIGHT) */ --bg:#f6f5fb; --surface:#ffffff; --surface-2:#f8f9fb; --ink:#1c1c28; --muted:#5b5b6e; --text-faint:#6e6e82; /* faint ≥4.7:1 on white */ --border:#e5e5ef; --brand-ink:#6d4aff; --accent-soft:#f1edff; --code-bg:#f4f2ff; --footer-bg:#22222e; --footer-link:#b7a8ff; /* footer link ≥7.5:1 on footer bg */ /* Semantic quads (LIGHT) — bg / border / ink(text) / solid(icon,bar) */ --success-bg:#ecfdf5; --success-border:#10b981; --success-ink:#047857; --success-solid:#059669; --warning-bg:#fff7ed; --warning-border:#f59e0b; --warning-ink:#b45309; --warning-solid:#f59e0b; --danger-bg:#fef2f2; --danger-border:#ef4444; --danger-ink:#b91c1c; --danger-solid:#ef4444; --info-bg:#eff6ff; --info-border:#3b82f6; --info-ink:#1d4ed8; --info-solid:#3b82f6; } /* ── 2. DARK THEME ────────────────────────────────────────────────────────── */ /* ⚠⚠ KEEP-IN-SYNC: the two selectors below must carry identical declarations. Edit one → edit the other. (A build step would collapse these into one.) */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --brand-ink:#9b83ff; --bg:#0e0e16; --surface:#171722; --surface-2:#1e1e2b; --ink:#e9e9f2; --muted:#a2a2b4; --text-faint:#9a9aad; --border:#26263a; --accent-soft:#241d3d; --code-bg:#241d3d; --footer-bg:#08080e; --footer-link:#b7a8ff; --success-bg:#0f2a1f; --success-border:#10b981; --success-ink:#34d399; --success-solid:#059669; --warning-bg:#2a1e10; --warning-border:#f59e0b; --warning-ink:#fbbf24; --warning-solid:#f59e0b; --danger-bg:#2a1416; --danger-border:#ef4444; --danger-ink:#fca5a5; --danger-solid:#ef4444; --info-bg:#10203a; --info-border:#3b82f6; --info-ink:#93c5fd; --info-solid:#3b82f6; --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow:0 2px 10px rgba(0,0,0,.5); --shadow-lg:0 14px 34px rgba(0,0,0,.55); }} :root[data-theme="dark"]{ color-scheme:dark; --brand-ink:#9b83ff; --bg:#0e0e16; --surface:#171722; --surface-2:#1e1e2b; --ink:#e9e9f2; --muted:#a2a2b4; --text-faint:#9a9aad; --border:#26263a; --accent-soft:#241d3d; --code-bg:#241d3d; --footer-bg:#08080e; --footer-link:#b7a8ff; --success-bg:#0f2a1f; --success-border:#10b981; --success-ink:#34d399; --success-solid:#059669; --warning-bg:#2a1e10; --warning-border:#f59e0b; --warning-ink:#fbbf24; --warning-solid:#f59e0b; --danger-bg:#2a1416; --danger-border:#ef4444; --danger-ink:#fca5a5; --danger-solid:#ef4444; --info-bg:#10203a; --info-border:#3b82f6; --info-ink:#93c5fd; --info-solid:#3b82f6; --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow:0 2px 10px rgba(0,0,0,.5); --shadow-lg:0 14px 34px rgba(0,0,0,.55); } :root[data-theme="light"]{color-scheme:light} /* ── 3. RESET & BASE ──────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-body); color:var(--ink);background:var(--bg);overflow-wrap:break-word} img,svg,video,canvas{max-width:100%;height:auto} a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline} strong,b{color:var(--ink)} code{font-family:var(--font-mono);background:var(--code-bg);color:var(--ink); border-radius:var(--r-sm);padding:1px 5px;font-size:.85em;overflow-wrap:anywhere} .err{background:var(--code-bg);color:var(--ink);border-radius:var(--r-sm);padding:1px 5px; font-size:.85em;font-style:italic;overflow-wrap:anywhere} /* quoted UI/error strings (guide) */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} ::selection{background:var(--brand);color:#fff} /* ── 4. CONTAINERS ────────────────────────────────────────────────────────── */ /* Full-width by default (fills 100% of the screen; only the fluid gutter pads the edges) */ .container{width:100%;max-width:none;margin-inline:auto;padding-inline:var(--gutter)} .container--wide,.container--mid,.container--prose{max-width:none} .bleed{width:100vw;margin-inline:calc(50% - 50vw)} /* full-bleed break-out */ .flow>*+*{margin-block-start:var(--flow-space,var(--s10))} /* vertical rhythm (replaces .section) */ /* ── 5. TYPOGRAPHY SCOPES (zero-specificity defaults) ─────────────────────── */ :where(.landing) h2{font-size:var(--fs-2xl);line-height:var(--lh-heading);color:var(--brand-ink); border-bottom:3px solid var(--brand);padding-bottom:var(--s2);margin-bottom:var(--s5)} :where(.landing) h3{font-size:var(--fs-lg);line-height:var(--lh-heading);margin:var(--s6) 0 var(--s3)} :where(.landing) p{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--s4)} :where(.landing) ul,:where(.landing) ol{margin:0 0 var(--s5) var(--s6)} :where(.landing) li{color:var(--muted);margin-bottom:var(--s2)} :where(.doc){line-height:1.65} :where(.doc) h1{font-size:var(--fs-xl);line-height:var(--lh-tight);margin:var(--s2) 0 var(--s3)} :where(.doc) h2{font-size:var(--fs-lg);line-height:var(--lh-heading);margin:var(--s8) 0 var(--s3); padding-top:var(--s3);border-top:1px solid var(--border)} :where(.doc) h3{font-size:var(--fs-md);line-height:var(--lh-heading);margin:var(--s5) 0 var(--s2)} :where(.doc) p{margin:var(--s2) 0} :where(.doc) ul,:where(.doc) ol{margin:var(--s2) 0 var(--s2) 22px} :where(.doc) li{margin:var(--s1) 0} /* ── 6. UTILITIES ─────────────────────────────────────────────────────────── */ .grid{display:grid;gap:var(--gap)} /* auto-fit by minimum track — min(100%,…) floor prevents 320px overflow */ .grid--min-180{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))} .grid--min-220{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .grid--min-280{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} /* explicit collapsing columns (pricing / feature rows) */ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} @media(min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr)}} @media(min-width:1024px){.grid--4{grid-template-columns:repeat(4,1fr)}} .u-center{text-align:center} .u-lead{font-size:var(--fs-lg);color:var(--ink)} .u-muted{color:var(--muted)} .u-mt-0{margin-top:0} .u-nowrap{white-space:nowrap} @media(max-width:767px){.u-hide-mobile{display:none!important}} @media(min-width:768px){.u-hide-desktop{display:none!important}} /* ── 7. COMPONENTS ────────────────────────────────────────────────────────── */ /* Hero */ .hero{background:var(--grad-brand);color:#fff;text-align:center;padding:clamp(2.5rem,7vw,3.75rem) var(--gutter)} .hero h1{font-size:var(--fs-3xl);line-height:1.12;color:#fff;margin-bottom:var(--s5)} .hero p{font-size:var(--fs-lg);color:#fff;opacity:.96;max-width:50ch;margin-inline:auto} /* Card / panel */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--pad-card);box-shadow:var(--shadow)} .card--flush{padding:0;overflow:hidden} .card>:first-child{margin-top:0} /* card hygiene: no top gap on first child */ a.card{color:inherit;display:block} /* linked card (blog index, etc.) */ a.card:hover{text-decoration:none;box-shadow:var(--shadow-lg)} /* Stat tile (gradient) */ .stat{background:var(--grad-brand);color:#fff;border-radius:var(--r-lg);padding:var(--s8) var(--s5); text-align:center;box-shadow:var(--shadow-lg)} .stat__num{font-size:var(--fs-3xl);font-weight:800;line-height:1;margin-bottom:var(--s2)} .stat__label{color:#fff} /* full white ≥4.9:1 on gradient */ /* Feature card (accent rail) */ .feature{background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--brand); border-radius:var(--r);padding:var(--s6)} .feature__icon{font-size:2.4rem;line-height:1;margin-bottom:var(--s3)} .feature h3{color:var(--brand-ink);margin-top:0} /* Team / person card */ .member{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--s8);text-align:center} .member__avatar{width:clamp(96px,20vw,120px);aspect-ratio:1;border-radius:50%;margin:0 auto var(--s5); background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.6rem} /* CTA band */ .cta{background:var(--grad-brand);color:#fff;border-radius:var(--r-lg);text-align:center; padding:clamp(2rem,6vw,3.75rem) var(--gutter)} .cta h2{color:#fff;border:0;padding:0;margin-bottom:var(--s4)} .cta p{color:#fff;opacity:.96} /* Buttons — always ≥44px */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:var(--tap);padding-inline:clamp(1.25rem,4vw,2.5rem);border-radius:var(--r); font:inherit;font-weight:700;font-size:var(--fs-lg);line-height:1.1;cursor:pointer; border:1px solid transparent;text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)} .btn--primary{background:var(--grad-brand);color:#fff} .btn--light{background:#fff;color:var(--brand)} .btn--ghost{background:transparent;color:var(--brand-ink);border-color:var(--border)} .btn--sm{min-height:36px;padding-inline:.875rem;font-size:var(--fs-sm)} .btn--lg{min-height:52px;font-size:var(--fs-xl)} .btn--block{display:flex;width:100%} .btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none;transform:none;box-shadow:none} /* Forms */ .field{display:block;margin-block:var(--s4)} .label{display:block;font-weight:600;margin-bottom:var(--s2);color:var(--ink)} .input,.textarea,.select{width:100%;min-height:var(--tap);padding:.75rem .875rem;font:inherit; color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--r)} .textarea{min-height:120px;resize:vertical} .input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 28%,transparent)} .input--error{border-color:var(--danger-border)} .check{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap)} .form-hint{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s1)} .form-hint--error{color:var(--danger-ink)} /* Tables — styled ONLY inside the mandatory responsive wrapper */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s3) 0} .table-wrap table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .table-wrap th,.table-wrap td{border:1px solid var(--border);padding:.5rem .625rem;text-align:left;vertical-align:top} .table-wrap th{background:var(--surface-2);font-weight:700} .t-c{text-align:center;white-space:nowrap} .t-yes{color:var(--success-ink);font-weight:700} .t-ltd{color:var(--warning-ink);font-weight:700} .t-no{color:var(--text-faint)} /* Alerts (symmetric semantic set) */ .alert{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r); padding:var(--s3) var(--s4);margin:var(--s3) 0} .alert__title{font-weight:700;margin-bottom:var(--s1)} .alert--brand{background:var(--accent-soft);border-color:var(--brand)} .alert--success{background:var(--success-bg);border-color:var(--success-border)} .alert--warning{background:var(--warning-bg);border-color:var(--warning-border)} .alert--danger{background:var(--danger-bg);border-color:var(--danger-border)} .alert--info{background:var(--info-bg);border-color:var(--info-border)} /* Emphasised call-out (was .next) */ .callout{background:var(--accent-soft);border:1px solid var(--brand);border-radius:var(--r); padding:var(--s4);margin-top:var(--s8)} /* Doc chrome */ .kicker{color:var(--brand-ink);font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase} .doc-header{border-bottom:3px solid var(--brand);padding-bottom:var(--s4);margin-bottom:var(--s6)} .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s3)} .meta b{color:var(--ink);font-weight:600} .doc-footer{margin-top:var(--s10);padding-top:var(--s4);border-top:1px solid var(--border); font-size:var(--fs-xs);color:var(--muted)} /* Site footer (marketing chrome) */ .site-footer{background:var(--footer-bg);color:#cfcfe0;text-align:center;padding:var(--s10) var(--gutter);margin-top:var(--s12)} .site-footer a{color:var(--footer-link);margin:0 12px;display:inline-block;min-height:var(--tap);line-height:var(--tap)} .site-footer p{margin:var(--s1) 0} /* Accordion / FAQ — native

, zero JS, keyboard-accessible */ .accordion{display:flex;flex-direction:column;gap:var(--s3)} .accordion details{border:1px solid var(--border);border-radius:var(--r);background:var(--surface)} .accordion summary{cursor:pointer;list-style:none;padding:var(--s4);font-weight:600; display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:var(--tap)} .accordion summary::-webkit-details-marker{display:none} .accordion summary::after{content:"+";color:var(--brand-ink);font-weight:700;font-size:1.25em;line-height:1} .accordion details[open]>summary::after{content:"\2013"} .accordion details[open]>summary{border-bottom:1px solid var(--border)} .accordion__body{padding:var(--s4);color:var(--muted)} /* Steps — numbered process list */ .steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:var(--s4);margin:var(--s4) 0} .steps>li{counter-increment:step;position:relative;padding-left:calc(var(--s10) + var(--s3));min-height:var(--s10)} .steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:var(--s10);height:var(--s10); border-radius:50%;background:var(--grad-brand);color:#fff;font-weight:800; display:flex;align-items:center;justify-content:center} .steps__t{font-weight:700;display:block;margin-bottom:var(--s1)} /* Tags / chips */ .taglist{display:flex;flex-wrap:wrap;gap:var(--s2)} .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill); background:var(--surface-2);border:1px solid var(--border);font-size:var(--fs-sm);color:var(--muted)} .tag--ok{color:var(--success-ink);border-color:var(--success-border)} /* ── 8. PRINT ─────────────────────────────────────────────────────────────── */ @media print{ body{background:#fff;color:#000;font-size:12px} .hero,.cta,.stat,.member__avatar{background:none!important;color:#000!important;box-shadow:none} .card,.feature,.member{box-shadow:none;border:1px solid #ccc} :where(.doc) h2{page-break-after:avoid} .table-wrap table{page-break-inside:avoid} .site-footer{background:none;color:#000} } @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}