/* Booking portal — global styles. Palette is ported 1:1 from the tablet app's Colors.xaml (comfort palette: soft graphite ground, ~88% white text, one teal key accent, champagne-gold prices, ink text on accent fills). Mobile-first: the desktop two-column layouts are the wide-screen enhancement, not the base. */ :root { --portal-bg: #050407; --portal-panel: #0c0f14; --portal-surface: #191e26; --portal-item: #10141a; --portal-border: #282b2e; --portal-border-card: #34383c; --portal-text: #e3e6e4; --portal-text-body: #c7ccc9; --portal-text-muted: #98a09b; --portal-text-faint: #6a726d; --portal-accent: #5fcabb; --portal-accent-text: #80d4c8; --portal-accent-contrast: #14171a; --portal-accent-deep: #4fb8a8; --portal-wash-bg: rgba(95, 202, 187, 0.09); --portal-wash-stroke: rgba(95, 202, 187, 0.18); --portal-wash-faint: rgba(95, 202, 187, 0.12); --portal-hero-start: #143137; --portal-hero-end: #0c1a20; --portal-hero-stroke: rgba(95, 202, 187, 0.35); --portal-price: #e8c37e; /* A point price beside a money price — the accent as quiet text, never the gold of a price. */ --portal-points: #6fbfb2; --portal-success: #7cb98a; --portal-success-bg: #0d2a1a; --portal-success-border: #1a4a2a; --portal-error: #e57373; --portal-error-bg: #3a1a1a; --portal-error-border: #5a2a2a; --portal-info: #96bcc4; --portal-info-bg: #1d2b2e; --portal-info-border: #2d4147; --portal-radius: 14px; --portal-radius-sm: 10px; --portal-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 32px rgba(0,0,0,0.30); --portal-shadow-hover: 0 1px 2px rgba(0,0,0,0.30), 0 12px 36px rgba(0,0,0,0.40); /* The ground and the panel at an alpha, for the blurred sticky bars and the glass rows. */ --portal-header-bg: rgba(5, 4, 7, 0.88); --portal-bar-bg: rgba(12, 15, 20, 0.96); --portal-glass: rgba(5, 4, 7, 0.35); --portal-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Dark by default, and told to the browser so the parts it paints itself (date picker, select list, scrollbars) render dark rather than as white boxes in a dark field. */ color-scheme: dark; } /* Light theme (8 Sep 2026) — opt-in per browser through the footer switch; the server stamps from the cookie (ThemeCookie), so the page arrives in the right theme with no script. Same token names, light values: fills keep the mint key with dark ink on it; every accent that is TEXT walks the same hue down until it clears 4.5:1 on white. */ :root[data-theme="light"] { --portal-bg: #f4f5f7; --portal-panel: #ffffff; --portal-surface: #ffffff; --portal-item: #eef0f3; --portal-border: #e6e9ed; --portal-border-card: #d9dde2; --portal-text: #101416; --portal-text-body: #232a2e; --portal-text-muted: #545e63; --portal-text-faint: #6b7680; --portal-accent: #5fcabb; --portal-accent-text: #2f6d63; --portal-accent-contrast: #14171a; --portal-accent-deep: #4fb8a8; --portal-wash-bg: rgba(95, 202, 187, 0.12); --portal-wash-stroke: rgba(95, 202, 187, 0.30); --portal-wash-faint: rgba(95, 202, 187, 0.20); --portal-hero-start: #e4f4f1; --portal-hero-end: #f6fbf9; --portal-hero-stroke: rgba(95, 202, 187, 0.45); --portal-price: #8a6420; --portal-points: #3f7d73; --portal-success: #2f7a45; --portal-success-bg: #e6f4ea; --portal-success-border: #b9dcc3; --portal-error: #b03a3a; --portal-error-bg: #fbeaea; --portal-error-border: #efc4c4; --portal-info: #3e6b75; --portal-info-bg: #e8f1f3; --portal-info-border: #c3d9de; --portal-shadow: 0 1px 2px rgba(16,20,22,0.06), 0 8px 32px rgba(16,20,22,0.08); --portal-shadow-hover: 0 1px 2px rgba(16,20,22,0.08), 0 12px 36px rgba(16,20,22,0.12); --portal-header-bg: rgba(255, 255, 255, 0.88); --portal-bar-bg: rgba(255, 255, 255, 0.96); --portal-glass: rgba(255, 255, 255, 0.60); color-scheme: light; } /* Auto (9 Sep 2026) — the default, and the half of the job only the browser can do. The server stamps data-theme="auto" from the absence of the cookie; it cannot know which way this device is set, so the same light values are repeated here behind the browser's own answer. No script, which is what the console's CSP requires. The two blocks must stay identical — the unit test AutoThemeMirrorsLightTests parses this file and fails the build if they drift. */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --portal-bg: #f4f5f7; --portal-panel: #ffffff; --portal-surface: #ffffff; --portal-item: #eef0f3; --portal-border: #e6e9ed; --portal-border-card: #d9dde2; --portal-text: #101416; --portal-text-body: #232a2e; --portal-text-muted: #545e63; --portal-text-faint: #6b7680; --portal-accent: #5fcabb; --portal-accent-text: #2f6d63; --portal-accent-contrast: #14171a; --portal-accent-deep: #4fb8a8; --portal-wash-bg: rgba(95, 202, 187, 0.12); --portal-wash-stroke: rgba(95, 202, 187, 0.30); --portal-wash-faint: rgba(95, 202, 187, 0.20); --portal-hero-start: #e4f4f1; --portal-hero-end: #f6fbf9; --portal-hero-stroke: rgba(95, 202, 187, 0.45); --portal-price: #8a6420; --portal-points: #3f7d73; --portal-success: #2f7a45; --portal-success-bg: #e6f4ea; --portal-success-border: #b9dcc3; --portal-error: #b03a3a; --portal-error-bg: #fbeaea; --portal-error-border: #efc4c4; --portal-info: #3e6b75; --portal-info-bg: #e8f1f3; --portal-info-border: #c3d9de; --portal-shadow: 0 1px 2px rgba(16,20,22,0.06), 0 8px 32px rgba(16,20,22,0.08); --portal-shadow-hover: 0 1px 2px rgba(16,20,22,0.08), 0 12px 36px rgba(16,20,22,0.12); --portal-header-bg: rgba(255, 255, 255, 0.88); --portal-bar-bg: rgba(255, 255, 255, 0.96); --portal-glass: rgba(255, 255, 255, 0.60); color-scheme: light; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--portal-font); color: var(--portal-text); background: var(--portal-bg); -webkit-font-smoothing: antialiased; } a { color: var(--portal-accent-text); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } .container { max-width: 1040px; margin: 0 auto; padding: 24px 20px 48px; } .container-narrow { max-width: 620px; margin: 0 auto; padding: 24px 20px 48px; } /* ── Header ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--portal-header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--portal-border); } .site-header-inner { max-width: 1040px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 14px; } .brand { font-weight: 700; font-size: 16px; color: var(--portal-text); letter-spacing: -0.01em; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-sub { color: var(--portal-text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; } .header-nav a { color: var(--portal-text-muted); font-size: 14px; font-weight: 500; } .header-nav a:hover { color: var(--portal-text); text-decoration: none; } .header-cta { background: var(--portal-accent); color: var(--portal-accent-contrast) !important; padding: 9px 16px; border-radius: 999px; font-weight: 600; } .header-cta:hover { filter: brightness(1.06); } @media (max-width: 640px) { .header-nav a:not(.header-cta) { display: none; } } /* ── Hero ───────────────────────────────────────────────── */ .landing-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; padding: 36px 0 8px; } @media (min-width: 880px) { .landing-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; padding: 56px 0 24px; } } .hero h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 700; line-height: 1.12; margin: 0 0 16px; letter-spacing: -0.02em; text-wrap: balance; } .hero .tagline { color: var(--portal-text-muted); margin: 0 0 24px; font-size: clamp(15px, 2.5vw, 17px); line-height: 1.55; max-width: 44ch; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .btn-hero { display: inline-block; background: linear-gradient(180deg, var(--portal-accent), var(--portal-accent-deep)); color: var(--portal-accent-contrast); border: none; padding: 14px 24px; border-radius: var(--portal-radius-sm); font-weight: 700; font-size: 15px; min-height: 48px; } .btn-hero:hover { filter: brightness(1.06); text-decoration: none; } .btn-hero-secondary { display: inline-block; background: transparent; color: var(--portal-text); border: 1px solid var(--portal-border-card); padding: 14px 24px; border-radius: var(--portal-radius-sm); font-weight: 600; font-size: 15px; min-height: 48px; } .btn-hero-secondary:hover { border-color: var(--portal-text-muted); text-decoration: none; } .queue-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--portal-wash-bg); border: 1px solid var(--portal-wash-stroke); border-radius: 999px; padding: 9px 16px; font-size: 13px; color: var(--portal-text-body); margin-bottom: 20px; } .queue-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--portal-accent); flex-shrink: 0; } .queue-pill strong { color: var(--portal-accent-text); font-weight: 600; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--portal-text-muted); font-size: 14px; } .hero-meta .rating { color: var(--portal-price); font-weight: 600; } .hero-meta a { color: var(--portal-text-muted); } /* ── Popular services card ──────────────────────────────── */ .popular-card { background: linear-gradient(180deg, var(--portal-hero-start), var(--portal-hero-end)); border: 1px solid var(--portal-hero-stroke); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow); padding: 20px; } .popular-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .popular-head .eyebrow { margin: 0; } .popular-head a { font-size: 13px; font-weight: 600; white-space: nowrap; } .eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--portal-text-muted); } .popular-row { display: flex; align-items: center; gap: 12px; background: var(--portal-glass); border: 1px solid var(--portal-wash-faint); border-radius: var(--portal-radius-sm); padding: 12px 14px; margin-bottom: 10px; } .popular-row .svc { flex: 1; min-width: 0; } .popular-row .svc-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; color: var(--portal-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .popular-row .svc-meta { font-size: 12px; color: var(--portal-text-muted); margin: 0; } .popular-row .svc-price { font-weight: 700; font-size: 15px; color: var(--portal-price); white-space: nowrap; font-variant-numeric: tabular-nums; } .popular-row .btn-book { background: var(--portal-accent); color: var(--portal-accent-contrast); border: none; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; white-space: nowrap; } .popular-row .btn-book:hover { filter: brightness(1.06); text-decoration: none; } .popular-foot { text-align: center; font-size: 13px; color: var(--portal-text-muted); padding-top: 8px; } .popular-foot strong { color: var(--portal-text); font-weight: 700; } /* ── Free-today chips (landing popular card) ────────────── */ .free-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .free-today-head .free-count { font-size: 12px; color: var(--portal-text-muted); } .free-today-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--portal-wash-faint); } .time-chip { background: var(--portal-glass); border: 1px solid var(--portal-border-card); color: var(--portal-text); border-radius: var(--portal-radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; } .time-chip:hover { border-color: var(--portal-accent); text-decoration: none; } /* ── Page heading on the booking steps ─────────────────── Was a copy-pasted style="..." on the h1 of BookService and Checkout — the only two hardcoded inline styles left on the public pages, and the only two the CSP's style-src would have had to keep 'unsafe-inline' for on their own account. */ .page-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 20px; } /* ── Numbered section headers (01 · Choose your services) ─ */ .section-num-title { display: flex; align-items: baseline; gap: 10px; font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -0.01em; color: var(--portal-text); margin: 40px 0 16px; } .section-num-title .num { font-size: 13px; font-weight: 700; color: var(--portal-accent-text); font-variant-numeric: tabular-nums; } .cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } .cat-chip { border: 1px solid var(--portal-border-card); color: var(--portal-text-body); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; text-decoration: none; } .cat-chip:hover { border-color: var(--portal-accent); color: var(--portal-text); text-decoration: none; } /* ── Landing footer ─────────────────────────────────────── */ .shop-footer { border-top: 1px solid var(--portal-border); margin-top: 56px; } .shop-footer-grid { max-width: var(--portal-max-width, 1080px); margin: 0 auto; padding: 36px 20px 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; } .shop-footer-grid p { color: var(--portal-text-muted); line-height: 1.55; margin: 8px 0 0; } .shop-footer .footer-call { display: block; margin-top: 8px; color: var(--portal-accent-text); font-weight: 600; } .powered-bar { max-width: var(--portal-max-width, 1080px); margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--portal-text-faint); font-size: 13px; border-top: 1px solid var(--portal-border); margin-top: 28px; } .powered-bar .powered { display: inline-flex; align-items: center; gap: 8px; } .powered-bar .powered img { width: 18px; height: 18px; } /* ── Section + service list ─────────────────────────────── */ .section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--portal-text-muted); margin: 28px 0 12px; } .card { background: var(--portal-surface); border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow); padding: 18px 20px; margin-bottom: 12px; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; } .card-link { display: block; color: inherit; text-decoration: none; } .card-link:hover { text-decoration: none; } .card-link:hover .card { transform: translateY(-1px); border-color: var(--portal-wash-stroke); box-shadow: var(--portal-shadow-hover); } .card-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .card-meta { color: var(--portal-text-muted); font-size: 13px; margin: 2px 0 0; } .card-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .price { font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--portal-price); font-variant-numeric: tabular-nums; } /* The ordinary price beside a markdown. It is the price the salon genuinely charges when the sale is off — never a decorative anchor (ACL ss 18/29). */ .was-price { margin-left: 6px; font-weight: 500; font-size: 0.82em; color: var(--portal-text-muted); font-variant-numeric: tabular-nums; } /* "· 5,000 pts" beside a money price (10 Sep 2026): the service can also be booked with loyalty points. Quiet accent text, so it reads as an alternative and never as a markdown. */ .price-points { margin-left: 6px; font-weight: 500; font-size: 0.82em; color: var(--portal-points); white-space: nowrap; font-variant-numeric: tabular-nums; } .service-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; } @media (min-width: 880px) { .service-grid { grid-template-columns: 1fr 1fr; } } /* ── Stepper ────────────────────────────────────────────── */ .stepper { display: flex; align-items: center; gap: 10px; padding: 20px 0 4px; font-size: 13px; color: var(--portal-text-faint); flex-wrap: wrap; } .step { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .step-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1px solid var(--portal-border-card); color: var(--portal-text-faint); background: var(--portal-item); flex-shrink: 0; } .step.done .step-dot { background: var(--portal-wash-bg); border-color: var(--portal-wash-stroke); color: var(--portal-accent-text); } .step.done { color: var(--portal-text-muted); } .step.active .step-dot { background: var(--portal-accent); border-color: var(--portal-accent); color: var(--portal-accent-contrast); } .step.active { color: var(--portal-text); } .step-line { flex: 0 0 24px; height: 1px; background: var(--portal-border-card); } /* ── Booking layout: content + summary rail ─────────────── */ .book-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } @media (min-width: 880px) { .book-grid { grid-template-columns: 1fr 340px; gap: 40px; } .book-rail { position: sticky; top: 84px; } } .rail-card { background: var(--portal-surface); border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow); padding: 20px; } .rail-card .eyebrow { display: block; margin-bottom: 14px; } .rail-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; } .rail-line .l { color: var(--portal-text-body); } .rail-line .l small { display: block; color: var(--portal-text-muted); font-size: 12px; margin-top: 2px; } .rail-line .r { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Service add-ons (4 Sep 2026): an extra sits UNDER the service it belongs to, quieter and indented, so the rail reads as one booking rather than as two things bought. */ .rail-addon-line { padding: 2px 0 2px 14px; font-size: 13px; } .rail-addon-line .l, .rail-addon-line .r { color: var(--portal-text-muted); font-weight: 500; } /* The tick boxes on the book page: a 44px row so a thumb can hit it. */ .rail-addon { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; } .rail-addon .l { flex: 1; color: var(--portal-text-body); } .rail-addon .r { color: var(--portal-text-muted); font-size: 13px; white-space: nowrap; } .rail-divider { border: none; border-top: 1px solid var(--portal-border); margin: 10px 0; } .rail-total { font-size: 17px; font-weight: 700; } .rail-total .r { color: var(--portal-text); font-size: 18px; } .rail-deposit .r { color: var(--portal-accent-text); } /* Mobile: rail collapses into a sticky bottom bar */ .book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--portal-bar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--portal-border-card); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; } .book-bar .bar-total { flex: 1; min-width: 0; } .book-bar .bar-total .amount { font-size: 17px; font-weight: 700; } .book-bar .bar-total small { display: block; color: var(--portal-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .book-bar .btn { width: auto; flex-shrink: 0; padding: 13px 28px; } @media (min-width: 880px) { .book-bar { display: none; } } @media (max-width: 879px) { .book-rail { display: none; } .has-book-bar { padding-bottom: 96px; } } /* ── Day strip ──────────────────────────────────────────── */ .day-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; } .day-strip::-webkit-scrollbar { display: none; } .day-btn { flex: 0 0 64px; background: var(--portal-item); border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius-sm); color: var(--portal-text-body); padding: 10px 4px; text-align: center; min-height: 60px; } .day-btn .dow { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--portal-text-muted); } .day-btn .dom { display: block; font-size: 18px; font-weight: 700; margin-top: 3px; } .day-btn:hover { border-color: var(--portal-text-muted); } .day-btn.selected { background: var(--portal-wash-bg); border-color: var(--portal-accent); color: var(--portal-text); } .day-btn.selected .dow { color: var(--portal-accent-text); } /* ── Technician chips ───────────────────────────────────── */ .tech-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; } .tech-chip { background: var(--portal-item); border: 1px solid var(--portal-border-card); border-radius: 999px; color: var(--portal-text-body); padding: 8px 16px; font-size: 13px; font-weight: 600; min-height: 38px; } .tech-chip:hover { border-color: var(--portal-text-muted); } .tech-chip.selected { background: var(--portal-wash-bg); border-color: var(--portal-wash-stroke); color: var(--portal-accent-text); } /* ── Time slots ─────────────────────────────────────────── */ .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 10px 0 20px; } .slot-btn { background: var(--portal-item); color: var(--portal-text); border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius-sm); padding: 12px 8px; text-align: center; min-height: 48px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; } .slot-btn:hover { border-color: var(--portal-accent); } .slot-btn.selected { background: var(--portal-accent); color: var(--portal-accent-contrast); border-color: var(--portal-accent); } .slot-note { font-size: 13px; color: var(--portal-text-muted); margin: 4px 0 16px; } /* ── Buttons + forms ────────────────────────────────────── */ .btn { display: inline-block; background: linear-gradient(180deg, var(--portal-accent), var(--portal-accent-deep)); color: var(--portal-accent-contrast); border: none; padding: 14px 22px; border-radius: var(--portal-radius-sm); font-weight: 700; font-size: 15px; text-align: center; width: 100%; min-height: 48px; transition: filter 0.12s; } .btn:hover:not(:disabled) { filter: brightness(1.06); text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: var(--portal-surface); color: var(--portal-text); border: 1px solid var(--portal-border-card); } .field { display: block; margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--portal-text); } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; /* iOS won't zoom on focus when font-size ≥ 16px */ border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius-sm); background: var(--portal-surface); color: var(--portal-text); min-height: 48px; -webkit-appearance: none; appearance: none; /* Mobile Safari's inset chrome = a second border */ } .field select, .field input[type="date"] { appearance: auto; -webkit-appearance: auto; } .field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--portal-accent); outline-offset: -1px; border-color: var(--portal-accent); } /* Routes.razor's focuses the new page's heading after every enhanced navigation so a screen reader announces it. Keep the focus, drop the default ring the browser paints around a heading nobody can Tab to. Anything keyboard-reachable has no tabindex="-1" and keeps its indicator. */ [tabindex="-1"]:focus { outline: none; } /* ── Alerts ─────────────────────────────────────────────── */ .alert { padding: 12px 14px; border-radius: var(--portal-radius-sm); background: var(--portal-error-bg); color: var(--portal-error); border: 1px solid var(--portal-error-border); margin: 12px 0; font-size: 14px; } .alert-info { background: var(--portal-info-bg); color: var(--portal-info); border-color: var(--portal-info-border); } /* ── Confirmed page ─────────────────────────────────────── */ .confirm-hero { text-align: center; padding: 44px 0 8px; } .confirm-tick { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: var(--portal-wash-bg); border: 1px solid var(--portal-hero-stroke); display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--portal-accent-text); } .confirm-hero h1 { font-size: clamp(26px, 4.5vw, 36px); font-weight: 700; margin: 0 0 8px; letter-spacing: -0.02em; } .confirm-hero .sub { color: var(--portal-text-muted); font-size: 15px; margin: 0; } .receipt { background: var(--portal-surface); border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow); padding: 8px 20px; margin: 28px 0 16px; } .receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--portal-border); } .receipt-row:last-child { border-bottom: none; } .receipt-row .l { color: var(--portal-text-muted); } .receipt-row .r { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .receipt-row .r.paid { color: var(--portal-success); } .confirm-actions { display: flex; gap: 12px; margin: 16px 0; } .confirm-actions .btn { flex: 1; } .app-card { display: flex; align-items: center; gap: 16px; background: var(--portal-item); border: 1px solid var(--portal-border); border-radius: var(--portal-radius); padding: 16px 18px; margin-top: 20px; } .app-card .qr { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #fff; padding: 4px; } .app-card .qr svg, .app-card .qr img { width: 100%; height: 100%; display: block; } .app-card .app-copy p { margin: 0; } .app-card .app-copy .t { font-weight: 700; font-size: 14px; margin-bottom: 3px; } .app-card .app-copy .d { color: var(--portal-text-muted); font-size: 13px; line-height: 1.45; } /* ── Home (salon directory) ─────────────────────────────── */ .home-hero { text-align: center; padding: 56px 20px 28px; } .home-hero h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; margin: 0 0 10px; letter-spacing: -0.02em; } .home-hero p { color: var(--portal-text-muted); margin: 0; font-size: 16px; } /* ── Utilities ──────────────────────────────────────────── */ .muted { color: var(--portal-text-muted); } .center { text-align: center; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } /* ── Booking mock alignment: avatar tech cards, day counts, richer rail ── */ .tech-chip.tech-card { display: inline-flex; align-items: center; gap: 10px; text-align: left; padding: 10px 16px 10px 10px; } .tech-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--portal-item); border: 1px solid var(--portal-border-card); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--portal-text-body); flex: none; } .tech-avatar-any { color: var(--portal-accent-text); border-color: var(--portal-wash-stroke); } .tech-label { display: inline-flex; flex-direction: column; line-height: 1.25; } .tech-label small { color: var(--portal-text-muted); font-size: 11px; font-weight: 500; } .tech-chip.selected .tech-label small { color: var(--portal-accent-text); } .day-btn .free { display: block; font-size: 10px; color: var(--portal-text-faint); margin-top: 3px; white-space: nowrap; } .day-btn.selected .free { color: var(--portal-accent-text); } .rail-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; } .rail-kv .k { color: var(--portal-text-muted); } .rail-kv .v { color: var(--portal-text); font-weight: 600; text-align: right; } .rail-gst .l, .rail-gst .r { color: var(--portal-text-muted); font-size: 13px; font-weight: 500; } .rail-total-label { font-weight: 700; color: var(--portal-text); } .rail-deposit-box { background: var(--portal-success-bg); border: 1px solid var(--portal-success-border); border-radius: var(--portal-radius-sm); padding: 10px 14px; margin-top: 10px; } .rail-deposit-box .deposit-note { color: var(--portal-text-muted); font-size: 12px; margin: 4px 0 0; } .rail-policy { color: var(--portal-text-muted); font-size: 12px; line-height: 1.5; margin: 12px 0 0; } /* Service rows: a visible Book affordance on the whole-card link. The name column takes the flexible space so the price sits right-aligned hard against the Book pill — space-between alone floated each price to a different x depending on the name's length, and a column of prices that don't line up reads as noise. Same shape as .popular-row's .svc { flex: 1 }. */ .service-card .card-row { align-items: center; gap: 14px; } .service-card .card-row > div:first-child { flex: 1; min-width: 0; } .service-card .price { text-align: right; } .btn-row-book { border: 1px solid var(--portal-border-card); color: var(--portal-text-body); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; } .card-link:hover .btn-row-book { background: var(--portal-accent); border-color: var(--portal-accent); color: var(--portal-accent-contrast); } .price-list-note { margin-top: 18px; font-size: 13px; } @media (max-width: 480px) { .container, .container-narrow { padding: 16px 14px 40px; } } /* Brand landing page (/{brand-slug}) — the logo above the brand name. Bounded box so a too-large hosted image cannot take over the hero; the image letterboxes inside it. */ .brand-logo { display: block; margin: 0 auto 16px; max-height: 72px; max-width: 220px; object-fit: contain; } /* Small logo beside the salon name in the sticky header — inherited from the shop's brand. */ .site-header .brand-mark { height: 26px; width: auto; max-width: 90px; object-fit: contain; vertical-align: -7px; margin-right: 8px; } /* Brand logo on a marketplace card — small, above the eyebrow, never dominating the name. */ .salon-card .salon-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 6px; } /* ── Account page (/account) ───────────────────────────── */ .account-card { background: var(--portal-surface); border: 1px solid var(--portal-border-card); border-radius: var(--portal-radius); padding: 18px 20px; margin: 16px 0; } .account-card .eyebrow { display: block; margin: 0 0 10px; } .account-list { list-style: none; margin: 0; padding: 0; } .account-list li { padding: 10px 0; border-top: 1px solid var(--portal-border); display: flex; flex-direction: column; gap: 2px; } .account-list li:first-child { border-top: none; padding-top: 0; } .account-list small { color: var(--portal-text-muted); } .account-table { width: 100%; border-collapse: collapse; font-size: 14px; } .account-table th, .account-table td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--portal-border); vertical-align: top; } .account-table th { color: var(--portal-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; border-top: none; } .account-table td.actions { text-align: right; white-space: nowrap; } .account-tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; margin: 2px 4px 0 0; background: var(--portal-wash-bg); border: 1px solid var(--portal-wash-stroke); color: var(--portal-accent-text); } .account-tag-warn { background: var(--portal-info-bg); border-color: var(--portal-info-border); color: var(--portal-info); } .btn-inline { width: auto; min-height: 36px; padding: 8px 14px; font-size: 13px; } .alert-success { background: var(--portal-success-bg); color: var(--portal-success); border-color: var(--portal-success-border); } /* ── Points (9 Sep 2026) ────────────────────────────────── The salon page's reward list, the checkout's "pay with points?" choice, the confirmation's held-points line and the account card. No tokens of their own: a reward is a thing on the menu, so it wears the menu's colours, and the point price sits where a price sits. */ .points-title { margin-top: 48px; } .points-intro { margin: -6px 0 16px; } .points-intro a { margin-left: 6px; font-weight: 600; } .reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 8px; } .reward-card { display: flex; flex-direction: column; gap: 6px; } .reward-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .reward-head .card-title { margin: 0; } .reward-points { color: var(--portal-price); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .reward-card .card-meta { margin: 0; } .reward-tags { display: flex; flex-wrap: wrap; gap: 6px; } .reward-tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--portal-wash-bg); border: 1px solid var(--portal-wash-stroke); color: var(--portal-accent-text); } .reward-tag-promo { background: var(--portal-success-bg); border-color: var(--portal-success-border); color: var(--portal-success); } .reward-book { align-self: flex-start; margin-top: 4px; } .rail-points { color: var(--portal-success); } .rail-points-note .l { font-size: 12px; } .points-choice label.check { min-height: 44px; } .points-choice small { display: block; font-size: 12px; } .receipt-points .r { white-space: normal; } .account-points .points-balance { margin: 0 0 6px; font-size: 16px; } .account-points .points-balance strong { color: var(--portal-price); font-size: 20px; font-variant-numeric: tabular-nums; } /* ── Show-password toggle ────────────────────────────────────────────────────────────────────── The wrapper and the button are created by password-reveal.js, never rendered by the server, so a page with no JavaScript has ordinary password fields and no dead button. Flex rather than position:absolute because these inputs are laid out by half a dozen different rules at four different widths, and a flex row with a negative margin overlays the glyph on the field's right edge whatever width the field ends up. The input's matching right padding is set inline by the script for the same reason: an inline value cannot lose a specificity argument. */ .pw-field { display: flex; align-items: center; } .pw-field > input { flex: 1 1 auto; min-width: 0; } .pw-toggle { flex: 0 0 auto; margin-left: -38px; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--portal-text-muted); -webkit-appearance: none; appearance: none; } .pw-toggle:hover { color: var(--portal-text); } .pw-toggle:focus-visible { color: var(--portal-text); outline: 2px solid var(--portal-accent); outline-offset: -2px; } .pw-toggle svg { width: 19px; height: 19px; }