/* ========================================================================== Avigdor CyberTech — homepage design system v2 File: assets/css/av-home.css Scoped to [data-avhome] (on ) and #avHome (main wrapper). It is loaded only by the homepage, so it cannot reach the other 128 pages that share assets/css/main.css. Cascade notes learned the hard way on v1 — do not remove these: - main.css sets "body.theme-gray { background-color: ... }" at the same specificity as "[data-avhome] body", so the body rule is written as html[data-avhome] body.theme-gray to win outright. - the theme styles every
with a pale panel + red rule; it must be neutralised explicitly inside testimonial cards. - never use "filter: brightness(0) invert(1)" on the logo or the stat icons — their PNGs have opaque backgrounds and turn into white blocks. The site already ships assets/img/logo-light.png for dark surfaces. - a card's

rule must not also catch the kicker

, or the kicker inherits flex:1 and stretches. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ [data-avhome] { --av-bg: #FFFFFF; --av-bg-alt: #F7F9FB; --av-surface: #FFFFFF; --av-surface-2: #F2F5F8; --av-surface-3: #E9EEF3; --av-text: #0B1220; --av-text-2: #47566B; --av-text-3: #5A697E; --av-line: #E4E9EF; --av-line-2: #CFD8E3; --av-accent: #15803D; /* 5.01:1 on white — safe for text and fills */ --av-accent-hover: #166534; --av-accent-bright: #16A34A; /* large display type only */ --av-accent-tint: rgba(21,128,61,.07); --av-accent-tint-2: rgba(21,128,61,.13); --av-accent-line: rgba(21,128,61,.28); --av-grid: rgba(21,128,61,.05); --av-glow: rgba(21,128,61,.08); --av-term-bg: #0B0F14; --av-term-panel: #10161D; --av-term-panel-2: #0E141A; --av-term-line: #1E2A33; --av-term-text: #93A4B3; --av-term-green: #22C55E; --av-term-green-2: #4ADE80; --av-term-dim: #5C6B7A; --av-ok: #15803D; --av-warn: #B45309; --av-danger: #DC2626; --av-shadow-sm: 0 1px 2px rgba(11,18,32,.04), 0 1px 3px rgba(11,18,32,.05); --av-shadow: 0 2px 4px rgba(11,18,32,.04), 0 12px 28px rgba(11,18,32,.07); --av-shadow-lg: 0 28px 64px rgba(11,18,32,.16); --av-r: 16px; --av-r-lg: 22px; --av-r-sm: 10px; --av-btn-r: 10px; --av-maxw: 1240px; --av-pad: 100px; --av-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace; color-scheme: light; } [data-avhome][data-theme="dark"] { --av-bg: #070B10; --av-bg-alt: #0A0F15; --av-surface: #0E141B; --av-surface-2: #141C25; --av-surface-3: #1B242E; --av-text: #E6EDF3; --av-text-2: #93A4B3; --av-text-3: #7F8FA0; --av-line: #1B242E; --av-line-2: #27333F; --av-accent: #34D399; --av-accent-hover: #6EE7B7; --av-accent-bright: #4ADE80; --av-accent-tint: rgba(52,211,153,.10); --av-accent-tint-2: rgba(52,211,153,.17); --av-accent-line: rgba(52,211,153,.30); --av-grid: rgba(52,211,153,.05); --av-glow: rgba(52,211,153,.09); --av-term-bg: #05080C; --av-term-panel: #0B1117; --av-term-panel-2: #090E13; --av-term-line: #1B2630; --av-ok: #34D399; --av-warn: #FBBF24; --av-danger: #F87171; --av-shadow-sm: inset 0 1px 0 rgba(255,255,255,.04); --av-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04); --av-shadow-lg: 0 30px 70px rgba(0,0,0,.65); color-scheme: dark; } @media (max-width: 1199px) { [data-avhome] { --av-pad: 76px; } } @media (max-width: 991px) { [data-avhome] { --av-pad: 60px; } } @media (max-width: 575px) { [data-avhome] { --av-pad: 48px; } } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ html[data-avhome] body, html[data-avhome] body.theme-gray, html[data-avhome] body.theme-gray-two { background-color: var(--av-bg); color: var(--av-text); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } [data-avhome] ::selection { background: var(--av-accent-tint-2); color: var(--av-text); } #avHome { background: var(--av-bg); color: var(--av-text); line-height: 1.62; overflow-x: clip; } #avHome *, #avHome *::before, #avHome *::after { box-sizing: border-box; } #avHome img, #avHome svg { max-width: 100%; } #avHome img { height: auto; } #avHome a { color: var(--av-accent); text-decoration: none; } #avHome p { margin: 0 0 1em; } #avHome p:last-child { margin-bottom: 0; } #avHome ul { list-style: none; margin: 0; padding: 0; } #avHome figure { margin: 0; } #avHome :focus-visible, [data-avhome] .av-theme-toggle:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 3px; border-radius: 6px; } [data-avhome] .av-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--av-accent); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--av-r-sm) 0; font-weight: 700; } [data-avhome] .av-skip:focus { left: 0; } /* -------------------------------------------------------------------------- 3. LAYOUT -------------------------------------------------------------------------- */ #avHome .av-wrap { max-width: var(--av-maxw); margin: 0 auto; padding: 0 28px; } #avHome .av-narrow { max-width: 860px; margin-left: auto; margin-right: auto; } #avHome .av-sec { padding: var(--av-pad) 0; position: relative; } #avHome .av-sec--alt { background: var(--av-bg-alt); border-top: 1px solid var(--av-line); border-bottom: 1px solid var(--av-line); } #avHome .av-grid-bg { position: relative; background-image: linear-gradient(var(--av-grid) 1px, transparent 1px), linear-gradient(90deg, var(--av-grid) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; } #avHome .av-grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 78% 0%, var(--av-glow), transparent 60%); } #avHome .av-grid-bg > * { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY -------------------------------------------------------------------------- */ #avHome .av-eyebrow { display: block; font-family: var(--av-mono); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--av-accent); margin: 0 0 14px; } #avHome .av-eyebrow::before { content: "> "; } /* numbered section label — "04 GLOBAL CERTIFICATIONS" */ #avHome .av-secnum { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; } #avHome .av-secnum b { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--av-text); color: var(--av-bg); font-family: var(--av-mono); font-size: .82rem; font-weight: 700; } #avHome .av-secnum span { font-family: var(--av-mono); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--av-text); } #avHome h1, #avHome h2, #avHome h3, #avHome h4 { color: var(--av-text); line-height: 1.12; font-weight: 800; margin: 0 0 16px; } #avHome .av-h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); letter-spacing: -.035em; line-height: 1.06; } #avHome .av-h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); letter-spacing: -.028em; line-height: 1.14; } #avHome .av-h3 { font-size: clamp(1.02rem, 1.4vw, 1.15rem); letter-spacing: -.008em; line-height: 1.32; margin-bottom: 10px; } #avHome .av-hl { color: var(--av-accent-bright); } #avHome .av-lede { color: var(--av-text-2); font-size: 1.05rem; max-width: 62ch; } #avHome .av-sub { color: var(--av-text-2); font-size: 1.02rem; max-width: 660px; } #avHome .av-head { margin-bottom: 52px; } #avHome .av-head--c { text-align: center; } #avHome .av-head--c .av-sub, #avHome .av-head--c .av-eyebrow { margin-left: auto; margin-right: auto; } #avHome .av-head--c .av-secnum { justify-content: center; } /* -------------------------------------------------------------------------- 5. BUTTONS -------------------------------------------------------------------------- */ #avHome .av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: var(--av-btn-r); font-size: 1rem; font-weight: 700; line-height: 1.2; border: 1px solid transparent; cursor: pointer; text-align: center; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } #avHome .av-btn svg { width: 18px; height: 18px; flex: none; } #avHome .av-btn--primary { background: var(--av-accent); color: #fff; } #avHome .av-btn--primary:hover { background: var(--av-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21,128,61,.28); } [data-theme="dark"] #avHome .av-btn--primary { color: #04140B; } [data-theme="dark"] #avHome .av-btn--primary:hover { color: #04140B; box-shadow: 0 12px 28px rgba(52,211,153,.22); } #avHome .av-btn--ghost { background: var(--av-surface); color: var(--av-text); border-color: var(--av-line-2); } #avHome .av-btn--ghost:hover { border-color: var(--av-accent); color: var(--av-accent); transform: translateY(-2px); } #avHome .av-btn--sm { padding: 11px 18px; font-size: .9rem; } #avHome .av-btn--block { width: 100%; } #avHome .av-btn .av-wa { color: #25D366; } #avHome .av-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .93rem; color: var(--av-accent); transition: gap .18s ease; } #avHome .av-link::after { content: "→"; transition: transform .18s ease; } #avHome .av-link:hover { gap: 11px; } /* -------------------------------------------------------------------------- 6. PILLS · CARDS -------------------------------------------------------------------------- */ #avHome .av-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--av-accent-tint); border: 1px solid var(--av-accent-line); border-radius: 999px; padding: 9px 18px; font-family: var(--av-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--av-accent); margin-bottom: 26px; } #avHome .av-pill .av-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--av-accent); flex: none; position: relative; } #avHome .av-pill .av-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--av-accent); opacity: .45; animation: avPulse 2s ease-out infinite; } @keyframes avPulse { to { transform: scale(1.9); opacity: 0; } } #avHome .av-card { background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-r); box-shadow: var(--av-shadow-sm); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; position: relative; } #avHome .av-card--hover:hover { transform: translateY(-4px); border-color: var(--av-accent-line); box-shadow: var(--av-shadow); } #avHome .av-kicker { font-family: var(--av-mono); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--av-accent); margin: 0 0 8px; line-height: 1.4; } /* -------------------------------------------------------------------------- 7. HERO -------------------------------------------------------------------------- */ #avHome .av-hero { padding: 64px 0 72px; } #avHome .av-hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 52px; align-items: center; } #avHome .av-hero-sub { color: var(--av-text-2); font-size: 1.08rem; max-width: 46ch; margin: 0 0 30px; } #avHome .av-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; } #avHome .av-hstats { display: flex; flex-wrap: wrap; gap: 14px 30px; padding-top: 26px; border-top: 1px solid var(--av-line); } #avHome .av-hstat { display: flex; align-items: center; gap: 10px; } #avHome .av-hstat svg { width: 22px; height: 22px; flex: none; color: var(--av-accent); } #avHome .av-hstat b { display: block; font-size: .95rem; font-weight: 800; color: var(--av-text); line-height: 1.2; } #avHome .av-hstat span { display: block; font-size: .78rem; color: var(--av-text-3); line-height: 1.3; } /* -------------------------------------------------------------------------- 8. THE TERMINAL DASHBOARD (interactive) -------------------------------------------------------------------------- */ #avHome .av-dash { background: var(--av-term-bg); border: 1px solid var(--av-term-line); border-radius: var(--av-r-lg); box-shadow: var(--av-shadow-lg); overflow: hidden; font-family: var(--av-mono); position: relative; transition: box-shadow .3s ease, transform .3s ease; } #avHome .av-dash::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74,222,128,.018) 3px 4px); } #avHome .av-dash.is-live { box-shadow: var(--av-shadow-lg), 0 0 0 1px var(--av-accent-line); } #avHome .av-dash-bar { display: flex; align-items: center; gap: 8px; background: var(--av-term-panel); border-bottom: 1px solid var(--av-term-line); padding: 13px 16px; } #avHome .av-dash-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; flex: none; } #avHome .av-dash-bar i:nth-child(1) { background: #F87171; } #avHome .av-dash-bar i:nth-child(2) { background: #FBBF24; } #avHome .av-dash-bar i:nth-child(3) { background: #34D399; } #avHome .av-dash-bar .av-path { margin-left: 8px; color: #C6D2DE; font-size: .78rem; } #avHome .av-dash-status { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: var(--av-term-green-2); border: 1px solid rgba(74,222,128,.34); background: rgba(34,197,94,.10); border-radius: 6px; padding: 4px 9px; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; } #avHome .av-dash-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--av-term-green-2); animation: avBlinkDot 1.6s ease-in-out infinite; } @keyframes avBlinkDot { 50% { opacity: .25; } } #avHome .av-dash-body { padding: 16px; display: grid; gap: 14px; } #avHome .av-dash-top { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 14px; } #avHome .av-console { background: var(--av-term-panel-2); border: 1px solid var(--av-term-line); border-radius: 12px; padding: 15px 15px 13px; font-size: .78rem; line-height: 1.9; min-height: 232px; } #avHome .av-console .av-cmd { color: var(--av-term-green); display: block; margin-bottom: 4px; } #avHome .av-console .av-cmd b { color: #E6EDF3; font-weight: 400; } #avHome .av-checks { display: block; } #avHome .av-check { display: flex; align-items: center; gap: 8px; color: #C6D2DE; cursor: default; border-radius: 5px; padding: 0 5px; margin: 0 -5px; } #avHome .av-check .av-tick { color: var(--av-term-green); flex: none; } #avHome .av-check .av-note { margin-left: auto; color: var(--av-term-dim); font-size: .68rem; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; } #avHome .av-check:hover, #avHome .av-check.is-on { background: rgba(34,197,94,.10); color: #EAF3EC; } #avHome .av-check:hover .av-note, #avHome .av-check.is-on .av-note { opacity: 1; transform: translateX(0); } #avHome .av-console .av-out { display: block; color: var(--av-term-green-2); margin-top: 6px; } #avHome .av-caret { display: inline-block; width: 8px; height: 1em; background: var(--av-term-green-2); vertical-align: -2px; margin-left: 3px; animation: avCaret 1s steps(1) infinite; } @keyframes avCaret { 50% { opacity: 0; } } #avHome .av-map { background: var(--av-term-panel-2); border: 1px solid var(--av-term-line); border-radius: 12px; padding: 14px; position: relative; overflow: hidden; min-height: 232px; display: flex; align-items: center; justify-content: center; } #avHome .av-map svg { width: auto; max-height: 210px; height: 100%; display: block; } #avHome .av-map .av-node { fill: var(--av-term-green-2); transition: r .25s ease; } #avHome .av-map .av-ping { fill: none; stroke: var(--av-term-green-2); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; } #avHome .av-dash.is-live .av-map .av-ping { animation: avPing 2.6s ease-out infinite; } #avHome .av-dash.is-live .av-map .av-ping:nth-of-type(2) { animation-delay: .5s; } #avHome .av-dash.is-live .av-map .av-ping:nth-of-type(3) { animation-delay: 1s; } #avHome .av-dash.is-live .av-map .av-ping:nth-of-type(4) { animation-delay: 1.5s; } #avHome .av-dash.is-live .av-map .av-ping:nth-of-type(5) { animation-delay: 2s; } @keyframes avPing { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.4); } } #avHome .av-map-label { position: absolute; left: 14px; bottom: 12px; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--av-term-dim); } #avHome .av-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } #avHome .av-tile { background: var(--av-term-panel-2); border: 1px solid var(--av-term-line); border-radius: 12px; padding: 14px 15px; display: flex; align-items: center; gap: 12px; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; } #avHome .av-tile:hover { border-color: rgba(74,222,128,.42); transform: translateY(-2px); background: rgba(34,197,94,.05); } #avHome .av-tile > svg { width: 26px; height: 26px; flex: none; color: var(--av-term-green-2); } #avHome .av-tile small { display: block; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: var(--av-term-dim); line-height: 1.4; } #avHome .av-tile b { display: block; font-size: 1.35rem; font-weight: 700; color: #F2F6FA; line-height: 1.25; letter-spacing: -.02em; } #avHome .av-tile > span > span { display: block; font-size: .66rem; color: var(--av-term-text); line-height: 1.4; } #avHome .av-dash-bot { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 14px; } #avHome .av-labs { background: var(--av-term-panel-2); border: 1px solid var(--av-term-line); border-radius: 12px; padding: 13px 15px 15px; } #avHome .av-labs > small { display: block; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: var(--av-term-dim); margin-bottom: 12px; } #avHome .av-labrow { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; } #avHome .av-lab { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 4px; border-radius: 9px; border: 1px solid transparent; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } #avHome .av-lab svg { width: 20px; height: 20px; color: var(--av-term-green-2); } #avHome .av-lab span { font-size: .58rem; color: var(--av-term-text); text-align: center; line-height: 1.3; } #avHome .av-lab:hover { background: rgba(34,197,94,.09); border-color: rgba(74,222,128,.3); transform: translateY(-2px); } #avHome .av-lab:hover span { color: #EAF3EC; } #avHome .av-donut { background: var(--av-term-panel-2); border: 1px solid var(--av-term-line); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 13px; } #avHome .av-donut svg { width: 58px; height: 58px; flex: none; } #avHome .av-donut .av-ring-bg { fill: none; stroke: var(--av-term-line); stroke-width: 5; } #avHome .av-donut .av-ring { fill: none; stroke: var(--av-term-green-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1); } #avHome .av-dash.is-live .av-donut .av-ring { stroke-dashoffset: 32.7; } #avHome .av-donut .av-ring-txt { fill: #F2F6FA; font-size: 13px; font-weight: 700; font-family: var(--av-mono); } #avHome .av-donut b { display: block; font-size: .84rem; color: #F2F6FA; font-weight: 700; line-height: 1.3; } #avHome .av-donut > span > span { display: block; font-size: .68rem; color: var(--av-term-text); } #avHome .av-dash-hint { margin-top: 12px; text-align: center; font-family: var(--av-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--av-text-3); } /* -------------------------------------------------------------------------- 9. ALUMNI STRIP -------------------------------------------------------------------------- */ #avHome .av-strip { border: 1px solid var(--av-line); border-radius: var(--av-r); background: var(--av-surface); box-shadow: var(--av-shadow-sm); padding: 20px 24px; display: flex; align-items: center; gap: 26px; } #avHome .av-strip > small { flex: none; max-width: 190px; font-family: var(--av-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--av-text-3); line-height: 1.5; } #avHome .av-marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } #avHome .av-marquee ul { display: flex; align-items: center; gap: 46px; width: max-content; animation: avSlide 34s linear infinite; } #avHome .av-marquee:hover ul { animation-play-state: paused; } #avHome .av-marquee li { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--av-text-2); white-space: nowrap; opacity: .85; transition: color .2s ease, opacity .2s ease; } #avHome .av-marquee li:hover { color: var(--av-text); opacity: 1; } @keyframes avSlide { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 10. AUDIENCE CARDS -------------------------------------------------------------------------- */ #avHome .av-aud-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; } #avHome .av-aud { display: flex; flex-direction: column; overflow: hidden; } #avHome .av-aud-top { position: relative; height: 132px; flex: none; background: linear-gradient(rgba(74,222,128,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,.07) 1px, transparent 1px), radial-gradient(ellipse 90% 100% at 80% 0%, rgba(34,197,94,.22), transparent 62%), var(--av-term-bg); background-size: 22px 22px, 22px 22px, auto, auto; border-bottom: 1px solid var(--av-line); } #avHome .av-aud-num { position: absolute; top: 12px; left: 14px; font-family: var(--av-mono); font-size: .7rem; font-weight: 700; color: var(--av-term-green-2); border: 1px solid rgba(74,222,128,.34); background: rgba(5,8,12,.6); border-radius: 6px; padding: 3px 8px; } #avHome .av-aud-ico { position: absolute; left: 18px; bottom: -22px; width: 46px; height: 46px; border-radius: 13px; background: var(--av-surface); border: 1px solid var(--av-line); box-shadow: var(--av-shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--av-accent); } #avHome .av-aud-ico svg { width: 22px; height: 22px; } #avHome .av-aud-body { padding: 34px 20px 20px; display: flex; flex-direction: column; flex: 1; } #avHome .av-aud-body > p { color: var(--av-text-2); font-size: .9rem; margin-bottom: 16px; } #avHome .av-aud-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; flex: 1; } #avHome .av-aud-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--av-text-2); line-height: 1.45; } #avHome .av-aud-list svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--av-accent); } #avHome .av-aud-foot { border-top: 1px solid var(--av-line); padding-top: 15px; margin-top: auto; } /* -------------------------------------------------------------------------- 11. ADVISOR BLOCK -------------------------------------------------------------------------- */ #avHome .av-advisor { display: grid; grid-template-columns: 210px minmax(0,1fr) auto; gap: 34px; align-items: center; border: 1px solid var(--av-line); border-radius: var(--av-r-lg); background: var(--av-surface); box-shadow: var(--av-shadow-sm); padding: 26px 30px; margin-top: 44px; } #avHome .av-advisor-img { border-radius: var(--av-r); overflow: hidden; border: 1px solid var(--av-line); background: var(--av-surface-2); position: relative; } #avHome .av-advisor-img img { display: block; width: 100%; height: auto; } #avHome .av-advisor-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--av-accent-line), inset 0 -50px 70px -50px var(--av-accent-tint-2); } #avHome .av-advisor h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 8px; } #avHome .av-advisor p { color: var(--av-text-2); font-size: .95rem; margin: 0; } #avHome .av-advisor-pts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } #avHome .av-advisor-pts li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--av-text-2); } #avHome .av-advisor-pts svg { width: 17px; height: 17px; color: var(--av-accent); flex: none; } /* -------------------------------------------------------------------------- 12. CERTIFICATION CARDS -------------------------------------------------------------------------- */ #avHome .av-cert-perks { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; align-items: start; } #avHome .av-perk { text-align: center; padding: 0 10px; position: relative; } #avHome .av-perk + .av-perk::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--av-line); } #avHome .av-perk svg { width: 26px; height: 26px; color: var(--av-accent); margin-bottom: 10px; } #avHome .av-perk span { display: block; font-size: .8rem; font-weight: 600; color: var(--av-text-2); line-height: 1.4; } #avHome .av-cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; } #avHome .av-cert { padding: 26px; display: flex; flex-direction: column; } #avHome .av-cert-logo { height: 96px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: var(--av-r-sm); } [data-theme="dark"] #avHome .av-cert-logo { background: #FFFFFF; } #avHome .av-cert-logo img { max-height: 78px; width: auto; object-fit: contain; } #avHome .av-cert > p.av-kicker { flex: none; } #avHome .av-cert > p:not(.av-kicker) { color: var(--av-text-2); font-size: .92rem; flex: 1; margin-bottom: 20px; } #avHome .av-cert-foot { border-top: 1px solid var(--av-line); padding-top: 16px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #avHome .av-badge { font-family: var(--av-mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--av-accent); border: 1px solid var(--av-accent-line); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } /* -------------------------------------------------------------------------- 13. SPLIT SECTIONS · REASONS · JOURNEY -------------------------------------------------------------------------- */ #avHome .av-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; } #avHome .av-split--rev .av-split-media { order: 2; } #avHome .av-frame { position: relative; border-radius: var(--av-r-lg); overflow: hidden; border: 1px solid var(--av-line); background: var(--av-surface-2); box-shadow: var(--av-shadow); } #avHome .av-frame img { display: block; width: 100%; height: auto; } #avHome .av-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--av-accent-line), inset 0 -70px 90px -60px var(--av-accent-tint-2); } #avHome .av-reasons { display: flex; flex-direction: column; gap: 20px; margin: 0 0 32px; } #avHome .av-reason { display: flex; gap: 14px; align-items: flex-start; } #avHome .av-reason .av-box { width: 26px; height: 26px; flex: none; margin-top: 2px; border-radius: 8px; background: var(--av-accent-tint); border: 1px solid var(--av-accent-line); color: var(--av-accent); display: flex; align-items: center; justify-content: center; } #avHome .av-reason .av-box svg { width: 14px; height: 14px; } #avHome .av-reason b { display: block; color: var(--av-text); font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 4px; } #avHome .av-reason > span > span { display: block; color: var(--av-text-2); font-size: .93rem; line-height: 1.6; } #avHome .av-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; counter-reset: avstep; margin: 0 0 32px; } #avHome .av-step { padding: 20px 18px; background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-r); box-shadow: var(--av-shadow-sm); } #avHome .av-step::before { counter-increment: avstep; content: "0" counter(avstep); display: block; font-family: var(--av-mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--av-accent); margin-bottom: 10px; } #avHome .av-step b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--av-text); } /* -------------------------------------------------------------------------- 14. PLACEMENT CAROUSEL — Swiper + Magnific selectors must not be renamed -------------------------------------------------------------------------- */ #avHome .placements-active { overflow: hidden; padding-bottom: 4px; } #avHome .placements-active .swiper-wrapper { align-items: stretch; } #avHome .placements-active .swiper-slide { height: auto; display: flex; } #avHome .placement__item { display: flex; flex-direction: column; width: 100%; margin: 0; border-radius: var(--av-r); } #avHome .placement__item .img { display: block; overflow: hidden; border: 1px solid var(--av-line); border-bottom: 0; border-radius: var(--av-r) var(--av-r) 0 0; background: var(--av-surface); box-shadow: var(--av-shadow-sm); transition: border-color .2s ease; } #avHome .placement__item:hover .img { border-color: var(--av-accent-line); } #avHome .placement__item .img img { display: block; width: 100%; height: auto; } #avHome .placement__caption { padding: 15px 17px; margin-top: auto; border: 1px solid var(--av-line); border-top: 0; border-radius: 0 0 var(--av-r) var(--av-r); background: var(--av-surface); } #avHome .placement__caption b { display: block; font-size: .94rem; font-weight: 700; color: var(--av-text); line-height: 1.35; } #avHome .placement__caption span { display: block; font-family: var(--av-mono); font-size: .69rem; letter-spacing: .05em; text-transform: uppercase; color: var(--av-accent); margin-top: 5px; line-height: 1.5; } #avHome .av-carousel-hint { margin: 20px 0 0; text-align: center; font-size: .85rem; color: var(--av-text-3); } #avHome .av-carousel-hint i { color: var(--av-accent); } #avHome .av-cnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; } #avHome .placements-button-prev, #avHome .placements-button-next { width: 46px; height: 46px; flex: none; border-radius: 50%; padding: 0; border: 1px solid var(--av-line-2); background: var(--av-surface); color: var(--av-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .18s ease, color .18s ease, transform .18s ease; } #avHome .placements-button-prev:hover, #avHome .placements-button-next:hover { border-color: var(--av-accent); color: var(--av-accent); transform: translateY(-2px); } #avHome .placements-pagination { display: flex; align-items: center; gap: 7px; } #avHome .placements-pagination .swiper-pagination-bullet { width: 7px; height: 7px; border-radius: 999px; background: var(--av-line-2); opacity: 1; transition: width .2s ease, background-color .2s ease; } #avHome .placements-pagination .swiper-pagination-bullet-active { width: 24px; background: var(--av-accent); } /* -------------------------------------------------------------------------- 15. FEATURES · VIDEO · TESTIMONIALS -------------------------------------------------------------------------- */ #avHome .av-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } #avHome .av-feat { padding: 28px; display: flex; flex-direction: column; } #avHome .av-feat .av-fi { width: 48px; height: 48px; flex: none; margin-bottom: 18px; border-radius: 13px; background: var(--av-accent-tint); border: 1px solid var(--av-accent-line); color: var(--av-accent); display: flex; align-items: center; justify-content: center; } #avHome .av-feat .av-fi svg { width: 22px; height: 22px; } #avHome .av-feat h3 a { color: var(--av-text); transition: color .15s ease; } #avHome .av-feat h3 a:hover { color: var(--av-accent); } #avHome .av-feat p { color: var(--av-text-2); font-size: .93rem; margin: 0; } #avHome .av-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--av-r); overflow: hidden; border: 1px solid var(--av-line); background: var(--av-term-bg); box-shadow: var(--av-shadow); } #avHome .av-video iframe, #avHome .av-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } #avHome .av-video-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg, rgba(11,15,20,.5), rgba(11,15,20,.15)); } #avHome .av-video-btn .av-play { width: 78px; height: 78px; border-radius: 50%; background: var(--av-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 38px rgba(0,0,0,.4); transition: transform .18s ease; } #avHome .av-video-btn:hover .av-play { transform: scale(1.08); } #avHome .av-video-btn .av-play svg { width: 28px; height: 28px; margin-left: 4px; } #avHome .av-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } #avHome .av-testi { padding: 28px; display: flex; flex-direction: column; gap: 18px; } #avHome .av-testi .av-quote { color: var(--av-accent); opacity: .45; } #avHome .av-testi .av-quote svg { width: 28px; height: 28px; } #avHome .av-testi blockquote { margin: 0; flex: 1; color: var(--av-text); font-size: .94rem; line-height: 1.7; background: transparent; background-image: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; font-style: normal; quotes: none; } #avHome .av-testi blockquote::before, #avHome .av-testi blockquote::after { content: none; display: none; background: none; } #avHome .av-testi-who { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--av-line); padding-top: 18px; } #avHome .av-testi-who img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--av-accent-line); } #avHome .av-testi-who b { display: block; font-size: .97rem; font-weight: 700; color: var(--av-text); } #avHome .av-testi-who > span > span { display: block; font-size: .82rem; color: var(--av-text-2); } #avHome .av-testi-who time { display: block; font-family: var(--av-mono); font-size: .7rem; color: var(--av-text-3); margin-top: 2px; } /* -------------------------------------------------------------------------- 16. FINAL CTA + FORM -------------------------------------------------------------------------- */ #avHome .av-cta-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; } #avHome .av-phone { display: inline-flex; align-items: center; gap: 14px; margin: 10px 0 26px; } #avHome .av-phone .av-pi { width: 50px; height: 50px; flex: none; border-radius: 13px; background: var(--av-accent-tint); border: 1px solid var(--av-accent-line); color: var(--av-accent); display: flex; align-items: center; justify-content: center; } #avHome .av-phone .av-pi svg { width: 22px; height: 22px; } #avHome .av-phone small { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--av-text-2); font-weight: 600; } #avHome .av-phone b { display: block; font-family: var(--av-mono); font-size: 1.24rem; color: var(--av-text); font-weight: 700; letter-spacing: -.01em; } #avHome .av-form-card { background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-r-lg); box-shadow: var(--av-shadow); padding: 36px; } #avHome .av-form-card h2 { font-size: 1.42rem; margin-bottom: 8px; } #avHome .av-form-card > p { color: var(--av-text-2); font-size: .93rem; margin-bottom: 26px; } #avHome .av-field { display: block; margin-bottom: 16px; } #avHome .av-field > label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--av-text-2); margin-bottom: 8px; } #avHome .av-field input, #avHome .av-field select, #avHome .av-field textarea { width: 100%; background: var(--av-bg-alt); border: 1px solid var(--av-line-2); border-radius: var(--av-btn-r); padding: 15px 16px; color: var(--av-text); font-size: 1rem; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } #avHome .av-field input::placeholder, #avHome .av-field textarea::placeholder { color: var(--av-text-3); } #avHome .av-field input:focus, #avHome .av-field select:focus, #avHome .av-field textarea:focus { outline: none; border-color: var(--av-accent); box-shadow: 0 0 0 3px var(--av-accent-tint); background: var(--av-surface); } #avHome .av-form-note { font-size: .81rem; color: var(--av-text-3); margin-top: 15px; } #avHome #enquiry-message:not(:empty) { display: block; margin-top: 15px; padding: 13px 15px; border-radius: var(--av-btn-r); border: 1px solid var(--av-accent-line); background: var(--av-accent-tint); color: var(--av-accent); font-size: .9rem; font-weight: 600; } /* -------------------------------------------------------------------------- 17. HEADER / FOOTER (theme markup untouched, restyled only) -------------------------------------------------------------------------- */ [data-avhome] .tg-header__top { background: #05080C; border-bottom: 1px solid rgba(255,255,255,.07); } [data-avhome] #header-fixed-height, [data-avhome] .tg-header__area { background: var(--av-bg); transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; } [data-avhome] .tg-header__area { border-bottom: 1px solid var(--av-line); } [data-avhome] .tg-header__area.sticky-menu { background: var(--av-bg); box-shadow: var(--av-shadow-sm); border-bottom-color: var(--av-line); } [data-avhome] .tgmenu__navbar-wrap ul li a, [data-avhome] .tgmenu__main-menu ul li a { color: var(--av-text); font-weight: 600; } [data-avhome] .tgmenu__navbar-wrap ul li a:hover, [data-avhome] .tgmenu__navbar-wrap ul li.active > a { color: var(--av-accent); } [data-avhome] .tgmenu__navbar-wrap ul li .sub-menu { background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-r-sm); box-shadow: var(--av-shadow); padding: 10px; } [data-avhome] .tgmenu__navbar-wrap ul li .sub-menu li a { color: var(--av-text-2); border-radius: 8px; padding: 9px 12px; font-weight: 500; transition: background-color .15s ease, color .15s ease; } [data-avhome] .tgmenu__navbar-wrap ul li .sub-menu li a:hover { background: var(--av-accent-tint); color: var(--av-accent); } [data-avhome][data-theme="dark"] .tgmenu__navbar-wrap ul li .sub-menu { background: var(--av-surface-2); } [data-avhome] .tgmenu__action .header-btn .tg-btn, [data-avhome] .tgmenu__action .header-btn a.tg-btn { border-radius: var(--av-btn-r); font-weight: 700; border: 1px solid var(--av-line-2); background: var(--av-surface); color: var(--av-text); transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } [data-avhome] .tgmenu__action .header-btn .tg-btn:hover { border-color: var(--av-accent); color: var(--av-accent); transform: translateY(-2px); } [data-avhome] .tgmenu__action .header-btn #demoBtn { background: var(--av-accent); color: #fff; border-color: transparent; } [data-avhome] .tgmenu__action .header-btn #demoBtn:hover { background: var(--av-accent-hover); color: #fff; border-color: transparent; box-shadow: 0 10px 26px rgba(21,128,61,.28); } [data-avhome][data-theme="dark"] .tgmenu__action .header-btn #demoBtn { color: #04140B; } [data-avhome][data-theme="dark"] .logo img, [data-avhome][data-theme="dark"] .nav-logo img { filter: none; content: url("../img/logo-light.png"); } [data-avhome][data-theme="dark"] .tgmobile__menu { background: var(--av-bg); } [data-avhome][data-theme="dark"] .tgmobile__menu .navigation li a { color: var(--av-text); } [data-avhome][data-theme="dark"] .offCanvas__info { background: var(--av-bg); color: var(--av-text); } [data-avhome] .av-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer; border-radius: var(--av-btn-r); border: 1px solid var(--av-line-2); background: var(--av-surface); color: var(--av-text); transition: border-color .18s ease, color .18s ease, transform .18s ease; } [data-avhome] .av-theme-toggle:hover { border-color: var(--av-accent); color: var(--av-accent); transform: translateY(-1px); } [data-avhome] .av-theme-toggle svg { width: 20px; height: 20px; } [data-avhome] .av-theme-toggle .av-icon-moon { display: none; } [data-avhome][data-theme="dark"] .av-theme-toggle .av-icon-moon { display: block; } [data-avhome][data-theme="dark"] .av-theme-toggle .av-icon-sun { display: none; } [data-avhome] li.av-theme-toggle-wrap { display: flex; align-items: center; } [data-avhome] .av-mobile-toggle { padding: 0 25px; } [data-avhome] .av-mobile-toggle ul { display: flex; list-style: none; margin: 14px 0 0; padding: 0; } [data-avhome] .footer__area { background: #05080C; } [data-avhome] .footer__area a { transition: color .15s ease; } [data-avhome] .footer__area a:hover { color: #4ADE80; } /* -------------------------------------------------------------------------- 18. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 1199px) { #avHome .av-aud-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } #avHome .av-hero-grid { grid-template-columns: minmax(0,1fr); gap: 44px; } #avHome .av-hero-sub { max-width: 60ch; } #avHome .av-cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 991px) { #avHome .av-wrap { padding: 0 22px; } #avHome .av-hero { padding: 44px 0 56px; } #avHome .av-dash-top { grid-template-columns: minmax(0,1fr); } #avHome .av-map { min-height: 168px; } #avHome .av-console { min-height: 0; } #avHome .av-dash-bot { grid-template-columns: minmax(0,1fr); } #avHome .av-split { grid-template-columns: minmax(0,1fr); gap: 36px; } #avHome .av-split--rev .av-split-media { order: 0; } #avHome .av-cta-grid { grid-template-columns: minmax(0,1fr); gap: 34px; } #avHome .av-aud-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } #avHome .av-advisor { grid-template-columns: 150px minmax(0,1fr); gap: 24px; } #avHome .av-advisor > .av-btn { grid-column: 1 / -1; } #avHome .av-cert-perks { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 4px; } #avHome .av-strip { flex-direction: column; align-items: stretch; gap: 16px; } #avHome .av-strip > small { max-width: none; text-align: center; } } @media (max-width: 767px) { #avHome .av-wrap { padding: 0 18px; } #avHome .av-dash-bar { padding: 11px 12px; gap: 6px; } #avHome .av-dash-bar .av-path { margin-left: 4px; font-size: .7rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #avHome .av-dash-status { flex: none; font-size: .56rem; letter-spacing: .1em; padding: 4px 7px; gap: 5px; } #avHome .av-head { margin-bottom: 34px; } #avHome .av-hero-cta { gap: 10px; } #avHome .av-hero-cta .av-btn { flex: 1 1 0; min-width: 0; padding: 14px 12px; font-size: .92rem; } #avHome .av-hstats { gap: 14px 22px; } #avHome .av-tiles { grid-template-columns: minmax(0,1fr); } #avHome .av-labrow { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } #avHome .av-cert-grid { grid-template-columns: minmax(0,1fr); } #avHome .av-cert { padding: 20px; } #avHome .av-cert-logo { height: 72px; margin-bottom: 16px; } #avHome .av-aud-grid { grid-template-columns: minmax(0,1fr); } #avHome .av-feat { padding: 22px; } #avHome .av-testi { padding: 22px; } #avHome .av-form-card { padding: 24px 20px; } #avHome .av-advisor { grid-template-columns: minmax(0,1fr); padding: 22px; } #avHome .av-advisor-img { max-width: 190px; } #avHome .av-dash-body { padding: 12px; gap: 12px; } } @media (max-width: 575px) { #avHome .av-h1 { font-size: clamp(2rem, 9vw, 2.5rem); } #avHome .av-journey { grid-template-columns: minmax(0,1fr); } #avHome .av-cert-perks { grid-template-columns: minmax(0,1fr); } #avHome .av-perk + .av-perk::before { display: none; } #avHome .av-perk { text-align: left; display: flex; align-items: center; gap: 12px; } #avHome .av-perk svg { margin-bottom: 0; } } /* -------------------------------------------------------------------------- 19. MOTION / PRINT -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #avHome *, #avHome *::before, #avHome *::after, [data-avhome] .av-theme-toggle { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } #avHome .av-marquee ul { animation: none; } #avHome .av-dash.is-live .av-donut .av-ring { transition: none; } } @media print { [data-avhome] .av-theme-toggle, #avHome .av-dash, [data-avhome] .chat-widget-panel, [data-avhome] .chat_scroll__top, [data-avhome] .scroll__top { display: none !important; } } /* -------------------------------------------------------------------------- 20. TERMINAL INTERACTION STATES The content is fully visible with JavaScript off. These rules only apply once the script adds .is-booting, so nothing is ever hidden by default. -------------------------------------------------------------------------- */ #avHome .av-dash > * { position: relative; z-index: 1; } #avHome .av-dash::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(34,197,94,.11), transparent 70%); opacity: 0; transition: opacity .3s ease; } #avHome .av-dash:hover::before { opacity: 1; } #avHome .av-check { opacity: 1; transform: none; transition: background-color .16s ease, color .16s ease, opacity .28s ease, transform .28s ease; } #avHome .av-dash.is-booting .av-check { opacity: .22; transform: translateX(-5px); } #avHome .av-dash.is-booting .av-check.is-on { opacity: 1; transform: none; } #avHome .av-typed { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 100%; } #avHome .av-dash.is-booting .av-typed { animation: avType .5s steps(14, end) both; } @keyframes avType { from { max-width: 0; } to { max-width: 100%; } } #avHome .av-dash.is-booting .av-out { opacity: 0; } #avHome .av-out { transition: opacity .4s ease .2s; } @media (hover: none), (max-width: 991px) { #avHome .av-check .av-note { opacity: 1; transform: none; } #avHome .av-dash::before { display: none; } } /* -------------------------------------------------------------------------- 21. POST-BUILD CORRECTIONS (keep last in the file) -------------------------------------------------------------------------- */ /* 21.1 The console column was too narrow: the typed command wrapped off the line and two status labels broke onto a second row. Give the console the larger share and stop the labels wrapping. */ #avHome .av-dash-top { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); } #avHome .av-console { font-size: .74rem; line-height: 1.95; } #avHome .av-cmd { white-space: nowrap; overflow: hidden; } #avHome .av-check { white-space: nowrap; } #avHome .av-check .av-note { flex: none; } /* 21.2 Dot-matrix India. Circles are static markup, so the panel is complete with JavaScript off; only the pings animate. */ #avHome .av-map svg { width: 100%; height: auto; max-height: 216px; } #avHome .av-map .av-dotgrid circle { fill: rgba(74,222,128,.22); } #avHome .av-map .av-cities text { fill: rgba(198,210,222,.9); font-family: var(--av-mono); font-size: 7.5px; letter-spacing: .04em; } #avHome .av-map .av-nodes .av-node { fill: var(--av-term-green-2); } #avHome .av-map .av-nodes .av-ping { fill: none; stroke: var(--av-term-green-2); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; } #avHome .av-dash.is-live .av-map .av-nodes .av-ping { animation: avPing 2.8s ease-out infinite; } #avHome .av-dash.is-live .av-map .av-nodes .av-ping:nth-of-type(3) { animation-delay: .45s; } #avHome .av-dash.is-live .av-map .av-nodes .av-ping:nth-of-type(5) { animation-delay: .9s; } #avHome .av-dash.is-live .av-map .av-nodes .av-ping:nth-of-type(7) { animation-delay: 1.35s; } #avHome .av-dash.is-live .av-map .av-nodes .av-ping:nth-of-type(9) { animation-delay: 1.8s; } #avHome .av-dash.is-live .av-map .av-nodes .av-ping:nth-of-type(11) { animation-delay: 2.25s; } /* 21.3 Headline was crowding the CTAs out of the first screen. */ #avHome .av-h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); } #avHome .av-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } #avHome .av-pill { font-size: .66rem; letter-spacing: .1em; padding: 8px 15px; } @media (max-width: 1199px) { #avHome .av-hero-grid { grid-template-columns: minmax(0,1fr); } } /* 21.4 Give the copy column enough room for the two CTAs side by side and the eyebrow pill on one line. */ @media (min-width: 1200px) { #avHome .av-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 46px; } #avHome .av-hero-cta .av-btn { padding: 15px 22px; } #avHome .av-hstats { gap: 16px 26px; } } /* 21.5 Restored copy from the old brand strip / certification line. */ #avHome .av-tagline { text-align: center; margin: 0 0 20px; font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--av-text); letter-spacing: -.01em; } #avHome .av-certline { font-family: var(--av-mono); font-size: .8rem; letter-spacing: .05em; color: var(--av-text-2); border: 1px solid var(--av-line); background: var(--av-surface); border-radius: 999px; padding: 9px 18px; display: inline-block; margin: 0 0 18px; box-shadow: var(--av-shadow-sm); } @media (max-width: 575px) { #avHome .av-certline { font-size: .68rem; padding: 8px 13px; } } /* ========================================================================== 22. MOBILE COMPACTION Everything is single-column below 768px, so each stacked block adds real scroll distance. These rules tighten without removing any content — the one exception is the decorative India map, which is hidden below 768px because the same claim is already in the hero eyebrow. ========================================================================== */ @media (max-width: 767px) { #avHome .av-hero { padding: 28px 0 36px; } #avHome .av-hero-grid { gap: 26px; } #avHome .av-pill { margin-bottom: 18px; font-size: .6rem; padding: 7px 12px; } #avHome .av-h1 { font-size: clamp(1.95rem, 8.4vw, 2.4rem); } #avHome .av-hero-sub { font-size: .97rem; margin-bottom: 20px; } #avHome .av-hero-cta { margin-bottom: 22px; } #avHome .av-hstats { padding-top: 18px; gap: 12px 18px; } #avHome .av-hstat svg { width: 19px; height: 19px; } #avHome .av-hstat b { font-size: .86rem; } #avHome .av-hstat span { font-size: .72rem; } /* dashboard */ #avHome .av-map { display: none; } #avHome .av-dash-body { padding: 11px; gap: 10px; } #avHome .av-console { padding: 12px; font-size: .68rem; line-height: 1.75; } #avHome .av-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } #avHome .av-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 9px; } #avHome .av-tile > svg { width: 18px; height: 18px; } #avHome .av-tile b { font-size: 1.05rem; } #avHome .av-tile small { font-size: .5rem; letter-spacing: .1em; } #avHome .av-tile > span > span { font-size: .58rem; } #avHome .av-labs { padding: 11px 12px 12px; } #avHome .av-labrow { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 3px; } #avHome .av-lab { padding: 6px 2px; gap: 5px; } #avHome .av-lab svg { width: 16px; height: 16px; } #avHome .av-lab span { font-size: .48rem; } #avHome .av-donut { padding: 11px; gap: 10px; } #avHome .av-donut svg { width: 46px; height: 46px; } #avHome .av-dash-hint { margin-top: 9px; font-size: .58rem; } #avHome .av-tagline { font-size: .98rem; margin-bottom: 14px; } /* audience cards */ #avHome .av-aud-top { height: 84px; } #avHome .av-aud-ico { width: 40px; height: 40px; bottom: -19px; left: 14px; border-radius: 11px; } #avHome .av-aud-body { padding: 28px 16px 16px; } #avHome .av-aud-body > p { font-size: .86rem; margin-bottom: 12px; } #avHome .av-aud-list { gap: 6px; margin-bottom: 14px; } #avHome .av-aud-list li { font-size: .82rem; } #avHome .av-aud-foot { padding-top: 12px; } /* certification cards */ #avHome .av-cert { padding: 16px; } #avHome .av-cert-logo { height: 62px; margin-bottom: 13px; } #avHome .av-cert-logo img { max-height: 50px; } #avHome .av-cert > p:not(.av-kicker) { font-size: .87rem; margin-bottom: 14px; } #avHome .av-cert-foot { padding-top: 12px; } /* everything else */ #avHome .av-feat { padding: 18px; } #avHome .av-feat .av-fi { width: 40px; height: 40px; margin-bottom: 12px; } #avHome .av-testi { padding: 18px; gap: 13px; } #avHome .av-step { padding: 14px 13px; } #avHome .av-journey { gap: 10px; } #avHome .av-reasons { gap: 15px; } #avHome .av-advisor { padding: 20px; gap: 18px; margin-top: 28px; } #avHome .av-cert-perks { gap: 12px 4px; } } /* Two cards per row as soon as there is room — most phones are 390-430px. */ @media (min-width: 372px) and (max-width: 767px) { #avHome .av-aud-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } #avHome .av-cert-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } #avHome .av-feat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } } @media (min-width: 372px) and (max-width: 767px) { #avHome .av-aud-list li { font-size: .78rem; gap: 6px; } #avHome .av-aud-list svg { width: 13px; height: 13px; margin-top: 3px; } #avHome .av-aud-body { padding: 26px 13px 14px; } #avHome .av-aud-body > p { font-size: .82rem; } #avHome .av-h3 { font-size: .98rem; } #avHome .av-cert { padding: 13px; } #avHome .av-cert > p:not(.av-kicker) { font-size: .82rem; } #avHome .av-cert-foot { flex-direction: column; align-items: flex-start; gap: 8px; } #avHome .av-link { font-size: .86rem; } #avHome .av-badge { font-size: .55rem; padding: 4px 9px; } } /* -------------------------------------------------------------------------- 22. LAYOUT CORRECTIONS (v2g) Rules in the appendix above were written unconditionally and therefore beat the responsive block, which left the terminal in two columns on phones and clipped the typed command on desktop. These are the scoped replacements and must stay last in the file. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-dash-top { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); } #avHome .av-hero-grid { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); } } @media (max-width: 991px) { #avHome .av-dash-top { grid-template-columns: minmax(0,1fr); } #avHome .av-hero-grid { grid-template-columns: minmax(0,1fr); } } /* the hover prompt means nothing on a touch screen; the panel still runs its check on its own when it scrolls into view. */ @media (hover: none) { #avHome .av-dash-hint { display: none; } } /* -------------------------------------------------------------------------- 23. ALUMNI LOGO STRIP Each employer sits on its own white tile so the brand colours stay correct in both themes — several of these logos are dark navy and would vanish on the dark ground otherwise. Employers with no logo file keep their name as text in an identical tile, so the row reads as one set. -------------------------------------------------------------------------- */ #avHome .av-marquee ul { display: flex; align-items: center; gap: 14px; } #avHome .av-marquee li { flex: none; display: flex; align-items: center; justify-content: center; height: 56px; min-width: 118px; padding: 0 18px; background: #FFFFFF; border: 1px solid var(--av-line); border-radius: 12px; font-family: var(--av-sans); font-size: .9rem; font-weight: 700; letter-spacing: .005em; color: #47566B; white-space: nowrap; } #avHome .av-marquee li img { display: block; height: 30px; width: auto; max-width: 136px; object-fit: contain; } [data-avhome][data-theme="dark"] #avHome .av-marquee li { border-color: rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(0,0,0,.35); } @media (max-width: 767px) { #avHome .av-marquee ul { gap: 10px; } #avHome .av-marquee li { height: 46px; min-width: 92px; padding: 0 13px; font-size: .78rem; } #avHome .av-marquee li img { height: 23px; max-width: 106px; } } /* -------------------------------------------------------------------------- 24. SCROLLING RAILS One mechanism, two uses: student testimonials and placement posters. Drifts on its own, stops on hover/focus/drag, and can be stepped or paused. The markup is duplicated at runtime for the seamless wrap, so the HTML a crawler reads contains exactly one copy of every quote. -------------------------------------------------------------------------- */ #avHome .av-rail-wrap { position: relative; } #avHome .av-sec .av-rail-wrap { --av-rail-fade: var(--av-bg); } #avHome .av-sec--alt .av-rail-wrap { --av-rail-fade: var(--av-bg-alt); } #avHome .av-rail-wrap::before, #avHome .av-rail-wrap::after { content: ""; position: absolute; top: 0; bottom: 16px; width: 54px; z-index: 2; pointer-events: none; } #avHome .av-rail-wrap::before { left: -2px; background: linear-gradient(90deg, var(--av-rail-fade), transparent); } #avHome .av-rail-wrap::after { right: -2px; background: linear-gradient(270deg, var(--av-rail-fade), transparent); } #avHome .av-rail { display: flex; align-items: stretch; gap: 22px; overflow-x: auto; overflow-y: hidden; padding: 6px 2px 16px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; scroll-behavior: auto; } #avHome .av-rail::-webkit-scrollbar { display: none; } #avHome .av-rail.is-dragging { cursor: grabbing; user-select: none; } #avHome .av-rail:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 5px; border-radius: 14px; } #avHome .av-rail > * { flex: 0 0 auto; } #avHome .av-rail-ctrl { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; } #avHome .av-rnav { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--av-line); background: var(--av-surface); color: var(--av-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; } #avHome .av-rnav:hover { background: var(--av-accent); border-color: var(--av-accent); color: #FFFFFF; } #avHome .av-rnav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #avHome .av-rnav.av-rplay svg { fill: currentColor; stroke: none; } /* testimonial cards inside the rail */ #avHome .av-rail .av-testi { width: 390px; max-width: 82vw; display: flex; flex-direction: column; } #avHome .av-rail .av-testi blockquote { flex: 1; } #avHome .av-stars { display: flex; gap: 3px; margin-top: 14px; color: #F0A81E; } #avHome .av-stars svg { width: 16px; height: 16px; fill: currentColor; } /* placement poster cards inside the rail */ #avHome .av-pcard { width: 288px; max-width: 76vw; background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-r); overflow: hidden; margin: 0; } #avHome .av-pcard > a { display: block; line-height: 0; position: relative; } #avHome .av-pcard img { width: 100%; height: auto; display: block; transition: transform .35s ease; } #avHome .av-pcard > a:hover img { transform: scale(1.03); } #avHome .av-pcard > a::after { content: ""; position: absolute; inset: 0; background: rgba(11,18,32,0); transition: background-color .25s ease; } #avHome .av-pcard > a:hover::after { background: rgba(11,18,32,.12); } #avHome .av-pcard figcaption { padding: 14px 16px 16px; } #avHome .av-pcard figcaption b { display: block; font-size: 1rem; color: var(--av-text); } #avHome .av-pcard figcaption span { display: block; margin-top: 3px; font-size: .82rem; line-height: 1.5; color: var(--av-text-3); } /* full-screen poster viewer */ #avLightbox[hidden] { display: none; } #avLightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(4,7,11,.92); display: flex; align-items: center; justify-content: center; padding: 28px; } #avLightbox img { max-width: min(92vw, 860px); max-height: 88vh; width: auto; height: auto; border-radius: 10px; } #avLightbox .av-lb-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #avLightbox .av-lb-btn:hover { background: rgba(255,255,255,.2); } #avLightbox .av-lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #avLightbox .av-lb-close { top: 20px; right: 20px; } #avLightbox .av-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); } #avLightbox .av-lb-next { right: 20px; top: 50%; transform: translateY(-50%); } #avLightbox .av-lb-cap { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: #E6EDF3; font-size: .9rem; padding: 0 80px; } @media (max-width: 575px) { #avLightbox { padding: 14px; } #avLightbox .av-lb-cap { padding: 0 12px; bottom: 8px; font-size: .82rem; } #avLightbox .av-lb-prev { left: 8px; } #avLightbox .av-lb-next { right: 8px; } } /* -------------------------------------------------------------------------- 25. RAIL AND VIEWER REFINEMENTS -------------------------------------------------------------------------- */ /* the edge fade should sit mostly outside the first and last card, not veil the opening words of a quote */ #avHome .av-rail-wrap::before, #avHome .av-rail-wrap::after { width: 42px; } #avHome .av-rail-wrap::before { left: -26px; background: linear-gradient(90deg, var(--av-rail-fade) 0 14px, transparent 100%); } #avHome .av-rail-wrap::after { right: -26px; background: linear-gradient(270deg, var(--av-rail-fade) 0 14px, transparent 100%); } /* a centred section head should centre its standfirst too */ #avHome .av-head--c .av-lede { margin-left: auto; margin-right: auto; text-align: center; } /* leave room under the poster for its caption */ #avLightbox { padding: 28px 28px 62px; } #avLightbox img { max-height: 80vh; } /* -------------------------------------------------------------------------- 26. COMPACT HERO (keep last but one — only section 27 may follow) The brief: the stat row and the alumni strip must both be on screen the moment the page opens, and the terminal must stop pushing the copy off the fold. Three moves: 1. the terminal is tightened throughout - smaller bar, tighter console, shorter tiles - so it no longer sets a 600px floor for the hero row; 2. the five stats become one evenly divided row spanning the full grid instead of a ragged 3 + 2 block inside the narrow copy column; 3. the alumni strip is pulled into the hero as its last row, so there is no section boundary between it and the fold. -------------------------------------------------------------------------- */ #avHome .av-hero { padding: 22px 0 26px; } #avHome .av-hero-grid { column-gap: 40px; row-gap: 18px; align-items: start; } /* explicit placement, so the DOM can read copy - stats - strip - terminal while the layout still shows the terminal beside the headline */ @media (min-width: 992px) { #avHome .av-hero-copy { grid-column: 1; grid-row: 1; } #avHome .av-hero-dash { grid-column: 2; grid-row: 1; } #avHome .av-hstats { grid-column: 1 / -1; grid-row: 2; } #avHome .av-strip { grid-column: 1 / -1; grid-row: 3; } } @media (max-width: 991px) { #avHome .av-hero-copy, #avHome .av-hero-dash, #avHome .av-hstats, #avHome .av-strip { grid-column: 1 / -1; grid-row: auto; } } #avHome .av-pill { padding: 6px 14px; font-size: .6rem; margin-bottom: 16px; } #avHome .av-h1 { font-size: clamp(1.85rem, 2.85vw, 2.5rem); line-height: 1.09; margin-bottom: 12px; } #avHome .av-hero-sub { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; max-width: 54ch; } #avHome .av-hero-cta { margin-bottom: 0; gap: 12px; } #avHome .av-hero-cta .av-btn { padding: 13px 20px; } /* --- the five facts, one even row --- */ #avHome .av-hstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 15px 0 0; border-top: 1px solid var(--av-line); } #avHome .av-hstat { padding: 0 20px; margin: 0; border-left: 1px solid var(--av-line); align-items: center; } #avHome .av-hstat:first-child { border-left: 0; padding-left: 0; } #avHome .av-hstat:last-child { padding-right: 0; } /* --- the terminal, tightened --- */ #avHome .av-dash-bar { padding: 8px 13px; gap: 7px; } #avHome .av-dash-bar i { width: 9px; height: 9px; } #avHome .av-dash-bar .av-path { font-size: .7rem; margin-left: 6px; } #avHome .av-dash-status { font-size: .55rem; padding: 3px 7px; gap: 5px; } #avHome .av-dash-body { padding: 11px; gap: 10px; } #avHome .av-dash-top { gap: 10px; } #avHome .av-console { padding: 10px 11px 9px; font-size: .69rem; line-height: 1.52; min-height: 0; } #avHome .av-console .av-cmd { margin-bottom: 2px; } #avHome .av-console .av-out { margin-top: 4px; } #avHome .av-check { padding: 0 4px; margin: 0 -4px; } #avHome .av-check .av-note { font-size: .6rem; } #avHome .av-map { min-height: 0; padding: 10px; overflow: hidden; } #avHome .av-map svg { max-height: 100%; height: auto; min-height: 0; } #avHome .av-tiles { gap: 10px; } #avHome .av-tile { padding: 10px 11px; gap: 6px; } #avHome .av-tile svg { width: 20px; height: 20px; } #avHome .av-dash-bot { gap: 10px; } #avHome .av-labs { padding: 10px 11px; } #avHome .av-labrow { gap: 5px; } #avHome .av-donut { padding: 10px; gap: 10px; } #avHome .av-dash-hint { margin-top: 8px; font-size: .58rem; } /* the strip is part of the hero now, so it carries no section spacing */ #avHome .av-strip { margin: 0; padding: 16px 22px; } @media (max-width: 1199px) { #avHome .av-hstats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; } #avHome .av-hstat:nth-child(3n+1) { border-left: 0; padding-left: 0; } } @media (max-width: 767px) { #avHome .av-hero { padding: 18px 0 22px; } #avHome .av-hstats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 12px; } #avHome .av-hstat { padding: 0 12px; } #avHome .av-hstat:nth-child(3n+1) { border-left: 1px solid var(--av-line); padding-left: 12px; } #avHome .av-hstat:nth-child(2n+1) { border-left: 0; padding-left: 0; } #avHome .av-strip { padding: 14px 16px; } } /* -------------------------------------------------------------------------- 27. ABOVE-THE-FOLD TRIM (keep last in the file) Section 26 shrank the console but the India map was still setting the height of the terminal's top row: the SVG scales to its own aspect ratio, so max-height had nothing to resolve against. Giving it an explicit height fixes the row, and the rest of these numbers are the last few pixels needed to land the alumni strip inside a 734px viewport. -------------------------------------------------------------------------- */ #avHome .av-hero { padding: 16px 0 18px; } #avHome .av-hero-grid { row-gap: 14px; } #avHome .av-dash-bar { padding: 7px 12px; } #avHome .av-dash-body { padding: 10px; gap: 8px; } #avHome .av-dash-top { gap: 8px; align-items: stretch; } #avHome .av-console { line-height: 1.45; padding: 9px 11px 8px; } #avHome .av-map { height: 100%; padding: 9px 10px; } #avHome .av-map svg { width: 100%; height: 128px; max-height: none; } #avHome .av-map-label { font-size: .55rem; } #avHome .av-tiles { gap: 8px; } #avHome .av-tile { padding: 9px 10px; gap: 5px; } #avHome .av-tile svg { width: 18px; height: 18px; } #avHome .av-dash-bot { gap: 8px; } #avHome .av-labs { padding: 9px 10px; } #avHome .av-labrow { gap: 4px; } #avHome .av-labrow svg { width: 16px; height: 16px; } #avHome .av-labrow span, #avHome .av-labrow small, #avHome .av-labrow b { font-size: .54rem; line-height: 1.25; } #avHome .av-donut { padding: 9px 10px; gap: 9px; } #avHome .av-donut svg { width: 46px; height: 46px; } #avHome .av-dash-hint { margin-top: 6px; } /* the alumni tiles, one notch smaller so the strip clears the fold */ #avHome .av-strip { padding: 13px 18px; } #avHome .av-marquee li { height: 48px; min-width: 104px; padding: 0 15px; font-size: .84rem; } #avHome .av-marquee li img { height: 26px; max-width: 118px; } @media (max-width: 991px) { /* below the two-column breakpoint there is no fold to fight, so the terminal goes back to a comfortable size */ #avHome .av-hero { padding: 26px 0 30px; } #avHome .av-map svg { height: auto; } #avHome .av-console { line-height: 1.6; font-size: .72rem; } } /* -------------------------------------------------------------------------- 28. FOLD HEADROOM (keep last in the file) The previous pass landed the strip 2px below the fold on a 734px viewport, which is no use to anyone on a shorter screen. These take another ~50px out of the terminal and tighten the hero rows so the strip clears comfortably. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-hero { padding: 16px 0 14px; } #avHome .av-hero-grid { row-gap: 12px; } #avHome .av-console { line-height: 1.38; padding: 7px 10px; } #avHome .av-map { padding: 7px 9px; } #avHome .av-map svg { height: 116px; } #avHome .av-tile { padding: 7px 9px; gap: 4px; } #avHome .av-labs { padding: 7px 9px; } #avHome .av-labrow { gap: 3px; } #avHome .av-labrow svg { width: 14px; height: 14px; } #avHome .av-labrow span, #avHome .av-labrow small, #avHome .av-labrow b { font-size: .5rem; line-height: 1.2; } #avHome .av-donut { padding: 7px 9px; gap: 8px; } #avHome .av-donut svg { width: 40px; height: 40px; } #avHome .av-dash-hint { margin-top: 5px; } #avHome .av-hstats { padding-top: 12px; } } /* -------------------------------------------------------------------------- 29. MOBILE HERO ORDER (keep last in the file) The stats and the strip sit before the terminal in the source now, which is the right reading order on desktop. Stacked on a phone it would push the terminal below the alumni logos, so the visual order is restored here. -------------------------------------------------------------------------- */ @media (max-width: 991px) { #avHome .av-hero-copy { order: 1; } #avHome .av-hero-dash { order: 2; } #avHome .av-hstats { order: 3; } #avHome .av-strip { order: 4; } } /* -------------------------------------------------------------------------- 30. HERO BALANCE (keep last in the file) The terminal was a wide rectangle and the copy column ran out of content halfway down, leaving a hole under the buttons. Two changes fix both: - the terminal gives up width, so it reads closer to a square and the layout stops feeling lopsided; - the five facts move back into the copy column as a two-column table directly under the buttons, filling that hole. The terminal spans both rows on the right. This is also shorter overall than the full-width stat row it replaces, so the alumni strip clears the fold by more than it did before. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } #avHome .av-hero-copy { grid-column: 1; grid-row: 1; } #avHome .av-hstats { grid-column: 1; grid-row: 2; align-self: start; } #avHome .av-hero-dash { grid-column: 2; grid-row: 1 / span 2; align-self: start; } #avHome .av-strip { grid-column: 1 / -1; grid-row: 3; } /* a narrower panel would squeeze the console, so the map gives up the room */ #avHome .av-dash-top { grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.66fr); } #avHome .av-map svg { height: 124px; } /* the facts, two even columns, ruled like a small table */ #avHome .av-hstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--av-line); } #avHome .av-hstat { padding: 12px 0 12px 20px; margin: 0; border-left: 1px solid var(--av-line); border-top: 0; align-items: center; } #avHome .av-hstat:nth-child(odd) { border-left: 0; padding-left: 0; } #avHome .av-hstat:nth-child(n+3) { border-top: 1px solid var(--av-line); } #avHome .av-hstat:nth-child(-n+2) { padding-top: 0; } #avHome .av-hstat:nth-last-child(-n+1) { padding-bottom: 0; } } /* -------------------------------------------------------------------------- 31. LAB ROW FIT + AUDIENCE CARD TRIM (keep last in the file) Six tool names across a 255px cell left each one 36px wide and the labels collided, so the row is three across over two lines and the donut cell is narrower. The audience cards were 557px tall with a 132px empty header and a ragged gap above each "Explore Path"; the header is halved, the type is tightened, and the titles get a two-line box so every card lines up. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-dash-bot { grid-template-columns: minmax(0, 1fr) 168px; } #avHome .av-labrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 4px; } #avHome .av-labrow > * { min-width: 0; } #avHome .av-labrow span, #avHome .av-labrow small, #avHome .av-labrow b { font-size: .52rem; line-height: 1.25; } } #avHome .av-aud-top { height: 84px; min-height: 0; } #avHome .av-aud-ico { width: 42px; height: 42px; } #avHome .av-aud-ico svg { width: 20px; height: 20px; } #avHome .av-aud-body { padding: 26px 20px 20px; } #avHome .av-aud .av-h3 { font-size: 1.04rem; line-height: 1.28; min-height: 2.56em; margin-bottom: 8px; } #avHome .av-aud-body > p { font-size: .89rem; line-height: 1.52; margin-bottom: 14px; } #avHome .av-aud-list { gap: 7px; margin-bottom: 14px; } #avHome .av-aud-list li { font-size: .85rem; line-height: 1.4; gap: 8px; } #avHome .av-aud-foot { padding-top: 12px; } #avHome .av-aud-foot .av-link { font-size: .88rem; } /* -------------------------------------------------------------------------- 32. SQUARE PANEL TRIM (keep last in the file) Making the panel square cost height: the tile captions started wrapping and the lab row went to two lines. These claw back the ~60px so the alumni strip still clears the fold on a short window. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-dash-bar { padding: 6px 12px; } #avHome .av-dash-body { padding: 9px; gap: 6px; } #avHome .av-tile { padding: 7px 8px; gap: 3px; } #avHome .av-tile small { font-size: .5rem; line-height: 1.25; letter-spacing: .08em; } #avHome .av-tile b { font-size: 1.18rem; line-height: 1.15; } #avHome .av-tile > span > span { font-size: .56rem; line-height: 1.25; } #avHome .av-labs { padding: 6px 8px; } #avHome .av-labrow { gap: 6px 4px; } #avHome .av-lab { gap: 3px; } #avHome .av-lab svg { width: 13px; height: 13px; } #avHome .av-lab span { font-size: .5rem; line-height: 1.2; } #avHome .av-donut { padding: 6px 8px; gap: 8px; } #avHome .av-dash-hint { margin-top: 4px; } #avHome .av-hero { padding: 14px 0 12px; } #avHome .av-strip { padding: 11px 16px; } #avHome .av-marquee li { height: 44px; } #avHome .av-marquee li img { height: 24px; } } /* -------------------------------------------------------------------------- 33. LAB ROW ON SMALL SCREENS (keep last in the file) An unscoped six-column rule in the appendix was beating the responsive one, so "Metasploit" ran 5px past its 46px cell on a phone. Three across here too. -------------------------------------------------------------------------- */ @media (max-width: 991px) { #avHome .av-labrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; } #avHome .av-labrow > * { min-width: 0; } #avHome .av-lab span { font-size: .58rem; line-height: 1.25; } } /* -------------------------------------------------------------------------- 34. CARD RHYTHM + HERO BASELINE (keep last in the file) The audience cards were long because each one carried a full sentence and a four-item list of different lengths, so no two cards lined up. The copy is trimmed and the paragraph now sits in a fixed two-line box, which makes the bullet lists and the "Explore Path" links start on the same line across all five. The hero stat table drops to the bottom of its cell so the left column ends level with the terminal instead of leaving a gap beneath it. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-hstats { align-self: end; } } #avHome .av-aud-body > p { min-height: 2.9em; margin-bottom: 12px; } #avHome .av-aud-list { gap: 6px; margin-bottom: 12px; } #avHome .av-aud-list li { font-size: .82rem; line-height: 1.35; } #avHome .av-aud-top { height: 76px; } #avHome .av-aud-body { padding: 24px 18px 18px; } #avHome .av-aud-foot { padding-top: 10px; } /* -------------------------------------------------------------------------- 35. STRIP BREATHING ROOM (keep last in the file) Only 12px separated the alumni strip from the stat table and the terminal above it, which read as congested. The gap is now 30px, paid for by trimming the hero padding, the panel padding and the logo tiles by the same amount, so the strip still clears the fold by the margin it had before. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-hero { padding: 10px 0 8px; } #avHome .av-strip { margin-top: 18px; } #avHome .av-dash-body { gap: 5px; } #avHome .av-tile { padding: 6px 8px; } #avHome .av-labs { padding: 5px 8px; } #avHome .av-donut { padding: 5px 8px; } #avHome .av-dash-hint { margin-top: 3px; } #avHome .av-marquee li { height: 42px; } #avHome .av-marquee li img { height: 23px; } } /* -------------------------------------------------------------------------- 36. HEADER BREATHING ROOM (keep last in the file) The hero started 10px under the navigation, which read as cramped. It now starts 26px down. The 16px is taken back out of the terminal - console leading, bar, body, tiles and lab paddings - so the alumni strip keeps the clearance it had below the fold. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-hero { padding: 26px 0 8px; } #avHome .av-dash-bar { padding: 5px 12px; } #avHome .av-dash-body { padding: 8px; gap: 5px; } #avHome .av-console { line-height: 1.3; padding: 6px 10px; } #avHome .av-map { padding: 6px 8px; } #avHome .av-map svg { height: 106px; } #avHome .av-tile { padding: 5px 8px; } #avHome .av-labs { padding: 4px 8px; } #avHome .av-donut { padding: 4px 8px; } } /* -------------------------------------------------------------------------- 37. MORE HEADER GAP (keep last in the file) 44px between the navigation and the top of the hero. The terminal is already as tight as it should go, so the space comes from taking the "hover the panel" caption out of the layout flow - it now floats in the gap under the panel, which is where it visually belongs anyway - and from a slightly shorter logo tile. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #avHome .av-hero { padding: 44px 0 8px; } #avHome .av-hero-dash { position: relative; } #avHome .av-dash-hint { position: absolute; left: 0; right: 0; bottom: -19px; margin: 0; pointer-events: none; } #avHome .av-strip { margin-top: 26px; padding: 9px 16px; } #avHome .av-marquee li { height: 40px; } #avHome .av-marquee li img { height: 22px; } } /* -------------------------------------------------------------------------- 38. MOBILE POLISH (keep last in the file) Two things a phone check turned up: - the theme gives .banner__form 30px of its own padding, so inside the enquiry card the fields sat 30px further in than the heading above them. Zeroed, scoped to this card only. - the "Explore Path" and "Explore Course" links were 22-23px tall, a pixel or two under the 24px minimum target size in WCAG 2.5.8. -------------------------------------------------------------------------- */ #avHome .av-form-card .banner__form { padding: 0; } #avHome a.av-link { display: inline-flex; align-items: center; min-height: 26px; } /* one more link under the 24px minimum: the feature-card headings are links */ #avHome .av-h3 > a { display: inline-flex; align-items: center; min-height: 24px; } /* -------------------------------------------------------------------------- 39. READABLE TERMINAL ON PHONES (keep last in the file) The desktop panel is small, so its labels were tuned right down - but those sizes were unscoped and followed onto phones, where the panel is full width and had 8.8-9.6px text in it. Restored to a readable size below 992px. -------------------------------------------------------------------------- */ @media (max-width: 991px) { #avHome .av-dash-status { font-size: .7rem; padding: 5px 9px; } #avHome .av-check .av-note { font-size: .72rem; } #avHome .av-lab span { font-size: .68rem; } #avHome .av-map-label { font-size: .66rem; } #avHome .av-tile small { font-size: .64rem; } #avHome .av-dash-hint { font-size: .68rem; } } /* the last few sub-10px labels on phones: card kickers and the panel captions */ @media (max-width: 991px) { #avHome .av-kicker { font-size: .74rem; } #avHome .av-tile > span > span { font-size: .68rem; } #avHome .av-labs > small { font-size: .68rem; } } /* the provider badge on the certification cards was squeezed to 8.8px by an earlier mobile-compaction rule; back to a readable size */ @media (max-width: 991px) { #avHome .av-badge { font-size: .7rem; } } /* at the larger size "Offensive + Defensive" no longer fits its row on a phone */ @media (max-width: 991px) { #avHome .av-cert-foot { flex-wrap: wrap; gap: 8px; } #avHome .av-badge { white-space: normal; max-width: 100%; } } /* -------------------------------------------------------------------------- 40. INDIA MAP COLOURS (keep last in the file) The dot matrix draws with currentColor, which inside the panel resolves to the page text colour - near-black on a near-black surface. The three layers get explicit terminal-palette fills instead. -------------------------------------------------------------------------- */ #avHome .av-map svg { color: var(--av-term-green-2); } #avHome .av-map-dots circle { fill: rgba(74,222,128,.28); } #avHome .av-map-nodes circle { fill: var(--av-term-green-2); } #avHome .av-map-labels text { fill: #8FA3B4; } /* -------------------------------------------------------------------------- 41. AUDIENCE CARDS v3 + ALUMNI LABEL (keep last in the file) The cards follow the supplied mockup: a photographic panel carrying the number and an overlay line, a round icon straddling the panel edge, then a centred title, one line of copy and a pill button. The photo slot is empty for now. Adding ... as the first child of .av-aud-top is all it takes - the scrim, the overlay text and the icon are already layered above it. Until then the panel keeps the dark grid it had, which the white overlay text reads on perfectly well. -------------------------------------------------------------------------- */ /* eyebrow with a rule either side */ #avHome .av-eyebrow--rule { display: flex; align-items: center; justify-content: center; gap: 16px; } #avHome .av-eyebrow--rule::before, #avHome .av-eyebrow--rule::after { content: ""; height: 1px; width: clamp(40px, 12vw, 120px); background: var(--av-line); flex: none; } /* --- the card --- */ #avHome .av-aud { overflow: hidden; text-align: center; } #avHome .av-aud-top { position: relative; height: 196px; min-height: 0; overflow: visible; } #avHome .av-aud-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; } /* keeps the overlay line legible whatever photograph goes behind it */ #avHome .av-aud-top::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,10,14,.58) 0%, rgba(6,10,14,.14) 52%, rgba(6,10,14,.42) 100%); } #avHome .av-aud-num { z-index: 2; } #avHome .av-aud-tag { position: absolute; z-index: 2; left: 18px; top: 54px; right: 34%; margin: 0; text-align: left; font-family: var(--av-sans); font-size: .8rem; font-weight: 700; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 1px 10px rgba(0,0,0,.4); } #avHome .av-aud-tag::after { content: ""; display: block; margin-top: 9px; width: 26px; height: 2px; background: var(--av-accent-bright); } #avHome .av-aud-ico { position: absolute; z-index: 3; left: 50%; bottom: -22px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--av-surface); border: 1px solid var(--av-line); box-shadow: 0 6px 18px -10px rgba(6,10,14,.5); display: flex; align-items: center; justify-content: center; color: var(--av-accent); } #avHome .av-aud-ico svg { width: 21px; height: 21px; } #avHome .av-aud-body { padding: 38px 20px 22px; display: flex; flex-direction: column; text-align: center; } #avHome .av-aud .av-h3 { min-height: 2.5em; margin: 0 0 6px; font-size: 1.1rem; line-height: 1.25; display: flex; align-items: center; justify-content: center; } #avHome .av-aud-body > p { min-height: 3em; margin: 0 0 18px; font-size: .92rem; line-height: 1.5; color: var(--av-text-2); } /* --- pill button --- */ #avHome .av-btn--pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: auto; padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--av-accent); background: transparent; color: var(--av-accent); font-weight: 700; font-size: .9rem; line-height: 1.2; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } #avHome .av-btn--pill svg { width: 15px; height: 15px; flex: none; } #avHome .av-btn--pill:hover, #avHome .av-btn--pill:focus-visible { background: var(--av-accent); border-color: var(--av-accent); color: #FFFFFF; } @media (max-width: 991px) { #avHome .av-aud-top { height: 172px; } #avHome .av-aud-tag { top: 48px; font-size: .74rem; right: 30%; } } @media (max-width: 575px) { #avHome .av-aud-top { height: 158px; } #avHome .av-aud-body { padding: 34px 16px 18px; } #avHome .av-aud .av-h3 { font-size: 1.02rem; } } /* -------------------------------------------------------------------------- "Our alumni work at" - lifted out of the background -------------------------------------------------------------------------- */ [data-avhome] { --av-chip: #E7F1EA; } [data-avhome][data-theme="dark"] { --av-chip: rgba(52,211,153,.13); } #avHome .av-strip > small { flex: none; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--av-chip); color: var(--av-accent); font-family: var(--av-mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; } @media (max-width: 767px) { #avHome .av-strip > small { padding: 7px 12px; font-size: .62rem; letter-spacing: .1em; } } /* -------------------------------------------------------------------------- 42. PILL FIT (keep last in the file) "Explore Cybersecurity" was one word too long for its pill at five across, so that card sat a line taller than the rest. A touch less type and padding puts every label on one line. -------------------------------------------------------------------------- */ #avHome .av-btn--pill { padding: 12px 12px; gap: 7px; font-size: .83rem; letter-spacing: -.005em; white-space: nowrap; } #avHome .av-btn--pill svg { width: 14px; height: 14px; } @media (max-width: 1199px) and (min-width: 992px) { #avHome .av-btn--pill { font-size: .78rem; padding: 11px 10px; } } /* the alumni chip was the last sub-10px label on a phone */ @media (max-width: 767px) { #avHome .av-strip > small { font-size: .66rem; } } /* -------------------------------------------------------------------------- 43. AUDIENCE CARD PHOTOGRAPHS (keep last in the file) The five photographs are pre-cropped to the panel's own ratio (822x392 for a 411x196 frame, so they are pin-sharp on a 2x screen and object-fit has nothing left to trim). Each subject sits to the right of centre, which is where the caption is not. The scrim gains a horizontal pass so the caption holds its contrast over a bright frame - the office window behind the fourth card, the glass wall behind the fifth - without dulling the side the face is on. -------------------------------------------------------------------------- */ #avHome .av-aud-photo { object-position: 50% 50%; background: var(--av-panel-2, #0E141A); } #avHome .av-aud-top::after { background: linear-gradient(90deg, rgba(6, 10, 14, .74) 0%, rgba(6, 10, 14, .48) 42%, rgba(6, 10, 14, .12) 70%, rgba(6, 10, 14, .24) 100%), linear-gradient(180deg, rgba(6, 10, 14, .40) 0%, rgba(6, 10, 14, .06) 46%, rgba(6, 10, 14, .34) 100%); } /* a hairline under the panel keeps the photograph from bleeding into the body of the card in dark mode, where both are dark */ #avHome .av-aud-top { border-bottom: 1px solid var(--av-line); } /* the round icon has to stay readable where it straddles the photograph */ #avHome .av-aud-ico { box-shadow: 0 6px 20px -8px rgba(6, 10, 14, .65); } /* on a phone the frame is shorter, so the subject is worth nudging up a touch to keep faces out of the bottom crop */ @media (max-width: 991px) { #avHome .av-aud-photo { object-position: 50% 44%; } } @media (max-width: 575px) { #avHome .av-aud-photo { object-position: 50% 42%; } } /* -------------------------------------------------------------------------- 44. PHOTOGRAPH FIT (keep last in the file) The panel is 219 x 196 on the desktop grid - all but square - so the first pass of photographs, cut to the wide shape the mockup suggested, would have lost its outer thirds to object-fit. They are recut to the panel's own ratio (480 x 440) with each subject placed to the right of the caption. The caption column narrows to match, so a face never sits under the type. -------------------------------------------------------------------------- */ #avHome .av-aud-tag { right: 40%; } #avHome .av-aud-photo { object-position: 50% 50%; } @media (max-width: 991px) { #avHome .av-aud-tag { right: 38%; } #avHome .av-aud-photo { object-position: 50% 50%; } } @media (max-width: 575px) { #avHome .av-aud-tag { right: 34%; top: 46px; font-size: .68rem; } #avHome .av-aud-photo { object-position: 50% 50%; } } /* -------------------------------------------------------------------------- 45. CAPTION FIT (keep last in the file) Each caption is written as three short lines with explicit breaks, so any extra wrap is a fault, not a style. At the panel's real width the longest line - SECURE SYSTEMS - needed 117px and had 114. The type comes down a notch and the letter-spacing loosens less, which buys the room back without pushing the column across the face behind it. -------------------------------------------------------------------------- */ #avHome .av-aud-tag { right: 36%; font-size: .75rem; letter-spacing: .05em; hyphens: none; } @media (max-width: 991px) { #avHome .av-aud-tag { right: 30%; font-size: .72rem; top: 50px; } } @media (max-width: 575px) { #avHome .av-aud-tag { left: 14px; right: 22%; font-size: .68rem; top: 44px; } } /* -------------------------------------------------------------------------- 46. ICON ON A DARK CARD (keep last in the file) In dark mode the round icon was filled with the same colour as the card behind it, so below the photograph it read as a hole rather than a badge. It gets a slightly lifted fill and an accent-tinted ring instead. -------------------------------------------------------------------------- */ [data-avhome][data-theme="dark"] #avHome .av-aud-ico { background: #141C25; border-color: rgba(52, 211, 153, .38); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .8); } /* -------------------------------------------------------------------------- 47. FIRST CARD LEADS (keep last in the file) Your mockup fills the first card's button and outlines the other four. I had read that as a hover state; it is in both versions you sent, so it is the design. The first pill goes solid and the other four keep their outline, so the row has one obvious place to start. The scrim also lightens. It was cut for photographs that had not been recropped yet; now that every subject sits clear of the caption it can give the picture back some of its light and still hold the type. -------------------------------------------------------------------------- */ #avHome .av-aud:first-child .av-btn--pill { background: var(--av-accent); border-color: var(--av-accent); color: #FFFFFF; } #avHome .av-aud:first-child .av-btn--pill:hover, #avHome .av-aud:first-child .av-btn--pill:focus-visible { background: var(--av-accent-bright); border-color: var(--av-accent-bright); color: #06120C; } #avHome .av-aud-top::after { background: linear-gradient(90deg, rgba(6, 10, 14, .62) 0%, rgba(6, 10, 14, .34) 44%, rgba(6, 10, 14, .06) 72%, rgba(6, 10, 14, .18) 100%), linear-gradient(180deg, rgba(6, 10, 14, .34) 0%, rgba(6, 10, 14, .04) 48%, rgba(6, 10, 14, .28) 100%); }