/* ==========================================================================
site.css — component system for pawel-lukaszewicz site pages.
Depends on (loaded BEFORE this file, in this order):
1. site/fonts/fonts.css (self-hosted faces)
2. brand/tokens.css (themes + type/space/shape tokens)
3. brand/lockup.css (wordmark component)
Rules of the house:
- ALL color via tokens; only the proven pairs:
text | text-muted | link | accent-strong on bg | surface
text | text-muted on accent-soft
--on-accent (#fff w tokens.css) on accent-strong
--accent is DECORATIVE ONLY (borders, rules, markers' rings)
- No JS assumed except brand/theme-switcher.js.
- Mobile-first; nothing may overflow at 360px.
Markup contracts (summary):
header.site-header > .site-header__inner
> a.site-header__home > .brand-lockup.brand-lockup--inline
> #theme-switcher
> nav.site-nav[aria-label] > a (+ [aria-current="page"])
a.skip-link (first element in , targets #main)
main#main > section.section (+ .section--soft band variant)
.section__inner, .section__title, .section__lead
.hero > .hero__inner > h1.hero__headline, p.hero__sub, .hero__actions
.cards > .card > h3.card__title, p.card__desc
ol.steps > li.steps__item > h3.steps__title, p.steps__desc
.trust > ul.trust__list > li
.service-group > h3.service-group__name, .service-group__desc,
ul.price-rows > li.price-row > .price-row__name + .price-row__price,
.service-group__cta
.contact-blocks > .contact-block > h2/h3, p, a.contact-block__link
footer.site-footer > .site-footer__inner > p.site-footer__line, nav…
========================================================================== */
/* --------------------------------------------------------------------------
1. Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
/* sticky-header offset for in-page anchors */
scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fs-m);
line-height: var(--lh-body);
/* only loaded faces — never synthesized bold/oblique */
font-synthesis: none;
-webkit-text-size-adjust: 100%;
overflow-wrap: break-word;
}
/* Manrope ships no 700: bold is the loaded 600 */
strong, b { font-weight: 600; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); transition: color 0.18s ease; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-s);
}
/* headings: serif voice, calm weights */
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 500;
line-height: var(--lh-heading);
margin: 0 0 var(--sp-3);
}
h1 {
font-family: var(--font-serif-display);
font-weight: 400;
font-size: clamp(var(--fs-xl), 4.5vw + 1rem, var(--fs-xxl));
line-height: var(--lh-tight);
}
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-ml); }
p { margin: 0 0 var(--sp-3); }
/* emphasis inside running text borrows the brand italic (Lora 400 italic) */
.prose em { font-family: var(--font-serif); font-style: italic; }
/* prose measure cap — apply to any running-text container */
.prose,
.prose p,
.prose ul,
.prose ol,
.section__lead {
max-width: 65ch;
}
.text-muted { color: var(--text-muted); }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
2. Skip link — … first in
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: var(--sp-2);
left: var(--sp-2);
z-index: 100;
padding: var(--sp-2) var(--sp-3);
background: var(--accent-strong);
color: var(--on-accent);
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-s);
text-decoration: none;
border-radius: var(--radius-s);
/* hidden until focused */
transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: none;
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
3. Page header — sticky surface bar; wraps to stacked rows on small screens
(no hamburger, no JS)
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--surface);
box-shadow: var(--shadow-soft);
}
.site-header__inner {
max-width: 70rem;
margin: 0 auto;
padding: var(--sp-2) var(--sp-3);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-2) var(--sp-3);
}
/* lockup link home */
.site-header__home {
text-decoration: none;
color: var(--text);
--lockup-fs: 1.375rem;
}
.site-header__home:hover .brand-lockup__name { color: var(--accent-strong); }
/* nav: a wrapped row of plain links */
.site-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-1) var(--sp-3);
font-size: var(--fs-s);
}
.site-nav a {
color: var(--text-muted);
text-decoration: none;
font-weight: 600;
padding: var(--sp-1) 0;
/* reserve the rule slot so current/hover does not shift layout */
border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent-strong); }
.site-nav a[aria-current="page"] {
color: var(--accent-strong);
border-bottom-color: var(--accent); /* decorative rule */
}
/* on narrow screens: lockup row, then switcher + nav as wrapped rows */
@media (max-width: 39.9375em) {
.site-header__inner {
flex-direction: column;
align-items: flex-start;
padding-block: var(--sp-2);
}
.site-header__home { --lockup-fs: 1.25rem; }
html { scroll-padding-top: 9rem; }
}
/* --------------------------------------------------------------------------
4. Theme switcher (dev/review tool; hidden at launch by removing markup)
-------------------------------------------------------------------------- */
#theme-switcher {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
#theme-switcher button {
font: inherit;
font-size: var(--fs-xs);
padding: var(--sp-1) var(--sp-3);
border: 1.5px solid var(--accent-strong);
border-radius: var(--radius-pill);
background: transparent;
color: var(--accent-strong);
cursor: pointer;
}
#theme-switcher button[aria-pressed="true"] {
background: var(--accent-strong);
color: var(--on-accent);
}
/* --------------------------------------------------------------------------
5. Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-s);
line-height: var(--lh-heading);
text-align: center;
text-decoration: none;
padding: 0.75rem 1.75rem;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease,
filter 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.btn-primary {
background: var(--accent-strong);
border-color: var(--accent-strong);
color: var(--on-accent);
}
/* hover: gentle lift + brightness + the warm raised shadow (hover-capable only,
so touch devices never get a stuck hover state) */
@media (hover: hover) {
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-raised); }
.btn-primary:hover,
.btn-secondary:hover { transform: translateY(-1px); }
}
/* press: settle back down for tactile feedback (all devices) */
.btn:active { transform: translateY(0) scale(0.985); }
.btn-secondary {
background: transparent;
border-color: var(--accent-strong);
color: var(--accent-strong);
}
.btn-secondary:hover {
border-color: var(--accent); /* decorative shift */
color: var(--accent-strong);
}
/* full-width tap targets on the smallest screens */
@media (max-width: 25em) {
.btn { display: block; width: 100%; }
}
/* --------------------------------------------------------------------------
6. Layout & section rhythm
-------------------------------------------------------------------------- */
main { display: block; }
.section { padding-block: var(--sp-5); }
.section__inner,
.hero__inner,
.site-footer__inner {
max-width: 70rem;
margin: 0 auto;
padding-inline: var(--sp-3);
}
/* tinted full-bleed band — only text/text-muted may sit directly on it.
--wash-soft keeps the accent-soft character with a soft top glow. */
.section--soft { background: var(--wash-soft); }
/* surface band variant (e.g. closing CTA) */
.section--surface { background: var(--surface); }
.section__title { margin-bottom: var(--sp-3); }
.section__lead {
color: var(--text-muted);
font-size: var(--fs-ml);
margin-bottom: var(--sp-4);
}
/* small uppercase kicker above section titles */
.kicker {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--sp-2);
}
/* horizontal rule in brand voice */
.rule {
border: 0;
border-top: 1px solid var(--accent-soft);
margin: 0;
}
@media (min-width: 55em) {
.section { padding-block: var(--sp-6); }
}
/* --------------------------------------------------------------------------
7. Hero
-------------------------------------------------------------------------- */
.hero {
/* signature candlelight wash ("naturalne światło") — same treatment the OG /
cover / brand-board hero use, brought to the live site. Settles into --bg
lower down, so the page continues seamlessly. */
background: var(--wash);
padding-block: var(--sp-5);
/* decorative hairline under the hero */
border-bottom: 1px solid var(--accent-soft);
}
.hero__headline {
max-width: 22ch;
margin-bottom: var(--sp-3);
}
.hero__sub {
max-width: 58ch;
font-size: var(--fs-ml);
color: var(--text-muted);
margin-bottom: var(--sp-4);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
}
/* quiet line next to/under the CTA (e.g. phone alternative) */
.hero__note {
font-size: var(--fs-s);
color: var(--text-muted);
margin: 0;
}
@media (min-width: 55em) {
.hero { padding-block: var(--sp-6); }
}
/* --------------------------------------------------------------------------
7b. Split media — text column + photo column (shared by the index hero,
the oferta hero, and the closing CTA band). Stacks text-then-photo on
mobile; 7:5 side-by-side from 55em. .photo-slot is the framed image
well (surface card language, so it reads as a card on any band).
-------------------------------------------------------------------------- */
.hero--compact { padding-block: var(--sp-5); }
.split-media {
display: grid;
gap: var(--sp-4);
align-items: stretch;
}
.hero--compact .hero__headline {
font-size: clamp(var(--fs-xl), 3.5vw + 0.75rem, 2.25rem);
}
.photo-slot {
min-height: 14rem;
background: var(--surface);
border-radius: var(--radius-m);
/* framed, layered photography — hairline edge + warm raised shadow so images
read as intentional objects on the wash, not floating rectangles */
border: var(--edge);
box-shadow: var(--shadow-raised);
overflow: hidden;
}
.photo-slot picture,
.photo-slot img {
display: block;
width: 100%;
height: 100%;
}
.photo-slot img { object-fit: cover; }
@media (min-width: 55em) {
.hero--compact { padding-block: var(--sp-5); }
.split-media {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--sp-5);
}
.photo-slot { min-height: 19rem; }
}
/* --------------------------------------------------------------------------
8. Cards grid — "is this for you" situations etc.
-------------------------------------------------------------------------- */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
gap: var(--sp-3);
align-items: stretch;
padding: 0;
margin: var(--sp-4) 0 0;
list-style: none;
}
.card {
background: var(--surface);
border-radius: var(--radius-m);
border: var(--edge);
box-shadow: var(--shadow-raised);
padding: var(--sp-4);
}
.card__title {
font-size: var(--fs-ml);
margin: 0 0 var(--sp-2);
}
.card__desc {
font-size: var(--fs-s);
color: var(--text-muted);
margin: 0;
}
/* cards that sit on the accent-soft band keep surface bg, so the proven
pairs still hold inside them — no extra rules needed */
/* --------------------------------------------------------------------------
9. Steps (1-2-3) — ordered list with numbered badges
-------------------------------------------------------------------------- */
.steps {
list-style: none;
counter-reset: step;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: var(--sp-4);
padding: 0;
margin: var(--sp-4) 0 0;
}
.steps__item {
counter-increment: step;
position: relative;
padding-top: 3.25rem;
}
.steps__item::before {
content: counter(step);
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--accent-strong);
color: var(--on-accent);
font-family: var(--font-serif);
font-size: var(--fs-ml);
line-height: 1;
}
.steps__title {
font-size: var(--fs-ml);
margin: 0 0 var(--sp-2);
}
.steps__desc {
font-size: var(--fs-s);
color: var(--text-muted);
margin: 0;
max-width: 45ch;
}
/* --------------------------------------------------------------------------
10. Trust strip — short credibility items on a soft band
(only text/text-muted on accent-soft; the marker ring uses --accent
decoratively)
-------------------------------------------------------------------------- */
.trust {
background: var(--wash-soft);
padding-block: var(--sp-4);
}
/* rating + credential lines side by side on wide screens */
.trust__inner {
display: grid;
gap: var(--sp-4);
}
@media (min-width: 48em) {
.trust__inner {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--sp-5);
}
}
/* the headline trust signal: ZnanyLekarz rating, in a surface card so the
proven pairs (accent-strong / link on surface) hold on the soft band */
.trust-rating {
background: var(--surface);
border-radius: var(--radius-m);
border: var(--edge);
box-shadow: var(--shadow-raised);
padding: var(--sp-3) var(--sp-4);
display: grid;
gap: var(--sp-1);
align-content: center;
justify-items: start;
text-align: left;
}
.trust-rating__top {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.trust-rating__score {
font-family: var(--font-serif-display);
font-size: var(--fs-xl);
line-height: 1;
color: var(--accent-strong);
}
/* SVG stars are decorative (var(--accent)); the score + label carry meaning */
.trust-rating__stars {
display: inline-flex;
gap: 0.1em;
color: var(--accent);
}
.trust-rating__stars svg {
width: 1.1rem;
height: 1.1rem;
fill: currentColor;
}
.trust-rating__label {
font-size: var(--fs-s);
color: var(--text-muted);
}
.trust-rating__label a {
color: var(--link);
font-weight: 600;
text-underline-offset: 0.15em;
}
.trust__list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: var(--sp-3) var(--sp-4);
padding: 0;
margin: 0;
}
.trust__list li {
position: relative;
padding-left: calc(var(--sp-3) + 0.5rem);
font-size: var(--fs-s);
color: var(--text);
max-width: 38ch;
}
/* decorative marker: small ring drawn with --accent */
.trust__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.4em;
width: 0.6em;
height: 0.6em;
border: 2px solid var(--accent);
border-radius: 50%;
}
/* --------------------------------------------------------------------------
11. Service groups & price rows (oferta)
-------------------------------------------------------------------------- */
.service-groups {
display: grid;
gap: var(--sp-4);
margin-top: var(--sp-4);
}
.service-group {
background: var(--surface);
border-radius: var(--radius-m);
border: var(--edge);
box-shadow: var(--shadow-raised);
padding: var(--sp-4);
}
.service-group__name {
font-size: var(--fs-l);
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--accent-soft);
}
.service-group__desc {
color: var(--text-muted);
font-size: var(--fs-s);
max-width: 65ch;
margin-bottom: var(--sp-3);
}
.price-rows {
list-style: none;
padding: 0;
margin: 0 0 var(--sp-4);
max-width: 38rem;
}
.price-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-1) var(--sp-3);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--accent-soft);
}
.price-row__name { font-size: var(--fs-s); }
.price-row__price {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-s);
color: var(--accent-strong);
white-space: nowrap;
}
.service-group__cta { margin: 0; }
/* two-up on wide screens */
@media (min-width: 55em) {
.service-groups { grid-template-columns: 1fr 1fr; align-items: start; }
}
/* --------------------------------------------------------------------------
12. Contact blocks
-------------------------------------------------------------------------- */
.contact-blocks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: var(--sp-3);
margin-top: var(--sp-4);
align-items: stretch;
}
.contact-block {
background: var(--surface);
border-radius: var(--radius-m);
border: var(--edge);
box-shadow: var(--shadow-raised);
padding: var(--sp-4);
}
.contact-block h2,
.contact-block h3 {
font-size: var(--fs-ml);
margin: 0 0 var(--sp-2);
}
.contact-block p {
font-size: var(--fs-s);
color: var(--text-muted);
max-width: 65ch;
}
.contact-block p:last-child { margin-bottom: 0; }
/* prominent contact line: phone / e-mail / address links */
.contact-block__link,
.contact-line a {
color: var(--link);
font-weight: 600;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
/* inline row of contact methods (also reusable outside cards) */
.contact-line {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
padding: 0;
margin: var(--sp-3) 0;
font-size: var(--fs-s);
}
/* .contact-blocks may also be a (kontakt: contact-method list) */
ul.contact-blocks {
list-style: none;
padding: 0;
margin-bottom: 0;
}
/* static map placeholder (kontakt) — a surface card with a decorative dashed
frame and an outbound OpenStreetMap link; NO embeds, NO third-party JS */
.map-slot {
display: grid;
place-items: center;
gap: var(--sp-1);
min-height: 13rem;
margin-top: var(--sp-4);
padding: var(--sp-4);
background: var(--surface);
border: 1.5px dashed var(--accent); /* decorative */
border-radius: var(--radius-m);
text-align: center;
}
.map-slot address {
font-style: normal;
font-family: var(--font-serif);
font-size: var(--fs-ml);
color: var(--text);
}
.map-slot p {
margin: 0;
font-size: var(--fs-s);
color: var(--text-muted);
}
.map-slot a {
font-weight: 600;
text-underline-offset: 0.15em;
}
/* address block (kontakt): „jak trafić” text + map in one column, the
gabinet-przez-drzwi photo („to tu przychodzisz”) beside on wide screens */
.place-layout {
display: grid;
gap: var(--sp-4);
align-items: start;
}
/* the grid gap takes over the map-slot's own top spacing */
.place-layout .map-slot { margin-top: 0; }
.place-photo {
margin: 0;
width: min(18rem, 100%);
justify-self: center;
}
.place-photo img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-m);
border: var(--edge);
box-shadow: var(--shadow-raised);
}
@media (min-width: 55em) {
.place-layout {
grid-template-columns: minmax(0, 1fr) 18rem;
grid-template-rows: auto 1fr;
gap: var(--sp-4) var(--sp-5);
}
.place-photo {
grid-column: 2;
grid-row: 1 / 3;
width: 100%;
justify-self: auto;
}
}
/* --------------------------------------------------------------------------
13. Closing CTA band
-------------------------------------------------------------------------- */
.cta-band {
background: var(--wash-soft);
padding-block: var(--sp-5);
}
.cta-band .section__title { max-width: 24ch; }
.cta-band p {
color: var(--text);
max-width: 65ch;
}
.cta-band .btn-primary { margin-top: var(--sp-2); }
/* links sitting DIRECTLY on the accent-soft bands keep the proven pair
(text on accent-soft) — var(--link) is only proven on bg/surface.
Links inside surface cards (.contact-block etc.) keep var(--link). */
.cta-band a:not(.btn),
.section--soft .prose a:not(.btn),
.section--soft .section__lead a:not(.btn) {
color: var(--text);
font-weight: 600;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
/* --------------------------------------------------------------------------
14. Footer
-------------------------------------------------------------------------- */
.site-footer {
background: var(--surface);
border-top: 1px solid var(--accent-soft);
margin-top: var(--sp-6);
padding-block: var(--sp-5);
font-size: var(--fs-s);
color: var(--text-muted);
}
.site-footer__inner {
display: grid;
gap: var(--sp-3);
}
.site-footer__line { margin: 0; }
.site-footer a {
color: var(--link);
font-weight: 600;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
.site-footer__nav {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
}
/* tiny print (e.g. legal note) — never below the 0.8125rem floor */
.site-footer__fineprint {
font-size: var(--fs-xs);
color: var(--text-muted);
margin: 0;
}
/* --------------------------------------------------------------------------
15. Long-form pages (o mnie, polityka prywatności)
-------------------------------------------------------------------------- */
.prose h2 {
font-size: var(--fs-l);
margin-top: var(--sp-5);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--accent-soft);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-4); }
.prose ul,
.prose ol { padding-left: 1.4em; margin: 0 0 var(--sp-3); }
.prose li { margin-bottom: var(--sp-1); }
/* pull-quote in the brand voice (motto etc.) */
.prose blockquote,
.pullquote {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--fs-l);
line-height: 1.4;
color: var(--accent-strong);
border-left: 3px solid var(--accent); /* decorative rule */
margin: var(--sp-4) 0;
padding-left: var(--sp-3);
max-width: 30ch;
}
/* about layout (o mnie): portrait column + running text.
.photo-slot is a placeholder — swap its contents for ![]()
when the
portrait is delivered; the frame stays.
Portrait rules are scoped to .about-layout so page-local .photo-slot
variants (e.g. index-v2 hero banner) do not inherit width/aspect-ratio. */
.about-layout {
display: grid;
gap: var(--sp-4);
align-items: start;
}
.about-layout .photo-slot {
margin: 0;
width: min(14rem, 70%);
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-soft);
border-radius: var(--radius-m);
}
@media (min-width: 55em) {
.about-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-5); }
.about-layout .photo-slot { width: 100%; }
/* media-right variant: prose in the wide column, photo on the right */
.about-layout--media-right { grid-template-columns: minmax(0, 1fr) 16rem; }
}
/* delivered photography inside about-layout slots: fill the frame, keep the
card language (token background, radius, soft shadow) */
.about-layout .photo-slot:has(img) {
border: var(--edge);
box-shadow: var(--shadow-raised);
overflow: hidden;
}
/* taller slot for the desk photo (intrinsic ~2:3) */
.about-layout .photo-slot--tall { aspect-ratio: 2 / 3; }
.about-layout .photo-slot picture,
.about-layout .photo-slot img {
display: block;
width: 100%;
height: 100%;
}
.about-layout .photo-slot img {
object-fit: cover; /* slot ratio differs slightly from intrinsic ratio */
border-radius: var(--radius-m);
}
/* --------------------------------------------------------------------------
17. Mobile sticky call bar — the primary action (a phone call) always within
reach on phones, where ~90% of traffic is. Progressive enhancement: with
no JS it simply stays visible; brand/*-reveal script hides it while the
hero (which already carries the CTA) is on screen and reveals it after.
Hidden entirely on ≥48em (desktop inline CTAs are enough).
-------------------------------------------------------------------------- */
.call-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40; /* above the sticky header (20) */
background: var(--surface);
border-top: var(--edge);
box-shadow: 0 -6px 24px color-mix(in srgb, var(--accent-strong) 12%, transparent);
padding: var(--sp-2) var(--sp-3);
/* clear the iOS/Android home indicator */
padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
transition: transform 0.25s ease, opacity 0.25s ease;
}
.call-bar__inner {
max-width: 34rem;
margin: 0 auto;
display: flex;
gap: var(--sp-2);
align-items: stretch;
}
/* override the ≤25em full-width .btn rule inside the bar */
.call-bar .btn {
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3rem; /* comfortable 48px+ touch target */
}
.call-bar__primary {
flex: 1 1 auto;
gap: 0.5rem;
padding-inline: var(--sp-3);
}
.call-bar__primary svg {
width: 1.15em;
height: 1.15em;
fill: currentColor;
flex: none;
}
.call-bar__secondary {
flex: 0 0 auto;
padding-inline: var(--sp-4);
}
/* JS-toggled pre-reveal / over-hero state */
.call-bar.is-hidden {
transform: translateY(130%);
opacity: 0;
pointer-events: none;
}
/* desktop: inline CTAs carry the page; no persistent bar */
@media (min-width: 48em) {
.call-bar { display: none; }
}
/* reserve space so the fixed bar never hides the last of the footer on phones */
@media (max-width: 47.9375em) {
body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}
/* --------------------------------------------------------------------------
18. Small-screen header tidy — divide the wordmark from the wrapped nav with a
hairline so the menu reads as an intentional row, not an orphaned link.
-------------------------------------------------------------------------- */
.site-nav a { transition: color 0.18s ease, border-color 0.18s ease; }
@media (max-width: 39.9375em) {
.site-nav {
width: 100%;
gap: var(--sp-2) var(--sp-4);
padding-top: var(--sp-2);
border-top: 1px solid var(--accent-soft);
}
}
/* --------------------------------------------------------------------------
19. Reduced motion — keep every added transition/lift out of the way for
users who ask for less movement (transforms off; state still changes).
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.btn,
.call-bar,
a { transition: none; }
.btn:active,
.btn-primary:hover,
.btn-secondary:hover { transform: none; }
.call-bar.is-hidden { transform: none; } /* fade only, no slide */
}
/* --------------------------------------------------------------------------
16. Print: hide chrome, keep content
-------------------------------------------------------------------------- */
@media print {
.site-header,
#theme-switcher,
.skip-link,
.call-bar,
.btn { display: none; }
/* deliberate exception to the tokens-only rule: print gets a plain
white/near-black reset (same #1a1a1a as brand-lockup--mono) so pages
print theme-independently; screen styles stay 100% token-driven */
body { background: #fff; color: #1a1a1a; }
}