/* ========================================================= Cloudboosta v4 · Design system White · Navy · Blue (brand) · Teal · Violet · Green · Amber Built with impeccable principles applied throughout: - Off-white not #FFF, off-black not #000 - Neutrals tinted toward brand hue (blue) - No `all` transitions; explicit properties - Custom ease-out curves - Type scale ≥1.25 ratio - 12px minimum text - WCAG AA contrast on every pair - No side-stripe borders, no gradient text, no hero-metric template ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@1&family=Outfit:wght@600;700&display=swap'); /* ========================================================= Theme tokens Dark is the default (matches :root); [data-theme="light"] overrides to the brochure white palette. Toggle persists via localStorage; initial value set inline in . ========================================================= */ :root, [data-theme="dark"] { /* Surfaces · deep navy palette, tinted neutrals */ --bg: #0A1426; --bg-2: #0F1D38; --bg-3: #152848; /* raised cards */ --bg-blue-pale: #0E1E3F; /* dark blue-tinted accent surface */ --bg-navy: #050C18; /* deepest, for emphasis sections */ --bg-navy-2: #08111F; /* Text · off-white, never pure #fff */ --text-1: #EEF1F7; --text-2: #BBC6DC; --text-3: #8C99B3; /* muted, AA on bg */ --text-mute: #6E7A95; /* Brand */ --blue: #1736FF; /* identity, per brochure */ --blue-hover: #4D67FF; --blue-text: #8AA3FF; /* lighter for AA on dark bg (4.8:1) */ --blue-soft: #3D5BFF; --blue-pale: #2A3A6A; /* Sparingly */ --amber: #F4B233; --amber-soft: #3D2E0A; /* Accent palette · teal / violet / green */ --teal: #00C4A0; --teal-text: #3DDDBC; --teal-soft: #002A22; --violet: #7B61FF; --violet-text: #A692FF; --violet-soft: #1A1244; --green: #22C55E; --green-text: #4ADE80; --green-soft: #0A2A16; /* Borders */ --border: rgba(255, 255, 255, 0.10); --border-2: rgba(255, 255, 255, 0.18); /* Brand chrome on white surfaces (logo/favicon inheriting) */ --logo-fg: #FFFFFF; --logo-bg: #1736FF; /* Section-level overrides */ --navy-section-text: #FFFFFF; --nav-bg: rgba(10, 20, 38, 0.85); } [data-theme="light"] { --bg: #FAFBFD; --bg-2: #F4F6FB; --bg-3: #FFFFFF; --bg-blue-pale: #EEF3FD; --bg-navy: #0A1A2F; --bg-navy-2: #0F2240; --text-1: #0A1A2F; --text-2: #3D4A60; --text-3: #5D6B80; /* darkened from #6B7689 — was 4.38:1, now ≥4.5:1 on light bg */ --text-mute: #8993A8; --blue: #1736FF; --blue-hover: #0E25CC; --blue-text: #1530E3; --blue-soft: #3D5BFF; --blue-pale: #DDE5FF; --amber: #F2A20A; --amber-soft: #FCEBC1; /* Accent palette · teal / violet / green */ --teal: #007A64; --teal-text: #006652; --teal-soft: #D0F5EE; --violet: #6B4FE0; --violet-text: #5A3FCC; --violet-soft: #EDE9FF; --green: #16A34A; --green-text: #15803D; --green-soft: #DCFCE7; --border: rgba(10, 26, 47, 0.10); --border-2: rgba(10, 26, 47, 0.18); --logo-fg: #FFFFFF; --logo-bg: #1736FF; --navy-section-text: #FFFFFF; --nav-bg: rgba(250, 251, 253, 0.85); } :root { /* Motion · Emil's curves */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Type */ --font-display: 'Outfit', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-serif: 'Instrument Serif', Georgia, serif; } /* Skip navigation — visible only on keyboard focus (WCAG 2.4.1) */ .skip-nav { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 12px 20px; background: var(--blue); color: #fff; border-radius: 0 0 6px 6px; font-size: 14px; font-weight: 500; text-decoration: none; transition: top 200ms var(--ease-out); } .skip-nav:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--text-2); background: var(--bg); -webkit-font-smoothing: antialiased; } body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px; } /* ========================================================= Typography · 1.25 scale, capped at 64px ========================================================= */ .h1, h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; color: var(--text-1); margin: 0; text-wrap: balance; } .h2, h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500; color: var(--text-1); margin: 0; text-wrap: balance; } .h3, h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; color: var(--text-1); margin: 0; } .serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; } p { margin: 0 0 1em; } .lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 62ch; } small, .micro { font-size: 13px; line-height: 1.4; color: var(--text-3); } /* Eyebrow / small-caps label */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--teal-text); text-transform: uppercase; } .eyebrow--dot::before { content: '·'; margin-right: 6px; color: var(--teal); } .eyebrow--navy { color: rgba(255,255,255,0.7); } a { color: var(--blue-text); text-decoration: none; transition: color 160ms var(--ease-out); } a:hover { color: var(--blue); } /* ========================================================= Layout ========================================================= */ .container { width: 100%; max-width: 1180px; padding: 0 24px; margin: 0 auto; } .section { padding: clamp(60px, 8vw, 110px) 0; } .section--alt { background: var(--bg-2); } .section--pale { background: var(--bg-blue-pale); } .section--navy { background: var(--bg-navy); color: rgba(255,255,255,0.85); } .section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; } .section--navy .lead { color: rgba(255,255,255,0.78); } .divider { height: 1px; background: var(--border); border: 0; } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; border-radius: 4px; border: 1px solid transparent; cursor: pointer; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 120ms var(--ease-out); } .btn:active { transform: scale(0.98); } .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .btn .arrow { font-family: var(--font-mono); transition: transform 220ms var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .btn--primary { background: var(--blue); color: #fff; position: relative; overflow: hidden; } .btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0s; pointer-events: none; } .btn--primary:hover { background: var(--blue-hover); color: #fff; } .btn--primary:hover::after { transform: translateX(200%); transition: transform 480ms var(--ease-out); } .btn--ghost { background: transparent; color: var(--text-1); border-color: var(--border-2); } .btn--ghost:hover { border-color: var(--text-1); background: transparent; color: var(--text-1); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .btn--ghost-light:hover { border-color: #fff; } .btn--lg { padding: 16px 26px; font-size: 16px; } /* ========================================================= Navigation ========================================================= */ .nav { position: sticky; top: 0; z-index: 50; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; transition: background-color 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; } .nav__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: var(--text-1); letter-spacing: -0.01em; } .nav__logo:hover { color: var(--text-1); } .nav__logo-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--blue); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 13px; } .nav__links { display: none; gap: 26px; align-items: center; } .nav__links a { position: relative; color: var(--text-2); font-size: 15px; transition: color 160ms var(--ease-out); } .nav__links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--blue-text); border-radius: 1px; transition: width 220ms var(--ease-out); } .nav__links a:hover { color: var(--text-1); } .nav__links a:hover::after { width: 100%; } .nav__links a.is-active { color: var(--text-1); font-weight: 500; } .nav__links a.is-active::after { width: 100%; } .nav__links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; } .nav__logo:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; } .theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } .nav__mobile-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .nav__cta { display: none; } .nav__mobile-toggle { background: none; border: 0; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; } .nav__mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--text-1); border-radius: 1px; } .nav__mobile { display: none; padding: 12px 0 20px; border-top: 1px solid var(--border); margin-top: 12px; } .nav__mobile.is-open { display: flex; flex-direction: column; gap: 4px; animation: navDrawerIn 240ms var(--ease-drawer); } @keyframes navDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nav__mobile a { display: block; padding: 12px 4px; color: var(--text-1); font-size: 16px; font-weight: 500; } @media (min-width: 880px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } .nav__mobile-toggle { display: none; } .nav__mobile, .nav__mobile.is-open { display: none; } } /* Scrolled state — frosted glass materialises as page scrolls */ .nav.is-scrolled { background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--border-2); box-shadow: 0 1px 16px rgba(10, 20, 38, 0.12); } /* ========================================================= Hero (variants per page) ========================================================= */ .hero { padding: clamp(70px, 9vw, 130px) 0 clamp(60px, 7vw, 100px); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 60% -10%, rgba(23, 54, 255, 0.10) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 10% 110%, rgba(23, 54, 255, 0.06) 0%, transparent 60%); pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; } [data-theme="light"] .hero::before { background: radial-gradient(ellipse 70% 60% at 60% -10%, rgba(23, 54, 255, 0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 10% 110%, rgba(23, 54, 255, 0.04) 0%, transparent 60%); } .hero__eyebrow { margin-bottom: 22px; } .hero__title { margin-bottom: 22px; } .hero__sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 60ch; margin-bottom: 32px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero__meta { margin-top: 28px; font-size: 13px; color: var(--text-3); } .hero--navy { background: var(--bg-navy); color: rgba(255,255,255,0.85); } .hero--navy .hero__title { color: #fff; } .hero--navy .hero__sub { color: rgba(255,255,255,0.78); } .hero--navy .hero__meta { color: rgba(255,255,255,0.6); } /* ========================================================= Common patterns ========================================================= */ .section-head { margin-bottom: clamp(40px, 5vw, 60px); } .section-head .eyebrow { margin-bottom: 14px; } .section-head h2 { max-width: 18ch; } .section-head__lead { margin-top: 18px; color: var(--text-2); } /* Two-way fork · asymmetric, not equal 50/50 (per impeccable: avoid card-grid monotony) */ .fork { display: grid; gap: 20px; } .fork__card { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .fork__card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(23, 54, 255, 0.14); } .fork__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 16px; } .fork__title { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; color: var(--text-1); margin-bottom: 14px; max-width: 18ch; } .fork__desc { color: var(--text-2); margin-bottom: 24px; } .fork__link { font-weight: 500; color: var(--blue-text); } /* Fork card accent identities */ .fork__card--business { border-top: 2px solid var(--teal); background: linear-gradient(180deg, var(--teal-soft) 0%, var(--bg-3) 60px); } .fork__card--individual { border-top: 2px solid var(--violet); background: linear-gradient(180deg, var(--violet-soft) 0%, var(--bg-3) 60px); } @media (min-width: 760px) { .fork { grid-template-columns: 1fr 1fr; } } /* Service rows (alternating, not equal cards) */ .svc-row { display: grid; gap: 28px; padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid var(--border); } .svc-row:last-child { border-bottom: 1px solid var(--border); } .svc-row__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--teal-text); } .svc-row__title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; color: var(--text-1); margin: 8px 0 14px; } .svc-row__body { color: var(--text-2); max-width: 56ch; } @media (min-width: 760px) { .svc-row { grid-template-columns: 220px 1fr; gap: 48px; align-items: start; } } /* Resource rows (webinar library, guides) */ .resource-row { padding: 22px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 8px; grid-template-columns: 1fr auto; align-items: center; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .resource-row:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10, 20, 38, 0.15); } /* Card grid (used selectively where 3-up is genuinely a parallel comparison) */ .cards-3 { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 760px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } } .card { position: relative; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 28px; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(500px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px), rgba(23, 54, 255, 0.28) 0%, transparent 60%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; padding: 1px; opacity: 0; transition: opacity 350ms var(--ease-out); pointer-events: none; } .card:hover::before { opacity: 1; } .card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 20, 38, 0.18); } .card__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet-text); margin-bottom: 14px; } /* Card accent variants */ .card--teal { border-left: 3px solid var(--teal); background: linear-gradient(90deg, var(--teal-soft) 0%, var(--bg-3) 40px); } .card--violet { border-left: 3px solid var(--violet); background: linear-gradient(90deg, var(--violet-soft) 0%, var(--bg-3) 40px); } .card--amber { border-left: 3px solid var(--amber); background: linear-gradient(90deg, var(--amber-soft) 0%, var(--bg-3) 40px); } /* Maturity progression — teal ramps up across 5 levels */ .card--mat-1 { border-left: 3px solid rgba(0, 196, 160, 0.25); } .card--mat-2 { border-left: 3px solid rgba(0, 196, 160, 0.45); } .card--mat-3 { border-left: 3px solid rgba(0, 196, 160, 0.65); } .card--mat-4 { border-left: 3px solid rgba(0, 196, 160, 0.85); } .card--mat-5 { border-left: 3px solid var(--teal); background: linear-gradient(90deg, var(--teal-soft) 0%, var(--bg-3) 40px); } .card__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; color: var(--text-1); margin-bottom: 10px; } .card__body { color: var(--text-2); font-size: 15px; } /* Numbered reasons (6) · varied size, not flat grid */ .reasons { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 700px) { .reasons { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .reasons { grid-template-columns: 1fr 1fr 1fr; } } .reason { padding: 22px 0; border-top: 1px solid var(--border); } .reason__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--violet-text); margin-bottom: 8px; display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--violet-soft); } .reason__title { font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--text-1); margin-bottom: 6px; } .reason__body { color: var(--text-2); font-size: 14.5px; } /* Numbers / stats · three only, inline rhythm, not template hero-metric */ .stats { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 680px) { .stats { grid-template-columns: repeat(3, 1fr); } } .stat { padding: 24px 0; border-top: 1px solid var(--border); } .stat__num { font-size: clamp(56px, 7vw, 80px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; color: var(--text-1); } .stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--teal-text); text-transform: uppercase; margin-top: 12px; } /* Cohort countdown / CTA panel */ .cohort { background: var(--bg-navy); color: #fff; border-radius: 10px; padding: clamp(36px, 5vw, 56px); } .cohort h2 { color: #fff; } .cohort .eyebrow { color: rgba(255,255,255,0.72); } .cohort__meta { margin-top: 18px; color: rgba(255,255,255,0.72); font-size: 14px; } .cohort__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* Quotes (NO side-stripe borders per impeccable) */ .quote { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 28px; position: relative; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .quote:hover { border-color: var(--border-2); border-left-color: var(--violet); border-left-width: 3px; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(123, 97, 255, 0.12); } .quote__open { position: absolute; top: 14px; left: 22px; font-family: var(--font-serif); font-style: italic; font-size: 56px; line-height: 1; color: var(--violet); opacity: 0.4; pointer-events: none; } .quote__text { font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.45; color: var(--text-1); padding-top: 8px; margin: 0 0 18px; } .quote__attr { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--teal-text); text-transform: uppercase; } .quotes-grid { columns: 1; gap: 20px; } @media (min-width: 760px) { .quotes-grid { columns: 2; } } @media (min-width: 1040px) { .quotes-grid { columns: 3; } } .quotes-grid .quote { break-inside: avoid; margin-bottom: 20px; } .quote--feature .quote__text { font-size: 22px; line-height: 1.4; } .quote--feature .quote__open { font-size: 72px; } /* Pricing */ .pricing { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 32px; } @media (min-width: 760px) { .pricing { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .pricing { grid-template-columns: repeat(4, 1fr); } } .price { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 24px 22px 28px; position: relative; } .price--feature { border-color: var(--blue); } .price--feature::after { content: 'MOST CHOSEN'; position: absolute; top: -10px; right: 16px; background: var(--blue); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 4px 8px; border-radius: 3px; } .price__amount { font-size: 32px; line-height: 1; letter-spacing: -0.02em; font-weight: 500; color: var(--text-1); } .price__unit { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--teal-text); text-transform: uppercase; margin-top: 12px; } .price__desc { color: var(--text-2); font-size: 14px; margin-top: 8px; } /* Pathway cards (4) · featured + non-featured differ visually */ .pathways { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; /* hide scrollbar but keep functionality */ scrollbar-width: none; } .pathways::-webkit-scrollbar { display: none; } .pathways > .pathway { flex: 0 0 85%; scroll-snap-align: start; } @media (min-width: 760px) { .pathways { display: grid; grid-template-columns: 1fr 1fr; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; } .pathways > .pathway { flex: unset; } } .pathway { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 28px; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .pathway:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 20, 38, 0.16); } .pathway--featured:hover { border-color: var(--blue); box-shadow: 0 10px 28px rgba(23, 54, 255, 0.12); } .pathway--capstone:hover { border-color: var(--amber); box-shadow: 0 10px 28px rgba(244, 178, 51, 0.12); } .pathway--featured { border-color: var(--blue); background: linear-gradient(180deg, var(--bg-blue-pale) 0%, var(--bg-3) 70%); } .pathway--capstone { border-color: var(--amber); } /* Pathway accent variants */ .pathway--devops { border-color: var(--teal); background: linear-gradient(180deg, var(--teal-soft) 0%, var(--bg-3) 70%); } .pathway--devops .pathway__tag { color: var(--teal-text); } .pathway--devops:hover { border-color: var(--teal); box-shadow: 0 10px 28px rgba(0, 196, 160, 0.12); } .pathway--platform { border-color: var(--violet); background: linear-gradient(180deg, var(--violet-soft) 0%, var(--bg-3) 70%); } .pathway--platform .pathway__tag { color: var(--violet-text); } .pathway--platform:hover { border-color: var(--violet); box-shadow: 0 10px 28px rgba(123, 97, 255, 0.12); } .pathway__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet-text); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .pathway__chip { background: var(--blue); color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 10px; letter-spacing: 0.1em; } .pathway--capstone .pathway__chip { background: var(--amber); color: var(--text-1); } .pathway__title { font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; color: var(--text-1); margin-bottom: 8px; } .pathway__voice { font-family: var(--font-serif); font-style: italic; color: var(--text-2); margin-bottom: 18px; } .pathway__list { list-style: none; padding: 0; margin: 0 0 18px; font-size: 14.5px; color: var(--text-2); } .pathway__list li { padding: 6px 0; display: flex; gap: 10px; } .pathway__list li::before { content: '✓'; color: var(--green); font-weight: 500; } .pathway__outcome { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal-text); padding: 12px 0 0; border-top: 1px solid var(--border); } .pathway__prereq { font-style: italic; font-family: var(--font-serif); font-size: 14px; color: var(--text-3); margin-top: 10px; } /* FAQ accordion */ .faq { border-top: 1px solid var(--border); } .faq__item { border-bottom: 1px solid var(--border); } .faq__btn { width: 100%; text-align: left; background: none; border: 0; padding: 22px 0; font: inherit; font-size: 17px; line-height: 1.35; color: var(--text-1); font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .faq__btn:hover { color: var(--blue-text); } .faq__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; } .faq__icon { font-family: var(--font-mono); font-size: 18px; color: var(--amber); transition: transform 220ms var(--ease-out); } .faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(45deg); } .faq__panel { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-out); } .faq__panel-inner { padding: 0 0 22px; color: var(--text-2); max-width: 70ch; } /* Forms */ .form { display: grid; gap: 18px; } .form__row { display: grid; gap: 6px; } .form__row label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .form__row input, .form__row select, .form__row textarea { font: inherit; font-family: var(--font-sans); font-size: 16px; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 4px; background: var(--bg-3); color: var(--text-1); transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); } .form__row input:focus, .form__row select:focus, .form__row textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 54, 255, 0.15); } .form__row textarea { min-height: 120px; resize: vertical; } .form__help { font-size: 13px; color: var(--text-3); margin-top: 4px; } /* Live total panel */ .total-panel { background: var(--bg-blue-pale); border: 1px solid var(--blue-pale); border-radius: 8px; padding: 20px; margin-top: 8px; } .total-panel__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); } .total-panel__value { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-1); line-height: 1; margin-top: 8px; } .total-panel__meta { font-size: 13px; color: var(--text-2); margin-top: 6px; } /* Pay schedule reveal */ .pay-options { display: grid; gap: 12px; margin-top: 16px; } .pay-option { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 16px 18px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; align-items: start; transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out); } .pay-option:hover { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 54, 255, 0.08); } .pay-option:has(input[type=radio]:checked) { border-color: var(--blue); background: var(--bg-blue-pale); box-shadow: 0 0 0 3px rgba(23, 54, 255, 0.12); } .pay-option input[type=radio] { margin-top: 4px; } .pay-option__title { font-weight: 500; color: var(--text-1); } .pay-option__sub { font-size: 13.5px; color: var(--text-3); margin-top: 2px; } /* Deadline bar (Enrol) · always dark, never inverts */ .deadline-bar { background: #050C18; color: #fff; padding: 10px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } .deadline-bar .accent { color: var(--amber); animation: deadline-pulse 2.8s ease-in-out infinite; } @keyframes deadline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Brochure strip */ .brochure-strip { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 24px 28px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .brochure-strip:hover { border-color: var(--border-2); box-shadow: 0 6px 20px rgba(10, 20, 38, 0.14); } .brochure-strip__title { font-size: 17px; font-weight: 500; color: var(--text-1); } .brochure-strip__desc { font-size: 14px; color: var(--text-3); margin-top: 4px; } /* Team */ .team { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 720px) { .team { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .team { grid-template-columns: 1fr 1fr 1fr; } } .team__member { padding: 22px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .team__member:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10, 20, 38, 0.16); } .team__member[data-tone="teal"]:hover { border-color: var(--teal); box-shadow: 0 10px 28px rgba(0, 196, 160, 0.10); } .team__member[data-tone="violet"]:hover { border-color: var(--violet); box-shadow: 0 10px 28px rgba(123, 97, 255, 0.10); } .team__member[data-tone="green"]:hover { border-color: var(--green); box-shadow: 0 10px 28px rgba(34, 197, 94, 0.10); } .team__member[data-tone="amber"]:hover { border-color: var(--amber); box-shadow: 0 10px 28px rgba(244, 178, 51, 0.10); } .team__name { font-size: 17px; font-weight: 500; color: var(--text-1); } .team__role { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); margin-top: 4px; } .team__bio { font-family: var(--font-serif); font-style: italic; color: var(--text-2); margin-top: 12px; font-size: 15px; } /* Footer */ .footer { padding: 60px 0 40px; background: var(--bg-navy); color: rgba(255,255,255,0.65); font-size: 14px; } .footer a { color: rgba(255,255,255,0.8); } .footer a:hover { color: #fff; } .footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 720px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer__brand { font-size: 17px; font-weight: 500; color: #fff; letter-spacing: -0.005em; } .footer__tag { color: rgba(255,255,255,0.6); margin-top: 6px; max-width: 32ch; } .footer__head { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 12px; } .footer__col ul { list-style: none; padding: 0; margin: 0; } .footer__col li { padding: 5px 0; } .footer__legal { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; color: rgba(255,255,255,0.5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; } /* ========================================================= Floating WhatsApp widget ========================================================= */ .wa-fab { position: fixed; bottom: 22px; right: 22px; z-index: 60; } .wa-fab__button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; background: #25D366; color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 500; border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(10, 26, 47, 0.18); transition: background-color 180ms var(--ease-out), transform 160ms var(--ease-out); } .wa-fab__button:hover { background: #1FB856; } .wa-fab__button:active { transform: scale(0.97); } .wa-fab__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .wa-fab__card { position: absolute; right: 0; bottom: 60px; width: 300px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 20px; box-shadow: 0 14px 40px rgba(10, 26, 47, 0.18); display: none; animation: waCardIn 220ms var(--ease-out); } .wa-fab__card.is-open { display: block; } @keyframes waCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .wa-fab__title { font-size: 15px; font-weight: 500; color: var(--text-1); margin-bottom: 8px; } .wa-fab__text { font-size: 14px; color: var(--text-2); line-height: 1.4; margin-bottom: 14px; } .wa-fab__note { font-size: 12.5px; color: var(--text-3); } .wa-fab__close { position: absolute; top: 10px; right: 12px; background: 0; border: 0; cursor: pointer; color: var(--text-3); font-size: 18px; line-height: 1; padding: 4px; } .wa-fab__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; } .wa-fab__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .wa-fab__open { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--blue); color: #fff; border: 0; border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; } .wa-fab__open:hover { background: var(--blue-hover); color: #fff; } @media (max-width: 480px) { .wa-fab { bottom: 16px; right: 16px; } .wa-fab__card { width: calc(100vw - 32px); right: 0; } } /* When GSAP is registered it adds .gsap-ready to . Reset .reveal to fully visible so GSAP's from() has a visible target to animate TO — without this, from({opacity:0}) animates 0→0 and elements stay permanently hidden. GSAP sets the initial hidden state via inline styles and clears them when the animation completes. */ .gsap-ready .reveal { opacity: 1; transform: none; transition: none; } /* ========================================================= Reveal · scroll-entrance animation Initial state is invisible; JS adds .is-visible via IntersectionObserver. Children with [data-reveal-delay] get staggered timing via inline style. Content is always accessible — opacity is a visual-only layer. ========================================================= */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } /* Stagger cascade for cards/reasons/pathways/quotes inside a reveal group */ .reveal.is-visible > .card, .reveal.is-visible > .reason, .reveal.is-visible > .pathway, .reveal.is-visible > .quote { animation: child-rise 480ms var(--ease-out) both; } .reveal.is-visible > .card:nth-child(2), .reveal.is-visible > .reason:nth-child(2), .reveal.is-visible > .pathway:nth-child(2), .reveal.is-visible > .quote:nth-child(2) { animation-delay: 80ms; } .reveal.is-visible > .card:nth-child(3), .reveal.is-visible > .reason:nth-child(3), .reveal.is-visible > .pathway:nth-child(3), .reveal.is-visible > .quote:nth-child(3) { animation-delay: 160ms; } .reveal.is-visible > .card:nth-child(4), .reveal.is-visible > .reason:nth-child(4), .reveal.is-visible > .pathway:nth-child(4), .reveal.is-visible > .quote:nth-child(4) { animation-delay: 240ms; } @keyframes child-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================= Quiz host ========================================================= */ #quiz-root { font-family: var(--font-sans); } #quiz-root .qx-host { background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; padding: 28px; } /* Cohort countdown panel rhythm */ .cohort__numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; } .cohort__cell { background: rgba(255,255,255,0.06); border-radius: 6px; padding: 16px 12px; text-align: center; } .cohort__cell-num { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; } .cohort__cell-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 6px; } /* ========================================================= Theme toggle button (nav) ========================================================= */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; background: transparent; border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer; color: var(--text-2); transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); } .theme-toggle:hover { color: var(--text-1); border-color: var(--text-3); } .theme-toggle { position: relative; } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* Crossfade between sun and moon with opacity (not display) */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 260ms var(--ease-out); } .theme-toggle .icon-sun { opacity: 1; } .theme-toggle .icon-moon { opacity: 0; } [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; } /* ========================================================= Section/component refinements that vary by theme ========================================================= */ /* In dark mode, section--alt should be subtly distinct from --bg */ [data-theme="dark"] .section--pale { background: #0E1E3F; } /* Cohort panel: in dark mode the base bg is already dark. Use a slightly tinted "feature" surface so it reads as elevated. */ [data-theme="dark"] .cohort { background: linear-gradient(180deg, #14264A 0%, #0C1A35 100%); border: 1px solid var(--border); } /* Navy hero/section: in dark mode, use deepest bg-navy for emphasis */ [data-theme="dark"] .section--navy, [data-theme="dark"] .hero--navy { background: var(--bg-navy); } /* Cards in dark mode: subtle lift via the raised --bg-3 + hairline border */ [data-theme="dark"] .card, [data-theme="dark"] .fork__card, [data-theme="dark"] .quote, [data-theme="dark"] .price, [data-theme="dark"] .pathway, [data-theme="dark"] .team__member, [data-theme="dark"] .brochure-strip, [data-theme="dark"] .pay-option { background: var(--bg-3); } [data-theme="dark"] .pay-option:has(input[type=radio]:checked) { background: var(--blue-pale); /* #2A3A6A — visibly blue-tinted in dark mode */ } /* Light mode: cards need a resting shadow — white on near-white needs lift */ [data-theme="light"] .card, [data-theme="light"] .quote, [data-theme="light"] .team__member, [data-theme="light"] .price, [data-theme="light"] .pathway { box-shadow: 0 1px 3px rgba(10, 20, 38, 0.07), 0 4px 14px rgba(10, 20, 38, 0.05); } /* Pathway featured gradient in dark */ [data-theme="dark"] .pathway--featured { background: linear-gradient(180deg, #1A2E55 0%, var(--bg-3) 70%); } /* Total panel in dark */ [data-theme="dark"] .total-panel { background: #112248; border-color: #28406E; } /* Form inputs in dark */ [data-theme="dark"] .form__row input, [data-theme="dark"] .form__row select, [data-theme="dark"] .form__row textarea { background: #0E1E3F; color: var(--text-1); } [data-theme="dark"] .form__row input::placeholder, [data-theme="dark"] .form__row textarea::placeholder { color: var(--text-mute); } /* WhatsApp card in dark: deeper surface */ [data-theme="dark"] .wa-fab__card { background: var(--bg-3); } /* Hero-level numeric tiles inside cards (homepage Cloud Optic block / services Cloud Optic) */ [data-theme="dark"] .optic-tile { background: #0E1E3F; border-color: var(--border); } /* SVG infographic theming hooks */ .infographic { color: var(--text-1); } .infographic .ig-bg { fill: var(--bg-3); } .infographic .ig-line { stroke: var(--blue); } .infographic .ig-area { fill: var(--blue); opacity: 0.12; } .infographic .ig-anom { fill: var(--amber); } .infographic .ig-grid { stroke: var(--border-2); } .infographic .ig-axis { fill: var(--text-3); } .infographic .ig-num { fill: var(--text-1); } .infographic .ig-num-up { fill: var(--blue-text); } .infographic .ig-label { fill: var(--text-3); } .infographic .ig-chip { fill: var(--bg-blue-pale); stroke: var(--border); } .infographic .ig-chip-blue { fill: var(--blue); } .infographic .ig-stroke-text { stroke: var(--text-3); } /* ========================================================= Avatars · branded placeholders for people & companies Used in testimonials and team blocks until real photos are provided. Initial in italic serif on a gradient circle. ========================================================= */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; flex-shrink: 0; user-select: none; position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(10, 26, 47, 0.18); } .avatar::after { /* Soft inner-light highlight */ content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 80% at 30% 25%, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%); pointer-events: none; } .avatar > span { position: relative; z-index: 1; line-height: 1; } .avatar--sm { width: 44px; height: 44px; font-size: 22px; } .avatar--md { width: 56px; height: 56px; font-size: 28px; } .avatar--lg { width: 72px; height: 72px; font-size: 36px; } .avatar--xl { width: 88px; height: 88px; font-size: 44px; } /* Tones · deterministic per person (assigned in markup) */ .avatar--t1 { background: linear-gradient(135deg, #2E4DFF 0%, #0A1A3F 100%); } .avatar--t2 { background: linear-gradient(135deg, #7B61FF 0%, #1A1244 100%); } .avatar--t3 { background: linear-gradient(135deg, #F4B233 0%, #B0750C 100%); color: #0A1A2F; } .avatar--t4 { background: linear-gradient(135deg, #00C4A0 0%, #002A22 100%); } .avatar--t5 { background: linear-gradient(135deg, #22C55E 0%, #0A2A16 100%); } .avatar--t6 { background: linear-gradient(135deg, #FFB14D 0%, #6B3D08 100%); color: #1A1206; } .avatar--t7 { background: linear-gradient(135deg, #6B82FF 0%, #14224A 100%); } /* Company-monogram variant (square rounded), used for partner feedback */ .avatar--co { border-radius: 8px; font-family: var(--font-sans); font-style: normal; font-weight: 600; letter-spacing: 0.02em; font-size: 22px; box-shadow: none; } .avatar--co::after { display: none; } .avatar--co.avatar--sm { font-size: 18px; } /* Quote footer (avatar + attribution side-by-side) */ .quote__footer { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .quote__footer .quote__attr { margin: 0; } /* Team member with avatar */ .team__member { display: flex; flex-direction: column; gap: 0; } .team__avatar { margin-bottom: 16px; } /* ========================================================= Photo avatars — real images replacing SVG placeholders ========================================================= */ .avatar--photo { padding: 0; background: var(--bg-3); } .avatar--photo::after { display: none; } .avatar--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; display: block; } .avatar--2xl { width: 120px; height: 120px; font-size: 60px; } /* ========================================================= Story photo strip — who-we-are.html ========================================================= */ .story-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 800px) { .story-split { grid-template-columns: 1fr; } } .story-photo { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; } .story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .story-photo::after { content: ''; position: absolute; inset: 0; border-radius: 8px; border: 1px solid var(--border); pointer-events: none; } /* ========================================================= "Who we are" teaser split (index.html) ========================================================= */ .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 860px) { .about-split { grid-template-columns: 1fr; } } .about-split__photo { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 480px; } .about-split__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .about-split__photo::after { content: ''; position: absolute; inset: 0; border-radius: 8px; border: 1px solid var(--border); pointer-events: none; } /* ========================================================= Feature grid — breaks the 3-equal-card AI pattern 1 large featured card + 2 smaller below ========================================================= */ .feat-grid { display: grid; gap: 12px; } .feat-grid__main { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 32px; } .feat-grid__main-img { width: 200px; height: 240px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .feat-grid__main-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .feat-grid__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 700px) { .feat-grid__main { grid-template-columns: 1fr; } .feat-grid__main-img { width: 100%; height: 180px; } .feat-grid__sub { grid-template-columns: 1fr; } } /* ========================================================= Cloud Optic asymmetric metrics (cloud-services.html) ========================================================= */ .optic-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 32px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; } .optic-metrics__hero { background: var(--bg-blue-pale); border: 1px solid var(--blue-pale); border-radius: 6px; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; } .optic-metrics__hero-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-text); } .optic-metrics__hero-num { font-size: clamp(40px, 6vw, 64px); font-weight: 500; letter-spacing: -0.035em; color: var(--text-1); line-height: 1; margin-top: 12px; } .optic-metrics__hero-sub { font-size: 13px; color: var(--text-3); font-family: var(--font-mono); margin-top: 8px; letter-spacing: 0.04em; } .optic-metrics__stack { display: flex; flex-direction: column; gap: 12px; } .optic-metrics__item { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 20px 24px; flex: 1; } .optic-metrics__item-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .optic-metrics__item-num { font-size: 28px; font-weight: 500; letter-spacing: -0.025em; color: var(--text-1); margin-top: 6px; } @media (max-width: 600px) { .optic-metrics { grid-template-columns: 1fr; } } /* ========================================================= Academy instructor photo strip ========================================================= */ .instructor-strip { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: 32px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px; } .instructor-strip__photo { width: 180px; height: 220px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .instructor-strip__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .instructor-strip__body { display: flex; flex-direction: column; gap: 16px; } .instructor-strip__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(16px, 2vw, 20px); line-height: 1.5; color: var(--text-1); } .instructor-strip__attr { display: flex; flex-direction: column; gap: 2px; } .instructor-strip__name { font-weight: 600; font-size: 15px; color: var(--text-1); } .instructor-strip__role { font-size: 13px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: .04em; } .instructor-strip__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .instructor-strip__facts li { font-size: 13px; color: var(--text-2); padding-left: 14px; position: relative; } .instructor-strip__facts li::before { content: "·"; position: absolute; left: 0; color: var(--violet-text); } @media (max-width: 640px) { .instructor-strip { grid-template-columns: 1fr; } .instructor-strip__photo { width: 100%; height: 200px; } } /* ========================================================= Hero split layout (index.html only) Text left · topology illustration right ========================================================= */ .hero__split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } @media (max-width: 960px) { .hero__split { grid-template-columns: 1fr; } .hero__visual { display: none; } } .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; opacity: 0; animation: hero-visual-in 900ms cubic-bezier(0.23, 1, 0.32, 1) 650ms forwards; } @keyframes hero-visual-in { to { opacity: 1; } } /* Hero text · staggered slide-up entrance */ .hero__eyebrow { animation: hero-text-in 680ms var(--ease-out) 60ms both; } .hero__title { animation: hero-text-in 680ms var(--ease-out) 180ms both; } .hero__sub { animation: hero-text-in 680ms var(--ease-out) 310ms both; } .hero__cta { animation: hero-text-in 680ms var(--ease-out) 430ms both; } .hero__meta { animation: hero-text-in 680ms var(--ease-out) 520ms both; } @keyframes hero-text-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero__visual { opacity: 1; animation: none; } .hero__eyebrow, .hero__title, .hero__sub, .hero__cta, .hero__meta { animation: none; } } /* ---- Cloud topology SVG ---- */ .hero-topology { width: 100%; max-width: 480px; height: auto; display: block; overflow: visible; } /* Connection lines — static background */ .ht-line { stroke: rgba(23, 54, 255, 0.18); stroke-width: 1px; } .ht-line--out { stroke: rgba(244, 178, 51, 0.16); stroke-width: 1px; } /* Connection lines — animated flowing dashes */ .ht-flow { stroke-dasharray: 6 16; stroke-dashoffset: 0; stroke-width: 1.5px; animation: ht-flow-anim 2s linear infinite; animation-delay: var(--fd, 0s); } .ht-flow--in { stroke: rgba(23, 54, 255, 0.50); } .ht-flow--out { stroke: rgba(244, 178, 51, 0.45); } @keyframes ht-flow-anim { to { stroke-dashoffset: -22; } } /* Hub */ .ht-hub-pulse { fill: rgba(23, 54, 255, 0.07); transform-box: fill-box; transform-origin: center; animation: ht-pulse 3.2s ease-in-out infinite; } @keyframes ht-pulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.22); opacity: 0.18; } } .ht-hub-ring { fill: rgba(23, 54, 255, 0.10); stroke: rgba(23, 54, 255, 0.32); stroke-width: 1px; } .ht-hub-fill { /* gradient applied inline */ } /* Provider nodes */ .ht-node-ring { fill: rgba(23, 54, 255, 0.07); stroke: rgba(23, 54, 255, 0.28); stroke-width: 1px; } .ht-node-fill { fill: rgba(23, 54, 255, 0.18); stroke: rgba(23, 54, 255, 0.55); stroke-width: 1px; } /* Service nodes */ .ht-svc-ring { fill: rgba(244, 178, 51, 0.07); stroke: rgba(244, 178, 51, 0.25); stroke-width: 1px; } .ht-svc-fill { fill: rgba(244, 178, 51, 0.16); stroke: rgba(244, 178, 51, 0.48); stroke-width: 1px; } /* Status dots */ .ht-status { fill: #22C55E; } .ht-status--amber { fill: var(--amber); } /* Typography */ .ht-hub-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; fill: #fff; text-anchor: middle; letter-spacing: 0.08em; text-transform: uppercase; } .ht-node-inner { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; font-weight: 500; fill: rgba(138, 163, 255, 0.90); text-anchor: middle; letter-spacing: 0.04em; text-transform: uppercase; } .ht-node-outer { font-family: 'IBM Plex Mono', monospace; font-size: 8px; fill: rgba(138, 163, 255, 0.50); text-anchor: middle; letter-spacing: 0.04em; text-transform: uppercase; } .ht-svc-inner { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; fill: rgba(244, 178, 51, 0.88); text-anchor: middle; } .ht-svc-outer { font-family: 'IBM Plex Mono', monospace; font-size: 8px; fill: rgba(244, 178, 51, 0.55); text-anchor: middle; letter-spacing: 0.04em; text-transform: uppercase; } .ht-metric { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 500; fill: rgba(138, 163, 255, 0.72); letter-spacing: 0.02em; } .ht-metric-sub { font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; fill: rgba(138, 163, 255, 0.38); text-transform: uppercase; letter-spacing: 0.04em; } .ht-live-dot { fill: #22C55E; animation: ht-blink 2s ease-in-out infinite; } .ht-live-label { font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; fill: rgba(34, 197, 94, 0.65); letter-spacing: 0.06em; text-transform: uppercase; } @keyframes ht-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Light theme overrides */ [data-theme="light"] .ht-node-inner { fill: rgba(14, 36, 204, 0.85); } [data-theme="light"] .ht-node-outer { fill: rgba(14, 36, 204, 0.45); } [data-theme="light"] .ht-node-ring { fill: rgba(23, 54, 255, 0.05); stroke: rgba(23, 54, 255, 0.22); } [data-theme="light"] .ht-node-fill { fill: rgba(23, 54, 255, 0.12); stroke: rgba(23, 54, 255, 0.40); } [data-theme="light"] .ht-hub-ring { fill: rgba(23, 54, 255, 0.08); stroke: rgba(23, 54, 255, 0.25); } [data-theme="light"] .ht-hub-pulse { fill: rgba(23, 54, 255, 0.05); } [data-theme="light"] .ht-hub-label { fill: #fff; } [data-theme="light"] .ht-metric { fill: rgba(14, 36, 204, 0.65); } [data-theme="light"] .ht-metric-sub { fill: rgba(14, 36, 204, 0.35); } [data-theme="light"] .ht-svc-ring { fill: rgba(244, 178, 51, 0.06); stroke: rgba(161, 98, 7, 0.25); } [data-theme="light"] .ht-svc-fill { fill: rgba(244, 178, 51, 0.14); stroke: rgba(161, 98, 7, 0.45); } [data-theme="light"] .ht-svc-inner { fill: rgba(120, 68, 0, 0.88); } [data-theme="light"] .ht-svc-outer { fill: rgba(120, 68, 0, 0.55); } [data-theme="light"] .ht-flow--out { stroke: rgba(161, 98, 7, 0.45); } [data-theme="light"] .ht-line--out { stroke: rgba(161, 98, 7, 0.16); } /* ============================================================ Academy terminal SVG (at-*) ============================================================ */ .at-bg { fill: #0D1B2E; } .at-bar { fill: #162338; } .at-dot-r { fill: #FF5F57; } .at-dot-y { fill: #FEBC2E; } .at-dot-g { fill: #27C93F; } .at-cursor { fill: #22C55E; animation: at-blink 1s step-end infinite; } @keyframes at-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } [data-theme="light"] .at-bg { fill: #1A2A42; } [data-theme="light"] .at-bar { fill: #1E324F; } /* ============================================================ Cloud Services pipeline SVG (cs-*) ============================================================ */ .cs-bg { fill: #080F1C; } .cs-header-bar { fill: #0F1828; } .cs-stage { fill: rgba(23, 54, 255, 0.07); stroke: rgba(23, 54, 255, 0.22); stroke-width: 1; } .cs-stage--done { fill: rgba(34, 197, 94, 0.08); stroke: rgba(34, 197, 94, 0.35); } .cs-stage--active { fill: rgba(244, 178, 51, 0.08); stroke: rgba(244, 178, 51, 0.38); } .cs-check { fill: none; stroke: #22C55E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cs-flow { stroke-dasharray: 5 9; animation: cs-flow-anim 1.6s linear infinite; } @keyframes cs-flow-anim { to { stroke-dashoffset: -14; } } .cs-status-g { fill: #22C55E; } .cs-status-a { fill: #F4B233; animation: cs-amber-pulse 1.4s ease-in-out infinite; } .cs-status-d { fill: rgba(255, 255, 255, 0.15); } @keyframes cs-amber-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.30; } } [data-theme="light"] .cs-bg { fill: #1A2840; } [data-theme="light"] .cs-header-bar { fill: #203252; } /* ============================================================ Pathway & card decorative icons ============================================================ */ .pathway__icon { display: block; width: 36px; height: 36px; margin-bottom: 14px; } .card__icon { display: block; width: 48px; height: 48px; margin-bottom: 18px; } /* ============================================================ Nav logo — dual image, theme-aware ============================================================ */ .nav__logo--light { display: none; } .nav__logo--dark { display: block; } [data-theme="light"] .nav__logo--dark { display: none; } [data-theme="light"] .nav__logo--light { display: block; }