/* ===== css/tokens.css ===== */ /* ============================================================================ CATO NETWORKS — Design Tokens Colors + Typography for the Cato Networks brand ("AI-Native SASE") Derived from the 2026 Cato Brand Guideline (Figma: "Cato Web Design - Live") ---------------------------------------------------------------------------- FONT NOTE: The brand uses proprietary fonts (PP Mori, PP Museum, PP Fraktion Mono, Haffer XH). These are NOT freely available. Until the real font files are dropped into /fonts, we substitute the closest free Google Fonts match. See --font-* vars below. REPLACE WHEN AVAILABLE. ============================================================================ */ /* Substitute fonts (remove when real fonts are added to /fonts) */ :root { /* --------------------------------------------------------------------- BRAND CORE GREENS --------------------------------------------------------------------- */ --cato-green: #158864; /* Primary brand green (rgb 21 136 100) */ --dark-green: #182D2A; /* Deep forest — hero/footer/CTA bg */ --medium-green: #0D483D; /* Text on green, secondary surfaces */ --fluo: #81E5AC; /* Primary button fill */ --bright-green: #38DAA8; /* Hero headline accent (rgb 56 218 168) */ --light-green: #DEF6EF; /* Pale tint / soft background */ /* --------------------------------------------------------------------- 5 LANDMOTION SCALES (product pillars) Each pillar owns a 5-step scale: 900 (deep) → 100 (pale). 500 = main. --------------------------------------------------------------------- */ /* SASE Convergence — green */ --sase-900:#083628; --sase-700:#0F5F46; --sase-500:#158864; --sase-300:#73B8A2; --sase-100:#D0E7E0; /* Zero Trust Security (SSE) — teal */ --zts-900:#1F3A3C; --zts-700:#366669; --zts-500:#4D9196; --zts-300:#94BDC0; --zts-100:#DBE9EA; /* Universal ZTNA — blue */ --uztna-900:#2D3E4B; --uztna-700:#4E6C84; --uztna-500:#709ABC; --uztna-300:#A9C3D7; --uztna-100:#E2EBF2; /* Next Gen Networking — slate-indigo */ --net-900:#353848; --net-700:#5C637E; --net-500:#848DB4; --net-300:#B5BBD2; --net-100:#E6E8F0; /* AI Security — purple */ --ai-900:#2F2636; --ai-700:#53435F; --ai-500:#766087; --ai-300:#AD9FB7; --ai-100:#E4DFE7; /* --------------------------------------------------------------------- NEUTRALS (pure black is never used) --------------------------------------------------------------------- */ --neutral-0: #FFFFFF; --neutral-50: #F6F6F6; --neutral-100:#E7E7E7; --neutral-200:#D1D1D1; --neutral-300:#B0B0B0; --neutral-400:#888888; --neutral-500:#6D6D6D; --neutral-600:#5D5D5D; --neutral-700:#4F4F4F; --neutral-800:#404040; --neutral-900:#262626; /* --------------------------------------------------------------------- SEMANTIC TOKENS --------------------------------------------------------------------- */ --bg: var(--neutral-0); --bg-soft: var(--neutral-50); --bg-dark: var(--dark-green); --fg: var(--neutral-900); /* primary text on light */ --fg-muted: var(--neutral-400); /* secondary text */ --fg-on-dark: var(--neutral-0); /* text on dark green */ --fg-on-dark-muted: rgba(255,255,255,.66); --link: var(--cato-green); --border: var(--neutral-200); --border-soft: var(--neutral-100); /* --------------------------------------------------------------------- RADII / SHADOWS / GLOW --------------------------------------------------------------------- */ --radius-card: 8px; --radius-sm: 4px; --radius-pill: 100px; --shadow-header: 0 4px 4px rgba(0,0,0,.05); --shadow-btn: 0 1px 4px rgba(28,28,30,.08); --shadow-card: 0 8px 28px rgba(24,45,42,.08); /* Signature radial green glow used in hero/illustration */ --glow-green: radial-gradient(rgba(21,136,100,0) 27%, rgb(21,136,100) 37%); /* --------------------------------------------------------------------- TYPE FAMILIES (proprietary first, free substitute fallback) --------------------------------------------------------------------- */ --font-display: 'PP Mori', 'Hanken Grotesk', system-ui, sans-serif; /* headings + body */ --font-body: 'PP Mori', 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'PP Fraktion Mono', 'Roboto Mono', ui-monospace, monospace; /* labels/code */ --font-micro: 'Instrument Sans', 'Hanken Grotesk', sans-serif; /* tiny ui captions */ /* --------------------------------------------------------------------- TYPE SCALE — Desktop (PP Mori, weight 400 unless noted) Heading line-height 110–120%, body 140%. --------------------------------------------------------------------- */ --h-xl: 80px; --h-xl-lh: 1.1; --h-l: 54px; --h-l-lh: 1.1; --h-m: 48px; --h-m-lh: 1.2; --h-s: 40px; --h-s-lh: 1.2; --h-xs: 32px; --h-xs-lh: 1.2; --body-quote: 24px; /* italic */ --body-subtitle: 24px; --body-l: 20px; --body-m: 18px; --body-s: 16px; --body-xs: 14px; --body-lh: 1.4; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; } /* ============================================================================ SEMANTIC TYPE CLASSES ============================================================================ */ .cato-h-xl { font-family: var(--font-display); font-weight: 400; font-size: var(--h-xl); line-height: var(--h-xl-lh); letter-spacing: -1px; } .cato-h-l { font-family: var(--font-display); font-weight: 400; font-size: var(--h-l); line-height: var(--h-l-lh); letter-spacing: -.5px; } .cato-h-m { font-family: var(--font-display); font-weight: 400; font-size: var(--h-m); line-height: var(--h-m-lh); } .cato-h-s { font-family: var(--font-display); font-weight: 400; font-size: var(--h-s); line-height: var(--h-s-lh); } .cato-h-xs { font-family: var(--font-display); font-weight: 400; font-size: var(--h-xs); line-height: var(--h-xs-lh); } .cato-subtitle { font-family: var(--font-body); font-weight: 400; font-size: var(--body-subtitle); line-height: var(--body-lh); } .cato-quote { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: var(--body-quote); line-height: var(--body-lh); } .cato-body-l { font-family: var(--font-body); font-weight: 400; font-size: var(--body-l); line-height: var(--body-lh); } .cato-body-m { font-family: var(--font-body); font-weight: 400; font-size: var(--body-m); line-height: var(--body-lh); } .cato-body-s { font-family: var(--font-body); font-weight: 400; font-size: var(--body-s); line-height: var(--body-lh); } .cato-body-xs { font-family: var(--font-body); font-weight: 400; font-size: var(--body-xs); line-height: var(--body-lh); } .cato-label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; } .cato-micro { font-family: var(--font-micro); font-weight: 700; font-size: 12px; line-height: 1; } /* Mobile heading sizes (apply within a mobile context) */ @media (max-width: 600px) { :root { --h-xl: 40px; --h-l: 32px; --h-m: 30px; --h-s: 28px; --h-xs: 24px; --body-quote: 20px; --body-subtitle: 20px; --body-l: 18px; --body-m: 16px; --body-s: 14px; --body-xs: 12px; } } /* ===== css/kit.css ===== */ /* Cato Website UI kit — shared styles (tokens come from colors_and_type.css) */ *{box-sizing:border-box} html{scroll-behavior:smooth;background-color:var(--dark-green)} body{margin:0;font-family:var(--font-body);color:var(--fg);background:#fff;-webkit-font-smoothing:antialiased} .wrap{max-width:1240px;margin:0 auto;padding:0 40px} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} /* buttons */ .btn{font-family:var(--font-display);font-weight:700;font-size:16px;border:none;border-radius:var(--radius-pill); padding:13px 26px;box-shadow:var(--shadow-btn);cursor:pointer;line-height:1.2;display:inline-flex;align-items:center;gap:8px;transition:.18s ease;white-space:nowrap} .btn svg{width:16px;height:16px} .btn--primary{background:var(--fluo);color:var(--medium-green)} .btn--primary:hover{background:#6CD79A;transform:translateY(-1px)} .btn--secondary{background:#fff;color:var(--dark-green)} .btn--secondary:hover{background:var(--neutral-50)} .btn--ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:none} .btn--ghost:hover{background:rgba(255,255,255,.2)} .btn--sm{font-size:14px;padding:10px 20px} .link{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--cato-green);display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap} .link svg{width:15px;height:15px;transition:.18s} .link:hover svg{transform:translateX(3px)} /* eyebrow / label */ .eyebrow{font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cato-green)} /* section rhythm */ .section{padding:96px 0} .section h2{font-family:var(--font-display);font-weight:400;font-size:48px;line-height:1.15;letter-spacing:-.5px;margin:0} .center{text-align:center} /* utility */ .glow-green{background:var(--glow-green)} /* ===== css/components.css ===== */ /* Cato Website UI kit — component styles */ .cato-lead{max-width:620px;margin:18px auto 0;font-size:18px;line-height:1.5;color:var(--neutral-500)} /* ---------- header ---------- */ .cato-hdr{position:fixed;top:24px;left:0;right:0;z-index:50;padding:0 40px} .cato-hdr__pill{max-width:1176px;margin:0 auto;height:64px;background:#fff;border-radius:100px;box-shadow:var(--shadow-header); display:flex;align-items:center;gap:24px;padding:0 14px 0 28px} .cato-hdr__logo{height:26px} .cato-hdr__nav{display:flex;gap:22px;flex:1} .cato-hdr__item{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--dark-green);display:flex;align-items:center;gap:4px;cursor:pointer} .cato-hdr__item svg{color:var(--neutral-400);transition:.2s} .cato-hdr__item:hover,.cato-hdr__item.is-open{color:var(--cato-green)} .cato-hdr__item.is-open svg{transform:rotate(180deg);color:var(--cato-green)} .cato-hdr__login{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--cato-green);cursor:pointer} .cato-hdr__lang{display:flex;align-items:center;gap:2px;color:var(--cato-green);cursor:pointer} .cato-mega{max-width:1176px;margin:10px auto 0;background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(24,45,42,.18);padding:18px} .cato-mega__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .cato-mega__cell{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;cursor:pointer;transition:.15s} .cato-mega__cell:hover{background:var(--neutral-50)} .cato-mega__ico{width:40px;height:40px;border-radius:10px;background:var(--dark-green);display:flex;align-items:center;justify-content:center} .cato-mega__txt b{display:block;font-family:var(--font-display);font-size:14px;color:var(--dark-green)} .cato-mega__txt small{font-family:var(--font-body);font-size:12px;color:var(--neutral-500);line-height:1.3;margin-top:3px;display:block} /* ---------- hero ---------- */ .cato-hero{position:relative;min-height:780px;overflow:hidden; background:linear-gradient(180deg,var(--dark-green) 1%,#576564 48%,#fff 100%)} .cato-hero__inner{position:relative;z-index:3;padding-top:300px;padding-bottom:120px} .cato-hero__title{font-family:var(--font-display);font-weight:400;font-size:80px;line-height:1.05;letter-spacing:-1px;color:var(--bright-green);margin:0} .cato-hero__sub{font-family:var(--font-display);font-size:24px;color:#fff;margin:14px 0 30px} .cato-hero__illu{position:absolute;top:-120px;right:-80px;width:820px;height:900px;z-index:1} .cato-hero__ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1.5px solid #fff;border-radius:50%} .cato-hero__glow{position:absolute;border-radius:50%;background:var(--glow-green);filter:blur(2px)} .cato-hero__glow.g1{width:460px;height:460px;top:110px;right:150px;opacity:.7} .cato-hero__glow.g2{width:260px;height:260px;top:380px;right:360px;opacity:.4} .cato-hero__mark{position:absolute;z-index:2;transform:translate(-50%,-50%)} /* ---------- landmotion cards ---------- */ .cato-lm{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:48px} .cato-lm__card{position:relative;background:var(--dark-green);border-radius:8px;overflow:hidden;padding:30px 14px 24px; display:flex;flex-direction:column;align-items:center;gap:18px;cursor:pointer;transition:.2s} .cato-lm__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)} .cato-lm__bar{position:absolute;top:0;left:0;right:0;height:10px} .cato-lm__ico{color:#fff} .cato-lm__card b{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;text-align:center} /* ---------- platform diagram ---------- */ .cato-diagram{margin-top:48px;border:1px solid var(--border);border-radius:12px;padding:28px 32px 40px;background:#fff} .cato-diagram__cols{display:flex;justify-content:space-between;margin-bottom:26px} .cato-diagram__cols span{font-family:var(--font-mono);font-size:11px;color:var(--neutral-500);flex:1;text-align:center} .cato-diagram__stage{position:relative;height:160px} .cato-diagram__wire{position:absolute;inset:0;width:100%;height:100%} .cato-diagram__node{position:absolute;top:50%;width:30px;height:30px;border-radius:50%;background:var(--cato-green);transform:translate(-50%,-50%);box-shadow:0 0 0 8px rgba(21,136,100,.14)} .cato-diagram__node.big{width:54px;height:54px;box-shadow:0 0 0 12px rgba(21,136,100,.16)} .cato-diagram__node.n1{left:22%}.cato-diagram__node.n2{left:50%}.cato-diagram__node.n3{left:78%} .cato-diagram__end{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:11px;color:var(--dark-green);background:var(--neutral-50);border:1px solid var(--border);border-radius:6px;padding:7px 11px} /* ---------- customers logo bar ---------- */ .cato-logobar{margin-top:60px;background:var(--dark-green);padding:30px 0} .cato-logobar__row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .cato-logobar__logo{font-family:var(--font-display);font-weight:700;font-size:20px;color:rgba(255,255,255,.82);letter-spacing:.02em} /* ---------- stats ---------- */ .cato-validated{background:var(--neutral-50)} .cato-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;text-align:left} .cato-stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px} .cato-stat__tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--cato-green);background:var(--sase-100);padding:4px 8px;border-radius:4px} .cato-stat__big{font-family:var(--font-display);font-size:48px;line-height:1;margin-top:18px;color:var(--dark-green)} .cato-stat__big span{font-size:22px;color:var(--neutral-400)} .cato-stat p{font-size:14px;color:var(--neutral-500);line-height:1.5;margin:12px 0 0} /* ---------- integrations ---------- */ .cato-int{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:48px;max-width:920px;margin-left:auto;margin-right:auto} .cato-int__chip{width:96px;height:96px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--dark-green);background:#fff;transition:.18s} .cato-int__chip:hover{border-color:var(--cato-green);color:var(--cato-green);transform:translateY(-3px)} /* ---------- resources ---------- */ .cato-resources{background:var(--dark-green);padding:96px 0} .cato-res__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px} .cato-res__card{display:flex;flex-direction:column;gap:14px;cursor:pointer} .cato-res__thumb{height:150px;border-radius:10px;position:relative;overflow:hidden} .cato-res__tag{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.16);padding:4px 8px;border-radius:4px} .cato-res__card b{font-family:var(--font-display);font-weight:500;font-size:16px;color:#fff;line-height:1.3} .cato-res__more{font-family:var(--font-mono);font-size:11px;color:var(--fluo);display:flex;align-items:center;gap:6px} /* ---------- faq ---------- */ .cato-faq{display:grid;grid-template-columns:300px 1fr;gap:40px} .cato-faq__head h2{margin-bottom:14px} .cato-faq__row{border-top:1px solid var(--border);padding:24px 0;cursor:pointer} .cato-faq__row:last-child{border-bottom:1px solid var(--border)} .cato-faq__q{display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--font-display);font-size:18px;color:var(--dark-green)} .cato-faq__ico{color:var(--cato-green);font-size:20px;flex-shrink:0} .cato-faq__a{font-size:15px;line-height:1.6;color:var(--neutral-500);margin-top:14px;max-width:90%} /* ---------- cta ---------- */ .cato-cta{position:relative;overflow:hidden;background:var(--cato-green);padding:120px 0} .cato-cta__rings{position:absolute;bottom:-260px;left:50%;transform:translateX(-50%);width:760px;height:760px;border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 0 80px rgba(255,255,255,.04),0 0 0 160px rgba(255,255,255,.03)} .cato-cta h2{letter-spacing:-1px;line-height:1.02} /* ---------- footer ---------- */ .cato-foot{position:relative;background:var(--dark-green);color:#fff;padding:80px 0 36px;overflow:hidden} .cato-foot__arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .cato-foot__inner{position:relative;display:grid;grid-template-columns:260px 1fr;gap:40px} .cato-foot__logo{height:36px;filter:brightness(0) invert(1)} .cato-foot__badges{display:flex;flex-direction:column;gap:8px;margin-top:24px;font-family:var(--font-mono);font-size:12px;color:var(--fg-on-dark-muted)} .cato-foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .cato-foot__col h4{font-family:var(--font-display);font-size:14px;font-weight:700;margin:0 0 16px} .cato-foot__col a{display:block;font-size:13px;color:var(--fg-on-dark-muted);margin-bottom:10px;cursor:pointer} .cato-foot__col a:hover{color:#fff} .cato-foot__legal{position:relative;display:flex;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--font-mono);font-size:11px;color:var(--fg-on-dark-muted)} /* ---------- modal ---------- */ .cato-modal{position:fixed;inset:0;z-index:100;background:rgba(24,45,42,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px} .cato-modal__box{background:#fff;border-radius:18px;padding:36px;width:420px;max-width:100%;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.3)} .cato-modal__box h3{font-family:var(--font-display);font-weight:400;font-size:26px;margin:12px 0 8px;color:var(--dark-green)} .cato-modal__box p{font-size:14px;color:var(--neutral-500);line-height:1.5;margin:0 0 22px} .cato-modal__field{border:1px solid var(--border);border-radius:8px;padding:13px 14px;font-size:14px;color:var(--neutral-400);margin-bottom:12px;display:flex;justify-content:space-between} .cato-modal__x{position:absolute;top:18px;right:18px;border:none;background:none;font-size:16px;color:var(--neutral-400);cursor:pointer} @media (max-width:1000px){ .cato-lm,.cato-mega__grid,.cato-res__grid{grid-template-columns:repeat(2,1fr)} .cato-stats,.cato-foot__cols{grid-template-columns:1fr 1fr} .cato-faq{grid-template-columns:1fr} .cato-hdr__nav{display:none} } /* ===== css/page.css ===== */ /* ============================================================ Frontier AI — Agentic CVE Mitigation page styles Builds on colors_and_type.css + kit.css + components.css ============================================================ */ .fa-root{ /* yellow primary CTA (retained from reference template) */ --cta: #F5C13D; --cta-hover: #E9B227; --cta-fg: #15241F; /* swappable accent (Tweaks: green | ai-purple) */ --accent: var(--cato-green); --accent-700: var(--sase-700); --accent-100: var(--sase-100); --accent-soft:#EAF4F0; /* section vertical rhythm (Tweaks: density) */ --sec-pad: 104px; --global-nav-h: 84px; } .fa-root[data-accent="ai"]{ --accent: var(--ai-500); --accent-700: var(--ai-700); --accent-100: var(--ai-100); --accent-soft:#F1ECF4; } .fa-root[data-density="compact"]{ --sec-pad: 68px; } .fa-root[data-density="airy"]{ --sec-pad: 132px; } .fa-root .section{ padding: var(--sec-pad) 0; } /* accent overrides for shared kit primitives */ .fa-root .eyebrow{ color: var(--accent); } .fa-root .link{ color: var(--accent); } .fa-root .cato-stat__tag{ color: var(--accent); background: var(--accent-100); } .fa-root .cato-int__chip:hover{ border-color: var(--accent); color: var(--accent); } /* ---- yellow CTA button ---- */ .btn--cta{ background: var(--cta); color: var(--cta-fg); } .btn--cta:hover{ background: var(--cta-hover); transform: translateY(-1px); } .btn--lg{ font-size: 17px; padding: 16px 30px; } /* ===== Architecture / "Our Approach" container (intro + media + 3 tiles) — GLOBAL ===== */ .arch__tiles.arch__tiles--2{ grid-template-columns:repeat(2,1fr); } .txt-link{ display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--cato-green); text-decoration:none; } .txt-link svg{ flex:none; width:14px; height:14px; transition:transform .18s; } .txt-link:hover svg{ transform:translateX(3px); } @media(max-width:680px){ .arch__tiles.arch__tiles--2{ grid-template-columns:1fr; } } .arch{ background:#fff; padding:104px 0; } .arch__head{ max-width:760px; text-align:center; margin-left:auto; margin-right:auto; } .arch__head .fa-h2, .arch__head .sol-h2{ margin-top:14px; } .arch__panel{ background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:0 26px 70px rgba(24,45,42,.12); padding:46px; margin-top:44px; } .arch__top{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; } .arch__intro p{ font-size:18px; line-height:1.62; color:var(--neutral-600,#3f4a47); margin:0; text-wrap:pretty; } .arch__intro p + p{ margin-top:18px; } .arch__media{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--dark-green); } .arch__media img{ width:100%; height:100%; object-fit:cover; display:block; } .arch__video{ cursor:pointer; } .arch__video::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(24,45,42,.15), rgba(24,45,42,.55)); transition:.2s; } .arch__video:hover::after{ background:linear-gradient(160deg, rgba(24,45,42,.10), rgba(24,45,42,.45)); } .arch__play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; } .arch__play span{ width:74px; height:74px; border-radius:50%; background:#38DAA8; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .18s; } .arch__video:hover .arch__play span{ transform:scale(1.08); } .arch__play svg{ width:52px; height:52px; margin-left:4px; fill:white; } .arch__media--ph{ display:flex; align-items:center; justify-content:center; } .arch__ph{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:20px; } .arch__ph svg{ width:34px; height:34px; color:rgba(255,255,255,.8); } .arch__ph em{ font-style:normal; font-family:var(--font-display); font-weight:600; font-size:14px; color:rgba(255,255,255,.85); } .arch__ph i{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); } .arch__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; padding-top:42px; border-top:1px solid var(--border-soft); } .arch__tile{ display:flex; flex-direction:column; } .arch__tile-ico{ width:48px; height:48px; border-radius:13px; background:var(--light-green); color:var(--cato-green); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .arch__tile-ico svg{ width:25px; height:25px; } .arch__tile h3{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.2px; color:var(--dark-green); margin:0 0 9px; } .arch__tile p{ font-size:14.5px; line-height:1.58; color:var(--neutral-500); margin:0; } @media(max-width:900px){ .arch__top{ grid-template-columns:1fr; gap:32px; } .arch__tiles{ grid-template-columns:1fr; gap:22px; } .arch__panel{ padding:30px; } } /* eyebrow as a pill (hero + section heads) */ .fa-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff; white-space:nowrap; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); padding:7px 14px; border-radius:var(--radius-pill); } .fa-pill--light{ color:var(--accent); background:var(--accent-100); border:none; } .fa-pill__dot{ width:7px;height:7px;border-radius:50%;background:var(--bright-green); } .fa-root[data-accent="ai"] .fa-pill__dot{ background:var(--ai-300); } /* section heading helpers */ .fa-h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(34px,4vw,52px); line-height:1.1; letter-spacing:-.6px; margin:18px 0 0; color:var(--dark-green); } .fa-lead{ max-width:680px; font-size:19px; line-height:1.55; color:var(--neutral-500); margin:18px 0 0; } .center .fa-lead{ margin-left:auto; margin-right:auto; } /* ============================================================ scroll reveal ============================================================ */ .reveal{ opacity:0; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change:opacity, transform; } .reveal--float{ transform:translateY(42px); } .reveal--fade{ transform:none; } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important; transition:none; } } /* ============================================================ GLOBAL NAV — full-width white bar ============================================================ */ .fa-nav{ position:fixed; top:0; left:0; right:0; z-index:50; background:#fff; border-bottom:1px solid var(--border-soft); } .fa-nav__inner{ position:relative; max-width:1400px; margin:0 auto; height:var(--global-nav-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 44px; } .fa-nav__logo{ height:30px; justify-self:start; } .fa-nav__links{ display:flex; gap:40px; justify-self:center; } .fa-nav__item{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--dark-green); display:flex; align-items:center; gap:5px; cursor:pointer; } .fa-nav__item svg{ color:var(--neutral-400); transition:.2s; } .fa-nav__item:hover,.fa-nav__item.is-open{ color:var(--cato-green); } .fa-nav__item.is-open svg{ transform:rotate(180deg); color:var(--cato-green); } .fa-nav__actions{ justify-self:end; display:flex; align-items:center; gap:24px; } .fa-nav__signin{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--dark-green); cursor:pointer; white-space:nowrap; } .fa-nav__signin:hover{ color:var(--cato-green); } .fa-nav .cato-mega{ position:absolute; top:calc(var(--global-nav-h) - 6px); left:50%; transform:translateX(-50%); margin:0; } @media(max-width:900px){ .fa-nav__links{ display:none; } } /* ============================================================ HERO — full-bleed, customizable background, 3-frame carousel ============================================================ */ .fa-hero{ position:relative; overflow:hidden; background:var(--dark-green); min-height:762px; display:flex; align-items:center; padding:calc(var(--global-nav-h) + 52px) 0 52px; /* tone defaults (overridden inline by the Hero background tweak) */ --hero-ink: rgba(129,229,172,.55); --hero-glowA: rgba(21,136,100,.45); --hero-glowB: rgba(178,170,84,.18); } .fa-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: radial-gradient(58% 48% at 84% 2%, var(--hero-glowB), transparent 60%), radial-gradient(85% 72% at 50% 92%, var(--hero-glowA), transparent 64%); } /* pattern layer (rings / arcs / dots / aurora) */ .fa-hero__pat{ position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%; -webkit-mask:radial-gradient(125% 110% at 50% 40%, #000 26%, transparent 82%); mask:radial-gradient(125% 110% at 50% 40%, #000 26%, transparent 82%); } .fa-hero__pat--dots{ background-image:radial-gradient(var(--hero-ink) 1.4px, transparent 1.4px); background-size:30px 30px; opacity:.55; } .fa-hero__pat--aurora{ -webkit-mask:none; mask:none; filter:blur(8px); opacity:.9; background: radial-gradient(38% 48% at 18% 26%, rgba(56,218,168,.34), transparent 62%), radial-gradient(44% 54% at 82% 16%, rgba(112,154,188,.30), transparent 62%), radial-gradient(52% 60% at 66% 88%, rgba(118,96,135,.34), transparent 64%), radial-gradient(40% 50% at 26% 92%, rgba(77,145,150,.30), transparent 62%); } /* photography background layer (per-frame, crossfaded) */ .fa-hero__bgs{ position:absolute; inset:0; z-index:0; pointer-events:none; } .fa-hero__bg{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none; } .fa-hero__bg.is-active{ opacity:1; pointer-events:auto; } .fa-hero__bg img{ width:100%; height:100%; display:block; object-fit:cover; } /* scrim removed — hero photo shows in full color (frosted card carries the copy) */ .fa-hero__scrim{ display:none; } /* frosted glass pane behind the hero copy — Apple "liquid glass" treatment */ .fa-hero__card{ position:relative; display:flex; flex-direction:column; align-items:center; padding:52px 60px 56px; border-radius:28px; max-width:880px; background:linear-gradient(160deg, rgba(12,28,24,.42), rgba(8,20,17,.32)); border:none; /* layered depth: outer drop, bright inner top rim, soft inner bottom shade */ box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(255,255,255,.12), inset 0 0 24px rgba(255,255,255,.05); -webkit-backdrop-filter:blur(20px) saturate(1.6) brightness(1.05); backdrop-filter:blur(20px) saturate(1.6) brightness(1.05); } /* specular rim — bright at top-left & bottom-right corners, faint along the sides */ .fa-hero__card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; padding:1.5px; background:linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.04) 58%, rgba(255,255,255,.3) 82%, rgba(255,255,255,.7) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; } /* soft glossy sheen across the top third for the wet-glass highlight */ .fa-hero__card::after{ content:""; position:absolute; left:0; right:0; top:0; height:46%; border-radius:28px 28px 0 0; pointer-events:none; z-index:1; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); } .fa-hero__inner{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; width:100%; } .fa-hero__frames{ display:grid; width:100%; } .fa-hero__frame{ grid-area:1 / 1; display:flex; flex-direction:column; align-items:center; text-align:center; opacity:0; transition:opacity .7s ease; pointer-events:none; } .fa-hero__frame.is-active{ opacity:1; pointer-events:auto; } .fa-hero__card .fa-hero__title{ margin-top:0; } .fa-hero__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(34px,4.5vw,60px); line-height:1.06; letter-spacing:-1.4px; margin:24px 0 0; text-wrap:balance; } .fa-hero__title .grad{ color:var(--bright-green); } .fa-root[data-accent="ai"] .fa-hero__title .grad{ color:var(--ai-300); } .fa-hero__title .focus{ color:#fff; } .fa-hero__sub{ font-family:var(--font-body); font-size:clamp(16px,1.4vw,20px); line-height:1.55; color:rgba(255,255,255,.74); margin:22px auto 0; max-width:640px; } .fa-hero__cta{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; justify-content:center; } .fa-hero__dots{ display:flex; gap:10px; justify-content:center; position:absolute; left:50%; transform:translateX(-50%); bottom:96px; z-index:3; } .fa-hero__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.28); border:none; padding:0; cursor:pointer; transition:.25s; } .fa-hero__dot.is-active{ width:30px; border-radius:5px; background:var(--bright-green); } .fa-root[data-accent="ai"] .fa-hero__dot.is-active{ background:var(--ai-300); } .fa-pill--outline{ background:transparent; border:1px solid rgba(129,229,172,.42); color:var(--bright-green); } .fa-root[data-accent="ai"] .fa-pill--outline{ border-color:rgba(173,159,183,.55); color:var(--ai-300); } .btn--outline{ background:transparent; color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.7); } .btn--outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; transform:translateY(-1px); } /* story CTA: standard yellow button (see .btn--cta) — always visible */ .fa-cust__story{ background:var(--cta); color:var(--cta-fg); border:none; box-shadow:var(--shadow-btn); } .fa-cust__story:hover{ background:var(--cta-hover); } /* ============================================================ EU-HERO — left-aligned rotating hero (all platform pages) ============================================================ */ .eu-hero{ min-height:762px; } /* match the solution-page hero height */ .eu-hero .fa-hero__bg img{ object-position:center right; } .eu-hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(10,24,20,.92) 0%, rgba(10,24,20,.80) 30%, rgba(10,24,20,.38) 58%, rgba(10,24,20,0) 80%), linear-gradient(0deg, rgba(10,24,20,.50), rgba(10,24,20,0) 42%); } .eu-hero__inner{ position:relative; z-index:2; width:100%; } .eu-hero__copy{ max-width:560px; text-align:left; } .eu-hero__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(40px,4.6vw,66px); line-height:1.05; letter-spacing:-1.2px; color:#fff; margin:0; text-wrap:balance; } .eu-hero__title em{ font-style:normal; color:var(--bright-green); } .eu-hero__sub{ font-family:var(--font-body); font-size:20px; line-height:1.55; color:rgba(255,255,255,.80); margin:22px 0 0; max-width:480px; } .eu-hero__frames{ display:block; position:relative; } .eu-hero__frame{ position:absolute; top:0; left:0; right:0; opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease; pointer-events:none; } .eu-hero__frame.is-active{ position:relative; opacity:1; transform:none; pointer-events:auto; } /* actions row — CTAs at the left, dots pinned to the right edge of the content */ .eu-hero__actions{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:34px; width:100%; } .eu-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin:0; } .eu-hero__dots{ display:flex; gap:10px; margin:0; flex-shrink:0; } @media (prefers-reduced-motion: reduce){ .eu-hero__frame{ transition:none; } } @media(max-width:760px){ .eu-hero .fa-hero__bg img{ object-position:center; } .eu-hero__scrim{ background:linear-gradient(0deg, rgba(10,24,20,.94), rgba(10,24,20,.58)); } .eu-hero__copy{ max-width:none; } .eu-hero__actions{ flex-wrap:wrap; gap:18px; } } /* ---- knob: background = solid color (solutions) ---- */ .eu-hero[data-bg="color"]{ background:var(--hero-bg, #fff); } .eu-hero__glow{ position:absolute; right:-4%; top:50%; width:980px; height:980px; transform:translateY(-50%); pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(21,136,100,.55) 0%, rgba(21,136,100,0) 60%); } /* ---- knob: media = right-side image (solutions) → split grid ---- */ .eu-hero[data-media="right"] .eu-hero__inner{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; } .eu-hero[data-media="right"] .eu-hero__copy{ max-width:none; } .eu-hero__media{ position:relative; min-height:470px; } .eu-hero__media img{ width:100%; height:100%; min-height:470px; object-fit:contain; display:block; } /* ---- knob: rotation off (solutions) → hide dots ---- */ .eu-hero[data-rotate="off"] .eu-hero__dots{ display:none; } .eu-hero[data-rotate="off"] .eu-hero__actions{ justify-content:flex-start; } /* ---- knob: theme = light (dark text on light bg) ---- */ .eu-hero[data-theme="light"] .eu-hero__title{ color:var(--dark-green); } .eu-hero[data-theme="light"] .eu-hero__title em{ color:var(--accent); } .eu-hero[data-theme="light"] .eu-hero__sub{ color:var(--neutral-500); } /* dark-theme secondary CTA (solutions on dark green) */ .eu-hero[data-theme="dark"] .btn--secondary{ background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; } .eu-hero[data-theme="dark"] .btn--secondary:hover{ background:rgba(255,255,255,.08); border-color:#fff; } @media(max-width:880px){ .eu-hero[data-media="right"] .eu-hero__inner{ grid-template-columns:1fr; gap:32px; } .eu-hero__media{ min-height:0; } .eu-hero__media img{ min-height:0; max-height:340px; } } /* ============================================================ IN-PAGE STICKY SUB-NAV (sticks to bottom of global nav) ============================================================ */ .fa-subnav{ position:sticky; top:var(--global-nav-h); z-index:30; background:#fff; border-bottom:1px solid var(--border-soft); } .fa-subnav__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; height:64px; } .fa-subnav__label{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--neutral-400); white-space:nowrap; justify-self:start; } .fa-subnav__links{ position:relative; display:flex; gap:4px; justify-self:center; } .fa-subnav__pill{ position:absolute; top:50%; transform:translateY(-50%); height:38px; background:#1B1C1E; border-radius:var(--radius-pill); transition:left .26s cubic-bezier(.33,1,.68,1), width .26s cubic-bezier(.33,1,.68,1), opacity .18s; z-index:0; } .fa-subnav__link{ position:relative; z-index:1; font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--neutral-600); padding:9px 18px; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap; background:none; border:none; transition:color .28s; } .fa-subnav__link:hover{ color:var(--dark-green); } .fa-subnav__link.is-active{ color:var(--dark-green); } .fa-subnav__links.is-ready .fa-subnav__link.is-active{ color:#fff; } .fa-subnav__cta{ margin-left:auto; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; background:var(--medium-green); border:none; border-radius:var(--radius-pill); padding:11px 22px; cursor:pointer; transition:.18s; white-space:nowrap; } .fa-subnav__cta:hover{ background:#0A3A30; } .fa-subnav__cta .dot{ width:8px; height:8px; border-radius:50%; background:var(--bright-green); } .fa-root[data-accent="ai"] .fa-subnav__cta .dot{ background:var(--ai-300); } /* mobile trigger — created in JS (main.js initSubnav); hidden on desktop */ .fa-subnav__toggle{ display:none; } @media(max-width:1024px){ /* row collapses to: [ current-section trigger ......... Live demo ] */ .fa-subnav__row{ display:flex; align-items:center; gap:12px; height:60px; } .fa-subnav__label{ display:none; } .fa-subnav__toggle{ display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 10px 8px 16px; cursor:pointer; text-align:left; transition:border-color .18s; } .fa-subnav__toggle:hover{ border-color:var(--neutral-400); } .fa-subnav__toggle .ttl{ display:flex; flex-direction:column; min-width:0; line-height:1.15; } .fa-subnav__toggle .eyebrow{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--neutral-400); } .fa-subnav__toggle .cur{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--dark-green); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fa-subnav__toggle .burger{ margin-left:auto; flex:none; width:18px; height:18px; color:var(--dark-green); transition:transform .26s ease; } .fa-subnav.is-open .fa-subnav__toggle .burger{ transform:rotate(180deg); } /* links become a full-width dropdown panel below the sticky bar */ .fa-subnav__links{ position:absolute; left:0; right:0; top:100%; width:100%; display:block; padding:8px; gap:0; background:#fff; border-bottom:1px solid var(--border-soft); box-shadow:0 24px 40px rgba(0,0,0,.10); max-height:calc(100vh - var(--global-nav-h) - 60px); overflow-y:auto; z-index:40; transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility .2s; } .fa-subnav.is-open .fa-subnav__links{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; } .fa-subnav__pill{ display:none; } .fa-subnav__link{ display:flex; align-items:center; width:100%; padding:13px 16px; border-radius:10px; font-size:16px; } .fa-subnav__link, .fa-subnav__links.is-ready .fa-subnav__link.is-active{ color:var(--dark-green); } .fa-subnav__link.is-active{ background:var(--accent-100); color:var(--dark-green); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); } .fa-subnav__cta{ margin-left:0; flex:none; } } @media(max-width:420px){ .fa-subnav__cta{ padding:10px 16px; font-size:14px; } .fa-subnav__cta .dot{ width:7px; height:7px; } } /* ============================================================ TODAY'S CHALLENGES — focus stage (icon + autoplay timeline) One challenge owns the stage at a time: an accent-tinted stroke icon beside its title + copy, driven by a numberless progress timeline. Each .fa-chal__scene carries a data-icon name; main.js injects the matching icon and tints it to the active accent (--ca). ============================================================ */ .fa-chal{ position:relative; text-align:left; background: radial-gradient(72% 60% at 86% -4%, rgba(24,46,42,.65), transparent 60%), radial-gradient(64% 66% at 6% 104%, rgba(24,46,42,.5), transparent 62%), #2A3033; } .fa-chal .fa-pill--outline{ margin:0 auto; display:block; width:fit-content; } .fa-chal .fa-chal__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(34px,4.4vw,56px); line-height:1.06; letter-spacing:-1px; color:#fff; margin:22px auto 0; max-width:1040px; text-align:center; } .fa-chal__title .danger{ color:#FF8A7A; } .fa-chal__stage{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:center; margin-top:48px; text-align:left; } .fa-chal__viz{ position:relative; width:clamp(220px,28vw,336px); aspect-ratio:349/280; border-radius:12px; overflow:hidden; flex:none; } /* Pages with a full illustration get a wider 2:1 slot; icon-only pages keep the snug square box. */ .fa-chal__viz:has(img){ width:clamp(280px,40vw,460px); aspect-ratio:2/1; border-radius:0; } .fa-chal__viz::after{ display:none; } .fa-chal__scene{ position:absolute; inset:0; color:var(--ca); transition:color .7s ease; animation:faRise .5s cubic-bezier(.2,.8,.2,1); display:flex; align-items:center; justify-content:center; } .fa-viz__svg{ width:38%; height:38%; display:block; } .fa-chal__scene img{ width:100%; height:100%; object-fit:contain; display:block; } .fa-chal__detail h3, .fa-chal__detail p{ animation:faRise .5s cubic-bezier(.2,.8,.2,1); } @keyframes faRise{ from{ transform:translateY(13px); } to{ transform:none; } } .fa-chal__idx{ display:none; } .fa-chal__detail h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,2.7vw,40px); line-height:1.1; letter-spacing:-.5px; color:#fff; margin:0 0 14px; } .fa-chal__detail p{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.68); margin:0; max-width:690px; } .fa-chal__timeline{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end; margin-top:48px; } .fa-chal__seg{ flex:1 1 140px; background:none; border:none; cursor:pointer; padding:0; text-align:left; font:inherit; } .fa-chal__seglbl{ display:block; font-family:var(--font-display); font-weight:500; font-size:14.5px; color:rgba(255,255,255,.45); transition:color .3s; margin-bottom:14px; } .fa-chal__seglbl b{ display:none; } .fa-chal__seg.is-done .fa-chal__seglbl{ color:rgba(255,255,255,.72); } .fa-chal__seg.is-active .fa-chal__seglbl{ color:#fff; } .fa-chal__seg:hover .fa-chal__seglbl{ color:#fff; } .fa-chal__segbar{ display:block; height:3px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; } .fa-chal__segfill{ display:block; height:100%; width:0; background:var(--ca); border-radius:2px; } .fa-chal__play{ flex:none; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; } .fa-chal__play:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); } @keyframes faFill{ from{ width:0; } to{ width:100%; } } @media (prefers-reduced-motion: reduce){ .fa-chal__scene{ transition:none; } .fa-chal__detail{ animation:none; } .fa-chal__segfill{ animation:none!important; } } @media(max-width:880px){ .fa-chal__stage{ gap:30px; } .fa-chal__viz{ width:clamp(140px,36vw,220px); } .fa-chal__play{ display:none; } } @media(max-width:600px){ .fa-chal__stage{ grid-template-columns:1fr; gap:20px; } .fa-chal__viz{ width:100%; } .fa-chal__seg{ flex:1 1 100%; } } /* ============================================================ WHY ARCHITECTURE — 3 blocks ============================================================ */ .fa-why{ background:var(--neutral-50); } .fa-why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; } .fa-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:32px; display:flex; flex-direction:column; transition:.2s; box-shadow:0 6px 18px rgba(24,45,42,.07); } .fa-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--accent-100); } .fa-card__ico{ width:52px; height:52px; border-radius:13px; background:var(--accent-100); color:var(--accent-700); display:flex; align-items:center; justify-content:center; margin-bottom:24px; } .fa-card h3{ font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.2; color:var(--dark-green); margin:0 0 12px; } .fa-card p{ font-size:15px; line-height:1.6; color:var(--neutral-500); margin:0 0 22px; flex:1; } @media(max-width:880px){ .fa-why__grid{ grid-template-columns:1fr; } } /* ============================================================ PROMO webinar banner ============================================================ */ .fa-promo-wrap{ padding: calc(var(--sec-pad) * .5) 0; } .fa-promo{ position:relative; overflow:hidden; background:var(--dark-green); border-radius:22px; padding:56px 60px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .fa-promo__arcs{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .fa-promo__body{ position:relative; z-index:2; max-width:600px; } .fa-promo__body h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1.12; letter-spacing:-.5px; color:#fff; margin:18px 0 12px; } .fa-promo__body p{ font-size:16px; line-height:1.55; color:rgba(255,255,255,.7); margin:0 0 4px; } .fa-promo__meta{ display:flex; gap:18px; margin-top:18px; font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.6); } .fa-promo__meta span{ display:flex; align-items:center; gap:7px; } .fa-promo__cta{ position:relative; z-index:4; } .fa-promo__stretch{ position:absolute; inset:0; z-index:3; display:block; } /* ============================================================ AGENTIC CVE — tabbed ============================================================ */ .fa-tabs{ position:relative; display:inline-flex; gap:4px; margin-top:40px; padding:5px; background:var(--accent); border:1px solid var(--accent); border-radius:var(--radius-pill); } .fa-tab__pill{ position:absolute; top:5px; bottom:5px; background:#fff; border-radius:var(--radius-pill); z-index:0; transition:left .26s cubic-bezier(.33,1,.68,1), width .26s cubic-bezier(.33,1,.68,1), opacity .18s; box-shadow:0 2px 8px rgba(0,0,0,.16); } .fa-tab{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600; font-size:15px; color:rgba(255,255,255,.82); padding:11px 26px; border-radius:var(--radius-pill); cursor:pointer; transition:color .25s; border:none; background:none; } .fa-tab:hover{ color:#fff; } .fa-tab.is-active{ color:#fff; } .fa-tabs.is-ready .fa-tab.is-active{ color:var(--accent); } .fa-tab__step{ opacity:.6; margin-right:8px; font-family:var(--font-mono); font-size:12px; } .fa-tab.is-active .fa-tab__step{ opacity:.85; } .fa-panel{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; margin-top:44px; } .fa-panel__copy h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,2.6vw,36px); line-height:1.14; letter-spacing:-.5px; color:var(--dark-green); margin:6px 0 16px; } .fa-panel__copy > p{ font-size:16px; line-height:1.6; color:var(--neutral-500); margin:0 0 24px; } .fa-bul{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:14px; } .fa-bul li{ display:flex; gap:13px; font-size:15px; line-height:1.45; color:var(--dark-green); } .fa-bul__check{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--accent-100); color:var(--accent-700); display:flex; align-items:center; justify-content:center; } .fa-bul__check svg{ width:13px; height:13px; } .fa-figure{ position:relative; aspect-ratio:1/.82; border-radius:18px; background:var(--dark-green); overflow:hidden; display:flex; align-items:center; justify-content:center; } .fa-figure svg{ width:100%; height:100%; } @media(max-width:880px){ .fa-panel{ grid-template-columns:1fr; gap:32px; } /* segmented control stays a hugging, centered pill but scrolls if it can't fit */ .fa-tabs{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .fa-tabs::-webkit-scrollbar{ display:none; } .fa-tab{ white-space:nowrap; flex:none; } } @media(max-width:520px){ .fa-tabs{ width:100%; } .fa-tab{ padding:11px 16px; font-size:14px; } } /* ============================================================ NEWS & RESOURCES ============================================================ */ .fa-res__grid{ display:flex; gap:22px; margin-top:52px; overflow-x:scroll; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; padding:4px 2px 10px; } .fa-res__grid::-webkit-scrollbar{ display:none; } .fa-res__card{ display:flex; flex-direction:column; flex:0 0 calc((100% - 66px) / 4); border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; cursor:pointer; transition:.2s; box-shadow:0 6px 18px rgba(24,45,42,.07); } .fa-res__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--accent-100); } .fa-res__thumb{ height:148px; position:relative; display:flex; align-items:flex-end; padding:14px; overflow:hidden; } .fa-res__thumb::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 92% at 82% 130%, rgba(129,229,172,.32), transparent 55%), repeating-radial-gradient(circle at 82% 128%, rgba(255,255,255,.07) 0 1px, transparent 1px 24px); } .fa-res__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } .fa-res__thumb::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(13,31,28,.55), transparent); } .fa-res__tag{ position:relative; z-index:3; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.09em; color:#fff; background:rgba(13,31,28,.5); padding:5px 9px; border-radius:5px; } .fa-res__bd{ padding:20px; display:flex; flex-direction:column; flex:1; text-align:left; } .fa-res__bd b{ font-family:var(--font-display); font-weight:500; font-size:16.5px; line-height:1.28; color:var(--dark-green); } .fa-res__bd p{ font-size:13.5px; line-height:1.5; color:var(--neutral-500); margin:10px 0 0; flex:1; } .fa-res__foot{ display:flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--font-mono); font-size:11px; color:var(--accent); } @media(max-width:980px){ .fa-res__card{ flex-basis:calc((100% - 22px) / 2); } } @media(max-width:560px){ .fa-res__card{ flex-basis:85%; } } /* ============================================================ CUSTOMERS — featured story + selector list + reviews ============================================================ */ .fa-cust__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; } .fa-cust__head .fa-h2{ margin-top:10px; } .fa-cust__seeall{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--dark-green); background:#fff; border:1px solid var(--border); border-radius:var(--radius-pill); padding:13px 22px; cursor:pointer; white-space:nowrap; transition:.18s; } .fa-cust__seeall:hover{ border-color:var(--accent); color:var(--accent); } .fa-cust__seeall svg{ width:16px; height:16px; } .fa-cust__main{ display:grid; grid-template-columns:1.78fr 1fr; gap:24px; margin-top:40px; align-items:stretch; } /* Layout D — full-bleed photo with the quote overlaid (top-left) */ .fa-cust__feature{ position:relative; display:flex; border-radius:20px; overflow:hidden; min-height:380px; background:linear-gradient(155deg,#243A36,#16241F); box-shadow:0 18px 44px rgba(24,45,42,.12); } .fa-cust__photo{ position:absolute; inset:0; overflow:hidden; z-index:0; } .fa-cust__photo::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:3; } /* ---- Color-swatch customer feature (brand color per story, no photo) ---- */ /* Each .fa-cust__item supplies data-bg="#hex"; main.js sets --cust-bg + toggles .is-dark-bg for light ink on dark colors. Quarter-arc motif, no top-right circle. */ .fa-cust__feature--swatch{ background:var(--cust-bg,#56CCF2); } .fa-cust__feature--swatch .fa-cust__photo{ background:var(--cust-bg,#56CCF2); transition:background .35s ease; } .fa-cust__feature--swatch .fa-cust__photoimg, .fa-cust__feature--swatch .fa-cust__ph{ display:none; } .fa-cust__feature--swatch .fa-cust__photo::after{ background: radial-gradient(circle at 100% 100%, rgba(255,255,255,.30) 0 200px, transparent 201px), radial-gradient(circle at 100% 100%, rgba(14,59,77,.16) 0 300px, transparent 301px); } /* dark ink — default, for light swatch colors */ .fa-cust__feature--swatch .fa-cust__qmark{ color:#0E3B4D; text-shadow:none; } .fa-cust__feature--swatch .fa-cust__quote, .fa-cust__feature--swatch .fa-cust__meta b{ color:#0B2F3D; text-shadow:none; } .fa-cust__feature--swatch .fa-cust__meta > span{ color:#1C5366; text-shadow:none; } .fa-cust__feature--swatch .fa-cust__story{ background:var(--cta); color:var(--cta-fg); border:none; box-shadow:var(--shadow-btn); } .fa-cust__feature--swatch .fa-cust__story:hover{ background:var(--cta-hover); border-color:transparent; } /* the warm-yellow swatch (5th template color) — a yellow button would vanish, so flip to purple */ .fa-cust__feature--swatch.is-yellow-bg .fa-cust__story{ background:#754292; color:#fff; } .fa-cust__feature--swatch.is-yellow-bg .fa-cust__story:hover{ background:#653a80; } /* light ink — for dark swatch colors (e.g. purple) */ .fa-cust__feature--swatch.is-dark-bg .fa-cust__qmark{ color:#fff; } .fa-cust__feature--swatch.is-dark-bg .fa-cust__quote, .fa-cust__feature--swatch.is-dark-bg .fa-cust__meta b{ color:#fff; } .fa-cust__feature--swatch.is-dark-bg .fa-cust__meta > span{ color:rgba(255,255,255,.82); } .fa-cust__feature--swatch.is-dark-bg .fa-cust__story{ background:var(--cta); color:var(--cta-fg); border:none; } .fa-cust__feature--swatch.is-dark-bg .fa-cust__story:hover{ background:var(--cta-hover); border-color:transparent; } .fa-cust__photoimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:1; } .fa-cust__photoimg:not([src]), .fa-cust__photoimg[src=""]{ display:none; } /* Photography placeholder — user supplies the image by setting the img src (jpg/png/svg) */ .fa-cust__ph{ position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:8px; text-align:right; padding:24px 28px; } .fa-cust__ph svg{ width:44px; height:44px; color:rgba(255,255,255,.55); } .fa-cust__ph em{ font-family:var(--font-display); font-style:normal; font-weight:500; font-size:15px; color:rgba(255,255,255,.72); } .fa-cust__ph i{ font-family:var(--font-mono); font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); } .fa-cust__panel{ position:relative; z-index:2; flex:1; min-width:0; background:transparent; padding:38px 40px; display:flex; flex-direction:column; justify-content:flex-start; } .fa-cust__qmark{ font-family:Georgia, serif; font-weight:700; font-size:64px; line-height:.7; color:var(--bright-green); height:30px; text-shadow:-1px -1px 1px rgba(0,0,0,.95), 1px -1px 1px rgba(0,0,0,.95), -1px 1px 1px rgba(0,0,0,.95), 1px 1px 1px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9); } .fa-root[data-accent="ai"] .fa-cust__qmark{ color:var(--ai-300); } .fa-cust__quote{ font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.3; letter-spacing:-.3px; color:#fff; margin:18px 0 0; max-width:620px; text-shadow:-1px -1px 1px rgba(0,0,0,.95), 1px -1px 1px rgba(0,0,0,.95), -1px 1px 1px rgba(0,0,0,.95), 1px 1px 1px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9); } .fa-cust__meta{ margin-top:24px; padding-top:0; max-width:620px; } .fa-cust__meta b{ font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; text-shadow:-1px -1px 1px rgba(0,0,0,.95), 1px -1px 1px rgba(0,0,0,.95), -1px 1px 1px rgba(0,0,0,.95), 1px 1px 1px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9); } .fa-cust__meta > span{ display:block; font-weight:500; font-size:16px; color:#fff; margin-top:4px; text-shadow:-1px -1px 1px rgba(0,0,0,.95), 1px -1px 1px rgba(0,0,0,.95), -1px 1px 1px rgba(0,0,0,.95), 1px 1px 1px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9); } .fa-cust__btns{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:24px; } /* "Watch the story" — transparent with black ink + outline; flips to white on dark (e.g. purple) swatch cards */ .fa-cust__watch{ background:transparent; color:#111; border:1.5px solid #111; box-shadow:none; } .fa-cust__watch:hover{ background:rgba(0,0,0,.06); } .fa-cust__feature--swatch.is-dark-bg .fa-cust__watch{ color:#fff; border-color:#fff; } .fa-cust__feature--swatch.is-dark-bg .fa-cust__watch:hover{ background:rgba(255,255,255,.14); } .fa-cust__list{ display:flex; flex-direction:column; gap:12px; } .fa-cust__item{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; cursor:pointer; background:#fff; transition:.18s; text-align:left; width:100%; box-shadow:0 4px 14px rgba(24,45,42,.06); } .fa-cust__item:hover{ border-color:var(--neutral-300); } .fa-cust__item.is-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .fa-cust__avatar{ position:relative; overflow:hidden; width:52px; height:52px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff;; border:1px solid var(--border); } /* Logo placeholder — user supplies a logo by setting the img src (jpg/png/svg) */ .fa-cust__avatarimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5px; z-index:1; } .fa-cust__avatarimg:not([src]), .fa-cust__avatarimg[src=""]{ display:none; } /* generic icon fills the avatar edge-to-edge (no padding) and supplies its own background */ .fa-cust__avatar--fill .fa-cust__avatarimg{ padding:0; } .fa-cust__avatar--fill{ background:transparent; border-color:transparent; } .fa-cust__avatar em{ font-family:var(--font-mono); font-style:normal; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-400); } .fa-cust__itxt{ flex:1; min-width:0; } .fa-cust__itxt b{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--dark-green); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fa-cust__item.is-active .fa-cust__itxt b{ color:var(--accent); } .fa-cust__itxt span{ font-size:12.5px; color:var(--neutral-500); display:block; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fa-cust__arrow{ color:var(--neutral-400); flex-shrink:0; } .fa-cust__item.is-active .fa-cust__arrow{ color:var(--accent); } .fa-reviews{ margin-top:88px; } .fa-reviews__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; } .fa-reviews__head h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,2.6vw,34px); color:var(--dark-green); margin:0; letter-spacing:-.4px; } .fa-reviews__head p{ font-size:15px; color:var(--neutral-500); margin:10px 0 0; } .fa-reviews__rating{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:15px; color:var(--dark-green); white-space:nowrap; } .fa-reviews__rating b{ font-weight:700; } .fa-stars{ display:inline-flex; gap:2px; color:#F5C13D; } .fa-reviews__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px; } .fa-review{ border:1px solid var(--border); border-radius:14px; padding:24px; display:flex; flex-direction:column; box-shadow:0 6px 18px rgba(24,45,42,.07); } .fa-review__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .fa-review__via{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--neutral-400); } .fa-review h4{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--dark-green); margin:0 0 10px; line-height:1.3; } .fa-review p{ font-size:14px; line-height:1.55; color:var(--neutral-500); margin:0; flex:1; } .fa-review__by{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border-soft); } .fa-review__by b{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--dark-green); display:block; } .fa-review__by span{ font-size:12.5px; color:var(--neutral-500); } @media(max-width:1000px){ .fa-cust__main{ grid-template-columns:1fr; } .fa-cust__feature{ grid-template-columns:1fr; } .fa-reviews__grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .fa-reviews__grid{ grid-template-columns:1fr; } .fa-cust__feature{ min-height:0; } .fa-cust__head, .fa-reviews__head{ flex-direction:column; align-items:flex-start; } } /* ============================================================ REQUEST A DEMO — standalone rounded card ============================================================ */ .fa-demo{ background:#fff; } .fa-demo__card{ position:relative; display:grid; grid-template-columns:1fr 1fr; border-radius:28px; overflow:hidden; box-shadow:0 40px 90px rgba(24,45,42,.18); background:var(--dark-green); } .fa-demo__media{ position:relative; padding:54px 48px; overflow:hidden; min-height:540px; } .fa-demo__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .fa-demo__media::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(155deg, rgba(13,30,27,.55), rgba(13,30,27,.93)); } .fa-demo__mediabody{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%; } .fa-demo__media h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(28px,2.8vw,40px); line-height:1.1; letter-spacing:-.5px; color:#fff; margin:0; } .fa-demo__media .lead{ font-size:16px; line-height:1.55; color:rgba(255,255,255,.78); margin:18px 0 0; max-width:430px; } .fa-demo__expect{ font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bright-green); margin:auto 0 18px; padding-top:34px; } .fa-root[data-accent="ai"] .fa-demo__expect{ color:var(--ai-300); } .fa-demo__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; } .fa-demo__list li{ display:flex; gap:14px; align-items:center; font-size:15px; color:rgba(255,255,255,.9); } .fa-demo__lico{ width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(129,229,172,.14); color:var(--bright-green); } .fa-demo__lico img{ position:static; inset:auto; width:20px; height:20px; object-fit:contain; } .fa-root[data-accent="ai"] .fa-demo__lico{ background:rgba(173,159,183,.18); color:var(--ai-300); } .fa-demo__panel{ background:#0E1B19; padding:54px 48px; display:flex; flex-direction:column; justify-content:center; } .fa-demo__panel .eyebrow{ color:var(--bright-green); } .fa-root[data-accent="ai"] .fa-demo__panel .eyebrow{ color:var(--ai-300); } .fa-demo__panel h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3vw,44px); color:#fff; margin:12px 0 28px; letter-spacing:-.5px; } .fa-dfield{ margin-bottom:20px; } .fa-dfield label{ display:block; font-family:var(--font-display); font-size:14px; font-weight:500; color:rgba(255,255,255,.85); margin-bottom:9px; } .fa-dfield input, .fa-dfield textarea{ width:100%; border:none; border-radius:11px; padding:16px 18px; font-size:15px; font-family:var(--font-body); color:var(--dark-green); background:#fff; } .fa-dfield textarea{ resize:vertical; min-height:104px; line-height:1.5; } .fa-dfield input::placeholder, .fa-dfield textarea::placeholder{ color:var(--neutral-400); } .fa-dfield input:focus, .fa-dfield textarea:focus{ outline:none; box-shadow:0 0 0 3px rgba(129,229,172,.45); } .fa-dfield.err input{ box-shadow:0 0 0 2px #E5786E; } .fa-dfield .fa-err{ font-size:12px; color:#F0A99F; margin-top:7px; display:none; } .fa-dfield.err .fa-err{ display:block; } .fa-demo__note{ font-size:12.5px; color:rgba(255,255,255,.5); margin:16px 0 0; line-height:1.5; } .fa-demo__ok{ text-align:center; padding:20px 0; } .fa-demo__ok .fa-okico{ width:64px; height:64px; border-radius:50%; background:rgba(129,229,172,.16); color:var(--bright-green); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; } .fa-demo__ok h2{ margin:0 0 10px; } .fa-demo__ok p{ font-size:15px; color:rgba(255,255,255,.7); line-height:1.55; margin:0; } .btn--block{ width:100%; justify-content:center; padding:17px; font-size:16px; margin-top:6px; } @media(max-width:880px){ .fa-demo__card{ grid-template-columns:1fr; } .fa-demo__media{ min-height:360px; } } /* ============================================================ FAQ — compact centered card ============================================================ */ .fa-faq2__card{ max-width:1120px; margin:44px auto 0; border:1px solid var(--border); border-radius:18px; padding:6px 36px; background:#fff; text-align:left; box-shadow:0 10px 30px rgba(24,45,42,.07); } .fa-faq2__row{ border-top:1px solid var(--border-soft); } .fa-faq2__row:first-child{ border-top:none; } .fa-faq2__q{ display:flex; justify-content:space-between; align-items:center; gap:24px; width:100%; background:none; border:none; cursor:pointer; padding:25px 4px; text-align:left; font-family:var(--font-display); font-weight:500; font-size:19px; color:var(--dark-green); } .fa-faq2__q:hover{ color:var(--accent); } .fa-faq2__chev{ flex-shrink:0; color:var(--neutral-400); transition:transform .25s, color .2s; } .fa-faq2__row.is-open .fa-faq2__chev{ transform:rotate(180deg); color:var(--accent); } .fa-faq2__a{ font-size:15.5px; line-height:1.6; color:var(--neutral-500); padding:0 4px 26px; max-width:900px; } .fa-figure{ color:var(--bright-green); } .fa-root[data-accent="ai"] .fa-figure{ color:var(--ai-300); } .fa-figure__svg{ width:100%; height:100%; } /* dark rhythm flip for overview */ .fa-root[data-rhythm="dark"] .fa-overview{ background:var(--dark-green); } .fa-root[data-rhythm="dark"] .fa-overview .fa-h2, .fa-root[data-rhythm="dark"] .fa-overview .fa-lead{ color:#fff; } .fa-root[data-rhythm="dark"] .fa-overview .fa-lead{ color:rgba(255,255,255,.72); } .fa-root[data-rhythm="dark"] .fa-overview .fa-pill--light{ color:#fff; background:rgba(255,255,255,.1); } /* ============================================================ APPROACH — 3-step flow (Discover → Analyze → Enforce) ============================================================ */ .fa-approach{ background:#fff; } .fa-flow{ display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:22px; margin-top:60px; } .fa-flow__cellwrap{ display:flex; } .fa-flow__step{ position:relative; flex:1; background:#fff; border:1px solid var(--border); border-radius:20px; padding:34px 30px 32px; text-align:left; display:flex; flex-direction:column; transition:.2s; overflow:hidden; box-shadow:0 6px 18px rgba(24,45,42,.07); } .fa-flow__step::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); } .fa-flow__step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--accent-100); } .fa-flow__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; } .fa-flow__ico{ width:58px; height:58px; border-radius:15px; background:var(--accent-100); color:var(--accent-700); display:flex; align-items:center; justify-content:center; } /* Icon tiles: keep the square fixed, render the icon (SVG or transparent PNG) at a consistent size that fills the tile, centered. 26px = 60% larger than the old 16px. */ .fa-flow__ico > svg, .fa-flow__ico > img, .fa-card__ico > svg, .fa-card__ico > img{ width:26px; height:26px; flex:none; object-fit:contain; } .fa-flow__num{ font-family:var(--font-mono); font-weight:500; font-size:40px; line-height:1; color:transparent; -webkit-text-stroke:1.4px var(--neutral-300); } .fa-flow__step h3{ font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.2; color:var(--dark-green); margin:0 0 12px; } .fa-flow__step p{ font-size:15px; line-height:1.6; color:var(--neutral-500); margin:0; } .fa-flow__link{ display:none; } @media(max-width:880px){ .fa-flow{ grid-template-columns:1fr; gap:14px; } } /* ============================================================ HOW IT WORKS — outcome tabs + capability panels ============================================================ */ .fa-caps{ margin-top:52px; display:flex; flex-direction:column; gap:34px; text-align:left; } .fa-cap{ display:grid; grid-template-columns:1fr 1.08fr; gap:56px; align-items:center; } .fa-cap--flip .fa-cap__copy{ order:2; } .fa-cap--flip .fa-cap__media{ order:1; } .fa-cap__kicker{ display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .fa-cap__copy h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,2.6vw,36px); line-height:1.14; letter-spacing:-.5px; color:var(--dark-green); margin:0 0 14px; } .fa-cap__copy > p{ font-size:16px; line-height:1.6; color:var(--neutral-500); margin:0 0 24px; } .fa-cap__watch{ display:inline-flex; align-items:center; gap:11px; margin-top:6px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--dark-green); background:none; border:none; cursor:pointer; padding:0; transition:color .18s; } .fa-cap__watch:hover{ color:var(--accent); } .fa-cap__watchico{ width:38px; height:38px; border-radius:50%; background:var(--accent-100); color:var(--accent-700); display:flex; align-items:center; justify-content:center; } .fa-cap__watchico svg{ margin-left:2px; } .fa-cap__watchlen{ font-family:var(--font-mono); font-size:12px; color:var(--neutral-400); } .fa-cap__media{ position:relative; aspect-ratio:16/10.5; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-card); } .fa-cap__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; } /* Empty blade media slot — user drops an image in here later */ .fa-cap__media--ph{ display:flex; align-items:center; justify-content:center; background:#fff; cursor:default; } .fa-cap__ph{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; padding:24px; } .fa-cap__ph svg{ width:42px; height:42px; color:var(--accent); opacity:.85; } .fa-cap__ph em{ font-family:var(--font-display); font-style:normal; font-weight:500; font-size:15px; color:var(--neutral-600,#3f4a47); } .fa-cap__ph i{ font-family:var(--font-mono); font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--neutral-400); } @media(max-width:880px){ .fa-cap{ grid-template-columns:1fr; gap:26px; } .fa-cap--flip .fa-cap__copy{ order:1; } .fa-cap--flip .fa-cap__media{ order:2; } .fa-cap--flip .fa-cap__col{ order:2; } } /* video element inside the modal */ .fa-vmodal__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0a1614; border:none; } /* play button overlay on how-it-works figures */ .fa-figplay{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:none; background:rgba(13,30,27,.28); cursor:pointer; transition:background .2s; } .fa-figplay:hover{ background:rgba(13,30,27,.46); } .fa-figplay__btn{ width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; } .fa-figplay__btn svg{ margin-left:3px; } .fa-figplay:hover .fa-figplay__btn{ background:var(--fluo); border-color:var(--fluo); color:var(--medium-green); transform:scale(1.07); } .fa-root[data-accent="ai"] .fa-figplay:hover .fa-figplay__btn{ background:var(--ai-300); border-color:var(--ai-300); } .fa-figplay__lbl{ font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; } /* video modal */ .fa-vmodal{ position:fixed; inset:0; z-index:200; background:rgba(13,30,27,.74); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; text-align:left; } .fa-vmodal__box{ width:min(960px,100%); background:#0E1B19; border-radius:18px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.5); } .fa-vmodal__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; } .fa-vmodal__bar b{ font-family:var(--font-display); font-weight:500; color:#fff; font-size:16px; } .fa-vmodal__x{ border:none; background:rgba(255,255,255,.1); color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:14px; transition:.18s; } .fa-vmodal__x:hover{ background:rgba(255,255,255,.2); } .fa-vmodal__stage{ position:relative; aspect-ratio:16/9; background:radial-gradient(circle at 50% 38%, #184034, #0a1614 72%); display:flex; align-items:center; justify-content:center; } .fa-vmodal__play{ width:88px; height:88px; border-radius:50%; background:var(--fluo); color:var(--medium-green); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 40px rgba(0,0,0,.4); } .fa-root[data-accent="ai"] .fa-vmodal__play{ background:var(--ai-300); } .fa-vmodal__cap{ position:absolute; bottom:18px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); } /* ============================================================ RESOURCES — header row with arrows ============================================================ */ .fa-res__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; text-align:left; } .fa-res__head .fa-h2{ margin-top:10px; } .fa-res__arrows{ display:flex; gap:10px; flex-shrink:0; } .fa-res__arrows button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--dark-green); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s; } .fa-res__arrows button:hover{ border-color:var(--accent); color:var(--accent); } .fa-res__arrows button[disabled]{ opacity:.35; cursor:default; pointer-events:none; } @media(max-width:640px){ .fa-res__head{ flex-direction:column; align-items:flex-start; } } /* ============================================================ FOOTER — tagline + 3-column variant ============================================================ */ .cato-foot__tagline{ font-size:14px; line-height:1.55; color:var(--fg-on-dark-muted); margin:18px 0 0; max-width:260px; } .cato-foot__cols--3{ grid-template-columns:repeat(3,1fr); } @media(max-width:1000px){ .cato-foot__cols--3{ grid-template-columns:1fr 1fr; } } /* ============================================================ VANILLA OVERRIDES — static markup states that React used to render conditionally (now toggled with classes / [hidden]). ============================================================ */ /* generic hidden helper that beats class display rules */ [hidden]{ display:none !important; } /* FAQ answers live in the DOM; show only the open row's answer */ .fa-faq2__a{ display:none; } .fa-faq2__row.is-open .fa-faq2__a{ display:block; } /* Challenges: all four scenes + details are present, cross-faded by JS */ .fa-chal__scene{ opacity:0; transition:opacity .55s ease; } .fa-chal__scene.is-active{ opacity:1; } .fa-chal__detailitem{ display:none; } .fa-chal__detailitem.is-active{ display:block; } /* ============================================================ "HOW IT WORKS" MEDIA LIGHTBOX Click any blade image/video to open it full-size in a modal. ============================================================ */ .is-zoomable{ cursor:zoom-in; } .fa-cap__media:has(.is-zoomable)::after, .solA-block__media:has(.is-zoomable)::after{ content:""; position:absolute; top:12px; right:12px; width:34px; height:34px; z-index:2; border-radius:50%; background:rgba(13,30,27,.42) center / 17px 17px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E"); opacity:0; transform:scale(.85); transition:opacity .2s, transform .2s; pointer-events:none; } .fa-cap__media{ cursor:zoom-in; } .solA-block__media{ position:relative; cursor:zoom-in; overflow:hidden; } .fa-cap__media:hover::after, .solA-block__media:hover::after{ opacity:1; transform:scale(1); } .fa-cap__media:hover img, .solA-block__media:hover img{ transform:none; } .fa-cap__media img, .solA-block__media img{ transition:transform .4s ease; } .fa-lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:clamp(20px,5vw,72px); } .fa-lightbox__backdrop{ position:absolute; inset:0; background:rgba(13,30,27,.82); backdrop-filter:blur(6px); opacity:0; transition:opacity .2s ease; } .fa-lightbox.is-open .fa-lightbox__backdrop{ opacity:1; } .fa-lightbox__stage{ position:relative; z-index:2; max-width:1200px; width:100%; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.97); transition:opacity .22s ease, transform .22s ease; } .fa-lightbox.is-open .fa-lightbox__stage{ opacity:1; transform:scale(1); } .fa-lightbox__media{ max-width:100%; max-height:84vh; width:auto; height:auto; border-radius:14px; box-shadow:0 40px 110px rgba(0,0,0,.55); background:#0E1B19; display:block; } iframe.fa-lightbox__media, video.fa-lightbox__media{ width:min(1100px,100%); aspect-ratio:16/9; height:auto; } .fa-lightbox__close{ position:absolute; top:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s; } .fa-lightbox__close:hover{ background:var(--fluo); border-color:var(--fluo); color:var(--medium-green); } @media(max-width:880px){ .fa-cap__media:has(.is-zoomable)::after, .solA-block__media:has(.is-zoomable)::after{ display:none; } } /* --- Blade media gallery (4-panel, hero-style dots) --- */ .fa-cap__gallery{ background:#fff; } .fa-cap__gallery img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; padding:26px; box-sizing:border-box; opacity:0; pointer-events:none; transition:opacity .45s ease; } .fa-cap__gallery img.is-active{ opacity:1; pointer-events:auto; } .fa-cap__gallery:hover img.is-active{ transform:none; } .fa-cap__col{ display:flex; flex-direction:column; gap:18px; } .fa-cap--flip .fa-cap__col{ order:1; } .fa-cap__col .fa-cap__media{ order:0; } .fa-cap__col .fa-cap__dots{ order:1; } .fa-cap__dots{ display:flex; gap:9px; justify-content:center; } .fa-cap__dot{ width:8px; height:8px; border-radius:50%; background:rgba(24,45,42,.2); border:none; padding:0; cursor:pointer; transition:.25s; } .fa-cap__dot:hover{ background:rgba(24,45,42,.4); } .fa-cap__dot.is-active{ width:26px; border-radius:5px; background:var(--accent); } .fa-cap__gallery--fill img{ object-fit:cover; object-position:top left; padding:0; } /* --- Lightbox gallery (toggle between the same panels) --- */ .fa-lightbox__gallery{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; max-width:min(1180px,94vw); } .fa-lightbox__gallery img{ max-width:100%; max-height:78vh; object-fit:contain; display:none; background:#fff; border-radius:12px; } .fa-lightbox__gallery img.is-active{ display:block; } .fa-lightbox__dots{ position:absolute; left:50%; bottom:-36px; transform:translateX(-50%); display:flex; gap:10px; } .fa-lightbox__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.3); border:none; padding:0; cursor:pointer; transition:.25s; } .fa-lightbox__dot:hover{ background:rgba(255,255,255,.55); } .fa-lightbox__dot.is-active{ width:30px; border-radius:5px; background:var(--fluo); } /* ============================================================ EYEBROW PILLS — standardized: no dot, transparent fill, faint green border + green text on every accent/context ============================================================ */ .fa-pill__dot{ display:none; } /* base (dark contexts, e.g. promo "Video Demo") */ .fa-pill{ background:transparent; border:1px solid rgba(129,229,172,.42); color:var(--bright-green); } /* light contexts (white sections) — darker green border for contrast on white */ .fa-pill--light, .fa-root[data-accent="ai"] .fa-pill--light{ background:transparent; border:1px solid rgba(21,136,100,.40); color:var(--cato-green); } /* dark-rhythm overview */ .fa-root[data-rhythm="dark"] .fa-overview .fa-pill--light{ background:transparent; border:1px solid rgba(129,229,172,.42); color:var(--bright-green); } /* outline (Today's Challenges) — the reference treatment */ .fa-pill--outline, .fa-root[data-accent="ai"] .fa-pill--outline{ background:transparent; border:1px solid rgba(129,229,172,.42); color:var(--bright-green); } /* hero identity eyebrow — sits above the hero headline, identifies the page */ .fa-hero__eyebrow{ margin-top:0; margin-bottom:22px; } .solB-hero__copy .fa-pill{ margin-bottom:2px; } /* ============================================================ GLOBAL HEADER — live-site nav (rolled out across all pages) ============================================================ */ .fa-nav__inner{ max-width:1240px; padding:0 40px; grid-template-columns:auto 1fr auto; gap:32px; } .fa-nav__logo{ height:40px; } .gnav{ display:flex; align-items:center; gap:26px; justify-self:center; } .gnav__group{ position:relative; } .gnav__top{ display:inline-flex; align-items:center; gap:5px; height:var(--global-nav-h); font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--dark-green); cursor:pointer; text-decoration:none; white-space:nowrap; } .gnav__top svg{ width:15px; height:15px; color:var(--neutral-400); transition:transform .2s ease, color .2s ease; } .gnav__group:hover .gnav__top, .gnav__group:focus-within .gnav__top{ color:var(--cato-green); } .gnav__group:hover .gnav__top svg, .gnav__group:focus-within .gnav__top svg{ transform:rotate(180deg); color:var(--cato-green); } .gnav-mega{ position:fixed; left:0; right:0; top:var(--global-nav-h); background:#fff; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); box-shadow:0 26px 44px rgba(24,45,42,.10); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:49; } .gnav__group:hover .gnav-mega, .gnav__group:focus-within .gnav-mega{ opacity:1; visibility:visible; transform:translateY(0); } .gnav-mega__wrap{ max-width:1240px; margin:0 auto; padding:38px 40px 42px; } .gnav-mega__cols{ display:grid; gap:30px 36px; } .gnav-mega__cols--4{ grid-template-columns:repeat(4,1fr); } .gnav-mega__cols--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:720px; } .gnav-mega__cols--1{ grid-template-columns:1fr; max-width:300px; } .gnav-mega__col{ display:flex; flex-direction:column; gap:26px; } .gnav-grp__title{ margin:0 0 13px; padding-bottom:9px; border-bottom:1px solid var(--border-soft); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .gnav-colhead{ display:block; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border-soft); font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--dark-green); text-decoration:none; } a.gnav-colhead:hover{ color:var(--cato-green); } .gnav-grp__links{ display:flex; flex-direction:column; gap:10px; } .gnav-link{ font-family:var(--font-display); font-size:15px; font-weight:500; line-height:1.25; color:var(--dark-green); text-decoration:none; transition:color .15s ease; } .gnav-link:hover{ color:var(--cato-green); } @media (max-width:1000px){ .gnav{ display:none; } } /* ============================================================ GLOBAL FOOTER — full site map (live catonetworks.com footer) ============================================================ */ .site-foot{ position:relative; overflow:hidden; background:var(--dark-green); color:#fff; padding:76px 0 30px; } .site-foot__arcs{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .site-foot__inner{ position:relative; } .site-foot__top{ display:grid; grid-template-columns:236px 1fr; gap:56px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); } .site-foot__brand{ display:flex; flex-direction:column; gap:30px; } .site-foot__logo{ height:34px; width:auto; align-self:flex-start; filter:brightness(0) invert(1); } .site-foot__social-label{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 14px; } .site-foot__socials{ display:flex; gap:12px; } .site-foot__socials a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; color:#fff; transition:.18s ease; } .site-foot__socials a:hover{ background:var(--bright-green); border-color:var(--bright-green); color:var(--dark-green); } .site-foot__socials svg{ width:16px; height:16px; } .site-foot__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:30px 26px; } .site-foot__col h4{ font-family:var(--font-display); font-size:13.5px; font-weight:700; color:#fff; margin:0 0 14px; } .site-foot__col a{ display:block; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.64); text-decoration:none; margin-bottom:9px; transition:color .15s ease; } .site-foot__col a:hover{ color:var(--bright-green); } .site-foot__certs{ display:flex; flex-wrap:wrap; gap:10px; padding:26px 0; } .site-foot__certs span{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.05em; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:6px 12px; } .site-foot__bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); } .site-foot__copy{ font-size:13px; color:rgba(255,255,255,.55); } .site-foot__legal{ display:flex; flex-wrap:wrap; gap:6px 22px; list-style:none; margin:0; padding:0; } .site-foot__legal a{ font-size:13px; color:rgba(255,255,255,.64); text-decoration:none; transition:color .15s ease; } .site-foot__legal a:hover{ color:#fff; } @media (max-width:820px){ .site-foot__top{ grid-template-columns:1fr; gap:34px; } } /* ============================================================ CONSOLIDATED FROM PAGE INLINE STYLES (multi-page bundle contract) ============================================================ */ /* --- Hero rotating illustration (shared) --- */ #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:480px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #top .eu-hero__media .eu-hero__dots{ margin-top:24px; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:320px; } } /* --- "See it in action" video gallery + modal (shared component) --- */ /* "Watch how Cato does it" — video gallery. Centered title sits OUTSIDE/above the bordered card. */ .fa-watch__body{ margin-top:40px; } /* "See more demos" — lives at the bottom of the left menu; solid green pill, darkens on hover (like the CTA buttons) */ .fa-vid__more{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; width:100%; padding:15px 22px; border-radius:var(--radius-pill); background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px; cursor:pointer; text-decoration:none; box-shadow:var(--shadow-btn); transition:.18s ease; } .fa-vid__more:hover{ background:color-mix(in srgb, var(--accent) 86%, #000); transform:translateY(-1px); } .fa-vid__more svg{ width:16px; height:16px; } .fa-vid__card{ border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:0 12px 36px rgba(24,45,42,.07); padding:28px; text-align:left; } .fa-vid__grid{ display:grid; grid-template-columns:340px 1fr; gap:34px; align-items:start; } /* left menu — icon (asset type) + title */ .fa-vid__menu{ display:flex; flex-direction:column; } .fa-vid__item{ display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; background:none; border:none; border-left:3px solid transparent; cursor:pointer; padding:18px 16px 18px 19px; border-radius:0 10px 10px 0; transition:.18s; border-bottom:1px solid var(--border-soft); } .fa-vid__item:last-child{ border-bottom:none; } .fa-vid__item:hover{ background:var(--neutral-50); } .fa-vid__item.is-active{ background:var(--neutral-50); border-left-color:var(--accent); } .fa-vid__ico{ flex:none; width:26px; height:26px; color:var(--neutral-400); margin-top:1px; } .fa-vid__item.is-active .fa-vid__ico{ color:var(--accent); } .fa-vid__ttl{ font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.34; color:var(--neutral-500); } .fa-vid__item.is-active .fa-vid__ttl{ font-weight:700; color:var(--dark-green); } /* right stage — player on top (aligns to first menu item), description beneath */ .fa-vid__stage{ display:flex; flex-direction:column; } .fa-vid__player{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:linear-gradient(150deg, var(--accent-700), var(--dark-green)); background-size:cover; background-position:center; } .fa-vid__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .fa-vid__badge{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.16); padding:5px 10px; border-radius:5px; } .fa-vid__player{ position:relative; width:100%; padding-bottom:56.25%; background-size:cover; background-position:center; overflow:hidden; border-radius:12px; } .fa-vid__player::before{ content:""; position:absolute; inset:0; background:rgba(8,22,18,.4); z-index:1; } .fa-vid__playbtn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; width:auto; height:auto; } .fa-vid__playbtn:hover::before{ background:rgba(8,22,18,.4); } .fa-vid__playcircle{ position:relative; z-index:2; width:74px; height:74px; border-radius:50%; background:#38DAA8; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(0,0,0,.32); transition:.2s; } .fa-vid__playbtn:hover .fa-vid__playcircle{ transform:scale(1.06); } .fa-vid__playcircle svg{ width:52px; height:52px; color:#fff; margin-left:3px; } .fa-vid__desc{ margin-top:22px; } .fa-vid__desc p{ font-size:16px; line-height:1.6; color:var(--neutral-500); margin:0; } .fa-vid__needs{ display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:#B4612F; background:#FBEEE4; padding:5px 10px; border-radius:6px; } /* play opens a modal — video embed, or an interactive demo page in an iframe */ .fa-vidmodal{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,52px); } .fa-vidmodal[hidden]{ display:none; } .fa-vidmodal__backdrop{ position:absolute; inset:0; background:rgba(13,30,27,.82); backdrop-filter:blur(6px); opacity:0; transition:opacity .22s; } .fa-vidmodal.is-open .fa-vidmodal__backdrop{ opacity:1; } .fa-vidmodal__stage{ position:relative; z-index:2; width:min(1120px,100%); aspect-ratio:16/9; background:#0a221d; border-radius:16px; overflow:hidden; box-shadow:0 40px 110px rgba(0,0,0,.5); opacity:0; transform:scale(.97); transition:opacity .22s ease, transform .22s ease; } .fa-vidmodal.is-open .fa-vidmodal__stage{ opacity:1; transform:scale(1); } .fa-vidmodal__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .fa-vidmodal__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px; color:#fff; font-family:var(--font-display); font-size:19px; } .fa-vidmodal__ph span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.5); } .fa-vidmodal__close{ position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s; } .fa-vidmodal__close:hover{ background:var(--fluo); border-color:var(--fluo); color:var(--dark-green); } @media(max-width:820px){ .fa-vid__grid{ grid-template-columns:1fr; gap:10px; } .fa-vid__stage{ order:-1; margin-bottom:10px; } } /* --- Per-page section styles (scoped by [data-page]) --- */ [data-page="agentic-ai-security"]{ #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:480px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #top .eu-hero__media .eu-hero__dots{ margin-top:24px; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:320px; } } .fa-cap__media--diagram{ display:flex; align-items:center; justify-content:center; cursor:default; } .fa-cap__media--diagram svg{ position:relative; width:86%; height:auto; } .fa-cap__media--diagram:hover svg{ transform:none; } } [data-page="ai-security-for-end-users"]{ /* End Users hero — landmotion style: abstract illustration on green */ #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:480px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #top .eu-hero__media .eu-hero__dots{ margin-top:24px; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:320px; } } } [data-page="cato-browser-extension"]{ #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:460px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #top .eu-hero__media .eu-hero__dots{ margin-top:24px; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:320px; } } } [data-page="cato-neural-edge"]{ #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:460px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #top .eu-hero__media .eu-hero__dots{ margin-top:24px; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:320px; } } } [data-page="extended-detection-and-response-xdr"]{ #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:480px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; flex-direction:column; align-items:center; justify-content:center; } #top .eu-hero__media .eu-hero__dots{ margin-top:24px; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:320px; } } #resources .fa-res__grid{ grid-template-columns:repeat(5,1fr); } @media(max-width:1100px){ #resources .fa-res__grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:780px){ #resources .fa-res__grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ #resources .fa-res__grid{ grid-template-columns:1fr; } } } [data-page="managed-sase"]{ /* Page-scoped: hero on Cato forest green (matches the live site) — standard split: copy left, ring right */ #top .eu-hero__media{ display:flex; align-items:center; justify-content:center; } /* Service story blocks: show the transparent illustration SVGs nicely (contain, not cover) */ .sol .solA-block__media{ aspect-ratio:16/11; background:#fff; display:flex; align-items:center; justify-content:center; padding:30px; } .sol .solA-block__media img{ width:100%; height:100%; object-fit:contain; object-position:center; } .sol .solA-block__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:22px; } .sol .solA-block__links .solA-block__link{ margin-top:0; } /* News & Resources: horizontal carousel (standard component) */ .sol #resources .fa-res__head{ justify-content:space-between; text-align:left; } .sol #resources .fa-res__arrows{ display:flex; } #resources .fa-res__grid{ display:flex; grid-template-columns:none; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; margin-top:34px; padding:20px 6px 28px; } #resources .fa-res__grid::-webkit-scrollbar{ display:none; } #resources .fa-res__card{ flex:0 0 calc((100% - 66px) / 4); scroll-snap-align:start; } .fa-res__arrows button[disabled]{ opacity:.35; cursor:default; pointer-events:none; } @media(max-width:980px){ #resources .fa-res__card{ flex-basis:calc((100% - 22px) / 2); } } @media(max-width:560px){ #resources .fa-res__card{ flex-basis:85%; } } } [data-page="managed-services"]{ /* Page-scoped: hero on Cato forest green (matches the live site) — standard split: copy left, ring right */ #top .eu-hero__media{ display:flex; align-items:center; justify-content:center; } /* Service story blocks: show the transparent illustration SVGs nicely (contain, not cover) */ .sol .solA-block__media{ aspect-ratio:16/11; background:#fff; display:flex; align-items:center; justify-content:center; padding:30px; } .sol .solA-block__media img{ width:100%; height:100%; object-fit:contain; object-position:center; } .sol .solA-block__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:22px; } .sol .solA-block__links .solA-block__link{ margin-top:0; } /* News & Resources: horizontal carousel (standard component) */ .sol #resources .fa-res__head{ justify-content:space-between; text-align:left; } .sol #resources .fa-res__arrows{ display:flex; } #resources .fa-res__grid{ display:flex; grid-template-columns:none; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; margin-top:34px; padding:20px 6px 28px; } #resources .fa-res__grid::-webkit-scrollbar{ display:none; } #resources .fa-res__card{ flex:0 0 calc((100% - 66px) / 4); scroll-snap-align:start; } .fa-res__arrows button[disabled]{ opacity:.35; cursor:default; pointer-events:none; } @media(max-width:980px){ #resources .fa-res__card{ flex-basis:calc((100% - 22px) / 2); } } @media(max-width:560px){ #resources .fa-res__card{ flex-basis:85%; } } } [data-page="platform-architecture"]{ .fa-cap__media{ background:#fff; } .fa-cap__media img{ object-fit:contain; object-position:center; padding:30px; } .fa-cap__media--cover img{ object-fit:cover; object-position:center; padding:0; } .fa-cap__media--ph{ display:flex; align-items:center; justify-content:center; background:#fff; cursor:default; } .fa-cap__media--ph .fa-cap__phlbl{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-400); border:1.5px dashed #D1D1D1; border-radius:10px; padding:14px 22px; } } [data-page="solutions/ai-powered-autonomous-sase-platform"]{ .sol-out__links{ display:flex; flex-direction:column; gap:8px; margin-top:16px; } .sol-out__link{ display:inline-flex; align-items:flex-start; gap:8px; font-family:var(--font-display); font-weight:600; font-size:13.5px; line-height:1.35; color:var(--accent); text-decoration:none; transition:.16s; } .sol-out__link:hover{ color:var(--dark-green); } .sol-out__link svg{ flex:none; width:13px; height:13px; margin-top:2px; } /* hero: remove the green glow, keep it all white */ .eu-hero.fa-hero::before{ background:none; } } [data-page="solutions/ai-powered-security"]{ .sol-out__links{ display:flex; flex-direction:column; gap:8px; margin-top:16px; } .sol-out__link{ display:inline-flex; align-items:flex-start; gap:8px; font-family:var(--font-display); font-weight:600; font-size:13.5px; line-height:1.35; color:var(--accent); text-decoration:none; transition:.16s; } .sol-out__link:hover{ color:var(--dark-green); } .sol-out__link svg{ flex:none; width:13px; height:13px; margin-top:3px; } /* hero: remove the green glow, keep it all white */ .eu-hero.fa-hero::before{ background:none; } } [data-page="solutions/ai-security"]{ /* Page-scoped: AI Security hero on Cato forest green (matches the live site) */ /* Split layout: copy left, landmotion image right */ #top.eu-hero[data-media="right"] .eu-hero__inner{ grid-template-columns:1.5fr .9fr; } #top .eu-hero__title{ max-width:none; font-size:clamp(37px,4.1vw,59px); } #top .eu-hero__media .hero-art{ width:100%; height:auto; max-height:480px; display:block; margin:0 auto; position:relative; z-index:2; } #top .eu-hero__cta{ flex-wrap:nowrap; } #top .eu-hero__media{ display:flex; align-items:center; justify-content:center; } @media(max-width:880px){ #top .eu-hero__media{ min-height:auto; } #top .eu-hero__media .hero-art{ max-height:340px; } } /* One Platform — 6 tiles (rolled out): two rows of three, responsive collapse */ .solC-land__row{ grid-template-columns:repeat(3,1fr); } .solC-land__cell[data-p="xops"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="xops"] .solC-land__ico{ color:var(--ai-500); } @media(max-width:640px){ .solC-land__row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .solC-land__row{ grid-template-columns:1fr; } } } [data-page="solutions/cato-xops"]{ /* ===== Cato XOps — page-scoped ===== */ .xops-hero__viz{ width:100%; height:auto; display:block; } /* blade media placeholder */ .xops-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--neutral-400); text-align:center; padding:24px; background:repeating-linear-gradient(135deg, var(--neutral-50), var(--neutral-50) 16px, #fff 16px, #fff 32px); } .xops-ph svg{ width:46px; height:46px; color:var(--accent); opacity:.85; } .xops-ph b{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--dark-green); } .xops-ph span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-400); } /* outcomes table — SMB styling, no check marks */ .xops-tbl-sec{ background:#fff; } .xops-tbl{ margin-top:44px; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; text-align:left; } .xops-tbl__head, .xops-tbl__row{ display:grid; grid-template-columns:minmax(190px,0.5fr) 1fr; gap:0 28px; padding:24px 32px; } .xops-tbl__head{ padding:16px 32px; background:var(--dark-green); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); } .xops-tbl__row{ border-top:1px solid var(--border-soft); align-items:start; } .xops-tbl__theme{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--dark-green); display:flex; align-items:center; gap:12px; } .xops-tbl__theme svg{ width:22px; height:22px; color:var(--accent); flex:none; } .xops-tbl__pts{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .xops-tbl__pts li{ position:relative; padding-left:18px; font-size:15.5px; line-height:1.5; color:var(--neutral-500); } .xops-tbl__pts li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent); } @media(max-width:680px){ .xops-tbl__head{ display:none; } .xops-tbl__row{ grid-template-columns:1fr; gap:14px; padding:22px 22px; } } /* One Platform — 6 tiles (Option B): two rows of three, responsive collapse */ .solC-land__row{ grid-template-columns:repeat(3,1fr); } .solC-land__cell[data-p="xops"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="xops"] .solC-land__ico{ color:var(--ai-500); } .solC-land__cell.is-current[data-p="xops"] .solC-land__ico{ color:var(--bright-green); } .solC-land__cell.is-current span{ color:rgba(255,255,255,.72); } @media(max-width:640px){ .solC-land__row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .solC-land__row{ grid-template-columns:1fr; } } } [data-page="solutions/frontier-ai"]{ /* ============================================================ Frontier AI page — scoped components ============================================================ */ /* hero background treatment matches the AI Security solution page exactly: the shared default .fa-hero::before glow + the default right-side .eu-hero__glow green radial (both inherited from style.css — no overrides). */ .fa-hero .eu-hero__glow{ z-index:0; } /* ---- Archivo is the design-system typeface for this page ---- */ &{ --font-display:'Archivo', system-ui, sans-serif; --font-body:'Archivo', system-ui, sans-serif; --font-mono:'Archivo', system-ui, sans-serif; } /* ---- inline text link (Cato green, arrow nudges on hover) ---- */ .txt-link{ display:inline-flex; align-items:center; gap:7px; margin-top:22px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--cato-green); text-decoration:none; white-space:nowrap; } .txt-link svg{ flex:none; transition:transform .18s; } .txt-link:hover{ text-decoration:underline; } .txt-link:hover svg{ transform:translateX(3px); } .feat__copy .txt-link{ margin-top:24px; } /* ---- ARCHITECTURE / differentiator container (intro + media + 3 tiles) ---- */ .arch{ background:#fff; padding:104px 0; } .arch__head{ max-width:760px; } .arch__panel{ background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:0 26px 70px rgba(24,45,42,.12); padding:46px; margin-top:44px; } .arch__top{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; } .arch__intro p{ font-size:18px; line-height:1.62; color:var(--neutral-600,#3f4a47); margin:0; text-wrap:pretty; } .arch__intro p + p{ margin-top:18px; } .arch__media{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--dark-green); } .arch__media img{ width:100%; height:100%; object-fit:cover; display:block; } .arch__video{ cursor:pointer; } .arch__video::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(24,45,42,.15), rgba(24,45,42,.55)); transition:.2s; } .arch__video:hover::after{ background:linear-gradient(160deg, rgba(24,45,42,.10), rgba(24,45,42,.45)); } .arch__play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; } .arch__play span{ width:74px; height:74px; border-radius:50%; background:var(--fluo-green,#81E5AC); color:var(--dark-green); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .2s; } .arch__video:hover .arch__play span{ transform:scale(1.08); } .arch__play svg{ width:52px; height:52px; margin-left:4px; fill:white; } .arch__vlabel{ position:absolute; left:18px; bottom:16px; z-index:2; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; } .arch__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; padding-top:42px; border-top:1px solid var(--border-soft); } .arch__tile{ display:flex; flex-direction:column; } .arch__tile-ico{ width:48px; height:48px; border-radius:13px; background:var(--light-green); color:var(--cato-green); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .arch__tile-ico svg{ width:25px; height:25px; } .arch__tile h3{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.2px; color:var(--dark-green); margin:0 0 9px; } .arch__tile p{ font-size:14.5px; line-height:1.58; color:var(--neutral-500); margin:0; } @media(max-width:900px){ .arch__top{ grid-template-columns:1fr; gap:32px; } .arch__tiles{ grid-template-columns:1fr; gap:22px; } .arch__panel{ padding:30px; } } /* empty media slot — user drops an image/video in here later */ .arch__media--ph{ display:flex; align-items:center; justify-content:center; } .arch__ph{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:20px; } .arch__ph svg{ width:34px; height:34px; color:rgba(255,255,255,.8); } .arch__ph em{ font-style:normal; font-family:var(--font-display); font-weight:600; font-size:14px; color:rgba(255,255,255,.85); } .arch__ph i{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); } /* ---- FEATURE row (image left / copy right) ---- */ .feat{ background:#fff; padding:92px 0; } .feat__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .feat__media{ border-radius:18px; overflow:hidden; border:1px solid var(--border); background:var(--sase-100); } .feat__media img{ width:100%; display:block; } .feat__copy h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.2vw,44px); line-height:1.12; letter-spacing:-.6px; color:var(--dark-green); margin:0; text-wrap:balance; } .feat__copy p{ font-size:18px; line-height:1.62; color:var(--neutral-500); margin:20px 0 0; max-width:540px; text-wrap:pretty; } @media(max-width:900px){ .feat__grid{ grid-template-columns:1fr; gap:34px; } } /* ---- GROUPED FAQ (a category drawer holds several Q&A) ---- */ #faq .fa-faq2__q{ align-items:flex-start; } .faq-cat{ display:flex; align-items:baseline; gap:14px; } .faq-cat__n{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--cato-green); flex:none; } .faqg{ display:flex; flex-direction:column; } .faqg__item{ padding:20px 0; border-top:1px solid var(--border-soft); } .faqg__item:first-child{ border-top:none; padding-top:2px; } .faqg__q{ font-family:var(--font-display); font-weight:600; font-size:16.5px; line-height:1.35; color:var(--dark-green); margin:0 0 9px; } .faqg__a{ font-size:15px; line-height:1.62; color:var(--neutral-500); margin:0; max-width:880px; } .faqg__a em{ color:var(--neutral-600,#3f4a47); font-style:italic; } .faqg__a a, .faq-rel a{ color:var(--cato-green); text-decoration:none; font-weight:500; } .faqg__a a:hover, .faq-rel a:hover{ text-decoration:underline; } .faq-rel{ list-style:none; margin:0; padding:6px 0 2px; display:grid; gap:12px; } .faq-rel li{ font-size:15.5px; color:var(--neutral-500); } /* ---- video modal ---- */ .vid-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(12,24,21,.82); backdrop-filter:blur(4px); } .vid-modal[hidden]{ display:none; } .vid-modal__box{ width:min(940px,100%); background:#0F1C19; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 40px 100px rgba(0,0,0,.5); } .vid-modal__frame{ position:relative; aspect-ratio:16/9; background:var(--dark-green); } .vid-modal__frame img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.55; } .vid-modal__inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; padding:32px; } .vid-modal__inner h4{ font-family:var(--font-display); font-weight:400; font-size:26px; color:#fff; margin:0; max-width:560px; text-wrap:balance; } .vid-modal__x{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .vid-modal__x:hover{ background:rgba(255,255,255,.26); } /* left-aligned hero with ring artwork on the right (matches other pages) */ #top.fa-hero{ background:#0c2d22 url("https://www.catonetworks.com/wp-content/uploads/2026/07/frontier-hero-bg.jpg") center/cover no-repeat; } #top.fa-hero::before{ background:none; } #top .eu-hero__glow{ display:none; } #top .eu-hero__media{ display:flex; align-items:center; justify-content:center; } #top .eu-hero__media .hero-ring{ width:100%; height:auto; max-height:520px; object-fit:contain; display:block; position:relative; z-index:2; } @media(max-width:880px){ #top .eu-hero__media .hero-ring{ max-height:340px; } } /* center architecture / cve section heads */ .arch__head{ text-align:center; margin-left:auto; margin-right:auto; } .arch__head .sol-lead{ margin-left:auto; margin-right:auto; } .arch__head .sol-h2{ margin-top:14px; } /* ---- legal/source citation under a challenge tile ---- */ .sol-chal__cite{ display:inline-block; margin-top:11px; font-family:var(--font-body); font-style:italic; font-size:12.5px; line-height:1.4; color:var(--neutral-400,#8a938f); text-decoration:none; } .sol-chal__cite:hover{ color:var(--cato-green); text-decoration:underline; } /* ---- big bold stat in place of the challenge icon ---- */ .sol-chal__stat{ font-family:var(--font-display); font-weight:800; font-size:clamp(44px,4.6vw,60px); line-height:.95; letter-spacing:-2px; color:#E5786E; margin-bottom:16px; } .sol-chal--light .sol-chal__item h3{ margin-top:0; } /* ---- News & Resources: horizontal carousel (5 cards, 4 in view) ---- */ .sol #resources .fa-res__head{ justify-content:space-between; text-align:left; } .sol #resources .fa-res__arrows{ display:flex; } #resources .fa-res__grid{ display:flex; grid-template-columns:none; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; margin-top:34px; padding:20px 6px 28px; } #resources .fa-res__grid::-webkit-scrollbar{ display:none; } #resources .fa-res__card{ flex:0 0 calc((100% - 66px) / 4); scroll-snap-align:start; } .fa-res__arrows button[disabled]{ opacity:.35; cursor:default; pointer-events:none; } @media(max-width:980px){ #resources .fa-res__card{ flex-basis:calc((100% - 22px) / 2); } } @media(max-width:560px){ #resources .fa-res__card{ flex-basis:85%; } } /* Frontier AI challenges: stat-forward focus stage (the numbers ARE the content) */ #overview .fa-chal__intro{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.7); margin:18px 0 0; max-width:760px; } #overview .fa-chal__viz{ width:auto; aspect-ratio:auto; min-width:170px; display:flex; align-items:center; } #overview .fa-chal__scene{ position:absolute; inset:0; display:flex; align-items:center; } #overview .fa-chal__stat{ font-family:var(--font-display); font-weight:800; font-size:clamp(54px,6.6vw,90px); line-height:.9; letter-spacing:-2px; color:var(--ca); white-space:nowrap; } #overview .fa-chal__cite{ display:inline-block; margin-top:16px; font-style:italic; font-size:13px; line-height:1.4; color:rgba(255,255,255,.5); text-decoration:none; } #overview .fa-chal__cite:hover{ color:#fff; text-decoration:underline; } @media(max-width:880px){ #overview .fa-chal__viz{ min-width:0; } } /* Today's Challenges — static 3-stat card layout (white) */ #overview.fa-chalc{ background:#fff; } .fa-chalc__lead{ font-size:18px; line-height:1.6; color:var(--neutral-500); max-width:760px; margin:18px auto 0; } .fa-chalc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; text-align:left; } .fa-chalc__card{ border:1px solid var(--border); border-radius:18px; padding:34px 30px; background:#fff; box-shadow:0 6px 20px rgba(24,45,42,.06); display:flex; flex-direction:column; } .fa-chalc__stat{ font-family:var(--font-display); font-weight:700; font-size:62px; line-height:1; letter-spacing:-2px; color:#E2654E; margin-bottom:20px; } .fa-chalc__card h3{ font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--dark-green); margin:0 0 10px; } .fa-chalc__card p{ font-size:15.5px; line-height:1.55; color:var(--neutral-500); margin:0 0 16px; } .fa-chalc__cite{ margin-top:auto; font-style:italic; font-size:13px; color:var(--neutral-400); text-decoration:none; } .fa-chalc__cite:hover{ color:var(--cato-green); } @media(max-width:860px){ .fa-chalc__grid{ grid-template-columns:1fr; } } wistia-player[media-id='d7tiyszelc']:not(:defined){ background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/d7tiyszelc/swatch'); display:block; filter:blur(5px); } .vid-modal__frame wistia-player{ width:100%; height:100%; display:block; } } [data-page="solutions/next-gen-networking"]{ /* Page-scoped: put the hero on Cato forest green (matches the live site) */ /* One Platform — 6 tiles (rolled out): two rows of three, responsive collapse */ .solC-land__row{ grid-template-columns:repeat(3,1fr); } .solC-land__cell[data-p="xops"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="xops"] .solC-land__ico{ color:var(--ai-500); } @media(max-width:640px){ .solC-land__row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .solC-land__row{ grid-template-columns:1fr; } } } [data-page="solutions/sase-platform"]{ /* Page-scoped: put the hero on Cato forest green (matches the live site) */ /* One Platform — 6 tiles (rolled out): two rows of three, responsive collapse */ .solC-land__row{ grid-template-columns:repeat(3,1fr); } .solC-land__cell[data-p="xops"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="xops"] .solC-land__ico{ color:var(--ai-500); } @media(max-width:640px){ .solC-land__row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .solC-land__row{ grid-template-columns:1fr; } } } [data-page="solutions/smb"]{ /* Page-scoped: white SMB hero */ /* ===== SMB page-specific (source form-factors) ===== */ .smb-mid{ text-align:center; font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bright-green); margin-top:18px; } .smb-capmap{ position:relative; max-width:660px; margin:44px auto 0; } .smb-capmap img{ width:100%; display:block; } .smb-hot{ position:absolute; display:block; border-radius:16px; transition:box-shadow .15s, background .15s; } .smb-hot:hover{ background:rgba(21,136,100,.07); box-shadow:0 0 0 2px var(--accent); } .smb-caps__grid{ display:none; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; } .smb-cap{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:96px; padding:18px; border:1px solid var(--border); border-radius:14px; background:#fff; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--dark-green); transition:.18s; } .smb-cap:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--accent-300); color:var(--accent); } .smb-hiw__img{ width:100%; border-radius:18px; border:1px solid var(--border); background:#fff; display:block; margin-top:40px; box-shadow:var(--shadow-card); } .smb-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; } .smb-step__n{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .smb-step h3{ font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--dark-green); margin:8px 0 8px; letter-spacing:-.3px; } .smb-step p{ font-size:15px; line-height:1.55; color:var(--neutral-500); margin:0; } .smb-step ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .smb-step li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.4; color:var(--dark-green); } .smb-step li svg{ width:17px; height:17px; flex:none; color:var(--sase-500); margin-top:1px; } .smb-bsmb{ background:#fff; } .smb-table{ margin-top:44px; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; } .smb-table__head, .smb-table__row{ display:grid; grid-template-columns:46px minmax(150px,0.78fr) 1fr; align-items:center; gap:0 18px; padding:18px 30px; } .smb-table__head{ padding:15px 30px; background:var(--dark-green); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); } .smb-table__row{ border-top:1px solid var(--border-soft); transition:background .15s ease; } .smb-table__row:hover{ background:var(--sase-100); } .smb-table__ico{ display:flex; color:var(--sase-500); } .smb-table__ico svg{ width:20px; height:20px; } .smb-table__benefit{ font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--dark-green); } .smb-table__mean{ font-size:15.5px; color:var(--neutral-500); } @media(max-width:640px){ .smb-table__head{ display:none; } .smb-table__head,.smb-table__row{ grid-template-columns:28px 1fr; padding:16px 20px; } .smb-table__benefit,.smb-table__mean{ grid-column:2; } .smb-table__mean{ margin-top:2px; } } .smb-logos{ width:100%; max-width:760px; margin:36px auto 0; display:block; } .smb-rating{ font-size:20px; letter-spacing:2px; color:var(--bright-green); } @media(max-width:880px){ .smb-capmap{ display:none; } .smb-caps__grid{ display:grid; grid-template-columns:repeat(2,1fr); } .smb-steps{ grid-template-columns:1fr; } .smb-bsmb__grid{ grid-template-columns:1fr; } } /* ===== SMB How it works — stacked drawers + reactive image ===== */ .smb-hiw{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:44px; align-items:start; margin-top:44px; } .smb-hiw__drawers{ display:flex; flex-direction:column; gap:12px; } .smb-drawer{ border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; transition:border-color .18s, box-shadow .18s; } .smb-drawer.is-open{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .smb-drawer__hd{ width:100%; display:flex; align-items:center; gap:14px; padding:18px 20px; background:none; border:none; cursor:pointer; text-align:left; } .smb-drawer__n{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); flex:none; } .smb-drawer__t{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--dark-green); flex:1; letter-spacing:-.2px; } .smb-drawer__chev{ width:20px; height:20px; color:var(--neutral-400); transition:transform .25s, color .2s; flex:none; } .smb-drawer.is-open .smb-drawer__chev{ transform:rotate(180deg); color:var(--accent); } .smb-drawer__body{ max-height:0; overflow:hidden; transition:max-height .22s ease; } .smb-drawer:not(.is-open) .smb-drawer__body{ transition:none; } .smb-drawer.is-open .smb-drawer__body{ max-height:280px; } .smb-drawer__in{ padding:0 22px 22px 20px; } .smb-drawer__in p{ font-size:15px; line-height:1.55; color:var(--neutral-500); margin:0; } .smb-drawer__in ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .smb-drawer__in li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.4; color:var(--dark-green); } .smb-drawer__in li svg{ width:17px; height:17px; flex:none; color:var(--sase-500); margin-top:1px; } .smb-hiw__viz{ position:relative; } .smb-hiw__viz img{ width:100%; display:block; border-radius:16px; } @media(max-width:880px){ .smb-hiw{ grid-template-columns:1fr; gap:28px; } .smb-hiw__viz{ order:-1; } } /* ===== SMB contact — single title, 2-col form, what-happens-next ===== */ .smb-contact{ display:grid; grid-template-columns:1.55fr 1fr; gap:34px; margin-top:42px; align-items:start; } .smb-formwrap{ border:1px solid var(--border); border-radius:18px; background:#fff; padding:30px; } .smb-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; } .smb-form .fa-dfield{ margin:0; } .smb-form .smb-col-full{ grid-column:1 / -1; } .smb-form label{ display:block; font-size:13px; font-weight:600; color:var(--dark-green); margin-bottom:6px; } .fa-demo__panel .smb-form label{ color:var(--bright-green); } .fa-root[data-accent="ai"] .fa-demo__panel .smb-form label{ color:var(--ai-300); } .smb-form input, .smb-form select, .smb-form textarea{ width:100%; font-family:inherit; font-size:15px; color:var(--dark-green); padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:#fff; } .smb-form textarea{ min-height:92px; resize:vertical; } .smb-form .fa-err{ display:none; font-size:12px; color:#c0432e; margin-top:5px; } .smb-form .fa-dfield.err .fa-err{ display:block; } .smb-form .fa-dfield.err input, .smb-form .fa-dfield.err select{ border-color:#c0432e; } .smb-form__note{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--neutral-500); margin:2px 0 0; } .smb-next{ border:1px solid var(--border); border-radius:18px; padding:30px; background:var(--sase-100); } .smb-next h3{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--dark-green); margin:0 0 18px; } .smb-next__step{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--border-soft); } .smb-next__step:first-of-type{ border-top:none; padding-top:0; } .smb-next__n{ width:30px; height:30px; border-radius:50%; background:var(--dark-green); color:#fff; font-family:var(--font-mono); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; } .smb-next__ico{ width:30px; height:30px; border-radius:50%; background:var(--dark-green); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; } .smb-next__step p{ font-size:14.5px; line-height:1.5; color:var(--neutral-600); margin:3px 0 0; } @media(max-width:880px){ .smb-contact{ grid-template-columns:1fr; gap:24px; } .smb-form{ grid-template-columns:1fr; } } /* SMB hero: allow dark green background */ #top.eu-hero.fa-hero{ background:var(--dark-green); } } [data-page="solutions/universal-ztna"]{ /* Page-scoped: put the hero on Cato forest green (matches the live site) */ /* One Platform — 6 tiles (rolled out): two rows of three, responsive collapse */ .solC-land__row{ grid-template-columns:repeat(3,1fr); } .solC-land__cell[data-p="xops"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="xops"] .solC-land__ico{ color:var(--ai-500); } @media(max-width:640px){ .solC-land__row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .solC-land__row{ grid-template-columns:1fr; } } } [data-page="solutions/use-cases"]{ .fa-cap__more{ display:inline-flex; align-items:center; gap:7px; margin-top:4px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--accent); text-decoration:none; transition:.18s; } .fa-cap__more:hover{ gap:11px; color:var(--dark-green); } .fa-cap__more svg{ flex:none; } .uc-ov__lead{ max-width:760px; margin:18px auto 0; font-size:19px; line-height:1.6; color:var(--neutral-500); text-wrap:pretty; } .uc-ov__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; text-align:left; } .uc-ov__card{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 24px; cursor:pointer; font:inherit; text-align:left; transition:.18s ease; } .uc-ov__card:hover{ border-color:var(--accent); box-shadow:0 14px 36px rgba(24,45,42,.08); transform:translateY(-3px); } .uc-ov__n{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--accent); } .uc-ov__card h3{ font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.25; color:var(--dark-green); margin:0; } .uc-ov__card p{ font-size:14.5px; line-height:1.55; color:var(--neutral-500); margin:0; flex:1; } .uc-ov__go{ display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--accent); transition:.18s; } .uc-ov__card:hover .uc-ov__go{ gap:11px; } .uc-ov__go svg{ flex:none; width:14px; height:14px; } @media(max-width:980px){ .uc-ov__grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .uc-ov__grid{ grid-template-columns:1fr; } } /* use-case blade images are schematic SVGs (light art) — show them on white, fully contained */ .fa-cap__media{ background:#fff; border:1px solid var(--border); } .fa-cap__media img{ object-fit:contain; object-position:center; padding:22px; } /* expanded (lightbox) image on white, not the default dark backing */ .fa-lightbox__media{ background:#fff; padding:26px; box-sizing:border-box; } .uc-ben__lead{ max-width:820px; margin:18px auto 0; font-size:19px; line-height:1.6; color:var(--neutral-500); text-wrap:pretty; } .uc-ben__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:54px; text-align:left; } .uc-ben__card{ display:flex; flex-direction:column; align-items:flex-start; gap:13px; } .uc-ben__ico{ width:64px; height:64px; object-fit:contain; } .uc-ben__card h3{ font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.2; color:var(--dark-green); margin:0; } .uc-ben__card p{ font-size:15px; line-height:1.6; color:var(--neutral-500); margin:0; } @media(max-width:980px){ .uc-ben__grid{ grid-template-columns:repeat(2,1fr); gap:38px 28px; } } @media(max-width:560px){ .uc-ben__grid{ grid-template-columns:1fr; } } } [data-page="solutions/zero-trust-security-sse"]{ /* Page-scoped: put the hero on Cato forest green (matches the live site) */ /* One Platform — 6 tiles (rolled out): two rows of three, responsive collapse */ .solC-land__row{ grid-template-columns:repeat(3,1fr); } .solC-land__cell[data-p="xops"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="xops"] .solC-land__ico{ color:var(--ai-500); } @media(max-width:640px){ .solC-land__row{ grid-template-columns:repeat(2,1fr); } } @media(max-width:420px){ .solC-land__row{ grid-template-columns:1fr; } } } /* ============================================================ MERGED FROM legacy solution.css (solution-page components) ============================================================ */ /* ============================================================ Cato Networks — SOLUTION PAGE section system New layout vocabulary for outcome-led "landmotion" solution pages. Built ENTIRELY on the existing brand tokens (tokens.css is already concatenated into style.css). Scoped under .sol so it never collides with the platform-page (.fa-*) styles. ============================================================ */ .sol{ /* green accent for cross-page consistency with the platform pages */ --accent: var(--sase-500); --accent-700: var(--sase-700); --accent-300: var(--sase-300); --accent-100: var(--sase-100); font-family: var(--font-body); color: var(--fg); } .sol *{ box-sizing:border-box; } .sol .wrap{ max-width:1240px; margin:0 auto; padding:0 48px; } /* shared section primitives ------------------------------------------------ */ .sol-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); } .sol-eyebrow--on-dark{ color:var(--accent-300); } .sol-eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; } .sol-kicker{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-400); } .sol-h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(32px,3.4vw,48px); line-height:1.12; letter-spacing:-.5px; margin:16px 0 0; color:var(--dark-green); text-wrap:balance; } .sol-h2--on-dark{ color:#fff; } .sol-lead{ font-size:19px; line-height:1.55; color:var(--neutral-500); margin:18px 0 0; max-width:620px; text-wrap:pretty; } .sol-lead--on-dark{ color:var(--fg-on-dark-muted); } /* ========================================================================== DIRECTION A — "Refined Narrative" (by-the-book, dark hero + alternating story blocks + clean powered-by cards) ========================================================================== */ /* A · hero — dark green, centered, ring + glow motif */ .solA-hero{ position:relative; background:var(--dark-green); color:#fff; overflow:hidden; padding:118px 0 104px; text-align:center; } .solA-hero__glow{ position:absolute; left:50%; top:-30%; width:1100px; height:1100px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(circle, rgba(118,96,135,.55) 0%, rgba(118,96,135,0) 60%); } .solA-hero__rings{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.5; } .solA-hero__inner{ position:relative; z-index:2; max-width:880px; margin:0 auto; padding:0 32px; } .solA-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(44px,5.6vw,80px); line-height:1.04; letter-spacing:-1.5px; margin:22px 0 0; text-wrap:balance; } .solA-hero h1 em{ font-style:normal; color:var(--ai-300); } .solA-hero__sub{ font-size:21px; line-height:1.5; color:var(--fg-on-dark-muted); margin:24px auto 0; max-width:620px; } .solA-hero__cta{ display:flex; gap:14px; justify-content:center; margin-top:34px; } .solA-hero__pillars{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:980px; margin:72px auto 0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:16px; overflow:hidden; } .solA-pillar{ background:var(--dark-green); padding:26px 26px 28px; text-align:left; } .solA-pillar__ico{ color:var(--ai-300); } .solA-pillar b{ display:block; font-family:var(--font-display); font-size:18px; font-weight:500; margin:14px 0 7px; } .solA-pillar span{ font-size:14.5px; line-height:1.5; color:var(--fg-on-dark-muted); } /* A · narrative — alternating image / text story blocks */ .solA-narr{ padding:104px 0; background:#fff; } .solA-narr__head{ max-width:720px; } .solA-block{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:72px; } .solA-block:first-of-type{ margin-top:56px; } .solA-block--flip .solA-block__media{ order:2; } .solA-block__media{ aspect-ratio:4/3; border-radius:14px; background:#fff; border:1px solid var(--border); position:relative; overflow:hidden; } .solA-block__media img{ width:100%; height:100%; object-fit:cover; object-position:left top; } /* Landmotion pages: center the "How Cato solves it" blade images instead of anchoring top-left */ [data-page="solutions/sase-platform"] .solA-block__media img, [data-page="solutions/universal-ztna"] .solA-block__media img, [data-page="solutions/zero-trust-security-sse"] .solA-block__media img, [data-page="solutions/next-gen-networking"] .solA-block__media img, [data-page="solutions/ai-security"] .solA-block__media img{ object-position:center; } .solA-block__tag{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .solA-block h3{ font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1.15; letter-spacing:-.4px; color:var(--dark-green); margin:12px 0 0; } .solA-block p{ font-size:17px; line-height:1.6; color:var(--neutral-500); margin:14px 0 0; } .solA-block__link{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent); } .solA-block__link svg{ width:16px; height:16px; transition:.18s; } .solA-block__link:hover svg{ transform:translateX(4px); } /* A · powered-by — clean product cards */ .solA-pow{ padding:104px 0; background:var(--neutral-50); } .solA-pow__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; } .solA-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:28px; display:flex; flex-direction:column; min-height:230px; transition:.2s; cursor:pointer; } .solA-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--accent-300); } .solA-card__ico{ width:46px; height:46px; border-radius:11px; background:var(--accent-100); color:var(--accent-700); display:flex; align-items:center; justify-content:center; } .solA-card b{ font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--dark-green); margin:18px 0 8px; } .solA-card p{ font-size:14.5px; line-height:1.5; color:var(--neutral-500); margin:0; flex:1; } .solA-card__foot{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--accent); } .solA-card__foot svg{ width:15px; height:15px; } /* ========================================================================== DIRECTION B — "Editorial Sticky-Index" (split hero, long-form left rail, before/after, oversized numbers) ========================================================================== */ /* WHITE hero with a colorful, on-brand "rings + green glow + 5 landmotion marks" illustration (the signature Cato hero motif) on the right. */ .solB-hero{ position:relative; background:#fff; overflow:hidden; padding:88px 0 80px; border-bottom:1px solid var(--border-soft); } .solB-hero__grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; } .solB-hero .sol-eyebrow{ color:var(--accent); } .solB-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(40px,4.6vw,66px); line-height:1.05; letter-spacing:-1.2px; color:var(--dark-green); margin:20px 0 0; text-wrap:balance; } .solB-hero h1 em{ font-style:normal; color:var(--accent); } .solB-hero__sub{ font-size:20px; line-height:1.55; color:var(--neutral-500); margin:22px 0 0; max-width:480px; } .solB-hero__cta{ display:flex; gap:14px; margin-top:30px; } /* hero visual: real Cato AI Security sparkle (transparent PNG on white) */ .solB-viz{ position:relative; min-height:470px; } .solB-viz__img{ width:100%; height:100%; min-height:470px; object-fit:contain; display:block; } /* secondary hero CTA — darker, clearly visible border on white */ .solB-hero .btn--secondary{ border:1.5px solid var(--dark-green); } /* centered section headers (per request) */ .sol-chal__head, .solA-narr__head{ text-align:center; margin-left:auto; margin-right:auto; } .sol-chal__head .sol-lead, .solA-narr__head .sol-lead{ margin-left:auto; margin-right:auto; } .sol-head--center{ text-align:center; } .sol-head--center .sol-lead{ margin-left:auto; margin-right:auto; } .solB-narr{ padding:96px 0; background:#fff; } .solB-narr__grid{ display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start; } .solB-index{ position:sticky; top:40px; } .solB-index__title{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-400); margin-bottom:18px; } .solB-index a{ display:block; padding:11px 0 11px 18px; border-left:2px solid var(--border); color:var(--neutral-400); font-family:var(--font-display); font-size:15px; font-weight:500; transition:.18s; cursor:pointer; } .solB-index a.is-active,.solB-index a:hover{ color:var(--dark-green); border-color:var(--accent); } .solB-step{ padding:36px 0; border-bottom:1px solid var(--border-soft); } .solB-step:first-child{ padding-top:0; } .solB-step__n{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--accent); } .solB-step h3{ font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1.15; color:var(--dark-green); margin:10px 0 0; letter-spacing:-.3px; } .solB-step p{ font-size:17px; line-height:1.6; color:var(--neutral-500); margin:12px 0 0; max-width:560px; } .solB-step__link{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--accent); } .solB-step__link svg{ width:15px; height:15px; } /* B · before / after compare */ .solB-cmp{ padding:96px 0; background:var(--dark-green); color:#fff; } .solB-cmp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; } .solB-cmp__col{ border-radius:16px; padding:34px; } .solB-cmp__col--before{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); } .solB-cmp__col--after{ background:#fff; color:var(--dark-green); } .solB-cmp__lbl{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .solB-cmp__col--before .solB-cmp__lbl{ color:#FF8A7A; } .solB-cmp__col--after .solB-cmp__lbl{ color:var(--accent); } .solB-cmp__col h3{ font-family:var(--font-display); font-weight:400; font-size:24px; margin:12px 0 22px; letter-spacing:-.3px; } .solB-cmp__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .solB-cmp__list li{ display:flex; gap:12px; font-size:15.5px; line-height:1.45; } .solB-cmp__list li svg{ width:19px; height:19px; flex:none; margin-top:1px; } .solB-cmp__col--before li{ color:var(--fg-on-dark-muted); } /* B · oversized number outcomes */ .solB-out{ padding:96px 0; background:#fff; } .solB-out__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:40px; } .solB-stat__n{ font-family:var(--font-display); font-weight:400; font-size:72px; line-height:1; letter-spacing:-2px; color:var(--accent); } .solB-stat__t{ font-size:16px; line-height:1.5; color:var(--neutral-500); margin-top:12px; max-width:260px; } /* ========================================================================== DIRECTION C — "Immersive Systemic" (animated dark hero, horizontal journey timeline, bento outcomes, landmotion pillar selector) ========================================================================== */ .solC-hero{ position:relative; background:radial-gradient(120% 120% at 50% 0%, #1f3b35 0%, var(--dark-green) 55%); color:#fff; overflow:hidden; padding:130px 0 110px; } .solC-hero__rings{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:1400px; height:1400px; pointer-events:none; } .solC-hero__ring{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(129,229,172,.16); } @keyframes solCspin{ to{ transform:rotate(360deg); } } .solC-hero__orbit{ position:absolute; left:50%; top:42%; width:0; height:0; } .solC-mark{ position:absolute; width:50px; height:50px; border-radius:13px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--ai-300); backdrop-filter:blur(4px); } .solC-hero__inner{ position:relative; z-index:3; max-width:900px; } .solC-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(46px,6vw,86px); line-height:1.02; letter-spacing:-2px; margin:22px 0 0; text-wrap:balance; } .solC-hero h1 em{ font-style:normal; background:linear-gradient(100deg,var(--bright-green),var(--ai-300)); -webkit-background-clip:text; background-clip:text; color:transparent; } .solC-hero__sub{ font-size:21px; line-height:1.5; color:var(--fg-on-dark-muted); margin:24px 0 0; max-width:560px; } .solC-hero__cta{ display:flex; gap:14px; margin-top:34px; } /* C · journey timeline */ .solC-journey{ padding:104px 0; background:#fff; } .solC-journey__track{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; position:relative; } .solC-journey__track::before{ content:""; position:absolute; top:23px; left:6%; right:6%; height:2px; background:linear-gradient(90deg,var(--ai-300),var(--accent)); opacity:.4; } .solC-stepc{ position:relative; } .solC-stepc__node{ width:48px; height:48px; border-radius:50%; background:var(--dark-green); color:var(--ai-300); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:15px; position:relative; z-index:2; } .solC-stepc h3{ font-family:var(--font-display); font-weight:500; font-size:21px; color:var(--dark-green); margin:22px 0 0; letter-spacing:-.3px; } .solC-stepc p{ font-size:15px; line-height:1.55; color:var(--neutral-500); margin:10px 0 0; } .solC-stepc__link{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--accent); } .solC-stepc__link svg{ width:14px; height:14px; } /* C · bento outcomes */ .solC-bento{ padding:104px 0; background:var(--dark-green); color:#fff; } .solC-bento__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:16px; margin-top:48px; } .solC-tile{ border-radius:16px; padding:26px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; justify-content:space-between; } .solC-tile--wide{ grid-column:span 2; } .solC-tile--tall{ grid-row:span 2; } .solC-tile--accent{ background:linear-gradient(155deg,var(--ai-700),var(--ai-900)); border-color:transparent; } .solC-tile__n{ font-family:var(--font-display); font-weight:400; font-size:56px; line-height:1; letter-spacing:-1.5px; color:var(--bright-green); } .solC-tile__t{ font-size:15px; line-height:1.45; color:var(--fg-on-dark-muted); } .solC-tile__q{ font-family:var(--font-body); font-style:italic; font-size:21px; line-height:1.4; } .solC-tile__by{ font-size:13px; color:var(--fg-on-dark-muted); margin-top:14px; } /* C · landmotion pillar selector */ .solC-land{ padding:104px 0; background:#fff; } .solC-land__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:48px; } .solC-land__cell{ border:1px solid var(--border); border-radius:14px; padding:24px 20px; cursor:pointer; transition:.2s; min-height:188px; display:flex; flex-direction:column; } .solC-land__cell:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); } .solC-land__cell[data-p="ai"]:hover{ border-color:var(--ai-500); } .solC-land__cell[data-p="sase"]:hover{ border-color:var(--sase-500); } .solC-land__cell[data-p="zts"]:hover{ border-color:var(--zts-500); } .solC-land__cell[data-p="uztna"]:hover{ border-color:var(--uztna-500); } .solC-land__cell[data-p="net"]:hover{ border-color:var(--net-500); } .solC-land__cell.is-current{ background:var(--dark-green); border-color:transparent; } .solC-land__ico{ width:42px; height:42px; } .solC-land__cell[data-p="ai"] .solC-land__ico{ color:var(--ai-500); } .solC-land__cell[data-p="sase"] .solC-land__ico{ color:var(--sase-500); } .solC-land__cell[data-p="zts"] .solC-land__ico{ color:var(--zts-500); } .solC-land__cell[data-p="uztna"] .solC-land__ico{ color:var(--uztna-500); } .solC-land__cell[data-p="net"] .solC-land__ico{ color:var(--net-500); } .solC-land__cell.is-current .solC-land__ico{ color:var(--bright-green); } .solC-land__cell b{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--dark-green); margin:auto 0 5px; } .solC-land__cell.is-current b{ color:#fff; } .solC-land__cell span{ font-size:13px; line-height:1.4; color:var(--neutral-400); } .solC-land__cell .solC-land__cur{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bright-green); } /* ========================================================================== PRODUCTION — full-page composition helpers (the chosen hybrid) Hero=B · Narrative=A blocks · Outcomes=A cards · Compare=B · Powered=A · Landmotion=C. Reuses the platform .fa-* components for nav/subnav/ customers/promo/demo/resources/faq/modal/footer. ========================================================================== */ /* root: inherit platform accent system AND solution scope together */ .fa-root.sol{ background:#fff; } /* first section clears the fixed global nav */ .sol .solB-hero{ padding-top:calc(var(--global-nav-h) + 64px); } /* anchor targets land below sticky nav + subnav */ .sol section[id]{ scroll-margin-top:150px; } /* section rhythm tie-in to the platform density token */ .solA-narr,.solA-pow,.solB-cmp,.solB-out,.solC-journey,.solC-bento,.solC-land,.sol-chal,.sol-out{ padding:var(--sec-pad) 0; } /* CHALLENGE / status-quo — DARK theme (matches the platform challenge section) */ .sol-chal{ background: radial-gradient(72% 60% at 86% -4%, rgba(24,46,42,.65), transparent 60%), radial-gradient(64% 66% at 6% 104%, rgba(24,46,42,.5), transparent 62%), #2A3033; color:#fff; } .sol-chal__head{ max-width:720px; } .sol-chal .sol-eyebrow{ color:var(--bright-green); } .sol-chal .sol-h2{ color:#fff; } .sol-chal .sol-lead{ color:var(--fg-on-dark-muted); } .sol-chal__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; } .sol-chal__item{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:28px; } .sol-chal__ico{ width:44px; height:44px; border-radius:11px; background:rgba(255,255,255,.08); color:var(--bright-green); display:flex; align-items:center; justify-content:center; } /* Icon tiles: keep the square fixed, render the icon (SVG or transparent PNG) at a consistent 26px (60% larger than the old 16px), centered. */ .solA-card__ico > svg, .solA-card__ico > img, .sol-chal__ico > svg, .sol-chal__ico > img{ width:26px; height:26px; flex:none; object-fit:contain; } .sol-chal__item h3{ font-family:var(--font-display); font-weight:500; font-size:19px; color:#fff; margin:18px 0 8px; letter-spacing:-.2px; } .sol-chal__item p{ font-size:14.5px; line-height:1.55; color:var(--fg-on-dark-muted); margin:0; } /* CHALLENGE — LIGHT variant (white background). Solution pages that run the challenge section on white add `.sol-chal--light`. Eyebrow treatment matches the rest of the page: the "Today's Challenges" pill renders in Cato green (never bright-green-on-white), so eyebrows stay consistent across the page. */ .sol-chal--light{ background:#fff; color:var(--dark-green); } .sol-chal--light .sol-eyebrow, .sol-chal--light .fa-pill, .sol-chal--light .fa-pill--outline, .sol-chal--light .fa-pill--light{ color:var(--cato-green); background:transparent; border:1px solid rgba(21,136,100,.40); } .sol-chal--light .fa-pill__dot{ display:none; } .sol-chal--light .sol-h2{ color:var(--dark-green); } .sol-chal--light .sol-lead{ color:var(--neutral-500); } .sol-chal--light .sol-chal__item{ background:#fff; border:1px solid var(--border); box-shadow:0 10px 28px rgba(24,45,42,.06); display:flex; flex-direction:column; } .sol-chal--light .sol-chal__ico{ background:rgba(229,120,110,.14); color:#E5786E; } .sol-chal--light .sol-chal__item h3{ color:var(--dark-green); } .sol-chal--light .sol-chal__item p{ color:var(--neutral-500); } /* OUTCOMES / "Our approach" — clean stat / value cards (flexible count) */ .sol-out__head{ max-width:720px; margin-left:auto; margin-right:auto; text-align:center; } .sol-out__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; } .sol-out__card{ border:1px solid var(--border); border-radius:16px; padding:32px; background:var(--neutral-50); display:flex; flex-direction:column; } .sol-out__n{ font-family:var(--font-display); font-weight:400; font-size:56px; line-height:1; letter-spacing:-1.5px; color:var(--accent); } .sol-out__k{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); } .sol-out__t{ font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--dark-green); margin:16px 0 6px; } .sol-out__p{ font-size:14.5px; line-height:1.55; color:var(--neutral-500); margin:0; } /* make A's narrative section heading + powered heading left-aligned in page flow */ .sol .solA-narr .wrap > .sol-eyebrow,.sol .solA-pow .wrap > .sol-eyebrow{ display:inline-flex; } @media(max-width:980px){ .sol-chal__grid,.sol-out__grid{ grid-template-columns:1fr 1fr; } } @media(max-width:640px){ .sol-chal__grid,.sol-out__grid{ grid-template-columns:1fr; } } /* CUSTOMER quote — single real testimonial (no fabricated selector list) */ .sol-quote{ background:var(--dark-green); color:#fff; padding:var(--sec-pad) 0; } .sol-quote__card{ max-width:920px; margin:0 auto; text-align:center; } .sol-quote__mark{ font-family:var(--font-display); font-size:72px; line-height:.6; color:var(--bright-green); } .sol-quote blockquote{ font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.6vw,34px); line-height:1.32; letter-spacing:-.4px; margin:18px 0 0; text-wrap:balance; } .sol-quote__by{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; } .sol-quote__av{ width:48px; height:48px; border-radius:50%; background:linear-gradient(150deg,var(--sase-500),var(--dark-green)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:16px; } .sol-quote__meta{ text-align:left; } .sol-quote__meta b{ display:block; font-family:var(--font-display); font-weight:500; font-size:16px; } .sol-quote__meta span{ font-size:13.5px; color:var(--fg-on-dark-muted); } /* ============================================================ MARKETO FORM - Cato Networks brand overrides (SKILL Rule 16) Targets .mktoForm injected at runtime inside .fa-demo__panel / .afc-form-post (dark context). Selectors are mandatory; only visual values are brand-adapted. ============================================================ */ /* Reset Marketo's own layout injections */ .mktoForm, .mktoForm * { box-sizing: border-box; } .mktoForm { width: 100% !important; padding: 0 !important; font-family: var(--font-body) !important; } /* ---- Rows & columns ---- */ .mktoForm .mktoFormRow { display: block; width: 100% !important; margin-bottom: 0; } .mktoForm .mktoFieldDescriptor { width: 100% !important; margin-bottom: 20px !important; } .mktoForm .mktoFormCol { width: 100% !important; padding: 0 !important; } .mktoForm .mktoOffset, .mktoForm .mktoGutter, .mktoForm .mktoClear { display: none !important; width: 0 !important; } /* ---- Labels ---- */ .mktoForm .mktoLabel { display: block; width: 100% !important; font-family: var(--font-display) !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 9px !important; line-height: 1.3 !important; } .mktoForm .mktoAsterix { display: none !important; } /* ---- Text inputs & textarea ---- */ .mktoForm .mktoField, .mktoForm input[type="text"], .mktoForm input[type="email"], .mktoForm input[type="tel"], .mktoForm input[type="url"], .mktoForm select, .mktoForm textarea { width: 100% !important; border: none !important; border-radius: 11px !important; padding: 16px 18px !important; font-size: 15px !important; font-family: var(--font-body) !important; color: var(--dark-green) !important; background: #fff !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; transition: box-shadow 0.18s ease !important; } .mktoForm .mktoField::placeholder, .mktoForm input::placeholder, .mktoForm textarea::placeholder { color: var(--neutral-400) !important; } .mktoForm .mktoField:focus, .mktoForm input:focus, .mktoForm textarea:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(129, 229, 172, 0.45) !important; } /* Select arrow */ .mktoForm select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23404040' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; padding-right: 44px !important; cursor: pointer !important; } /* Textarea */ .mktoForm textarea { resize: vertical !important; min-height: 100px !important; } /* ---- Validation error state ---- */ .mktoForm .mktoField.mktoBad, .mktoForm input.mktoBad, .mktoForm textarea.mktoBad { box-shadow: 0 0 0 2px #E5786E !important; } .mktoForm .mktoError .mktoErrorMsg { font-size: 12px !important; color: #F0A99F !important; margin-top: 6px !important; background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; } /* ---- Submit button - override the embedded .mktoGlow styles ---- */ .mktoForm .mktoButtonWrap.mktoGlow .mktoButton, .mktoForm .mktoButtonRow .mktoButton { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.2 !important; color: var(--medium-green) !important; background: var(--fluo) !important; background-image: none !important; border: none !important; border-radius: var(--radius-pill) !important; padding: 17px 30px !important; cursor: pointer !important; box-shadow: var(--shadow-btn) !important; transition: background 0.18s ease, transform 0.18s ease !important; margin-top: 6px !important; } .mktoForm .mktoButtonWrap.mktoGlow .mktoButton:hover { background: #6CD79A !important; background-image: none !important; border: none !important; transform: translateY(-1px) !important; } .mktoForm .mktoButtonWrap.mktoGlow .mktoButton:focus { outline: none !important; border: none !important; box-shadow: 0 0 0 3px rgba(129, 229, 172, 0.5) !important; } .mktoForm .mktoButtonWrap.mktoGlow .mktoButton:active { background: var(--cato-green) !important; background-image: none !important; box-shadow: none !important; transform: translateY(0) !important; } /* ---- Button row wrapper ---- */ .mktoForm .mktoButtonRow { width: 100% !important; margin-top: 8px !important; } .mktoForm .mktoButtonWrap { margin: 0 !important; } /* ---- Privacy / instruction text ---- */ .mktoForm .mktoInstruction { font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; } /* ============================================================ CHECKBOXES - un-stretch and brand-style Must come AFTER the generic .mktoField rules above. ============================================================ */ /* Layout: checkbox + label side by side */ .mktoForm .mktoCheckboxList { display: flex !important; align-items: flex-start !important; gap: 12px !important; width: 100% !important; padding: 0 !important; } /* The input itself: undo the text-field styling */ .mktoForm .mktoCheckboxList input[type="checkbox"].mktoField, .mktoForm input[type="checkbox"] { flex: 0 0 auto !important; width: 20px !important; height: 20px !important; min-width: 20px !important; margin: 1px 0 0 !important; padding: 0 !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; border-radius: 5px !important; box-shadow: none !important; cursor: pointer !important; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease !important; } /* Checked state: fluo fill + dark-green tick */ .mktoForm input[type="checkbox"]:checked { background-color: var(--fluo) !important; border-color: var(--fluo) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.5 5.5L4.5 8.5L10.5 1.5' stroke='%23103828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; } /* Focus ring consistent with your text fields */ .mktoForm input[type="checkbox"]:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(129, 229, 172, 0.45) !important; } /* Error state on the checkbox */ .mktoForm input[type="checkbox"].mktoBad { border-color: #E5786E !important; box-shadow: 0 0 0 2px rgba(229, 120, 110, 0.4) !important; } /* The inline label next to the checkbox */ .mktoForm .mktoCheckboxList > label { flex: 1 1 auto !important; width: auto !important; margin: 0 !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.7) !important; cursor: pointer !important; } .mktoForm .mktoCheckboxList > label a { color: var(--fluo) !important; text-decoration: underline !important; } .mktoForm .mktoCheckboxList > label a:hover { color: #6CD79A !important; } /* Kill the empty .mktoLabel Marketo renders above checkbox rows (it only contains the hidden asterisk and adds phantom spacing) */ .mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoLabel { display: none !important; } /* Checked state: fluo fill + dark-green tick Specificity must beat the un-stretch rule (0,4,1), so mirror its .mktoCheckboxList + .mktoField chain and add :checked. */ .mktoForm .mktoCheckboxList input[type="checkbox"].mktoField:checked, .mktoForm input[type="checkbox"]:checked { background-color: var(--fluo) !important; border-color: var(--fluo) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.5 5.5L4.5 8.5L10.5 1.5' stroke='%23103828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 10px !important; } /* ---- Remove hero carousel dots entirely ---- */ .fa-hero__dots, .eu-hero__dots { display: none !important; } /* ---- SD-WAN: centered challenge stage (centering + viz now global) ---- */ [data-page="software-defined-wan-sd-wan"] .fa-chal__stage{ gap:60px; max-width:900px; margin-left:auto; margin-right:auto; } /* ========================================================================== Cato Ring Backgrounds — shared animation keyframes (global, once) The saved assets/img/ring-*.svg files lose their inner