/* ========================================================================== SignMakerz.net — Design System Shared across all pages. Token-driven so accent color can be swapped in one place (see THEME TOKENS) — current accent is INDIGO, chosen as a placeholder while we A/B test against red / lime / gold. Use the small "Theme test" swatch picker (bottom-left on every page) to preview the alternates live; nothing there is final. ========================================================================== */ /* ---- Fonts ---- Sora : headings — geometric but rounded, friendly, never goes ultra-thin or ultra-black, reads well from 14px mobile body up to 72px hero. Inter : body copy — the most road-tested screen typeface there is, keeps paragraphs easy on the eyes at every viewport. */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); /* ---------------------------------------------------------------------- */ /* THEME TOKENS */ /* ---------------------------------------------------------------------- */ :root{ /* neutrals */ --ink: #130F1C; /* near-black, violet undertone — dark sections */ --ink-soft: #211A31; --surface: #FFFFFF; --surface-2: #F6F4FB; /* soft tinted-white for alternating sections */ --surface-3: #EFEBF9; --line: #E4E0EF; --line-dark: rgba(255,255,255,.12); --text: #1B1726; --text-muted: #5B5568; --text-dim: #8B85A0; --on-dark: #F5F3FB; --on-dark-muted: #B6AFCC; /* brand — INDIGO (current test) */ --brand: #6D28D9; --brand-2: #8B5CF6; --brand-deep: #4C1D95; --brand-tint: #EFE7FC; --accent: #F5B841; /* warm spark accent used sparingly against the violet */ --on-brand: #FFFFFF; /* semantic */ --success: #1E9E6B; /* shape */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* elevation */ --shadow-sm: 0 2px 10px rgba(19,15,28,.07); --shadow-md: 0 10px 28px rgba(19,15,28,.12); --shadow-lg: 0 28px 64px rgba(19,15,28,.22); /* layout */ --container: 1240px; --container-narrow: 880px; --header-h: 84px; } /* Alternate accent palettes — swap via [data-theme] on , driven by the theme-test widget in main.js. Kept in sync with --brand family only, so every component built on tokens repaints automatically. */ :root[data-theme="red"]{ --brand:#E4572E; --brand-2:#F17C4D; --brand-deep:#9A2E13; --brand-tint:#FDE6DC; --accent:#FFD166; } :root[data-theme="lime"]{ --brand:#7CB518; --brand-2:#A3D639; --brand-deep:#436006; --brand-tint:#EEF8DC; --accent:#1B1726; } :root[data-theme="gold"]{ --brand:#E3A400; --brand-2:#FFCB3D; --brand-deep:#8A6200; --brand-tint:#FDF0CE; --accent:#1B1726; } :root[data-theme="teal"]{ --brand:#0D9488; --brand-2:#2DD4BF; --brand-deep:#115E59; --brand-tint:#DCFDF7; --accent:#FBBF24; } :root[data-theme="blue"]{ --brand:#2563EB; --brand-2:#60A5FA; --brand-deep:#1E3A8A; --brand-tint:#DBEAFE; --accent:#FBBF24; } :root[data-theme="copper"]{ --brand:#C2703D; --brand-2:#E0935F; --brand-deep:#7C4321; --brand-tint:#FBE9DD; --accent:#1B1726; } :root[data-theme="forest"]{ --brand:#15803D; --brand-2:#4ADE80; --brand-deep:#14532D; --brand-tint:#DCFCE7; --accent:#FBBF24; } /* ---------------------------------------------------------------------- */ /* RESET & BASE */ /* ---------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--surface); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* NOTE: deliberately no overflow-x:hidden on body — it silently breaks position:sticky on descendants (e.g. the quote-page form card) in some engines. Fix any horizontal-overflow culprit directly instead. */ img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; } h1,h2,h3,h4{ font-family:'Sora',system-ui,sans-serif; font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; color:var(--text); } p{ margin:0 0 1em; } .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; } .container-narrow{ width:100%; max-width:var(--container-narrow); margin:0 auto; padding:0 20px; } /* NOTE: no blanket `section{ position:relative }` — an ancestor set to relative (even with no other effect) breaks position:sticky descendants in this stack, e.g. the quote-page form card. Only .hero needs it (its ::after overlay is absolutely positioned), so it's set there directly; add position:relative per-section only when that section truly needs its own positioning context. */ .visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* ---------------------------------------------------------------------- */ /* TYPE SCALE (fluid via clamp — reads well from 320px up to 1920px) */ /* ---------------------------------------------------------------------- */ .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-deep); background:var(--brand-tint); padding:7px 14px; border-radius:var(--radius-pill); } .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; } .eyebrow.on-dark{ color:var(--on-dark); background:rgba(255,255,255,.08); } .eyebrow.on-dark::before{ background:var(--accent); } .h-display{ font-size:clamp(2.1rem, 1.4rem + 3vw, 3.6rem); } .h-xl{ font-size:clamp(1.8rem, 1.3rem + 2.2vw, 2.75rem); } .h-lg{ font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); } .h-md{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); } .lede{ font-size:clamp(1rem, .95rem + .3vw, 1.2rem); color:var(--text-muted); } .on-dark, .on-dark p, .on-dark .lede{ color:var(--on-dark); } .on-dark .lede{ color:var(--on-dark-muted); } /* Dark-background contexts (.hero, .section-dark) don't always wrap their text in an explicit .on-dark element, so scope the light-text overrides to the sections themselves too — belt and suspenders against any future dark-on-dark / low-contrast regression. */ .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .hero-inner h1, .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .quote-copy h1, .quote-copy h2, .quote-copy h3, .quote-copy h4{ color:var(--on-dark); } .hero .lede, .hero p, .section-dark .lede, .section-dark p, .quote-copy p{ color:var(--on-dark-muted); } .hero .btn-outline, .section-dark .btn-outline, .quote-copy .btn-outline, .subhero .btn-outline{ border-color:rgba(255,255,255,.4); color:var(--on-dark); } .hero .btn-outline:hover, .section-dark .btn-outline:hover, .quote-copy .btn-outline:hover, .subhero .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); } /* IMPORTANT: these dark-text-color rules are scoped to the specific column/section elements (.hero, .section-dark, .quote-copy) rather than any element that merely sits inside one — a dark section can still contain a light-background card (e.g. the quote form) whose own headings must stay dark-on-white. Scope new dark sections the same way; never widen these to a bare descendant-of-dark-background selector. */ .accent-word{ color:var(--brand); } :root[data-theme="lime"] .accent-word, :root[data-theme="gold"] .accent-word{ color:var(--brand-deep); } /* ---------------------------------------------------------------------- */ /* BUTTONS */ /* ---------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; padding:15px 26px; border-radius:var(--radius-pill); border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--brand-deep); box-shadow:var(--shadow-md); transform:translateY(-1px); } .btn-outline{ background:transparent; border-color:var(--line); color:var(--text); } .btn-outline:hover{ border-color:var(--brand); color:var(--brand-deep); } .on-dark .btn-outline{ border-color:rgba(255,255,255,.35); color:var(--on-dark); } .on-dark .btn-outline:hover{ border-color:var(--on-dark); background:rgba(255,255,255,.08); } .btn-block{ width:100%; } .btn svg{ width:18px; height:18px; flex:none; } /* ---------------------------------------------------------------------- */ /* HEADER / NAV */ /* ---------------------------------------------------------------------- */ .announce{ background:var(--ink); color:var(--on-dark); text-align:center; font-size:13.5px; font-weight:600; padding:10px 16px; letter-spacing:.01em; } .announce a{ color:var(--accent); text-decoration:underline; } .site-header{ position:sticky; top:0; z-index:100; background:rgba(19,15,28,.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line-dark); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--header-h); } .logo{ display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:var(--on-dark); flex:none; } .logo .mark{ width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,var(--brand),var(--brand-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px; font-weight:800; box-shadow:var(--shadow-sm); } .logo .dotz{ color:var(--brand-2); } .logo-stack{ display:inline-flex; flex-direction:column; gap:6px; margin-bottom:16px; } .logo-stack .logo{ margin-bottom:0; } .logo-stack .logo-tagline{ font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); padding-left:48px; } .nav-primary{ display:flex; align-items:center; gap:28px; } .nav-primary > li{ position:relative; } .nav-link{ display:flex; align-items:center; gap:5px; font-weight:600; font-size:15px; color:var(--on-dark-muted); padding:10px 0; transition:color .15s ease; background:none; border:none; cursor:pointer; -webkit-appearance:none; appearance:none; } button.nav-link{ font-family:'Inter',sans-serif; } .nav-link:hover, .nav-link[aria-expanded="true"]{ color:var(--on-dark); } .nav-link svg{ width:14px; height:14px; transition:transform .15s ease; } .nav-link[aria-expanded="true"] svg{ transform:rotate(180deg); } .dropdown{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:10px; min-width:250px; opacity:0; visibility:hidden; transition:opacity .15s ease, transform .15s ease; border:1px solid var(--line); } .nav-primary > li:hover .dropdown, .nav-primary > li:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .dropdown a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600; color:var(--text); } .dropdown a:hover{ background:var(--surface-2); color:var(--brand-deep); } .dropdown a .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; } .header-actions{ display:flex; align-items:center; gap:18px; } .header-phone{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--on-dark); } .header-phone svg{ width:17px; height:17px; color:var(--brand-2); } .nav-toggle{ display:none; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--line-dark); background:transparent; color:var(--on-dark); align-items:center; justify-content:center; flex:none; } .nav-toggle svg{ width:22px; height:22px; } /* mobile drawer */ .mobile-drawer{ position:fixed; inset:0; background:var(--ink); z-index:200; padding:26px 22px; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; } .mobile-drawer.is-open{ transform:translateX(0); } .mobile-drawer .drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; } .mobile-drawer .close-drawer{ background:transparent; border:1px solid var(--line-dark); color:var(--on-dark); width:40px;height:40px;border-radius:var(--radius-sm); } .mobile-drawer nav a, .mobile-drawer nav summary{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px; font-size:18px; font-weight:600; color:var(--on-dark); border-bottom:1px solid var(--line-dark); cursor:pointer; list-style:none; } .mobile-drawer nav details[open] summary svg{ transform:rotate(180deg); } .mobile-drawer .sub-list{ padding-left:12px; } .mobile-drawer .sub-list a{ font-size:15.5px; font-weight:500; color:var(--on-dark-muted); border-bottom:none; padding:11px 4px; } .mobile-drawer .drawer-cta{ margin-top:22px; display:grid; gap:12px; } @media (max-width: 980px){ .nav-primary, .header-phone{ display:none; } .nav-toggle{ display:flex; } } @media (max-width: 640px){ .header-actions{ gap:10px; } .header-actions > .btn-primary{ display:none; } } /* ---------------------------------------------------------------------- */ /* HERO (home) */ /* ---------------------------------------------------------------------- */ .hero{ background:var(--ink); color:var(--on-dark); position:relative; z-index:0; overflow:hidden; padding:clamp(44px,8vw,96px) 0 clamp(52px,9vw,120px); } .hero::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 60% at 82% 10%, rgba(139,92,246,.35), transparent 70%); } .hero-slides{ position:absolute; inset:0; } .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; background-size:cover; background-position:center; } .hero-slide.is-active{ opacity:1; } .hero-slide::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,9,18,.96) 12%, rgba(12,9,18,.82) 50%, rgba(12,9,18,.55) 100%); } @media (max-width: 700px){ .hero-slide{ background-position:center 70%; } .hero-slide::before{ background:linear-gradient(180deg, rgba(12,9,18,.75) 0%, rgba(12,9,18,.94) 55%, rgba(12,9,18,.98) 100%); } } .hero-inner{ position:relative; z-index:2; max-width:660px; } .hero-inner .eyebrow{ margin-bottom:20px; } .hero-inner h1{ margin-bottom:18px; text-shadow:0 2px 20px rgba(0,0,0,.35); } .hero-inner .lede{ max-width:520px; margin-bottom:32px; font-size:clamp(1rem,.95rem+.3vw,1.15rem); } @media (max-width: 700px){ .hero-inner h1{ font-size:clamp(1.7rem,1.3rem+2vw,2.2rem); } } .hero-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; } .hero-trust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .hero-trust .avatars{ display:flex; } .hero-trust .avatars img{ width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); object-fit:cover; margin-left:-10px; } .hero-trust .avatars img:first-child{ margin-left:0; } .hero-trust .stars{ color:var(--accent); font-size:14px; letter-spacing:1px; } .hero-trust small{ display:block; color:var(--on-dark-muted); font-size:13px; } .hero-dots{ position:relative; z-index:2; display:flex; gap:8px; margin-top:44px; } .hero-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); border:none; padding:0; cursor:pointer; transition:background .15s, width .15s; } .hero-dots button.is-active{ background:var(--brand-2); width:26px; border-radius:5px; } .stat-strip{ background:var(--surface-2); border-bottom:1px solid var(--line); } .stat-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:34px 20px; } .stat-item{ text-align:center; } .stat-item strong{ display:block; font-family:'Sora',sans-serif; font-size:clamp(1.5rem,1.3rem+1vw,2.1rem); color:var(--brand-deep); } .stat-item span{ font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; } @media (max-width: 700px){ .stat-strip .container{ grid-template-columns:repeat(2,1fr); } } /* ---------------------------------------------------------------------- */ /* SECTION HEADERS */ /* ---------------------------------------------------------------------- */ .section{ padding:clamp(56px,8vw,110px) 0; } .section-dark{ background:var(--ink); color:var(--on-dark); } .section-tint{ background:var(--surface-2); } .section-head{ max-width:720px; margin:0 auto 46px; text-align:center; } .section-head.align-left{ margin:0 0 40px; text-align:left; } .section-head .eyebrow{ margin-bottom:16px; } .section-head p{ margin-top:12px; } /* ---------------------------------------------------------------------- */ /* CARDS — industry / category grid */ /* ---------------------------------------------------------------------- */ .grid{ display:grid; gap:22px; } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-2{ grid-template-columns:repeat(2,1fr); } @media (max-width:1080px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } } /* Category/review card grids: keep 2-up on mobile instead of collapsing to a single column — 9 full-width image cards stacked 1-up made the Industries/Sign-Types sections scroll for several screen-heights. */ @media (max-width:640px){ .grid-4,.grid-3{ grid-template-columns:repeat(2,1fr); gap:14px; } } @media (max-width:420px){ .cat-card h3{ font-size:1rem; } .cat-card p{ display:none; } .cat-card .cat-body{ padding:16px; } } .cat-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--ink-soft); box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease; } .cat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); } .cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .cat-card:hover img{ transform:scale(1.06); } .cat-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(10,8,16,.92) 100%); } .cat-card .cat-body{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2; } .cat-card h3{ color:#fff; font-size:1.15rem; margin-bottom:6px; } .cat-card p{ color:var(--on-dark-muted); font-size:13.5px; margin-bottom:12px; } .cat-card .cat-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; } .cat-card.is-placeholder{ display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, var(--surface-3), var(--surface-3) 10px, var(--surface-2) 10px, var(--surface-2) 20px); } .cat-card.is-placeholder .ph-label{ color:var(--text-dim); font-weight:700; font-size:13px; text-align:center; padding:0 20px; border:2px dashed var(--line); border-radius:var(--radius-md); padding:18px 20px; } .cat-card.is-cta{ display:flex; align-items:center; justify-content:center; text-align:center; background:var(--brand-tint); } .cat-card.is-cta .cat-cta-body{ padding:26px; } .cat-card.is-cta h3{ color:var(--brand-deep); } .cat-card.is-cta p{ color:var(--text-muted); } /* Compact variant — home page category grid. Overlay title + link only, no description, so the grid can run denser (see grid-4 usage on index.html) without the cards reading as oversized. Scoped as a modifier so the bigger categories/index.html cards are unaffected. */ .cat-card.is-compact .cat-body{ padding:16px 18px; } .cat-card.is-compact h3{ font-size:1.02rem; margin-bottom:0; } .cat-card.is-compact p{ display:none; } /* ---------------------------------------------------------------------- */ /* TIMELINE */ /* ---------------------------------------------------------------------- */ .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; } .timeline::before{ content:''; position:absolute; top:28px; left:80px; right:80px; height:1px; background:var(--line-dark); } @media (max-width:900px){ .timeline{ grid-template-columns:repeat(2,1fr); } .timeline::before{ display:none; } } @media (max-width:520px){ .timeline{ grid-template-columns:1fr; } } .timeline-step{ position:relative; text-align:left; padding-top:6px; } .timeline-icon{ position:relative; width:56px; height:56px; border-radius:50%; background:var(--ink-soft); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; margin-bottom:20px; z-index:1; } .timeline-icon svg{ width:23px; height:23px; color:var(--brand-2); } .timeline-badge{ position:absolute; top:-7px; right:-7px; min-width:24px; height:24px; padding:0 6px; border-radius:var(--radius-pill); background:var(--brand); color:#fff; font-family:'Sora',sans-serif; font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px var(--ink); } .timeline-step h4{ color:var(--on-dark); font-size:1.05rem; margin-bottom:8px; } .timeline-step p{ color:var(--on-dark-muted); font-size:14px; margin-bottom:0; } /* ---------------------------------------------------------------------- */ /* GALLERY / PORTFOLIO */ /* ---------------------------------------------------------------------- */ .gallery-track{ display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; } .gallery-track::-webkit-scrollbar{ height:6px; } .gallery-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; } .gallery-item{ flex:none; width:min(78vw,320px); scroll-snap-align:start; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); aspect-ratio:4/5; } .gallery-item img{ width:100%; height:100%; object-fit:cover; } .gallery-nav{ display:flex; gap:10px; justify-content:flex-end; margin-bottom:22px; } .gallery-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; } .gallery-nav button:hover{ border-color:var(--brand); color:var(--brand); } .gallery-nav button svg{ width:18px; height:18px; } /* ---------------------------------------------------------------------- */ /* BENEFITS / ADVANTAGES */ /* ---------------------------------------------------------------------- */ .checklist{ display:grid; gap:16px; } .checklist li{ display:flex; gap:14px; align-items:flex-start; font-weight:600; font-size:15.5px; } .checklist .tick{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand-tint); color:var(--brand-deep); display:flex; align-items:center; justify-content:center; margin-top:1px; } .checklist .tick svg{ width:14px; height:14px; } .on-dark .checklist .tick{ background:rgba(255,255,255,.1); color:var(--brand-2); } .on-dark .checklist li{ color:var(--on-dark); } .benefit-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; text-align:center; } .benefit-card .icon{ width:56px; height:56px; margin:0 auto 16px; border-radius:16px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; } .benefit-card .icon svg{ width:28px; height:28px; color:var(--brand-deep); } .benefit-card h4{ font-size:1rem; margin-bottom:6px; } .benefit-card p{ font-size:13.5px; color:var(--text-muted); margin:0; } /* ---------------------------------------------------------------------- */ /* REVIEWS */ /* ---------------------------------------------------------------------- */ .review-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); } .review-card .rphoto{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; margin-bottom:16px; } .review-card .rphoto img{ width:100%; height:100%; object-fit:cover; } .review-card .stars{ color:var(--accent); font-size:13px; margin-bottom:8px; letter-spacing:1px; } .review-card p{ font-size:14.5px; color:var(--text); margin-bottom:14px; } .review-card .who{ display:flex; align-items:center; gap:10px; } .review-card .who .initial{ width:34px;height:34px;border-radius:50%; background:var(--brand-tint); color:var(--brand-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; } .review-card .who strong{ font-size:13.5px; display:block; } .review-card .who span{ font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:4px; } .review-card .who .verified{ color:var(--success); } /* ---------------------------------------------------------------------- */ /* FOOTER */ /* ---------------------------------------------------------------------- */ .site-footer{ background:var(--ink); color:var(--on-dark-muted); padding:70px 0 0; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-dark); } @media (max-width:900px){ .footer-top{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } } .footer-top h5{ color:var(--on-dark); font-family:'Sora',sans-serif; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; } .footer-top ul{ display:grid; gap:11px; } .footer-top a{ font-size:14.5px; } .footer-top a:hover{ color:var(--on-dark); } .footer-brand p{ font-size:14.5px; max-width:280px; margin-bottom:20px; } .footer-social{ display:flex; gap:10px; } .footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; } .footer-social a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; } .footer-social svg{ width:16px; height:16px; } .footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; } .footer-contact svg{ width:16px; height:16px; margin-top:2px; color:var(--brand-2); flex:none; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:22px 0; font-size:13px; } .footer-bottom .legal-links{ display:flex; gap:18px; flex-wrap:wrap; } /* ---------------------------------------------------------------------- */ /* THEME-TEST WIDGET (temporary tool for comparing accent colors) */ /* ---------------------------------------------------------------------- */ .theme-test{ position:fixed; left:16px; bottom:16px; z-index:300; background:var(--ink); color:var(--on-dark); border-radius:var(--radius-lg); padding:8px 10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:calc(100vw - 32px); box-shadow:var(--shadow-lg); border:1px solid var(--line-dark); } .theme-test span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--on-dark-muted); padding-left:4px; } .theme-test button{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; } .theme-test button[data-swatch="indigo"]{ background:#6D28D9; } .theme-test button[data-swatch="red"]{ background:#E4572E; } .theme-test button[data-swatch="lime"]{ background:#7CB518; } .theme-test button[data-swatch="gold"]{ background:#E3A400; } .theme-test button[data-swatch="teal"]{ background:#0D9488; } .theme-test button[data-swatch="blue"]{ background:#2563EB; } .theme-test button[data-swatch="copper"]{ background:#C2703D; } .theme-test button[data-swatch="forest"]{ background:#15803D; } .theme-test button.is-active{ border-color:#fff; } @media (max-width:560px){ .theme-test{ left:10px; bottom:10px; transform:scale(.9); } } /* ---------------------------------------------------------------------- */ /* GENERIC UTILITIES */ /* ---------------------------------------------------------------------- */ .mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; } .text-center{ text-align:center; } .flex-center{ display:flex; align-items:center; justify-content:center; } /* .reveal is intentionally inert (no opacity/transform gating) — an earlier scroll-triggered fade depended on IntersectionObserver firing reliably, which it didn't always do, and silently hid whole sections. Content must never depend on JS to be visible, so this is plain and always-on. */ .reveal{ } /* ---------------------------------------------------------------------- */ /* BREADCRUMB / SUB-PAGE HERO */ /* ---------------------------------------------------------------------- */ .subhero{ background:var(--ink); color:var(--on-dark); padding:clamp(40px,7vw,76px) 0; position:relative; z-index:0; overflow:hidden; } .subhero::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 70% at 85% 0%, rgba(139,92,246,.28), transparent 70%); } .subhero .container{ position:relative; z-index:1; } .subhero h1{ color:var(--on-dark); margin-bottom:14px; } .subhero p{ color:var(--on-dark-muted); } .breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--on-dark-muted); margin-bottom:18px; } .breadcrumb a{ color:var(--on-dark-muted); } .breadcrumb a:hover{ color:var(--on-dark); } .breadcrumb svg{ width:13px; height:13px; } .subhero-stats{ display:flex; flex-wrap:wrap; gap:28px; margin-top:30px; } .subhero-stats .stat{ display:flex; flex-direction:column; } .subhero-stats strong{ font-family:'Sora',sans-serif; font-size:1.5rem; color:var(--on-dark); } .subhero-stats span{ font-size:12.5px; color:var(--on-dark-muted); text-transform:uppercase; letter-spacing:.04em; } /* Two-column category-page hero — text left, photo right. */ .subhero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; } @media (max-width:900px){ .subhero-grid{ grid-template-columns:1fr; gap:32px; } } .subhero-media{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-lg); } .subhero-media img{ width:100%; height:100%; object-fit:cover; } @media (max-width:900px){ .subhero-media{ aspect-ratio:16/9; } } .subhero-media.is-placeholder{ display:flex; align-items:center; justify-content:center; background:var(--ink-soft); border:1.5px dashed var(--line-dark); } .subhero-media.is-placeholder .ph-label{ color:var(--on-dark-muted); font-weight:700; font-size:13px; text-align:center; padding:20px; } /* ---------------------------------------------------------------------- */ /* FILTER TABS */ /* ---------------------------------------------------------------------- */ .filter-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; } .filter-tabs button{ background:var(--surface); border:1.5px solid var(--line); color:var(--text-muted); font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:var(--radius-pill); cursor:pointer; transition:all .15s ease; } .filter-tabs button:hover{ border-color:var(--brand); color:var(--brand-deep); } .filter-tabs button.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; } /* ---------------------------------------------------------------------- */ /* VARIANT CARD (sign-style grid on category pages) */ /* ---------------------------------------------------------------------- */ /* Compact card — sized to sit 4-up (reference's .sign-card), not 3-up */ .variant-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; } .variant-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); } .variant-card .vphoto{ aspect-ratio:16/10; overflow:hidden; position:relative; } .variant-card .vphoto img{ width:100%; height:100%; object-fit:cover; } .variant-card .vbody{ padding:13px; display:flex; flex-direction:column; flex:1; } .variant-card h3{ font-size:.92rem; margin-bottom:4px; } .variant-card p{ font-size:12px; color:var(--text-muted); flex:1; margin-bottom:9px; line-height:1.45; } .tag-row{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; } .tag-chip{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; background:var(--surface-2); color:var(--brand-deep); padding:3px 8px; border-radius:var(--radius-pill); } .variant-card .vactions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:auto; } .variant-card .vactions .btn{ padding:8px 6px; font-size:11px; letter-spacing:.02em; } .variant-card .vactions .btn svg{ width:13px; height:13px; } .variant-badge{ display:inline-flex; align-self:flex-start; margin-bottom:10px; background:var(--brand); color:#fff; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:var(--radius-pill); } .vphoto .variant-tag-badge{ position:absolute; top:8px; left:8px; background:var(--brand); color:#fff; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:var(--radius-pill); } /* .qcat-detail's variant grid runs 4-up instead of the default 3-up grid, matching the reference's denser signs-grid. */ .qcat-detail .grid-3{ grid-template-columns:repeat(4,1fr); } @media (max-width:1080px){ .qcat-detail .grid-3{ grid-template-columns:repeat(3,1fr); } } @media (max-width:640px){ .qcat-detail .grid-3{ grid-template-columns:repeat(2,1fr); } } /* ---------------------------------------------------------------------- */ /* PRINCIPLE LIST (roman-numeral "why it works" blocks) */ /* ---------------------------------------------------------------------- */ .principle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } @media (max-width:860px){ .principle-grid{ grid-template-columns:1fr; } } .principle{ } .principle .numeral{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.4rem; color:var(--brand-2); width:52px; height:52px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .principle h4{ font-size:1.05rem; margin-bottom:8px; } .principle p{ font-size:14px; margin-bottom:0; } .on-dark .principle p{ color:var(--on-dark-muted); } .section:not(.section-dark) .principle .numeral{ background:var(--brand-tint); border-color:transparent; color:var(--brand-deep); } .section:not(.section-dark) .principle p{ color:var(--text-muted); } /* ---------------------------------------------------------------------- */ /* QUICK-COMPARISON TABLE */ /* ---------------------------------------------------------------------- */ .compare-wrap{ overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); } table.compare{ width:100%; border-collapse:collapse; min-width:640px; background:var(--surface); } table.compare th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); background:var(--surface-2); padding:14px 18px; white-space:nowrap; } table.compare td{ padding:16px 18px; font-size:14px; font-weight:600; border-top:1px solid var(--line); white-space:nowrap; } table.compare tr td:first-child{ font-family:'Sora',sans-serif; font-weight:700; color:var(--text); } .compare-dots{ display:inline-flex; gap:3px; } .compare-dots span{ width:7px; height:7px; border-radius:50%; background:var(--line); } .compare-dots span.is-filled{ background:var(--brand); } .compare-tag{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); background:var(--brand-tint); color:var(--brand-deep); } .compare-tag.muted{ background:var(--surface-2); color:var(--text-dim); } /* ---------------------------------------------------------------------- */ /* TEAM / PEOPLE CARDS */ /* ---------------------------------------------------------------------- */ .team-card{ text-align:left; } .team-card .tphoto{ aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:16px; background:var(--surface-2); } .team-card .tphoto img{ width:100%; height:100%; object-fit:cover; } .team-card h4{ font-size:1rem; margin-bottom:2px; } .team-card .role{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-deep); margin-bottom:10px; display:block; } .team-card p{ font-size:13.5px; color:var(--text-muted); margin-bottom:0; } /* ---------------------------------------------------------------------- */ /* VALUE / QUOTE BLOCK */ /* ---------------------------------------------------------------------- */ .pull-quote{ border-left:3px solid var(--brand-2); padding-left:24px; font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:600; color:var(--on-dark); margin:32px 0; line-height:1.5; } .pull-quote cite{ display:block; margin-top:14px; font-family:'Inter',sans-serif; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-muted); } /* ---------------------------------------------------------------------- */ /* PROCESS FLOW STEPS (numbered, used on category + about pages) */ /* ---------------------------------------------------------------------- */ .step-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:step; } @media (max-width:900px){ .step-flow{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .step-flow{ grid-template-columns:1fr; } } /* ---------------------------------------------------------------------- */ /* CONTACT METHOD CARDS */ /* ---------------------------------------------------------------------- */ .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width:860px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } } .contact-method{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; transition:border-color .15s, box-shadow .15s; } .contact-method:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); } .contact-method .icon{ width:44px; height:44px; border-radius:12px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .contact-method .icon svg{ width:22px; height:22px; color:var(--brand-deep); } .contact-method h4{ font-size:1rem; margin-bottom:6px; } .contact-method p{ font-size:13.5px; color:var(--text-muted); margin-bottom:12px; } .contact-method a.link-cta{ font-size:13.5px; font-weight:700; color:var(--brand-deep); display:inline-flex; align-items:center; gap:6px; } /* ---------------------------------------------------------------------- */ /* FAQ ACCORDION */ /* ---------------------------------------------------------------------- */ .faq-list{ display:grid; gap:12px; max-width:780px; margin:0 auto; } .faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:'Sora',sans-serif; font-weight:600; font-size:15px; color:var(--text); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .plus{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease; } .faq-item summary .plus svg{ width:13px; height:13px; color:var(--brand-deep); } .faq-item[open] summary .plus{ transform:rotate(45deg); background:var(--brand-tint); } .faq-item .faq-body{ padding:0 22px 20px; font-size:14.5px; color:var(--text-muted); } .faq-topic-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; } .faq-topic-nav a{ font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:var(--radius-pill); background:var(--surface-2); color:var(--text-muted); } .faq-topic-nav a:hover{ background:var(--brand-tint); color:var(--brand-deep); } /* ---------------------------------------------------------------------- */ /* TAG PILL ROW (e.g. "Built For" business types) */ /* ---------------------------------------------------------------------- */ .pill-row{ display:flex; flex-wrap:wrap; gap:10px; } .pill-row span{ background:var(--surface); border:1px solid var(--line); padding:10px 18px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; color:var(--text); } /* ---------------------------------------------------------------------- */ /* QUICK-QUOTE MODAL */ /* ---------------------------------------------------------------------- */ .qq-modal{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:20px; } .qq-modal.is-open{ display:flex; } .qq-modal .qq-overlay{ position:absolute; inset:0; background:rgba(15,11,23,.7); backdrop-filter:blur(2px); } .qq-modal .qq-panel{ position:relative; z-index:1; background:var(--surface); border-radius:var(--radius-lg); max-width:440px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; box-shadow:var(--shadow-lg); } .qq-modal .qq-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; } .qq-modal .qq-close svg{ width:16px; height:16px; } .qq-modal h3{ font-size:1.2rem; margin-bottom:6px; padding-right:30px; } .qq-modal p{ font-size:13.5px; color:var(--text-muted); margin-bottom:20px; } /* ---------------------------------------------------------------------- */ /* IN-PAGE CATEGORY EXPLORER (quote page "Browse by Business" widget) */ /* Matches the reference sites: clicking a category tile expands in place (no navigation) into its style-variant grid, and each variant's "Get Quote" swaps that one card into a compact inline mini-form. */ /* ---------------------------------------------------------------------- */ /* Slide-track mechanism: grid and panel sit side by side as two 50%-width slides inside a 200%-wide flex track. Toggling .show-panel translates the track so the panel slides fully into view while the grid slides fully out — real removal from view (plus an opacity crossfade), not just a CSS hide/show swap. The viewport's height is kept in sync with whichever slide is currently active (see main.js) so the section resizes smoothly instead of leaving empty space or clipping content. */ .qcat-viewport{ overflow:hidden; width:100%; transition:height .52s var(--ease-smooth, cubic-bezier(.22,1,.36,1)); } .qcat-track{ display:flex; width:200%; align-items:flex-start; transition:transform .52s var(--ease-smooth, cubic-bezier(.22,1,.36,1)); } .qcat-track.show-panel{ transform:translateX(-50%); } .qcat-slide{ width:50%; flex:0 0 50%; min-width:0; } .qcat-slide-grid{ transition:opacity .3s ease; opacity:1; } .qcat-slide-panel{ transition:opacity .3s ease; opacity:0; } .qcat-track.show-panel .qcat-slide-grid{ opacity:0; } .qcat-track.show-panel .qcat-slide-panel{ opacity:1; } @media (prefers-reduced-motion: reduce){ .qcat-viewport, .qcat-track, .qcat-slide-grid, .qcat-slide-panel{ transition:none; } } .qcat-tile{ cursor:pointer; border:none; text-align:left; padding:0; font:inherit; color:inherit; background:none; display:block; width:100%; } .qcat-tile:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; } .qcat-detail-head{ text-align:center; margin-bottom:36px; } .qcat-back{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); padding:10px 18px; border-radius:var(--radius-pill); font-weight:700; font-size:13px; cursor:pointer; margin-bottom:28px; color:var(--text); } .qcat-back:hover{ border-color:var(--brand); color:var(--brand-deep); } .qcat-back svg{ width:15px; height:15px; } .qcat-variant-actions{ display:flex; gap:10px; } .qcat-variant-actions .btn{ padding:10px 14px; font-size:12.5px; flex:1; } @keyframes qqIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } } .qq-mini{ background:var(--ink); border-radius:var(--radius-lg); padding:20px; color:var(--on-dark); height:100%; display:flex; flex-direction:column; animation:qqIn .28s cubic-bezier(.22,1,.36,1); } @media (prefers-reduced-motion: reduce){ .qq-mini{ animation:none; } } .qq-mini-back{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; color:var(--on-dark-muted); margin-bottom:12px; cursor:pointer; font-size:12.5px; font-weight:700; padding:0; align-self:flex-start; } .qq-mini-back svg{ width:13px; height:13px; } .qq-mini input, .qq-mini textarea{ width:100%; margin-bottom:10px; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--line-dark); background:rgba(255,255,255,.06); color:#fff; font-size:13px; font-family:'Inter',sans-serif; } .qq-mini input::placeholder, .qq-mini textarea::placeholder{ color:var(--on-dark-muted); } .qq-mini textarea{ resize:vertical; min-height:56px; } .qq-mini .qq-mini-upload{ border:1.5px dashed var(--line-dark); border-radius:var(--radius-sm); padding:12px; text-align:center; margin-bottom:12px; cursor:pointer; } .qq-mini .qq-mini-upload svg{ width:16px; height:16px; color:var(--brand-2); margin-bottom:4px; } .qq-mini .qq-mini-upload span{ display:block; font-size:11.5px; font-weight:700; color:var(--on-dark); } .qq-mini .qq-mini-upload small{ display:block; font-size:10px; color:var(--on-dark-muted); } .qq-mini .btn{ margin-top:auto; padding:11px; font-size:13px; } /* ---------------------------------------------------------------------- */ /* STICKY SUB-NAV (category page style switcher jump links) */ /* ---------------------------------------------------------------------- */ .subnav{ position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .subnav .container{ display:flex; gap:26px; overflow-x:auto; padding:14px 20px; } .subnav a{ font-size:13.5px; font-weight:700; color:var(--text-muted); white-space:nowrap; } .subnav a:hover, .subnav a.is-active{ color:var(--brand-deep); }