/* ============================================================ JothidaKural — Design System tokens & components Bilingual (Latin: Plus Jakarta Sans · Tamil: Anek Tamil) 3 palettes (a/b/c) × light/dark, switched via data-attrs on ============================================================ */ /* ---------- Reset-ish ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0} img,svg{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} a{color:inherit;text-decoration:none} :focus-visible{outline:2.5px solid var(--ring);outline-offset:2px;border-radius:6px} /* ---------- Type families ---------- */ :root{ --font-latin:"Plus Jakarta Sans",system-ui,sans-serif; --font-tamil:"Anek Tamil","Plus Jakarta Sans",system-ui,sans-serif; --font:var(--font-latin); /* spacing scale (4pt) */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px; --s8:40px;--s9:56px;--s10:72px;--s11:96px;--s12:128px; /* radii */ --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-2xl:40px;--r-pill:999px; /* type scale (responsive) */ --t-eyebrow:.78rem; --t-cap:.82rem; --t-sm:.92rem; --t-body:1.02rem; --t-lg:1.18rem; --t-h4:clamp(1.2rem,1.6vw,1.45rem); --t-h3:clamp(1.5rem,2.4vw,2rem); --t-h2:clamp(2rem,3.6vw,3rem); --t-h1:clamp(2.6rem,5.2vw,4.4rem); --t-display:clamp(3.4rem,7vw,6rem); --lh-tight:1.04;--lh-snug:1.18;--lh-body:1.62; --tr-tight:-.02em;--tr-disp:-.035em; --maxw:1200px; } /* ============================================================ PALETTES — semantic tokens ============================================================ */ /* ---- A · Kovil Gold (warm devotional) — LIGHT ---- */ html[data-palette="a"][data-theme="light"]{ --brand:#EF4B0C; --brand-2:#C9381F; --on-brand:#FFF6EE; --brand-soft:#FBE6D2; --brand-tint:#FCF1E4; --accent:#B07A1E; --accent-soft:#F2E4C6; --on-accent:#FFFBF0; --bg:#FBF3E6; --surface:#FFFCF6; --surface-2:#FBF1E1; --surface-3:#F6E8D2; --ink:#2C1409; --ink-2:#6A4A39; --ink-3:#9A7C68; --border:#EBD9BF; --border-2:#E0C8A6; --ring:#EF4B0C; --star:#D69A24; --success:#2F7A4E; --motif:#E7CFA8; --shadow:24 12 6; } /* ---- A — DARK ---- */ html[data-palette="a"][data-theme="dark"]{ --brand:#FB6322; --brand-2:#F08A3C; --on-brand:#23100A; --brand-soft:#3A1C10; --brand-tint:#271710; --accent:#E4B04A; --accent-soft:#3A2C16; --on-accent:#241704; --bg:#1B0F09; --surface:#261710; --surface-2:#301E14; --surface-3:#3B2718; --ink:#FBEEDD; --ink-2:#D2B295; --ink-3:#9C7D63; --border:#3D281A; --border-2:#4E331F; --ring:#FB6322; --star:#E7B345; --success:#5FB783; --motif:#4A311E; --shadow:0 0 0; } /* ---- B · Clean Saffron (modern app, trustworthy) — LIGHT ---- */ html[data-palette="b"][data-theme="light"]{ --brand:#F24405; --brand-2:#FF6A2B; --on-brand:#FFFFFF; --brand-soft:#FFE3D6; --brand-tint:#FFF1EA; --accent:#1C2C46; --accent-soft:#E4E8F0; --on-accent:#FFFFFF; --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#EEF1F6; --ink:#11161E; --ink-2:#4B5563; --ink-3:#8A93A1; --border:#E5E9EF; --border-2:#D6DCE4; --ring:#F24405; --star:#E8A317; --success:#1E9E63; --motif:#E2E7EF; --shadow:20 26 38; } /* ---- B — DARK ---- */ html[data-palette="b"][data-theme="dark"]{ --brand:#FF5A1F; --brand-2:#FF7A45; --on-brand:#1A0D06; --brand-soft:#3A1B0E; --brand-tint:#231711; --accent:#9DB4D8; --accent-soft:#1E2940; --on-accent:#0B1018; --bg:#0C0F14; --surface:#141921; --surface-2:#1A212B; --surface-3:#222A36; --ink:#EEF1F5; --ink-2:#A6B0BF; --ink-3:#6C7686; --border:#232B37; --border-2:#2E3947; --ring:#FF5A1F; --star:#EAB23E; --success:#34B87C; --motif:#1E2733; --shadow:0 0 0; } /* ---- C · Cosmic Dusk (premium, celestial) — LIGHT ---- */ html[data-palette="c"][data-theme="light"]{ --brand:#E2570E; --brand-2:#C2410C; --on-brand:#FFF8F1; --brand-soft:#F3DECB; --brand-tint:#F4ECE6; --accent:#7A4FB0; --accent-soft:#EAE1F2; --on-accent:#FFFFFF; --bg:#F4F1F7; --surface:#FFFFFF; --surface-2:#F6F2FA; --surface-3:#EDE7F3; --ink:#241834; --ink-2:#5B4E70; --ink-3:#8E83A1; --border:#E6DEEE; --border-2:#D9CEE6; --ring:#7A4FB0; --star:#CD9A2C; --success:#2E8B6A; --motif:#E2D6EE; --shadow:30 20 50; } /* ---- C — DARK (the hero state) ---- */ html[data-palette="c"][data-theme="dark"]{ --brand:#F2741A; --brand-2:#F59E3D; --on-brand:#1A0F05; --brand-soft:#3A2410; --brand-tint:#221634; --accent:#B98CE6; --accent-soft:#2C1F44; --on-accent:#160B26; --bg:#130C24; --surface:#1E1638; --surface-2:#271C46; --surface-3:#322455; --ink:#F3EDFB; --ink-2:#C3B4DD; --ink-3:#8B7BA8; --border:#2E2350; --border-2:#3C2E66; --ring:#B98CE6; --star:#E7B53A; --success:#4FC59A; --motif:#2A1E4A; --shadow:0 0 0; } /* ============================================================ BASE ============================================================ */ body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; transition:background .4s ease,color .4s ease; } :lang(ta),.ta{font-family:var(--font-tamil)} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px} h1,h2,h3,h4{margin:0;font-weight:800;line-height:var(--lh-snug);letter-spacing:var(--tr-tight)} p{margin:0} /* ============================================================ COMPONENTS ============================================================ */ /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:var(--t-sm);line-height:1; padding:14px 22px;border-radius:var(--r-pill); transition:transform .15s ease,box-shadow .25s ease,background .2s ease,border-color .2s; white-space:nowrap; } .btn svg{width:18px;height:18px} .btn:active{transform:translateY(1px)} .btn-primary{ background:var(--brand);color:var(--on-brand); box-shadow:0 10px 24px -10px color-mix(in oklab,var(--brand) 70%,transparent); } .btn-primary:hover{background:var(--brand-2);box-shadow:0 14px 30px -10px color-mix(in oklab,var(--brand) 65%,transparent)} .btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--border-2)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand)} .btn-soft{background:var(--brand-soft);color:var(--brand)} .btn-soft:hover{background:color-mix(in oklab,var(--brand-soft) 70%,var(--brand) 18%)} .btn-accent{background:var(--accent);color:var(--on-accent)} .btn-lg{padding:17px 30px;font-size:var(--t-body)} .btn-sm{padding:9px 16px;font-size:var(--t-cap)} .btn-block{width:100%} /* chips / pills */ .chip{ display:inline-flex;align-items:center;gap:7px; padding:7px 14px;border-radius:var(--r-pill); font-size:var(--t-cap);font-weight:600; background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border); } .chip-brand{background:var(--brand-soft);color:var(--brand);border-color:transparent} .chip-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .eyebrow{ font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--brand);display:inline-flex;align-items:center;gap:9px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px} /* badges */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.02em} .badge-live{background:color-mix(in oklab,var(--success) 16%,transparent);color:var(--success)} .badge-live .pulse{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 color-mix(in oklab,var(--success) 60%,transparent);animation:pulse 1.8s infinite} .badge-online{background:var(--brand-soft);color:var(--brand)} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--success) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} /* inputs */ .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:var(--t-cap);font-weight:600;color:var(--ink-2)} .input{ padding:13px 15px;border-radius:var(--r-sm); background:var(--surface);border:1.5px solid var(--border-2);color:var(--ink); font:inherit;font-size:var(--t-sm);transition:border-color .2s,box-shadow .2s; } .input::placeholder{color:var(--ink-3)} .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 16%,transparent)} /* cards */ .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:0 1px 2px -1px rgb(var(--shadow)/.12),0 18px 40px -28px rgb(var(--shadow)/.5); } .card-pad{padding:22px} /* stars */ .stars{display:inline-flex;gap:2px;color:var(--star)} .stars svg{width:15px;height:15px} /* rating numerals */ .rate{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:var(--t-sm)} .rate svg{width:15px;height:15px;color:var(--star)} /* avatar placeholder (striped — drop a real photo here) */ .ph{ position:relative;overflow:hidden;border-radius:var(--r-md); background: repeating-linear-gradient(135deg,var(--surface-3),var(--surface-3) 9px,var(--surface-2) 9px,var(--surface-2) 18px); display:grid;place-items:center; } .ph span{ font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:11px;letter-spacing:.04em;color:var(--ink-3); background:var(--surface);padding:3px 8px;border-radius:6px;border:1px solid var(--border); } .ph.round{border-radius:50%} /* divider */ .hr{height:1px;background:var(--border);border:0;margin:0} /* swatch grid bits */ .swatch{height:64px;border-radius:var(--r-sm);border:1px solid rgb(var(--shadow)/.08)} .tok{display:flex;flex-direction:column;gap:7px} .tok small{font-size:var(--t-eyebrow);color:var(--ink-3);font-weight:600;letter-spacing:.03em} .tok b{font-size:var(--t-cap);font-weight:700} /* motif: rasi sun-ray ring (simple radial geometry) */ .chakra{ --rays:24;border-radius:50%; background: repeating-conic-gradient(var(--motif) 0 1deg,transparent 1deg 15deg); -webkit-mask:radial-gradient(closest-side,transparent 58%,#000 59%,#000 96%,transparent 97%); mask:radial-gradient(closest-side,transparent 58%,#000 59%,#000 96%,transparent 97%); opacity:.9; }