/* ============================================================ IFFY CUTZ — FEATURES LAYER Everything added on top of the v4 "THE FADE" core. This file never redefines a core token. It only consumes --bg/--surface/--fg/--muted/--line/--accent, so every component in here inverts correctly if it is ever dropped inside .zone-bone, exactly like the core components do. House rules kept: zero border-radius, mono for every label, display face for every number that matters, hard edges. ============================================================ */ /* ------------------------------------------------------------ THE DOCK — one column for every floating launcher. script.js appends .desk-launch straight to as a fixed element; features.js MOVES it in here and this rule strips its own positioning, so the two buttons can never overlap each other or the mobile book bar however many we end up with. ------------------------------------------------------------ */ .dock { position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; } .dock > * { pointer-events:auto; } .dock .desk-launch { position:static; right:auto; bottom:auto; } .chair-launch { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:var(--noir-2); color:#F2EFE6; border:1px solid var(--line-2); cursor:pointer; font-family:var(--font-mono); font-weight:600; font-size:0.69rem; letter-spacing:0.18em; text-transform:uppercase; box-shadow:0 14px 34px -16px rgba(0,0,0,0.85); transition:transform 0.4s var(--snap), border-color 0.3s, color 0.3s, opacity 0.3s, visibility 0.3s; } .chair-launch:hover { transform:translateY(-3px); border-color:var(--green); color:var(--green); } .chair-launch svg { width:15px; height:15px; } .chair-launch .cl-dot { width:6px; height:6px; background:var(--green); flex-shrink:0; transform:rotate(45deg); opacity:0; } .chair-launch.has-data .cl-dot { opacity:1; } .chair-launch.is-open { opacity:0; visibility:hidden; transform:scale(0.92); } /* ------------------------------------------------------------ MY CHAIR — the personal drawer (passport · cycle · log · pins) ------------------------------------------------------------ */ .chair { position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:71; width:min(420px, calc(100vw - var(--gutter) * 2)); height:min(640px, calc(100vh - var(--gutter) * 2 - 20px)); display:flex; flex-direction:column; background:var(--noir-2); border:1px solid var(--line-2); box-shadow:0 40px 90px -30px rgba(0,0,0,0.9); opacity:0; visibility:hidden; transform:translateY(18px) scale(0.98); transform-origin:100% 100%; transition:opacity 0.4s var(--ease), transform 0.45s var(--snap), visibility 0.4s; } .chair.open { opacity:1; visibility:visible; transform:none; } .chair-head { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; } .chair-head .ch-mark { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--green); color:var(--green-ink); } .chair-head .ch-mark svg { width:17px; height:17px; } .chair-head .ch-txt { flex:1; min-width:0; } .chair-head b { display:block; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.15rem; line-height:1; color:#F2EFE6; } .chair-head .ch-sub { display:block; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-top:5px; } .chair-close { background:none; border:1px solid var(--line-2); color:var(--muted); width:32px; height:32px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.3s; } .chair-close:hover { color:#F2EFE6; border-color:#F2EFE6; } .chair-close svg { width:13px; height:13px; } .chair-tabs { display:flex; border-bottom:1px solid var(--line); flex-shrink:0; overflow-x:auto; scrollbar-width:none; } .chair-tabs::-webkit-scrollbar { display:none; } .chair-tab { flex:1 0 auto; background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; padding:13px 14px; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.16em; text-transform:uppercase; transition:color 0.3s, border-color 0.3s; } .chair-tab:hover { color:#F2EFE6; } .chair-tab[aria-selected="true"] { color:var(--green); border-bottom-color:var(--green); } .chair-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:20px 18px 24px; scrollbar-width:thin; } .chair-body::-webkit-scrollbar { width:5px; } .chair-body::-webkit-scrollbar-thumb { background:var(--line-2); } .chair-pane[hidden] { display:none; } /* shared small parts inside the drawer and the studio */ .fx-label { display:block; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; } .fx-note { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.06em; line-height:1.7; color:var(--faint); } .fx-row { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; } .fx-btn { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.14em; text-transform:uppercase; padding:11px 14px; min-height:40px; background:transparent; border:1px solid var(--line-2); color:var(--fg); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:color 0.25s, background 0.25s, border-color 0.25s; } .fx-btn:hover { background:var(--fg); border-color:var(--fg); color:var(--bg); } .fx-btn svg { width:14px; height:14px; } .fx-btn.go { background:var(--green); border-color:var(--green); color:var(--green-ink); } .fx-btn.go:hover { background:#F2EFE6; border-color:#F2EFE6; color:var(--noir); } .fx-btn.quiet { border-color:var(--line); color:var(--muted); } .fx-btn.quiet:hover { color:var(--bg); } .fx-empty { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.06em; color:var(--faint); line-height:1.8; } /* ------------------------------------------------------------ RANGE CONTROL — one styled slider used by the lab and the face tool. Both engines are covered explicitly; an unstyled native track next to this UI reads as a bug. ------------------------------------------------------------ */ /* 44px of grabbable height on every device. The visible track stays 2px — the extra is transparent hit area, so it costs nothing visually but a thumb can actually catch it. */ .fx-range { width:100%; height:44px; background:transparent; -webkit-appearance:none; appearance:none; margin:0; cursor:pointer; } .fx-range:focus { outline:none; } .fx-range:focus-visible { outline:2px solid var(--green); outline-offset:4px; } .fx-range::-webkit-slider-runnable-track { height:2px; background:var(--line-2); } .fx-range::-moz-range-track { height:2px; background:var(--line-2); } .fx-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-7px; background:var(--green); border:0; cursor:grab; } .fx-range::-moz-range-thumb { width:16px; height:16px; background:var(--green); border:0; border-radius:0; cursor:grab; } .fx-range:active::-webkit-slider-thumb { cursor:grabbing; } .fx-field { margin-bottom:18px; } .fx-field .fx-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; } .fx-field .fx-val { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.08em; color:var(--accent); text-align:right; } /* segmented picker */ .fx-seg { display:flex; flex-wrap:wrap; gap:6px; } .fx-seg button { flex:1 1 auto; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.12em; text-transform:uppercase; padding:10px 8px; min-height:40px; background:transparent; border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:color 0.25s, background 0.25s, border-color 0.25s; } .fx-seg button:hover { color:var(--fg); border-color:var(--fg); } .fx-seg button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--green-ink); } /* ------------------------------------------------------------ THE STUDIO — homepage section with three tools ------------------------------------------------------------ */ .studio { border:1px solid var(--line-2); background:var(--surface); } .studio-tabs { display:flex; border-bottom:1px solid var(--line-2); overflow-x:auto; scrollbar-width:none; } .studio-tabs::-webkit-scrollbar { display:none; } .studio-tab { flex:1 0 auto; background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; padding:18px 20px; text-align:left; color:var(--muted); transition:color 0.3s, background 0.3s, border-color 0.3s; } .studio-tab:hover { color:var(--fg); background:rgba(242,239,230,0.03); } .studio-tab[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--accent); } .studio-tab .st-n { display:block; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.2em; color:var(--accent); margin-bottom:7px; } .studio-tab .st-t { display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.05rem,2vw,1.4rem); line-height:1; letter-spacing:0.01em; } .studio-panel { padding:clamp(22px,3vw,38px); } .studio-panel[hidden] { display:none; } .studio-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,3.5vw,44px); align-items:start; } /* ------------------------------------------------------------ FADE LAB ------------------------------------------------------------ */ .lab-stage { position:relative; background:var(--bg); border:1px solid var(--line); aspect-ratio:1/1; } .lab-stage canvas { width:100%; height:100%; display:block; } .lab-stage .lab-cap { position:absolute; left:12px; bottom:11px; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); } .lab-spec { border-top:2px solid var(--accent); padding-top:18px; margin-top:22px; } .lab-spec .ls-lbl { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); } .lab-spec .ls-line { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.05; margin-top:9px; } .lab-spec .ls-match { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.06em; color:var(--muted); margin-top:12px; line-height:1.7; } .lab-spec .ls-match b { color:var(--fg); font-weight:600; } /* ------------------------------------------------------------ FACE MATCH ------------------------------------------------------------ */ .face-stage { position:relative; background:var(--bg); border:1px solid var(--line); aspect-ratio:3/4; overflow:hidden; } .face-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.5) contrast(1.05); } .face-stage canvas { position:absolute; inset:0; width:100%; height:100%; } .face-stage .face-hint { position:absolute; inset:auto 0 0 0; padding:11px 13px; background:rgba(10,11,10,0.78); font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.1em; line-height:1.7; color:#C9CFC6; } .face-drop { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border:1px dashed var(--line-2); background:transparent; color:var(--muted); cursor:pointer; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.12em; text-transform:uppercase; transition:border-color 0.3s, color 0.3s; } .face-drop:hover { border-color:var(--accent); color:var(--fg); } .face-drop svg { width:16px; height:16px; flex-shrink:0; } .face-result { border-top:2px solid var(--accent); padding-top:18px; margin-top:22px; } .face-result .fr-shape { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; color:var(--accent); } .face-result p { color:var(--muted); font-size:0.9rem; margin-top:12px; } .face-result .fr-ask { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.06em; line-height:1.8; color:var(--fg); border-left:2px solid var(--line-2); padding-left:14px; margin-top:16px; } /* ------------------------------------------------------------ CHAIR RADAR — typical demand, drawn as a grid ------------------------------------------------------------ */ .radar-scroll { overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; } .radar { min-width:520px; } .radar-row { display:grid; grid-template-columns:44px repeat(11, 1fr); gap:3px; margin-bottom:3px; align-items:center; } .radar-h { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.08em; color:var(--faint); text-align:center; } .radar-d { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); } .radar-row.is-today .radar-d { color:var(--accent); font-weight:600; } .radar-cell { position:relative; height:26px; border:0; padding:0; cursor:pointer; background:var(--line); transition:outline-color 0.2s; outline:1px solid transparent; } .radar-cell:hover, .radar-cell:focus-visible { outline:1px solid var(--fg); z-index:1; } .radar-cell[data-shut="1"] { background:transparent; border:1px solid var(--line); cursor:default; } .radar-cell.is-now::after { content:""; position:absolute; inset:-3px; border:1px solid var(--green); } .radar-legend { display:flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); } .radar-legend i { width:20px; height:9px; display:block; } .radar-best { border-top:2px solid var(--accent); padding-top:18px; margin-top:24px; } .radar-best .rb-lbl { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); } .radar-best .rb-time { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1; margin-top:9px; } .radar-best p { color:var(--muted); font-size:0.88rem; margin-top:12px; } /* ------------------------------------------------------------ PASSPORT · CYCLE · LOG · PINS (inside the drawer) ------------------------------------------------------------ */ .pass-card { border:1px solid var(--line-2); background:var(--noir-3); padding:18px; } .pass-card .pc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .pass-card .pc-brand { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.05rem; line-height:1; color:#F2EFE6; } .pass-card .pc-tag { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); } .pass-line { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); } .pass-line:last-of-type { border-bottom:0; } .pass-line .pl-k { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); flex-shrink:0; } .pass-line .pl-v { font-family:var(--font-mono); font-size:0.69rem; color:#F2EFE6; text-align:right; } .pass-notes { width:100%; background:var(--noir-3); border:1px solid var(--line-2); color:#F2EFE6; padding:12px; font-family:var(--font-body); font-size:0.86rem; min-height:76px; resize:vertical; } .pass-notes:focus { outline:none; border-color:var(--accent); } .cycle-ring { display:flex; align-items:center; gap:18px; } .cycle-ring svg { width:104px; height:104px; flex-shrink:0; } .cycle-ring .cr-track { fill:none; stroke:var(--line-2); stroke-width:6; } .cycle-ring .cr-fill { fill:none; stroke:var(--green); stroke-width:6; stroke-linecap:butt; transition:stroke-dashoffset 0.7s var(--ease); } .cycle-ring.due .cr-fill { stroke:var(--red); } .cycle-num { font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:0.85; color:#F2EFE6; } .cycle-sub { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-top:7px; } .streak-stamps { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin:14px 0 4px; } .stamp { aspect-ratio:1; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--line-2); } .stamp svg { width:15px; height:15px; } .stamp.on { border-color:var(--green); color:var(--green); background:rgba(15,201,111,0.09); } .pins-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; } .pin { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--noir-3); border:1px solid var(--line); } .pin img { width:100%; height:100%; object-fit:cover; } .pin-del { position:absolute; top:4px; right:4px; width:24px; height:24px; background:rgba(10,11,10,0.82); border:1px solid var(--line-2); color:#F2EFE6; cursor:pointer; display:flex; align-items:center; justify-content:center; } .pin-del svg { width:11px; height:11px; } /* ------------------------------------------------------------ GIFT NOTE STUDIO — a designed card, not a stored-value voucher ------------------------------------------------------------ */ .fx-modal { position:fixed; inset:0; z-index:90; background:rgba(6,7,6,0.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:var(--gutter); opacity:0; visibility:hidden; transition:opacity 0.35s var(--ease), visibility 0.35s; } .fx-modal.open { opacity:1; visibility:visible; } .fx-modal-card { width:min(880px, 100%); max-height:calc(100vh - var(--gutter) * 2); overflow-y:auto; background:var(--noir-2); border:1px solid var(--line-2); padding:clamp(22px,3vw,34px); scrollbar-width:thin; } .fx-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; } .fx-modal-head h3 { font-size:clamp(1.5rem,3vw,2.1rem); } .fx-modal-head .fx-sub { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; display:block; } .gift-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); align-items:start; } .gift-preview { border:1px solid var(--line); background:var(--noir-3); } .gift-preview canvas { width:100%; height:auto; display:block; } .fx-input { width:100%; background:var(--noir-3); border:1px solid var(--line-2); color:#F2EFE6; padding:13px; font-family:var(--font-body); font-size:0.94rem; } .fx-input:focus { outline:none; border-color:var(--accent); } /* ------------------------------------------------------------ COMMAND PALETTE ------------------------------------------------------------ */ .palette { position:fixed; inset:0; z-index:95; background:rgba(6,7,6,0.86); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; padding:14vh var(--gutter) var(--gutter); opacity:0; visibility:hidden; transition:opacity 0.25s var(--ease), visibility 0.25s; } .palette.open { opacity:1; visibility:visible; } .palette-box { width:min(620px,100%); background:var(--noir-2); border:1px solid var(--line-2); box-shadow:0 40px 90px -30px rgba(0,0,0,0.9); } .palette-box input { width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); color:#F2EFE6; padding:19px 20px; font-family:var(--font-body); font-size:1.02rem; } .palette-box input:focus { outline:none; } .palette-list { max-height:min(52vh, 400px); overflow-y:auto; scrollbar-width:thin; } .palette-item { display:flex; align-items:center; gap:14px; width:100%; padding:14px 20px; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; color:var(--fg); } .palette-item:last-child { border-bottom:0; } .palette-item.on, .palette-item:hover { background:var(--green); color:var(--green-ink); } .palette-item .pi-k { font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); flex-shrink:0; width:64px; } .palette-item.on .pi-k, .palette-item:hover .pi-k { color:var(--green-ink); opacity:0.72; } .palette-item .pi-t { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; flex:1; min-width:0; } .palette-hint { padding:11px 20px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); } /* ------------------------------------------------------------ TOAST — one channel for every transient message ------------------------------------------------------------ */ .fx-toasts { position:fixed; left:50%; bottom:calc(var(--gutter) + 4px); transform:translateX(-50%); z-index:96; display:flex; flex-direction:column; align-items:center; gap:8px; width:min(420px, calc(100vw - 24px)); pointer-events:none; } .fx-toast { pointer-events:auto; width:100%; display:flex; align-items:center; gap:14px; background:var(--noir-2); border:1px solid var(--line-2); padding:13px 16px; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.08em; line-height:1.6; color:#F2EFE6; box-shadow:0 22px 50px -22px rgba(0,0,0,0.9); animation:fx-toast-in 0.4s var(--snap); } .fx-toast.gone { opacity:0; transform:translateY(8px); transition:opacity 0.3s, transform 0.3s; } .fx-toast .ft-act { margin-left:auto; flex-shrink:0; background:var(--green); border:0; color:var(--green-ink); cursor:pointer; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.14em; text-transform:uppercase; padding:8px 12px; min-height:34px; } @keyframes fx-toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } /* ------------------------------------------------------------ VOICE — the mic sits inside the existing desk form ------------------------------------------------------------ */ .desk-mic { background:transparent; border:0; border-left:1px solid var(--line); color:var(--muted); width:48px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color 0.3s, background 0.3s; } .desk-mic:hover { color:#F2EFE6; } .desk-mic svg { width:16px; height:16px; } .desk-mic.live { background:var(--red); color:#fff; animation:mic-pulse 1.3s ease-in-out infinite; } @keyframes mic-pulse { 0%,100% { opacity:1; } 50% { opacity:0.62; } } /* ------------------------------------------------------------ BOOK BAR — the call button features.js drops in beside booking ------------------------------------------------------------ */ .book-bar .bb-call { width:46px; height:46px; flex-shrink:0; border:1px solid var(--line-2); color:#F2EFE6; display:flex; align-items:center; justify-content:center; transition:0.3s; } .book-bar .bb-call:hover { border-color:var(--green); color:var(--green); } .book-bar .bb-call svg { width:17px; height:17px; } /* ------------------------------------------------------------ CLICK-TO-LOAD MAP The gate has to fill the same box the iframe will, or accepting it shifts the whole page down at the moment of the click. ------------------------------------------------------------ */ .map-embed .map-gate { width:100%; height:100%; min-height:inherit; display:flex; align-items:center; gap:18px; text-align:left; padding:clamp(20px,3vw,30px); background:var(--surface); border:0; cursor:pointer; color:var(--fg); transition:background 0.3s var(--ease); } .map-embed .map-gate:hover { background:var(--surface-2); } .map-embed .mg-ic { width:46px; height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2); color:var(--accent); } .map-embed .mg-ic svg { width:22px; height:22px; } .map-embed .mg-txt { flex:1; min-width:0; } .map-embed .mg-txt b { display:block; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.5rem); line-height:1; margin-bottom:9px; } .map-embed .mg-txt > span { display:block; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.05em; line-height:1.8; color:var(--muted); max-width:46ch; } .map-embed .mg-go { flex-shrink:0; align-self:center; font-family:var(--font-mono); font-size:0.69rem; letter-spacing:0.16em; text-transform:uppercase; background:var(--green); color:var(--green-ink); padding:13px 18px; min-height:44px; display:inline-flex; align-items:center; } .map-embed .mg-fallback { padding:24px; font-family:var(--font-mono); font-size:0.69rem; } .map-embed .mg-fallback a { color:var(--accent); border-bottom:1px solid currentColor; } @media (max-width:640px){ .map-embed .map-gate { flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; } .map-embed .mg-go { width:100%; justify-content:center; } } /* ------------------------------------------------------------ RESPONSIVE ------------------------------------------------------------ */ @media (max-width:940px){ /* clears the book bar by its real height, not a guess */ .dock { bottom:calc(var(--bookbar-h, 60px) + 10px + env(safe-area-inset-bottom)); } .chair { bottom:calc(var(--bookbar-h, 60px) + 10px + env(safe-area-inset-bottom)); height:min(72vh, calc(100dvh - var(--bookbar-h, 60px) - 110px)); } /* Icon-only, side by side. Two labelled pills stacked was 98px of a phone screen for what are two secondary entry points; the aria-labels carry the naming the visible text used to. */ .dock { flex-direction:row; align-items:center; gap:8px; } .dock .chair-launch, .dock .desk-launch { width:44px; height:44px; min-height:44px; padding:0; justify-content:center; gap:0; border-radius:50%; } .dock .chair-launch > span:not(.cl-dot), .dock .desk-launch > span:not(.dl-dot) { display:none; } .dock .chair-launch svg, .dock .desk-launch svg { width:18px; height:18px; } /* the unread pip rides the corner instead of sitting in the label row */ .dock .chair-launch .cl-dot { position:absolute; top:0; right:0; width:9px; height:9px; border:2px solid var(--noir-2); border-radius:50%; transform:none; } .dock .chair-launch { position:relative; } .studio-grid { grid-template-columns:1fr; } .gift-grid { grid-template-columns:1fr; } } @media (max-width:760px){ .studio-tab { padding:14px 16px; } .lab-stage { aspect-ratio:4/3; } .pins-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .dock { right:12px; } .chair { right:12px; left:12px; width:auto; } .fx-modal { padding:12px; } .fx-modal-card { padding:20px 16px; } .palette { padding:8vh 12px 12px; } .streak-stamps { grid-template-columns:repeat(4,1fr); } } /* very small phones (iPhone SE, 320px): stop the book bar wrapping */ @media (max-width:380px){ .book-bar { padding:5px 10px; gap:8px; } .book-bar .btn { padding:0 13px; font-size:0.66rem; } .book-bar .bb-call { width:40px; height:40px; } .chair-tab { padding:12px 10px; font-size:0.69rem; letter-spacing:0.12em; } } /* ------------------------------------------------------------ REDUCED MOTION ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .chair, .chair-launch, .fx-modal, .palette, .fx-toast, .cycle-ring .cr-fill { transition-duration:0.01ms !important; animation:none !important; } .desk-mic.live { animation:none; } }