/* ============================================================ DigiSignWall — Marketing site Light theme: white surfaces, Blue primary, Slate ink Mobile-first, responsive, accessible (WCAG AA contrast) ============================================================ */ :root { /* Brand */ --primary: #1D4ED8; /* Blue 700 — AA on white */ --primary-dark: #1E3A8A; /* Blue 900 */ --primary-light: #EFF6FF; /* Blue 50 */ --accent: #0E7490; /* Cyan 700 — AA on white */ --success: #047857; /* Emerald 700 */ /* Slate scale */ --slate-900: #0F172A; --slate-800: #1E293B; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; --slate-300: #CBD5E1; --slate-200: #E2E8F0; --slate-100: #F1F5F9; --slate-50: #F8FAFC; --white: #FFFFFF; /* Semantic */ --bg: var(--white); --bg-alt: var(--slate-50); --surface: var(--white); --text: var(--slate-900); --text-body: var(--slate-700); --text-muted: var(--slate-600); --border: var(--slate-200); --radius: 14px; --radius-sm: 10px; --maxw: 1160px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --shadow: 0 4px 6px -2px rgba(15, 23, 42, .05), 0 12px 24px -8px rgba(15, 23, 42, .12); --shadow-lg: 0 12px 20px -8px rgba(15, 23, 42, .10), 0 28px 48px -16px rgba(15, 23, 42, .18); --grad: linear-gradient(135deg, var(--primary) 0%, #0891B2 100%); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; /* Clip sideways overflow here, not on : setting overflow-x on body forces overflow-y:auto, which makes body its own scroll container and strands the last screenful on mobile. */ overflow-x: hidden; } body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text-body); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4 { color: var(--text); line-height: 1.25; } /* Visible focus for keyboard users */ :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .container.narrow { max-width: 780px; } .section { padding: 72px 0; } .section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .95rem; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; white-space: nowrap; } .btn-lg { padding: 14px 26px; font-size: 1rem; } .btn-block { width: 100%; } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow); transform: translateY(-1px); } .btn-outline { border-color: var(--slate-300); color: var(--text); background: var(--white); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } .btn-ghost { color: var(--text-muted); } .btn-ghost:hover { color: var(--primary); background: var(--primary-light); } /* On the dark CTA banner, invert the outline button so it stays legible */ .cta-banner .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .cta-banner .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } .cta-banner .btn-primary { background: #fff; color: var(--primary-dark); } .cta-banner .btn-primary:hover { background: var(--slate-100); color: var(--primary-dark); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 1.2rem; color: var(--text); } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); position: relative; flex-shrink: 0; } .brand-mark::after { content: ""; position: absolute; inset: 7px 7px auto auto; width: 8px; height: 8px; border-radius: 2px; background: #fff; opacity: .95; } .brand-accent { color: var(--accent); } .nav-links { display: none; gap: 28px; } .nav-links a { color: var(--text-muted); font-weight: 500; font-size: .94rem; transition: color .15s; } .nav-links a:hover { color: var(--primary); } .nav-links a[aria-current="page"] { color: var(--primary); font-weight: 600; } .nav-cta { display: none; gap: 10px; } /* hamburger */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; margin-right: -8px; padding: 0; } .nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .25s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px 22px; border-bottom: 1px solid var(--border); background: var(--white); } /* [hidden] must win over the display:flex above */ .mobile-menu[hidden] { display: none; } .mobile-menu a { padding: 12px 10px; color: var(--text-body); font-weight: 500; border-radius: 8px; } .mobile-menu a:hover { background: var(--primary-light); color: var(--primary); } .mobile-menu .btn { margin-top: 8px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 56px 0 64px; overflow: hidden; isolation: isolate; /* Deep base so the aurora ribbons have something to glow against. */ background: linear-gradient(168deg, #0B1120 0%, #131E3A 55%, #0E1A33 100%); color: #E8EDFA; } /* ---- Aurora ------------------------------------------------------------ Two large, heavily-blurred conic/radial ribbons drifting behind the hero. Both layers animate transform + opacity only, so the work stays on the compositor and never triggers layout or paint. `will-change` promotes them once rather than thrashing on each frame. */ .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(72px); opacity: .55; will-change: transform; } .hero::before { width: 78vw; height: 78vw; max-width: 900px; max-height: 900px; top: -34%; left: -18%; background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, .85), transparent 62%), radial-gradient(circle at 70% 60%, rgba(99, 102, 241, .80), transparent 66%); animation: aurora-a 19s ease-in-out infinite alternate; } .hero::after { width: 68vw; height: 68vw; max-width: 780px; max-height: 780px; right: -16%; bottom: -38%; background: radial-gradient(circle at 60% 40%, rgba(45, 212, 191, .70), transparent 60%), radial-gradient(circle at 30% 70%, rgba(168, 85, 247, .65), transparent 64%); animation: aurora-b 23s ease-in-out infinite alternate; } @keyframes aurora-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 4%, 0) scale(1.12); } 100% { transform: translate3d(-4%, 7%, 0) scale(1.04); } } @keyframes aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1.06); } 50% { transform: translate3d(-7%, -5%, 0) scale(1); } 100% { transform: translate3d(5%, -3%, 0) scale(1.14); } } /* Fine grain breaks up the gradient banding on wide displays. */ .hero > .container { position: relative; z-index: 1; } /* Hero sits on a dark ground now, so its type and chrome need lifting. */ .hero h1 { color: #F8FAFF; } .hero .lede { color: rgba(226, 234, 250, .82); } .hero .lede strong { color: #FFFFFF; } .hero .eyebrow { color: #A5F3FC; background: rgba(165, 243, 252, .10); border-color: rgba(165, 243, 252, .34); } .hero .grad { background: linear-gradient(100deg, #7DD3FC 0%, #A5B4FC 48%, #5EEAD4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .btn-outline { color: #EAF2FF; border-color: rgba(234, 242, 255, .42); background: rgba(255, 255, 255, .06); } .hero .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: rgba(234, 242, 255, .7); } /* Respect a reduced-motion preference: keep the colour, drop the drift. */ @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } } .hero-grid { display: grid; gap: 44px; align-items: center; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: #ECFEFF; border: 1px solid #A5F3FC; padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .hero h1 { font-size: clamp(1.85rem, 6vw, 3.4rem); line-height: 1.12; font-weight: 800; letter-spacing: -.025em; overflow-wrap: break-word; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { margin-top: 18px; font-size: 1.09rem; color: var(--text-body); max-width: 560px; } .lede strong { color: var(--text); font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-actions.center { justify-content: center; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; color: var(--text-muted); font-size: .9rem; } .hero-trust li { display: flex; align-items: center; gap: 7px; } .hero-trust svg { color: var(--success); flex-shrink: 0; } /* Hero sits on the dark aurora, so lift these above the light-theme defaults. */ .hero .hero-trust, .hero .hero-trust li { color: rgba(232, 240, 254, .92); } .hero .hero-trust svg { color: #5EEAD4; } /* ---------- Hero billboard scene ---------- An outdoor digital billboard on a stand, against a dusk skyline, with content slides cross-fading on the screen. Pure CSS — no image requests, so it adds nothing to LCP and survives a strict CSP. ------------------------------------------------------------------ */ /* !important overrides the inline height:0 guard in the markup, which exists so the scene collapses instead of spilling raw text when this file is stale. */ .hero-visual { position: relative; display: flex; justify-content: center; height: auto !important; overflow: visible !important; } .scene { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3.3; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #172554 0%, #1E3A8A 34%, #7C3AED 58%, #F97316 84%, #FBBF24 100%); box-shadow: var(--shadow-lg); } /* dusk glow — warm sun low on the horizon, cool up top */ .scene-sky { position: absolute; inset: 0; background: radial-gradient(52% 30% at 72% 76%, rgba(253, 224, 71, .85), transparent 68%), radial-gradient(70% 42% at 76% 82%, rgba(249, 115, 22, .6), transparent 72%), radial-gradient(46% 34% at 14% 8%, rgba(30, 58, 138, .55), transparent 70%); } /* skyline — kept low so the board and its stand read clearly against the sky. z-index puts it above the sky glow so buildings silhouette instead of washing out. */ .scene-city { position: absolute; left: 0; right: 0; bottom: 14%; height: 30%; z-index: 1; } .bldg { position: absolute; bottom: 0; background: #111C33; opacity: .95; border-radius: 3px 3px 0 0; /* window grid */ background-image: linear-gradient(90deg, rgba(226,232,240,.13) 1.5px, transparent 1.5px), linear-gradient(180deg, rgba(226,232,240,.13) 1.5px, transparent 1.5px); background-size: 9px 11px; } .b1 { left: 1%; width: 13%; height: 56%; } .b2 { left: 14%; width: 10%; height: 78%; } .b3 { left: 25%; width: 8%; height: 44%; } .b4 { left: 62%; width: 11%; height: 62%; } .b5 { left: 73%; width: 9%; height: 40%; } .b6 { left: 82%; width: 12%; height: 72%; } .b7 { left: 94%; width: 8%; height: 50%; } .scene-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 1; background: linear-gradient(180deg, #253449, #0F172A); } /* ---- billboard ---- */ .board { position: absolute; left: 7%; top: 8%; width: 62%; z-index: 2; } .board-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #0B1220; border: 5px solid #E2E8F0; box-shadow: 0 18px 40px rgba(2, 6, 23, .55), 0 0 44px rgba(56, 189, 248, .28); /* lets the slide type scale with the board via cqw units */ container-type: inline-size; } /* content slides */ .slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 5%; padding: 8% 9%; opacity: 0; animation: slideCycle 12s infinite; } .slide-1 { background: linear-gradient(135deg, #1D4ED8, #0891B2); animation-delay: 0s; } .slide-2 { background: linear-gradient(135deg, #0F172A, #334155); animation-delay: 4s; } .slide-3 { background: linear-gradient(135deg, #7C2D12, #B45309); animation-delay: 8s; } .slide-kicker { font-size: clamp(.42rem, 1.5cqw, .58rem); font-weight: 800; letter-spacing: .16em; color: rgba(255, 255, 255, .72); } .slide-title { font-size: clamp(1rem, 5.4cqw, 1.75rem); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -.02em; } .slide-sub { font-size: clamp(.5rem, 2.2cqw, .8rem); color: rgba(255, 255, 255, .85); } .menu-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: clamp(.48rem, 2cqw, .74rem); color: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 3%; } .menu-row b { color: #fff; font-weight: 700; } .menu-row b.ok { color: #6EE7B7; } .menu-row b.warn { color: #FCD34D; } /* screen furniture */ .board-live { position: absolute; top: 6%; right: 5%; z-index: 3; font-size: clamp(.4rem, 1.5cqw, .55rem); font-weight: 800; letter-spacing: .06em; color: #6EE7B7; background: rgba(6, 78, 59, .82); border: 1px solid rgba(110, 231, 183, .5); padding: 2px 6px; border-radius: 5px; } /* glass sheen */ .board-glass { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.16) 8%, transparent 36%); } /* slow scanline sweep, so the screen reads as "live" */ .board-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 44%, rgba(255,255,255,.07) 50%, transparent 56%); animation: scan 5.5s linear infinite; } /* top-rail spotlights */ .board-lights { position: absolute; top: -13px; left: 12%; right: 12%; height: 13px; display: flex; justify-content: space-between; z-index: 1; } .board-lights i { width: 15%; height: 5px; border-radius: 3px 3px 0 0; background: #CBD5E1; position: relative; } .board-lights i::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 26px solid rgba(253, 224, 71, .22); } /* stand */ .board-leg { position: absolute; top: 100%; width: 7px; height: 78px; background: linear-gradient(180deg, #94A3B8, #475569); } .board-leg-l { left: 24%; } .board-leg-r { right: 24%; } .board-brace { position: absolute; top: calc(100% + 34px); left: 24%; right: 24%; height: 5px; background: #64748B; } .board-base { position: absolute; top: calc(100% + 78px); left: 16%; right: 16%; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #475569, #1E293B); } /* ---- paired small screen ---- */ .mini { position: absolute; right: 6%; bottom: 17%; width: 20%; z-index: 2; } .mini-screen { display: block; aspect-ratio: 9 / 14; border-radius: 6px; border: 3px solid #CBD5E1; background: linear-gradient(150deg, #1D4ED8, #0891B2); box-shadow: 0 10px 24px rgba(2, 6, 23, .5); animation: miniSync 12s infinite; } .mini-stand { display: block; width: 5px; height: 26px; margin: 0 auto; background: linear-gradient(180deg, #94A3B8, #475569); } /* ---- motion ---- */ @keyframes slideCycle { 0%, 2% { opacity: 0; transform: translateY(6px) scale(.995); } 6%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px) scale(1.005); } } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* the paired screen recolours in step with the billboard — "synced" */ @keyframes miniSync { 0%, 30% { background: linear-gradient(150deg, #1D4ED8, #0891B2); } 34%, 63% { background: linear-gradient(150deg, #0F172A, #334155); } 67%, 96% { background: linear-gradient(150deg, #7C2D12, #B45309); } 100% { background: linear-gradient(150deg, #1D4ED8, #0891B2); } } /* Looping motion is decorative: hold the first slide and stop the sweep. */ @media (prefers-reduced-motion: reduce) { .slide, .board-scan, .mini-screen { animation: none !important; } .slide-1 { opacity: 1; } .slide-2, .slide-3 { opacity: 0; } } /* ---------- Stats ---------- */ .stats { border-block: 1px solid var(--border); background: var(--bg-alt); padding: 32px 0; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; text-align: center; } .stats-grid strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; } .stats-grid span { font-size: .85rem; color: var(--text-muted); } /* ---------- Section heads ---------- */ .section-head { text-align: center; max-width: 660px; margin: 0 auto 44px; } .section-head h2 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); font-weight: 800; letter-spacing: -.022em; margin-top: 6px; } .section-head p { margin-top: 12px; color: var(--text-muted); } /* ---------- Feature cards ---------- Each card is a white surface sitting on a soft colored layer that peeks out behind it, with a slight tilt — the "scattered sticker" look. The tilt lives on the card itself; the color comes from a ::before behind it, so the markup stays clean. ------------------------------------------------------------------ */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 26px; } .card { --card-tint: #DBEAFE; --card-tilt: -1.6deg; --card-shift: 10px; position: relative; border-radius: var(--radius); padding: 27px; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .06)) drop-shadow(0 8px 18px rgba(15, 23, 42, .07)); /* At rest the card sits flat and plain — no tilt. */ transform: none; transition: transform .3s cubic-bezier(.2,.7,.3,1), filter .3s ease; } /* The colored layer. At rest it hides exactly behind the card (no offset, no rotation) so the card reads as a plain white surface; on hover/press it slides and rotates out from underneath. */ .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--card-tint); transform: none; transition: transform .3s cubic-bezier(.2,.7,.3,1); } /* The white surface, painted over the tint. Using an ::after (rather than a negative z-index on ::before) keeps the whole stack inside the card, so it can't sink behind the section background. */ .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface); border: 1px solid var(--border); } /* Card content sits above both layers. */ .card > * { position: relative; z-index: 1; } /* Vary which way each card leans and which corner its colour emerges from, so the grid animates with some variety instead of every card moving identically. These only take effect on hover/press — at rest every card is flat. */ .card:nth-child(even) { --card-tilt: 1.4deg; --card-shift: -10px; } .card:nth-child(3n) { --card-tilt: -1deg; --card-shift: 11px; } .card:nth-child(4n) { --card-tilt: 1.8deg; --card-shift: -9px; } .card:nth-child(5n) { --card-tilt: -2deg; --card-shift: 12px; } /* Tints cycle through the brand palette, echoing the reference */ .card:nth-child(6n+1) { --card-tint: #BFD9FB; } /* blue */ .card:nth-child(6n+2) { --card-tint: #FBD6BC; } /* peach */ .card:nth-child(6n+3) { --card-tint: #D5CFFA; } /* violet */ .card:nth-child(6n+4) { --card-tint: #F8C9C9; } /* rose */ .card:nth-child(6n+5) { --card-tint: #FAE3A0; } /* amber */ .card:nth-child(6n+6) { --card-tint: #B6E5D4; } /* mint */ /* ---- Interaction: the colour emerges from behind a plain card ---- At rest the card is flat and white. On hover / keyboard focus / touch press it lifts and takes on a slight tilt while the colored layer slides and rotates out from underneath. `.is-pressed` is added by JS on touchstart (see main.js) because :hover does not fire reliably on touch devices. ------------------------------------------------------------------ */ .card:hover, .card:focus-within, .card.is-pressed { transform: rotate(var(--card-tilt)) translateY(-8px) scale(1.015); filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .09)) drop-shadow(0 22px 38px rgba(15, 23, 42, .16)); } .card:hover::before, .card:focus-within::before, .card.is-pressed::before { /* Counter-rotate and slide so the tint fans out past the card edge. */ transform: rotate(calc(var(--card-tilt) * -3.2)) translate(calc(var(--card-shift) * 1.9), calc(var(--card-shift) * 1.5)); } /* Touch press should settle quickly — no lingering transition on release. */ .card.is-pressed, .card.is-pressed::before { transition-duration: .22s; } .card-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--primary-light); border: 1px solid #BFDBFE; border-radius: 12px; margin-bottom: 16px; color: var(--primary); } .card h3 { font-size: 1.1rem; margin-bottom: 8px; } .card p { color: var(--text-muted); font-size: .94rem; } /* Rotation and the slide-out are decorative. Under reduced motion, drop the tilt and the movement but keep a static colored edge so the cards still read as layered rather than losing their identity entirely. */ @media (prefers-reduced-motion: reduce) { /* Keep cards flat and still. The colour reveal is decorative, so hovering just shows a small static edge rather than sliding anything out. */ .card, .card:hover, .card:focus-within, .card.is-pressed { transform: none !important; } .card::before { transform: none !important; } .card:hover::before, .card:focus-within::before, .card.is-pressed::before { transform: translate(6px, 6px) !important; } } /* ---------- Solutions ---------- */ .solution-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .solution { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 22px 24px; transition: box-shadow .2s, transform .2s, border-left-color .2s; } .solution:hover { border-left-color: var(--accent); transform: translateX(3px); box-shadow: var(--shadow); } .solution h3 { font-size: 1.06rem; margin-bottom: 6px; } .solution h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--slate-300); text-underline-offset: 3px; } .solution h3 a:hover { color: var(--primary); text-decoration-color: currentColor; } .solution p { color: var(--text-muted); font-size: .92rem; } .solution-points { list-style: none; margin-top: 12px; display: grid; gap: 7px; } .solution-points li { display: flex; align-items: flex-start; gap: 8px; font-size: .87rem; color: var(--text-body); } .solution-points svg { flex: none; margin-top: 3px; color: var(--primary); } .hw-note { margin-top: 26px; text-align: center; color: var(--text-muted); font-size: .92rem; } .hw-note a { color: var(--primary); font-weight: 600; } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: 1fr; gap: 24px; } .steps li { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px 24px; box-shadow: var(--shadow-sm); } .step-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; } .steps h3 { font-size: 1.1rem; margin-bottom: 6px; } .steps p { color: var(--text-muted); font-size: .94rem; } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; } .plan { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .plan-featured { border-color: var(--primary); border-width: 2px; box-shadow: var(--shadow-lg); } .plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; padding: 5px 14px; border-radius: 999px; letter-spacing: .04em; white-space: nowrap; } .plan h3 { font-size: 1.15rem; } .plan-sub { font-size: .88rem; color: var(--text-muted); margin-top: 4px; } .price { font-size: 2.4rem; font-weight: 800; margin: 12px 0 18px; color: var(--text); letter-spacing: -.02em; } .price span { font-size: 1rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; } .plan ul { display: grid; gap: 10px; margin-bottom: 24px; flex: 1; } .plan ul li { color: var(--text-body); font-size: .94rem; display: flex; align-items: flex-start; gap: 9px; } .plan ul svg { color: var(--success); flex-shrink: 0; margin-top: 5px; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 20px; transition: border-color .2s, box-shadow .2s; } .faq details[open] { border-color: var(--slate-300); box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 17px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--primary); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { color: var(--text-muted); padding-bottom: 18px; font-size: .94rem; } /* ---------- CTA banner ---------- */ .cta-banner { margin: 0 20px 72px; border-radius: 24px; background: radial-gradient(80% 130% at 100% 0%, rgba(6, 182, 212, .35), transparent 60%), var(--primary-dark); } .cta-inner { text-align: center; padding: 56px 20px; } .cta-inner h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -.02em; } .cta-inner p { color: #DBEAFE; margin: 12px auto 4px; max-width: 520px; } /* ---------- Promo banners ---------- Full-width bands placed between sections on the home page. They reuse the CTA banner's shape so the page keeps one visual language, but sit on their own backgrounds and carry a two-column layout on wide screens: copy on the left, a supporting visual on the right. Mobile-first: the visual is below the copy by default and only moves alongside it once there is room, which keeps the message first on a phone where most of this traffic lands. */ .promo { margin: 0 20px 72px; border-radius: 24px; overflow: hidden; } .promo-inner { padding: 40px 24px; display: grid; gap: 28px; align-items: center; } .promo .eyebrow { opacity: 1; } .promo-dark .eyebrow { color: #A5F3FC; background: rgba(165, 243, 252, .12); border-color: rgba(165, 243, 252, .38); } .promo-dark h2, .promo-dark h3 { color: #fff; } .promo-light .eyebrow { color: var(--accent); background: #ECFEFF; border-color: #A5F3FC; } .promo-light h2, .promo-light h3 { color: var(--text); } .promo-dark .promo-points li { color: #EAF2FF; } .promo-dark .promo-points svg { color: #5EEAD4; } .promo-light .promo-points li { color: var(--text-body); } .promo-light .promo-points svg { color: var(--primary); } .promo h2 { font-size: clamp(1.5rem, 4.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 0; } .promo p { margin: 12px 0 0; max-width: 46ch; } .promo .hero-actions { margin-top: 22px; } /* Dark band — used for the AI banner, so it reads as the headline moment. */ .promo-dark { background: radial-gradient(90% 140% at 100% 0%, rgba(6, 182, 212, .38), transparent 62%), var(--primary-dark); color: #fff; } .promo-dark p { color: #DBEAFE; } .promo-dark .btn-primary { background: #fff; color: var(--primary-dark); } .promo-dark .btn-primary:hover { background: var(--slate-100); color: var(--primary-dark); } .promo-dark .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .promo-dark .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; } /* Light band — quieter, so three banners on one page do not shout equally. */ .promo-light { background: var(--slate-100); border: 1px solid var(--border); } .promo-light p { color: var(--text-muted); } /* The supporting visual. Built from CSS rather than an image so it stays crisp at any size, costs no extra request, and never blocks first paint. */ .promo-visual { border-radius: var(--radius); padding: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); } .promo-light .promo-visual { background: #fff; border-color: var(--border); } .promo-chat { display: grid; gap: 10px; } .promo-bubble { border-radius: 12px; padding: 10px 13px; font-size: .86rem; line-height: 1.45; background: rgba(255,255,255,.14); } .promo-bubble-user { background: #fff; color: var(--primary-dark); justify-self: end; max-width: 88%; } .promo-light .promo-bubble { background: var(--slate-100); color: var(--text); } .promo-light .promo-bubble-user { background: var(--primary); color: #fff; } /* A miniature of a laid-out screen, for the multi-location banner. */ .promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .promo-tile { aspect-ratio: 16 / 10; border-radius: 8px; background: var(--slate-100); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; color: var(--text-muted); } .promo-tile-live { background: var(--primary); border-color: var(--primary); color: #fff; } .promo-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; } .promo-points li { display: flex; gap: 9px; align-items: flex-start; font-size: .93rem; } .promo-points svg { flex-shrink: 0; margin-top: 3px; } @media (min-width: 800px) { .promo-inner { grid-template-columns: 1.15fr .85fr; padding: 52px 44px; gap: 44px; } /* Alternating the visual's side stops three stacked banners reading as one repeated block. */ .promo-reverse .promo-copy { order: 2; } .promo-reverse .promo-visual { order: 1; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); padding-top: 48px; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 36px; } .footer-brand .brand-name { color: var(--text); font-weight: 800; font-size: 1.15rem; } .footer-brand p { color: var(--text-muted); font-size: .9rem; margin-top: 10px; max-width: 300px; } .site-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-500); margin-bottom: 14px; } /* ---------- Share ---------- */ .share { margin-top: 22px; } .share h4 { margin-bottom: 10px; } .share-list { display: flex; flex-wrap: wrap; gap: 8px; } .share-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--white); color: var(--text-muted); cursor: pointer; transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease; } .share-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); } .share-status { display: block; min-height: 1.2em; margin-top: 8px; font-size: .82rem; color: var(--success); } .site-footer nav a { display: flex; align-items: center; min-height: 44px; color: var(--text-body); font-size: .92rem; } .site-footer nav a:hover { color: var(--primary); } .footer-bottom { display: flex; flex-direction: column; gap: 8px; text-align: center; border-top: 1px solid var(--border); padding: 20px 0; color: var(--text-muted); font-size: .85rem; } .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; } .footer-bottom a:hover { color: var(--primary); } /* ============================================================ RESPONSIVE — tablet & desktop breakpoints ============================================================ */ @media (min-width: 600px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .solution-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } .footer-bottom { flex-direction: row; justify-content: space-between; } } @media (min-width: 900px) { .section { padding: 92px 0; } .nav-links { display: flex; } .nav-cta { display: flex; } .nav-toggle { display: none; } .mobile-menu { display: none !important; } .hero { padding: 84px 0 92px; } .hero-grid { grid-template-columns: 1.05fr .95fr; } .feature-grid { grid-template-columns: repeat(3, 1fr); } .solution-grid { grid-template-columns: repeat(3, 1fr); } .pricing-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* Feature cards own their transform (tilt + hover/press lift), so the reveal must not set one — `transform: none` would flatten the tilt and kill the slide-out. They fade in via .card-reveal instead (see main.js). */ .card-reveal { opacity: 0; transition: opacity .6s ease; } .card-reveal.in { opacity: 1; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Print ---------- */ @media print { .site-header, .nav-toggle, .mobile-menu, .hero-visual, .cta-banner { display: none !important; } body { color: #000; } .reveal { opacity: 1; transform: none; } } /* ============================================================ Pointer-precise devices only: footer links can tighten up. Keyed on hover/pointer rather than width, so touch tablets keep their 44px rows. ============================================================ */ @media (min-width: 1000px) and (hover: hover) and (pointer: fine) { .site-footer nav a { min-height: 0; padding: 5px 0; } .footer-bottom a { min-height: 0; } } /* ============================================================ Interior pages — breadcrumb, page head, contact grid ============================================================ */ /* ---- Inner-page banner ---------------------------------------------- A compact version of the home hero: same aurora ribbons and dark base, about a third of the height, so interior pages feel part of the same system without pushing their content below the fold. */ .page-head { position: relative; isolation: isolate; overflow: hidden; padding: 42px 0 46px; background: linear-gradient(168deg, #0B1120 0%, #131E3A 58%, #0E1A33 100%); color: #E8EDFA; } .page-head::before, .page-head::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(64px); opacity: .5; will-change: transform; } .page-head::before { width: 60vw; height: 60vw; max-width: 620px; max-height: 620px; top: -52%; left: -14%; background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, .82), transparent 62%), radial-gradient(circle at 70% 60%, rgba(99, 102, 241, .78), transparent 66%); animation: aurora-a 19s ease-in-out infinite alternate; } .page-head::after { width: 52vw; height: 52vw; max-width: 540px; max-height: 540px; right: -12%; bottom: -58%; background: radial-gradient(circle at 60% 40%, rgba(45, 212, 191, .66), transparent 60%), radial-gradient(circle at 30% 70%, rgba(168, 85, 247, .60), transparent 64%); animation: aurora-b 23s ease-in-out infinite alternate; } .page-head > .container { position: relative; z-index: 1; } .page-head h1 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); line-height: 1.16; font-weight: 800; letter-spacing: -.024em; color: #F8FAFF; } .page-head .lede { margin-top: 12px; color: rgba(226, 234, 250, .82); max-width: 620px; } .page-head .lede strong { color: #FFFFFF; } @media (prefers-reduced-motion: reduce) { .page-head::before, .page-head::after { animation: none; } } .contact-grid { display: grid; gap: 20px; } .contact-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); padding: 26px; box-shadow: var(--shadow-sm); } .contact-card h2 { font-size: 1.15rem; margin-bottom: 8px; } .contact-card p { color: var(--text-body); } .contact-card p + p { margin-top: 16px; } /* Current page marker in the header nav. */ .nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: var(--primary); font-weight: 700; } @media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1fr; } .page-head { padding: 56px 0 16px; } } /* ---- Powered by (footer) ---- */ .powered-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: .8rem; color: var(--text-muted); } .powered-by a { display: inline-flex; align-items: center; min-height: 44px; border-radius: 6px; } .powered-by img { height: 26px; width: auto; display: block; /* The mark is dark navy; lift it so it reads on the light footer without shipping a second colourway. */ opacity: .85; transition: opacity .18s ease; } .powered-by a:hover img { opacity: 1; } .powered-by a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* ---- Long-form legal / policy pages ---- */ .legal { max-width: 76ch; } .legal h2 { margin-top: 34px; margin-bottom: 10px; font-size: 1.12rem; letter-spacing: -.012em; } .legal h2:first-of-type { margin-top: 8px; } .legal p { color: var(--text-body); margin-bottom: 12px; line-height: 1.72; } .legal ul { margin: 0 0 14px 0; padding-left: 20px; color: var(--text-body); } .legal li { margin-bottom: 8px; line-height: 1.7; } .legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { text-decoration-thickness: 2px; } .legal-updated { display: inline-block; margin-bottom: 22px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt); font-size: .82rem; color: var(--text-muted); } /* ---- Billing period toggle ---- */ .billing-toggle { display: flex; justify-content: center; gap: 4px; max-width: 360px; margin: 0 auto 28px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); } .billing-toggle button { flex: 1; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .18s ease, color .18s ease; } .billing-toggle button.is-active { background: var(--primary); color: #fff; } .billing-toggle button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .save-pill { font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: var(--primary-light); color: var(--primary); } .billing-toggle button.is-active .save-pill { background: rgba(255,255,255,.22); color: #fff; } .price .amount { font-size: inherit; font-weight: inherit; } .price-note { margin-top: -6px; margin-bottom: 14px; font-size: .8rem; color: var(--text-muted); } .plan-trust { margin-top: 10px; margin-bottom: 0; text-align: center; } .pricing-foot { margin-top: 26px; text-align: center; font-size: .84rem; color: var(--text-muted); max-width: 62ch; margin-left: auto; margin-right: auto; } /* ---- Comparison table ---- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .compare { width: 100%; min-width: 560px; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); font-size: .9rem; } .compare th, .compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); } .compare thead th { background: var(--bg-alt); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .compare tbody th { font-weight: 600; color: var(--text); } .compare td { color: var(--text-body); text-align: center; } .compare thead th:not(:first-child) { text-align: center; } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } .compare tbody tr:nth-child(even) { background: rgba(15, 23, 42, .015); } /* Screen-reader-only utility. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Home pricing teaser ---- */ .price-teaser { display: grid; gap: 14px; } .price-teaser-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .price-teaser-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .price-teaser-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .price-teaser-card.is-featured { border-color: var(--primary); box-shadow: var(--shadow-sm); } .pt-badge { position: absolute; top: -10px; left: 22px; padding: 3px 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .pt-name { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .pt-price { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .pt-price small { font-size: .9rem; font-weight: 600; color: var(--text-muted); } .pt-meta { font-size: .86rem; color: var(--text-body); } @media (min-width: 800px) { .price-teaser { grid-template-columns: repeat(3, 1fr); } } /* ---- Contact form ---- */ .contact-layout { display: grid; gap: 26px; } .contact-form-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); padding: 26px; box-shadow: var(--shadow-sm); } .contact-form-wrap h2 { font-size: 1.2rem; margin-bottom: 6px; } .form-intro { color: var(--text-body); font-size: .92rem; margin-bottom: 20px; } .contact-aside { display: grid; gap: 16px; align-content: start; } .field { margin-bottom: 16px; } .field label { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 600; color: var(--text); } .req { color: var(--danger, #DC2626); } .field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); color: var(--text); font: inherit; font-size: 1rem; /* 16px stops iOS zooming on focus */ transition: border-color .16s ease, box-shadow .16s ease; } .field textarea { min-height: 132px; resize: vertical; line-height: 1.6; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, .16); } .field [aria-invalid="true"] { border-color: #DC2626; } .field-error { margin-top: 6px; font-size: .82rem; color: #B91C1C; } .form-alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; border: 1px solid #FCA5A5; background: #FEF2F2; color: #991B1B; font-size: .88rem; } .form-foot { margin-top: 12px; font-size: .8rem; color: var(--text-muted); text-align: center; } /* Honeypot: off-screen rather than display:none, since some bots skip hidden inputs but not positioned ones. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-success { text-align: center; padding: 22px 0; } .form-success svg { color: var(--success); margin-bottom: 10px; } .form-success h2 { font-size: 1.3rem; margin-bottom: 8px; } .form-success p { color: var(--text-body); margin-bottom: 16px; } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1.35fr 1fr; align-items: start; } } /* ---------- Breadcrumbs ---------- Rendered by head.php above every interior page's dark .page-head, so it shares that band's top colour and reads as part of the same header. */ .breadcrumbs { background: #0B1120; font-size: .82rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; padding-top: 12px; padding-bottom: 0; color: rgba(226, 234, 250, .7); } .breadcrumbs li { display: flex; align-items: center; } .breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: rgba(226, 234, 250, .4); } .breadcrumbs a { color: rgba(226, 234, 250, .85); text-decoration: none; } .breadcrumbs a:hover { color: #fff; text-decoration: underline; } .breadcrumbs [aria-current] { color: #fff; } /* ---------- Long-form prose (landing pages + guides) ---------- */ .prose { max-width: 72ch; margin: 0 auto; } .prose > * + * { margin-top: 16px; } .prose h2 { margin-top: 44px; font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.25; } .prose h3 { margin-top: 28px; font-size: 1.12rem; color: var(--text); } .prose p, .prose li { color: var(--text-body); line-height: 1.75; } .prose ul, .prose ol { padding-left: 22px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: 8px; } .prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { text-decoration-thickness: 2px; } .prose strong { color: var(--text); } .prose .table-wrap { overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; font-size: .94rem; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .prose th { color: var(--text); background: var(--bg-alt); font-weight: 600; } .prose .callout { padding: 18px 20px; border-left: 4px solid var(--primary); background: var(--primary-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .prose .callout p { margin: 0; } .article-meta { margin-top: 14px; font-size: .85rem; color: rgba(226, 234, 250, .72); } /* ---------- Related link cards ---------- */ .related-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .related-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; } .related-card strong { color: var(--text); font-size: 1.02rem; } .related-card span { color: var(--text-muted); font-size: .92rem; } .related-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); } .solution .more { display: inline-block; margin-top: 14px; color: var(--primary); font-weight: 600; font-size: .92rem; } @media (min-width: 600px) { .related-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .related-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } .footer-brand { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .related-card { transition: none; } .related-card:hover { transform: none; } }