/* ============================================================ Card Skins — visual "surface" language for the public card. Applied via . A skin ONLY sets structural design tokens (radius / shadow / border width). Colors stay owned by the per-card theme tokens (--t-*) injected in . This keeps the skin layer a single static, cached stylesheet — zero per-user CSS, no extra requests, no SEO/LCP cost no matter how many cards exist. When no data-skin is present, _CardLayout's fallbacks keep the legacy look, so existing cards are unchanged. ============================================================ */ /* ── Minimal — airy, hairline border, no shadow ───────────────── */ html[data-skin="minimal"] { --t-card-radius: 1rem; --t-card-shadow: none; --t-card-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.04); --t-card-border-width: 1px; --t-btn-radius: 0.75rem; } /* ── Flat — solid, defined borders, crisp corners, no shadow ──── */ html[data-skin="flat"] { --t-card-radius: 0.5rem; --t-card-shadow: none; --t-card-shadow-hover: none; --t-card-border-width: 1.5px; --t-btn-radius: 0.375rem; } /* ── Material — elevation via shadow, no border, rounded ──────── */ html[data-skin="material"] { --t-card-radius: 0.75rem; --t-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); --t-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.10); --t-card-border-width: 0px; --t-btn-radius: 0.5rem; } /* Material elevates on hover (cards are interactive surfaces) */ html[data-skin="material"] .grid-card { transition: box-shadow 0.2s ease; } html[data-skin="material"] .grid-card:hover { box-shadow: var(--t-card-shadow-hover); } /* Material reads better with slightly stronger elevation in dark mode. NOTE: the theme toggle adds `dark` to itself, and data-skin is also on , so the correct selector targets the SAME element: html[data-skin].dark */ html[data-skin="material"].dark { --t-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --t-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40); } /* ── Neumorphism — soft "extruded" surfaces (dual light/dark shadow) ────────── Heavy on a11y: low contrast. Pair with a palette where page bg == card bg. */ html[data-skin="neumorphism"] { --t-card-radius: 20px; --t-card-shadow: 8px 8px 16px rgba(163, 177, 198, 0.55), -8px -8px 16px rgba(255, 255, 255, 0.85); --t-card-border-width: 0px; } html[data-skin="neumorphism"].dark { --t-card-shadow: 8px 8px 18px rgba(0, 0, 0, 0.55), -6px -6px 16px rgba(255, 255, 255, 0.06); } /* ── Glassmorphism — frosted translucent cards over a colorful background ───── Heavy: backdrop-filter is GPU-expensive on low-end mobiles. Needs a gradient/ image page background behind it (the preset sets one). */ html[data-skin="glassmorphism"] { --t-card-radius: 16px; --t-card-border-width: 1px; } /* Frosted LIGHT glass: opaque enough that the card's normal (dark) text + its light sub-elements (icon chips, gray buttons, stat rows) all stay readable — the whole card markup is built for a light theme, so we keep it light and just add the frosted translucency + blur over the colorful page background. */ html[data-skin="glassmorphism"] .grid-card { background: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, 0.55) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; } /* Inner sub-elements (stat rows, contact/social tiles, product items, map overlay, floating bar) keep their light backgrounds — with the preset's DARK text they stay perfectly readable, and the colored icon chips keep their own colors. No per-box override needed (that previously whitewashed the icon buttons). */ /* ── Brutalism — hard black borders, solid offset shadow, sharp corners ──────── */ html[data-skin="brutalism"] { --t-card-radius: 0px; --t-card-border-width: 3px; --t-card-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9); } html[data-skin="brutalism"] .grid-card { border-color: #000 !important; } html[data-skin="brutalism"].dark { --t-card-shadow: 6px 6px 0 rgba(255, 255, 255, 0.9); } html[data-skin="brutalism"].dark .grid-card { border-color: #fff !important; }