/* ========================================================================== ZionAmari — demo site engine One structure, five trade identities. Mobile first. Theme is selected by data-trade on . ========================================================================== */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; } img, svg { display: block; max-width: 100%; height: auto; } button, input, a, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } h1, h2, h3, p, ul, ol, figure, dl, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- shared scale ---------- */ :root { --gut: clamp(1.25rem, 5vw, 3.5rem); --stack: clamp(3rem, 9vw, 6.5rem); --max: 68rem; --radius: 0px; --bar-h: 4.25rem; --t-fast: 180ms cubic-bezier(.2,.7,.3,1); --t-mid: 320ms cubic-bezier(.2,.7,.3,1); --t-slow: 620ms cubic-bezier(.16,1,.3,1); --z-bar: 50; --z-sheet: 80; --z-light: 90; } /* ========================================================================== THEMES ========================================================================== */ /* --- 1. GARAGE / MOT — workshop: steel, hazard amber, spec-sheet ---------- */ [data-trade="garage"] { --bg: #101418; --bg-alt: #171D23; --surface: #1F262E; --fg: #EEF1F3; --fg-dim: #93A0AC; --accent: #FFB400; --accent-fg: #101418; --line: #2A333C; --radius: 2px; --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-util: "Oswald", sans-serif; --display-case: uppercase; --display-track: 0.01em; --display-weight: 600; --display-lh: 0.94; } /* --- 2. BARBER — heritage shopfront: jet, bone, brass -------------------- */ [data-trade="barber"] { --bg: #0B0B0C; --bg-alt: #131315; --surface: #1A1A1D; --fg: #EDE7DD; --fg-dim: #9A9186; --accent: #C9A227; --accent-fg: #0B0B0C; --line: #2A2926; --radius: 0px; --font-display: "Playfair Display", Georgia, serif; --font-body: "Karla", system-ui, sans-serif; --font-util: "Bebas Neue", Impact, sans-serif; --display-case: none; --display-track: -0.01em; --display-weight: 900; --display-lh: 1.0; } /* --- 3. SALON — drawn from Elysium's own shopfront: charcoal, fine letterspaced serif, brass. Not the pink-and-Playfair every salon site already uses. ---------------------------------------------------- */ [data-trade="salon"] { --bg: #F1EFEC; --bg-alt: #E7E3DE; --surface: #FFFFFF; --fg: #23262A; --fg-dim: #6E7378; --accent: #B08D57; --accent-fg: #1A1D20; --ink-deep: #1A1D20; --line: #D3CEC7; --radius: 0px; --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", system-ui, sans-serif; --font-util: "Jost", sans-serif; --display-case: uppercase; --display-track: 0.14em; --display-weight: 300; --display-lh: 1.06; } /* --- 4. PLUMBER / HEATING — van livery: navy, copper, gas yellow --------- */ [data-trade="plumber"] { --bg: #0E2233; --bg-alt: #0A1B29; --surface: #16334A; --fg: #F4F6F7; --fg-dim: #8FA6B8; --accent: #FFD400; --accent-fg: #0E2233; --line: #1E3D57; --radius: 4px; --font-display: "Archivo", Helvetica, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --font-util: "Archivo", sans-serif; --display-case: uppercase; --display-track: -0.02em; --display-weight: 900; --display-lh: 0.92; } /* --- 5. AESTHETICS CLINIC — precise, near-white, deep teal --------------- */ [data-trade="clinic"] { --bg: #FFFFFF; --bg-alt: #F3F6F6; --surface: #FFFFFF; --fg: #16191A; --fg-dim: #5F6B6C; --accent: #0F3B3A; --accent-fg: #FFFFFF; --line: #DCE3E3; --radius: 3px; --font-display: "Newsreader", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-util: "Inter", sans-serif; --display-case: none; --display-track: -0.02em; --display-weight: 300; --display-lh: 1.02; } /* ========================================================================== BASE ========================================================================== */ body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; padding-bottom: var(--bar-h); -webkit-font-smoothing: antialiased; } @media (min-width: 48rem) { body { padding-bottom: 0; } } body.is-locked { overflow: hidden; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); letter-spacing: var(--display-track); line-height: var(--display-lh); } .eyebrow { font-family: var(--font-util); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); } [data-trade="barber"] .eyebrow { font-size: 1.0625rem; letter-spacing: .22em; } /* ========================================================================== DEMO NOTICE — must never be mistaken for the real site ========================================================================== */ .demo-note { background: var(--accent); color: var(--accent-fg); font-family: var(--font-util); font-size: .8125rem; letter-spacing: .04em; text-align: center; padding: .6rem var(--gut); position: relative; z-index: 40; } .demo-note strong { font-weight: 700; } .demo-note a { text-decoration: underline; text-underline-offset: .18em; } /* ========================================================================== HERO ========================================================================== */ .hero { padding-block: clamp(3rem, 11vw, 7rem) clamp(2rem, 7vw, 4rem); position: relative; } /* photo hero: full-bleed image behind the type */ .hero--photo { min-height: min(92svh, 46rem); display: flex; align-items: flex-end; padding-block: clamp(4rem, 18vw, 9rem) clamp(2.5rem, 8vw, 4.5rem); color: #F6F4F1; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: -8% 0 0 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; /* Heavier through the middle band than a standard top-and-tail gradient: the type sits over the busiest part of most interior photos. */ background: linear-gradient(178deg, rgba(20,17,18,.66) 0%, rgba(20,17,18,.44) 30%, rgba(20,17,18,.62) 62%, rgba(20,17,18,.92) 100%); } .hero--photo .hero__tag { color: #E4DFD8; } .hero--photo .eyebrow { color: #CFC7BC; } .hero--photo .cred { border-top-color: rgba(255,255,255,.28); } .hero--photo .cred__meta{ color: #D6D0C7; } .hero--photo .status { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); color: #F6F4F1; } .hero__name { font-size: clamp(2.75rem, 13vw, 6.5rem); margin-block: .35em .3em; max-width: 14ch; } /* Wide tracking eats horizontal room fast. Long words like MANCHESTER will run off a 360px screen at 12vw, so the salon name is sized and tracked to fit. */ [data-trade="salon"] .hero__name { font-size: clamp(2.25rem, 10vw, 5.5rem); letter-spacing: .09em; max-width: 11ch; } .hero__tag { color: var(--fg-dim); font-size: clamp(1.0625rem, 2.4vw, 1.3125rem); max-width: 42ch; } /* the credential line — their real Google rating, treated as type not a widget */ .cred { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin-top: clamp(1.75rem, 5vw, 2.75rem); padding-top: 1.25rem; border-top: 1px solid var(--line); } .cred__score { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem,7vw,3rem); line-height: 1; } .cred__stars { color: var(--accent); letter-spacing: .1em; font-size: 1.0625rem; } .cred__meta { color: var(--fg-dim); font-size: .9375rem; } [data-trade="salon"] .cred__score { letter-spacing: .04em; } /* ========================================================================== LIVE STATUS — knows what day and time it is ========================================================================== */ .status { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-util); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; padding: .5rem .875rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt); } .status__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fg-dim); flex: none; } .status.is-open .status__dot { background: #35C46B; box-shadow: 0 0 0 0 rgba(53,196,107,.7); animation: pulse 2.4s infinite; } .status.is-closed .status__dot { background: #E0544E; } @keyframes pulse { 70% { box-shadow: 0 0 0 .55rem rgba(53,196,107,0); } 100% { box-shadow: 0 0 0 0 rgba(53,196,107,0); } } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.875rem; padding: .95rem 1.5rem; font-family: var(--font-util); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .btn--primary { background: var(--accent); color: var(--accent-fg); } .btn--ghost { background: transparent; color: inherit; border-color: currentColor; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.985); } .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; } [data-trade="clinic"] .btn { text-transform: none; letter-spacing: .01em; font-weight: 500; } [data-trade="barber"] .btn { font-size: 1.125rem; letter-spacing: .12em; } [data-trade="salon"] .btn { letter-spacing: .14em; font-weight: 400; font-size: .8125rem; padding: 1.05rem 1.9rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* ========================================================================== SECTIONS ========================================================================== */ .sec { padding-block: var(--stack); border-top: 1px solid var(--line); } .sec--alt { background: var(--bg-alt); } .sec--flush { border-top: 0; } .sec__head { margin-bottom: clamp(1.75rem, 5vw, 3rem); } .sec__title { font-size: clamp(1.75rem, 5.5vw, 2.75rem); margin-top: .35em; /* Centred, and balanced so a two-line heading splits evenly instead of leaving one orphan word on the second line. */ text-align: center; text-wrap: balance; } /* The title now carries the section on its own, so it has no eyebrow to clear. */ .sec__title.sec__head { margin-top: 0; } [data-trade="salon"] .sec__title { font-size: clamp(1.5rem, 5vw, 2.25rem); } /* --- services ------------------------------------------------------------ */ .svc { display: grid; gap: 0; } .svc__row { display: flex; align-items: baseline; gap: .35rem 1rem; flex-wrap: wrap; padding-block: 1.125rem; border-bottom: 1px solid var(--line); } .svc__name { font-weight: 600; } [data-trade="salon"] .svc__name { font-weight: 400; letter-spacing: .02em; } .svc__note { color: var(--fg-dim); font-size: .9375rem; } .svc__dots { display: none; } @media (min-width: 32rem) { .svc__row { flex-wrap: nowrap; } .svc__dots { display: block; flex: 1 1 auto; border-bottom: 1px dotted var(--line); transform: translateY(-.25rem); } .svc__note { white-space: nowrap; } } [data-trade="garage"] .svc__row { border-bottom-style: dashed; } [data-trade="garage"] .svc__note { font-family: var(--font-util); letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; } @media (min-width: 44rem) { [data-trade="salon"] .svc, [data-trade="clinic"] .svc { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem,5vw,4rem); } } /* --- gallery: swipe, snap, tap to enlarge -------------------------------- */ .gal { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: var(--gut); padding-bottom: .5rem; } .gal::-webkit-scrollbar { display: none; } .gal__item { flex: 0 0 auto; width: min(76vw, 22rem); aspect-ratio: 4 / 5; scroll-snap-align: center; overflow: hidden; border-radius: var(--radius); background: var(--bg-alt); padding: 0; position: relative; } .gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .gal__item:hover img, .gal__item:focus-visible img { transform: scale(1.04); } .gal__dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.25rem; } .gal__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--line); padding: 0; transition: background var(--t-fast), transform var(--t-fast); } .gal__dot.is-on { background: var(--accent); transform: scale(1.5); } /* lightbox */ .light { position: fixed; inset: 0; z-index: var(--z-light); background: rgba(14,12,13,.94); display: grid; place-items: center; padding: var(--gut); opacity: 0; visibility: hidden; transition: opacity var(--t-mid), visibility var(--t-mid); } .light.is-on { opacity: 1; visibility: visible; } .light img { max-height: 82svh; width: auto; border-radius: var(--radius); } .light__close { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; color: #fff; font-size: 1.5rem; line-height: 1; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; } /* --- quotes -------------------------------------------------------------- */ .quotes { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); } @media (min-width: 44rem) { .quotes { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } } .quote { border-left: 2px solid var(--accent); padding-left: 1.25rem; } .quote__text { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.28; font-size: clamp(1.125rem, 2.6vw, 1.375rem); } [data-trade="garage"] .quote__text, [data-trade="plumber"] .quote__text { text-transform: none; font-size: clamp(1.0625rem, 2.3vw, 1.25rem); } [data-trade="salon"] .quote__text { text-transform: none; letter-spacing: 0; font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.34; } .quote__by { color: var(--fg-dim); font-size: .875rem; margin-top: .75rem; } [data-trade="clinic"] .quote { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.25rem; } /* --- their other links ---------------------------------------------------- */ .links { display: flex; flex-wrap: wrap; gap: .625rem; } .links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .625rem 1.125rem; text-decoration: none; font-size: .9375rem; border: 1px solid var(--line); border-radius: 999px; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .links a:hover { border-color: var(--accent); transform: translateY(-2px); } [data-trade="salon"] .links, [data-trade="barber"] .links, [data-trade="clinic"] .links { justify-content: center; } /* --- centred layout ------------------------------------------------------- Salon, barber and clinic are symmetrical, shopfront-sign designs, so the booking and address blocks sit centred under their headings. Garage and plumber stay left-aligned: a spec sheet reads left, and centring it would fight the trade. */ [data-trade="salon"] .sec--book .wrap, [data-trade="barber"] .sec--book .wrap, [data-trade="clinic"] .sec--book .wrap { text-align: center; } [data-trade="salon"] .sec--find .addr, [data-trade="barber"] .sec--find .addr, [data-trade="clinic"] .sec--find .addr { text-align: center; } [data-trade="salon"] .sec--find .hours, [data-trade="barber"] .sec--find .hours, [data-trade="clinic"] .sec--find .hours { max-width: 22rem; margin-inline: auto; } [data-trade="salon"] .sec--find .hours caption, [data-trade="barber"] .sec--find .hours caption, [data-trade="clinic"] .sec--find .hours caption { text-align: center !important; } /* --- find us ------------------------------------------------------------- */ .find { display: grid; gap: clamp(2rem, 6vw, 3.5rem); } @media (min-width: 48rem) { .find { grid-template-columns: 1fr 1fr; } } .hours { width: 100%; border-collapse: collapse; } .hours th, .hours td { text-align: left; padding-block: .7rem; border-bottom: 1px solid var(--line); font-size: .9375rem; } .hours th { font-weight: 600; width: 9rem; } .hours td { color: var(--fg-dim); } .hours tr[data-today] th, .hours tr[data-today] td { color: var(--fg); } .hours tr[data-today] th::after { content: "today"; font-family: var(--font-util); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-left: .6rem; vertical-align: .12em; } .addr { font-style: normal; line-height: 1.75; } .addr a { text-decoration: underline; text-underline-offset: .2em; } /* ========================================================================== BOOKING SHEET — the interactive bit ========================================================================== */ .sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; visibility: hidden; } .sheet.is-on { visibility: visible; } .sheet__scrim { position: absolute; inset: 0; background: rgba(14,12,13,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-mid); } .sheet.is-on .sheet__scrim { opacity: 1; } .sheet__panel { position: relative; width: min(100%, 34rem); max-height: 90svh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--fg); border-radius: 1.25rem 1.25rem 0 0; padding: 1.5rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform var(--t-slow); box-shadow: 0 -1.5rem 3rem rgba(0,0,0,.28); } .sheet.is-on .sheet__panel { transform: none; } @media (min-width: 34rem) { .sheet { align-items: center; } .sheet__panel { border-radius: 1rem; } } .sheet__grab { width: 2.5rem; height: .25rem; border-radius: 999px; background: var(--line); margin: 0 auto 1.25rem; } .sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .sheet__title { font-size: 1.25rem; } .sheet__close { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); font-size: 1.25rem; line-height: 1; flex: none; } .steps { display: flex; gap: .35rem; margin-bottom: 1.5rem; } .steps__bar { flex: 1; height: .1875rem; background: var(--line); border-radius: 999px; overflow: hidden; } .steps__bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t-mid); } .steps__bar.is-done span { width: 100%; } .step { display: none; } .step.is-on { display: block; animation: stepIn var(--t-mid) both; } @keyframes stepIn { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } } .step__q { font-family: var(--font-util); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: .875rem; } .opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; min-height: 3rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .5rem; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .opt:hover { border-color: var(--accent); } .opt:active { transform: scale(.99); } .opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .opt__sub { color: var(--fg-dim); font-size: .875rem; } .days { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .5rem; margin-bottom: .5rem; } .days::-webkit-scrollbar { display: none; } .day { flex: 0 0 auto; width: 3.75rem; min-height: 4.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--t-fast), background var(--t-fast); } .day__dow { font-family: var(--font-util); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); } .day__num { font-size: 1.125rem; font-weight: 600; } .day.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .day[disabled] { opacity: .32; } .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: .5rem; } .slot { min-height: 2.875rem; border: 1px solid var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), background var(--t-fast); } .slot:hover { border-color: var(--accent); } .slot.is-on { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); } .slot[disabled] { opacity: .3; cursor: not-allowed; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: .875rem; margin-bottom: .375rem; color: var(--fg-dim); } .field input { width: 100%; min-height: 3rem; padding: .75rem 1rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); } .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .sheet__actions { display: flex; gap: .625rem; margin-top: 1.5rem; } .sheet__actions .btn { flex: 1; } .done { text-align: center; padding-block: 1rem 1.5rem; } .done__tick { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-size: 1.75rem; animation: pop var(--t-slow) both; } @keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } .done__what { color: var(--fg-dim); margin-top: .5rem; } .sheet__demo { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--line); color: var(--fg-dim); font-size: .8125rem; line-height: 1.5; } /* ========================================================================== STICKY BAR — thumb reach, always there ========================================================================== */ .callbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-bar); display: grid; grid-template-columns: 1fr 1fr; min-height: var(--bar-h); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--bg-alt); } .callbar a, .callbar button { display: flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; font-family: var(--font-util); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .9375rem; } .callbar > :first-child { background: var(--accent); color: var(--accent-fg); } @media (min-width: 48rem) { .callbar { display: none; } } /* ========================================================================== FOOTER — the actual sales moment ========================================================================== */ .foot { padding-block: var(--stack); border-top: 1px solid var(--line); background: var(--bg-alt); } /* Marcus writing to the owner, in his own words. The opening line carries the weight; the rest is a plain message, so it stays at reading size. */ .foot__lead { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); text-transform: var(--display-case); line-height: 1.2; font-size: clamp(1.375rem, 4vw, 2rem); margin-bottom: 1.25rem; } [data-trade="salon"] .foot__lead, [data-trade="clinic"] .foot__lead { text-transform: none; letter-spacing: 0; line-height: 1.3; } .foot__p { margin-bottom: 1rem; max-width: 46ch; } .foot__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .foot__sign { color: var(--fg-dim); font-size: .875rem; margin-top: 1.5rem; } /* Match the centred treatment used on the symmetrical themes. */ [data-trade="salon"] .foot .wrap, [data-trade="barber"] .foot .wrap, [data-trade="clinic"] .foot .wrap { text-align: center; } [data-trade="salon"] .foot__p, [data-trade="barber"] .foot__p, [data-trade="clinic"] .foot__p { margin-inline: auto; } [data-trade="salon"] .foot__actions, [data-trade="barber"] .foot__actions, [data-trade="clinic"] .foot__actions { justify-content: center; } /* ========================================================================== ACCESSIBILITY + MOTION ========================================================================== */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--gut); top: .5rem; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: .75rem 1rem; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Content is visible by default. The reveal only arms itself once JS has run, so a blocked or failed script can never leave a prospect looking at a blank page. */ .js .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity var(--t-slow), transform var(--t-slow); } .js .reveal.is-in { opacity: 1; transform: none; } .js .reveal.is-in .stagger > * { animation: rise var(--t-slow) both; } .js .reveal.is-in .stagger > :nth-child(2) { animation-delay: 60ms; } .js .reveal.is-in .stagger > :nth-child(3) { animation-delay: 120ms; } .js .reveal.is-in .stagger > :nth-child(4) { animation-delay: 180ms; } @keyframes rise { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } .hero__media { transform: none !important; } }