/* ============================================================ FORM TO FUNCTION FITNESS — Global stylesheet Theme: simple / clean. Motion: slow fade-in-up. ------------------------------------------------------------ Brand colours live in the :root block below. Change the two accent values there to re-skin the entire site. ============================================================ */ /* ---------- 1. TOKENS -------------------------------------- */ /* The site is DARK BY DEFAULT: :root carries the dark palette and needs no attribute. Choosing light mode sets data-theme="light" on , which overrides the surface/text tokens below. Tokens are semantic, not literal — `--heading` is heading text, `--invert-bg` is a deliberately contrasting band (hero, footer, the philosophy section). Rules reference these, never raw hex, so both themes fall out of one set of declarations. */ :root{ color-scheme: dark; /* Surfaces */ --bg: #0E110E; /* page */ --bg-alt: #141813; /* alternating section */ --surface: #181D19; /* cards, inputs, panels */ --surface-2: #131813; /* inset panels, map wells */ --line: #262D27; --line-strong: #333C35; /* card hover border */ /* Text */ --heading: #F1F4F1; /* 17.2:1 on --bg */ --body: #B4BEB6; /* 9.9:1 on --bg */ --muted: #8B948C; /* 6.1:1 on --bg */ /* Accent */ --accent: #6FCF97; /* links, icons, eyebrows; 10:1 on --bg */ --accent-dark: #8FDCB0; /* hover — lighter on dark */ --accent-fill: #5FC287; /* button fill */ --on-accent: #08110B; /* text on the fill; 8.7:1 */ --accent-light: #7FD1A4; /* accent on an inverted band */ --accent-soft: rgba(111, 207, 151, .13); --accent-soft-2: rgba(111, 207, 151, .22); /* Inverted bands — hero, page hero, footer, .section--ink */ --invert-bg: #1A201B; --invert-heading: #FFFFFF; --invert-body: #B7C0B8; --invert-muted: #8D958E; --invert-line: rgba(255,255,255,.10); /* Call-to-action band */ --cta-bg: #1B5C34; --cta-fg: #EAF6EE; --cta-muted: #BFE3CE; /* Contrast card: lifts away from the page in dark, drops to near-black in light */ --card-invert-bg: #2A3D33; /* 1.48:1 against a neighbouring card */ --card-invert-border: rgba(111, 207, 151, .38); /* Chrome */ --header-bg: rgba(14, 17, 14, .92); --hero-veil-1: rgba(9, 12, 9, .96); --hero-veil-2: rgba(9, 12, 9, .84); --hero-veil-3: rgba(9, 12, 9, .58); --star: #FBBC05; /* Google gold — same in both themes */ --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.34); --shadow-md: 0 2px 6px rgba(0,0,0,.44), 0 16px 40px rgba(0,0,0,.42); /* Type */ --font-display: "Barlow Condensed", "Oswald", Impact, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Layout */ --wrap: 1140px; --gut: 24px; --radius: 10px; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-slide: cubic-bezier(.16,.72,.26,1); } /* ---------- LIGHT THEME (opt-in via the header toggle) ----- */ :root[data-theme="light"]{ color-scheme: light; --bg: #FFFFFF; --bg-alt: #F3F6F3; --surface: #FFFFFF; --surface-2: #F3F6F3; --line: #E3E8E4; --line-strong: #D2D9D3; --heading: #121512; --body: #4C554F; --muted: #67716B; --accent: #2C7A43; --accent-dark: #1E5E36; --accent-fill: #2C7A43; --on-accent: #FFFFFF; --accent-light: #7FD1A4; --accent-soft: rgba(44, 122, 67, .10); --accent-soft-2: rgba(44, 122, 67, .18); --invert-bg: #121512; --invert-heading: #FFFFFF; --invert-body: #B7C0B8; --invert-muted: #8D958E; --invert-line: rgba(255,255,255,.10); --cta-bg: #2C7A43; --cta-fg: #FFFFFF; --cta-muted: #D9F0E1; --card-invert-bg: #121512; --card-invert-border: #121512; --header-bg: rgba(255, 255, 255, .94); --hero-veil-1: rgba(18, 21, 18, .96); --hero-veil-2: rgba(18, 21, 18, .82); --hero-veil-3: rgba(18, 21, 18, .55); --shadow-sm: 0 1px 2px rgba(18,21,18,.06), 0 4px 12px rgba(18,21,18,.05); --shadow-md: 0 2px 6px rgba(18,21,18,.07), 0 16px 40px rgba(18,21,18,.09); } /* Theme swap should feel instant, not animated into place. */ @media (prefers-reduced-motion: no-preference){ body, .site-header, .card, .price-card, .review-card, .form-card, .faq details, .price-table, .svc__panel{ transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } } /* ---------- 2. RESET / BASE -------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); font-size:17px; line-height:1.7; color:var(--body); background:var(--bg); -webkit-font-smoothing:antialiased; } img,svg{ max-width:100%; height:auto; display:block; } a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--accent-dark); } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--heading); line-height:1.08; margin:0 0 .5em; font-weight:600; letter-spacing:.01em; } h1{ font-size:clamp(2.6rem, 6vw, 4.4rem); text-transform:uppercase; } h2{ font-size:clamp(2rem, 4vw, 2.9rem); text-transform:uppercase; } h3{ font-size:1.4rem; } p{ margin:0 0 1.1em; } ul{ margin:0 0 1.1em; padding-left:1.15em; } li{ margin-bottom:.4em; } :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } /* Skip link */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--invert-bg); color:var(--invert-heading); padding:12px 20px; border-radius:0 0 6px 0; } .skip-link:focus{ left:0; color:var(--invert-heading); } /* ---------- 3. LAYOUT HELPERS ------------------------------ */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); } .section{ padding:clamp(64px, 9vw, 110px) 0; } .section--alt{ background:var(--bg-alt); } .section--ink{ background:var(--invert-bg); color:var(--invert-body); } .section--ink h2,.section--ink h3{ color:var(--invert-heading); } .section-head{ max-width:720px; margin-bottom:clamp(36px,5vw,56px); } .section-head.center{ margin-inline:auto; text-align:center; } .eyebrow{ display:inline-block; font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .section--ink .eyebrow{ color:var(--accent-light); } .eyebrow--on-accent{ color:var(--cta-muted); } .lede{ font-size:1.1rem; color:var(--body); } .section--ink .lede{ color:var(--invert-body); } .grid{ display:grid; gap:28px; } /* min(Npx,100%) lets a track shrink below its floor when the container is narrower than it — without this the track stays Npx wide and its content is clipped on very narrow screens. */ .grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); } .grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); } .grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); } /* ---------- 4. BUTTONS ------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; padding:15px 30px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s; } .btn:hover{ transform:translateY(-2px); } .btn--primary{ background:var(--accent-fill); color:var(--on-accent); box-shadow:var(--shadow-sm); } .btn--primary:hover{ background:var(--accent-dark); color:var(--on-accent); box-shadow:var(--shadow-md); } .btn--outline{ border-color:var(--heading); color:var(--heading); background:transparent; } .btn--outline:hover{ background:var(--heading); color:var(--bg); } /* --ghost only ever sits on an always-dark band (hero, CTA), so it stays white-based in both themes */ .btn--ghost{ border-color:rgba(255,255,255,.45); color:#fff; background:transparent; } .btn--ghost:hover{ background:#fff; color:#121512; border-color:#fff; } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; } /* ---------- 5. HEADER / NAV -------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:16px; } .brand{ display:flex; align-items:center; gap:12px; color:var(--heading); } .brand:hover{ color:var(--heading); } .brand__mark{ width:42px; height:42px; flex:none; } .brand__name{ font-family:var(--font-display); font-size:1.32rem; line-height:1; text-transform:uppercase; letter-spacing:.02em; } .brand__tag{ display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.19em; color:var(--muted); text-transform:uppercase; margin-top:3px; } .nav{ display:flex; align-items:center; gap:6px; } .nav a{ color:var(--heading); font-size:.9rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; border-radius:6px; transition:color .2s, background .2s; } .nav a:hover{ color:var(--accent); background:var(--accent-soft); } .nav a[aria-current="page"]{ color:var(--accent); } .nav .btn{ margin-left:10px; padding:12px 22px; } .nav .btn:hover{ background:var(--accent-dark); color:var(--on-accent); } /* Theme toggle — sun in dark mode, moon in light mode */ .theme-toggle{ width:42px; height:42px; flex:none; margin-left:4px; display:grid; place-items:center; background:transparent; color:var(--heading); border:1px solid var(--line); border-radius:50%; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .theme-toggle svg{ width:19px; height:19px; } .theme-toggle:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); } /* Each icon shows only in the theme it offers to switch away from. */ .theme-toggle .icon-sun{ display:block; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; } @media (max-width:900px){ /* Keep the toggle in the top bar rather than inside the collapsed menu. */ .theme-toggle{ margin-left:auto; margin-right:2px; } } .nav-toggle{ display:none; background:none; border:0; padding:10px; cursor:pointer; color:var(--heading); } .nav-toggle svg{ width:26px; height:26px; } @media (max-width:900px){ .nav-toggle{ display:block; } .nav{ position:absolute; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px; background:var(--bg); border-bottom:1px solid var(--line); padding:14px var(--gut) 24px; box-shadow:var(--shadow-md); display:none; } .nav.is-open{ display:flex; } .nav a{ padding:14px 8px; font-size:1rem; } .nav .btn{ margin:8px 0 0; } } /* ---------- 6. HERO ---------------------------------------- */ .hero{ position:relative; overflow:hidden; background:var(--invert-bg); color:var(--invert-body); } .hero__bg{ position:absolute; inset:0; background: linear-gradient(105deg, var(--hero-veil-1) 0%, var(--hero-veil-2) 46%, var(--hero-veil-3) 100%), url("../img/hero.svg") center/cover no-repeat; } .hero__inner{ position:relative; padding:clamp(84px,13vw,150px) 0; max-width:760px; } .hero h1{ color:var(--invert-heading); margin-bottom:.35em; } .hero h1 .hl{ color:var(--accent-light); } /* Two-part H1: display line + descriptive sub-line (SEO + context) */ .h1-lead{ display:block; } .h1-sub{ display:block; margin-top:.6em; font-family:var(--font-body); font-size:clamp(.85rem, 1.5vw, 1rem); font-weight:600; letter-spacing:.15em; text-transform:uppercase; line-height:1.55; color:var(--accent); } .hero .h1-sub, .page-hero .h1-sub{ color:var(--accent-light); } .hero__sub{ font-size:1.16rem; color:var(--invert-body); max-width:600px; margin-bottom:2em; } .hero__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:38px; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; color:var(--invert-muted); } .hero__meta span{ display:flex; align-items:center; gap:8px; } .hero__meta span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-light); flex:none; } /* Compact hero for interior pages */ .page-hero{ background:var(--invert-bg); color:var(--invert-body); padding:clamp(58px,8vw,92px) 0; text-align:center; } .page-hero h1{ color:var(--invert-heading); font-size:clamp(2.2rem,5vw,3.4rem); } .page-hero p{ max-width:620px; margin-inline:auto; color:var(--invert-body); } /* ---------- 7. CARDS --------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; height:100%; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); } .card__icon{ width:52px; height:52px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:20px; color:var(--accent); } .card__icon svg{ width:26px; height:26px; } .card h3{ margin-bottom:.45em; } .card p:last-child{ margin-bottom:0; } .card__price{ display:inline-block; margin-top:6px; font-family:var(--font-display); font-size:1.5rem; color:var(--heading); } .card__price small{ font-family:var(--font-body); font-size:.8rem; color:var(--muted); font-weight:500; letter-spacing:.04em; } .card__meta{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding-top:16px; margin-top:20px; border-top:1px solid var(--line); } /* Service detail rows (Services page) */ .svc{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; padding:44px 0; border-top:1px solid var(--line); } .svc:first-of-type{ border-top:0; padding-top:0; } .svc__panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:30px; } .svc__panel dl{ margin:0; } .svc__panel dt{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .svc__panel dd{ margin:2px 0 18px; font-family:var(--font-display); font-size:1.55rem; color:var(--heading); } .svc__panel dd:last-of-type{ margin-bottom:0; } @media (max-width:820px){ .svc{ grid-template-columns:1fr; gap:26px; } } /* ---------- 7b. FIGURES / GALLERY -------------------------- */ .figure{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); border:1px solid var(--line); } .figure img{ width:100%; height:100%; object-fit:cover; display:block; } .figure--portrait{ aspect-ratio:9/11; } .figure--wide{ aspect-ratio:4/3; } .gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:18px; } .gallery .figure{ aspect-ratio:4/3; } @media (max-width:560px){ .gallery{ grid-template-columns:1fr 1fr; gap:10px; } } /* Gallery photos open the full-screen viewer (main.js §7) */ .gallery__link{ position:relative; display:block; height:100%; cursor:zoom-in; } .gallery__link img{ transition:transform .6s var(--ease-slide); } .gallery__link:hover img, .gallery__link:focus-visible img{ transform:scale(1.04); } .gallery__link:focus-visible{ outline:3px solid var(--accent-light); outline-offset:-3px; } .gallery__zoom{ position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(8,11,8,.6); opacity:0; transition:opacity .25s; } .gallery__zoom svg{ width:16px; height:16px; } .gallery__link:hover .gallery__zoom, .gallery__link:focus-visible .gallery__zoom{ opacity:1; } @media (hover:none){ .gallery__zoom{ opacity:.85; } } .gallery__hint{ margin:18px 0 0; text-align:center; font-size:.9rem; color:var(--muted); } .no-js .gallery__hint{ display:none; } /* ---------- 7c. PHOTO CAROUSEL / FULL-SCREEN VIEWER -------- */ /* Round overlay buttons shared by the carousel and the viewer. They sit on photos, so they keep a dark glass look in both themes. */ .round-btn{ width:42px; height:42px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(8,11,8,.55); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .2s, border-color .2s; } .round-btn:hover{ background:rgba(8,11,8,.82); border-color:rgba(255,255,255,.45); } .round-btn:focus-visible{ outline:3px solid var(--accent-light); outline-offset:2px; } .round-btn svg{ width:20px; height:20px; } .slider{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line); } .slider__track{ display:flex; height:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; } .slider__track::-webkit-scrollbar{ display:none; } .slider__track:focus-visible{ outline:3px solid var(--accent-light); outline-offset:-3px; } .slider__slide{ flex:0 0 100%; height:100%; scroll-snap-align:start; display:block; cursor:zoom-in; } .slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; } .slider .round-btn{ position:absolute; } .slider__prev{ left:12px; top:50%; transform:translateY(-50%); } .slider__next{ right:12px; top:50%; transform:translateY(-50%); } .slider__full{ top:12px; right:12px; } .slider__dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; } .slider__dot{ /* 8px dot inside a 20px tap target */ width:20px; height:20px; padding:0; border:6px solid transparent; border-radius:10px; background:rgba(255,255,255,.5); background-clip:padding-box; cursor:pointer; transition:width .3s var(--ease-slide), background-color .3s; } .slider__dot[aria-current="true"]{ width:34px; background-color:var(--accent-light); } .no-js .slider .round-btn, .no-js .slider__dots{ display:none; } .lightbox{ width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:rgba(5,7,5,.96); color:#fff; } .lightbox::backdrop{ background:rgba(5,7,5,.9); } .lightbox[open]{ display:block; } .lightbox__stage{ box-sizing:border-box; width:100%; height:100%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:70px 76px 40px; touch-action:pan-y pinch-zoom; } .lightbox__img{ display:block; max-width:100%; max-height:calc(100% - 44px); min-height:0; object-fit:contain; border-radius:6px; user-select:none; } .lightbox__cap{ max-width:62ch; text-align:center; font-size:.92rem; color:rgba(255,255,255,.78); } .lightbox__count{ position:absolute; top:22px; left:22px; margin:0; font-size:.8rem; letter-spacing:.12em; color:rgba(255,255,255,.7); } .lightbox .round-btn{ position:absolute; } .lightbox__prev{ left:18px; top:50%; transform:translateY(-50%); } .lightbox__next{ right:18px; top:50%; transform:translateY(-50%); } .lightbox__close{ top:12px; right:12px; } .lightbox__fs{ top:12px; right:64px; } @media (max-width:640px){ .lightbox__stage{ padding:66px 10px 84px; } .lightbox__prev, .lightbox__next{ top:auto; bottom:18px; transform:none; } .lightbox__prev{ left:calc(50% - 56px); } .lightbox__next{ right:calc(50% - 56px); } } html.lightbox-open{ overflow:hidden; } /* Media + copy pairing that collapses cleanly on small screens */ .grid-media{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; } .grid-media--rev{ grid-template-columns:1.15fr .85fr; } .grid-media--top{ align-items:start; } @media (max-width:840px){ .grid-media, .grid-media--rev{ grid-template-columns:1fr; gap:32px; } } /* ---------- 8. STATS / STEPS ------------------------------- */ .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:28px; text-align:center; } .stat__n{ font-family:var(--font-display); font-size:clamp(2.6rem,5vw,3.6rem); color:var(--accent); line-height:1; } .stat__l{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; } .section--ink .stat__l{ color:var(--invert-muted); } .step{ position:relative; padding-left:64px; } .step__n{ position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--accent-fill); color:var(--on-accent); font-family:var(--font-display); font-size:1.2rem; } /* ---------- 8b. PRICING ------------------------------------ */ .price-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; height:100%; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); } .price-card--featured{ border-color:var(--accent); box-shadow:var(--shadow-sm); } .price-card__flag{ align-self:flex-start; margin-bottom:16px; background:var(--accent-soft); color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:100px; } .price-card h3{ margin-bottom:.3em; } .price-card__amount{ font-family:var(--font-display); font-size:2.6rem; line-height:1; color:var(--heading); margin:14px 0 4px; } .price-card__amount small{ display:block; margin-top:8px; font-family:var(--font-body); font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .price-card ul{ list-style:none; padding:0; margin:20px 0 24px; } .price-card li{ position:relative; padding-left:26px; font-size:.95rem; margin-bottom:10px; } .price-card li::before{ content:""; position:absolute; left:0; top:.55em; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); } .price-card .btn{ margin-top:auto; width:100%; } .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); border:1px solid var(--line); } .price-table{ width:100%; border-collapse:collapse; background:var(--surface); min-width:620px; } .price-table caption{ text-align:left; padding:18px 22px 0; color:var(--muted); font-size:.9rem; } .price-table th, .price-table td{ padding:16px 22px; text-align:left; border-bottom:1px solid var(--line); } .price-table thead th{ background:var(--invert-bg); color:var(--invert-heading); font-family:var(--font-body); font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-bottom:0; } .price-table tbody th{ font-weight:600; color:var(--heading); } .price-table tbody tr:last-child th, .price-table tbody tr:last-child td{ border-bottom:0; } .price-table tbody tr:hover{ background:var(--surface-2); } .price-table .amount{ font-family:var(--font-display); font-size:1.3rem; color:var(--heading); white-space:nowrap; } /* A card deliberately contrasted against its section (the "not sure which fits?" prompts). Compound selectors so this outranks .card/.price-card regardless of source order — both are single-class and would otherwise win purely by coming later. */ .card.card--invert, .price-card.card--invert{ background:var(--card-invert-bg); border-color:var(--card-invert-border); } .card.card--invert:hover, .price-card.card--invert:hover{ border-color:var(--card-invert-border); } .card--invert h3{ color:var(--invert-heading); } .card--invert p{ color:var(--invert-body); } .card--invert .btn--ghost{ border-color:rgba(255,255,255,.45); color:#fff; } .card--invert .btn--ghost:hover{ background:#fff; color:#121512; border-color:#fff; } /* ---------- 9. GOOGLE REVIEWS ------------------------------ */ .reviews-summary{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 22px; margin-bottom:38px; text-align:center; } .g-logo{ height:26px; width:auto; } .stars{ display:inline-flex; gap:3px; color:var(--star); } .stars svg{ width:19px; height:19px; } .reviews-summary__txt{ font-size:.94rem; color:var(--muted); } .review-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; height:100%; } .review-card__top{ display:flex; align-items:center; gap:12px; } .review-card__avatar{ width:44px; height:44px; border-radius:50%; flex:none; background:var(--accent-fill); color:var(--on-accent); display:grid; place-items:center; font-family:var(--font-display); font-size:1.15rem; } .review-card__name{ font-weight:600; color:var(--heading); line-height:1.3; } .review-card__date{ font-size:.8rem; color:var(--muted); } .review-card__body{ margin:0; font-size:.98rem; } .review-card__src{ margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); } .review-card__src img{ height:15px; } /* Fallback shown when no reviews are configured in reviews.js */ .reviews-cta{ max-width:640px; margin-inline:auto; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:44px 32px; box-shadow:var(--shadow-sm); } .reviews-cta p{ color:var(--body); } /* Scrollable review rail — lets visitors page through Google reviews */ .reviews-rail{ display:flex; gap:20px; overflow-x:auto; padding:4px 4px 12px; scroll-snap-type:x mandatory; scroll-padding-left:4px; scrollbar-width:thin; scrollbar-color:var(--accent) var(--line); } .reviews-rail::-webkit-scrollbar{ height:7px; } .reviews-rail::-webkit-scrollbar-track{ background:var(--line); border-radius:100px; } .reviews-rail::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:100px; } .reviews-rail > .review-card{ flex:0 0 min(360px, 84vw); scroll-snap-align:start; } .reviews-rail:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; border-radius:var(--radius); } .review-card__body{ display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; } img.review-card__avatar{ object-fit:cover; } a.review-card__name{ color:var(--heading); } a.review-card__name:hover{ color:var(--accent); } .reviews-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px; flex-wrap:wrap; } .reviews-nav__btn{ width:46px; height:46px; flex:none; display:grid; place-items:center; background:var(--surface); color:var(--heading); border:1px solid var(--line); border-radius:50%; cursor:pointer; transition:background .2s, color .2s, border-color .2s, opacity .2s; } .reviews-nav__btn svg{ width:20px; height:20px; } .reviews-nav__btn:hover:not(:disabled){ background:var(--accent-fill); color:var(--on-accent); border-color:var(--accent-fill); } .reviews-nav__btn:disabled{ opacity:.35; cursor:default; } /* ---------- 10. CTA BAND ----------------------------------- */ .cta-band{ background:var(--cta-bg); color:var(--cta-fg); text-align:center; padding:clamp(56px,8vw,92px) 0; } .cta-band h2{ color:var(--cta-fg); margin-bottom:.3em; } .cta-band p{ color:var(--cta-muted); max-width:560px; margin:0 auto 1.6em; } .cta-band .btn-row{ justify-content:center; } .cta-band .btn--ghost{ border-color:var(--cta-fg); color:var(--cta-fg); } .cta-band .btn--ghost:hover{ background:var(--cta-fg); color:var(--cta-bg); border-color:var(--cta-fg); } /* ---------- 11. FORMS -------------------------------------- */ .form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,4vw,40px); box-shadow:var(--shadow-sm); } .field{ margin-bottom:20px; } .field label{ display:block; margin-bottom:7px; font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--heading); } .field .req{ color:var(--accent); } .field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:1rem; color:var(--heading); padding:13px 15px; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; transition:border-color .2s, box-shadow .2s; } .field textarea{ min-height:150px; resize:vertical; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:620px){ .field-row{ grid-template-columns:1fr; gap:0; } } .form-note{ font-size:.85rem; color:var(--muted); margin-top:4px; } .hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; } .consent{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--body); } .consent input{ width:auto; margin-top:4px; flex:none; } /* ---------- 12. CONTACT INFO ------------------------------- */ .info-list{ list-style:none; margin:0; padding:0; } .info-list li{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); } .info-list li:last-child{ border-bottom:0; } .info-list .ico{ width:42px; height:42px; flex:none; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; } .info-list .ico svg{ width:20px; height:20px; } .info-list dt{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; } .info-list dd{ margin:0; color:var(--heading); font-weight:500; } .info-list dd a{ color:var(--heading); } .info-list dd a:hover{ color:var(--accent); } .map-embed{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface-2); } .map-embed iframe{ display:block; width:100%; height:340px; border:0; } /* ---------- 13. FAQ ---------------------------------------- */ .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin-bottom:14px; } .faq summary{ cursor:pointer; font-weight:600; color:var(--heading); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; font-family:var(--font-display); font-size:1.6rem; color:var(--accent); line-height:1; } .faq details[open] summary::after{ content:"–"; } .faq details p{ margin:14px 0 0; } /* ---------- 14. FOOTER ------------------------------------- */ .site-footer{ background:var(--invert-bg); color:var(--invert-muted); padding:64px 0 28px; font-size:.94rem; } .site-footer h2{ color:var(--invert-heading); font-size:1rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; } .site-footer a{ color:var(--invert-body); } /* --accent is too dark on the inverted band in light mode; --accent-light is 10.1:1 */ .site-footer a:hover{ color:var(--accent-light); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; } @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; gap:34px; } } .footer-links{ list-style:none; margin:0; padding:0; } .footer-links li{ margin-bottom:9px; } .footer-bottom{ margin-top:48px; padding-top:22px; border-top:1px solid var(--invert-line); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.85rem; color:var(--invert-muted); } .footer-credit a{ color:var(--invert-body); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); } .footer-credit a:hover{ color:var(--accent-light); border-bottom-color:var(--accent-light); } .footer-brand .brand__name{ color:var(--invert-heading); } .footer-brand .brand__tag{ color:var(--invert-muted); } /* Newsletter signup — a band across the top of the footer, above the brand/Explore/Studio columns. It borrows .footer-grid's column ratio so the fields start where the Explore column does. Fields are the .field styling re-cut for the inverted band. */ .footer-newsletter{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px 44px; padding-bottom:36px; margin-bottom:40px; border-bottom:1px solid var(--invert-line); } .footer-newsletter__fields{ grid-column:2 / -1; align-self:center; } .footer-newsletter h2{ margin-bottom:8px; } .footer-newsletter__text{ margin:0; max-width:34ch; font-size:.9rem; color:var(--invert-muted); } .footer-newsletter__label{ display:block; margin-bottom:7px; font-size:.74rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--invert-body); } .footer-newsletter__row{ display:flex; flex-wrap:wrap; gap:10px; } .footer-newsletter__input{ flex:1 1 240px; min-width:0; font-family:inherit; font-size:1rem; color:var(--invert-heading); padding:13px 15px; background:rgba(255,255,255,.06); border:1px solid var(--invert-line); border-radius:8px; transition:border-color .2s, box-shadow .2s, background .2s; } .footer-newsletter__input::placeholder{ color:var(--invert-muted); } .footer-newsletter__input:focus{ outline:none; background:rgba(255,255,255,.09); border-color:var(--accent-light); box-shadow:0 0 0 3px rgba(127,209,164,.22); } .footer-newsletter .btn{ flex:none; padding:13px 26px; font-size:.88rem; } .footer-newsletter__status{ margin:12px 0 0; font-size:.86rem; color:var(--invert-body); } @media (max-width:800px){ .footer-newsletter{ grid-template-columns:1fr; gap:18px; margin-bottom:34px; } .footer-newsletter__fields{ grid-column:1; max-width:40ch; } } /* ---------- 15. UTILITY PAGES (404 / thank-you) ------------ */ .utility{ min-height:calc(100vh - 76px); display:grid; place-items:center; text-align:center; padding:clamp(60px,10vw,110px) 0; background:var(--bg-alt); } .utility__inner{ max-width:620px; margin-inline:auto; } .utility__code{ font-family:var(--font-display); font-size:clamp(5rem,18vw,10rem); line-height:.9; color:var(--accent); margin-bottom:.15em; } .utility__badge{ width:88px; height:88px; margin:0 auto 26px; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); display:grid; place-items:center; } .utility__badge svg{ width:42px; height:42px; } .utility .btn-row{ justify-content:center; margin-top:8px; } .utility__links{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; font-size:.9rem; } /* ---------- 16. MOTION: slow slide-in ---------------------- */ /* Page-level entrance. Pure CSS, so it never depends on JavaScript and can never leave a page blank if a script fails. */ @media (prefers-reduced-motion: no-preference){ .page-enter{ animation:pageSlideIn 1.15s var(--ease-slide) both; } } @keyframes pageSlideIn{ from{ opacity:0; transform:translate3d(0, 28px, 0); } to { opacity:1; transform:none; } } /* Section-level entrance, triggered on scroll (see main.js). Direction is set per element with the modifier classes below. */ .reveal{ opacity:0; transform:translate3d(var(--sx, 0px), var(--sy, 58px), 0); transition:opacity 1.35s var(--ease-slide), transform 1.35s var(--ease-slide); transition-delay:var(--d, 0ms); will-change:opacity, transform; } .reveal.is-visible{ opacity:1; transform:none; } .reveal--left { --sx:-72px; --sy:0px; } .reveal--right { --sx: 72px; --sy:0px; } .reveal--up { --sx:0px; --sy:64px; } /* Sideways travel is clipped rather than scrolled, so a sliding element can never widen the page. `clip` (unlike `hidden`) does not create a scroll container, so the sticky header keeps working. */ .hero, .page-hero, .section, .cta-band, .utility{ overflow-x:clip; } /* On narrow screens slide everything vertically: there is no room for horizontal travel, and it reads better in a single column. */ @media (max-width:720px){ .reveal--left, .reveal--right{ --sx:0px; --sy:48px; } } /* No-JS: never hide content */ .no-js .reveal{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .page-enter{ animation:none !important; opacity:1 !important; transform:none !important; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }