/* ========================================================================== HB Online Bookings — wireframe design tokens (v3) Editorial municipal aesthetic. Single-family typography, weight-driven hierarchy. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..700;1,400..600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---- Palette presets — scoped to [data-palette] on --------------- */ /* Default (teal) is already set in :root; these override accent vars per palette */ :root[data-palette="teal"] { --accent:#0E5C5C; --accent-ink:#093E3E; --accent-soft:#E5EFEC; --accent-line:#B8D2CD; } :root[data-palette="navy"] { --accent:#1F4E7A; --accent-ink:#163A5C; --accent-soft:#E3EBF3; --accent-line:#A9BFD4; } :root[data-palette="slate"] { --accent:#3B5878; --accent-ink:#2A3F57; --accent-soft:#E6EAF0; --accent-line:#B0BCCC; } :root[data-palette="pewter"] { --accent:#475569; --accent-ink:#334155; --accent-soft:#E7E9ED; --accent-line:#B5BCC7; } :root[data-palette="terra"] { --accent:#B85C38; --accent-ink:#8E4324; --accent-soft:#F6E8E0; --accent-line:#E2BBA8; } :root[data-palette="forest"] { --accent:#1F4D2C; --accent-ink:#143820; --accent-soft:#E1ECE3; --accent-line:#A9C5B1; } /* ---- Palette toggler — lives inside .wf-bar ----------------------------- */ .wf-palette { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .wf-palette__swatch { /* Visual circle: 20×20. Tap target padded to 44×44 total area. */ width: 20px; height: 20px; border-radius: 50%; border: none; padding: 0; cursor: pointer; position: relative; flex-shrink: 0; background-clip: padding-box; transition: transform 120ms ease, box-shadow 120ms ease; /* Expand clickable area to 44×44 without affecting layout */ margin: 0 2px; } .wf-palette__swatch::before { /* Invisible 44×44 tap target centred on the 20×20 circle */ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; } .wf-palette__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.4); } .wf-palette__swatch:hover { transform: scale(1.2); } .wf-palette__swatch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; } /* Swatch colors — each set to its palette's accent */ .wf-palette__swatch[data-p="teal"] { background-color: #0E5C5C; } .wf-palette__swatch[data-p="navy"] { background-color: #1F4E7A; } .wf-palette__swatch[data-p="slate"] { background-color: #3B5878; } .wf-palette__swatch[data-p="pewter"] { background-color: #475569; } .wf-palette__swatch[data-p="terra"] { background-color: #B85C38; } .wf-palette__swatch[data-p="forest"] { background-color: #1F4D2C; } /* Mobile: replace inline swatches with a compact select */ .wf-palette__select { display: none; background: rgba(255,255,255,.08); color: #E4DFD5; border: 1px solid #3A4350; border-radius: 999px; padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; min-height: 28px; appearance: none; } .wf-palette__select option { background: #1A1F26; color: #E4DFD5; } /* Mobile: swatches stay (palette has its own row at <640px now). Select hidden. */ :root { /* Type families — single grotesk family + mono for metadata */ --font-display: 'Hanken Grotesk', -apple-system, system-ui, sans-serif; --font-sans: 'Hanken Grotesk', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Type scale (modular, 1.2 ratio off 14px base) */ --text-2xs: 0.6875rem; /* 11px – meta, dimensions */ --text-xs: 0.75rem; /* 12px – captions, labels */ --text-sm: 0.875rem; /* 14px – body */ --text-base:1rem; /* 16px – body large */ --text-lg: 1.125rem; /* 18px – subheading */ --text-xl: 1.375rem; /* 22px – section heading */ --text-2xl: 1.75rem; /* 28px – page title */ --text-3xl: 2.25rem; /* 36px – hero headline */ --text-4xl: 3rem; /* 48px – display */ /* Colors — restrained palette: warm paper + ocean accent */ --paper: #FAF8F4; /* warm off-white canvas */ --paper-2: #F2EEE7; /* sunken surface */ --surface: #FFFFFF; /* card */ --ink: #14202B; /* primary text */ --ink-2: #3D4B57; /* secondary text */ --ink-3: #6E7B86; /* tertiary / labels */ --ink-4: #A4ADB5; /* disabled / hint */ --rule: #E4DFD5; /* warm hairline */ --rule-2: #D9D2C4; /* warm hairline emphasized */ --accent: #0E5C5C; /* deep ocean teal */ --accent-ink: #093E3E; /* darker accent */ --accent-soft: #E5EFEC; /* tint */ --accent-line: #B8D2CD; --ok: #2F6F4F; --ok-soft: #E6F0E9; --ok-line: #BAD3C2; --warn: #8A5A14; --warn-soft: #FAEFD9; --warn-line: #E8D4A6; --danger: #8C2E2E; --danger-soft: #F4E2DF; --danger-line: #E0BCB6; --alcohol: #6C3F8E; /* purple — alcohol indicator (icon-paired, not color-only) */ --alcohol-soft: #EDE4F2; --alcohol-line: #CDB6DC; /* Highlight accent (the warm gold "star") */ --highlight: #B0801F; --highlight-soft: #FBF3DD; --highlight-line: #E5CD8A; /* Spacing scale (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; /* Shadows — soft, low contrast */ --shadow-1: 0 1px 0 rgba(20,32,43,.04), 0 1px 2px rgba(20,32,43,.04); --shadow-2: 0 1px 0 rgba(20,32,43,.04), 0 4px 12px -2px rgba(20,32,43,.06); --shadow-3: 0 2px 0 rgba(20,32,43,.04), 0 12px 28px -6px rgba(20,32,43,.10); /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms; /* Wireframe navigator dimensions */ --nav-w: 248px; --wf-bar-h: 38px; --wf-rail-w: 220px; } /* ---- Base reset ---------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.55; color: var(--ink); background: var(--paper); } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.018em; color: var(--ink); margin: 0; font-style: normal; } h1 { font-size: var(--text-2xl); line-height: 1.12; } h2 { font-size: var(--text-xl); line-height: 1.2; } h3 { font-size: var(--text-lg); line-height: 1.25; font-weight: 600; } p { margin: 0; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ---- Display typography classes ---------------------------------------- */ .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-style: normal; } .eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .mono { font-family: var(--font-mono); } .num { font-variant-numeric: tabular-nums; } em { font-style: italic; font-weight: inherit; } /* ---- Greybox primitives ------------------------------------------------- */ .gb { position: relative; background: linear-gradient(135deg, transparent 49.5%, rgba(20,32,43,.06) 49.5%, rgba(20,32,43,.06) 50.5%, transparent 50.5%) 0 0/8px 8px, var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--ink-4); } .gb::before { /* corner crosshair */ content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(20,32,43,.10); border-radius: 4px; pointer-events: none; } .gb__dim { position: absolute; bottom: 6px; right: 8px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; } .gb__icon { width: 28px; height: 28px; opacity: .5; } .gb__label { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; } /* Skeleton placeholder (text lines) */ .sk { background: var(--paper-2); border-radius: 3px; height: 0.6em; display: inline-block; } .sk--full { display: block; height: 8px; margin: 6px 0; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent; min-height: 44px; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-ink); } .btn--ghost { background: transparent; border-color: var(--rule-2); color: var(--ink); } .btn--ghost:hover { background: var(--surface); } .btn--danger { background: var(--surface); border-color: var(--danger-line); color: var(--danger); } .btn--danger:hover { background: var(--danger-soft); } .btn--ok { background: var(--ok); color: #fff; } .btn--ok:hover { background: #275B41; } /* ---- Form fields -------------------------------------------------------- */ .field { display: block; width: 100%; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: 10px 12px; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .label { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0.01em; } /* Date / time inputs — keep the rendered text vertically and horizontally aligned with sibling fields */ .field[type="date"], .field[type="time"], .field[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-height: 44px; line-height: 1.4; padding: 10px 12px; font-variant-numeric: tabular-nums; font-family: var(--font-sans); } .field[type="date"]::-webkit-date-and-time-value { text-align: left; line-height: 1.4; } .field[type="date"]::-webkit-calendar-picker-indicator { opacity: .65; cursor: pointer; } /* ---- Cards / surfaces --------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); } .card--lift { box-shadow: var(--shadow-1); transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .card--lift:hover { box-shadow: var(--shadow-2); border-color: var(--rule-2); transform: translateY(-1px); } /* ---- Badge / chip ------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.02em; border: 1px solid; } .chip--ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); } .chip--warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); } .chip--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); } .chip--alc { background: var(--alcohol-soft); color: var(--alcohol); border-color: var(--alcohol-line); } .chip--neutral { background: var(--paper-2); color: var(--ink-2); border-color: var(--rule); } .chip--accent { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); } .chip--highlight { background: var(--highlight-soft); color: var(--highlight); border-color: var(--highlight-line); } /* ---- App-side header — single cohesive type lockup --------------------- */ .app-header { background: var(--surface); border-bottom: 1px solid var(--rule); } .app-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--space-5); gap: 16px; flex-wrap: wrap; } .app-mark { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: -0.012em; color: var(--ink); line-height: 1.15; } .app-mark__seal { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-ink) 75%); position: relative; flex-shrink: 0; } .app-mark__seal::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; } .app-mark__name { display: block; } /* Container */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); } .container--narrow { max-width: 720px; } .container--mid { max-width: 880px; } @media (min-width: 1024px) { /* Bigger gutters in the simulated app at desktop — especially needed when the wf-rail sidebar is active and the content area is narrowed. */ .container { padding-left: 36px; padding-right: 36px; } .app-header__inner { padding-left: 36px; padding-right: 36px; } } /* ---- Buffer hatch styles (used in calendar / extend) ------------------- */ .hatch-60 { background-image: repeating-linear-gradient(45deg, rgba(138,90,20,.18) 0 6px, transparent 6px 12px); background-color: var(--warn-soft); } .hatch-90 { background-image: repeating-linear-gradient(45deg, rgba(108,63,142,.22) 0 4px, transparent 4px 10px); background-color: var(--alcohol-soft); } .hatch-deny { background-image: repeating-linear-gradient(135deg, rgba(20,32,43,.10) 0 6px, transparent 6px 12px); } /* ========================================================================== WIREFRAME NAVIGATOR — v5 top-bar A persistent meta strip ABOVE the simulated app header. Distinct from the product chrome (cool slate, monospace) so reviewers always know they're inside a wireframe set rather than a real product. ========================================================================== */ .wf-shell { display: block; } /* The top bar itself — fixed across the top, sits above everything. */ .wf-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--wf-bar-h); background: #1A1F26; color: #C8CFD7; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; z-index: 80; border-bottom: 1px solid #2A323D; display: flex; align-items: stretch; box-shadow: 0 1px 0 rgba(20,32,43,.06); } .wf-bar__inner { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0 16px; max-width: 1480px; margin: 0 auto; } .wf-bar__brand { color: #F2EEE7; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 10px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; } .wf-bar__brand:hover { color: #fff; text-decoration: none; } .wf-bar__brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 0 2px rgba(176,128,31,.22); } .wf-bar__sep { width: 1px; height: 14px; background: #3A4350; flex-shrink: 0; } .wf-bar__page { display: inline-flex; align-items: baseline; gap: 8px; color: #C8CFD7; min-width: 0; } .wf-bar__page-num { color: #8A95A1; font-size: 10px; letter-spacing: 0.14em; font-weight: 500; flex-shrink: 0; } .wf-bar__page-name { color: #F2EEE7; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wf-bar__star { color: var(--highlight); font-size: 11px; line-height: 1; margin-left: 2px; } .wf-bar__spacer { flex: 1; min-width: 8px; } .wf-bar__menu-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); color: #E4DFD5; border: 1px solid #3A4350; border-radius: 999px; padding: 5px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .wf-bar__menu-btn:hover { background: rgba(255,255,255,.10); border-color: #525C6A; color: #fff; } .wf-bar__menu-btn[aria-expanded="true"] { background: var(--highlight); border-color: var(--highlight); color: #fff; } .wf-bar__menu-btn-glyph { font-size: 12px; line-height: 1; display: inline-block; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } .wf-bar__menu-btn[aria-expanded="true"] .wf-bar__menu-btn-glyph { transform: rotate(90deg); } .wf-bar__meta { color: #8A95A1; font-size: 10px; letter-spacing: 0.12em; flex-shrink: 0; } /* Dropdown panel — appears below the bar when "All sheets" is toggled. Animation strategy: - Stays in DOM (no display swap). visibility + pointer-events gate interactivity. - Animates ONLY GPU-accelerated properties: opacity + transform: translateY. - Uses position: fixed so it floats over content (no reflow during open/close). - Symmetric easing — both open and close use the same out-curve so motion feels consistent in both directions. (Mario's v5.1 used a sharp in-curve on close which front-loaded the motion and read as janky.) - On close, items collapse INSTANTLY with the panel (no per-item stagger out) so nothing lingers after the panel itself is gone. Stagger is OPEN-ONLY. */ .wf-menu { position: fixed; top: var(--wf-bar-h); right: 16px; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - var(--wf-bar-h) - 32px); background: #F5F4F0; color: #3D4B57; border: 1px solid #1A1F26; border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); padding: 18px 18px 16px; font-family: var(--font-mono); font-size: var(--text-2xs); z-index: 75; overflow-y: auto; box-shadow: 0 18px 40px -12px rgba(20,32,43,.35), 0 4px 8px rgba(20,32,43,.10); /* GPU compositor hints — only while interactive to avoid permanent layer cost. */ transform: translate3d(0, -8px, 0); opacity: 0; pointer-events: none; visibility: hidden; /* Symmetric out-curve in both directions (240ms close, 280ms open below). */ transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms; } .wf-menu[data-open="true"] { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; visibility: visible; /* will-change is added transiently by JS during the animation only — leaving it on permanently creates a permanent compositing layer that hurts perf, especially on iOS Safari. */ transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } /* Staggered list-item entry — OPEN ONLY. On close, items snap with the panel. */ .wf-menu[data-open="true"] .wf-menu__item { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .wf-menu__item { opacity: 0; transform: translate3d(0, -4px, 0); /* Closed state: NO opacity/transform transition. Items disappear instantly with the panel, so nothing lingers after the panel collapse completes. Hover transitions still apply. */ transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } /* Delay cascade — applies ONLY when opening (open state ruleset above carries the delay). */ .wf-menu[data-open="true"] .wf-menu__list li:nth-child(1) .wf-menu__item { transition-delay: 50ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(2) .wf-menu__item { transition-delay: 80ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(3) .wf-menu__item { transition-delay: 110ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(4) .wf-menu__item { transition-delay: 140ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(5) .wf-menu__item { transition-delay: 170ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(6) .wf-menu__item { transition-delay: 200ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(7) .wf-menu__item { transition-delay: 230ms; } .wf-menu[data-open="true"] .wf-menu__list li:nth-child(8) .wf-menu__item { transition-delay: 260ms; } .wf-menu__sub { color: #8A8576; font-size: 10px; letter-spacing: 0.08em; margin: 0 0 14px; line-height: 1.5; } .wf-menu__group { margin-top: 14px; } .wf-menu__group-label { display: flex; align-items: center; gap: 8px; color: #8A8576; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; font-weight: 500; } .wf-menu__group-label::after { content: ""; flex: 1; height: 1px; background: #E0DCD2; } .wf-menu__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; } .wf-menu__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: #4A5560; border-radius: 4px; text-decoration: none; letter-spacing: 0.02em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .wf-menu__item:hover { background: #ECE9E1; color: #14202B; text-decoration: none; } .wf-menu__item[aria-current="page"] { background: #E4DFD2; color: #14202B; font-weight: 500; } .wf-menu__item[aria-current="page"]::before { content: "▸"; color: var(--accent); } .wf-menu__num { color: #A39C8C; font-size: 9px; width: 22px; flex-shrink: 0; } .wf-menu__star { color: var(--highlight); margin-left: 4px; font-size: 11px; line-height: 1; } .wf-menu__alt-tag { margin-left: auto; color: var(--ink-3); font-size: 8px; letter-spacing: 0.16em; } .wf-menu__foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #D9D2C4; color: #8A8576; font-size: 9px; line-height: 1.7; } /* Backdrop scrim when menu is open (click to close). v5.4: dropped backdrop-filter entirely — iOS Safari has known stutter issues with backdrop-filter during sibling transform animations. A flat semi-transparent scrim is compositor-only and never janky. */ .wf-menu-scrim { position: fixed; inset: 0; top: var(--wf-bar-h); background: rgba(15,23,42,.35); z-index: 74; border: 0; opacity: 0; pointer-events: none; transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1); } .wf-menu-scrim[data-open="true"] { opacity: 1; pointer-events: auto; } /* The simulated stage — pushed down by the meta bar height. */ .wf-stage { margin-left: 0; padding-top: var(--wf-bar-h); min-height: 100vh; } /* On the wireframe-sample.html which uses a sticky simulated header, the stage's padding-top reserves room so the sticky header sits BELOW the bar. */ /* ---- Mobile-specific tweaks for app pages ------------------------------ */ @media (max-width: 640px) { .app-header__inner { padding: 12px 16px; } .app-mark { font-size: var(--text-sm); gap: 10px; } .app-mark__seal { width: 26px; height: 26px; } .wf-bar__meta { display: none; } .wf-bar__brand { font-size: 9px; letter-spacing: 0.14em; } .wf-bar__page-num { font-size: 9px; } .wf-bar__page-name { font-size: 10px; } .wf-menu { right: 8px; left: 8px; width: auto; max-width: none; } /* Mobile: wf-bar wraps to TWO rows. Brand+sheet+menu on row 1; palette on row 2. */ :root { --wf-bar-h: 76px; } .wf-bar { height: auto; min-height: var(--wf-bar-h); } .wf-bar__inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; padding: 6px 12px; } /* Compact menu button + push to right of row 1 */ .wf-bar__menu-btn { margin-left: auto; padding: 6px 10px; font-size: 10px; letter-spacing: 0.1em; min-height: 28px; } /* Truncate sheet name so menu button doesn't get pushed off row 1 */ .wf-bar__page-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; } /* Palette occupies full second row, swatches spread evenly */ .wf-palette { flex: 1 1 100%; order: 10; justify-content: space-between; } } @media (max-width: 380px) { .wf-bar__brand { display: none; } .wf-bar__sep:first-of-type { display: none; } } /* ========================================================================== WF-RAIL — persistent desktop sidebar (v5.4) Hidden below 1024px (top-bar dropdown handles those widths). Light cream surface so it sits in the same tonal family as the simulated paper but reads as meta-chrome, not product UI. ========================================================================== */ .wf-rail { display: none; } @media (min-width: 1024px) { body:has(.wf-rail) { padding-left: var(--wf-rail-w); } .wf-rail { display: block; position: fixed; top: var(--wf-bar-h); left: 0; bottom: 0; width: var(--wf-rail-w); background: #F5F4F0; border-right: 1px solid #D9D2C4; padding: 18px 14px 20px; overflow-y: auto; font-family: var(--font-mono); z-index: 70; } /* On desktop, when the rail is present, the dropdown trigger is redundant. Scoped via :has() so wireframe-sample.html (no rail) keeps its trigger. */ body:has(.wf-rail) .wf-bar__menu-btn { display: none !important; } } .wf-rail__sub { color: #8A8576; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 4px 14px; font-weight: 500; } .wf-rail__group { margin-top: 14px; } .wf-rail__group:first-of-type { margin-top: 0; } .wf-rail__group-label { display: flex; align-items: center; gap: 8px; color: #8A8576; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 4px 6px; font-weight: 500; } .wf-rail__group-label::after { content: ""; flex: 1; height: 1px; background: #E0DCD2; } .wf-rail__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; } .wf-rail__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: #4A5560; border-radius: 4px; text-decoration: none; font-size: var(--text-2xs); letter-spacing: 0.02em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .wf-rail__item:hover { background: #ECE9E1; color: #14202B; text-decoration: none; } .wf-rail__item[aria-current="page"] { background: #E4DFD2; color: #14202B; font-weight: 500; } .wf-rail__item[aria-current="page"]::before { content: "▸"; color: var(--accent); } .wf-rail__num { color: #A39C8C; font-size: 9px; width: 22px; flex-shrink: 0; } .wf-rail__star { color: var(--highlight); margin-left: 4px; font-size: 11px; line-height: 1; } .wf-rail__alt-tag { margin-left: auto; color: var(--ink-3); font-size: 8px; letter-spacing: 0.16em; } .wf-rail__foot { margin: 18px 4px 0; padding-top: 12px; border-top: 1px dashed #D9D2C4; color: #8A8576; font-size: 9px; line-height: 1.7; } /* Overview pin — sits ABOVE the first group in both rail and dropdown. Subtle warm tint + leading star marks it as the splash entry-point. */ .wf-rail__overview, .wf-menu__overview { margin-bottom: 10px; background: var(--highlight-soft); border: 1px solid var(--highlight-line); color: var(--ink) !important; } .wf-rail__overview:hover, .wf-menu__overview:hover { background: #FBE9C2; } .wf-rail__overview[aria-current="page"], .wf-menu__overview[aria-current="page"] { background: var(--highlight); color: #fff !important; border-color: var(--highlight); } .wf-rail__overview[aria-current="page"]::before, .wf-menu__overview[aria-current="page"]::before { color: #fff; } .wf-rail__overview .wf-rail__num, .wf-menu__overview .wf-menu__num { color: var(--highlight); } .wf-rail__overview[aria-current="page"] .wf-rail__num, .wf-menu__overview[aria-current="page"] .wf-menu__num { color: rgba(255,255,255,.85); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Ensure menu and scrim are still visible/hidden correctly without motion */ .wf-menu { transform: none !important; } .wf-menu:not([data-open="true"]) { visibility: hidden; } .wf-menu[data-open="true"] { visibility: visible; } }