/* ============================================================================ theme.css — single styling source of truth for the entire site. To REBRAND: edit site-config.php → 'theme' (primary, accent, optional neutral and bg). bootstrap.php injects those as --brand-* custom props into ; everything else in this file derives from them via color-mix. To restyle a section, edit the section blocks below. ============================================================================ */ :root { /* Site supports both schemes — seeds flip via the dark @media block below + the paired dark seeds bootstrap.php injects from site-config 'theme_dark'. For a light-only site, change this to `color-scheme: light` and drop the 'theme_dark' map (see HTML-builder skill 3 — dark-mode contract). */ color-scheme: light dark; /* Brand seeds — DEFAULTS only. bootstrap.php overrides these from config. Don't edit values here for a single client; edit site-config.php → 'theme'. */ --brand-primary: #0a5cff; --brand-accent: #ff6b35; --brand-neutral: #0f1115; --brand-bg: #ffffff; --brand-on-primary: #ffffff; /* text color that reads on top of --brand-primary */ /* Brand — derived (do not hardcode brand colors below this line) */ --color-primary: var(--brand-primary); --color-primary-hover: color-mix(in oklch, var(--brand-primary) 85%, black); --color-primary-soft: color-mix(in oklch, var(--brand-primary) 12%, transparent); --color-primary-ring: color-mix(in oklch, var(--brand-primary) 35%, transparent); --color-accent: var(--brand-accent); --color-accent-soft: color-mix(in oklch, var(--brand-accent) 12%, transparent); /* Neutrals — derived from --brand-neutral + --brand-bg */ --color-text: var(--brand-neutral); --color-text-muted: color-mix(in oklch, var(--brand-neutral) 60%, var(--brand-bg)); --color-bg: var(--brand-bg); --color-bg-alt: color-mix(in oklch, var(--brand-neutral) 4%, var(--brand-bg)); --color-bg-elev: var(--brand-bg); --color-border: color-mix(in oklch, var(--brand-neutral) 10%, var(--brand-bg)); /* Status */ --color-success: #0e9c6d; --color-error: #e0413a; /* Typography — system stack: zero load time, ages perfectly */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --fs-display: clamp(2.75rem, 5vw + 1rem, 4.75rem); --fs-h1: clamp(2.25rem, 4vw + 1rem, 3.5rem); --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); --fs-h3: clamp(1.375rem, 1.5vw + 1rem, 1.625rem); --fs-h4: 1.0625rem; --fs-body: 1rem; --fs-lead: 1.1875rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-normal: 1.65; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Layout */ --content-max: 72rem; --reading-max: 42rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* Header */ --nav-height: 72px; --nav-bg: color-mix(in oklch, var(--brand-bg) 78%, transparent); --nav-blur: 16px; --nav-border: color-mix(in oklch, var(--brand-neutral) 8%, transparent); /* Shadows — tinted with the brand neutral so they match cool/warm palettes */ --shadow-sm: 0 1px 2px color-mix(in oklch, var(--brand-neutral) 4%, transparent); --shadow-md: 0 4px 16px color-mix(in oklch, var(--brand-neutral) 6%, transparent), 0 1px 3px color-mix(in oklch, var(--brand-neutral) 4%, transparent); --shadow-lg: 0 24px 48px -12px color-mix(in oklch, var(--brand-neutral) 18%, transparent); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 500ms; } @media (prefers-color-scheme: dark) { :root { /* Flip the seeds — neutral becomes light, bg becomes near-black. Everything derived above re-mixes correctly against the new seeds. */ --brand-neutral: #f4f5f7; --brand-bg: #0b0d12; --color-bg-elev: #181c25; --nav-bg: color-mix(in oklch, var(--brand-bg) 78%, transparent); --nav-border: color-mix(in oklch, var(--brand-neutral) 10%, transparent); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.5); } } /* ============================================================================ Reset + base ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + 1rem); } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* Lock background scroll while the mobile drawer is open (set by footer.php JS). */ body.is-locked { overflow: hidden; } .skip-link { position: absolute; left: -9999px; background: var(--color-primary); color: var(--brand-on-primary); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-weight: 600; z-index: 100; } .skip-link:focus { left: var(--sp-4); top: var(--sp-4); } /* ============================================================================ Typography ============================================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 750; color: var(--color-text); } h1 { font-size: var(--fs-h1); margin-block: var(--sp-6) var(--sp-4); } h2 { font-size: var(--fs-h2); margin-block: var(--sp-12) var(--sp-5); letter-spacing: -0.022em; } h3 { font-size: var(--fs-h3); margin-block: var(--sp-8) var(--sp-3); letter-spacing: -0.018em; } h4 { font-size: var(--fs-h4); margin-block: var(--sp-5) var(--sp-2); letter-spacing: -0.005em; font-weight: 700; } p { margin-block: 0 var(--sp-4); max-width: 70ch; } a { color: var(--color-primary); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--color-primary-hover); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--color-primary); color: var(--brand-on-primary); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-alt); padding: 0.15em 0.4em; border-radius: 4px; border: 1px solid var(--color-border); } /* ============================================================================ Layout ============================================================================ */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } main { display: block; min-height: 60vh; } section + section { margin-top: var(--sp-12); } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--color-primary); margin-bottom: var(--sp-3); } /* ============================================================================ Header / nav ============================================================================ */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-height); background: var(--nav-bg); backdrop-filter: blur(var(--nav-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(180%); border-bottom: 1px solid var(--nav-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.025em; color: var(--color-text); display: inline-flex; align-items: center; gap: var(--sp-3); } .brand:hover { text-decoration: none; color: var(--color-primary); } .brand__mark { display: inline-flex; flex-shrink: 0; } .brand__mark svg { width: 32px; height: 32px; border-radius: 9px; } .nav-desktop { display: none; } @media (min-width: 880px) { .nav-desktop { display: flex; align-items: center; gap: var(--sp-2); } } .nav-desktop ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--sp-1); } .nav-desktop a { color: var(--color-text); font-weight: 500; font-size: 0.9375rem; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav-desktop a:hover { background: var(--color-bg-alt); color: var(--color-primary); text-decoration: none; } .nav-desktop a[aria-current="page"] { color: var(--color-primary); } .nav-desktop a.cta { background: var(--color-primary); color: var(--brand-on-primary); margin-left: var(--sp-3); box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-primary) 30%, transparent); } .nav-desktop a.cta:hover { background: var(--color-primary-hover); color: var(--brand-on-primary); box-shadow: 0 4px 12px color-mix(in oklch, var(--brand-primary) 35%, transparent); transform: translateY(-1px); } /* Desktop dropdowns */ .has-dropdown { position: relative; } .has-dropdown > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 0.4em; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.55; vertical-align: middle; } .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); list-style: none !important; display: flex !important; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .dropdown a { display: block; padding: var(--sp-2) var(--sp-3); font-size: 0.9375rem; } /* Hamburger */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); } .nav-toggle:hover { background: var(--color-bg-alt); } @media (min-width: 880px) { .nav-toggle { display: none; } } .nav-toggle svg { width: 22px; height: 22px; } /* Mobile drawer — Popover API. A popover toggles display:none<->block, which snaps unless we transition `display`/`overlay` with allow-discrete and give an @starting-style for the entry. Closed state = slid off-canvas + faded; :popover-open = on-screen. Reduced-motion users get the instant version via the global prefers-reduced-motion block below. */ .nav-mobile { position: fixed; inset: 0 0 0 auto; width: min(360px, 90vw); height: 100vh; /* fallback for browsers without dvh */ height: 100dvh; /* matches the real mobile viewport (no chrome jump) */ margin: 0; border: none; /* sp-16 top so the first menu item clears the absolutely-positioned close button (top sp-3 + 40px tall); sp-12 was too tight and overlapped. */ padding: var(--sp-16) var(--sp-6) var(--sp-6); background: var(--color-bg); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg); color: var(--color-text); transform: translateX(100%); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), overlay var(--dur-base) var(--ease-out) allow-discrete, display var(--dur-base) var(--ease-out) allow-discrete; } .nav-mobile:popover-open { transform: translateX(0); opacity: 1; } @starting-style { .nav-mobile:popover-open { transform: translateX(100%); opacity: 0; } } .nav-mobile::backdrop { background: rgba(0,0,0,0); backdrop-filter: blur(0); transition: background var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease), overlay var(--dur-base) var(--ease) allow-discrete, display var(--dur-base) var(--ease) allow-discrete; } .nav-mobile:popover-open::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); } @starting-style { .nav-mobile:popover-open::backdrop { background: rgba(0,0,0,0); backdrop-filter: blur(0); } } .nav-mobile__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-text); } .nav-mobile__close:hover { background: var(--color-bg-alt); } .nav-mobile ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .nav-mobile a { display: block; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); color: var(--color-text); font-weight: 500; font-size: 1rem; } .nav-mobile a:hover { background: var(--color-bg-alt); text-decoration: none; } .nav-mobile a[aria-current="page"] { color: var(--color-primary); background: var(--color-bg-alt); } .nav-mobile details summary { padding: var(--sp-3) var(--sp-4); cursor: pointer; border-radius: var(--radius-sm); font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; } .nav-mobile details summary::-webkit-details-marker { display: none; } .nav-mobile details summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); transition: transform var(--dur-base) var(--ease); } .nav-mobile details[open] summary::after { transform: rotate(45deg); } .nav-mobile details[open] summary { color: var(--color-primary); } .nav-mobile details ul { padding-left: var(--sp-4); margin-top: var(--sp-1); margin-bottom: var(--sp-3); } /* ============================================================================ Footer ============================================================================ */ .site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding-block: var(--sp-20) var(--sp-8); margin-top: var(--sp-32); } .site-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--sp-12); max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); } @media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } } @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } } .site-footer__tagline { margin-top: var(--sp-3); color: var(--color-text-muted); } .site-footer__address { font-style: normal; margin-top: var(--sp-4); color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.7; } .site-footer h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin: 0 0 var(--sp-4); font-weight: 600; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .site-footer a { color: var(--color-text); font-size: 0.9375rem; } .site-footer a:hover { color: var(--color-primary); } .site-footer__bottom { max-width: var(--content-max); margin: var(--sp-16) auto 0; padding: var(--sp-6) var(--sp-6) 0; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-small); color: var(--color-text-muted); } /* "Powered by Spark" credit — mandatory, do not remove. The Spark mark keeps its fixed brand orange (#f15924) on any footer background. display:inline-block is required: the global reset sets `svg { display: block }`, which would drop the mark onto its own line. */ .spark-mark { display: inline-block; width: 1.6em; height: 1.6em; margin-left: 0.15em; vertical-align: -0.5em; } /* ============================================================================ Consent banner (includes/consent-banner.php) — fixed bottom, JS-toggled ============================================================================ */ .consent-banner { position: fixed; left: 50%; bottom: var(--sp-4); transform: translate(-50%, calc(100% + var(--sp-8))); z-index: 90; width: min(640px, calc(100vw - var(--sp-8))); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .consent-banner.is-visible { transform: translate(-50%, 0); opacity: 1; } .consent-banner__text { flex: 1 1 16rem; margin: 0; max-width: none; font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); } .consent-banner__text a { font-weight: 600; } .consent-banner__actions { display: flex; gap: var(--sp-3); flex-shrink: 0; } .consent-banner__actions .btn { padding: var(--sp-2) var(--sp-5); font-size: 0.875rem; } @media (max-width: 520px) { .consent-banner { bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100vw; } .consent-banner__actions { width: 100%; } .consent-banner__actions .btn { flex: 1; } } /* ============================================================================ Buttons ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); font-size: 0.9375rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: var(--brand-on-primary); box-shadow: 0 1px 2px color-mix(in oklch, var(--brand-primary) 30%, transparent); } .btn-primary:hover { background: var(--color-primary-hover); color: var(--brand-on-primary); box-shadow: 0 8px 16px color-mix(in oklch, var(--brand-primary) 25%, transparent); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover { background: var(--color-bg-alt); } .btn-lg { padding: var(--sp-4) var(--sp-8); font-size: 1rem; } /* ============================================================================ Forms ============================================================================ */ .form { display: grid; gap: var(--sp-5); max-width: 36rem; } .form-row { display: grid; gap: var(--sp-2); } .form label { font-weight: 500; font-size: 0.9375rem; } .form input, .form textarea, .form select { width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand-primary) 18%, transparent); } .form textarea { min-height: 140px; resize: vertical; } .form .hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; } .form-help { font-size: var(--fs-small); color: var(--color-text-muted); } .form-status { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); display: none; font-size: 0.9375rem; } .form-status[data-state="ok"] { display: block; background: color-mix(in oklch, var(--color-success) 12%, transparent); color: var(--color-success); border: 1px solid color-mix(in oklch, var(--color-success) 30%, transparent); } .form-status[data-state="error"] { display: block; background: color-mix(in oklch, var(--color-error) 12%, transparent); color: var(--color-error); border: 1px solid color-mix(in oklch, var(--color-error) 30%, transparent); } /* ============================================================================ Hero — the "beautiful" landing section ============================================================================ */ .hero { position: relative; isolation: isolate; padding-block: var(--sp-24) var(--sp-20); text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10%; z-index: -2; background: radial-gradient(45% 55% at 18% 20%, color-mix(in oklch, var(--brand-primary) 20%, transparent), transparent 70%), radial-gradient(40% 50% at 85% 25%, color-mix(in oklch, var(--brand-accent) 16%, transparent), transparent 70%), radial-gradient(50% 50% at 50% 110%, color-mix(in oklch, var(--brand-primary) 12%, transparent), transparent 70%); filter: blur(2px); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, color-mix(in oklch, var(--brand-neutral) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--brand-neutral) 6%, transparent) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 70%); mask-image: radial-gradient(ellipse at center, black, transparent 70%); } .hero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; line-height: 1.04; font-weight: 800; margin-block: 0 var(--sp-6); max-width: 18ch; margin-inline: auto; } .hero p.lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 52ch; margin-inline: auto; margin-bottom: var(--sp-8); line-height: 1.55; } .hero__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; } .hero__highlight { background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================================ Cards / sections ============================================================================ */ .section-title { text-align: center; margin-bottom: var(--sp-10); } .section-title h2 { margin-top: 0; } .section-title p { margin-inline: auto; color: var(--color-text-muted); font-size: var(--fs-lead); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); } .card { position: relative; padding: var(--sp-8) var(--sp-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elev); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .card h3 { margin-top: var(--sp-3); margin-bottom: var(--sp-2); } .card p { color: var(--color-text-muted); margin-bottom: 0; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-soft), var(--color-accent-soft)); color: var(--color-primary); } .card__icon svg { width: 22px; height: 22px; } /* Stats strip */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-6); padding: var(--sp-10); background: var(--color-bg-alt); border-radius: var(--radius-lg); border: 1px solid var(--color-border); text-align: center; } .stats__num { font-family: var(--font-display); font-size: clamp(2rem, 3vw + 1rem, 2.75rem); font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stats__label { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--sp-1); } /* CTA section */ .cta-band { text-align: center; padding: var(--sp-16) var(--sp-6); background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 70%, var(--color-accent))); color: var(--brand-on-primary); border-radius: var(--radius-xl); margin-block: var(--sp-16); } .cta-band h2 { color: var(--brand-on-primary); margin-top: 0; } .cta-band p { color: color-mix(in oklch, var(--brand-on-primary) 85%, transparent); margin-inline: auto; max-width: 50ch; font-size: var(--fs-lead); } .cta-band .btn-primary { background: var(--brand-on-primary); color: var(--color-primary); margin-top: var(--sp-6); } .cta-band .btn-primary:hover { background: color-mix(in oklch, var(--brand-on-primary) 90%, var(--brand-neutral)); color: var(--color-primary-hover); } /* Reading content (about/service body) */ .prose { max-width: var(--reading-max); margin-inline: auto; } .prose h2:first-child, .prose h1:first-child { margin-top: 0; } /* Anchor offset for sticky header */ :target { scroll-margin-top: calc(var(--nav-height) + var(--sp-6)); } /* ============================================================================ Breadcrumbs ============================================================================ */ .breadcrumbs { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--sp-12); margin-bottom: 0; } .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); } .breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--color-text-muted); opacity: 0.55; } .breadcrumbs a { color: var(--color-text-muted); } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; } /* ============================================================================ Accessibility & motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================================ ============================================================================ CIMARRON INDUSTRIAL SALES - project customization (cis-*) Dark-industrial distributor look on the native Spark design system. Brand seeds come from site-config.php -> 'theme'; this block adds the project fonts, the light-only lock, and all signature sections. ============================================================================ ============================================================================ */ :root { /* Type: condensed industrial heads + clean body (system fallback first) */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Oswald", "Inter", Impact, "Arial Narrow", sans-serif; /* CIS palette (mirrors site-config seeds; used where a literal is needed) */ --cis-navy: #244B5A; /* primary (official) */ --cis-steel: #3E6E84; /* steel - AA-safe text accent on light */ --cis-steel-bright:#6FA8C2; /* steel - text/links on dark navy surfaces */ --cis-ink: #23293F; /* official dark navy - section bg */ --cis-ink-2: #2E3550; /* raised dark card */ --cis-line-dark: rgba(255,255,255,0.10); --cis-light: #F2F4F6; } /* Light-only lock: this build uses charcoal sections as a DESIGN choice, not OS dark mode. Defeat theme.css's dark flip so the palette never inverts. */ @media (prefers-color-scheme: dark) { :root { --brand-neutral: #1A1F24; --brand-bg: #F2F4F6; --color-bg-elev: #ffffff; --nav-bg: color-mix(in oklch, #F2F4F6 82%, transparent); --nav-border: color-mix(in oklch, #1A1F24 8%, transparent); } } /* Heads: condensed Oswald wants slightly looser tracking than the default */ h1, h2, h3, h4 { letter-spacing: 0.005em; font-weight: 600; text-transform: none; } .cis-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-eyebrow); font-weight: 600; color: var(--cis-steel); margin-bottom: var(--sp-3); } /* Eyebrow on any DARK surface must use the BRIGHT steel, not the light-bg steel. Contrast is a relationship, not a property: --cis-steel (#3E6E84) is 5.57:1 on white but only ~2.6:1 over the hero's dark overlay. --cis-steel-bright is 5.5:1 there. The hero and the dark infocard are dark surfaces that are NOT .cis-band--dark, so they need to be named explicitly or the eyebrow silently fails WCAG 1.4.3. */ .cis-band--dark .cis-eyebrow, .cis-hero .cis-eyebrow, .cis-infocard .cis-eyebrow { color: var(--cis-steel-bright); } /* Wider content for an industrial, full-bleed feel */ :root { --content-max: 78rem; } /* Header: CIS logo image instead of the generic gradient mark */ .brand__logo { height: 48px; width: auto; border-radius: 0; } @media (max-width: 480px) { .brand__logo { height: 40px; } } /* ---------------------------------------------------------------------------- UNIQUE NAV - dark utility topbar + condensed Oswald nav with steel underline ---------------------------------------------------------------------------- */ .cis-topbar { background: #1B2233; color: rgba(255,255,255,0.82); border-bottom: 1px solid rgba(255,255,255,0.07); } .cis-topbar__inner { max-width: var(--content-max); margin-inline: auto; padding: var(--sp-2) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 38px; } .cis-topbar__tag { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-eyebrow); font-weight: 600; color: rgba(255,255,255,0.55); } .cis-topbar__contact { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-small); } .cis-topbar__hours { color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; gap: 0.45em; } .cis-topbar__hours svg, .cis-topbar__phone svg { width: 15px; height: 15px; } .cis-topbar__phone { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 0.45em; letter-spacing: 0.01em; } .cis-topbar__phone:hover { color: var(--cis-steel-bright); text-decoration: none; } @media (max-width: 620px) { .cis-topbar__tag, .cis-topbar__hours { display: none; } .cis-topbar__inner { justify-content: center; } } /* Main nav: condensed Oswald, uppercase, animated steel underline */ .nav-desktop a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.98rem; font-weight: 500; position: relative; } .nav-desktop a:hover { background: transparent; } /* Underline uses ::before so it never collides with the dropdown caret (::after on .has-dropdown > a). This keeps the indicator full-width under "Machinery". */ .nav-desktop > ul > li > a:not(.cta)::before { content: ""; position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: 7px; height: 2px; background: var(--cis-steel); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .nav-desktop > ul > li > a:not(.cta):hover::before, .nav-desktop > ul > li > a[aria-current="page"]:not(.cta)::before { transform: scaleX(1); } /* The dropdown caret sits right after the label; nudge the underline to clear it */ .nav-desktop > ul > li.has-dropdown > a:not(.cta)::before { right: calc(var(--sp-4) + 0.9em); } .nav-desktop a.cta { text-transform: uppercase; letter-spacing: 0.04em; background: var(--cis-steel); color: #fff; box-shadow: 0 1px 2px color-mix(in oklch, var(--cis-navy) 30%, transparent); } .nav-desktop a.cta:hover { background: color-mix(in oklch, var(--cis-steel) 86%, white); color: #fff; } .dropdown a { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; } .dropdown a::before { display: none; } /* Header layout: logo left, nav centered, CTA right (desktop) */ .site-header__actions { display: flex; align-items: center; gap: var(--sp-3); } .site-header__cta { text-transform: uppercase; letter-spacing: 0.04em; } @media (min-width: 880px) { .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; } .nav-desktop { justify-content: center; } .site-header__actions { justify-self: end; } } @media (max-width: 879px) { .site-header__cta { display: none; } } /* Mobile drawer: full-width, centered items, quote button under the menu */ @media (max-width: 879px) { .nav-mobile { inset: 0; width: 100vw; max-width: 100vw; border-left: none; padding: var(--sp-16) var(--sp-6) var(--sp-10); text-align: center; } .nav-mobile ul { gap: var(--sp-2); } .nav-mobile a { text-align: center; font-size: 1.15rem; } .nav-mobile details summary { justify-content: center; gap: var(--sp-2); font-size: 1.15rem; } .nav-mobile details ul { padding-left: 0; } .nav-mobile__cta { display: block; width: min(360px, 88%); margin: var(--sp-8) auto 0; } } /* ---------------------------------------------------------------------------- PRODUCT ROW (machinery category sections) - products under each category ---------------------------------------------------------------------------- */ .cis-prodrow { margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--color-border); } .cis-prodrow__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--color-text-muted); margin: 0 0 var(--sp-5); } .cis-prodrow .cis-products { grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); } /* ---------------------------------------------------------------------------- Buttons - accent (steel) + dark-surface variants ---------------------------------------------------------------------------- */ .btn-accent { background: var(--cis-steel); color: #fff; box-shadow: 0 1px 2px color-mix(in oklch, var(--cis-steel) 35%, transparent); } .btn-accent:hover { background: color-mix(in oklch, var(--cis-steel) 86%, white); color: #fff; box-shadow: 0 8px 18px color-mix(in oklch, var(--cis-steel) 30%, transparent); } .cis-band--dark .btn-ghost, .cis-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); } .cis-band--dark .btn-ghost:hover, .cis-hero .btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; } /* ---------------------------------------------------------------------------- Section rhythm + dark band ---------------------------------------------------------------------------- */ .cis-section { padding-block: var(--sp-20); } .cis-band--dark { background: var(--cis-ink); color: #fff; background-image: radial-gradient(60% 80% at 85% -10%, color-mix(in oklch, var(--cis-steel-bright) 24%, transparent), transparent 60%), linear-gradient(180deg, #2A314C, var(--cis-ink)); } .cis-band--dark h1, .cis-band--dark h2, .cis-band--dark h3, .cis-band--dark h4 { color: #fff; } .cis-band--dark p { color: rgba(255,255,255,0.74); } .cis-section-head { max-width: 60ch; } .cis-section-head.is-center { margin-inline: auto; text-align: center; } .cis-section-head h2 { margin-top: 0; } .cis-section-head p { color: var(--color-text-muted); font-size: var(--fs-lead); } .cis-band--dark .cis-section-head p { color: rgba(255,255,255,0.74); } /* ---------------------------------------------------------------------------- HERO - full-bleed charcoal over a fiber-laser image ---------------------------------------------------------------------------- */ .cis-hero { position: relative; isolation: isolate; color: #fff; padding-block: clamp(4.5rem, 8vw, 8.5rem); overflow: hidden; background: var(--cis-ink); } .cis-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .cis-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(22,26,42,0.94) 0%, rgba(22,26,42,0.82) 42%, rgba(22,26,42,0.42) 100%), linear-gradient(0deg, rgba(22,26,42,0.68), transparent 55%); } .cis-hero .container { position: relative; } .cis-hero__inner { max-width: 40rem; } /* Centered hero variant (machinery, about, contact) - single centered column */ .cis-hero--center .cis-hero__inner { max-width: 48rem; margin-inline: auto; text-align: center; } .cis-hero--center .cis-hero__inner .lead { margin-inline: auto; } .cis-hero--center .cis-hero__actions { justify-content: center; } /* Center the stat strip too, so the whole centered column reads as one axis */ .cis-hero--center .cis-hero__strip { justify-content: center; } /* Wider centered column (homepage) - lets the headline + stat strip breathe */ .cis-hero--wide .cis-hero__inner { max-width: 62rem; } /* Let the lead paragraph use the wider column instead of the narrow 46ch cap (extra class raises specificity over the base .cis-hero p.lead 46ch rule below) */ .cis-hero--wide .cis-hero__inner .lead { max-width: 60ch; } /* Keep the homepage headline on ONE line from tablet up: widen the column and scale the H1 to the viewport so it shrinks to fit instead of wrapping. Mobile keeps the default wrapping size so it stays readable on small screens. */ @media (min-width: 768px) { .cis-hero--wide .cis-hero__inner { max-width: min(76rem, 94vw); } /* selector carries 2 classes so it beats the base `.cis-hero h1` size rule that sits later in the file; vw-scaled so the single line always fits */ .cis-hero.cis-hero--wide h1 { white-space: nowrap; font-size: clamp(2.2rem, 5.2vw, 4.7rem); } } .cis-hero h1 { color: #fff; /* explicit: beats the global dark h1 color on the dark hero */ font-size: var(--fs-display); line-height: 1.02; letter-spacing: 0.004em; margin: 0 0 var(--sp-5); text-transform: uppercase; font-weight: 700; text-shadow: 0 2px 18px rgba(0,0,0,0.35); } .cis-hero h1 .accent { color: var(--cis-steel-bright); } .cis-hero p.lead { font-size: var(--fs-lead); color: rgba(255,255,255,0.82); max-width: 46ch; margin-bottom: var(--sp-8); } .cis-hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .cis-hero__strip { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-10); margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--cis-line-dark); } .cis-hero__stat .n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; color: #fff; } .cis-hero__stat .l { font-size: var(--fs-small); color: rgba(255,255,255,0.65); margin-top: var(--sp-1); } /* ---------------------------------------------------------------------------- TRUST BAR - manufacturers represented (thin strip under hero) ---------------------------------------------------------------------------- */ .cis-trustbar { background: var(--cis-ink-2); border-block: 1px solid var(--cis-line-dark); padding-block: var(--sp-5); margin-top: 0; /* flush against the hero (no stray gap) */ } /* Keep the dark hero -> trustbar -> dark category band as one continuous block */ .cis-trustbar + section { margin-top: 0; } .cis-trustbar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); } .cis-trustbar__label { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-eyebrow); font-weight: 600; color: rgba(255,255,255,0.5); } .cis-trustbar__name { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.03em; color: rgba(255,255,255,0.82); font-size: 1.05rem; } /* ---------------------------------------------------------------------------- CATEGORY GRID - dark cards, image top, hover lift + accent edge + spec reveal ---------------------------------------------------------------------------- */ /* Nine machinery lines = a clean 3x3. Pinned to three columns rather than auto-fit, which resolved to 4 + 4 + 1 and left an orphan tile on the last row. */ .cis-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } @media (max-width: 820px) { .cis-catgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cis-catgrid { grid-template-columns: 1fr; } } .cis-cat { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--cis-ink-2); border: 1px solid var(--cis-line-dark); text-decoration: none; color: #fff; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .cis-cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cis-steel-bright); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-base) var(--ease-out); z-index: 3; } .cis-cat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); text-decoration: none; } .cis-cat:hover::before { transform: scaleY(1); } .cis-cat__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0f141a; } .cis-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .cis-cat:hover .cis-cat__media img { transform: scale(1.06); } .cis-cat__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,20,26,0.85)); } .cis-cat__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); flex: 1; display: flex; flex-direction: column; } .cis-cat__brand { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cis-steel-bright); font-weight: 600; } .cis-cat__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin: var(--sp-1) 0 var(--sp-2); color: #fff; } .cis-cat__desc { font-size: var(--fs-small); color: rgba(255,255,255,0.66); margin: 0; } .cis-cat__link { margin-top: var(--sp-4); font-size: var(--fs-small); font-weight: 600; color: var(--cis-steel-bright); display: inline-flex; align-items: center; gap: 0.4em; } .cis-cat__link::after { content: "\2192"; transition: transform var(--dur-base) var(--ease-out); } .cis-cat:hover .cis-cat__link::after { transform: translateX(4px); } /* Homepage MACHINERY section: lightened variant - light gray band, white cards, steel-blue accents (scoped to #machinery so the shared dark band/card styles used elsewhere, e.g. About > values, stay dark). */ #machinery { background: var(--cis-light); } #machinery .cis-cat { background: #fff; border-color: var(--color-border); color: var(--color-text); } #machinery .cis-cat::before { background: var(--cis-steel); } #machinery .cis-cat__brand, #machinery .cis-cat__link { color: var(--cis-steel); } #machinery .cis-cat__title { color: var(--cis-navy); } #machinery .cis-cat__desc { color: var(--color-text-muted); } /* ---------------------------------------------------------------------------- PRODUCT CARDS - light surface, featured models ---------------------------------------------------------------------------- */ .cis-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); } /* "Other machines in this category" on product pages: cap card width so a lone sibling doesn't stretch full-width and balloon its image. */ .cis-products--related { grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); justify-content: start; } .cis-product { display: flex; flex-direction: column; background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .cis-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--cis-steel) 40%, var(--color-border)); } /* min-height:0 is load-bearing. .cis-product is a column flex container, so the media box is a flex item and picks up an automatic minimum size (min-height:auto) from its content. A tall portrait product shot (e.g. the 398x815 nitrogen generator) makes that content minimum ~614px, which BEATS the aspect-ratio height (~206px) and stretches the card. Landscape shots stay under the threshold, so only portrait images blew up. Zeroing the minimum lets aspect-ratio win and every card keeps the same media height. */ /* 4/3 rather than 16/11: the product shots range from wide (1100x526 laser) to tall (398x815 nitrogen generator). With object-fit:contain a taller box costs the wide shots nothing but whitespace, while giving the tall ones room to actually be legible. */ .cis-product__media { aspect-ratio: 4 / 3; background: #eef1f4; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .cis-product__media img { width: 100%; height: 100%; min-height: 0; object-fit: contain; } .cis-product__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; flex: 1; } .cis-product__brand { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cis-steel); font-weight: 700; } .cis-product__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: var(--sp-1) 0 var(--sp-2); } .cis-product__title a { color: var(--color-text); } .cis-product__title a:hover { color: var(--cis-steel); text-decoration: none; } .cis-product__desc { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0 0 var(--sp-5); flex: 1; } .cis-product .btn { align-self: flex-start; } a.cis-product__media { display: flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------------------- HOME PRODUCT LINEUP - masonry, grouped by machine type. This is NOT a CSS column-count layout. Multi-column flows items down column 1, then down column 2, which scattered the catalog's machine-type grouping (reading across gave product 1, then 7, then 13). Instead cis_lineup_columns() in includes/catalog.php assigns whole CATEGORIES to columns in PHP, and each column here is just a packed flex stack. Result: the staggered masonry look, but all the press brakes stay together, all the plate rolls stay together, etc. Do not switch this back to column-count. ---------------------------------------------------------------------------- */ .cis-lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; } .cis-lineup__col { display: flex; flex-direction: column; gap: var(--sp-6); } /* Natural media height is what creates the stagger - but cap it, or the tall portrait shots (the 398x815 nitrogen generator) tower over everything else. */ .cis-lineup .cis-product__media { aspect-ratio: auto; min-height: 190px; max-height: 340px; padding: var(--sp-6); } .cis-lineup .cis-product__media img { width: 100%; height: auto; max-height: 290px; object-fit: contain; } @media (max-width: 980px) { .cis-lineup { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .cis-lineup { grid-template-columns: 1fr; } } .cis-product__link { align-self: flex-start; font-weight: 700; font-size: var(--fs-small); color: var(--cis-steel); display: inline-flex; align-items: center; gap: 0.4em; } .cis-product__link::after { content: "\2192"; transition: transform var(--dur-base) var(--ease-out); } .cis-product:hover .cis-product__link::after { transform: translateX(4px); } /* ---------------------------------------------------------------------------- SHOP LAYOUT - left category sidebar + product grid (machinery hub + category) ---------------------------------------------------------------------------- */ .cis-shop { display: grid; grid-template-columns: 232px 1fr; gap: var(--sp-10); align-items: start; } .cis-shop__side { position: sticky; top: calc(var(--nav-height) + var(--sp-4)); background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-5); } .cis-shop__side-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--color-border); } .cis-shop__catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .cis-shop__catlist a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: 0.95rem; font-weight: 500; border-left: 3px solid transparent; } .cis-shop__catlist a:hover { background: var(--color-bg-alt); color: var(--cis-steel); text-decoration: none; } .cis-shop__catlist a.is-active { background: color-mix(in oklch, var(--cis-steel) 12%, transparent); color: var(--cis-navy); font-weight: 700; border-left-color: var(--cis-steel); } .cis-shop__side-cta { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-border); } .cis-shop__side-cta p { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0 0 var(--sp-3); } .cis-shop__side-cta .btn { width: 100%; } .cis-shop__side-phone { display: block; text-align: center; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--color-text-muted); } .cis-shop__main { min-width: 0; } .cis-shop__intro { margin-bottom: var(--sp-8); } .cis-shop__intro .cis-lead { font-size: var(--fs-lead); color: var(--color-text-muted); } .cis-shop__intro-link { margin-top: var(--sp-5); } .cis-shop__intro-link a { font-size: var(--fs-small); font-weight: 700; color: var(--cis-steel); } .cis-shop__intro-link a::after { content: " \2197"; } .cis-shop__group { margin-bottom: var(--sp-12); } .cis-shop__grouphead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--color-border); padding-bottom: var(--sp-3); } .cis-shop__grouphead h2 { margin: 0; font-size: var(--fs-h3); } .cis-shop__grouphead h2 a { color: var(--color-text); } .cis-shop__grouphead h2 a:hover { color: var(--cis-steel); text-decoration: none; } .cis-shop__grouplink { font-size: var(--fs-small); font-weight: 700; color: var(--cis-steel); white-space: nowrap; } .cis-shop .cis-products { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } @media (max-width: 820px) { .cis-shop { grid-template-columns: 1fr; gap: var(--sp-6); } .cis-shop__side { position: static; } .cis-shop__catlist { flex-direction: row; flex-wrap: wrap; } .cis-shop__catlist a { border-left: none; border-bottom: 3px solid transparent; } .cis-shop__catlist a.is-active { border-left: none; border-bottom-color: var(--cis-steel); } .cis-shop__side-cta { display: none; } } /* ---------------------------------------------------------------------------- PRODUCT DETAIL PAGE ---------------------------------------------------------------------------- */ .cis-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; } .cis-pdp__media { background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-8); display: flex; align-items: center; justify-content: center; position: sticky; top: calc(var(--nav-height) + var(--sp-4)); } .cis-pdp__media img { width: 100%; height: auto; max-height: 460px; object-fit: contain; } .cis-pdp__back { display: inline-block; font-size: var(--fs-small); font-weight: 600; color: var(--cis-steel); margin-bottom: var(--sp-3); } .cis-pdp__body h1 { margin-top: var(--sp-1); } .cis-pdp__actions { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-6); } .cis-pdp__phone { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--cis-navy); } .cis-pdp__phone svg { width: 20px; height: 20px; color: var(--cis-steel); } @media (max-width: 820px) { .cis-pdp { grid-template-columns: 1fr; gap: var(--sp-8); } .cis-pdp__media { position: static; } } /* ---------------------------------------------------------------------------- SPLIT - alternating image + story ---------------------------------------------------------------------------- */ .cis-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; } .cis-split--flip .cis-split__media { order: 2; } .cis-split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .cis-split__body h2 { margin-top: 0; } @media (max-width: 820px) { .cis-split { grid-template-columns: 1fr; gap: var(--sp-8); } .cis-split--flip .cis-split__media { order: 0; } } /* Spec / feature list used in split bodies */ .cis-doclist { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-2); } .cis-doclist li { position: relative; padding-left: 1.6em; font-size: 0.95rem; color: var(--color-text); } .cis-doclist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6em; height: 0.6em; border-radius: 2px; background: var(--cis-steel); transform: rotate(45deg); } .cis-band--dark .cis-doclist li { color: rgba(255,255,255,0.82); } .cis-band--dark .cis-doclist li::before { background: var(--cis-steel-bright); } /* ---------------------------------------------------------------------------- VALUE PROPS - icon row ---------------------------------------------------------------------------- */ .cis-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); } .cis-value { padding: var(--sp-2) 0; } .cis-value__icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--cis-steel) 16%, transparent); color: var(--cis-steel); margin-bottom: var(--sp-3); } .cis-band--dark .cis-value__icon { background: rgba(92,148,174,0.18); color: var(--cis-steel-bright); } .cis-value__icon svg { width: 26px; height: 26px; } .cis-value h3 { font-size: 1.15rem; margin: 0 0 var(--sp-2); } .cis-value p { font-size: var(--fs-small); margin: 0; } /* ---------------------------------------------------------------------------- MANUFACTURER WALL - wordmark plates (swap for real logos at handoff) ---------------------------------------------------------------------------- */ /* Eight partner logos = two even rows of four. Pinned to 4 columns rather than auto-fit, which packed 6 across and left a ragged 6 + 2. */ .cis-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } @media (max-width: 780px) { .cis-logos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .cis-logos { grid-template-columns: 1fr; } } .cis-logo { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: var(--sp-5); background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--cis-navy); text-align: center; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out); } .cis-logo small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 2px; } .cis-logo:hover { border-color: var(--cis-steel); transform: translateY(-3px); } .cis-logo img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.78; transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .cis-logo:hover img { filter: grayscale(0); opacity: 1; } /* ---------------------------------------------------------------------------- SALES REP CARDS (contact) - name + territory + phone (no email per brand rule) ---------------------------------------------------------------------------- */ .cis-reps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); } .cis-rep { padding: var(--sp-6); background: var(--color-bg-elev); border: 1px solid var(--color-border); border-radius: var(--radius-lg); border-top: 3px solid var(--cis-steel); } .cis-rep__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--sp-1); } .cis-rep__terr { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cis-steel); font-weight: 600; margin: 0 0 var(--sp-4); } .cis-rep__phone { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; } .cis-rep__phone svg { width: 18px; height: 18px; } .cis-rep__email { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.9rem; word-break: break-all; } .cis-rep__email svg { width: 18px; height: 18px; flex-shrink: 0; } .cis-rep__note { font-size: var(--fs-small); color: var(--color-text-muted); margin: var(--sp-2) 0 0; } /* Contact split: form + info */ .cis-contact { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-12); align-items: start; } @media (max-width: 860px) { .cis-contact { grid-template-columns: 1fr; gap: var(--sp-10); } } .cis-contact .form { max-width: none; } .cis-infocard { background: var(--cis-ink); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-8); } .cis-infocard h3 { color: #fff; margin-top: 0; } .cis-infocard a { color: var(--cis-steel-bright); } .cis-infocard p { color: rgba(255,255,255,0.74); } .cis-infocard__row { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--cis-line-dark); } .cis-infocard__row:first-of-type { border-top: 0; } .cis-infocard__row svg { width: 20px; height: 20px; color: var(--cis-steel-bright); flex-shrink: 0; margin-top: 3px; } /* ---------------------------------------------------------------------------- REVEAL ON SCROLL - the workhorse motion (transform/opacity only) ---------------------------------------------------------------------------- */ /* Hidden only when JS is on (html.js set by an inline head script). Without JS - or before the class is set - content stays visible, so no-JS users and crawlers never see blank sections. */ html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } html.js .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------------------------- CLOSING CTA - bespoke industrial "quote bar" (replaces the stock gradient band) Navy panel, steel diagonal-stripe accent, headline left + phone/button right. ---------------------------------------------------------------------------- */ .cis-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 0.9fr; align-items: center; gap: var(--sp-10); padding: var(--sp-12) var(--sp-12); border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--cis-ink) 60%, #2A3450 100%); color: #fff; border: 1px solid var(--cis-line-dark); } /* diagonal machined-steel hazard stripes on the right edge */ .cis-cta::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; background-image: repeating-linear-gradient(135deg, color-mix(in oklch, var(--cis-steel) 22%, transparent) 0 10px, transparent 10px 26px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; } .cis-cta__main { position: relative; z-index: 1; } .cis-cta .cis-eyebrow { color: var(--cis-steel-bright); } .cis-cta__main h2 { color: #fff; margin: var(--sp-1) 0 var(--sp-3); } .cis-cta__main p { color: rgba(255,255,255,0.74); margin: 0; max-width: 46ch; } .cis-cta__action { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .cis-cta__phone { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .cis-cta__phone svg { width: 24px; height: 24px; color: var(--cis-steel-bright); } .cis-cta__phone:hover { color: var(--cis-steel-bright); text-decoration: none; } .cis-cta__note { font-size: var(--fs-small); color: rgba(255,255,255,0.55); } @media (max-width: 760px) { .cis-cta { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-10) var(--sp-6); text-align: left; } .cis-cta::after { width: 100%; height: 40%; top: auto; bottom: 0; -webkit-mask-image: linear-gradient(0deg, transparent, #000 80%); mask-image: linear-gradient(0deg, transparent, #000 80%); } } /* ---------------------------------------------------------------------------- FAQ ACCORDION - native
/, no JS. Q&A pairs come from site-config.php -> 'faq' (same source as the FAQPage JSON-LD). Marker is hidden and replaced with a steel "+" that rotates 45deg into an "x" when the panel is open. ---------------------------------------------------------------------------- */ .cis-faq { max-width: 56rem; margin-inline: auto; border-top: 1px solid var(--color-border); } .cis-faq__item { border-bottom: 1px solid var(--color-border); background: var(--color-bg-elev); } .cis-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-5) var(--sp-2); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: var(--lh-snug); color: var(--color-text); transition: color var(--dur-base) var(--ease); } /* Kill the default disclosure triangle in every engine */ .cis-faq__q::-webkit-details-marker { display: none; } .cis-faq__q::marker { content: ""; } .cis-faq__q:hover { color: var(--cis-steel); } .cis-faq__q:focus-visible { outline: 2px solid var(--color-primary-ring); outline-offset: 2px; } .cis-faq__q::after { content: "+"; flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--cis-steel); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .cis-faq__item[open] .cis-faq__q { color: var(--cis-navy); } .cis-faq__item[open] .cis-faq__q::after { transform: rotate(45deg); background: var(--cis-navy); border-color: var(--cis-navy); color: #fff; } .cis-faq__a { padding: 0 var(--sp-2) var(--sp-6); } .cis-faq__a p { margin: 0; max-width: 68ch; color: var(--color-text-muted); line-height: var(--lh-normal); } @media (prefers-reduced-motion: reduce) { .cis-faq__q::after { transition: none; } } @media (max-width: 600px) { .cis-faq__q { font-size: 1.05rem; gap: var(--sp-4); padding-block: var(--sp-4); } } /* Footer: subtle dark treatment to match the industrial feel */ .site-footer { background: var(--cis-ink); border-top: 1px solid var(--cis-line-dark); margin-top: var(--sp-20); } .site-footer h4 { color: rgba(255,255,255,0.55); } .site-footer a, .site-footer .brand__name { color: rgba(255,255,255,0.82); } .site-footer a:hover { color: var(--cis-steel-bright); } .site-footer__tagline, .site-footer__address, .site-footer__bottom { color: rgba(255,255,255,0.6); } .site-footer__bottom { border-top-color: var(--cis-line-dark); } .site-footer__address a { color: var(--cis-steel-bright); } @media (max-width: 600px) { .cis-hero__strip { gap: var(--sp-5) var(--sp-6); } .cis-section { padding-block: var(--sp-16); } } /* Doubled Powered-by-Spark footer badge - 2026-07-07 (LINGO-SPARK-BADGE-2X) */ .spark-mark { width: 3.2em; height: 3.2em; vertical-align: middle; margin-left: -0.63em; margin-top: -0.8em; margin-bottom: -0.8em; } /* ---------------------------------------------------------------------------- Accessibility - WCAG 2.1 AA (2026-07-13) ---------------------------------------------------------------------------- */ /* WCAG 1.4.1 Use of Color: a link sitting INSIDE a block of running text cannot be signalled by color alone, so it has to carry an underline. Scoped to

inside

on purpose - nav, footer and card link LISTS are not text blocks and are exempt, so they keep their clean underline-free look. */ #main p a:not(.btn):not(.cis-btn) { text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------------------- Press release (About) - client-supplied MC Machinery release, 2026-07-07. Intro paragraph is always visible; the bios sit behind a Read More expand built on native
so it works with no JavaScript. ---------------------------------------------------------------------------- */ .cis-press { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start; } .cis-press__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* Standfirst (the press release's deck line) sits at the top of the right column, above the opening paragraph, rather than under the headline. */ .cis-press__standfirst { margin-top: 0; font-weight: 600; color: var(--cis-navy); border-left: 3px solid var(--cis-steel); padding-left: var(--sp-4); } .cis-press__body .cis-lead { font-size: var(--fs-lead); color: var(--color-text-muted); } .cis-press__standfirst + .cis-lead { margin-top: var(--sp-5); } .cis-readmore { margin-top: var(--sp-6); } .cis-readmore__toggle { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cis-steel); } .cis-readmore__toggle::-webkit-details-marker { display: none; } .cis-readmore__toggle::marker { content: ""; } .cis-readmore__toggle:hover { color: var(--cis-navy); } .cis-readmore__toggle:focus-visible { outline: 2px solid var(--color-primary-ring); outline-offset: 3px; } .cis-readmore__toggle::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast) var(--ease); } .cis-readmore[open] .cis-readmore__toggle::after { transform: translateY(2px) rotate(-135deg); } /* Real text in both states, so screen readers announce the control correctly. */ .cis-readmore__less { display: none; } .cis-readmore[open] .cis-readmore__more { display: none; } .cis-readmore[open] .cis-readmore__less { display: inline; } .cis-readmore__body { padding-top: var(--sp-5); } .cis-readmore__body h3 { font-size: var(--fs-h4, 1.15rem); margin-bottom: var(--sp-2); } .cis-readmore__body h3 + p { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .cis-readmore__toggle::after { transition: none; } } @media (max-width: 820px) { .cis-press { grid-template-columns: 1fr; gap: var(--sp-8); } }