/* ========================================================================== Tech Ace Ltd — Design System Hand-crafted, production CSS. No framework, no CDN. 1. Tokens 2. Reset 3. Base type 4. Layout 5. Components 6. Sections 7. Motion 8. Responsive 9. Accessibility ========================================================================== */ /* 1. TOKENS ================================================================ */ :root { /* Brand surfaces — deep premium dark base */ --bg: #05070f; /* page background — near-black with subtle navy */ --bg-soft: #0a0f1f; /* alternating section band */ --surface: #0f1628; /* card / panel surface */ --surface-2: #161f37; /* raised surface / hover */ --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.14); /* Context fills — light-alpha overlays on dark */ --fill: rgba(255, 255, 255, 0.04); --fill-strong: rgba(255, 255, 255, 0.09); --glass-bg: rgba(20, 28, 52, 0.55); /* Accents — electric blue + cyan, brighter for dark surfaces */ --accent: #5b8cff; --accent-2: #22d3ee; /* bright cyan readable on dark */ --accent-3: #a78bfa; --grad: linear-gradient(120deg, #5b8cff 0%, #22d3ee 100%); --grad-soft: linear-gradient(120deg, rgba(91,140,255,.16), rgba(34,211,238,.12)); --glow: radial-gradient(60% 60% at 50% 0%, rgba(91,140,255,.22), transparent 70%); /* Text */ --ink: #f5f7ff; --ink-soft: #c7cee2; --muted: #8a93ad; --muted-2: #5d678a; /* Legacy "paper" tokens — kept for compatibility but mapped to dark */ --paper: #0a0f1f; --paper-ink: #f5f7ff; --paper-mut: #8a93ad; /* Type */ --font-head: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Fluid type scale (clamp: min, vw, max) */ --fs-display: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem); --fs-h1: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); --fs-h2: clamp(1.7rem, 1.2rem + 2.2vw, 2.85rem); --fs-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem); --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); --fs-body: 1.02rem; --fs-sm: 0.9rem; --fs-xs: 0.78rem; /* Spacing & radii */ --radius: 16px; --radius-lg: 24px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 14px 38px -18px rgba(0,0,0,.75); --shadow-2: 0 30px 80px -30px rgba(0,0,0,.85); --shadow-glow: 0 14px 50px -14px rgba(91,140,255,.55); --container: 1200px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --section-y: clamp(4rem, 9vw, 8rem); --ease: cubic-bezier(.22, .61, .36, 1); --header-h: 76px; /* Tell the browser this is a dark theme. Native form controls (the open * panel using the OS * default (often white). Without this rule the option text is invisible * (white-on-white) when the dropdown opens. */ .field select option, .field select optgroup { background-color: #0f1628; color: var(--ink); } .field select option:checked { background: linear-gradient(0deg, rgba(91,140,255,.35), rgba(91,140,255,.35)) #0f1628; color: var(--ink); } .form-note { font-size: var(--fs-xs); color: var(--muted); } .alert { padding: 1rem 1.2rem; border-radius: 12px; font-size: var(--fs-sm); } .alert-success { background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.35); color: #67e8f9; } .alert-error { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.32); color: #fca5a5; } /* Sticky mobile CTA */ .sticky-cta { display: none; } /* 7. MOTION ================================================================ */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .08s; } [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-reveal][data-delay="3"] { transition-delay: .24s; } [data-reveal][data-delay="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .float, .marquee__track { animation: none !important; } } /* 8. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; } .hero__visual { min-height: 340px; margin-top: 1rem; } .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .portfolio-grid, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .nav-menu { display: none; } .nav-toggle { display: grid; } .nav-actions .btn:not(.nav-cta) { display: none; } /* Mobile drawer */ .mobile-drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: 95; background: var(--bg); padding: 1.4rem var(--gutter) 6rem; overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--ease); border-top: 1px solid var(--line); } .nav-open .mobile-drawer { transform: translateX(0); } .grid-3, .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .portfolio-grid, .grid-4, .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-about { grid-column: 1 / -1; } .sticky-cta { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 90; gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: rgba(5, 7, 15, .88); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-top: 1px solid var(--line); } body { padding-bottom: 72px; } } /* Sticky aside (e.g. the title column of a 2-column "process / services" grid). Sticky only when there's actually a second column beside it — on tablet/mobile the grid collapses to one column and a sticky title would overlap the content scrolling beneath it. */ .sticky-aside { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; } @media (max-width: 860px) { .sticky-aside { position: static; top: auto; } } /* ---- RESPONSIVE AUDIT FIXES ---- */ /* Sane default for any "inline arrow" SVG inside a card/list-row pattern. Fixes the unsized-SVG bug where icon('arrow') balloons on narrow viewports. */ .card .flex > svg, .card .flex > .accent, .card a > svg.accent, svg.accent:not([class*="-svg"]) { width: 22px; height: 22px; flex: none; } /* Long words must not punch out of their container on narrow viewports. */ .page-hero h1, .hero h1, .display, .section-head h2 { overflow-wrap: break-word; word-wrap: break-word; } .lead, .page-hero .lead, .muted, .ci-value { overflow-wrap: break-word; word-wrap: break-word; } /* On tablet/mobile, CTA pairs stack vertically (one button per row) and each takes the full width of its container. Lone CTAs keep their natural width so a single button doesn't unnecessarily stretch edge-to-edge. Exception: .sticky-cta — that's the fixed bottom action bar; stacking it would double its height and steal too much mobile viewport. */ @media (max-width: 860px) { .hero__cta, .cta-block .cta-row, .mobile-cta { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; } .hero__cta .btn, .cta-block .cta-row .btn, .mobile-cta .btn { width: 100%; min-width: 0; } .hero__cta .btn:only-child, .cta-block .cta-row .btn:only-child, .mobile-cta .btn:only-child { align-self: center; width: auto; } /* Sticky bottom bar stays horizontal — two compact pills side by side. */ .sticky-cta { display: flex; flex-wrap: wrap; gap: .7rem; } .sticky-cta .btn { flex: 1 1 0; min-width: 0; } /* Long labels can wrap inside the button rather than overflow it. */ .btn { white-space: normal; text-align: center; line-height: 1.15; } } /* Header CTA: avoid clipping at very narrow widths. */ @media (max-width: 480px) { .nav-cta { --pad-y: .6rem; --pad-x: 1rem; font-size: .9rem; } .nav-cta svg { display: none; } } /* Map "Open in Google Maps" pill: never wider than the map. */ .map-embed__link { max-width: calc(100% - 24px); } @media (max-width: 480px) { .map-embed__link { right: 10px; bottom: 10px; padding: .5rem .75rem; font-size: .76rem; } .map-embed__link svg { width: 13px; height: 13px; } } /* Mobile drawer accordion (hidden on desktop) */ .mobile-drawer { display: none; } @media (max-width: 860px) { .mobile-drawer { display: block; } } .m-group { border-bottom: 1px solid var(--line); } .m-group > a, .m-acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; background: none; border: 0; color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; cursor: pointer; } .m-acc-trigger .chev { width: 18px; height: 18px; transition: transform .3s; color: var(--accent-2); } .m-group.open .m-acc-trigger .chev { transform: rotate(180deg); } .m-acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .m-group.open .m-acc-panel { } .m-acc-panel a { display: block; padding: .55rem 0 .55rem 1rem; color: var(--ink-soft); font-size: .95rem; } .m-acc-panel a:hover { color: var(--accent-2); } .mobile-cta { margin-top: 1.6rem; display: grid; gap: .7rem; } /* --- INNER PAGE HERO --- */ .page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; overflow: hidden; } .page-hero__inner { max-width: 860px; margin-inline: auto; } .page-hero h1 { font-size: var(--fs-h1); } .hero-stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; justify-content: center; margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); } /* --- SPLIT (two-column value) --- */ .split { align-items: center; gap: clamp(2rem, 5vw, 4rem); } .split--rev > div:first-child { order: 2; } @media (max-width: 860px) { .split--rev > div:first-child { order: 0; } } .check-list { display: grid; gap: .8rem; } .check-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); font-size: .98rem; } .check-list svg { width: 22px; height: 22px; color: var(--accent-2); flex: none; margin-top: 2px; padding: 3px; background: var(--grad-soft); border-radius: 7px; } .media-panel { aspect-ratio: 4/3; display: grid; place-items: center; gap: 1rem; color: rgba(255,255,255,.16); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-2), #0a1326); } /* Portrait variant — used where the surrounding text column is tall and a * landscape 4/3 image looks lost. Stretches the wrapper column to match * the text column's height, then lets the image fill that full height * via object-fit: cover. Result: a tall, prominent visual that visually * balances long-form copy on the other side. */ .split > div:has(.media-panel--portrait) { align-self: stretch; display: flex; min-height: 560px; } .media-panel--portrait { flex: 1; aspect-ratio: auto; min-height: 560px; max-height: none; } @media (max-width: 860px) { .split > div:has(.media-panel--portrait), .media-panel--portrait { min-height: 420px; } } /* ========================================================================== .infra-figure — ULTRA-MODERN photo treatment for the IT Infrastructure Services hero portrait. Layered CSS-only effects: · rotating conic-gradient halo border · pulsing outer glow · animated vertical scan-line (data-center vibe) · floating glass data-pills (top-left LIVE badge, bottom-right meta) · futuristic corner brackets · saturation + zoom on hover ========================================================================== */ @property --infra-angle { syntax: ''; initial-value: 0deg; inherits: false; } .infra-figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); isolation: isolate; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(91, 140, 255, .12); } /* (1) Rotating conic-gradient halo — sits just outside the rounded frame */ .infra-figure::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient( from var(--infra-angle), rgba(91, 140, 255, 0) 0%, #5b8cff 18%, #22d3ee 38%, #a78bfa 58%, rgba(91, 140, 255, 0) 78% ); filter: blur(10px); opacity: .75; animation: infraHaloSpin 9s linear infinite; } @keyframes infraHaloSpin { to { --infra-angle: 360deg; } } /* (2) Pulsing outer glow — separate from halo so the two layer richly */ .infra-figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 50px -8px rgba(34, 211, 238, .55), 0 0 100px -20px rgba(91, 140, 255, .45); animation: infraGlowPulse 4.5s ease-in-out infinite; } @keyframes infraGlowPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* (3) Image — subtle initial saturation, smooth zoom on hover */ .infra-figure img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.12) contrast(1.05); transition: transform .9s var(--ease), filter .5s var(--ease); } .infra-figure:hover img { transform: scale(1.05); filter: saturate(1.3) contrast(1.1); } /* (4) Floating LIVE status pill — top-left */ .infra-figure__live { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(5, 7, 15, .72); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(34, 211, 238, .4); box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .55); font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--ink); animation: infraFloatA 6.5s ease-in-out infinite; } .infra-figure__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px #22d3ee, 0 0 24px rgba(34, 211, 238, .6); animation: infraDotPulse 1.6s ease-in-out infinite; } @keyframes infraDotPulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes infraFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* (5) Bottom-right meta pill */ .infra-figure__meta { position: absolute; bottom: 18px; right: 18px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; padding: .65rem 1rem; border-radius: 14px; background: rgba(5, 7, 15, .78); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .65); animation: infraFloatB 7.5s ease-in-out infinite; } .infra-figure__meta-label { font-family: var(--font-head); font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); } .infra-figure__meta-sub { font-family: var(--font-head); font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); } @keyframes infraFloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* (6) Futuristic corner brackets */ .infra-figure__bracket { position: absolute; width: 32px; height: 32px; z-index: 2; pointer-events: none; border: 1.5px solid var(--accent-2); opacity: .85; box-shadow: 0 0 14px rgba(34, 211, 238, .55); } .infra-figure__bracket--tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; } .infra-figure__bracket--tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; } .infra-figure__bracket--bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; } .infra-figure__bracket--br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; } /* (7) Animated horizontal scan-line — sweeps top → bottom */ .infra-figure__scan { position: absolute; left: 0; right: 0; height: 90px; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, transparent, rgba(34, 211, 238, .12) 35%, rgba(34, 211, 238, .3) 50%, rgba(34, 211, 238, .12) 65%, transparent ); mix-blend-mode: screen; animation: infraScan 6s ease-in-out infinite; } @keyframes infraScan { 0% { top: -90px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Honor reduced-motion preferences — keep static look, kill all loops */ @media (prefers-reduced-motion: reduce) { .infra-figure::before, .infra-figure::after, .infra-figure__live, .infra-figure__live-dot, .infra-figure__meta, .infra-figure__scan, .infra-figure img { animation: none !important; transition: none !important; } .infra-figure__scan { display: none; } } /* Mobile tuning — keep effects on but slightly smaller */ @media (max-width: 600px) { .infra-figure__live { font-size: .6rem; padding: .45rem .7rem; top: 12px; left: 12px; } .infra-figure__meta { padding: .5rem .75rem; bottom: 12px; right: 12px; } .infra-figure__meta-label { font-size: .72rem; } .infra-figure__meta-sub { font-size: .52rem; } .infra-figure__bracket { width: 22px; height: 22px; } } .media-panel svg { width: 64px; height: 64px; } .media-panel span { font-family: var(--font-head); color: var(--muted); font-size: .9rem; } /* Royalty-free section photos: cover-fill their placeholder containers */ .media-panel--photo { margin: 0; padding: 0; overflow: hidden; } .media-panel img, .project__media img, .case-strip__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-panel img { border-radius: var(--radius-lg); } /* Anchor cover-cropped imagery to the top. For full-page website screenshots (portfolio) this keeps the recognisable header/hero in frame instead of cropping to the middle; for landscape photos it's visually neutral. */ .project__media img, .case-strip__media img { object-position: top center; } /* --- STEP ROW (compact process) --- */ .step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.3rem; position: relative; transition: transform .35s var(--ease), border-color .35s; } .step-card:hover { transform: translateY(-5px); border-color: var(--line-2); } .step-index { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .step-card h4 { margin: .6rem 0 .4rem; font-size: 1.05rem; } @media (max-width: 860px) { .step-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .step-row { grid-template-columns: 1fr; } } /* --- STAT BAND --- */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: clamp(1.6rem, 4vw, 2.6rem); } .stat-band .num { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); } @media (max-width: 700px) { .stat-band { grid-template-columns: 1fr 1fr; gap: 1.6rem; } } /* --- CASE STRIP --- */ .case-strip { display: grid; grid-template-columns: 1fr 1.2fr; overflow: hidden; } .case-strip__media { background: linear-gradient(160deg, var(--surface-2), #0a1326); display: grid; place-items: center; min-height: 240px; } .case-strip__media .ph { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: rgba(255,255,255,.16); padding: 1rem; text-align: center; } .case-strip__body { padding: clamp(1.6rem, 4vw, 2.8rem); } .case-strip__result { color: var(--accent-2); font-family: var(--font-head); display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; } .case-strip__result svg { width: 20px; height: 20px; } @media (max-width: 760px) { .case-strip { grid-template-columns: 1fr; } } /* --- CONTACT --- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); } .contact-info-list { display: grid; gap: 1.2rem; margin-top: 1.5rem; } .contact-info-list li { display: flex; gap: 1rem; align-items: flex-start; } .contact-info-list .icon-chip { width: 46px; height: 46px; margin: 0; flex: none; } .contact-info-list .ci-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .contact-info-list .ci-value { color: var(--ink); font-family: var(--font-head); } .contact-info-list a.ci-value:hover { color: var(--accent-2); } .map-embed { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); margin-top: 1.5rem; line-height: 0; box-shadow: 0 22px 50px -26px rgba(0, 0, 0, .7); } .map-embed iframe { width: 100%; height: 300px; border: 0; display: block; filter: grayscale(.2) contrast(1.02); transition: filter .4s var(--ease); } .map-embed:hover iframe { filter: grayscale(0) contrast(1.02); } .map-embed__link { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; line-height: 1; padding: .55rem .9rem; border-radius: 999px; background: rgba(7, 11, 22, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .82rem; text-decoration: none; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .55); transition: transform .25s var(--ease), background .25s var(--ease); } .map-embed__link:hover { transform: translateY(-2px); background: var(--accent); } .map-embed__link svg { width: 15px; height: 15px; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } /* --- VALUES / ABOUT --- */ .value-card { text-align: left; } .value-card .num { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--accent-2); } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } .team-card { text-align: center; } .team-avatar { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 1rem; background: var(--grad); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; color: #06122e; } @media (max-width: 860px) { .team-grid { grid-template-columns: 1fr 1fr; } } /* --- TESTIMONIAL WALL --- */ .review-wall { columns: 3; column-gap: 1.4rem; } .review-card { break-inside: avoid; margin-bottom: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; } .review-card .stars { font-size: .9rem; } .review-card p { color: var(--ink-soft); margin: .8rem 0 1.2rem; } @media (max-width: 980px) { .review-wall { columns: 2; } } @media (max-width: 640px) { .review-wall { columns: 1; } } /* --- PROSE (terms, long-form) --- */ .prose { max-width: 760px; } .prose h2 { font-size: var(--fs-h3); margin: 2.4rem 0 .8rem; } .prose h3 { font-size: var(--fs-h4); margin: 1.8rem 0 .6rem; } .prose p, .prose li { color: var(--ink-soft); margin-bottom: 1rem; } .prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1rem; } .prose li { margin-bottom: .5rem; } .prose a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; } .prose strong { color: var(--ink); } .toc { position: sticky; top: calc(var(--header-h) + 2rem); } .toc ul { list-style: none; padding: 0; display: grid; gap: .5rem; } .toc a { color: var(--muted); font-size: .9rem; } .toc a:hover { color: var(--accent-2); } .legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; } @media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } .toc { position: static; } } /* 9. UTILITIES ============================================================= */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--accent); color: #06122e; padding: .7rem 1.2rem; border-radius: 0 0 10px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ========================================================================== 10. ULTRA-MODERN ENHANCEMENT LAYER Premium atmosphere, motion and depth layered over the base system. ========================================================================== */ :root { --ease-spring: cubic-bezier(.34, 1.4, .5, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* --- Selection, focus & custom scrollbar --- */ ::selection { background: rgba(79,124,255,.22); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(79,124,255,.18); border-radius: 6px; } html { scrollbar-width: thin; scrollbar-color: rgba(91,140,255,.45) transparent; } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 99px; border: 3px solid var(--bg); box-shadow: 0 0 12px rgba(91,140,255,.35); } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7da3ff, #67e8f9); } /* --- Atmospheric background: drifting aurora mesh + fine grain --- */ body::before { content: ""; position: fixed; inset: -10%; z-index: -3; pointer-events: none; background: radial-gradient(48% 44% at 8% 4%, rgba(91,140,255,.32), transparent 70%), radial-gradient(42% 40% at 94% 0%, rgba(34,211,238,.24), transparent 70%), radial-gradient(50% 50% at 82% 96%, rgba(167,139,250,.22), transparent 72%), radial-gradient(38% 36% at 14% 92%, rgba(34,211,238,.16), transparent 72%); animation: auroraDrift 26s ease-in-out infinite alternate; filter: saturate(125%); } body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } @keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.08); } 100% { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); } } /* Animated connectivity network (canvas injected by JS) — sits over the aurora wash, behind all content. Evokes the brand's connectivity motif. */ .bg-net { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* --- Typography polish --- */ h1, h2, h3, h4, .display { text-wrap: balance; } p, .lead { text-wrap: pretty; } .gradient-text { background-size: 220% auto; animation: gradientShift 9s ease-in-out infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- Premium buttons: animated gradient + shine sweep --- */ .btn-primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #4f7cff, #22d3ee, #4f7cff); background-size: 220% auto; transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out), background-position .7s var(--ease-out); } .btn-primary:hover { background-position: 100% center; } .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-130%); transition: transform .8s var(--ease-out); } .btn-primary:hover::after { transform: translateX(130%); } .btn-primary:active { transform: translateY(0) scale(.98); } .btn-ghost { transition: transform .3s var(--ease-spring), background .3s, border-color .3s; } /* --- Depth on cards: spring lift + colored glow + lively chip --- */ .card, .step-card, .review-card, .contact-card, .project { transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-out), border-color .4s, background .4s; will-change: transform; } .card:hover, .step-card:hover, .review-card:hover, .contact-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px -26px rgba(79,124,255,.4), var(--shadow-1); border-color: rgba(79,124,255,.35); } .project:hover { box-shadow: 0 30px 60px -26px rgba(79,124,255,.45); } .icon-chip { transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out); } .card:hover .icon-chip, .feature:hover .icon-chip { transform: translateY(-3px) scale(1.06) rotate(-3deg); box-shadow: 0 10px 26px -10px rgba(34,211,238,.5); } /* --- Glass: richer blur + saturation --- */ .glass { backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%); } /* --- Sticky shrinking header --- */ .nav { transition: height .35s var(--ease-out); } .brand__logo { transition: height .35s var(--ease-out); } .site-header { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background .3s var(--ease), border-color .3s, box-shadow .35s var(--ease-out); } .site-header.scrolled { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 44px -24px rgba(8,12,28,.75); } .site-header.scrolled .nav { height: 58px; } .site-header.scrolled .brand__logo { height: 31px; } .site-header.scrolled .nav-cta { --pad-y: .45rem; } /* --- Animated nav underline (dark header) --- */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .34rem; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease-out); } .nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); } /* --- Eyebrow: subtle gradient chip --- */ .eyebrow { padding: .35rem .8rem; border-radius: var(--radius-pill); background: var(--grad-soft); border: 1px solid var(--line); } .eyebrow::before { display: none; } .section-head:not(.center) .eyebrow { margin-left: 0; } /* --- Hero: glow blob behind floating visual --- */ .hero__visual { position: relative; } .hero__visual::before { content: ""; position: absolute; inset: -12% -8% -8% -8%; z-index: -1; pointer-events: none; background: radial-gradient(circle at 62% 42%, rgba(79,124,255,.30), rgba(34,211,238,.16) 45%, transparent 68%); filter: blur(36px); } .hero-card { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } /* --- Section divider sheen on bg-soft sections --- */ .section[style*="bg-soft"] { position: relative; } /* --- Scroll progress bar (element injected by JS) --- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px rgba(79,124,255,.65); transition: width .12s linear; } /* --- Filter buttons: smoother + lift --- */ .filter-btn { transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease-spring); } .filter-btn:hover { transform: translateY(-2px); } .filter-btn.active { box-shadow: var(--shadow-glow); } /* --- Links / list arrows --- */ .link-arrow:hover svg { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .gradient-text { animation: none; } /* Keep the atmospheric backdrop visible — just stop its drift. */ body::before { animation: none; } .btn-primary::after { display: none; } .card, .step-card, .review-card, .contact-card, .project, .icon-chip, .filter-btn { transition: none; } } .divider { height: 1px; background: var(--line); border: 0; } .muted { color: var(--muted); } .accent { color: var(--accent-2); } .relative { position: relative; } /* --- Hero headline: typewriter / keystroke reveal --- */ .hero h1.typing { opacity: 1; transform: none; transition: none; } .hero h1 .word { display: inline-block; white-space: nowrap; } /* word + punctuation never break apart */ .hero h1 .ch { display: inline-block; } .hero h1.typing .ch { visibility: hidden; } /* keeps layout stable, no reflow */ .hero h1.typing .ch.is-on { visibility: visible; } /* letter "typed" in */ .type-caret { display: inline-block; width: .07em; height: .92em; vertical-align: -.08em; margin: 0 .03em; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(79,124,255,.7); animation: caretBlink 1.05s steps(1, end) infinite; } .hero h1.typed .type-caret { animation: caretBlink 1.05s steps(1, end) infinite; } @keyframes caretBlink { 50% { opacity: 0; } } /* keep the gradient word coloured once its letters are split */ .gradient-text .ch { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ========================================================================== 11. HERO PRODUCT MOCKUP — live growth / SEO dashboard ========================================================================== */ .hero__visual { position: relative; width: min(100%, 430px); margin-inline: auto; min-height: 0; } .hero-panel { position: relative; width: 100%; z-index: 1; background: linear-gradient(165deg, rgba(28, 40, 75, .85), rgba(12, 18, 36, .85)); border: 1px solid rgba(255,255,255,.10); border-radius: 22px; box-shadow: 0 50px 110px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(91,140,255,.08) inset, 0 1px 0 rgba(255,255,255,.08) inset; -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); overflow: hidden; } .hero-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 80% at 0% 0%, rgba(91,140,255,.18), transparent 55%); } .hero-panel__bar { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); position: relative; } .hero-dots { display: inline-flex; gap: 5px; } .hero-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); } .hero-dots i:nth-child(1) { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,.6); } .hero-dots i:nth-child(2) { background: #febc2e; box-shadow: 0 0 8px rgba(254,188,46,.55); } .hero-dots i:nth-child(3) { background: #28c840; box-shadow: 0 0 8px rgba(40,200,64,.55); } .hero-url { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-head); font-size: .72rem; color: var(--ink-soft); background: rgba(255,255,255,.06); padding: .26rem .65rem; border-radius: 99px; border: 1px solid rgba(255,255,255,.10); } .hero-url .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; } .hero-live { margin-left: auto; font-size: .68rem; font-weight: 600; font-family: var(--font-head); color: #4ade80; letter-spacing: .02em; } .hero-panel__body { padding: 1.15rem 1.2rem 1.3rem; position: relative; } .hero-metric { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .hero-metric__label { font-family: var(--font-head); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .hero-metric__value { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: var(--ink); line-height: 1.1; margin-top: .25rem; } .hero-trend { font-size: .8rem; font-weight: 600; color: #4ade80; margin-left: .35rem; } .hero-range { flex: none; font-size: .68rem; color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); padding: .26rem .55rem; border-radius: 99px; } .hero-bars { display: flex; align-items: flex-end; gap: 8px; height: 158px; margin: 1.1rem 0 1.3rem; } .hero-bars span { flex: 1; height: var(--h); min-height: 8px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #38d6ee, #5b8cff); box-shadow: 0 0 14px rgba(91,140,255,.18); } .hero-bars span:last-child { background: linear-gradient(180deg, #22d3ee, #5b8cff); box-shadow: 0 10px 22px -6px rgba(34,211,238,.55), 0 0 22px rgba(34,211,238,.45); } .hero-statlets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; } .hero-statlet { text-align: center; padding: .6rem .4rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .hero-statlet strong { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); } .hero-statlet span { font-size: .64rem; color: var(--muted); } /* Floating glass mini-cards */ .hero-mini { position: absolute; display: flex; align-items: center; gap: .65rem; z-index: 2; padding: .65rem .8rem; border-radius: 16px; background: rgba(20, 28, 52, .65); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 28px 60px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(91,140,255,.08) inset; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); } .hero-mini--rank { left: -30px; top: -24px; } .hero-mini--vitals { right: -30px; bottom: -24px; } .hero-mini__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-soft); color: var(--accent-2); flex: none; } .hero-mini__icon svg { width: 18px; height: 18px; } .hero-mini__label { font-size: .68rem; color: var(--muted); } .hero-mini__value { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: .3rem; line-height: 1.15; } .hero-mini__value--lg { font-size: 1.5rem; } .hero-up { color: #4ade80; font-size: .8rem; text-shadow: 0 0 10px rgba(74,222,128,.5); } .hero-gauge { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); } .hero-gauge__track { fill: none; stroke: var(--line-2); stroke-width: 4; } .hero-gauge__val { fill: none; stroke: url(#hcGauge); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; } @media (max-width: 1024px) { .hero-mini--rank { left: -14px; top: -18px; } .hero-mini--vitals { right: -14px; bottom: -18px; } } /* ========================================================================== 12. ULTRA-PREMIUM DARK POLISH Glassmorphic cards, animated halo borders, glowing pills, depth gradients. ========================================================================== */ /* --- Page surfaces: cards become layered glass with an inner highlight --- */ .card, .step-card, .review-card, .contact-card, .greview { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), linear-gradient(160deg, rgba(22, 31, 55, .85), rgba(12, 18, 36, .85)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -36px rgba(0,0,0,.7); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } /* --- Conic gradient halo border that lights up on hover. The base .card has overflow:hidden; we lift it here so the halo can bleed beyond the card edge for a true glowing rim. The ::before glow stays clipped by its own inset:0 + border-radius:inherit. --- */ .card, .step-card, .greview, .contact-card { position: relative; isolation: isolate; overflow: visible; } .card::after, .step-card::after, .greview::after, .contact-card::after { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; background: conic-gradient(from 140deg at 50% 50%, transparent 0deg, rgba(91,140,255,.6) 60deg, rgba(34,211,238,.55) 130deg, rgba(167,139,250,.5) 200deg, transparent 280deg); opacity: 0; transition: opacity .55s var(--ease-out); filter: blur(2px); } .card:hover::after, .step-card:hover::after, .greview:hover::after, .contact-card:hover::after { opacity: .7; } /* The inner "soft" gradient (already declared at .card::before) brighter on dark */ .card::before { background: radial-gradient(120% 90% at 0% 0%, rgba(91,140,255,.10), transparent 55%); } /* --- Icon chip: glow ring + brighter gradient on dark --- */ .icon-chip { background: radial-gradient(120% 90% at 0% 0%, rgba(91,140,255,.32), rgba(34,211,238,.18) 60%, transparent 90%), rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: #c8f0ff; box-shadow: 0 0 0 1px rgba(91,140,255,.10) inset, 0 12px 26px -16px rgba(91,140,255,.55); } /* --- Eyebrow chip: subtle gradient border + soft inner glow --- */ .eyebrow { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), radial-gradient(80% 100% at 0% 0%, rgba(91,140,255,.18), transparent 65%); border: 1px solid rgba(255,255,255,.10); color: #67e8f9; text-shadow: 0 0 14px rgba(34,211,238,.35); } /* --- Hero pill: live "presence" indicator --- */ .pill { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), radial-gradient(80% 100% at 100% 0%, rgba(34,211,238,.16), transparent 65%); border: 1px solid rgba(255,255,255,.12); color: var(--ink-soft); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 30px -20px rgba(0,0,0,.7); } .pill .dot { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18), 0 0 14px rgba(74,222,128,.7); animation: pillPulse 2.4s ease-in-out infinite; } @keyframes pillPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(74,222,128,.18), 0 0 14px rgba(74,222,128,.7); } 50% { box-shadow: 0 0 0 7px rgba(74,222,128,.05), 0 0 22px rgba(74,222,128,.9); } } /* --- Premium primary button: ambient outer glow that pulses subtly --- */ .btn-primary { color: #06122e; box-shadow: 0 14px 50px -10px rgba(91,140,255,.55), 0 0 0 1px rgba(255,255,255,.18) inset; } .btn-primary:hover { box-shadow: 0 22px 70px -10px rgba(34,211,238,.7), 0 0 0 1px rgba(255,255,255,.28) inset; } /* --- Ghost button: refined glassy on dark --- */ .btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--ink); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); } .btn-ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(91,140,255,.55); box-shadow: 0 14px 40px -16px rgba(91,140,255,.45); } /* --- Brand mark / nav-cta glow --- */ .brand .mark { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 14px 34px -10px rgba(91,140,255,.7); } /* --- Filter buttons: glass on dark --- */ .filter-btn { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); color: var(--ink-soft); } .filter-btn:hover { background: rgba(255,255,255,.06); color: var(--ink); } .filter-btn.active { background: var(--grad); color: #06122e; border-color: transparent; box-shadow: 0 14px 40px -10px rgba(91,140,255,.55); } /* --- Project card: gradient border halo on hover (replaces flat hover) --- */ .project { background: linear-gradient(160deg, #1a2444, #0a1226); border: 1px solid rgba(255,255,255,.07); } .project::after { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(140deg, rgba(91,140,255,.7), rgba(34,211,238,.6) 50%, rgba(167,139,250,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease-out); } .project:hover::after, .project:focus-visible::after { opacity: 1; } /* --- Service / feature card icon-chip: ambient color shift on hover --- */ .card:hover .icon-chip { background: radial-gradient(120% 90% at 0% 0%, rgba(34,211,238,.4), rgba(91,140,255,.22) 60%, transparent 90%), rgba(255,255,255,.05); color: #ffffff; } /* --- Timeline: live gradient rail + glowing numbers --- */ .timeline::before { background: linear-gradient(to bottom, var(--accent), var(--accent-2) 50%, transparent); opacity: .55; box-shadow: 0 0 12px rgba(91,140,255,.3); } .tl-num { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: var(--ink); box-shadow: 0 0 0 4px rgba(91,140,255,.04), inset 0 1px 0 rgba(255,255,255,.06); } .tl-step:hover .tl-num { background: var(--grad); color: #06122e; border-color: transparent; box-shadow: 0 16px 38px -12px rgba(91,140,255,.65); } /* --- Google reviews summary glass --- */ .greviews-summary { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), linear-gradient(160deg, rgba(22, 31, 55, .9), rgba(10, 16, 32, .9)); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 70px -32px rgba(0,0,0,.7), 0 0 0 1px rgba(91,140,255,.06) inset; } .greviews-summary__num { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gstars { color: #fcd34d; text-shadow: 0 0 12px rgba(252,211,77,.45); } /* --- FAQ: subtle hover lift + neat divider --- */ .faq-item { border-bottom: 1px solid rgba(255,255,255,.08); } .faq-q { color: var(--ink); } .faq-q:hover { color: var(--accent-2); } /* --- Marquee items: brighter on dark --- */ .marquee__item { color: var(--ink-soft); } .marquee__check { box-shadow: 0 6px 18px -4px rgba(91,140,255,.6), inset 0 1px 0 rgba(255,255,255,.5); } /* --- Newsletter input on dark --- */ .newsletter input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: var(--ink); } .newsletter input::placeholder { color: var(--muted); } .newsletter input:focus { outline: none; border-color: var(--accent); background: rgba(91,140,255,.10); box-shadow: 0 0 0 4px rgba(91,140,255,.14); } /* --- Footer bottom hairline pop --- */ .site-footer { border-top: 1px solid rgba(255,255,255,.06); position: relative; } .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(91,140,255,.45) 28%, rgba(34,211,238,.45) 72%, transparent); opacity: .65; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.06); } /* --- Mobile drawer: SOLID opaque background. Why solid (not glass): the drawer is nested inside .site-header, which has its own backdrop-filter. Mobile Chrome/Android can fail to composite a second backdrop-filter inside a parent that already has one, leaving the drawer transparent so hero content bleeds through. A solid background color is bullet-proof across every browser. `isolation:isolate` guarantees its own stacking context so nothing under it can bleed through. --- */ .mobile-drawer { background-color: #06091a; background-image: radial-gradient(80% 60% at 0% 0%, rgba(91,140,255,.10), transparent 60%), radial-gradient(70% 50% at 100% 100%, rgba(34,211,238,.08), transparent 60%); isolation: isolate; z-index: 99; /* below header bar (100) but above all body content */ backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-toggle { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .nav-toggle:hover { background: rgba(255,255,255,.09); } /* --- Background grid pattern: brighter lines on dark --- */ .bg-grid::before { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); } /* --- Hero typewriter caret retains gradient glow on dark --- */ .type-caret { box-shadow: 0 0 18px rgba(91,140,255,.85), 0 0 32px rgba(34,211,238,.45); } /* --- Display headline: shimmer wash on dark for premium feel --- */ .display { color: var(--ink); } .display .gradient-text { filter: drop-shadow(0 8px 22px rgba(91,140,255,.35)); } /* --- Stat numbers: subtle gradient sheen --- */ .stat .num { background: linear-gradient(180deg, #ffffff, #cdd6f0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .stat .num .gradient-text { -webkit-text-fill-color: transparent; } /* --- Project overlay slightly cleaner on the darker base --- */ .project__media { background: linear-gradient(160deg, #1a2444, #060a18); } .project__overlay { background: linear-gradient(180deg, rgba(2, 4, 12, .15) 0%, rgba(2, 4, 12, .70) 45%, rgba(2, 4, 12, .96) 100%); } /* --- Case strip / media-panel placeholders --- */ .case-strip__media, .media-panel { background: linear-gradient(160deg, #1a2444, #060a18); } /* --- Map embed: dark mode tint --- */ .map-embed iframe { filter: grayscale(.35) contrast(1.05) brightness(.9) invert(.88) hue-rotate(180deg); } .map-embed:hover iframe { filter: grayscale(.15) contrast(1.05) brightness(.95) invert(.88) hue-rotate(180deg); } /* --- Reduced motion: tame the new effects --- */ @media (prefers-reduced-motion: reduce) { .pill .dot { animation: none; } .card::after, .step-card::after, .greview::after, .contact-card::after { transition: none; } } /* ========================================================================== IT INFRASTRUCTURE — Site-wide backdrop animation Fixed behind every page; pointer-events:none so it never blocks input. ========================================================================== */ .infra-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; /* Sit above body bg but below content (which is z-index 0+). */ } .infra-bg__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(91,140,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 90%); mask-image: radial-gradient(120% 90% at 50% 50%, #000 40%, transparent 90%); opacity: .55; animation: infraGridDrift 60s linear infinite; } @keyframes infraGridDrift { to { background-position: 64px 64px, 64px 64px; } } .infra-bg__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; } .infra-bg__nodes circle { animation: infraPulse 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .infra-bg__nodes circle:nth-child(3n) { animation-duration: 5.4s; animation-delay: -1.2s; } .infra-bg__nodes circle:nth-child(3n+1) { animation-duration: 6.2s; animation-delay: -2.4s; } @keyframes infraPulse { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .8; transform: scale(1.15); } } /* Floating server-rack silhouettes — pure CSS, no images */ .infra-bg__rack { position: absolute; width: 78px; height: 110px; border-radius: 10px; background: linear-gradient(180deg, rgba(15,22,40,.55), rgba(10,15,31,.35)); border: 1px solid rgba(91,140,255,.22); box-shadow: 0 30px 80px -30px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04); padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; opacity: .45; animation: infraFloat 9s ease-in-out infinite; } .infra-bg__rack i { flex: 1; border-radius: 3px; background: linear-gradient(90deg, rgba(91,140,255,.18), rgba(34,211,238,.18)); position: relative; overflow: hidden; } .infra-bg__rack i::before { content: ""; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px #22d3ee, 10px 0 0 rgba(91,140,255,.7), 20px 0 0 rgba(167,139,250,.6); animation: infraLed 2.6s ease-in-out infinite; } .infra-bg__rack i:nth-child(2n)::before { animation-delay: -.6s; } .infra-bg__rack i:nth-child(3n)::before { animation-delay: -1.3s; } .infra-bg__rack--a { top: 14%; left: 5%; animation-delay: -1s; } .infra-bg__rack--b { top: 60%; right: 6%; animation-delay: -3.4s; } .infra-bg__rack--c { top: 38%; left: 48%; animation-delay: -5.2s; opacity: .28; transform: scale(.9); } @keyframes infraFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes infraLed { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @media (max-width: 760px) { .infra-bg__rack--c { display: none; } .infra-bg__rack { transform: scale(.78); opacity: .32; } .infra-bg__svg { opacity: .4; } } @media (prefers-reduced-motion: reduce) { .infra-bg__grid, .infra-bg__rack, .infra-bg__rack i::before, .infra-bg__nodes circle, .infra-bg__packets circle { animation: none !important; } .infra-bg__packets circle { display: none; } } /* ========================================================================== HERO — Infrastructure variant headline sizing Slightly smaller display so "IT Infrastructure engineered to scale." packs into 4 rows (one for "World-class", three for the rest) instead of 5. ========================================================================== */ .hero--infra h1.display { font-size: clamp(2rem, 1.1rem + 4vw, 4rem); line-height: 1.02; letter-spacing: -0.025em; } /* ========================================================================== HERO — 4-up stats on a single row (no wrap) ========================================================================== */ .hero__trust--row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.6rem); flex-wrap: nowrap; align-items: end; } .hero__trust--row .stat { min-width: 0; } .hero__trust--row .stat .num { font-size: clamp(1.3rem, .9rem + 1.4vw, 2.2rem); white-space: nowrap; } .hero__trust--row .stat .label { font-size: clamp(.7rem, .6rem + .25vw, .85rem); line-height: 1.25; } /* Keep on one row even on tablets/phones — shrink type, don't wrap. */ @media (max-width: 600px) { .hero__trust--row { gap: .6rem; } .hero__trust--row .stat .num { font-size: clamp(1.1rem, 3.4vw, 1.45rem); } .hero__trust--row .stat .label { font-size: .68rem; } } /* ========================================================================== HERO — IT Infrastructure infographic ========================================================================== */ .hero__visual--infra { min-height: 620px; max-width: 100%; } .infra-stage { position: relative; width: 100%; /* Never exceed the parent column, regardless of breakpoint. */ max-width: min(560px, 100%); aspect-ratio: 1 / 1.35; margin-inline: auto; } .infra-net { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 40px rgba(91,140,255,.25)); } .infra-net .infra-links path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: infraDraw 2.2s var(--ease) forwards; } .infra-net .infra-links path:nth-child(2) { animation-delay: .15s; } .infra-net .infra-links path:nth-child(3) { animation-delay: .3s; } .infra-net .infra-links path:nth-child(4) { animation-delay: .45s; } .infra-net .infra-links path:nth-child(5) { animation-delay: .6s; } .infra-net .infra-links path:nth-child(6) { animation-delay: .75s; } .infra-net .infra-links path:nth-child(7) { animation-delay: .9s; } @keyframes infraDraw { to { stroke-dashoffset: 0; } } .infra-node { position: absolute; top: var(--y); left: var(--x); /* z-index keeps the node pills above .infra-rack — without it the rack * (later in DOM order) would paint over the pills wherever they overlap * its edges, hiding Firewall + Network entirely. */ z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .85rem; border-radius: 999px; background: rgba(10, 15, 31, .82); border: 1px solid rgba(91,140,255,.35); box-shadow: 0 14px 40px -14px rgba(91,140,255,.55), inset 0 0 0 1px rgba(255,255,255,.04); font-family: var(--font-head); font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Use the centring-aware float keyframe so the node stays anchored at * (var(--x), var(--y)) while bobbing — see comment above @keyframes floatNode. */ .infra-node.float { animation-name: floatNode; } .infra-node__ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--grad-soft); color: var(--accent-2); } .infra-node__ico svg { width: 14px; height: 14px; } .infra-node--uptime { flex-direction: column; gap: .15rem; padding: .75rem .95rem; border-radius: 18px; text-align: center; } .infra-node--uptime strong { font-size: 1.1rem; line-height: 1; } .infra-node--uptime span { font-size: .62rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } /* Animated server rack panel — the "browser window" of the infographic */ .infra-rack { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); /* clamp keeps the rack inside the stage on every viewport, including * very narrow phones where 480px would punch through the column edge. */ width: clamp(260px, 96%, 460px); max-width: 100%; border-radius: 18px; background: linear-gradient(160deg, rgba(22,31,55,.96), rgba(10,15,31,.96)); border: 1px solid rgba(91,140,255,.32); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(91,140,255,.08), inset 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; } /* Use the centring-aware float keyframe so the rack stays horizontally * centred while bobbing — see comment above @keyframes floatRack. */ .infra-rack.float { animation-name: floatRack; } .infra-rack__bar { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--font-head); font-size: .72rem; color: var(--muted); letter-spacing: .04em; } .infra-rack__dots { display: inline-flex; gap: 5px; } .infra-rack__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); } .infra-rack__dots i:first-child { background: #ff5f57; } .infra-rack__dots i:nth-child(2) { background: #febc2e; } .infra-rack__dots i:nth-child(3) { background: #28c840; } .infra-rack__title { color: var(--ink); font-weight: 600; } .infra-rack__live { display: inline-flex; align-items: center; gap: .4rem; color: #4ade80; font-weight: 600; font-size: .7rem; } .infra-rack__live .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; } /* KPI metrics row inside the panel */ .infra-rack__metrics { display: grid; /* minmax(0, 1fr) prevents grid blow-out: without it, long values like * "8.4Gb/s" would force the column wider than 1fr, pushing the whole * rack past the stage edge on narrow screens. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: .9rem 1rem .6rem; border-bottom: 1px solid rgba(255,255,255,.06); } .infra-mkpi { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .infra-mkpi__label { font-family: var(--font-head); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .infra-mkpi__value { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1; white-space: nowrap; } .infra-mkpi__value span { font-size: .58rem; font-weight: 600; color: var(--muted); margin-left: .15rem; letter-spacing: .04em; } /* Sparkline */ .infra-rack__chart { position: relative; padding: .35rem 1rem .65rem; border-bottom: 1px solid rgba(255,255,255,.06); } .infra-rack__chart svg { width: 100%; height: 60px; display: block; } .infra-spark-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: infraDraw 2.6s var(--ease) forwards; animation-delay: .4s; } .infra-rack__chart-label { display: block; font-family: var(--font-head); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; } /* Server list */ .infra-rack__body { padding: .8rem 1rem; display: grid; gap: .55rem; min-width: 0; } .infra-srv { display: grid; /* Bar column is now minmax(0, 110px) so it can shrink on narrow viewports * instead of locking the row at 110px and forcing rack overflow. */ grid-template-columns: 14px minmax(0, 1fr) minmax(40px, 110px) 42px; gap: .6rem; align-items: center; font-family: var(--font-head); font-size: .78rem; min-width: 0; } .infra-srv__led { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; } .infra-srv__led--ok { background: #22d3ee; box-shadow: 0 0 10px #22d3ee; } .infra-srv__led--warn { background: #fb923c; box-shadow: 0 0 10px #fb923c; } .infra-srv__lbl { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .infra-srv__bar { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; } .infra-srv__bar i { display: block; height: 100%; width: var(--w); background: var(--grad); border-radius: 4px; animation: infraBar 2.4s ease-in-out infinite alternate; } @keyframes infraBar { from { transform: translateX(-6%); } to { transform: translateX(0); } } .infra-srv__val { font-size: .7rem; color: var(--muted); text-align: right; } .infra-rack__meta { display: flex; justify-content: space-between; padding: .6rem 1rem .7rem; border-top: 1px solid rgba(255,255,255,.06); font-family: var(--font-head); font-size: .7rem; color: var(--muted); } .infra-rack__meta strong { color: var(--ink); font-weight: 600; } /* Position tweaks for narrower stages */ @media (max-width: 1024px) { .hero__visual--infra { min-height: 540px; } .infra-stage { max-width: min(460px, 100%); } .infra-rack { width: clamp(240px, 96%, 420px); } } @media (max-width: 600px) { .hero__visual--infra { min-height: 460px; } .infra-stage { max-width: min(340px, 100%); aspect-ratio: 1 / 1.5; } .infra-rack { width: clamp(220px, 98%, 340px); } .infra-node { font-size: .68rem; padding: .4rem .6rem; } /* Drop KPIs to 2 columns so each value stays legible inside a narrow rack */ .infra-rack__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .5rem; padding: .65rem .7rem .45rem; } .infra-mkpi__value { font-size: .9rem; } .infra-mkpi__label { font-size: .52rem; } .infra-srv { grid-template-columns: 10px minmax(0, 1fr) minmax(32px, 60px) 30px; gap: .4rem; font-size: .68rem; } .infra-rack__body { padding: .6rem .7rem; gap: .42rem; } .infra-rack__chart { padding: .35rem .7rem .55rem; } .infra-rack__chart svg { height: 44px; } /* Bring side pills inward on very narrow viewports so they don't extend * past the now-narrower stage edge */ .infra-node--sec { --x: 18%; } .infra-node--net { --x: 82%; } } @media (prefers-reduced-motion: reduce) { .infra-net .infra-links path { stroke-dashoffset: 0 !important; animation: none !important; } .infra-srv__bar i { animation: none !important; } } /* ========================================================================== IT INFRASTRUCTURE — Spotlight section + featured service card ========================================================================== */ .section--infra-spotlight { padding-block: clamp(3.5rem, 7vw, 6rem); } .infra-spotlight { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .infra-spotlight__copy .lead { max-width: 56ch; margin-top: 1rem; } .infra-spotlight__list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .75rem; } .infra-spotlight__list li { display: flex; align-items: flex-start; gap: .7rem; color: var(--ink-soft); font-size: .98rem; } .infra-spotlight__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #06122e; box-shadow: 0 6px 16px -5px rgba(79,124,255,.55), inset 0 1px 0 rgba(255,255,255,.4); } .infra-spotlight__tick svg { width: 13px; height: 13px; stroke-width: 2.6; } .infra-spotlight__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .infra-tile { padding: 1.2rem 1.15rem; border-radius: var(--radius); background: rgba(15, 22, 40, .7); border: 1px solid var(--line-2); backdrop-filter: blur(8px); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; } .infra-tile:hover { transform: translateY(-4px); border-color: rgba(91,140,255,.55); box-shadow: 0 18px 50px -18px rgba(91,140,255,.45); } .infra-tile .icon-chip { width: 40px; height: 40px; margin-bottom: .75rem; } .infra-tile .icon-chip svg { width: 22px; height: 22px; } .infra-tile h4 { font-size: 1.02rem; margin-bottom: .4rem; } .infra-tile p { color: var(--muted); font-size: .85rem; line-height: 1.5; } @media (max-width: 960px) { .infra-spotlight { grid-template-columns: 1fr; } .infra-spotlight__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .infra-spotlight__grid { grid-template-columns: 1fr; } } /* Featured (flagship) service card */ .services-grid .service-card--featured { position: relative; background: linear-gradient(160deg, rgba(91,140,255,.16), rgba(34,211,238,.10)), var(--surface); border-color: rgba(91,140,255,.45); box-shadow: 0 24px 60px -24px rgba(91,140,255,.5); } .services-grid .service-card--featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .55; } .services-grid .service-card--featured .icon-chip { background: var(--grad); color: #06122e; } .service-card__badge { position: absolute; top: 14px; right: 14px; font-family: var(--font-head); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: .3rem .55rem; border-radius: 999px; background: var(--grad); color: #06122e; box-shadow: 0 6px 16px -5px rgba(79,124,255,.55); } /* Soft alternating section bands — keep visual rhythm but let the * site-wide infrastructure backdrop animation peek through. */ .section[style*="--bg-soft"] { background: rgba(10, 15, 31, .82) !important; } /* Site header / footer should still feel solid; no change needed there. */ /* ========================================================================== IT INFRASTRUCTURE — Five Service Pillars block (.itis-stack / .itis-block) Vertical, numbered glass cards with gradient halo on hover. Used on /services/it-infrastructure-services/ ========================================================================== */ .section--itis-pillars { padding-block: clamp(3.5rem, 7vw, 6rem); } .itis-stack { display: grid; gap: clamp(1.4rem, 2.5vw, 2rem); } .itis-block { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(1.6rem, 3.5vw, 3rem); padding: clamp(1.8rem, 3.2vw, 2.6rem); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(15, 22, 40, .82), rgba(10, 15, 31, .82)); border: 1px solid var(--line-2); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 26px 70px -30px rgba(0, 0, 0, .8); overflow: hidden; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; isolation: isolate; } /* Gradient border halo that ignites on hover */ .itis-block::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 1; } /* Subtle radial accent in the top-left corner — gives the card depth */ .itis-block::after { content: ""; position: absolute; top: -20%; left: -10%; width: 50%; height: 100%; background: radial-gradient(50% 50% at 50% 50%, rgba(91, 140, 255, .14), transparent 70%); pointer-events: none; z-index: 0; } .itis-block > * { position: relative; z-index: 2; } .itis-block:hover { transform: translateY(-5px); border-color: rgba(91, 140, 255, .4); box-shadow: 0 36px 80px -30px rgba(91, 140, 255, .5); } .itis-block:hover::before { opacity: .6; } /* Left column — number + icon + heading stack */ .itis-block__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; align-self: flex-start; position: sticky; top: calc(var(--header-h) + 1rem); } .itis-block__num { font-family: var(--font-head); font-size: clamp(3.4rem, 2rem + 4vw, 5.4rem); font-weight: 700; line-height: .9; letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 8px 24px rgba(91, 140, 255, .4)); } .itis-block__head .icon-chip { margin: 0; width: 52px; height: 52px; } .itis-block__head .icon-chip svg { width: 26px; height: 26px; } .itis-block__head h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem); line-height: 1.15; color: var(--ink); margin: 0; } /* Right column — paragraph + bullets */ .itis-block__body p { color: var(--ink-soft); font-size: clamp(.98rem, .95rem + .15vw, 1.05rem); line-height: 1.7; margin-bottom: 1.5rem; } .itis-block__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.4rem; } .itis-block__list--single { grid-template-columns: 1fr; } .itis-block__list li { display: flex; align-items: flex-start; gap: .65rem; color: var(--ink-soft); font-size: .94rem; line-height: 1.5; } .itis-block__list li svg { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--grad); color: #06122e; box-sizing: content-box; margin-top: 1px; box-shadow: 0 5px 14px -4px rgba(79, 124, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .35); stroke-width: 2.6; } .itis-block__list a.accent { color: var(--accent-2); font-weight: 600; border-bottom: 1px dashed rgba(34, 211, 238, .35); transition: color .25s, border-color .25s; } .itis-block__list a.accent:hover { color: var(--ink); border-bottom-color: var(--accent-2); } /* Responsive: collapse to single column at narrow widths */ @media (max-width: 900px) { .itis-block { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.6rem; } .itis-block__head { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .85rem; position: static; } .itis-block__num { font-size: clamp(2.4rem, 8vw, 3.2rem); } .itis-block__head .icon-chip { width: 44px; height: 44px; } .itis-block__head .icon-chip svg { width: 22px; height: 22px; } .itis-block__head h3 { flex-basis: 100%; } .itis-block__list { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .itis-block, .itis-block::before, .itis-block:hover { transition: none; transform: none; } } /* ========================================================================== CLIENT LOGO MARQUEE — site-wide band above the footer Right-to-left infinite scroll, glassy chips, monochrome → colour on hover. ========================================================================== */ .client-band { position: relative; padding-block: clamp(2.5rem, 5vw, 4rem); background: radial-gradient(80% 60% at 50% 0%, rgba(91,140,255,.10), transparent 70%), radial-gradient(80% 60% at 50% 100%, rgba(34,211,238,.08), transparent 70%), rgba(10, 15, 31, .72); overflow: hidden; isolation: isolate; } /* Glowing gradient hairlines top + bottom for that "premium band" feel */ .client-band::before, .client-band::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(91,140,255,.55) 28%, rgba(34,211,238,.55) 72%, transparent); opacity: .8; pointer-events: none; } .client-band::before { top: 0; } .client-band::after { bottom: 0; } .client-band__head { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); } .client-band__head .eyebrow { justify-content: center; margin-bottom: .6rem; } .client-band__head .eyebrow::before { display: none; } .client-band__head h3 { font-family: var(--font-head); font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; } /* Marquee viewport with edge fade-mask */ .client-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* The track holds two duplicated passes of the logo set so translateX(-50%) loops seamlessly without a visible jump. */ .client-marquee__track { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.4rem); width: max-content; padding-block: .6rem; animation: clientScroll 38s linear infinite; will-change: transform; } .client-marquee:hover .client-marquee__track { animation-play-state: paused; } @keyframes clientScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Individual logo "glass chip" */ .client-logo { flex: none; height: 96px; min-width: 180px; display: grid; place-items: center; padding: .9rem 1.6rem; border-radius: 18px; /* Premium white surface with subtle depth gradient — pure #ffffff at the * top, easing into a faint cool-grey at the bottom to give the chip a * card-like, lit-from-above feel against the dark site backdrop. */ background: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #eef2f7 100%); border: 1px solid rgba(91, 140, 255, .14); box-shadow: 0 18px 42px -14px rgba(0, 0, 0, .55), 0 6px 14px -4px rgba(91, 140, 255, .18), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(91, 140, 255, .08); transition: transform .45s var(--ease), border-color .45s, background .45s, box-shadow .45s; position: relative; overflow: hidden; isolation: isolate; } /* Gradient halo border (cyan → violet) — fades in on hover for that * premium "lit edge" feel. */ .client-logo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 1; } /* Diagonal shine sweep — a soft glossy band that streaks across the chip * on hover, like the gloss on a credit card or polished glass. */ .client-logo::after { content: ""; position: absolute; top: 0; left: -160%; width: 70%; height: 100%; background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70% ); transform: skewX(-22deg); pointer-events: none; z-index: 2; transition: left .9s var(--ease); } .client-logo img { max-height: 60px; max-width: 170px; width: auto; height: auto; display: block; position: relative; z-index: 1; transition: transform .55s var(--ease); } .client-logo:hover, .client-logo:focus-within { transform: translateY(-6px); border-color: rgba(91, 140, 255, .4); background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 28px 60px -14px rgba(0, 0, 0, .65), 0 10px 22px -4px rgba(91, 140, 255, .4), 0 0 0 1px rgba(91, 140, 255, .2), inset 0 1px 0 rgba(255, 255, 255, 1); } .client-logo:hover::before, .client-logo:focus-within::before { opacity: .65; } .client-logo:hover::after, .client-logo:focus-within::after { left: 160%; } .client-logo:hover img, .client-logo:focus-within img { transform: scale(1.08); } @media (max-width: 700px) { .client-logo { height: 78px; min-width: 144px; padding: .7rem 1.15rem; border-radius: 14px; } .client-logo img { max-height: 48px; max-width: 140px; } .client-marquee__track { gap: 1.1rem; animation-duration: 32s; } } @media (max-width: 480px) { .client-logo { height: 70px; min-width: 124px; padding: .6rem .9rem; } .client-logo img { max-height: 42px; max-width: 120px; } } @media (prefers-reduced-motion: reduce) { .client-marquee__track { animation: none; transform: none; } } /* ========================================================================== LEAD-GEN POPUP (.lead-pop) — homepage exit/scroll/timer-triggered modal Ultra-modern: glass dialog, gradient offer aside, animated entrance. ========================================================================== */ .lead-pop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); } .lead-pop[hidden] { display: none; } .lead-pop__overlay { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 0%, rgba(5, 7, 15, .72), rgba(5, 7, 15, .9)); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); opacity: 0; transition: opacity .4s var(--ease); } .lead-pop.is-open .lead-pop__overlay { opacity: 1; } .lead-pop__dialog { position: relative; z-index: 1; width: min(440px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; display: block; border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(16, 22, 40, .96), rgba(10, 15, 31, .98)); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(91, 140, 255, .12), 0 0 90px -30px rgba(34, 211, 238, .5); /* Entrance */ opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease); } .lead-pop.is-open .lead-pop__dialog { opacity: 1; transform: none; } /* Animated gradient hairline along the very top of the dialog */ .lead-pop__dialog::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent-3), transparent); background-size: 200% 100%; animation: leadPopSheen 5s linear infinite; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } @keyframes leadPopSheen { to { background-position: 200% 0; } } .lead-pop__close { position: absolute; top: 14px; right: 14px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(5, 7, 15, .55); border: 1px solid var(--line-2); color: var(--ink-soft); cursor: pointer; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; backdrop-filter: blur(6px); } .lead-pop__close svg { width: 18px; height: 18px; } .lead-pop__close:hover { background: rgba(255,255,255,.08); color: var(--ink); border-color: var(--accent); transform: rotate(90deg); } /* --- Offer badge (sits at the top of the compact panel) --- */ .lead-pop__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: rgba(255,255,255,.05); font-family: var(--font-head); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--ink-soft); margin-bottom: .65rem; } .lead-pop__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); } /* --- Compact form panel --- */ .lead-pop__panel { position: relative; padding: clamp(1.25rem, 3vw, 1.7rem); display: grid; align-content: center; } .lead-pop__form-title { font-size: 1.3rem; margin-bottom: .2rem; } .lead-pop__form-note { color: var(--muted); font-size: .86rem; line-height: 1.45; margin-bottom: .85rem; } .lead-pop__field { margin-bottom: .55rem; } .lead-pop__field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .25rem; font-family: var(--font-head); } .lead-pop__field input { width: 100%; padding: .6rem .9rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); color: var(--ink); font-size: .95rem; transition: border-color .25s, background .25s, box-shadow .25s; } .lead-pop__field input::placeholder { color: var(--muted-2); } .lead-pop__field input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(91,140,255,.18); } .lead-pop__error { margin: .2rem 0 .8rem; padding: .65rem .8rem; border-radius: 10px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; font-size: .85rem; } .lead-pop__submit { position: relative; margin-top: .25rem; } /* Keep the label text and its arrow on one line (the .btn white-space:normal * rule used on narrow viewports was letting the arrow wrap below the text). */ .lead-pop__submit-label { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; } .lead-pop__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(6,18,46,.35); border-top-color: #06122e; animation: leadPopSpin .7s linear infinite; } @keyframes leadPopSpin { to { transform: rotate(360deg); } } .lead-pop__form.is-sending .lead-pop__submit-label { display: none; } .lead-pop__form.is-sending .lead-pop__spinner { display: inline-block; } .lead-pop__form.is-sending .lead-pop__submit { pointer-events: none; opacity: .85; } .lead-pop__fineprint { display: flex; align-items: center; gap: .45rem; margin-top: .65rem; font-size: .74rem; line-height: 1.4; color: var(--muted); } .lead-pop__fineprint svg { width: 15px; height: 15px; color: var(--accent-2); flex: none; } .lead-pop__fineprint a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; } .lead-pop__fineprint a:hover { color: var(--accent-2); } /* --- Success state (revealed only after a successful submit) --- */ .lead-pop__success { text-align: center; padding: 1rem .5rem; display: grid; justify-items: center; gap: .6rem; } /* The class's display:grid would otherwise beat the bare [hidden] attribute, leaving the success panel stacked under the form. Keep it hidden until JS flips it on, so the popup is only ever the form OR the confirmation. */ .lead-pop__success[hidden] { display: none; } .lead-pop__success-ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .4rem; background: var(--grad); color: #06122e; box-shadow: 0 16px 44px -12px rgba(34,211,238,.7); animation: leadPopPop .5s var(--ease) both; } .lead-pop__success-ring svg { width: 34px; height: 34px; stroke-width: 3; } @keyframes leadPopPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lead-pop__success h3 { font-size: 1.5rem; } .lead-pop__success p { color: var(--muted); font-size: .92rem; max-width: 34ch; } .lead-pop__success .btn { margin-top: .6rem; } /* --- Responsive --- */ @media (prefers-reduced-motion: reduce) { .lead-pop__overlay, .lead-pop__dialog { transition: none; } .lead-pop__dialog::before, .lead-pop__success-ring, .lead-pop__spinner { animation: none; } .lead-pop__close:hover { transform: none; } } /* ========================================================================== COOKIE CONSENT BANNER (UK PECR / UK GDPR) Fixed bottom bar; "Accept all" and "Reject all" given equal prominence per ICO guidance. Hidden until main.js decides to show it. ========================================================================== */ .cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 1200; /* above sticky CTA, below nothing important */ padding: clamp(.8rem, 2vw, 1.2rem); background: linear-gradient(180deg, rgba(10, 15, 31, .97), rgba(5, 7, 15, .99)); border-top: 1px solid var(--line-2); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .85); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); transform: translateY(110%); transition: transform .45s var(--ease); } .cookie-banner.is-open { transform: none; } .cookie-banner[hidden] { display: none; } /* Glowing hairline echoing the site header */ .cookie-banner::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(91,140,255,.55) 28%, rgba(34,211,238,.55) 72%, transparent); opacity: .8; } .cookie-banner__inner { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; } .cookie-banner__text { flex: 1 1 380px; min-width: 0; } .cookie-banner__title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1rem; margin-bottom: .25rem; } .cookie-banner__title svg { width: 18px; height: 18px; color: var(--accent-2); flex: none; } .cookie-banner__text p:last-child { color: var(--muted); font-size: .88rem; line-height: 1.55; } .cookie-banner__text a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; } .cookie-banner__actions .btn { white-space: nowrap; } @media (max-width: 560px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1 1 0; } } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } } /* Footer "Cookie settings" link + separator */ .footer-sep { margin-inline: .5rem; color: var(--muted-2); } .footer-bottom a[data-cookie-settings] { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; } .footer-bottom a[data-cookie-settings]:hover { color: var(--accent-2); } /* ========================================================================== CONSENT-GATED EMBED (e.g. Google Maps) — placeholder shown until accepted ========================================================================== */ .consent-embed { position: relative; } .consent-embed__placeholder { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: .8rem; text-align: center; padding: 1.5rem; background: linear-gradient(160deg, var(--surface-2), #0a1326); border-radius: inherit; } .consent-embed__placeholder svg { width: 30px; height: 30px; color: var(--accent-2); } .consent-embed__placeholder p { color: var(--ink-soft); font-size: .9rem; max-width: 32ch; line-height: 1.5; } .consent-embed__placeholder .muted { color: var(--muted); font-size: .78rem; } .consent-embed.is-loaded .consent-embed__placeholder { display: none; } /* The gated iframe starts hidden (no src) and is revealed once loaded */ .consent-embed iframe { opacity: 0; transition: opacity .4s var(--ease); } .consent-embed.is-loaded iframe { opacity: 1; } /* ========================================================================== COOKIE POLICY TABLE ========================================================================== */ .cookie-table-wrap { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--radius); } .cookie-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; } .cookie-table th, .cookie-table td { text-align: left; padding: .8rem 1rem; vertical-align: top; border-bottom: 1px solid var(--line); } .cookie-table thead th { font-family: var(--font-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: rgba(255,255,255,.03); } .cookie-table tbody tr:last-child td { border-bottom: 0; } .cookie-table code { background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: 5px; font-size: .85em; color: var(--accent-2); } .cookie-table .muted { color: var(--muted); }