/* ===================================================================== Page Variants — gives Solutions / Industries / Services pages distinct visual personalities while keeping shared brand tokens intact. Activate by adding one of these classes to : .page-solutions → cool blue/violet "chapter" theme .page-industries → warm colour-coded magazine theme .page-services → dark navy enterprise theme with gold accents ===================================================================== */ /* ============================================================ 1) SOLUTIONS → blue/violet chapter book ============================================================ */ body.page-solutions { --variant-1: #6366f1; /* indigo */ --variant-2: #2563eb; /* blue */ --variant-3: #06b6d4; /* cyan */ --variant-grad: linear-gradient(135deg, #6366f1 0%, #2563eb 50%, #06b6d4 100%); --variant-soft: linear-gradient(180deg, #f5f7ff 0%, #ffffff 60%); background: var(--variant-soft); } body.page-solutions .hero-aurora { background: radial-gradient(900px 420px at 12% 18%, rgba(99,102,241,.30), transparent 65%), radial-gradient(700px 380px at 88% 80%, rgba(6,182,212,.25), transparent 60%), linear-gradient(135deg, #0c1430 0%, #1e2a78 55%, #0d1d54 100%) !important; } body.page-solutions .hero-aurora::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 22px); mask: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%); } body.page-solutions .hero-aurora .accent { background: linear-gradient(90deg, #fcd34d, #f7d840 60%, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Quick-jump strip — pill chips on solutions page */ body.page-solutions .industry-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } body.page-solutions .industry-strip .industry-tile { flex: 0 0 auto; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); transition: all .25s var(--ease); } body.page-solutions .industry-strip .industry-tile:hover { transform: translateY(-2px); background: var(--variant-grad); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(37,99,235,.25); } body.page-solutions .industry-strip .industry-tile:hover .ic { color: #fff; } body.page-solutions .industry-strip .ic { width: 22px; height: 22px; font-size: 14px; background: transparent; color: var(--variant-2); } /* Numbered "chapter" solution-modules with big background number */ body.page-solutions main { counter-reset: sol; } body.page-solutions .solution-module { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 28px; padding: 48px 44px; overflow: hidden; box-shadow: 0 20px 50px -28px rgba(15,23,42,.20); } body.page-solutions .solution-module::before { counter-increment: sol; content: counter(sol, decimal-leading-zero); position: absolute; top: -28px; right: -10px; font-size: 220px; font-weight: 800; line-height: 1; background: var(--variant-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .08; pointer-events: none; letter-spacing: -.04em; } body.page-solutions .solution-module::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--variant-grad); border-radius: 28px 0 0 28px; } /* Alternate left/right on every other module */ body.page-solutions .solution-module:nth-of-type(even) .sm-text { order: 2; } body.page-solutions .solution-module:nth-of-type(even) .sm-visual { order: 1; } body.page-solutions .solution-module:nth-of-type(even)::after { left: auto; right: 0; border-radius: 0 28px 28px 0; } body.page-solutions .solution-module:nth-of-type(even)::before { right: auto; left: -10px; } body.page-solutions .solution-module .kicker { display: inline-block; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--variant-2) 12%, transparent); color: var(--variant-2); font-weight: 700; letter-spacing: .04em; font-size: 11px; text-transform: uppercase; } body.page-solutions .solution-module h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 14px 0 10px; } /* ============================================================ 2) INDUSTRIES → warm colour-coded magazine ============================================================ */ body.page-industries { --ind-1: #ef4444; --ind-2: #f97316; --ind-3: #eab308; --ind-4: #22c55e; --ind-5: #14b8a6; --ind-6: #06b6d4; --ind-7: #8b5cf6; --ind-8: #ec4899; background: linear-gradient(180deg, #fffaf3 0%, #ffffff 50%); } body.page-industries .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(249,115,22,.28), transparent 65%), radial-gradient(700px 380px at 82% 78%, rgba(236,72,153,.22), transparent 60%), linear-gradient(135deg, #2d1408 0%, #6b1f18 50%, #4a1d40 100%) !important; } body.page-industries .hero-aurora .accent { background: linear-gradient(90deg, #fcd34d, #fb923c 50%, #f43f5e); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Tile chips with colour-coded fills */ body.page-industries .industry-strip { gap: 12px; } body.page-industries .industry-strip .industry-tile { background: #fff; border-radius: 18px; padding: 14px 16px; border: 1px solid var(--line-soft); transition: transform .25s var(--ease), box-shadow .25s var(--ease); position: relative; overflow: hidden; } body.page-industries .industry-strip .industry-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ind-c, var(--blue)); opacity: .85; } body.page-industries .industry-strip .industry-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(0,0,0,.18); } body.page-industries .industry-strip .industry-tile:nth-child(1){--ind-c:var(--ind-1)} body.page-industries .industry-strip .industry-tile:nth-child(2){--ind-c:var(--ind-2)} body.page-industries .industry-strip .industry-tile:nth-child(3){--ind-c:var(--ind-3)} body.page-industries .industry-strip .industry-tile:nth-child(4){--ind-c:var(--ind-4)} body.page-industries .industry-strip .industry-tile:nth-child(5){--ind-c:var(--ind-5)} body.page-industries .industry-strip .industry-tile:nth-child(6){--ind-c:var(--ind-6)} body.page-industries .industry-strip .industry-tile:nth-child(7){--ind-c:var(--ind-7)} body.page-industries .industry-strip .industry-tile:nth-child(8){--ind-c:var(--ind-8)} body.page-industries .industry-strip .industry-tile .ic { background: color-mix(in srgb, var(--ind-c, var(--blue)) 14%, transparent) !important; color: var(--ind-c, var(--blue)) !important; } /* Magazine cards — colour stripe top + tinted kicker */ body.page-industries .solution-module { background: #fff; border: 1px solid var(--line-soft); border-radius: 24px; padding: 0; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(76,29,12,.18); position: relative; } body.page-industries .solution-module::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ind-c, var(--blue)); } body.page-industries .solution-module .sm-text, body.page-industries .solution-module .sm-visual { padding: 38px 36px; } body.page-industries .solution-module .kicker { display: inline-block; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--ind-c, var(--blue)) 12%, transparent); color: var(--ind-c, var(--blue)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; } body.page-industries .solution-module .btn-primary { background: var(--ind-c, var(--blue)); border-color: var(--ind-c, var(--blue)); } body.page-industries .solution-module .v-row .v-ic { background: color-mix(in srgb, var(--ind-c, var(--blue)) 14%, transparent); color: var(--ind-c, var(--blue)); } /* Per-section colour assignment by id */ body.page-industries #schools { --ind-c: var(--ind-1); } body.page-industries #smb { --ind-c: var(--ind-2); } body.page-industries #retail { --ind-c: var(--ind-3); } body.page-industries #startup { --ind-c: var(--ind-4); } body.page-industries #professional { --ind-c: var(--ind-5); } body.page-industries #manufacturing { --ind-c: var(--ind-6); } body.page-industries #healthcare { --ind-c: var(--ind-7); } body.page-industries #nonprofit { --ind-c: var(--ind-8); } /* ============================================================ 3) SERVICES → dark navy enterprise w/ gold glow ============================================================ */ body.page-services { --svc-bg: #0a1228; --svc-card: #131e3a; --svc-line: #1f2c4d; --svc-gold: #f7d840; --svc-gold-2: #fcd34d; background: radial-gradient(1200px 600px at 50% -200px, rgba(247,216,64,.10), transparent 60%), linear-gradient(180deg, #0a1228 0%, #0c1530 100%); color: #e6ecff; min-height: 100vh; } body.page-services .crumbs, body.page-services .crumbs a { color: #9aa8d3; } body.page-services .crumbs a:hover { color: var(--svc-gold); } body.page-services .crumbs .current { color: #fff; } /* Hero — navy with gold ring + diagonal pinstripe */ body.page-services .cat-hero { background: radial-gradient(700px 320px at 85% 20%, rgba(247,216,64,.18), transparent 60%), linear-gradient(135deg, #0a1f3f 0%, #142855 60%, #0a1f3f 100%) !important; border: 1px solid rgba(247,216,64,.28); border-radius: 24px; overflow: hidden; position: relative; } body.page-services .cat-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(247,216,64,.06) 0 1px, transparent 1px 18px); } body.page-services .cat-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(247,216,64,.20) 0%, transparent 70%); filter: blur(20px); } body.page-services .cat-hero h1 { color: #fff; } body.page-services .cat-hero h1 strong, body.page-services .cat-hero .accent { background: linear-gradient(90deg, var(--svc-gold), var(--svc-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } body.page-services .cat-hero p { color: #cfd6ee; } body.page-services .cat-hero .eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(247,216,64,.12); border: 1px solid rgba(247,216,64,.35); color: var(--svc-gold) !important; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } /* Section heads on dark */ body.page-services .section-head h2 { color: #fff; } body.page-services .section-head a { color: var(--svc-gold); } /* Service cards — dark glass tiles with gold glow on hover */ body.page-services .checkout-card { background: var(--svc-card) !important; border: 1px solid var(--svc-line) !important; color: #e6ecff !important; border-radius: 20px !important; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease) !important; } body.page-services .checkout-card h3 { color: #fff !important; } body.page-services .checkout-card p { color: #b9c3e3 !important; } body.page-services .checkout-card .ic { background: linear-gradient(135deg, rgba(247,216,64,.18), rgba(247,216,64,.06)) !important; color: var(--svc-gold) !important; border: 1px solid rgba(247,216,64,.28); } body.page-services .checkout-card:hover { transform: translateY(-6px) !important; border-color: rgba(247,216,64,.55) !important; box-shadow: 0 22px 60px -22px rgba(247,216,64,.30), 0 0 0 1px rgba(247,216,64,.20) !important; } body.page-services .checkout-card p:last-child { color: var(--svc-gold) !important; } /* "Why Intrys" why-card pattern (used near bottom) — dark variant */ body.page-services .why-card { background: var(--svc-card); border: 1px solid var(--svc-line); color: #e6ecff; } body.page-services .why-card h4 { color: #fff; } body.page-services .why-card p { color: #b9c3e3; } body.page-services .why-card .ic { background: rgba(247,216,64,.14); color: var(--svc-gold); } /* Buttons on dark */ body.page-services .btn-light { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); } body.page-services .btn-light:hover { background: rgba(255,255,255,.16); } /* Diagonal divider band between sections */ body.page-services .section + .section { position: relative; } body.page-services .section + .section::before { content: ""; display: block; height: 1px; max-width: 1180px; margin: 0 auto 24px; background: linear-gradient(90deg, transparent, rgba(247,216,64,.35), transparent); } /* Section spacing/typography */ body.page-services .section h2 { color: #fff; } body.page-services .section p, body.page-services .section li { color: #cfd6ee; } /* ===================================================================== SHARED LITE THEME ENGINE (used by page-cloud / productivity / network / education / hardware / commerce / pricing / human / docs) Each theme just sets --t1, --t2, --t-grad and tweaks hero only. Common rules below recolour hero/cards/kicker/badge/buttons consistently. ===================================================================== */ body.page-cloud, body.page-productivity, body.page-network, body.page-education, body.page-hardware, body.page-commerce, body.page-pricing, body.page-human, body.page-docs { --t-line: color-mix(in srgb, var(--t1) 28%, transparent); } /* Hero treatments — applied to both .cat-hero (legacy) and .hero-aurora (new) */ body.page-cloud .cat-hero, body.page-cloud .hero-aurora { background: radial-gradient(900px 420px at 15% 20%, rgba(14,165,233,.30), transparent 65%), radial-gradient(700px 380px at 85% 80%, rgba(59,130,246,.22), transparent 60%), linear-gradient(135deg, #06122c 0%, #0c2452 55%, #0a1f3f 100%) !important; } body.page-productivity .cat-hero, body.page-productivity .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(16,185,129,.32), transparent 65%), radial-gradient(700px 380px at 82% 78%, rgba(13,148,136,.25), transparent 60%), linear-gradient(135deg, #052e1f 0%, #064e3b 55%, #0a3d2c 100%) !important; } body.page-network .cat-hero, body.page-network .hero-aurora { background: radial-gradient(900px 420px at 20% 25%, rgba(6,182,212,.32), transparent 65%), radial-gradient(700px 380px at 80% 80%, rgba(8,145,178,.25), transparent 60%), linear-gradient(135deg, #032330 0%, #073b4f 55%, #052f3f 100%) !important; } body.page-education .cat-hero, body.page-education .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(217,119,6,.30), transparent 65%), radial-gradient(700px 380px at 82% 80%, rgba(180,83,9,.25), transparent 60%), linear-gradient(135deg, #2a1402 0%, #5a2d05 55%, #3a1c04 100%) !important; } body.page-hardware .cat-hero, body.page-hardware .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(15,118,110,.32), transparent 65%), radial-gradient(700px 380px at 82% 80%, rgba(59,130,246,.18), transparent 60%), linear-gradient(135deg, #08152e 0%, #0f2a4a 55%, #0a1f3f 100%) !important; } body.page-commerce .cat-hero, body.page-commerce .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(22,163,74,.26), transparent 65%), radial-gradient(700px 380px at 82% 80%, rgba(34,197,94,.18), transparent 60%), linear-gradient(135deg, #07203a 0%, #0a1f3f 55%, #0c2a4a 100%) !important; } body.page-pricing .cat-hero, body.page-pricing .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(139,92,246,.32), transparent 65%), radial-gradient(700px 380px at 82% 80%, rgba(99,102,241,.25), transparent 60%), linear-gradient(135deg, #1d0f3f 0%, #3b1d8a 55%, #281355 100%) !important; } body.page-human .cat-hero, body.page-human .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(244,63,94,.28), transparent 65%), radial-gradient(700px 380px at 82% 80%, rgba(251,113,133,.22), transparent 60%), linear-gradient(135deg, #2a0814 0%, #6b1330 55%, #4a0d20 100%) !important; } body.page-docs .cat-hero, body.page-docs .hero-aurora { background: radial-gradient(900px 420px at 18% 22%, rgba(71,85,105,.26), transparent 65%), radial-gradient(700px 380px at 82% 80%, rgba(15,23,42,.18), transparent 60%), linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%) !important; } /* Theme tokens */ body.page-cloud { --t1:#0ea5e9; --t2:#1e40af; --t-grad:linear-gradient(135deg,#0ea5e9,#1e40af); --t-bg:linear-gradient(180deg,#f3f9ff 0%, #ffffff 60%); } body.page-productivity { --t1:#10b981; --t2:#0d9488; --t-grad:linear-gradient(135deg,#10b981,#0d9488); --t-bg:linear-gradient(180deg,#f0fdf6 0%, #ffffff 60%); } body.page-network { --t1:#06b6d4; --t2:#0891b2; --t-grad:linear-gradient(135deg,#06b6d4,#0891b2); --t-bg:linear-gradient(180deg,#f0fbfd 0%, #ffffff 60%); } body.page-education { --t1:#d97706; --t2:#b45309; --t-grad:linear-gradient(135deg,#f59e0b,#d97706); --t-bg:linear-gradient(180deg,#fff8ed 0%, #ffffff 60%); } body.page-hardware { --t1:#0f766e; --t2:#0a1f3f; --t-grad:linear-gradient(135deg,#0f766e,#0a1f3f); --t-bg:linear-gradient(180deg,#f5f8fa 0%, #ffffff 60%); } body.page-commerce { --t1:#16a34a; --t2:#0a1f3f; --t-grad:linear-gradient(135deg,#16a34a,#15803d); --t-bg:linear-gradient(180deg,#f4faf6 0%, #ffffff 60%); } body.page-pricing { --t1:#8b5cf6; --t2:#6366f1; --t-grad:linear-gradient(135deg,#8b5cf6,#6366f1); --t-bg:linear-gradient(180deg,#f7f5ff 0%, #ffffff 60%); } body.page-human { --t1:#f43f5e; --t2:#fb7185; --t-grad:linear-gradient(135deg,#fb7185,#f43f5e); --t-bg:linear-gradient(180deg,#fff5f6 0%, #ffffff 60%); } body.page-docs { --t1:#475569; --t2:#0a1f3f; --t-grad:linear-gradient(135deg,#64748b,#334155); --t-bg:linear-gradient(180deg,#f8fafc 0%, #ffffff 60%); } body.page-cloud, body.page-productivity, body.page-network, body.page-education, body.page-hardware, body.page-commerce, body.page-pricing, body.page-human, body.page-docs { background: var(--t-bg); } /* Hero typography (light text, themed gradient on accent words) */ body.page-cloud .cat-hero, body.page-cloud .hero-aurora, body.page-productivity .cat-hero, body.page-productivity .hero-aurora, body.page-network .cat-hero, body.page-network .hero-aurora, body.page-education .cat-hero, body.page-education .hero-aurora, body.page-hardware .cat-hero, body.page-hardware .hero-aurora, body.page-commerce .cat-hero, body.page-commerce .hero-aurora, body.page-pricing .cat-hero, body.page-pricing .hero-aurora, body.page-human .cat-hero, body.page-human .hero-aurora, body.page-docs .cat-hero, body.page-docs .hero-aurora { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--t1) 30%, transparent); } body.page-cloud .cat-hero h1, body.page-cloud .hero-aurora h1, body.page-productivity .cat-hero h1, body.page-productivity .hero-aurora h1, body.page-network .cat-hero h1, body.page-network .hero-aurora h1, body.page-education .cat-hero h1, body.page-education .hero-aurora h1, body.page-hardware .cat-hero h1, body.page-hardware .hero-aurora h1, body.page-commerce .cat-hero h1, body.page-commerce .hero-aurora h1, body.page-pricing .cat-hero h1, body.page-pricing .hero-aurora h1, body.page-human .cat-hero h1, body.page-human .hero-aurora h1, body.page-docs .cat-hero h1, body.page-docs .hero-aurora h1 { color: #fff; } body.page-cloud .cat-hero p, body.page-cloud .hero-aurora p, body.page-productivity .cat-hero p, body.page-productivity .hero-aurora p, body.page-network .cat-hero p, body.page-network .hero-aurora p, body.page-education .cat-hero p, body.page-education .hero-aurora p, body.page-hardware .cat-hero p, body.page-hardware .hero-aurora p, body.page-commerce .cat-hero p, body.page-commerce .hero-aurora p, body.page-pricing .cat-hero p, body.page-pricing .hero-aurora p, body.page-human .cat-hero p, body.page-human .hero-aurora p, body.page-docs .cat-hero p, body.page-docs .hero-aurora p { color: #d8e0f5; } body.page-cloud .accent, body.page-productivity .accent, body.page-network .accent, body.page-education .accent, body.page-hardware .accent, body.page-commerce .accent, body.page-pricing .accent, body.page-human .accent, body.page-docs .accent { background: var(--t-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Eyebrow / kicker — themed pill */ body.page-cloud .eyebrow, body.page-cloud .kicker, body.page-cloud .eyebrow-pill, body.page-productivity .eyebrow, body.page-productivity .kicker, body.page-productivity .eyebrow-pill, body.page-network .eyebrow, body.page-network .kicker, body.page-network .eyebrow-pill, body.page-education .eyebrow, body.page-education .kicker, body.page-education .eyebrow-pill, body.page-hardware .eyebrow, body.page-hardware .kicker, body.page-hardware .eyebrow-pill, body.page-commerce .eyebrow, body.page-commerce .kicker, body.page-commerce .eyebrow-pill, body.page-pricing .eyebrow, body.page-pricing .kicker, body.page-pricing .eyebrow-pill, body.page-human .eyebrow, body.page-human .kicker, body.page-human .eyebrow-pill, body.page-docs .eyebrow, body.page-docs .kicker, body.page-docs .eyebrow-pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--t1) 14%, transparent); color: var(--t1) !important; font-weight: 700; letter-spacing: .06em; font-size: 11px; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--t1) 28%, transparent); } /* Inside dark hero, lighten kicker for contrast */ body.page-cloud .cat-hero .eyebrow, body.page-cloud .hero-aurora .eyebrow-pill, body.page-productivity .cat-hero .eyebrow, body.page-productivity .hero-aurora .eyebrow-pill, body.page-network .cat-hero .eyebrow, body.page-network .hero-aurora .eyebrow-pill, body.page-education .cat-hero .eyebrow, body.page-education .hero-aurora .eyebrow-pill, body.page-hardware .cat-hero .eyebrow, body.page-hardware .hero-aurora .eyebrow-pill, body.page-commerce .cat-hero .eyebrow, body.page-commerce .hero-aurora .eyebrow-pill, body.page-pricing .cat-hero .eyebrow, body.page-pricing .hero-aurora .eyebrow-pill, body.page-human .cat-hero .eyebrow, body.page-human .hero-aurora .eyebrow-pill, body.page-docs .cat-hero .eyebrow, body.page-docs .hero-aurora .eyebrow-pill { background: rgba(255,255,255,.14); color: #fff !important; border-color: rgba(255,255,255,.30); } /* Cards — themed border/hover ring (works for .checkout-card, .source-tile, .why-card, .problem-card, .product-card, .prod-card) */ body.page-cloud .checkout-card, body.page-cloud .why-card, body.page-productivity .checkout-card, body.page-productivity .why-card, body.page-network .checkout-card, body.page-network .why-card, body.page-education .checkout-card, body.page-education .why-card, body.page-hardware .checkout-card, body.page-hardware .why-card, body.page-commerce .checkout-card, body.page-commerce .why-card, body.page-pricing .checkout-card, body.page-pricing .why-card, body.page-human .checkout-card, body.page-human .why-card, body.page-docs .checkout-card, body.page-docs .why-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } body.page-cloud .checkout-card:hover, body.page-cloud .why-card:hover, body.page-cloud .problem-card:hover, body.page-cloud .source-tile:hover, body.page-productivity .checkout-card:hover, body.page-productivity .why-card:hover, body.page-productivity .problem-card:hover, body.page-productivity .source-tile:hover, body.page-network .checkout-card:hover, body.page-network .why-card:hover, body.page-network .problem-card:hover, body.page-network .source-tile:hover, body.page-education .checkout-card:hover, body.page-education .why-card:hover, body.page-education .problem-card:hover, body.page-education .source-tile:hover, body.page-hardware .checkout-card:hover, body.page-hardware .why-card:hover, body.page-hardware .problem-card:hover, body.page-hardware .source-tile:hover, body.page-commerce .checkout-card:hover, body.page-commerce .why-card:hover, body.page-commerce .problem-card:hover, body.page-commerce .source-tile:hover, body.page-pricing .checkout-card:hover, body.page-pricing .why-card:hover, body.page-pricing .problem-card:hover, body.page-pricing .source-tile:hover, body.page-human .checkout-card:hover, body.page-human .why-card:hover, body.page-human .problem-card:hover, body.page-human .source-tile:hover, body.page-docs .checkout-card:hover, body.page-docs .why-card:hover, body.page-docs .problem-card:hover, body.page-docs .source-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--t1) 55%, transparent) !important; box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--t1) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--t1) 22%, transparent) !important; } /* Card icon chips */ body.page-cloud .why-card .ic, body.page-cloud .checkout-card .ic, body.page-cloud .problem-card .pc-icon, body.page-productivity .why-card .ic, body.page-productivity .checkout-card .ic, body.page-productivity .problem-card .pc-icon, body.page-network .why-card .ic, body.page-network .checkout-card .ic, body.page-network .problem-card .pc-icon, body.page-education .why-card .ic, body.page-education .checkout-card .ic, body.page-education .problem-card .pc-icon, body.page-hardware .why-card .ic, body.page-hardware .checkout-card .ic, body.page-hardware .problem-card .pc-icon, body.page-commerce .why-card .ic, body.page-commerce .checkout-card .ic, body.page-commerce .problem-card .pc-icon, body.page-pricing .why-card .ic, body.page-pricing .checkout-card .ic, body.page-pricing .problem-card .pc-icon, body.page-human .why-card .ic, body.page-human .checkout-card .ic, body.page-human .problem-card .pc-icon, body.page-docs .why-card .ic, body.page-docs .checkout-card .ic, body.page-docs .problem-card .pc-icon { background: color-mix(in srgb, var(--t1) 14%, transparent) !important; color: var(--t1) !important; } /* Step / timeline number badge themed */ body.page-cloud .timeline .ti::before, body.page-cloud .step-list .step::before, body.page-productivity .timeline .ti::before, body.page-productivity .step-list .step::before, body.page-network .timeline .ti::before, body.page-network .step-list .step::before, body.page-education .timeline .ti::before, body.page-education .step-list .step::before, body.page-hardware .timeline .ti::before, body.page-hardware .step-list .step::before, body.page-commerce .timeline .ti::before, body.page-commerce .step-list .step::before, body.page-pricing .timeline .ti::before, body.page-pricing .step-list .step::before, body.page-human .timeline .ti::before, body.page-human .step-list .step::before, body.page-docs .timeline .ti::before, body.page-docs .step-list .step::before { background: var(--t-grad) !important; } /* FAQ chevron themed */ body.page-cloud .faq details summary::after, body.page-productivity .faq details summary::after, body.page-network .faq details summary::after, body.page-education .faq details summary::after, body.page-hardware .faq details summary::after, body.page-commerce .faq details summary::after, body.page-pricing .faq details summary::after, body.page-human .faq details summary::after, body.page-docs .faq details summary::after { background: var(--t-grad) !important; color: #fff !important; } /* Primary buttons themed */ body.page-cloud .btn-primary, body.page-productivity .btn-primary, body.page-network .btn-primary, body.page-education .btn-primary, body.page-hardware .btn-primary, body.page-commerce .btn-primary, body.page-pricing .btn-primary, body.page-human .btn-primary, body.page-docs .btn-primary { background: var(--t-grad); border-color: transparent; color: #fff; } body.page-cloud .btn-primary:hover, body.page-productivity .btn-primary:hover, body.page-network .btn-primary:hover,body.page-education .btn-primary:hover, body.page-hardware .btn-primary:hover,body.page-commerce .btn-primary:hover, body.page-pricing .btn-primary:hover,body.page-human .btn-primary:hover, body.page-docs .btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); } /* "Section" / "section-pad" h2 underline accent */ body.page-cloud .section-title::after, body.page-productivity .section-title::after, body.page-network .section-title::after, body.page-education .section-title::after, body.page-hardware .section-title::after, body.page-commerce .section-title::after, body.page-pricing .section-title::after, body.page-human .section-title::after { content: ""; display: block; width: 60px; height: 4px; border-radius: 4px; background: var(--t-grad); margin-top: 10px; } /* CTA banner themed */ body.page-cloud .cta-banner, body.page-productivity .cta-banner, body.page-network .cta-banner, body.page-education .cta-banner, body.page-hardware .cta-banner, body.page-commerce .cta-banner, body.page-pricing .cta-banner, body.page-human .cta-banner, body.page-docs .cta-banner { background: var(--t-grad) !important; color: #fff !important; } /* Lighten only typographic children — leave buttons alone so .btn-light stays readable */ body.page-cloud .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-productivity .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-network .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-education .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-hardware .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-commerce .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-pricing .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-human .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)), body.page-docs .cta-banner :is(h1,h2,h3,h4,p,span,small,em,strong,li,a:not(.btn)) { color: #fff; } /* Eyebrow pill on coloured CTA — translucent white */ body.page-cloud .cta-banner .eyebrow-pill, body.page-productivity .cta-banner .eyebrow-pill, body.page-network .cta-banner .eyebrow-pill, body.page-education .cta-banner .eyebrow-pill, body.page-hardware .cta-banner .eyebrow-pill, body.page-commerce .cta-banner .eyebrow-pill, body.page-pricing .cta-banner .eyebrow-pill, body.page-human .cta-banner .eyebrow-pill, body.page-docs .cta-banner .eyebrow-pill { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; } /* Buttons on themed CTA banners — keep their own colours readable */ body.page-cloud .cta-banner .btn-light, body.page-productivity .cta-banner .btn-light, body.page-network .cta-banner .btn-light, body.page-education .cta-banner .btn-light, body.page-hardware .cta-banner .btn-light, body.page-commerce .cta-banner .btn-light, body.page-pricing .cta-banner .btn-light, body.page-human .cta-banner .btn-light, body.page-docs .cta-banner .btn-light { background: #ffffff !important; color: var(--ink) !important; border: 1px solid rgba(0,0,0,.06) !important; } body.page-cloud .cta-banner .btn-light:hover, body.page-productivity .cta-banner .btn-light:hover, body.page-network .cta-banner .btn-light:hover, body.page-education .cta-banner .btn-light:hover, body.page-hardware .cta-banner .btn-light:hover, body.page-commerce .cta-banner .btn-light:hover, body.page-pricing .cta-banner .btn-light:hover, body.page-human .cta-banner .btn-light:hover, body.page-docs .cta-banner .btn-light:hover { background: #f5f7fb !important; } body.page-cloud .cta-banner .btn-yellow, body.page-productivity .cta-banner .btn-yellow, body.page-network .cta-banner .btn-yellow, body.page-education .cta-banner .btn-yellow, body.page-hardware .cta-banner .btn-yellow, body.page-commerce .cta-banner .btn-yellow, body.page-pricing .cta-banner .btn-yellow, body.page-human .cta-banner .btn-yellow, body.page-docs .cta-banner .btn-yellow { color: var(--ink) !important; } /* === Per-theme finishing touches === */ /* Cloud — subtle blueprint grid behind sections */ body.page-cloud main { background-image: linear-gradient(rgba(14,165,233,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,.05) 1px, transparent 1px); background-size: 32px 32px; background-attachment: fixed; } /* Productivity — soft emerald wash on alternating sections */ body.page-productivity .section-pad:nth-of-type(odd) { background: linear-gradient(180deg, rgba(16,185,129,.04), transparent); } /* Network — wave stripe under hero */ body.page-network .cat-hero::after, body.page-network .hero-aurora::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px; background: radial-gradient(40px 20px at 20px 0, rgba(255,255,255,.10) 99%, transparent 100%) repeat-x; background-size: 40px 20px; opacity: .6; pointer-events: none; } /* Education — warm amber border on cards */ body.page-education .why-card, body.page-education .checkout-card, body.page-education .problem-card { border-radius: 18px; } /* Hardware — graphite section background between content */ body.page-hardware .section-pad:nth-of-type(even) { background: linear-gradient(180deg, rgba(31,41,55,.04), transparent); } /* Commerce — minimal trust: tighten cards, focus rings */ body.page-commerce input:focus, body.page-commerce select:focus, body.page-commerce textarea:focus { outline: none; border-color: var(--t1) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--t1) 18%, transparent) !important; } body.page-commerce .checkout-card { border-radius: 18px; } /* Pricing — premium card emphasis */ body.page-pricing .price-card, body.page-pricing .checkout-card { border-radius: 22px; } body.page-pricing .price-card.popular::before, body.page-pricing .checkout-card.popular::before, body.page-pricing .checkout-card.featured::before { background: var(--t-grad) !important; } /* Human — softer, friendlier shapes */ body.page-human .why-card, body.page-human .checkout-card, body.page-human .problem-card { border-radius: 22px; } body.page-human .cat-hero, body.page-human .hero-aurora { border-radius: 28px; } /* Docs — content-first: light hero, larger reading column */ body.page-docs .cat-hero, body.page-docs .hero-aurora { padding: 36px 28px; } body.page-docs main p, body.page-docs main li { line-height: 1.75; } body.page-docs main h2 { border-bottom: 2px solid color-mix(in srgb, var(--t1) 30%, transparent); padding-bottom: 8px; }