/* ============ Fonts (ZCscan brand: Montserrat/Inter — no licensed binaries supplied yet, loading from Google Fonts per the design system's own approach; swap for local @font-face if licensed files arrive) ======== */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&display=swap"); /* ============ Tokens (ZCscan brand palette) ============ */ :root{ --bg:#FAFAF9; --surface:#FFFFFF; --plate:#102840; --ink:#1D4063; --ink-soft: var(--muted); --accent:#3480CC; --accent-text:#275280; --accent-ink:#FFFFFF; --support:#7C8FA5; --muted:#4A6484; --muted-on-dark:#A9BED4; --line:#E3E7EB; --ink-on-plate:#FFFFFF; --logo-plate-bg:#FFFFFF; --font-heading:'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif; --font-body:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --space-xs:8px; --space-sm:16px; --space-md:32px; --space-lg:64px; --space-xl:96px; --radius-sm:8px; --radius-md:12px; --wrap-max:1180px; } /* ============ Dark theme (toggled via [data-theme] on ) ============ */ [data-theme="dark"]{ --bg:#0A0C0F; --surface:#16191E; --plate:#050608; --ink:#EDF1F5; --muted:#9FA9B4; --support:#7C93A8; --muted-on-dark:#9FA9B4; --accent:#5C9AD8; --accent-text:#8CBAE7; --accent-ink:#0A0C0F; --line:rgba(255,255,255,0.10); } [data-theme="dark"] .site-header{ background:rgba(10,12,15,0.85); } body{ transition:background-color 0.25s ease, color 0.25s ease; } /* ============ Theme toggle ============ */ .lang-toggle{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border-radius:var(--radius-md); border:1px solid var(--line); color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0.03em; flex-shrink:0; transition:background 0.2s ease, border-color 0.2s ease; } .lang-toggle:hover{ background:var(--line); } .theme-toggle{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:var(--radius-md); border:1px solid var(--line); flex-shrink:0; } .theme-toggle__btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:calc(var(--radius-md) - 3px); color:var(--support); transition:background 0.2s ease, color 0.2s ease; } .theme-toggle__btn svg{ width:18px; height:18px; } .theme-toggle__btn:hover{ color:var(--ink); } .theme-toggle__btn[aria-pressed="true"]{ background:var(--plate); color:var(--ink-on-plate); } /* ============ Reset (neutralize UA without fighting components) ============ */ :where(html){ box-sizing:border-box; } :where(*, *::before, *::after){ box-sizing:inherit; } :where(body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote){ margin:0; padding:0; } :where(ul, ol){ list-style:none; } :where(a){ text-decoration:none; color:inherit; } :where(button){ font:inherit; border:none; background:none; cursor:pointer; } :where(img, svg){ max-width:100%; display:block; } html{ scroll-behavior:smooth; } body{ font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:var(--font-heading); font-weight:600; line-height:1.1; color:var(--ink); } .wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 var(--space-md); } .eyebrow{ font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-text); margin-bottom:var(--space-sm); } .section__sub{ color:var(--muted); font-size:16px; max-width:520px; margin-top:var(--space-xs); } /* ============ Buttons ============ */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; border-radius:var(--radius-sm); transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; white-space:nowrap; } .btn--primary{ background:var(--accent-text); color:var(--accent-ink); } .btn--primary:hover{ filter:brightness(0.88); transform:translateY(-1px); } .btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn--ghost:hover{ border-color:var(--ink); } .btn--nav{ padding:10px 20px; font-size:14px; } /* ============ Header ============ */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(250,250,249,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } .site-header__inner{ position:relative; display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; } .site-header__actions{ display:flex; align-items:center; gap:var(--space-sm); } .site-logo__img{ height:36px; width:auto; display:block; } .site-nav{ display:flex; align-items:center; gap:var(--space-md); font-size:14.5px; font-weight:500; } .site-nav a:not(.btn):hover{ color:var(--accent-text); } .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; } .nav-toggle span{ display:block; width:100%; height:2px; background:var(--ink); transition:transform 0.2s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width: 760px){ .nav-toggle{ display:flex; } .site-nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height 0.25s ease; } .site-nav.is-open{ max-height:320px; } .site-nav a:not(.btn){ display:block; width:100%; padding:14px var(--space-md); border-bottom:1px solid var(--line); } .site-nav .btn--nav{ margin:var(--space-sm) var(--space-md); } } /* ============ Hero ============ */ .hero{ position:relative; overflow:hidden; padding:var(--space-xl) 0 var(--space-lg); background:var(--bg); } .hero__dotfield{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .hero__dotfield .dot{ position:absolute; border-radius:1px; will-change:transform, opacity; animation:dotDrift linear infinite; } @keyframes dotDrift{ 0% { transform:translateY(0) translateX(0); opacity:var(--dot-op-a); } 50% { transform:translateY(-14px) translateX(6px); opacity:var(--dot-op-b); } 100% { transform:translateY(0) translateX(0); opacity:var(--dot-op-a); } } .hero__grid{ position:relative; z-index:1; } @media (prefers-reduced-motion: reduce){ .hero__dotfield .dot{ animation:none; } } .hero__grid{ display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:var(--space-lg); } .hero__inner{ max-width:520px; } h1{ font-size:clamp(32px, 4.2vw, 50px); letter-spacing:-0.01em; margin-bottom:var(--space-sm); } .hero__sub{ font-size:18px; color:var(--ink-soft); max-width:480px; margin-bottom:var(--space-md); } .hero__actions{ display:flex; gap:var(--space-sm); flex-wrap:wrap; } .hero__note{ font-size:13.5px; color:var(--muted); margin-top:var(--space-sm); } .hero__illustration{ width:100%; } .hero__illustration img{ width:100%; height:auto; animation:heroBreathe 5s ease-in-out infinite; } @keyframes heroBreathe{ 0%, 100% { opacity:1; } 50% { opacity:0.88; } } @media (prefers-reduced-motion: reduce){ .hero__illustration img{ animation:none; } } .hero__illustration--logo img{ animation:none; max-width:100%; margin:0 auto; } @media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } .hero__illustration{ order:-1; max-width:420px; margin:0 auto var(--space-md); } .hero__inner{ max-width:none; } } /* ============ Intro strip ============ */ .intro{ padding:var(--space-lg) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .intro__inner{ max-width:760px; } .intro__lead{ font-family:var(--font-heading); font-weight:500; font-size:clamp(20px, 2.6vw, 27px); line-height:1.4; color:var(--ink); } .mini-pipeline{ position:relative; margin:var(--space-lg) auto 0 auto; max-width:760px; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-md); } .mini-pipeline__track{ position:absolute; top:38px; left:60px; right:60px; height:2px; background:var(--accent-text); z-index:0; } .mini-pipeline__item{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; } .mini-pipeline__node{ display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--accent-text); } .mini-pipeline__node svg{ width:34px; height:34px; } .mini-pipeline__label{ font-family:var(--font-heading); font-weight:600; font-size:16px; color:var(--ink); } html.js .mini-pipeline__track{ transform:scaleX(0); transform-origin:left; transition:transform 0.6s ease; } html.js .mini-pipeline.is-drawn .mini-pipeline__track{ transform:scaleX(1); } html.js .mini-pipeline__node{ transform:scale(0.5); transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } html.js .mini-pipeline.is-drawn .mini-pipeline__node{ transform:scale(1); } html.js .mini-pipeline.is-drawn .mini-pipeline__item:nth-child(2) .mini-pipeline__node{ transition-delay:0.2s; } html.js .mini-pipeline.is-drawn .mini-pipeline__item:nth-child(3) .mini-pipeline__node{ transition-delay:0.4s; } html.js .mini-pipeline.is-drawn .mini-pipeline__item:nth-child(4) .mini-pipeline__node{ transition-delay:0.6s; } @media (prefers-reduced-motion: reduce){ html.js .mini-pipeline__track, html.js .mini-pipeline__node{ opacity:1 !important; transform:none !important; transition:none !important; } } @media (max-width:480px){ .mini-pipeline__track{ display:none; } } /* ============ Section shared ============ */ section h2{ font-size:clamp(26px, 3.4vw, 36px); margin-bottom:var(--space-xs); } .services{ padding:var(--space-xl) 0; } .why{ padding:var(--space-xl) 0; background-image:url('why-bg-dots.svg'); background-size:cover; background-position:center; background-repeat:no-repeat; } .process{ padding:var(--space-xl) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* ============ Services: connected pipeline (4 disciplines, one line) ==== */ .pipeline{ position:relative; margin-top:var(--space-lg); display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-md); } .pipeline__item{ position:relative; padding-top:56px; } .pipeline__node{ position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%; background:var(--plate); color:var(--ink-on-plate); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:600; font-size:14px; z-index:2; } .pipeline__item:not(:last-child)::before{ content:''; position:absolute; top:19px; left:40px; right:calc(-1 * var(--space-md)); height:2px; background:var(--accent-text); z-index:1; } .pipeline__icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--accent-text); margin-bottom:var(--space-sm); } .pipeline__icon svg{ width:32px; height:32px; } .pipeline__item h3{ font-size:19px; margin-bottom:8px; } .pipeline__item p{ color:var(--ink-soft); font-size:15px; max-width:34ch; } /* Draw-in animation: nodes pop, then the connector to the right fills in */ html.js .pipeline__item{ opacity:0; transform:translateY(14px); transition:opacity 0.5s ease, transform 0.5s ease; } html.js .pipeline.is-drawn .pipeline__item{ opacity:1; transform:none; } html.js .pipeline__node{ transform:scale(0.4); transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } html.js .pipeline.is-drawn .pipeline__node{ transform:scale(1); } html.js .pipeline__item:not(:last-child)::before{ transform:scaleX(0); transform-origin:left; transition:transform 0.5s ease; } html.js .pipeline.is-drawn .pipeline__item:not(:last-child)::before{ transform:scaleX(1); } html.js .pipeline.is-drawn .pipeline__item:nth-child(1){ transition-delay:0s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(2){ transition-delay:0.25s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(3){ transition-delay:0.5s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(4){ transition-delay:0.75s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(1) .pipeline__node{ transition-delay:0s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(2) .pipeline__node{ transition-delay:0.3s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(3) .pipeline__node{ transition-delay:0.6s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(4) .pipeline__node{ transition-delay:0.9s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(1)::before{ transition-delay:0.15s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(2)::before{ transition-delay:0.45s; } html.js .pipeline.is-drawn .pipeline__item:nth-child(3)::before{ transition-delay:0.75s; } @media (prefers-reduced-motion: reduce){ html.js .pipeline__item, html.js .pipeline__node, html.js .pipeline__item::before{ opacity:1 !important; transform:none !important; transition:none !important; } } @media (max-width:900px){ .pipeline{ grid-template-columns:1fr; gap:var(--space-lg); } .pipeline__item{ padding-top:0; padding-left:56px; } .pipeline__node{ top:0; left:0; } .pipeline__item:not(:last-child)::before{ top:40px; left:19px; right:auto; bottom:calc(-1 * var(--space-lg)); width:2px; height:auto; } html.js .pipeline__item:not(:last-child)::before{ transform:none; } .pipeline__item p{ max-width:none; } } /* ============ Process timeline ============ */ .process__list{ position:relative; margin-top:var(--space-lg); max-width:760px; padding-left:2px; border-left:2px solid var(--line); } .process__spine{ position:absolute; left:-2px; top:0; width:2px; height:0; background:var(--accent-text); transition:height 1.1s ease; } .process__list.is-drawn .process__spine{ height:100%; } .process__list li{ display:flex; gap:var(--space-md); padding:0 0 var(--space-lg) var(--space-md); position:relative; } html.js .process__list li{ opacity:0; transform:translateX(-14px); transition:opacity 0.5s ease, transform 0.5s ease; } html.js .process__list li.is-visible{ opacity:1; transform:none; } html.js .process__num{ transform:scale(0.4); transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } html.js .process__list li.is-visible .process__num{ transform:scale(1); } .process__list li:last-child{ padding-bottom:0; } .process__num{ position:absolute; left:-21px; top:0; width:40px; height:40px; background:var(--plate); color:var(--ink-on-plate); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:600; font-size:15px; flex-shrink:0; } .process__list li:first-child .process__num{ background:var(--accent-text); } .process__list h3{ font-size:19px; margin-bottom:6px; margin-left:24px; } .process__list p{ color:var(--ink-soft); font-size:15px; max-width:52ch; margin-left:24px; } /* ============ Why (split, no cards, avoids reusing services layout) ============ */ .why__header{ max-width:640px; margin-bottom:var(--space-lg); } .why__header p{ color:var(--ink-soft); margin-top:var(--space-sm); max-width:52ch; } .why__grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-lg); align-items:center; } .why__visual{ border:1px solid var(--line); background:var(--surface); overflow:hidden; } .why__visual img{ width:100%; height:auto; display:block; } .why__points{ display:flex; flex-direction:column; } .why__point{ padding:var(--space-md) 0; border-top:1px solid var(--line); } .why__point:last-child{ border-bottom:1px solid var(--line); } .why__point h3{ font-size:18px; margin-bottom:6px; } .why__point p{ color:var(--ink-soft); font-size:15px; max-width:48ch; } @media (max-width:860px){ .why__grid{ grid-template-columns:1fr; } .why__visual{ order:-1; } } /* ============ Footer ============ */ .site-footer{ position:relative; overflow:hidden; background:var(--plate); color:var(--ink-on-plate); padding:var(--space-xl) 0 var(--space-md); } .site-footer__dotgrid{ position:absolute; top:0; right:0; width:220px; opacity:0.8; pointer-events:none; } .site-footer__dotgrid img{ width:100%; height:auto; display:block; } @media (max-width:760px){ .site-footer__dotgrid{ width:130px; } } .site-footer__grid{ position:relative; z-index:1; display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-lg); padding-bottom:var(--space-lg); border-bottom:1px solid rgba(255,255,255,0.14); } .site-logo__img--footer{ height:40px; } .site-logo__plate{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; background:var(--logo-plate-bg); border-radius:var(--radius-md); } .site-footer__tag{ color:var(--muted-on-dark); margin-top:var(--space-xs); } .site-footer__cta h3{ color:var(--ink-on-plate); font-size:24px; margin-bottom:var(--space-xs); } .site-footer__cta p{ color:var(--muted-on-dark); max-width:48ch; margin-bottom:var(--space-sm); } .site-footer__email{ margin-top:var(--space-sm); font-size:14px; } .site-footer__email a{ color:var(--ink-on-plate); border-bottom:1px solid var(--accent); } .site-footer__privacy-link:hover{ color:var(--ink-on-plate); text-decoration:underline; } .site-footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-xs); padding-top:var(--space-md); font-size:13px; color:var(--muted-on-dark); } @media (max-width:760px){ .site-footer__grid{ grid-template-columns:1fr; } } /* ============ Basic page fallback ============ */ .basic-page{ padding:var(--space-xl) 0; } .basic-page__inner{ max-width:760px; } .basic-page__content{ margin-top:var(--space-md); color:var(--ink-soft); } .basic-page__content p{ margin-bottom:var(--space-sm); } /* ============ Motion (low dial: motivated, minimal) ============ */ .reveal{ opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.is-visible{ opacity:1; transform:none; } html:not(.js) .reveal{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } html{ scroll-behavior:auto; } .process__spine{ transition:none !important; } html.js .process__list li, html.js .process__num{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ============ About page ============ */ .about-hero{ padding:var(--space-xl) 0 var(--space-lg); background:var(--bg); } .about-hero h1{ font-size:clamp(30px, 4vw, 46px); max-width:640px; margin-bottom:var(--space-sm); } .about-hero__sub{ font-size:18px; color:var(--ink-soft); max-width:560px; } .about-team{ padding:var(--space-lg) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .about-team h2{ font-size:clamp(24px, 3vw, 32px); margin-bottom:var(--space-lg); } .about-team__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); } .team-card{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:var(--space-lg) var(--space-md); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .team-card:hover{ transform:translateY(-4px); border-color:var(--accent-text); box-shadow:0 10px 30px rgba(16,40,64,0.08); } .team-card__avatar{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:var(--space-sm); border-radius:50%; background:var(--plate); color:var(--ink-on-plate); font-family:var(--font-heading); font-weight:700; font-size:18px; letter-spacing:0.02em; } .team-card h3{ font-size:20px; margin-bottom:2px; } .team-card__role{ font-size:13.5px; font-weight:600; color:var(--accent-text); margin-bottom:10px; } .team-card__bio{ color:var(--ink-soft); font-size:15px; } .team-card__link{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--space-sm); font-size:14px; font-weight:600; color:var(--ink); padding-top:var(--space-sm); border-top:1px solid var(--line); width:100%; transition:color 0.2s ease; } .team-card__link svg{ width:14px; height:14px; flex-shrink:0; } .team-card__link:hover{ color:var(--accent-text); } .about-approach{ padding:var(--space-xl) 0; } .about-approach__inner{ max-width:900px; } .about-approach h2{ font-size:clamp(24px, 3vw, 32px); margin-bottom:var(--space-lg); } .about-approach__points{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-md); margin-bottom:var(--space-lg); } .approach-card{ padding:var(--space-md); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); transition:transform 0.2s ease, border-color 0.2s ease; } .approach-card:hover{ transform:translateY(-4px); border-color:var(--accent-text); } .approach-card__icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:var(--space-sm); border-radius:50%; border:1.5px solid var(--line); color:var(--accent-text); } .approach-card__icon svg{ width:20px; height:20px; } .approach-card h3{ font-size:17px; margin-bottom:6px; } .approach-card p{ color:var(--ink-soft); font-size:14.5px; } @media (max-width:760px){ .about-team__grid{ grid-template-columns:1fr; } .about-approach__points{ grid-template-columns:1fr; } } /* ============ Get a Quote page ============ */ .quote-hero{ padding:var(--space-xl) 0 var(--space-lg); background:var(--bg); } .quote-hero h1{ font-size:clamp(30px, 4vw, 46px); max-width:640px; margin-bottom:var(--space-sm); } .quote-hero__sub{ font-size:18px; color:var(--ink-soft); max-width:560px; } .quote-form-section{ padding:var(--space-lg) 0 var(--space-xl); background:var(--surface); } .quote-form-wrap{ max-width:640px; } .quote-form__hp{ position:absolute; left:-9999px; } .quote-form__row{ margin-bottom:var(--space-md); } .quote-form__row label{ display:block; font-family:var(--font-heading); font-weight:600; font-size:14px; color:var(--ink); margin-bottom:6px; } .quote-form__row input[type="text"], .quote-form__row input[type="email"], .quote-form__row select, .quote-form__row textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--bg); } .quote-form__row textarea{ resize:vertical; } .quote-form__row input:focus, .quote-form__row select:focus, .quote-form__row textarea:focus{ outline:2px solid var(--accent-text); outline-offset:1px; } .quote-form__checks{ display:flex; flex-direction:column; gap:8px; } .quote-form__checks label{ font-family:var(--font-body); font-weight:400; font-size:15px; display:flex; align-items:center; gap:8px; } .quote-error{ background:var(--bg); border-left:3px solid var(--accent-text); padding:12px 16px; margin-bottom:var(--space-md); font-size:14px; color:var(--ink); } .quote-success h2{ font-size:26px; margin-bottom:var(--space-sm); } .quote-success p{ color:var(--ink-soft); } /* ============ FAQ (accordion) ============ */ .faq{ padding:var(--space-xl) 0; background:var(--surface); border-top:1px solid var(--line); } .faq__inner{ max-width:840px; } .faq h2{ font-size:clamp(24px, 3vw, 32px); margin-bottom:var(--space-lg); } .faq__list{ display:flex; flex-direction:column; } .faq__item{ border-top:1px solid var(--line); } .faq__item:last-child{ border-bottom:1px solid var(--line); } .faq__question{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:var(--space-md) 0; cursor:pointer; list-style:none; font-family:var(--font-heading); font-weight:600; font-size:17px; color:var(--ink); transition:color 0.2s ease; } .faq__question::-webkit-details-marker{ display:none; } .faq__question::marker{ content:''; } .faq__question:hover{ color:var(--accent-text); } .faq__item[open] > .faq__question{ color:var(--accent-text); } .faq__chevron{ width:20px; height:20px; flex-shrink:0; color:var(--support); transition:transform 0.3s ease, color 0.2s ease; } .faq__item[open] .faq__chevron{ color:var(--accent-text); transform:rotate(180deg); } /* Override the UA default that hides non-summary children when closed, so the answer stays laid out (at zero height) and can animate instead of snapping — this is what makes the accordion work with no JS at all. */ .faq__item > .faq__answer{ display:grid !important; grid-template-rows:0fr; transition:grid-template-rows 0.35s ease; } .faq__item[open] > .faq__answer{ grid-template-rows:1fr; } .faq__answer-inner{ overflow:hidden; } .faq__answer p{ color:var(--ink-soft); font-size:15px; max-width:62ch; padding-bottom:var(--space-md); } @media (prefers-reduced-motion: reduce){ .faq__answer{ transition:none; } .faq__chevron{ transition:none; } } /* ============ About: Location card ============ */ .about-location{ padding:var(--space-lg) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .about-location__card{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; } .about-location__header{ display:flex; align-items:center; gap:10px; padding:18px 22px; background:var(--plate); color:var(--ink-on-plate); } .about-location__icon{ width:20px; height:20px; color:var(--accent-text); flex-shrink:0; } .about-location__label{ font-family:var(--font-heading); font-weight:600; font-size:15px; } .about-location__city{ margin-left:auto; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted-on-dark); } .about-location__body{ display:flex; align-items:flex-start; gap:var(--space-lg); padding:var(--space-lg) var(--space-md); background:var(--surface); } .about-location__mark{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:72px; height:72px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line); color:var(--accent-text); } .about-location__mark svg{ width:32px; height:32px; } .about-location__points{ display:flex; flex-direction:column; gap:var(--space-sm); flex:1; min-width:0; } .about-location__points li{ display:flex; align-items:flex-start; gap:12px; } .about-location__point-icon{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; color:var(--accent-text); } .about-location__point-icon svg{ width:18px; height:18px; } .about-location__points p{ color:var(--ink-soft); font-size:14.5px; margin-top:6px; } @media (max-width:600px){ .about-location__header{ flex-wrap:wrap; } .about-location__city{ margin-left:0; width:100%; } .about-location__body{ flex-direction:column; align-items:center; text-align:left; gap:var(--space-md); } } /* ============ Blog archive ============ */ .blog-hero{ padding:var(--space-xl) 0 var(--space-lg); background:var(--bg); } .blog-hero h1{ font-size:clamp(30px, 4vw, 46px); max-width:680px; margin-bottom:var(--space-sm); } .blog-hero__sub{ font-size:18px; color:var(--ink-soft); max-width:560px; } .blog-list-section{ padding:var(--space-lg) 0 var(--space-xl); background:var(--surface); } .blog-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .blog-card{ background:var(--surface); display:flex; flex-direction:column; } .blog-card__thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg); } .blog-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .blog-card__body{ padding:var(--space-md); } .blog-card__date{ font-size:13px; color:var(--muted); margin-bottom:6px; } .blog-card__title{ font-size:20px; margin-bottom:8px; } .blog-card__title a{ color:var(--ink); } .blog-card__title a:hover{ color:var(--accent-text); } .blog-card__excerpt{ color:var(--ink-soft); font-size:15px; margin-bottom:var(--space-sm); } .blog-card__link{ font-size:14px; font-weight:600; color:var(--accent-text); } .blog-pagination{ margin-top:var(--space-lg); display:flex; gap:var(--space-sm); justify-content:center; } .blog-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; color:var(--ink); } .blog-pagination .page-numbers.current{ background:var(--plate); color:var(--ink-on-plate); border-color:var(--plate); } .blog-empty{ padding:var(--space-xl) 0; text-align:center; color:var(--ink-soft); } @media (max-width:760px){ .blog-list{ grid-template-columns:1fr; } } /* ============ Blog single post ============ */ .blog-single{ padding:var(--space-xl) 0; } .blog-single__article{ max-width:720px; } .blog-single__back{ display:inline-block; margin-bottom:var(--space-md); font-size:14px; font-weight:600; color:var(--accent-text); } .blog-single__date{ font-size:14px; color:var(--muted); margin-bottom:var(--space-xs); } .blog-single h1{ font-size:clamp(28px, 4vw, 40px); margin-bottom:var(--space-md); } .blog-single__thumb{ margin-bottom:var(--space-lg); border-radius:var(--radius-md); overflow:hidden; } .blog-single__thumb img{ width:100%; height:auto; display:block; } .blog-single__content{ color:var(--ink); font-size:17px; line-height:1.7; } .blog-single__content p{ margin-bottom:var(--space-md); } .blog-single__content h2{ font-size:26px; margin:var(--space-lg) 0 var(--space-sm); } .blog-single__content h3{ font-size:21px; margin:var(--space-md) 0 var(--space-xs); } .blog-single__content a{ color:var(--accent-text); text-decoration:underline; } .blog-single__content ul, .blog-single__content ol{ margin:0 0 var(--space-md) 1.4em; list-style:revert; } .blog-single__content img{ max-width:100%; height:auto; border-radius:var(--radius-sm); margin:var(--space-md) 0; } .blog-single__cta{ margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:1px solid var(--line); } .blog-single__cta h3{ font-size:20px; margin-bottom:var(--space-sm); } /* ============ Tools page ============ */ .tools-hero{ padding:var(--space-xl) 0 var(--space-lg); background:var(--bg); } .tools-hero h1{ font-size:clamp(30px, 4vw, 46px); max-width:680px; margin-bottom:var(--space-sm); } .tools-hero__sub{ font-size:18px; color:var(--ink-soft); max-width:560px; } .tools-section{ padding:var(--space-xl) 0; background:var(--surface); border-top:1px solid var(--line); } .tools-section--tint{ background:var(--bg); } .tools-grid{ margin-top:var(--space-lg); display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--space-md); } .tool-card{ display:flex; flex-direction:column; gap:var(--space-xs); padding:var(--space-md); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); transition:transform 0.2s ease, border-color 0.2s ease; } .tool-card:hover{ transform:translateY(-4px); border-color:var(--accent-text); } .tool-card__heading{ display:flex; flex-direction:column; gap:2px; margin-bottom:4px; } .tool-card__heading h3{ font-size:19px; margin-bottom:0; } .tool-card__version{ font-size:13px; font-weight:600; color:var(--muted); } .tool-card p{ color:var(--ink-soft); font-size:15px; flex:1; } .tool-card__download{ align-self:flex-start; margin-top:var(--space-xs); } @media (max-width:640px){ .tools-grid{ grid-template-columns:1fr; } }