/* ============================================================ Local Lift Studio — Demo Design System ("Warm Craft-Premium") Shared by all 12 proof demos. Link: ../assets/lls.css Per-vertical accent: set data-v="health|beauty|hospo|trade" on . ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* warm neutrals */ --paper:#FBF8F3; /* warm off-white page */ --paper-2:#F3EEE4; /* tinted section */ --card:#FFFFFF; --ink:#1A1613; /* warm near-black */ --ink-2:#403930; /* body */ --ink-soft:#6B6155; /* muted */ --line:#E6DECF; /* hairline */ --line-2:#D9CFBC; /* studio brand */ --brand:#0F5C4C; /* deep forest-teal */ --brand-deep:#0A4438; --gold:#E0A43B; /* warm accent */ --gold-soft:#F7E9CC; /* accent (overridden per vertical) */ --accent:#0F5C4C; --accent-deep:#0A4438; --accent-soft:#E2F0EB; /* feedback */ --good:#1F9D6B; --good-soft:#E3F6EE; --warn:#C2510A; --warn-soft:#FBE7D7; --bad:#C0392B; --bad-soft:#FBE6E3; /* system */ --shadow-sm:0 2px 8px -3px rgba(26,22,19,.18); --shadow:0 22px 48px -28px rgba(26,22,19,.42); --shadow-lift:0 30px 60px -30px rgba(26,22,19,.5); --r:18px; --r-sm:11px; --r-lg:26px; --maxw:1120px; --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1); } body[data-v="health"]{--accent:#0E7C86;--accent-deep:#0A5b63;--accent-soft:#E0F3F4} body[data-v="beauty"]{--accent:#B5567E;--accent-deep:#8E3D60;--accent-soft:#F8E6EF} body[data-v="hospo"] {--accent:#C2510A;--accent-deep:#9A3F06;--accent-soft:#FBE7D5} body[data-v="trade"] {--accent:#1F6FEB;--accent-deep:#1552BD;--accent-soft:#E1ECFD} html{scroll-behavior:smooth} body{font-family:var(--body);color:var(--ink-2);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased; background-image:radial-gradient(rgba(26,22,19,.022) 1px,transparent 1px);background-size:22px 22px} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} h1,h2,h3,h4,.display{font-family:var(--display);color:var(--ink);font-weight:700;letter-spacing:-.02em;line-height:1.08} a{color:var(--accent-deep);text-decoration:none}a:hover{text-decoration:underline} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .wrap-sm{max-width:760px;margin:0 auto;padding:0 22px} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.02em} .logo .dot{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:var(--shadow-sm)} .nav-links{display:flex;gap:22px;align-items:center} .nav-links a{color:var(--ink-2);font-size:14.5px;font-weight:600} .nav-links a:hover{color:var(--accent-deep);text-decoration:none} @media(max-width:720px){.nav-links a:not(.btn){display:none}} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px; padding:13px 24px;border-radius:999px;border:0;cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s;text-decoration:none} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -10px var(--accent)} .btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 16px 30px -12px var(--accent);text-decoration:none} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep);text-decoration:none} .btn-gold{background:var(--gold);color:#3a2a08}.btn-gold:hover{filter:brightness(1.05);transform:translateY(-2px);text-decoration:none} .btn-lg{padding:16px 30px;font-size:16.5px} .btn-block{display:flex;width:100%;justify-content:center} /* ---- badges / eyebrow ---- */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)} .pill{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:12.5px;padding:6px 13px;border-radius:999px} .pill-gold{background:var(--gold-soft);color:#7a560f} .chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink-2)} /* ---- hero ---- */ .hero{position:relative;padding:64px 0 72px;overflow:hidden} .hero h1{font-size:clamp(34px,5.4vw,62px);max-width:16ch} .hero .lead{font-size:clamp(16px,1.9vw,20px);color:var(--ink-soft);max-width:54ch;margin-top:18px} .hero-cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} @media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:32px}} /* ---- sections ---- */ .section{padding:68px 0} .section.tint{background:var(--paper-2)} .section.ink{background:var(--ink);color:#e9e3d8} .section.ink h2,.section.ink h3{color:#fff} .section-head{max-width:62ch} .section h2{font-size:clamp(26px,3.4vw,40px)} .section .sub{color:var(--ink-soft);font-size:17px;margin-top:12px} .section.ink .sub{color:#c3bcae} /* ---- cards ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} .card.hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)} .card .ico{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center;font-size:22px;margin-bottom:14px} .grid{display:grid;gap:20px} .grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:880px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ---- stats / proof numbers ---- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center} .stat .big{font-family:var(--display);font-size:clamp(30px,4vw,44px);font-weight:700;color:var(--accent-deep);line-height:1} .stat .lbl{font-size:13px;color:var(--ink-soft);margin-top:7px;font-weight:600} /* ---- before / after slider ---- */ .ba{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);user-select:none;box-shadow:var(--shadow-sm)} .ba .pane{position:relative} .ba .after{position:absolute;inset:0;overflow:hidden;width:50%} .ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;cursor:ew-resize;box-shadow:0 0 0 1px rgba(0,0,0,.12)} .ba .handle::after{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:700;box-shadow:var(--shadow-sm)} .ba .tag{position:absolute;top:12px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(26,22,19,.78);color:#fff} .ba .tag.l{left:12px}.ba .tag.r{right:12px;background:var(--accent)} /* ---- phone / SMS frame ---- */ .phone{width:280px;max-width:100%;background:#0d0d0f;border-radius:36px;padding:12px;box-shadow:var(--shadow-lift);margin:0 auto} .phone .screen{background:#fff;border-radius:26px;overflow:hidden;min-height:480px;display:flex;flex-direction:column} .phone .bar{background:#f3f3f5;padding:10px 14px;font-size:12px;font-weight:700;color:#444;display:flex;justify-content:space-between;border-bottom:1px solid #eee} .sms{padding:14px;display:flex;flex-direction:column;gap:10px;background:#e9eaf0;flex:1} .sms .b{max-width:80%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,.08)} .sms .in{background:#fff;color:#1a1a1a;align-self:flex-start;border-bottom-left-radius:4px} .sms .out{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .sms .meta{font-size:10.5px;color:#8a8a8a;text-align:center} /* ---- reviews ---- */ .stars{color:var(--gold);letter-spacing:2px;font-size:15px} .review{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px} .review .who{display:flex;align-items:center;gap:10px;margin-top:12px} .review .av{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);display:grid;place-items:center;font-weight:700} /* ---- forms / booking ---- */ .field{margin-top:14px} .field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;padding:12px 13px;border:1.5px solid var(--line-2);border-radius:11px;background:#fff;color:var(--ink);transition:border-color .15s} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent)} .choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:8px} .choice{border:1.5px solid var(--line-2);border-radius:12px;padding:13px;cursor:pointer;font-weight:600;font-size:14px;background:#fff;transition:.15s;text-align:left} .choice:hover{border-color:var(--accent)} .choice.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)} .choice small{display:block;font-weight:500;color:var(--ink-soft);font-size:12.5px;margin-top:3px} .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px;margin-top:8px} .slot{border:1.5px solid var(--line-2);border-radius:10px;padding:10px 6px;text-align:center;font-weight:700;font-size:13.5px;cursor:pointer;background:#fff;transition:.15s} .slot:hover{border-color:var(--accent)} .slot.sel{background:var(--accent);color:#fff;border-color:var(--accent)} .slot.gone{opacity:.4;text-decoration:line-through;cursor:not-allowed} .steps{display:flex;gap:6px;margin-bottom:18px} .steps .s{flex:1;height:5px;border-radius:999px;background:var(--line)} .steps .s.on{background:var(--accent)} .steps .s.done{background:var(--good)} /* ---- dashboard / charts ---- */ .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:680px){.kpi{grid-template-columns:repeat(2,1fr)}} .kpi .c{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px} .kpi .c .k{font-size:12px;color:var(--ink-soft);font-weight:600} .kpi .c .v{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ink);margin-top:4px} .kpi .c .d{font-size:12px;font-weight:700;margin-top:4px}.kpi .up{color:var(--good)}.kpi .down{color:var(--bad)} .bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px} .bars .bar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-radius:6px 6px 0 0;min-height:4px;transition:height .8s var(--ease)} .bars .bar.alt{background:linear-gradient(180deg,var(--gold),#c8881f)} /* ---- trust strip / footer ---- */ .trust{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;color:var(--ink-soft);font-size:13.5px;font-weight:600} .trust .i{display:flex;align-items:center;gap:8px} .footer{background:var(--ink);color:#b8b0a3;padding:40px 0;font-size:14px} .footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} .footer a{color:#ded6c8} /* ---- demo banner (marks these as proof demos) ---- */ .demo-flag{background:var(--ink);color:#f3ecd9;text-align:center;font-size:12.5px;font-weight:600;padding:8px 14px;letter-spacing:.02em} .demo-flag a{color:var(--gold);font-weight:700} /* ---- reveal motion ---- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---- toast ---- */ .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);background:var(--ink);color:#fff;padding:14px 20px;border-radius:14px;box-shadow:var(--shadow);font-weight:600;font-size:14.5px;z-index:200;display:flex;gap:10px;align-items:center;transition:transform .4s var(--ease);max-width:90vw} .toast.show{transform:translateX(-50%) translateY(0)} .mut{color:var(--ink-soft)} .center{text-align:center}.mt0{margin-top:0}.mt24{margin-top:24px}.mt40{margin-top:40px} /* ============================================================ COMPAT LAYER — supports new-system tokens/classes used by the rebuilt physio + audit demos. Purely additive; does not change the original "Warm Craft-Premium" vocabulary the other demos use. ============================================================ */ :root{ --tx:var(--ink); --tx-2:var(--ink-2); --tx-3:var(--ink-soft); --tx-inv:#f4f6fb; --tx-inv-2:#c7bfae; --ink-3:#2a241d; --acc:var(--accent); --acc-2:var(--accent); --acc-soft:var(--accent-soft); --acc-ink:var(--accent-deep); --paper-3:#ece4d6; --gold-2:var(--gold); --gold-ink:#3a2a08; --shadow-lg:var(--shadow-lift); --r-xs:8px; --r-xl:30px; --r-pill:999px; --maxw-sm:760px; --gut:22px; } body[data-v="health"]{--acc:#0E7C86;--acc-2:#1ea97c;--acc-soft:#E0F3F4;--acc-ink:#0A5b63} body[data-v="beauty"]{--acc:#B5567E;--acc-2:#d6519e;--acc-soft:#F8E6EF;--acc-ink:#8E3D60} body[data-v="hospo"] {--acc:#C2510A;--acc-2:#e0612f;--acc-soft:#FBE7D5;--acc-ink:#9A3F06} body[data-v="trade"] {--acc:#1F6FEB;--acc-2:#3b6ef5;--acc-soft:#E1ECFD;--acc-ink:#1552BD} .pad-lg{padding:clamp(24px,4vw,40px)!important} .grid.g2{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)} .grid.g3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)} @media(max-width:760px){.grid.g2,.grid.g3{grid-template-columns:1fr}} .section.ink .eyebrow{color:var(--gold)} .section.ink .sub,.section.ink p{color:#d9d1c2} .section.ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)} .hide-sm{} @media(max-width:760px){.nav-links a.hide-sm{display:none}} .logo .dot{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:var(--shadow-sm)} .phone .nub{height:18px;background:#0d0d0f;display:flex;align-items:center;justify-content:center} .phone .nub::after{content:"";width:46px;height:5px;border-radius:99px;background:#34343a} .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center} .toast-wrap .toast{position:static;transform:none;animation:toastIn .35s var(--ease)} .toast-wrap .toast.out{opacity:0;transition:opacity .3s} @keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ============================================================ COMPAT LAYER (v2) — aliases new-system tokens/classes used by the rebuilt physio + audit demos onto the base vocabulary. Purely additive. Keep this at the END of lls.css. ============================================================ */ :root{ --tx:var(--ink); --tx-2:var(--ink-2); --tx-3:var(--ink-soft); --tx-inv:#f4f6fb; --tx-inv-2:#c7bfae; --ink-3:#2a241d; --acc:var(--accent); --acc-2:var(--accent); --acc-soft:var(--accent-soft); --acc-ink:var(--accent-deep); --paper-3:#ece4d6; --gold-2:var(--gold); --gold-ink:#3a2a08; --shadow-lg:var(--shadow-lift); --r-xs:8px; --r-xl:30px; --r-pill:999px; --maxw-sm:760px; --gut:22px; } body[data-v="health"]{--acc:#0E7C86;--acc-2:#1ea97c;--acc-soft:#E0F3F4;--acc-ink:#0A5b63} body[data-v="beauty"]{--acc:#B5567E;--acc-2:#d6519e;--acc-soft:#F8E6EF;--acc-ink:#8E3D60} body[data-v="hospo"] {--acc:#C2510A;--acc-2:#e0612f;--acc-soft:#FBE7D5;--acc-ink:#9A3F06} body[data-v="trade"] {--acc:#1F6FEB;--acc-2:#3b6ef5;--acc-soft:#E1ECFD;--acc-ink:#1552BD} .pad-lg{padding:clamp(24px,4vw,40px)!important} .grid.g2{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)} .grid.g3{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)} @media(max-width:760px){.grid.g2,.grid.g3{grid-template-columns:1fr}} .section.ink .eyebrow{color:var(--gold)} .section.ink .sub,.section.ink p{color:#d9d1c2} .section.ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)} @media(max-width:760px){.nav-links a.hide-sm{display:none}} .phone .nub{height:18px;background:#0d0d0f;display:flex;align-items:center;justify-content:center} .phone .nub::after{content:"";width:46px;height:5px;border-radius:99px;background:#34343a} .toast-wrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center} .toast-wrap .toast{position:static;transform:none;animation:toastIn .35s var(--ease)} .toast-wrap .toast.out{opacity:0;transition:opacity .3s} @keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}