/* ============================================================================= Solution Services — theme layer ============================================================================= Consumes the custom properties emitted by includes/theme.php. Nothing in this file names a colour directly, so both identities run through the same rules and the toggle never has a branch to get wrong. THE SIGNATURE DEVICE One idea, used everywhere and nowhere else: a 2px rule in the logo's gold. It marks the active navigation tab, opens a section heading, and edges a card that vouches for someone. The logo's mark is a cut gold ribbon; this is that ribbon reduced to its smallest useful form. Everything else on the page stays quiet so this reads. ========================================================================== */ /* ── Base ─────────────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--ss-font-body); background-color: var(--ss-paper); color: var(--ss-ink); font-feature-settings: "kern" 1; } /* Pages hard-code their page colour on the element itself — `bg-white` on the public site, `bg-gray-50` in the panels — and Tailwind's runtime stylesheet is injected after this file, so the utility would win. Two classes on one element out-specify it without touching the ~100 body tags, and without affecting `bg-white` anywhere else (cards still read white). */ body.bg-white, body.bg-gray-50, body.bg-gray-100 { background-color: var(--ss-paper); } /* Money, references and dates line up in columns. Plex ships tabular figures; this asks for them wherever numbers are compared vertically. */ .ss-num, table td, table th, .ss-amount { font-variant-numeric: tabular-nums; } h1, h2, h3, .ss-display { font-family: var(--ss-font-display); letter-spacing: -0.011em; } h1 { font-weight: 700; } h2, h3 { font-weight: 600; } /* The serif runs a touch large at the same nominal size as the sans. */ .ss-display { line-height: 1.15; } a { color: inherit; } /* Keyboard focus must always be visible; several components override outline for mouse users and previously left keyboard users with nothing. */ :focus-visible { outline: 2px solid var(--ss-seal-text); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Gold legibility ────────────────────────────────────────────────────────── Gold is the hardest colour in the palette to use safely: the shade that reads on navy is invisible on white, and vice versa. Tailwind generates `.bg-` and `.text-` from one palette entry, so the two uses are separated here. `!important` is deliberate and load-bearing. The Play CDN injects its stylesheet after this file, so equal-specificity rules would lose, and the markup these override says `text-white` on a gold fill — 2.7:1, the exact defect being corrected. ───────────────────────────────────────────────────────────────────────────── */ /* Gold TEXT sits on white: needs the dark bronze. 5.04:1. */ .text-yellow-500, .text-yellow-600, .text-amber-500, .text-amber-600 { color: var(--ss-seal-text) !important; } .text-yellow-700, .text-amber-700 { color: var(--ss-seal-800) !important; } /* Anything FILLED with brand gold carries navy type, never white — the logo's own pairing, and the only one that clears 4.5:1 on this hue. */ .bg-yellow-400, .bg-yellow-500, .bg-yellow-600, .bg-amber-400, .bg-amber-500, .bg-amber-600 { color: var(--ss-ink) !important; } /* ── The signature rule ───────────────────────────────────────────────────── */ .ss-rule { display: block; width: 2.25rem; height: 2px; background: var(--ss-seal); border: 0; border-radius: 2px; } .ss-rule--full { width: 100%; } /* Section heading: gold rule, then the label. Encodes hierarchy without a box. */ .ss-eyebrow { display: flex; align-items: center; gap: 0.625rem; font-family: var(--ss-font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-soft); } .ss-eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--ss-seal); border-radius: 2px; flex-shrink: 0; } /* ── Surfaces ─────────────────────────────────────────────────────────────── */ .ss-card { background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); } /* Reserved for cards that assert trust: a verified professional, a confirmed booking. The gold edge is the seal. */ .ss-card--sealed { border-left: 2px solid var(--ss-seal); } /* ── Public top bar ───────────────────────────────────────────────────────── */ #ssNav { position: sticky; top: 0; left: 0; width: 100%; z-index: 50; background: var(--ss-card); border-bottom: 1px solid var(--ss-line); box-shadow: none; color: var(--ss-ink); } /* Layout: the logo alone on the left, everything else in one cluster hard right. The previous bar used `justify-between` across three children, which stranded the menu in the middle of the viewport with slack on both sides. */ .ss-nav-inner { display: flex; align-items: center; gap: 1rem; height: 4rem; padding-left: 1.25rem; padding-right: 0.75rem; max-width: 1400px; margin: 0 auto; } .ss-nav-brand { flex-shrink: 0; margin-right: auto; } .ss-nav-brand img { height: 2.25rem; width: auto; display: block; } .ss-nav-cluster { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } /* Desktop nav item. The active state is the gold rule, not a fill. */ .ss-navlink { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--ss-ink); background: none; border: 0; cursor: pointer; transition: color .15s ease, background-color .15s ease; white-space: nowrap; } .ss-navlink:hover { background: var(--ss-ink-50); } .ss-navlink::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.125rem; height: 2px; border-radius: 2px; background: var(--ss-seal); transform: scaleX(0); transform-origin: left center; transition: transform .2s cubic-bezier(.32,.72,0,1); } .ss-navlink[aria-current="page"]::after, .ss-navlink.is-active::after { transform: scaleX(1); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5625rem 1rem; border-radius: 0.625rem; font-size: 0.875rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .ss-btn-primary { background: var(--ss-ink); color: #fff; } .ss-btn-primary:hover { background: var(--ss-ink-800); } /* Gold is a seal, not a call to action: outlined, never a filled slab. A large fill at this chroma is what made the old palette shout. */ .ss-btn-seal { background: transparent; color: var(--ss-seal-text); border-color: var(--ss-seal); } .ss-btn-seal:hover { background: var(--ss-seal-50); } .ss-btn-quiet { background: transparent; color: var(--ss-ink); border-color: var(--ss-line); } .ss-btn-quiet:hover { background: var(--ss-ink-50); } /* ── App shell: mobile tab bar ────────────────────────────────────────────── */ /* One bar for guests, clients and professionals. Same height, same position, same icon language, same active treatment; only the tab contents differ by role. That is what makes three separate areas feel like one application. `position: fixed` is restated here because css/style.css carries a global bare-element `nav { position: fixed; width: 100% }` rule written for the public header, which matches every