/* ============================================================================
Kredily · Liquid Glass — Dynamic Time + Weather Theme
Drives the site from .
Rebranded to Kredily RED. The ONLY changes from the official handoff theme
are --accent / --accent-2 (and --accent-50 / --brand-h to match), exactly as
the handoff prescribes for rebranding. Everything else is verbatim.
========================================================================== */
/* ---- 1. Core palette + semantic tokens ---- */
:root{
--ink:#0e1116; --ink-muted:rgba(14,17,22,.70); --ink-subtle:rgba(14,17,22,.52); --ink-faint:rgba(14,17,22,.12);
--accent:#E8382E; --accent-2:#FF6147; --accent-50:rgba(var(--accent-rgb),.10); --brand-h:#C8261D;
--accent-rgb:232,56,46; --accent-2-rgb:255,97,71; /* drive all accent glows; scenes rebind these */
--success:#16A34A; --warning:#E08A00; --danger:#E0353B; --info:#2E63FF;
--glass:rgba(255,255,255,.50); --glass-strong:rgba(255,255,255,.66); --glass-soft:rgba(255,255,255,.34);
--edge:rgba(255,255,255,.62); --edge-soft:rgba(15,18,30,.08); --edge-hair:rgba(15,18,30,.04);
--drop-sm:0 1px 1px rgba(15,18,30,.05),0 4px 14px rgba(15,18,30,.09);
--drop-md:0 2px 3px rgba(15,18,30,.06),0 14px 38px -12px rgba(15,18,30,.20);
--drop-lg:0 4px 6px rgba(15,18,30,.07),0 28px 70px -22px rgba(15,18,30,.28);
--gloss:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(15,18,30,.06),inset 1px 0 0 rgba(255,255,255,.30),inset -1px 0 0 rgba(255,255,255,.22);
--r-xl:25px; --r-lg:19px; --r-md:16px; --r-sm:12px; --r-xs:9px;
--mesh-sat:100%; --mesh-bright:100%; --mesh-contrast:100%; --mesh-hue:0deg;
--bg:var(--mesh-base-1); --surface:var(--glass-strong); --border:var(--edge-soft);
--text:var(--ink); --muted:var(--ink-muted); --subtle:var(--ink-subtle);
}
/* ---- 2. SCENES — time of day rebinds the mesh palette AND the brand accent ---- */
/* Accent ramp travels coral→brand-red→scarlet→orange→rose→glowing-coral across the day.
Morning/midday hold the canonical Kredily red so the brand reads strongest in work hours. */
[data-scene="dawn"] {--mesh-a:#ffc4a8;--mesh-b:#d8a5e8;--mesh-c:#ffb8c8;--mesh-d:#ffd9b0;--mesh-e:#c8b8e8;--mesh-base-1:#fde8dc;--mesh-base-2:#f3e6f3;
--accent:#F4544E;--accent-2:#FF8A5B;--accent-rgb:244,84,78;--accent-2-rgb:255,138,91;--accent-50:rgba(244,84,78,.10);--brand-h:#D63B33}
[data-scene="morning"] {--mesh-a:#ffb3c8;--mesh-b:#c9b3ff;--mesh-c:#8ec5ff;--mesh-d:#ffd9a3;--mesh-e:#aef0d1;--mesh-base-1:#fbf3ec;--mesh-base-2:#f5eefb;
--accent:#E8382E;--accent-2:#FF6147;--accent-rgb:232,56,46;--accent-2-rgb:255,97,71;--accent-50:rgba(var(--accent-rgb),.10);--brand-h:#C8261D}
[data-scene="midday"] {--mesh-a:#a8d8ff;--mesh-b:#c4e4ff;--mesh-c:#8ec5ff;--mesh-d:#fff0c8;--mesh-e:#b8ecd4;--mesh-base-1:#eef6fb;--mesh-base-2:#f0f4fb;
--accent:#F5362B;--accent-2:#FF7350;--accent-rgb:245,54,43;--accent-2-rgb:255,115,80;--accent-50:rgba(245,54,43,.10);--brand-h:#D2271C}
[data-scene="afternoon"] {--mesh-a:#ffc89c;--mesh-b:#ffb8a0;--mesh-c:#ffd4a8;--mesh-d:#ffe0a8;--mesh-e:#f7b8c4;--mesh-base-1:#fbeee0;--mesh-base-2:#f9eee6;
--accent:#F2542D;--accent-2:#FF8A3D;--accent-rgb:242,84,45;--accent-2-rgb:255,138,61;--accent-50:rgba(242,84,45,.10);--brand-h:#D2431F}
[data-scene="dusk"] {--mesh-a:#ff9bb8;--mesh-b:#a87ce0;--mesh-c:#ff9d7e;--mesh-d:#f57588;--mesh-e:#7c52b8;--mesh-base-1:#f3deea;--mesh-base-2:#ebe0f3;
--accent:#F0457A;--accent-2:#FF7A9C;--accent-rgb:240,69,122;--accent-2-rgb:255,122,156;--accent-50:rgba(240,69,122,.10);--brand-h:#D22E63}
[data-scene="night"] {--mesh-a:#6a4a9c;--mesh-b:#4a5aa8;--mesh-c:#3a6a9c;--mesh-d:#8a4a8c;--mesh-e:#2a5a7c;--mesh-base-1:#1a1828;--mesh-base-2:#161a28;
--accent:#FF5247;--accent-2:#FF7E66;--accent-rgb:255,82,71;--accent-2-rgb:255,126,102;--accent-50:rgba(255,82,71,.14);--brand-h:#FF6F62}
/* Night = dark mode */
[data-scene="night"]{
--ink:#eaeefc; --ink-muted:rgba(234,238,252,.74); --ink-subtle:rgba(234,238,252,.55); --ink-faint:rgba(234,238,252,.14);
--glass:rgba(22,26,52,.58); --glass-strong:rgba(24,28,56,.70); --glass-soft:rgba(22,26,52,.40);
--edge:rgba(255,255,255,.12); --edge-soft:rgba(255,255,255,.10); --edge-hair:rgba(255,255,255,.06);
--gloss:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.20);
}
/* ---- 3. WEATHER — re-tints via shared filter (composes w/ scene) ---- */
[data-weather="clear"] {--mesh-sat:112%;--mesh-bright:102%;--mesh-contrast:102%;--mesh-hue:0deg}
[data-weather="cloudy"] {--mesh-sat:72%; --mesh-bright:98%; --mesh-contrast:96%; --mesh-hue:0deg}
[data-weather="rain"] {--mesh-sat:58%; --mesh-bright:92%; --mesh-contrast:95%; --mesh-hue:-10deg}
[data-weather="storm"] {--mesh-sat:42%; --mesh-bright:76%; --mesh-contrast:92%; --mesh-hue:-18deg}
[data-weather="fog"] {--mesh-sat:46%; --mesh-bright:104%;--mesh-contrast:82%; --mesh-hue:0deg}
[data-weather="snow"] {--mesh-sat:55%; --mesh-bright:108%;--mesh-contrast:94%; --mesh-hue:8deg}
[data-weather="haze"] {--mesh-sat:82%; --mesh-bright:102%;--mesh-contrast:92%; --mesh-hue:10deg}
/* ---- 4. Ambient background stack (3 fixed layers) ---- */
.bg{
position:fixed; inset:0; z-index:-3;
background:
radial-gradient(50% 42% at 8% 6%, color-mix(in srgb,var(--mesh-a) 70%,transparent) 0%,transparent 68%),
radial-gradient(38% 46% at 95% 10%, color-mix(in srgb,var(--mesh-d) 62%,transparent) 0%,transparent 65%),
radial-gradient(46% 50% at 5% 95%, color-mix(in srgb,var(--mesh-c) 65%,transparent) 0%,transparent 68%),
radial-gradient(50% 46% at 96% 88%, color-mix(in srgb,var(--mesh-b) 65%,transparent) 0%,transparent 65%),
radial-gradient(32% 32% at 50% 50%, color-mix(in srgb,var(--mesh-e) 45%,transparent) 0%,transparent 62%),
linear-gradient(180deg,var(--mesh-base-1) 0%,var(--mesh-base-2) 100%);
filter:saturate(var(--mesh-sat)) brightness(var(--mesh-bright)) hue-rotate(var(--mesh-hue)) contrast(var(--mesh-contrast));
transition:filter 1.6s ease, background 1.6s ease;
}
.bg__weather{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 1s ease;background-repeat:repeat;mix-blend-mode:overlay}
[data-weather="rain"] .bg__weather,[data-weather="storm"] .bg__weather{
opacity:.45;
background-image:url("data:image/svg+xml;utf8,");
animation:rainfall 1.4s linear infinite;
}
[data-weather="storm"] .bg__weather{opacity:.6;animation-duration:.9s}
@keyframes rainfall{from{background-position:0 0}to{background-position:-20px 80px}}
[data-weather="snow"] .bg__weather{
opacity:.55;
background-image:url("data:image/svg+xml;utf8,");
animation:snowfall 6s linear infinite;
}
@keyframes snowfall{from{background-position:0 0}to{background-position:10px 120px}}
[data-weather="fog"] .bg__weather,[data-weather="haze"] .bg__weather{
opacity:.6;
background-image:radial-gradient(60% 40% at 30% 40%,rgba(255,255,255,.55),transparent 70%),radial-gradient(60% 30% at 70% 70%,rgba(255,255,255,.45),transparent 70%);
background-repeat:no-repeat;background-size:100% 100%;animation:fogdrift 18s ease-in-out infinite alternate;
}
@keyframes fogdrift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,0,0)}}
.bg__grain{
position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.26;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
@media (prefers-reduced-motion: reduce){
.bg, .bg__weather{transition:none}
[data-weather] .bg__weather{animation:none}
}
/* ---- 5. Base typography ---- */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
color:var(--ink); background:var(--mesh-base-1); -webkit-font-smoothing:antialiased;
font-size:15px; letter-spacing:-.01em; line-height:1.5;
transition:color 1.2s ease, background 1.6s ease;
}
h1,h2,h3{letter-spacing:-.025em;line-height:1.1;margin:0}
a{color:inherit;text-decoration:none}
/* ---- 6. Liquid Glass marketing components ---- */
.lg-nav{position:sticky;top:16px;z-index:50;margin:16px auto 0;max-width:1140px;display:flex;align-items:center;gap:18px;padding:10px 14px 10px 18px;background:var(--glass-strong);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--edge-soft);border-radius:var(--r-xl);box-shadow:var(--gloss),var(--drop-md)}
@media(max-width:768px){.lg-nav{margin-left:10px;margin-right:10px;padding:8px 10px 8px 14px;gap:12px;top:8px}}
.lg-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.lg-mark{width:34px;height:34px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 6px 16px -2px rgba(var(--accent-rgb),.42)}
.lg-brand-name{background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-nav-links{display:flex;gap:6px;margin-left:auto}
.lg-nav-links a{padding:8px 14px;border-radius:999px;color:var(--ink-muted);font-weight:500;transition:all .15s}
.lg-nav-links a:hover{background:var(--accent-50);color:var(--ink)}
.lg-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .15s}
.lg-btn:active{transform:translateY(1px)}
.lg-btn-primary{color:#fff;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 8px 22px -6px rgba(var(--accent-rgb),.55)}
.lg-btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 14px 34px -8px rgba(var(--accent-rgb),.65)}
.lg-btn-ghost{background:var(--glass);color:var(--ink);border:1px solid var(--edge-soft);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.lg-btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--drop-sm)}
.lg-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.lg-hero{text-align:center;padding:84px 20px 48px}
@media(max-width:768px){.lg-hero{padding:52px 20px 36px}}
.lg-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;margin-bottom:22px;font-size:13px;font-weight:600;color:var(--ink-muted);background:var(--glass);border:1px solid var(--edge-soft);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lg-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.lg-hero h1{font-size:clamp(34px,6vw,64px);font-weight:800;max-width:14ch;margin:0 auto}
.lg-hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-hero p{font-size:clamp(16px,2.2vw,20px);color:var(--ink-muted);max-width:52ch;margin:22px auto 0}
.lg-hero-cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.lg-card{background:var(--glass);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--edge-soft);border-radius:var(--r-lg);box-shadow:var(--gloss),var(--drop-md);padding:26px;transition:transform .2s,box-shadow .2s}
.lg-card:hover{transform:translateY(-3px);box-shadow:var(--gloss),var(--drop-lg)}
.lg-card-strong{background:var(--glass-strong)}
.lg-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:40px}
.lg-card .ic{width:44px;height:44px;border-radius:13px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--accent-50);color:var(--accent)}
.lg-card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.lg-card p{color:var(--ink-muted);font-size:14.5px;margin:0}
.lg-section{padding:56px 20px}
@media(max-width:768px){.lg-section{padding:40px 16px}}
.lg-section-head{text-align:center;max-width:54ch;margin:0 auto 8px}
.lg-section-head h2{font-size:clamp(26px,4vw,40px);font-weight:800}
.lg-section-head p{color:var(--ink-muted);margin-top:12px}
.lg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:36px}
.lg-stat{text-align:center;padding:22px 16px;border-radius:var(--r-md);background:var(--glass-strong);border:1px solid var(--edge-soft);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:var(--gloss),var(--drop-sm)}
.lg-stat .num{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lg-stat .lbl{color:var(--ink-muted);font-size:13px;margin-top:6px}
.lg-footer{padding:48px 20px 64px;text-align:center;color:var(--ink-subtle);font-size:13px}
@media(max-width:768px){.lg-footer{padding:36px 16px 48px}}
/* ---- 7. Live environment chip (clock + scene + weather) ---- */
.lg-env{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-lg);min-width:210px;background:var(--glass-strong);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--edge-soft);box-shadow:var(--gloss),var(--drop-md);font-size:13px}
.lg-env-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lg-env-clock{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lg-env-meta{color:var(--ink-muted);text-transform:capitalize}
.lg-env-badge{padding:3px 9px;border-radius:999px;font-weight:600;font-size:11.5px;text-transform:capitalize;background:var(--accent-50);color:var(--accent)}
.lg-env hr{border:none;border-top:1px solid var(--edge-soft);margin:2px 0}
.lg-env-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-subtle)}
.lg-env-pills{display:flex;flex-wrap:wrap;gap:5px}
.lg-env-pill{padding:4px 9px;border-radius:999px;cursor:pointer;font-size:11.5px;font-weight:500;border:1px solid var(--edge-soft);background:var(--glass-soft);color:var(--ink-muted);transition:all .15s}
.lg-env-pill:hover{color:var(--ink);border-color:var(--accent)}
.lg-env-pill.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.lg-env-auto{font-size:11px;color:var(--ink-subtle);cursor:pointer;text-decoration:underline}
@media(max-width:560px){.lg-env{display:none}}