/* ============================================================ shisu v2 — warm collaboration Paper cream base (from the kiosk's own palette), one product accent (default: kiosk orange #E5531C). Accent is switchable via [data-accent] on : grey | green | blue | orange | red — all colors already shipped in the product. ============================================================ */ :root{ --bg:#ffffff; --soft:#f4f1ea; --panel:#f7f4ef; --card:#ffffff; --ink:#1f1b17; --ink-2:#57514a; --ink-3:#8b847b; --faint:#b6afa6; --line:#e4ded6; --line-2:#ebe6de; --dark:#23201c; --dark-2:#2d2925; --accent:#e5531c; --accent-d:#c7440f; --accent-soft:#fbe9df; --accent-ink:#ffffff; --ok:#1f9d57; --ok-soft:#e7f5ec; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif; --serif:"Source Serif 4",Georgia,"Times New Roman",serif; --display:var(--sans); --maxw:1140px; --r:24px; --r-sm:14px; --shadow:0 1px 2px rgba(45,38,30,.05),0 18px 48px -20px rgba(45,38,30,.22); --shadow-soft:0 1px 2px rgba(45,38,30,.04),0 10px 30px -16px rgba(45,38,30,.14); } html[data-accent="grey"] {--accent:#57514a;--accent-d:#3e3a34;--accent-soft:#edeae4;--accent-ink:#fff;} html[data-accent="green"] {--accent:#1f9d57;--accent-d:#177e45;--accent-soft:#e7f5ec;--accent-ink:#fff;} html[data-accent="blue"] {--accent:#2f6f9e;--accent-d:#255a81;--accent-soft:#eaf1f7;--accent-ink:#fff;} html[data-accent="orange"]{--accent:#e5531c;--accent-d:#c7440f;--accent-soft:#fbe9df;--accent-ink:#fff;} html[data-accent="red"] {--accent:#d63a2e;--accent-d:#b22c22;--accent-soft:#fbeae8;--accent-ink:#fff;} html[data-display="serif"] {--display:var(--serif);} *{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#14100c;} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.012em;line-height:1.5;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.06;color:var(--ink);} h1,h2{font-family:var(--display);font-weight:600;} p{margin:0;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .section{padding:118px 0;} @media(max-width:760px){.section{padding:78px 0;}} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:15px; border-radius:100px;padding:12px 22px;cursor:pointer;border:1px solid transparent;line-height:1; transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;white-space:nowrap;} .btn .arr{transition:transform .2s ease;} .btn:hover .arr{transform:translateX(3px);} .btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px -10px var(--accent);} .btn-accent:hover{background:var(--accent-d);} .btn-silver{background:#141519;color:#fff;border-color:#141519;} .btn-silver:hover{background:#000;border-color:#000;color:#fff;} .btn-dark{background:var(--ink);color:var(--bg);} .btn-dark:hover{background:#000;} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn-ghost:hover{background:var(--soft);} .btn-light{background:var(--bg);color:var(--ink);} .btn-light:hover{background:#fff;} .btn-lg{padding:14px 26px;font-size:15.5px;} /* ── nav ─────────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:60;background:rgba(250,248,244,.88); backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid rgba(231,227,221,.9); box-shadow:0 1px 2px rgba(45,38,30,.04); transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,backdrop-filter .22s ease;} .nav.scrolled{background:rgba(250,248,244,.9);border-color:rgba(231,227,221,.95);box-shadow:0 8px 28px -24px rgba(45,38,30,.35);} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;} .brand{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.03em; background:linear-gradient(180deg,#8d8579,#b8b1a5);-webkit-background-clip:text;background-clip:text;color:transparent;} .nav-left{display:flex;align-items:center;gap:34px;} .nav-primary{display:flex;align-items:center;gap:18px;} .nav-right{display:flex;align-items:center;gap:18px;} .nav-signin{font-size:14.5px;font-weight:500;color:var(--ink-2);} .nav-signin:hover{color:var(--ink);} .nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;color:var(--ink);padding:0;cursor:pointer;} .nav-burger svg{width:22px;height:22px;overflow:visible;} .nav-burger .burger-line{stroke:currentColor;stroke-width:2;stroke-linecap:round;transform-origin:12px 12px;transition:transform .18s ease,opacity .18s ease;} .burger-line-1{transform:translateY(-5px);} .burger-line-3{transform:translateY(5px);} .nav.is-open .burger-line-1{transform:rotate(45deg);} .nav.is-open .burger-line-2{opacity:0;} .nav.is-open .burger-line-3{transform:rotate(-45deg);} .nav-mobile-panel{display:none;} .nav-mobile-actions{display:flex;flex-direction:column;gap:14px;padding:22px 0 40px;} .nav-mobile-actions .btn{justify-content:center;font-size:16px;} @media(max-width:760px){ .nav-primary, .nav-right{display:none;} .nav-burger{display:inline-flex;} .nav.is-open{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 96%,transparent);overflow-y:auto;} .nav.is-open .nav-mobile-panel{display:block;} } /* ── hero ────────────────────────────────────────────────── */ .hero{text-align:center;padding:104px 0 0;overflow:hidden; background:linear-gradient(180deg,#fbf9f5 0%,var(--bg) 55%);} .hero h1{font-size:clamp(44px,6.4vw,76px);line-height:1.02;letter-spacing:-.024em;} .hero h1 em{font-style:italic; background:linear-gradient(180deg,#968f83,#bfb8ac);-webkit-background-clip:text;background-clip:text;color:transparent;} .hero .sub{max-width:540px;margin:26px auto 0;color:var(--ink-2);font-size:21px;letter-spacing:-.012em;line-height:1.5;} .hero-cta{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap;} .hero-stage{margin:64px auto 0;max-width:680px;padding-bottom:0;} /* ════════════════════════════════════════════════════════════ DEVICES — shared materials (HTML/CSS hardware, warm aluminum) ════════════════════════════════════════════════════════════ */ .dev-rim{background:linear-gradient(180deg,#f2efe9,#cdc8bf);border-radius:18px;padding:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.85);} .dev-bezel{background:linear-gradient(180deg,#34302b,#171513 55%,#0d0c0b);border-radius:15px;padding:10px;position:relative;} .dev-screen{background:#fcfbf8;border-radius:8px;overflow:hidden;position:relative; font-family:var(--sans);text-align:left;} .dev-cam{position:absolute;top:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%; background:#3c3833;box-shadow:inset 0 0 1px #000;} .dev-glare{position:absolute;inset:0;pointer-events:none;border-radius:8px; background:linear-gradient(118deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 26%);} .dev-arm{width:22px;background:linear-gradient(90deg,#9d978d,#f1eee8 32%,#cfcabf 52%,#f4f1ea 72%,#9d978d);margin:0 auto;position:relative;} .dev-arm::after{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;border-radius:1px;background:rgba(255,255,255,.5);} .dev-base{height:9px;border-radius:5px;background:linear-gradient(180deg,#efece6,#c2bdb3);margin:0 auto;position:relative;} .dev-base::after{content:"";position:absolute;left:6%;right:6%;top:1.5px;height:1.6px;border-radius:1px;background:rgba(255,255,255,.6);} .dev-shadow{display:none;} /* ── hero host stand ─────────────────────────────────────── */ .host-stand{width:min(620px,100%);margin:0 auto;} .host-screen{height:330px;} @media(max-width:560px){.host-screen{height:288px;}} .host-arm{height:96px;} .host-base{width:206px;} .host-shadow{width:300px;} /* host screen UI */ .hs-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;background:#fff;border-bottom:1px solid var(--line-2);} .hs-title{font-size:13.5px;font-weight:700;letter-spacing:-.02em;} .hs-meta{font-size:11px;color:var(--ink-3);} .hs-call{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--accent); background:var(--accent-soft);border-radius:100px;padding:5px 11px; opacity:0;transform:translateY(-4px);transition:opacity .4s ease,transform .4s ease;} .hs-call.on{opacity:1;transform:none;} .hs-call .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative;flex:none;} .hs-call .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent); opacity:0;animation:hsping 1.6s ease-out infinite;} @keyframes hsping{0%{transform:scale(.5);opacity:.8;}80%{transform:scale(1.4);opacity:0;}100%{opacity:0;}} .hs-body{display:grid;grid-template-columns:1.25fr 1fr;height:calc(100% - 47px);} .hs-floor{padding:12px 14px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;} .hs-floor-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;} .hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;} /* Floor plan — tables scattered like a real dining room (rounds, squares, booths, a 6-top, a banquette), positioned absolutely via inline left/top. */ .hs-plan{position:relative;flex:1;min-height:0;} .hs-plan .hs-table{position:absolute;font-size:12px;height:auto;} /* Sizes in % of the plan width + aspect-ratio, so the whole floor scales to any screen. Each table's left% + width% stays <= 100%, so nothing ever overflows. */ .hs-table.s2{width:14%;aspect-ratio:1;} .hs-table.s4{width:17%;aspect-ratio:1;} .hs-table.s6{width:29%;aspect-ratio:1.65;} .hs-table.booth{width:25%;aspect-ratio:2.1;} .hs-table.banq{width:36%;aspect-ratio:3.2;} /* Table states match the server POS floor: grey = open, blue = seated, amber/orange = reserved. Soft pastel fill + matching border, like the tablet. */ .hs-table{height:44px;border-radius:9px;background:#f3f4f6;border:1px solid #e4e6ea; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; font-size:13px;font-weight:700;color:var(--ink);transition:background .45s ease,border-color .45s ease,color .45s ease,box-shadow .45s ease;} .hs-table.round{border-radius:50%;} .hs-table small{font-size:8.5px;font-weight:600;color:var(--ink-3);transition:color .45s ease;} .hs-table.seated{background:#e1eaf4;border-color:#88a7cb;color:#3b5a7e;} .hs-table.seated small{color:#6585aa;} .hs-table.booking{background:#f6e9d2;border-color:#d9a44e;color:#8f5e1c; box-shadow:0 0 0 3px rgba(217,164,78,.18);} .hs-table.booking small{color:#a9762e;} .hs-floor-foot{margin-top:9px;font-size:9.5px;color:var(--ink-3);} .hs-side{display:flex;flex-direction:column;padding:12px 14px 18px;gap:7px;overflow:hidden;} .hs-side-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);} .hs-chat{display:flex;flex-direction:column;gap:5px;min-height:64px;} .hs-bubble{max-width:92%;font-size:10px;line-height:1.4;padding:5px 9px;border-radius:11px; opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;} .hs-bubble.on{opacity:1;transform:none;} .hs-bubble.guest{align-self:flex-start;background:var(--soft);color:var(--ink);border-bottom-left-radius:4px;} .hs-bubble.ai{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px;} .hs-bubble .who{display:block;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:1px;} .hs-rez{margin-top:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px; opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;} .hs-rez.on{opacity:1;transform:none;} .hs-rez .rz-top{display:flex;align-items:center;justify-content:space-between;gap:8px;} .hs-rez .rz-name{font-size:11.5px;font-weight:700;} .hs-rez .rz-tag{font-size:8.5px;font-weight:700;padding:2.5px 8px;border-radius:100px;background:var(--ok-soft);color:var(--ok);} .hs-rez .rz-sub{font-size:9.5px;color:var(--ink-3);margin-top:2px;} .hs-rez .rz-note{display:flex;align-items:center;gap:6px;margin-top:7px;padding-top:7px;border-top:1px dashed var(--line); font-size:9px;color:var(--ink-2);opacity:0;transition:opacity .45s ease .15s;} .hs-rez.noted .rz-note{opacity:1;} .hs-rez .rz-note .av{width:14px;height:14px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d); font-size:7px;font-weight:800;display:grid;place-items:center;flex:none;} /* Mobile: shrink the whole floor mock so the plan + chat + popup stop crowding. Must come after the desktop sizes above so these win on narrow screens. */ @media(max-width:560px){ .hs-plan .hs-table{font-size:9.5px;} .hs-floor,.hs-side{padding:10px 11px;} .hs-bubble{font-size:9px;padding:4px 8px;} .hs-rez{padding:7px 9px;} .hs-rez .rz-name{font-size:10.5px;} .hs-rez .rz-sub{font-size:9px;} .hs-rez .rz-note{font-size:8.5px;} } /* ── hardware cards ──────────────────────────────────────── */ .hardware{background:var(--soft);} .hardware h2{text-align:center;font-size:clamp(30px,4vw,46px);} .hardware .hw-sub{text-align:center;color:var(--ink-2);font-size:17px;margin-top:14px;} .hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px;} @media(max-width:980px){.hw-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.hw-grid{grid-template-columns:1fr;}} .hw{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 18px 20px;text-align:center; display:flex;flex-direction:column;align-items:center;transition:transform .22s ease,box-shadow .22s ease;} .hw:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);} .hw-art{height:196px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:18px;width:100%;} .hw h4{font-size:16px;letter-spacing:-.015em;font-weight:600;} .hw .hw-cap{font-size:12.5px;color:var(--ink-3);margin-top:3px;} /* micro screen text shared */ .mi{font-size:8px;} .mi-title{font-size:8.5px;font-weight:700;} .mi-dim{color:var(--ink-3);} .mi-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:#fff;border-bottom:1px solid var(--line-2);} /* host mini */ .hwm-host .dev-screen{width:148px;height:96px;} .hwm-host .dev-arm{width:11px;height:38px;} .hwm-host .dev-base{width:64px;height:6px;} .hwm-host .hs-grid{gap:4px;padding:7px 8px;} .hwm-host .hs-table{height:22px;border-radius:5px;font-size:7.5px;gap:0;} .hwm-host .hs-table small{display:none;} /* handheld */ .hwm-hand .dev-rim{border-radius:22px;padding:2.5px;} .hwm-hand .dev-bezel{border-radius:20px;padding:6px;} .hwm-hand .dev-screen{width:92px;height:158px;border-radius:14px;} .hwm-hand .notch{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:26px;height:6px;border-radius:4px;background:#0d0c0b;z-index:2;} .hand-rows{padding:7px 8px;display:grid;gap:4px;} .hand-row{display:flex;justify-content:space-between;font-size:7.5px;color:var(--ink);} .hand-row span:last-child{color:var(--ink-3);} .hand-total{display:flex;justify-content:space-between;font-size:8px;font-weight:700;border-top:1px solid var(--line-2);padding:5px 8px 0;} .hand-cta{margin:7px 8px 0;background:var(--accent);color:var(--accent-ink);font-size:7.5px;font-weight:700;text-align:center;border-radius:6px;padding:5px 0;} /* kiosk */ .hwm-kiosk .dev-screen{width:150px;height:118px;} .hwm-kiosk .dev-arm{width:46px;height:30px;background:linear-gradient(90deg,#a8a298,#e9e6df 40%,#cfcabf 60%,#a8a298);} .hwm-kiosk .dev-base{width:96px;} .kio-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px 9px;} .kio-card{border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#fff;} .kio-img{height:17px;background:linear-gradient(135deg,var(--soft),var(--line-2));} .kio-card .kc-meta{display:flex;justify-content:space-between;font-size:7px;font-weight:600;padding:3px 5px;} .kio-card .kc-meta span:last-child{color:var(--ink-3);font-weight:500;} .kio-pay{position:absolute;right:-8px;bottom:34px;width:34px;height:22px;border-radius:5px; background:linear-gradient(180deg,#34302b,#171513);} .kio-pay::after{content:"";position:absolute;left:6px;right:6px;top:5px;height:8px;border-radius:2px;background:#3c3833;} /* kitchen display */ .hwm-kds{position:relative;padding-top:12px;} .hwm-kds .mount{position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:8px;border-radius:3px;background:#d8d3ca;} .hwm-kds .dev-screen{width:188px;height:112px;background:#16140f;} .kds-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;} .kds-bar .mi-title{color:#f4f1ea;} .kds-bar .mi-dim{color:#7a756c;} .kds-tix{display:flex;gap:6px;padding:0 9px;} .kds-t{flex:1;background:#fcfbf8;border-radius:5px;overflow:hidden;font-size:7px;} .kds-t .kt-head{display:flex;justify-content:space-between;background:var(--ink);color:#fff;font-weight:700;padding:3px 5px;font-size:6.8px;} .kds-t.rush .kt-head{background:var(--accent);color:var(--accent-ink);} .kds-t ul{list-style:none;margin:0;padding:4px 5px;display:grid;gap:2px;color:var(--ink);} .kds-t .kt-time{padding:0 5px 4px;font-weight:700;color:var(--ink-3);font-size:6.5px;} /* ── manifesto ───────────────────────────────────────────── */ .manifesto{background:var(--dark);color:#fff;} .manifesto h2{font-size:clamp(27px,3.5vw,42px);line-height:1.26;letter-spacing:-.012em;font-weight:500;max-width:980px;color:#fbf9f5;} .manifesto h2 .mute{color:rgba(251,249,245,.42);} /* ── feature sections ────────────────────────────────────── */ .act-head{max-width:640px;} .act-head .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;} .act-head h2{font-size:clamp(30px,4vw,46px);} .act-head .act-sub{margin-top:16px;color:var(--ink-2);font-size:17.5px;line-height:1.55;max-width:520px;} .act-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:48px;} @media(max-width:880px){.act-grid{grid-template-columns:1fr;gap:40px;}} .act-grid.flip .col-mock{order:-1;} @media(max-width:880px){.act-grid.flip .col-mock{order:0;}} .feat{display:grid;gap:3px;padding:20px 0;border-top:1px solid var(--line);} .feat:first-child{border-top:none;} .feat .ft{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:-.018em;} .feat .ico{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;flex:none;} .feat .ico svg{width:16px;height:16px;} .feat p{color:var(--ink-2);font-size:15px;line-height:1.5;padding-left:42px;} .pipe{counter-reset:step;display:grid;} .pstep{position:relative;padding:16px 0 16px 50px;} .pstep::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:16px; width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:600;display:grid;place-items:center;z-index:1;} .pstep:not(:last-child)::after{content:"";position:absolute;left:13px;top:30px;width:2px;height:100%; background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 25%,transparent));z-index:0;} .pstep .pt{font-size:16.5px;font-weight:600;letter-spacing:-.018em;} /* ── mock cards (right column product cards) ─────────────── */ .mock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);} .mock .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;} .mock .mhead .mt{font-size:13px;font-weight:700;color:var(--ink-2);} .mock .mhead .msub{font-size:12px;color:var(--ink-3);} .row{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line-2);border-radius:13px;padding:11px 14px;margin-bottom:9px;} .row .av,.srow .av{width:32px;height:32px;border-radius:10px;background:var(--soft);font-size:13px;font-weight:700;color:var(--ink-2);display:grid;place-items:center;flex:none;} .row .rn,.srow .rn{font-size:14.5px;font-weight:600;} .row .rs,.srow .rs{font-size:12.5px;color:var(--ink-3);} .row .tag{margin-left:auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap;flex:none;} .tag.ok{background:var(--soft);color:var(--ink-2);} .tag.good{background:var(--ok-soft);color:var(--ok);} .tag.you{background:var(--accent-soft);color:var(--accent-d);} .paybar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--ink);color:var(--bg);border-radius:13px;margin-top:8px;font-size:14px;border:none;width:100%;font-family:var(--sans);text-align:left;} .paybar b{font-size:16px;letter-spacing:-.02em;} button.paybar{cursor:pointer;transition:background .16s ease,transform .12s ease;} button.paybar:hover{background:#000;} button.paybar:active{transform:scale(.99);} button.paybar:disabled{cursor:default;background:var(--ink);} /* SMS threads inside mocks — the chat-based system, shown */ .sms{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;} .sms .cb{font-size:12.5px;} /* ordering chat */ .chat{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;min-height:118px;} .cb{max-width:88%;font-size:13px;line-height:1.45;padding:8px 12px;border-radius:14px; opacity:0;transform:translateY(7px);transition:opacity .4s ease,transform .4s ease;} .cb.on{opacity:1;transform:none;} .cb.guest{align-self:flex-start;background:var(--soft);border-bottom-left-radius:5px;} .cb.ai{align-self:flex-end;background:var(--ink);color:var(--bg);border-bottom-right-radius:5px;} .cb .who{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin-bottom:1px;} .cb.typing{padding:10px 14px;} .cb .dots{display:inline-flex;gap:4px;} .cb .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;animation:tdot 1.1s infinite;} .cb .dots i:nth-child(2){animation-delay:.18s;} .cb .dots i:nth-child(3){animation-delay:.36s;} @keyframes tdot{0%,60%,100%{transform:none;opacity:.35;}30%{transform:translateY(-3px);opacity:.9;}} .ticket{background:var(--bg);border:1px solid var(--line-2);border-radius:13px;padding:12px 14px;} .ticket .th{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;} .titem{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:5px 0; opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease;} .titem.on{opacity:1;transform:none;} .titem .qb{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 5px;margin-right:9px; background:#fff;border:1px solid var(--line);border-radius:6px;font-size:11.5px;font-weight:700;color:var(--ink-2); transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;} .titem.bump .qb{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.18);} .titem .tp{color:var(--ink-2);font-variant-numeric:tabular-nums;} .ticket .tfoot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-2);margin-top:7px;padding-top:9px;font-size:13.5px;font-weight:700;} .ticket .tfoot .sent{font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-soft);border-radius:100px;padding:4px 10px; opacity:0;transform:scale(.85);transition:opacity .3s ease,transform .3s ease;} .ticket .tfoot .sent.on{opacity:1;transform:none;} .ticket .tfoot b{font-variant-numeric:tabular-nums;} /* interactive buttons in mocks */ .act-btn{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--bg);background:var(--ink); border:none;border-radius:100px;padding:8px 16px;cursor:pointer;white-space:nowrap;margin-left:auto;flex:none; transition:background .18s ease,transform .12s ease;position:relative;} .act-btn:hover{background:#000;} .act-btn:active{transform:scale(.96);} .act-btn.attn{animation:attn 2.6s ease-in-out infinite;} @keyframes attn{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ink) 35%,transparent);} 50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ink) 0%,transparent);}} .act-btn.done-state{background:var(--ok);animation:none;cursor:default;} .act-btn.busy{cursor:default;animation:none;} /* live call strip (refund join) */ .livecall{display:none;align-items:center;gap:12px;background:var(--dark);color:#fbf9f5;border-radius:13px;padding:12px 16px;margin-bottom:9px;} .livecall.on{display:flex;animation:fadeup .4s ease;} @keyframes fadeup{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .livecall .lc-txt{font-size:13px;font-weight:600;} .livecall .lc-sub{font-size:11.5px;color:rgba(251,249,245,.55);font-weight:400;} .wave{display:flex;align-items:center;gap:2.5px;height:22px;margin-left:auto;} .wave i{width:3px;border-radius:2px;background:var(--accent);height:6px;animation:wv 1s ease-in-out infinite;} .wave i:nth-child(2){animation-delay:.12s;}.wave i:nth-child(3){animation-delay:.24s;} .wave i:nth-child(4){animation-delay:.36s;}.wave i:nth-child(5){animation-delay:.48s;} @keyframes wv{0%,100%{height:5px;}50%{height:18px;}} /* supplier rows (inventory) */ .srow{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line-2);border-radius:13px;padding:11px 14px;margin-bottom:9px;} .srow > div{flex:1 1 auto;min-width:0;} .srow .tag{margin-left:auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap;flex:none;} .srow .chev{margin-left:auto;color:var(--ink-3);display:flex;} .srow .tag + .chev{margin-left:0;} .srow .chev svg{width:16px;height:16px;display:block;transition:transform .25s ease;} .srow:not(.open) .chev svg{transform:rotate(-90deg);} .srow.expandable{cursor:pointer;transition:border-color .16s ease;} .srow.expandable:hover{border-color:var(--faint);} .srow.open{border-radius:13px 13px 0 0;margin-bottom:0;} .sitems{display:none;border:1px solid var(--line-2);border-top:none;border-radius:0 0 13px 13px;background:var(--bg);padding:4px 14px 10px;margin-bottom:9px;} .srow.open + .sitems{display:block;} .iitem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line-2);} .iitem:first-child{border-top:none;} .iitem .inm{font-size:13.5px;} .qwrap{display:flex;align-items:center;gap:8px;} .qty{width:46px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);text-align:right; border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff;} .qty:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .qunit{font-size:13px;font-weight:500;color:var(--ink-2);width:26px;} .sitems .irow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 12px;} .sitems .il{font-size:13.5px;font-weight:600;} .sitems .is{font-size:12px;color:var(--ink-3);margin-top:2px;} .sitems .rez{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line-2);font-size:13px;} .sitems .rez .rk{color:var(--ink-3);} .sitems .rez .rv{font-weight:500;text-align:right;} /* ── staff texts phone ───────────────────────────────────── */ .phone-lg{display:flex;flex-direction:column;align-items:center;} .phone-lg .dev-rim{border-radius:38px;padding:3px;} .phone-lg .dev-bezel{border-radius:35px;padding:8px;} .phone-lg .dev-screen{width:296px;height:430px;border-radius:27px;background:#fcfbf8;} .phone-lg .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:74px;height:18px;border-radius:11px;background:#0d0c0b;z-index:3;} .ph-head{display:flex;align-items:center;gap:10px;padding:34px 16px 11px;background:#fff;border-bottom:1px solid var(--line-2);} .ph-head .pav{width:32px;height:32px;border-radius:50%;background:var(--soft);color:var(--ink-2);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;} .ph-head .pn{font-size:13.5px;font-weight:700;letter-spacing:-.01em;} .ph-head .pr{font-size:11px;color:var(--ink-3);} .ph-thread{display:flex;flex-direction:column;gap:7px;padding:14px;} .ph-thread .cb{font-size:12.5px;max-width:85%;} .ph-status{align-self:center;font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--soft);border-radius:100px;padding:4px 12px; opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;} .ph-status.on{opacity:1;transform:none;} /* observability */ /* ── grouped hiring widget + David résumé + payroll panel ── */ .hire-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin-bottom:9px;} .hire-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line-2);} .hire-head .hh-role{font-size:13px;font-weight:700;} .hire-head .hh-meta{font-size:12px;color:var(--ink-3);} .cand{display:flex;align-items:center;gap:12px;padding:12px 15px;border-top:1px solid var(--line-2);} .cand:first-of-type{border-top:none;} .cand .av{width:32px;height:32px;border-radius:10px;background:var(--soft);font-size:12px;font-weight:700;color:var(--ink-2);display:grid;place-items:center;flex:none;} .cand .rn{font-size:14.5px;font-weight:600;} .cand .rs{font-size:12.5px;color:var(--ink-3);} .cand .tag{margin-left:auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap;flex:none;} .cand.expandable{cursor:pointer;transition:background .15s ease;} .cand.expandable:hover{background:var(--soft);} .cand .chev{margin-left:auto;color:var(--ink-3);display:flex;} .cand .tag + .chev{margin-left:8px;} .cand .chev svg{width:16px;height:16px;transition:transform .25s ease;} .cand.expandable:not(.open) .chev svg{transform:rotate(-90deg);} .cand-detail{display:none;padding:6px 15px 14px;border-top:1px solid var(--line-2);background:var(--bg);} .cand.open + .cand-detail{display:block;} .cand-detail .irow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 11px;} .cand-detail .il{font-size:13.5px;font-weight:600;} .cand-detail .is{font-size:12px;color:var(--ink-3);margin-top:2px;} .cand-actions{display:flex;gap:8px;align-items:center;flex:none;} .cand-actions .act-btn{margin-left:0;} .act-btn-ghost{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line); border-radius:100px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease;} .act-btn-ghost:hover{background:var(--soft);border-color:var(--faint);} .cand-detail .rez{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line-2);font-size:13px;} .cand-detail .rez .rk{color:var(--ink-3);} .cand-detail .rez .rv{font-weight:500;text-align:right;} /* payroll: click to open a breakdown + approve */ button.paybar{cursor:pointer;} .pay-panel{display:none;background:var(--bg);border:1px solid var(--line-2);border-radius:13px;margin-top:8px;padding:4px 15px 14px;container-type:inline-size;} .pay-panel.on{display:block;} /* All staff in a scroll; two columns when the panel is wide enough. */ .pay-rows{display:grid;grid-template-columns:1fr;column-gap:24px;max-height:196px;overflow-y:auto;} .pay-row{display:grid;grid-template-columns:1fr 46px 58px;align-items:baseline;column-gap:10px;font-size:13px;padding:8px 0;border-top:1px solid var(--line-2);} .pay-row:first-child{border-top:none;} .pay-row .pn{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pay-row .ph{color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;} .pay-row .pamt{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;} @container (min-width:430px){ .pay-rows{grid-template-columns:1fr 1fr;} .pay-row:nth-child(2){border-top:none;} } .pay-approve{width:100%;margin-top:11px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent); border:none;border-radius:11px;padding:11px 0;cursor:pointer;transition:background .16s ease;} .pay-approve:hover{background:var(--accent-d);} .pay-approve.done{background:var(--ok);cursor:default;} /* résumé modal */ .resume-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px; background:rgba(35,38,42,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);} .resume-modal.on{display:flex;animation:fadeup .25s ease;} .resume-card{background:#fff;border-radius:18px;max-width:460px;width:100%;box-shadow:var(--shadow);max-height:86vh;overflow-y:auto;} .resume-top{display:flex;align-items:center;gap:13px;padding:22px 24px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:#fff;} .resume-top .av{width:46px;height:46px;border-radius:13px;background:var(--soft);color:var(--ink-2);font-size:15px;font-weight:700;display:grid;place-items:center;flex:none;} .resume-top h3{font-size:18px;} .resume-top .rmeta{font-size:13px;color:var(--ink-3);margin-top:2px;} .resume-close{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2); font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;flex:none;} .resume-close:hover{background:var(--soft);} .resume-body{padding:20px 24px 26px;} .resume-sec{margin-top:18px;} .resume-sec:first-child{margin-top:0;} .resume-sec .rl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;} .resume-job{margin-bottom:12px;} .resume-job .rj-t{font-size:14.5px;font-weight:600;} .resume-job .rj-m{font-size:12.5px;color:var(--ink-3);margin-top:1px;} .resume-job .rj-d{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.5;} .resume-chips{display:flex;flex-wrap:wrap;gap:7px;} .resume-chips span{font-size:12px;font-weight:600;color:var(--ink-2);background:var(--soft);border-radius:100px;padding:5px 11px;} /* live-call outcome card (FOH) */ /* Fixed heights (not min-): the scenarios vary in size (chat 161–180px, outcome 70–154px) and the panel must NOT change height between cycles. Locked to each area's measured max so total height is constant; overflow hidden as a belt-and- suspenders against any shift. */ #orderChat{height:182px;overflow:hidden;} /* Bottom-align so short cards (catering/refund/Q) keep the same bottom margin as the tall ticket instead of floating high in the reserved space. */ #orderOutcome{height:156px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;} #orderOutcome > *{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;} #orderOutcome > *.on{opacity:1;transform:none;} .callcard{background:var(--bg);border:1px solid var(--line-2);border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:13px;} .callcard .cc-ic{width:36px;height:36px;border-radius:11px;background:var(--soft);display:grid;place-items:center;font-size:17px;flex:none;} .callcard .cc-t{font-size:14px;font-weight:700;letter-spacing:-.01em;} .callcard .cc-s{font-size:12.5px;color:var(--ink-3);margin-top:2px;} .callcard .cc-tag{margin-left:auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;flex:none;} /* Reservation outcome: a special-occasion note that reveals like the hostess widget's .rz-note (added via .noted after the card lands). */ .callcard.rezcard{align-items:flex-start;} .callcard .cc-main{min-width:0;} .callcard .cc-note{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2); font-size:11.5px;color:var(--ink-2);opacity:0;transform:translateY(2px);transition:opacity .4s ease,transform .4s ease;} .callcard.noted .cc-note{opacity:1;transform:none;} .callcard .cc-note .av{width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d); font-size:9px;font-weight:800;display:grid;place-items:center;flex:none;} /* observability-orig */ /* activity rows expand into a timestamped trace */ .logrow.expandable{cursor:pointer;} .logrow .lz{display:inline-flex;align-items:center;gap:7px;} .logrow .lz svg{width:13px;height:13px;color:var(--ink-3);transition:transform .25s ease;} .logrow.expandable:not(.open) .lz svg{transform:rotate(-90deg);} .trace{display:none;margin:11px 0 3px;} .logrow.open .trace{display:block;} .tstep{position:relative;padding:5px 0 9px 22px;} .tstep:last-child{padding-bottom:2px;} .tstep::before{content:"";position:absolute;left:3px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);z-index:1;} .tstep:last-child::before{background:var(--ink);} .tstep:not(:last-child)::after{content:"";position:absolute;left:6px;top:13px;bottom:-3px;width:1.5px;background:var(--line);} .tstep .tz{font-size:11px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:-.01em;} .tstep .tx{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;line-height:1.45;} .observe{background:var(--soft);} .logrow{padding:13px 0;border-top:1px solid var(--line);} .logrow:first-child{border-top:none;} .logrow .lt{font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;gap:12px;} .logrow .lz{font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap;} .logrow .lw{font-size:13px;color:var(--ink-2);margin-top:3px;} .logrow .lw b{color:var(--accent-d);font-weight:600;} /* close + footer */ .close{background:var(--dark);color:#fbf9f5;text-align:center;} .close h2{font-size:clamp(32px,4.6vw,56px);color:#fbf9f5;letter-spacing:-.02em;} .close .close-sub{margin-top:18px;color:rgba(251,249,245,.6);font-size:18px;} .close-cta{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap;} .foot{background:var(--bg);border-top:1px solid var(--line);padding:56px 0 40px;} .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:center;} .foot .brand{font-size:20px;} .foot-links{display:flex;gap:26px;font-size:14.5px;} .foot-links a{color:var(--ink-2);transition:color .15s ease;} .foot-links a:hover{color:var(--ink);} .foot-base{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:13px;flex-wrap:wrap;gap:12px;} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} } /* Mobile chat fit — defined last so it overrides the desktop panel sizes. Narrow screens wrap bubbles taller, so make the live-call panel and the hero screen taller (bubbles stay readable) — the outcome card no longer overlaps the chat. */ @media(max-width:560px){ #orderChat{height:228px;} .host-screen{height:322px;} } /* ── photo hero ───────────────────────────────────────────── */ .hero-photo{position:relative;width:100vw;height:100vh;min-height:600px;overflow:hidden; margin-top:-65px; /* slide up behind sticky nav and hide subpixel top seams */ background-color:#14100c;} /* dark fallback before image loads */ .hero-photo-bg{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;max-width:none;} .hero-photo-grad-tb{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.52) 0%,rgba(20,16,12,.06) 24%,rgba(20,16,12,.18) 42%,rgba(15,11,8,.92) 100%);} .hero-photo-grad-lr{position:absolute;inset:0;background:linear-gradient(72deg,rgba(13,9,6,.34) 0%,rgba(13,9,6,.28) 10%,rgba(13,9,6,.24) 34%,rgba(13,9,6,.14) 52%,rgba(13,9,6,.04) 70%,transparent 82%);} .hero-photo-content{position:absolute;bottom:142px;left:50%;transform:translateX(-50%);width:100%;display:flex;flex-direction:column;gap:28px;} .hero-eyebrow{align-self:flex-start;font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#fff7ec;background:rgba(13,9,6,.34);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;text-shadow:0 1px 14px rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .hero-photo-h1{font-size:clamp(48px,7vw,84px);line-height:.98;font-weight:700;letter-spacing:-.025em;color:#fdfaf4;text-shadow:0 2px 30px rgba(0,0,0,.45);max-width:880px;} .hero-photo-sub{font-size:clamp(17px,2vw,21px);line-height:1.5;color:rgba(255,255,255,.82);max-width:520px;} .hero-email-form{display:flex;align-items:center;width:min(520px,100%);height:58px;padding:6px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.55);border-radius:999px;box-shadow:0 16px 38px -18px rgba(0,0,0,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} .hero-email-form input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#1c1813;font:500 16px/1 var(--sans);padding:0 16px 0 18px;outline:none;} .hero-email-form input::placeholder{color:rgba(28,24,19,.48);} .hero-email-form button{height:46px;border:0;border-radius:999px;background:#1c1813;color:#fbf7f0;font:700 15px/1 var(--sans);padding:0 20px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s ease;} .hero-email-form button:hover{background:#000;transform:translateY(-1px);} .hero-email-form button:active{transform:scale(.96);} .hero-email-form button .arr{transition:transform .2s ease;} .hero-email-form button:hover .arr{transform:translateX(3px);} @media(max-width:760px){ .hero-photo-content{bottom:84px;} .hero-photo-h1{line-height:1.02;} .hero-email-form{height:auto;border-radius:28px;align-items:stretch;flex-direction:column;padding:8px;width:min(420px,100%);} .hero-email-form input{height:48px;text-align:center;padding:0 16px;} .hero-email-form button{height:48px;justify-content:center;width:100%;} } /* photo hero CTA buttons */ .h-cta{font-size:17px;font-weight:600;color:#1c1813 !important;background:#f7f3ec;border-color:transparent;box-shadow:0 8px 24px -8px rgba(0,0,0,.5); transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .2s ease;} .h-cta:hover{background:#ffffff !important;transform:translateY(-3px);box-shadow:0 18px 38px -12px rgba(0,0,0,.6);} .h-cta:active{transform:translateY(-1px) scale(.95) !important;box-shadow:0 6px 14px -8px rgba(0,0,0,.6);transition:transform .08s ease;} .h-glass{font-size:17px;font-weight:600;color:#fbf7f0 !important;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .2s ease,border-color .2s ease;} .h-glass:hover{background:rgba(255,255,255,.22) !important;border-color:rgba(255,255,255,.85) !important;transform:translateY(-3px);} .h-glass:active{transform:translateY(-1px) scale(.95) !important;background:rgba(255,255,255,.14) !important;transition:transform .08s ease;} /* nav transparent on photo hero (clears once scrolled or mobile menu opens) */ .nav-photo:not(.scrolled):not(.is-open){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none;} .nav-photo:not(.scrolled):not(.is-open) .brand{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));-webkit-background-clip:text;background-clip:text;color:transparent;} .nav-photo:not(.scrolled):not(.is-open) .nav-signin{color:rgba(255,255,255,.86);} .nav-photo:not(.scrolled):not(.is-open) .nav-signin:hover{color:#ffffff;} .nav-photo:not(.scrolled):not(.is-open) .btn-silver{background:#f3efe7;border-color:rgba(255,255,255,.15);} /* nav link underline wipe */ .nav-link{position:relative;} .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;border-radius:2px; transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.4,0,.2,1);} .nav-link:hover::after{transform:scaleX(1);} .nav-link:active{opacity:.55;transition:opacity .08s ease;} /* nav pill springy hover */ .nav-pill-spring{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background .2s ease !important;} .nav-pill-spring:hover{transform:translateY(-2px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 26px -10px rgba(45,38,30,.28) !important;} .nav-pill-spring:active{transform:translateY(0) scale(.94) !important;transition:transform .08s ease !important;} /* host stand demo section */ .host-stand-section{text-align:center;} .host-stand-head{max-width:640px;margin:0 auto 48px;} .host-stand-head h2{font-size:clamp(30px,4vw,46px);margin-top:14px;}