/* Landing shell styles. Nothing here hard-codes a colour: every rule reads the custom properties that the BusinessCategory row writes onto . Change the palette in the admin and the whole page follows. A bespoke theme overrides these classes in its own {% block head %} — it does not edit this file. */ /* Every landing hides the scrollbar and kills the macOS rubber-band — the page should read like the business's own polished site, edge to edge. The overscroll canvas falls back to the body's --bg, so any bounce a browser still allows shows the landing's own colour. */ html { scrollbar-width: none; overscroll-behavior: none; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } .landing { background: var(--bg); color: var(--ink); } .landing .font-display, .landing h1, .landing h2, .landing h3 { font-family: var(--font-display); letter-spacing: -.02em; } .landing .surface { background: var(--surface); border: 0; border-radius: 1.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07); } .landing .surface-lg { border-radius: 2rem; } .landing .surface-hover { transition: box-shadow .22s ease, transform .22s ease; } .landing .surface-hover:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 18px 44px rgba(0, 0, 0, .11); transform: translateY(-2px); } .landing .pill { border-radius: 999px; } .landing .muted { color: var(--muted); } .landing .accent-text { color: var(--accent-text); } .landing .btn { border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.35rem; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } /* The thing you press is ink; the accent is a highlight, used once. */ .landing .btn-primary { background: var(--ink); color: var(--bg); } .landing .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); } .landing .btn-accent { background: var(--accent); color: var(--on-accent); } .landing .btn-accent:hover { filter: brightness(.94); } .landing .btn-soft { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } .landing .btn-soft:hover { transform: translateY(-1px); } .landing .field { border-radius: 999px; background: var(--bg); border: 0; padding: .75rem 1.15rem; width: 100%; font-size: .9375rem; color: var(--ink); outline: 2px solid transparent; transition: outline-color .16s ease; } .landing .field:focus { outline-color: var(--accent); } .landing textarea.field { border-radius: 1rem; } .landing .mono { font-family: "JetBrains Mono", ui-monospace, monospace; } /* Anything sitting on the accent fill uses --on-accent, never --ink: on dark palettes the ink is light and would vanish. */ .landing .on-accent { background: var(--accent); color: var(--on-accent); } .landing .kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em; opacity: .55; } /* --- vibes: one dial per category, set in the admin ---------------------- */ /* Bold: flat blocks, no lift, heavier type. */ .landing[data-vibe="bold"] .surface { box-shadow: none; border-radius: 1.25rem; } .landing[data-vibe="bold"] h1 { letter-spacing: -.04em; } /* Luxe: squarer corners, editorial restraint. */ .landing[data-vibe="luxe"] .surface { border-radius: .5rem; box-shadow: none; } .landing[data-vibe="luxe"] .btn { border-radius: .25rem; } .landing[data-vibe="luxe"] .field { border-radius: .25rem; } /* Utility: tight radii, visible structure. */ .landing[data-vibe="utility"] .surface { border-radius: .75rem; } .landing[data-vibe="utility"] .btn { border-radius: .5rem; } /* Clinical: airier cards, softer lift. */ .landing[data-vibe="clinical"] .surface { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .05); } /* ── primitives for bespoke themes ─────────────────────────────────────── */ /* Small shared vocabulary; each theme's unique CSS lives in its own file. */ @keyframes l-float { to { transform: translateY(-8px); } } .l-float { animation: l-float 6s ease-in-out infinite alternate; } @keyframes l-ping { 0% { transform: scale(.6); opacity: .8; } 70%, 100% { transform: scale(1.9); opacity: 0; } } .l-ping { transform-box: fill-box; transform-origin: center; animation: l-ping 2.6s ease-out infinite; } /* pathLength="1" on the path */ @keyframes l-draw { to { stroke-dashoffset: 0; } } .l-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: l-draw 1.4s ease .3s forwards; } @keyframes l-slide { to { transform: translate3d(-50%, 0, 0); } } .l-marquee { overflow: hidden; } .l-marquee > * { display: flex; width: max-content; animation: l-slide var(--speed, 30s) linear infinite; } .l-marquee > * > * { margin-right: 1.75rem; } /* mock product widgets (booking cards, punch cards, job cards...) */ .l-widget { background: var(--surface); border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 14px 36px rgba(0, 0, 0, .12); } .l-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .45rem .9rem; font-size: .8125rem; font-weight: 600; background: var(--bg); } .l-chip-on { background: var(--accent); color: var(--on-accent, var(--ink)); } .l-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--accent); } @media (prefers-reduced-motion: reduce) { .l-float, .l-ping, .l-marquee > * { animation: none; } .l-draw { animation: none; stroke-dashoffset: 0; } }