/* ======================================================================== ARMAKUNI DESIGN SYSTEM Canonical implementation reference for AKWriter design and build work. Includes continuity lines, dot grid, per-page theming, hero patterns, cards, motion behavior, and production interactions. ======================================================================== */ /* ======================================== 0. CSS CUSTOM PROPERTIES ======================================== */ :root { /* Core palette */ --bg: #05050c; --surface: rgba(255,255,255,0.03); --surface-2: rgba(255,255,255,0.04); --surface-card: rgba(255,255,255,0.025); --text: #ebf1fb; --text-s: rgba(235,241,251,0.72); --text-m: rgba(235,241,251,0.45); --border: rgba(255,255,255,0.07); --border-h: rgba(255,255,255,0.14); /* Accent — overridden by data-theme */ --accent: #2d62ff; --accent-cyan: #009be5; --accent-bright: #7bc6ff; --accent-pink: #dd23bb; /* Accent alpha variants — color-mix() works in all modern browsers. Use these EVERYWHERE instead of hardcoded rgba(45,98,255,...) */ --accent-a04: color-mix(in srgb, var(--accent) 4%, transparent); --accent-a06: color-mix(in srgb, var(--accent) 6%, transparent); --accent-a08: color-mix(in srgb, var(--accent) 8%, transparent); --accent-a12: color-mix(in srgb, var(--accent) 12%, transparent); --accent-a15: color-mix(in srgb, var(--accent) 15%, transparent); --accent-a18: color-mix(in srgb, var(--accent) 18%, transparent); --accent-a26: color-mix(in srgb, var(--accent) 26%, transparent); --accent-a45: color-mix(in srgb, var(--accent) 45%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 6%, transparent); --accent-border: color-mix(in srgb, var(--accent) 26%, transparent); --accent-bg: color-mix(in srgb, var(--accent) 12%, transparent); --accent-btn-bg: color-mix(in srgb, var(--accent) 18%, transparent); --accent-btn-hover: color-mix(in srgb, var(--accent) 28%, transparent); --accent-btn-shadow: color-mix(in srgb, var(--accent) 6%, transparent); --accent-btn-shadow-hover: color-mix(in srgb, var(--accent) 12%, transparent); /* AWS */ --aws: #FF9900; --aws-soft: rgba(212,150,30,0.12); /* Logo spectrum */ --logo-blue: #009FE3; --logo-green: #95C11F; --logo-orange: #C45D14; --logo-coral: #C2004B; --logo-pink: #E6007E; /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; /* Font stacks */ --f-h: 'Saira Semi Condensed', sans-serif; --f-b: 'Inter', sans-serif; --f-m: 'Roboto Mono', monospace; /* Easing */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ======================================== 0a. PER-PAGE COLOR THEMING ======================================== */ /* When --accent changes, ALL --accent-aXX variants update automatically via color-mix(). Only body background gradients need raw RGB (can't use color-mix in gradients on all browsers). */ [data-theme="blue"] { --accent: #2d62ff; --accent-bright: #7bc6ff; } [data-theme="royal-blue"] { --accent: #1e40af; --accent-bright: #60a5fa; } [data-theme="pink"] { --accent: #dd23bb; --accent-bright: #f472b6; } [data-theme="orange"] { --accent: #C45D14; --accent-bright: #d4961e; } [data-theme="green"] { --accent: #95C11F; --accent-bright: #a3e635; } [data-theme="cyan"] { --accent: #009be5; --accent-bright: #67e8f9; } [data-theme="deep-blue"] { --accent: #1e3a8a; --accent-bright: #3b82f6; } [data-theme="coral"] { --accent: #6b0d0d; --accent-bright: #8a1717; } /* Per-theme body background glow */ /* Per-theme body background. Selector covers both shapes in the wild: data-theme on (descendant form paints body) and data-theme on (the bare form paints the element directly). */ [data-theme="blue"], [data-theme="blue"] body { background: radial-gradient(circle at 14% 12%,rgba(45,98,255,0.10),transparent 24%),radial-gradient(circle at 84% 18%,rgba(123,198,255,0.07),transparent 24%),radial-gradient(circle at 50% 80%,rgba(45,98,255,0.06),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } [data-theme="royal-blue"], [data-theme="royal-blue"] body { background: radial-gradient(circle at 14% 12%,rgba(30,64,175,0.16),transparent 26%),radial-gradient(circle at 84% 18%,rgba(96,165,250,0.10),transparent 26%),radial-gradient(circle at 50% 80%,rgba(30,64,175,0.08),transparent 24%),linear-gradient(180deg,#03050f,#05060f 38%,#080a18 100%); } [data-theme="pink"], [data-theme="pink"] body { background: radial-gradient(circle at 14% 12%,rgba(221,35,187,0.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(0,155,229,0.07),transparent 24%),radial-gradient(circle at 50% 80%,rgba(221,35,187,0.07),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } [data-theme="orange"], [data-theme="orange"] body { background: radial-gradient(circle at 14% 12%,rgba(196,93,20,0.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(196,93,20,0.07),transparent 24%),radial-gradient(circle at 50% 80%,rgba(212,150,30,0.06),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } [data-theme="green"], [data-theme="green"] body { background: radial-gradient(circle at 14% 12%,rgba(149,193,31,0.1),transparent 24%),radial-gradient(circle at 84% 18%,rgba(149,193,31,0.06),transparent 24%),radial-gradient(circle at 50% 80%,rgba(149,193,31,0.05),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } [data-theme="cyan"], [data-theme="cyan"] body { background: radial-gradient(circle at 14% 12%,rgba(0,155,229,0.12),transparent 24%),radial-gradient(circle at 84% 18%,rgba(0,155,229,0.08),transparent 24%),radial-gradient(circle at 50% 80%,rgba(0,155,229,0.06),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } [data-theme="deep-blue"], [data-theme="deep-blue"] body { background: radial-gradient(circle at 14% 12%,rgba(30,58,138,0.16),transparent 26%),radial-gradient(circle at 84% 18%,rgba(59,130,246,0.10),transparent 26%),radial-gradient(circle at 50% 80%,rgba(30,58,138,0.08),transparent 24%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } [data-theme="coral"], [data-theme="coral"] body { background: radial-gradient(circle at 14% 12%,rgba(107,13,13,0.14),transparent 24%),radial-gradient(circle at 84% 18%,rgba(138,23,23,0.10),transparent 24%),radial-gradient(circle at 50% 80%,rgba(107,13,13,0.08),transparent 22%),linear-gradient(180deg,#04040a,#05050c 38%,#070c15 100%); } /* ======================================== 1. RESET & BASE ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.65; color: var(--text); background-color: var(--bg); background: radial-gradient(circle at 14% 12%, var(--accent-a15), transparent 24%), radial-gradient(circle at 84% 18%, rgba(0,155,229,0.09), transparent 24%), radial-gradient(circle at 50% 80%, var(--accent-a08), transparent 22%), linear-gradient(180deg, #04040a, #05050c 38%, #070c15 100%); background-attachment: fixed; /* No overflow-x rule. `overflow-x: hidden` here forces overflow-y to compute as `auto`, establishing a scroll container that breaks `position: sticky` everywhere. Per-element clipping handles full-bleed. */ opacity: 0; transition: opacity 0.6s var(--ease); } body.loaded { opacity: 1; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } img { max-width: 100%; display: block; } ul, ol { list-style: none; } /* ======================================== 2. SOURCEGRAPH-STYLE BACKGROUND SYSTEM Dot grid + vertical continuity lines ======================================== */ /* Square grid — Connect-style. Large 72px squares, visible in hero, fades out. V4A uses big grid. V4B uses small dot grid. */ /* Grid lives INSIDE .hero only (position: absolute, not fixed). Fades out at bottom of hero. Below hero, continuity lines take over. */ .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 0%, transparent 100%); } /* .bg-grid kept as alias for backward compat but hidden by default */ .bg-grid { display: none; } /* Small dot grid — layered on top for fine detail */ .bg-dot-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 100%); } /* Vertical continuity lines — 5 lines spanning the full page height. These create the "flow" feeling as user scrolls. Aligned to content grid. */ .bg-continuity-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Content-wrap left and right edges */ .bg-continuity-lines::before, .bg-continuity-lines::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent 0%, transparent 14%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0.06) 90%, transparent 100%); } .bg-continuity-lines::before { left: max(24px, calc((100vw - 1100px) / 2)); } .bg-continuity-lines::after { right: max(24px, calc((100vw - 1100px) / 2)); } /* Center line — slightly brighter, the spine of the page */ .bg-line-center { position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent 0%, var(--accent-a08) 15%, rgba(255,255,255,0.05) 50%, var(--accent-a08) 85%, transparent 100%); z-index: 0; pointer-events: none; } /* Quarter lines — hidden. 3 lines (left, center, right) is clean enough. */ .bg-line-quarter-left, .bg-line-quarter-right { display: none; } /* Horizontal accent lines — appear at key section boundaries, not fixed */ .bg-h-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-a08) 20%, rgba(255,255,255,0.05) 50%, var(--accent-a08) 80%, transparent 100%); position: relative; z-index: 1; } /* ======================================== 3. AMBIENT LAYERS ======================================== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-cyan)); z-index: 10000; transition: width 60ms linear; } .fog-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .fog-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .fog-blob { position: absolute; border-radius: 50%; filter: blur(92px); opacity: 0.5; } .fog-blob-1 { width: 420px; height: 420px; background: var(--accent-a08); top: 10%; left: 8%; animation: fd1 28s ease-in-out infinite; } .fog-blob-2 { width: 360px; height: 360px; background: color-mix(in srgb, var(--accent-cyan) 6%, transparent); top: 30%; right: 12%; animation: fd2 32s ease-in-out infinite; } .fog-blob-3 { width: 300px; height: 300px; background: var(--accent-a06); bottom: 20%; left: 40%; animation: fd3 26s ease-in-out infinite; } @keyframes fd1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,40px) scale(1.1); } 66% { transform: translate(-30px,70px) scale(0.95); } } @keyframes fd2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-50px,-30px) scale(1.05); } 66% { transform: translate(40px,-60px) scale(0.9); } } @keyframes fd3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-50px) scale(1.08); } 66% { transform: translate(-40px,30px) scale(0.92); } } .mouse-glow { position: fixed; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, var(--accent-a06), transparent 70%); pointer-events: none; z-index: 1; transform: translate(-50%, -50%); transition: left 0.3s var(--ease), top 0.3s var(--ease); } /* ======================================== 4. NAV — Glass pill with Warp-style dropdown ======================================== */ .nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1060px, calc(100vw - 18px)); z-index: 1000; border-radius: 18px; border: 1px solid var(--border); background: rgba(8,12,20,0.68); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.28); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 12px 14px; } .nav-brand { display: flex; align-items: center; gap: 10px; } .brand-name { font-family: var(--f-h); font-weight: 200; font-size: 18px; letter-spacing: 0.02em; } .nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; } .nav-link { font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); padding: 6px 12px; border-radius: 8px; position: relative; transition: color 0.25s var(--ease); } .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-cyan)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-link:hover { color: var(--text); } .nav-link:hover::after { transform: scaleX(1); } .nav-cta { font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid var(--accent-a26); background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06)); box-shadow: inset 0 0 12px 4px var(--accent-a06), 0 0 16px var(--accent-a04); color: var(--text); white-space: nowrap; transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease); } .nav-cta:hover { border-color: var(--accent-a45); background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12)); box-shadow: inset 0 0 20px 6px var(--accent-a12), 0 0 32px var(--accent-a12); transform: translateY(-1px); } /* --- Warp-style blur dropdown --- */ .nav-link-wrap { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px) scale(0.97); min-width: 280px; background: rgba(8,12,20,0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 16px; padding: 12px; opacity: 0; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1); z-index: 1001; box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); } .nav-link-wrap:hover .nav-dropdown, .nav-dropdown.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } /* --- Services / Solutions / Industries dropdown panels (the .nav-dd-panel naming used by every offering / case-study page). Default: hidden, scaled down, no pointer hits. Reveal on parent .nav-dd:hover (desktop) or .nav-dd[data-open="true"] (mobile, toggled by the existing .nav-dd-trigger click handler). The .is-active modifier on .nav-dd is the "current page" badge — it does NOT open the panel. --- */ .nav-dd { position: relative; } .nav-dd-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px) scale(0.97); min-width: 280px; background: rgba(8, 12, 20, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: 16px; padding: 12px; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-menu, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.25s var(--ease-menu, cubic-bezier(0.16, 1, 0.3, 1)); z-index: 1001; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03); } .nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel, .nav-dd[data-open="true"] .nav-dd-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } /* Wide variants (services + solutions panels are 2-column meganavs). */ .nav-dd-panel-services, .nav-dd-panel-solutions, .nav-dd-panel-menu { min-width: 320px; } /* The current-page row inside a services panel gets a subtle accent. */ .nav-menu-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; transition: background 0.15s var(--ease-default); text-decoration: none; } .nav-menu-row:hover { background: rgba(255, 255, 255, 0.05); } .nav-menu-row.is-current { background: var(--accent-a06); } /* Mobile: when the nav stacks, the panel becomes inline rather than absolute. */ @media (max-width: 880px) { .nav-dd-panel { position: static; transform: none; min-width: 0; box-shadow: none; background: transparent; border: none; padding: 6px 0 12px; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-dd-panel { display: none; } .nav-dd[data-open="true"] .nav-dd-panel { display: block; opacity: 1; pointer-events: auto; } } .nav-dd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; transition: background 0.15s; } .nav-dd-item:hover { background: rgba(255,255,255,0.05); } .nav-dd-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-a12); border: 1px solid var(--accent-a15); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .nav-dd-text { display: flex; flex-direction: column; gap: 2px; } .nav-dd-title { font-family: var(--f-b); font-weight: 450; font-size: 13px; color: rgba(235,241,251,0.85); } .nav-dd-desc { font-family: var(--f-b); font-weight: 350; font-size: 11px; color: var(--text-m); line-height: 1.4; } /* ======================================== 5. LAYOUT PRIMITIVES ======================================== */ .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } section { padding: var(--space-section) 0; position: relative; } .lbl { font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 14px; } h2 { font-family: var(--f-h); font-weight: 200; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; color: var(--text); margin-bottom: 18px; } .lead { font-size: 16px; color: var(--text-s); line-height: 1.78; max-width: 640px; } /* Section label for component groups */ .ds-section-title { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright); padding: 4px 12px; background: var(--accent-a08); border: 1px solid var(--accent-a15); border-radius: 4px; display: inline-block; margin-bottom: 20px; } /* ======================================== 6. REVEAL ANIMATIONS (canonical — blur-lift, antimetal pattern) Elements enter with opacity + translateY + blur. IntersectionObserver adds .visible to unblur and settle. Works with data-delay="1..5" stagger. ======================================== */ .reveal { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), filter 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } .reveal[data-delay="5"] { transition-delay: 0.40s; } /* ======================================== 7. BUTTONS ======================================== */ .btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent-a26); background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06)); box-shadow: inset 0 0 16px 6px var(--accent-a06), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 24px var(--accent-a04); border-radius: 12px; padding: 12px 24px; font-family: var(--f-m); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease); } .btn:hover { border-color: var(--accent-a45); background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12)); box-shadow: inset 0 0 24px 8px var(--accent-a12), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px var(--accent-a12), 0 4px 16px var(--accent-a08); transform: translateY(-2px) scale(1.02); } .btn:active { transform: translateY(0) scale(0.98); transition-duration: 100ms; } .btn-ghost { background: transparent; border: 1px solid var(--border); box-shadow: none; } .btn-ghost:hover { border-color: var(--border-h); background: var(--accent-a06); box-shadow: 0 0 20px var(--accent-a06); } .btn-orange { border: 1px solid rgba(212,150,30,0.26); background: linear-gradient(180deg, rgba(212,150,30,0.18), rgba(212,150,30,0.06)); box-shadow: inset 0 0 16px 6px rgba(212,150,30,0.06), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 24px rgba(212,150,30,0.04); } .btn-orange:hover { border-color: rgba(212,150,30,0.45); background: linear-gradient(180deg, rgba(212,150,30,0.28), rgba(212,150,30,0.12)); box-shadow: inset 0 0 24px 8px rgba(212,150,30,0.12), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px rgba(212,150,30,0.1); } .arr { display: inline-block; transition: transform 0.25s var(--ease); } .btn:hover .arr { transform: translateX(4px); } /* ======================================== 8. HERO A — Full viewport, bottom-left ======================================== */ .hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 80px; } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 68% 22%, var(--accent-a12) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 10% 78%, color-mix(in srgb, var(--accent-cyan) 6%, transparent) 0%, transparent 60%); } .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 0%, transparent 100%); } .hero-c { position: relative; z-index: 1; max-width: 960px; } .ew { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-m); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-m); margin-bottom: 24px; } .ew::before { content: ''; width: 28px; height: 1px; background: var(--accent); } .hero h1 { font-family: var(--f-h); font-weight: 200; font-size: clamp(34px, 4.0vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 24px; /* 2026-05-09: cap hero headline width to ~4 words per line. */ max-width: var(--hero-heading-max-width, 720px); text-wrap: balance; } .hero h1 .hi { color: var(--text); } /* brand rule: headline text never themed; emphasis comes from font-weight or text-shadow, not color */ .hero-sub { font-size: 17px; color: var(--text-s); line-height: 1.78; max-width: 680px; margin-bottom: 40px; } .hero-sub strong { color: var(--text); font-weight: 500; } /* Hero pull-quote — short emphasis block under the hero subtitle, with a themed left rail. Canonicalised 2026-05-10 from inline page rules (was redefined identically on 8 offering pages). Page-level inline overrides can still tune max-width if the layout needs it. */ .hero-pullquote { font-size: 20px; font-weight: 400; padding: 20px 24px; margin: 0 0 36px; border-left: 2px solid var(--accent); background: var(--accent-a06); border-radius: 0 var(--r-md) var(--r-md) 0; max-width: 620px; } .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; } /* Stat strip */ .stat-strip { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); backdrop-filter: blur(8px); width: fit-content; overflow: hidden; } .stat { padding: 18px 32px; border-right: 1px solid var(--border); } .stat:last-child { border-right: none; } .stat-n { font-family: var(--f-h); font-weight: 200; font-size: 28px; display: flex; align-items: baseline; gap: 4px; line-height: 1.1; } .stat-n .u { font-size: 14px; color: var(--accent); font-family: var(--f-m); font-weight: 400; } .stat-l { font-size: 12px; color: var(--text-m); margin-top: 4px; } /* ======================================== 9. LOGO BAR ======================================== */ .logo-bar { padding: 48px 0; } .logo-bar-label { font: 400 10px/1 var(--f-m); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-m); text-align: center; margin-bottom: 28px; } .logo-bar-grid { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; opacity: 0.5; } .logo-bar-grid span { font-family: var(--f-h); font-weight: 200; font-size: 16px; letter-spacing: 0.04em; color: var(--text-m); } .logo-bar-grid span.aws-tag { color: var(--aws); opacity: 0.8; } /* ======================================== 10. HERO B — Centered, minimal (subpages) ======================================== */ .hero-b { padding: 160px 0 80px; text-align: center; } .hero-b h1 { font-family: var(--f-h); font-weight: 200; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.12; max-width: 700px; margin: 0 auto 20px; } .hero-b .lead { max-width: 580px; margin: 0 auto; text-align: center; } /* ======================================== 11. STATS SECTION — 3 cards with speed line SVG ======================================== */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .stats-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px 28px; position: relative; overflow: hidden; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .stats-card:hover { border-color: var(--border-h); transform: translateY(-2px); } .stats-card-n { font-family: var(--f-h); font-weight: 200; font-size: 48px; line-height: 1; margin-bottom: 8px; } .stats-card-n .u { font-size: 20px; color: var(--accent); font-family: var(--f-m); font-weight: 400; } .stats-card-label { font-size: 14px; color: var(--text-s); line-height: 1.5; } /* Speed line decoration inside stat cards */ .stats-card svg.speed-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; opacity: 0.15; } /* ======================================== 12. FEATURE CARDS — 2x2 grid ======================================== */ .feature-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } .feature-card { background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s; } .feature-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-bright) 12%, transparent); } .feature-card-illus { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; margin-bottom: 20px; background: rgba(5,5,12,0.35); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .feature-card-illus img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Legacy hexagon icon kept for Process Flow v2 / Horizontal Scroll Cards */ .feature-card-icon { width: 44px; height: 50px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(160deg, var(--accent-a26), var(--accent-a06)); display: flex; align-items: center; justify-content: center; color: var(--accent-bright); font-family: var(--f-m); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .feature-card h3 { font-family: var(--f-h); font-weight: 200; font-size: 22px; margin-bottom: 10px; } .feature-card p { font-size: 14px; color: var(--text-s); line-height: 1.65; } /* ======================================== 13. SOLUTION ACCORDION — 4 solutions with per-solution color ======================================== */ .solutions { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; } .sol { background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color 0.2s; } .sol:hover { border-color: var(--border-h); } .sol-hd { display: grid; grid-template-columns: 64px 1fr 240px; align-items: stretch; cursor: pointer; } .sol-num { display: flex; align-items: center; justify-content: center; font-family: var(--f-m); font-size: 20px; font-weight: 200; border-right: 1px solid var(--border); padding: 24px 0; } .sol-title { padding: 24px 28px; border-right: 1px solid var(--border); } .sol-step { font-family: var(--f-m); font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .sol-name { font-family: var(--f-h); font-weight: 200; font-size: 22px; color: var(--text); } .sol-sub { font-size: 13px; margin-top: 5px; color: var(--text-s); } .sol-cta { display: flex; align-items: center; justify-content: flex-end; padding: 0 32px; } .sol-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-m); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; transition: gap 0.2s; } .sol-link:hover { gap: 12px; } .sol-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .sol.open .sol-body { max-height: 600px; } .sol-body-inner { padding: 24px 28px 28px; border-top: 1px solid var(--border); } .sol-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .sol-desc p { font-size: 15px; color: var(--text-s); line-height: 1.78; margin-bottom: 14px; } .sol-desc p:last-child { margin-bottom: 0; } .sol-desc p strong { color: var(--text); font-weight: 500; } .sol-bullets { display: flex; flex-direction: column; gap: 10px; } .sb { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid var(--border); } .sb-dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; margin-top: 7px; } .sb p { font-size: 13px; color: var(--text-s); line-height: 1.6; } /* Per-solution color theming */ .s1c .sol-num { color: var(--accent); } .s1c .sol-step { color: var(--accent); } .s1c .sol-link { color: var(--accent); } .s1c .sb-dot { background: var(--accent); } .s2c .sol-num { color: var(--accent-pink); } .s2c .sol-step { color: var(--accent-pink); } .s2c .sol-link { color: var(--accent-pink); } .s2c .sb-dot { background: var(--accent-pink); } .s3c .sol-num { color: var(--logo-orange); } .s3c .sol-step { color: var(--logo-orange); } .s3c .sol-link { color: var(--logo-orange); } .s3c .sb-dot { background: var(--logo-orange); } .s4c .sol-num { color: var(--logo-green); } .s4c .sol-step { color: var(--logo-green); } .s4c .sol-link { color: var(--logo-green); } .s4c .sb-dot { background: var(--logo-green); } /* ======================================== 14. SPLIT LAYOUT — text left, visual right ======================================== */ .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .split-visual { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; overflow: hidden; min-height: 320px; display: flex; align-items: center; justify-content: center; } /* ======================================== 15. STICKY SCROLL — left pins, right scrolls ======================================== */ .sticky-scroll { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; min-height: 600px; /* `align-items: start` so sticky-left does not get stretched to match the taller right column. If stretch hits, sticky height equals container height and there is no room left to pin. */ align-items: start; } .sticky-scroll-left { /* `-webkit-sticky` first for Safari fallback; harmless in modern browsers. */ position: -webkit-sticky; position: sticky; top: 120px; align-self: start; height: fit-content; } .sticky-scroll-right { display: flex; flex-direction: column; gap: 48px; } .sticky-scroll-step { padding: 32px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color 0.3s; } .sticky-scroll-step:hover { border-color: var(--border-h); } .sticky-scroll-step h3 { font-family: var(--f-h); font-weight: 200; font-size: 24px; margin-bottom: 10px; } .sticky-scroll-step p { font-size: 14px; color: var(--text-s); line-height: 1.65; } .sticky-scroll-num { font-family: var(--f-m); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 12px; } /* Active step highlight */ .sticky-scroll-step.active { border-color: var(--accent); box-shadow: inset 0 0 20px var(--accent-a06), 0 0 24px var(--accent-a04); } /* Sticky visual panel — shows illustrations that crossfade */ .sticky-visual { position: relative; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); aspect-ratio: 16/10; overflow: hidden; } .sticky-grid-overlay { position: absolute; inset: 0; width: 100%; height: 100%; } .sticky-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; transition: opacity 0.5s var(--ease); } .sticky-panel.active { opacity: 1; } .sticky-panel svg { width: 80%; max-width: 320px; height: auto; } .sticky-panel img, .sticky-panel picture, .sol-thumb img, .sol-thumb picture { max-width: 100%; height: auto; display: block; } /* ======================================== 16. TESTIMONIAL CAROUSEL ======================================== */ .tm-sec { position: relative; overflow: hidden; padding: 60px 0 40px; } .tm-glow { position: absolute; left: 50%; transform: translateX(-50%); width: min(1100px, 85vw); height: 240px; bottom: 0; background: radial-gradient(ellipse at center, var(--accent-a08), transparent 70%); pointer-events: none; z-index: 0; filter: blur(40px); } .tm-scroll { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 0; scrollbar-width: none; position: relative; z-index: 1; scroll-behavior: smooth; margin-left: calc(-50vw + 50%); width: 100vw; padding-left: max(24px, calc((100vw - 1200px) / 2)); padding-right: max(24px, calc((100vw - 1200px) / 2)); } .tm-scroll::-webkit-scrollbar { display: none; } .tm-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; position: relative; z-index: 1; } .tm-arrow { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-m); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; } .tm-arrow:hover { border-color: var(--border-h); color: var(--text); } .tm-dots { display: flex; align-items: center; gap: 8px; } .tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-a15); cursor: pointer; transition: background 0.3s; } .tm-dot.active { background: var(--text); } .tm-slide { flex: 0 0 420px; scroll-snap-align: center; padding: 36px 32px; border-radius: 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(170deg, var(--accent-a12) 0%, color-mix(in srgb, var(--accent-cyan) 6%, transparent) 40%, rgba(5,5,12,0.8) 100%); border: 1px solid var(--accent-a18); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); } .tm-slide:hover { transform: translateY(-2px); } .tm-logo { font-family: var(--f-h); font-weight: 300; font-size: 20px; color: var(--text); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .tm-logo-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text); } .tm-slide blockquote { font-weight: 350; font-size: 16px; line-height: 1.65; color: rgba(235,241,251,0.85); margin-bottom: 24px; flex: 1; } .tm-footer { display: flex; align-items: center; gap: 14px; margin-top: auto; } .tm-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-a26), color-mix(in srgb, var(--accent-cyan) 30%, transparent)); border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0; } .tm-name { font-weight: 450; font-size: 14px; color: var(--text); } .tm-role { font-size: 12px; color: var(--text-m); margin-top: 2px; } /* ======================================== 17. WORKSHOP CARDS ======================================== */ .ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; } .ws-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; position: relative; overflow: hidden; transition: transform 0.3s var(--ease, ease), border-color 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; } .ws-card:hover { border-color: var(--accent-bright, #7bc6ff); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(45,98,255,0.14); } .ws-card-illus { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: rgba(5,5,12,0.4); display: flex; align-items: center; justify-content: center; padding: 20px; } /* `contain` (not `cover`) so square/portrait source images don't get cropped. Smaller `max-width/height` keeps the visual modest within the card. */ .ws-card-illus img, .ws-card-illus picture { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: transform 0.5s var(--ease); } .ws-card:hover .ws-card-illus img { transform: scale(1.04); } .ws-card-body { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .ws-card-name { font-family: var(--f-h); font-weight: 200; font-size: 22px; margin-bottom: 4px; color: var(--text); } .ws-card p { font-size: 14px; line-height: 1.65; color: var(--text-s); margin-bottom: 4px; } /* Last child (typically the register button row) anchors to the card bottom so cards of mixed body length still line up their CTAs across the grid. */ .ws-card-body > div:last-child { margin-top: auto; padding-top: 8px; } .ws-meta { display: inline-flex; width: fit-content; padding: 6px 14px; background: color-mix(in srgb, var(--accent-cyan, #009be5) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan, #009be5) 22%, transparent); border-radius: 999px; gap: 0; font-family: var(--f-m, 'Roboto Mono', monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-bright, #7bc6ff); margin-bottom: 0; } .ws-meta span:not(:last-child)::after { content: '·'; margin: 0 8px; opacity: 0.5; } .ws-tag { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; display: inline-block; padding: 3px 10px; border-radius: 4px; background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan) 12%, transparent); color: var(--accent-cyan); margin-right: 6px; } /* "Walk away with" outcomes list. Use inside ws-card-body when the workshop has 2-4 concrete deliverables worth bulleting. The wrap holds an uppercase label plus the list; bullets are short accent-bright dashes, not dots. */ .ws-outcomes-wrap { margin-top: 4px; } .ws-outcomes-label { font-family: var(--f-m, 'Roboto Mono', monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m, rgba(235,241,251,0.55)); margin-bottom: 8px; } .ws-outcomes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .ws-outcomes li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-s, rgba(235,241,251,0.72)); } .ws-outcomes li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 1px; background: var(--accent-bright, #7bc6ff); } /* ======================================== 18. QUOTE BAND ======================================== */ .qband { /* Reduced from 72px so the section's eyebrow / h2 / lead don't end up with a ~190px combined header→body gap. Leave a small radial-glow padding so the soft circle behind the headline still reads. */ padding: 32px 0; text-align: center; position: relative; overflow: hidden; } .qband::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, var(--accent-a06), transparent 70%); } .qband blockquote { position: relative; z-index: 1; font-family: var(--f-h); font-weight: 200; font-size: clamp(20px, 2.8vw, 32px); line-height: 1.35; color: var(--text); max-width: 780px; margin: 0 auto 16px; } .qband blockquote .hi { color: var(--accent-bright); } .qband p { position: relative; z-index: 1; font-size: 14px; color: var(--text-s); } /* ======================================== 19. CTA SECTION ======================================== */ .cta-sec { padding: var(--space-section) 0; text-align: center; position: relative; overflow: hidden; } .cta-particle-canvas { position: absolute; inset: 0; z-index: 0; } .cta-in { position: relative; z-index: 1; } .cta-sec h2 { font-family: var(--f-h); font-weight: 200; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin-bottom: 18px; } .cta-sec .lead { margin: 0 auto 32px; text-align: center; } .cta-paths { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .cta-path { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 32px; text-align: center; min-width: 280px; transition: border-color 0.3s; } .cta-path:hover { border-color: var(--border-h); } .cta-path-label { font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); margin-bottom: 12px; } .cta-path p { font-size: 14px; color: var(--text-s); line-height: 1.6; margin-bottom: 16px; } /* ======================================== 20. FOOTER — 4-column grid ======================================== */ footer { border-top: 1px solid var(--border); padding: 60px 0 40px; position: relative; z-index: 2; } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; } .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 4px 0; } .footer-desc { font-size: 14px; color: var(--text-m); line-height: 1.6; } .footer-col-heading { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 14px; color: var(--text-s); position: relative; transition: color 0.25s var(--ease); /* Tap-target padding so mobile users have a 28px+ hit area while the visible link bounds stay at the natural line-box. */ display: inline-block; padding: 6px 0; } .footer-col ul li a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .footer-col ul li a:hover { color: var(--text); } .footer-col ul li a:hover::after { transform: scaleX(1); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; } .footer-bottom a { display: inline-block; padding: 6px 0; color: inherit; } /* ======================================== 21. THEME SWITCHER DEMO ======================================== */ .theme-switcher { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; } .theme-btn:hover { transform: scale(1.15); } .theme-btn.active { border-color: var(--text); box-shadow: 0 0 12px rgba(255,255,255,0.15); } .theme-btn[data-set-theme="blue"] { background: #2d62ff; } .theme-btn[data-set-theme="pink"] { background: #dd23bb; } .theme-btn[data-set-theme="orange"] { background: #C45D14; } .theme-btn[data-set-theme="green"] { background: #95C11F; } .theme-btn[data-set-theme="cyan"] { background: #009be5; } .theme-label { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); margin-right: 12px; } /* ======================================== 22. ALTERNATE SECTION BACKGROUND ======================================== */ /* Section transitions — gradient fades instead of hard borders */ .sec-alt { background: var(--surface); position: relative; overflow: hidden; } .sec-alt::before, .sec-alt::after { content: ''; position: absolute; left: 0; right: 0; height: 80px; pointer-events: none; z-index: 1; } /* Top: gradient from page bg into surface */ .sec-alt::before { top: -80px; background: linear-gradient(180deg, transparent 0%, var(--surface) 100%); } /* Bottom: gradient from surface back to page bg */ .sec-alt::after { bottom: -80px; background: linear-gradient(180deg, var(--surface) 0%, transparent 100%); } /* Optional: radial glow at section entry for emphasis */ .sec-glow { position: relative; overflow: hidden; } .sec-glow::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 800px; height: 200px; background: radial-gradient(ellipse, var(--accent-a06) 0%, transparent 70%); pointer-events: none; } /* ======================================== 23. CHAR GLOW (from Connect pages) ======================================== */ .char { display: inline; } /* ======================================== 24. DIVIDERS ======================================== */ .divider { height: 1px; background: var(--border); margin: 0; } .divider-spectrum { height: 2px; background: linear-gradient(90deg, var(--logo-blue), var(--logo-green), var(--logo-orange), var(--logo-coral), var(--logo-pink) ); opacity: 0.4; } /* 25. HERO C — Stat-led hero: REMOVED 2026-04-24. Do not reintroduce. Stat-led opener violates the "lead with opportunity, pivot to us" rule. */ /* ======================================== 26. HERO D — Floating icons with converging lines ======================================== */ .hero-icons { padding-top: 160px; padding-bottom: 120px; min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-icons-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-converge-lines { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; height: 100%; pointer-events: none; opacity: 0.6; } .hero-converge-lines line { stroke: var(--accent-a08); stroke-width: 0.5; } .hero-converge-lines .line-bright { stroke: color-mix(in srgb, var(--accent-bright) 12%, transparent); stroke-width: 0.8; } .hero-converge-lines .vanish-dot { fill: color-mix(in srgb, var(--accent-bright) 30%, transparent); } @keyframes heroLineGrow { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } .hero-converge-lines line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: heroLineGrow 2.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) forwards; } .float-circle { position: absolute; width: var(--size); height: var(--size); left: var(--x); top: var(--y); background: linear-gradient(160deg, var(--accent-a26), var(--accent-a06)); border: 1px solid var(--accent-a26); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; animation: floatDrift var(--dur) ease-in-out var(--delay) infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 24px var(--accent-a12); } .float-hex-label { font-family: var(--f-m); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); text-shadow: 0 0 12px var(--accent-a45); } @keyframes floatDrift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(var(--drift-x), calc(var(--drift-y) * 0.7)); } 50% { transform: translate(calc(var(--drift-x) * -0.5), var(--drift-y)); } 75% { transform: translate(calc(var(--drift-x) * -0.3), calc(var(--drift-y) * -0.5)); } } .hero-icons-content { position: relative; z-index: 2; } .hero-icons h1 { font-size: 50px; max-width: 700px; line-height: 1.1; margin-bottom: 40px; } /* ======================================== 27. MEGA MENU — 3-column full version ======================================== */ .mega-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px) scale(0.97); min-width: 720px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; background: rgba(8, 12, 22, 0.97); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1001; box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); overflow: hidden; } .mega-menu.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .mega-col { padding: 20px 16px; } .mega-col + .mega-col { border-left: 1px solid rgba(255,255,255,0.05); } .mega-col-label { font-family: var(--f-m); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-m); padding: 0 8px; margin-bottom: 10px; } .mega-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s; } .mega-item:hover { background: rgba(255,255,255,0.05); } .mega-item .mega-title { transition: color 0.15s; } .mega-item:hover .mega-title { color: #fff; } .mega-icon { font-size: 14px; line-height: 1; flex-shrink: 0; margin-top: 2px; } .mega-title { font-family: var(--f-b); font-weight: 450; font-size: 13px; color: rgba(235,241,251,0.85); line-height: 1.3; } .mega-desc { font-family: var(--f-b); font-weight: 350; font-size: 11px; color: var(--text-m); line-height: 1.4; margin-top: 2px; } /* 28. VERTICAL NAV (vnav) — REMOVED 2026-04-24. Merged with sticky-scroll. */ /* ======================================== 29. ILLUSTRATED CARDS (illust-card) ======================================== */ .illust-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .illust-card { background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s; } .illust-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-bright) 12%, transparent); } .illust-card-visual { padding: 24px; background: rgba(5, 5, 12, 0.3); border-bottom: 1px solid rgba(255,255,255,0.04); position: relative; overflow: hidden; min-height: 260px; display: flex; align-items: center; justify-content: center; } .illust-card-content { padding: 28px; } .illust-card-content h3 { font-family: var(--f-h); font-weight: 200; font-size: 24px; margin-bottom: 12px; color: var(--text); } .illust-card-content p { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.65; color: var(--text-s); margin-bottom: 16px; } .illust-tag { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; display: inline-block; padding: 3px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan) 12%, transparent); color: var(--accent-cyan); margin-bottom: 12px; } /* Terminal card for illustrated section */ .illust-terminal { width: 100%; background: #080d18; border-radius: 8px; overflow: hidden; border: 1px solid var(--accent-a08); } .illust-terminal-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--accent-a06); } .illust-terminal-dot { width: 7px; height: 7px; border-radius: 50%; } .illust-terminal-title { font-family: var(--f-m); font-size: 10px; color: var(--text-m); margin-left: 6px; } .illust-terminal-body { padding: 14px; font-family: var(--f-m); font-size: 11px; line-height: 1.7; min-height: 200px; } .illust-terminal-body .line { opacity: 0; transition: opacity 0.3s var(--ease); } .illust-terminal-body .line.typed { opacity: 1; } .illust-terminal-body .prompt { color: var(--text-m); } .illust-terminal-body .cmd { color: var(--accent-cyan); } .illust-terminal-body .ok { color: #28c840; } .illust-terminal-body .err { color: #ff5f57; } .illust-terminal-body .warn { color: #febc2e; } .illust-terminal-body .val { color: var(--aws); } .illust-terminal-body .muted { color: var(--text-m); } .terminal-cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent-bright); opacity: 0; animation: cursorBlink 1s step-end infinite; vertical-align: text-bottom; margin-left: 2px; } .terminal-cursor.on { opacity: 1; } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* ======================================== 30. DUO CARDS ======================================== */ .duo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .duo-card { border-radius: 20px; position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1px solid var(--border); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s; } .duo-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-bright) 12%, transparent); } .duo-card-content { padding: 40px; height: 100%; display: flex; flex-direction: column; } .duo-card h3 { font-family: var(--f-h); font-weight: 200; font-size: 28px; margin-bottom: 14px; } .duo-card p { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.65; color: var(--text-s); margin-bottom: 24px; } .duo-card-inner { margin-top: auto; background: rgba(5,5,12,0.4); border-radius: 12px; border: 1px solid rgba(255,255,255,0.04); padding: 20px; overflow: hidden; } /* Code tabs */ .code-tabs { display: flex; gap: 0; margin-bottom: 12px; } .code-tab { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-m); padding: 6px 12px; cursor: pointer; border: none; background: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .code-tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--accent-a06); border-radius: 4px 4px 0 0; } .code-block { font-family: var(--f-m); font-size: 12px; line-height: 1.7; color: var(--text-s); background: rgba(5,5,12,0.6); border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 16px; border: 1px solid var(--border); border-top: none; } .code-block .code-prop { color: var(--accent-bright); } .code-block .code-val { color: var(--aws); } @keyframes codeScan { 0%,100% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 95% { top: 100%; opacity: 0; } } /* ======================================== 31. METRIC WALL — 4-column stat viz ======================================== */ .stats-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 80px 0; border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); } .stat-viz-item { display: flex; align-items: center; gap: 32px; } .stat-viz-number { font-family: var(--f-h); font-weight: 200; font-size: 64px; color: var(--text); line-height: 1; } .stat-viz-label { font-family: var(--f-b); font-weight: 350; font-size: 16px; color: var(--text-m); margin-top: 4px; } .stat-viz-lines { flex: 1; display: flex; align-items: center; justify-content: center; } /* ======================================== 32. CARD STYLES — antimetal, glass, specify, gradient-border, terminal, comparison, nested, stat ======================================== */ /* Antimetal inside-border cards */ .cards-antimetal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-antimetal { position: relative; background: var(--surface-card); border-radius: var(--r-lg); padding: 36px 28px; overflow: hidden; transition: transform 0.3s var(--ease); } .card-antimetal::before { content: ''; position: absolute; inset: 1px; border-radius: calc(var(--r-lg) - 1px); border: 1px solid rgba(255,255,255,0.06); pointer-events: none; transition: border-color 0.3s cubic-bezier(0.6, 0.6, 0, 1); } .card-antimetal:hover::before { border-color: rgba(255,255,255,0.12); } .card-antimetal:hover { transform: translateY(-2px); } .card-antimetal .card-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-a12), color-mix(in srgb, var(--accent-cyan) 8%, transparent)); border: 1px solid var(--accent-a15); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .card-antimetal .card-title { font-family: var(--f-h); font-weight: 200; font-size: 24px; margin-bottom: 12px; } .card-antimetal .card-body { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.6; color: var(--text-s); } /* Glass cards */ .cards-glass { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; } .card-glass { position: relative; background: rgba(255,255,255,0.025); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--r-md); padding: 36px 28px; overflow: hidden; } .card-glass::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); opacity: 0; transition: opacity 0.4s var(--ease); } .card-glass:hover::after { opacity: 0.5; } .card-glass-primary { background: radial-gradient(circle at 20% 30%, var(--accent-a08), transparent 50%), radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-cyan) 5%, transparent), transparent 50%), rgba(12, 18, 30, 0.5); } .card-glass .card-title { font-family: var(--f-h); font-weight: 200; font-size: 26px; margin-bottom: 14px; } .card-glass .card-body { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.6; color: var(--text-s); } .spec-list { display: flex; flex-direction: column; gap: 14px; } .spec-item { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .spec-item .spec-key { font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); } .spec-item .spec-value { font-family: var(--f-m); font-size: 11px; color: var(--text-s); } /* Specify contrast cards */ .cards-specify { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-specify { background: rgba(255,255,255,0.025); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 32px 24px; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card-specify:hover { border-color: var(--border-h); box-shadow: inset 0 0 30px var(--accent-a04); } .card-specify .card-tag { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-cyan); margin-bottom: 14px; display: inline-block; padding: 3px 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-cyan) 12%, transparent); } .card-specify .card-title { font-family: var(--f-h); font-weight: 200; font-size: 24px; margin-bottom: 12px; } .card-specify .card-body { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.6; color: var(--text-s); } /* Gradient border card */ @property --gradient-angle { syntax: ''; initial-value: 0deg; inherits: false; } .card-gradient-border { position: relative; padding: 2px; border-radius: var(--r-lg); background: conic-gradient(from var(--gradient-angle), var(--accent), var(--accent-cyan), var(--accent-pink), var(--accent)); animation: rotateBorder 20s linear infinite; } .card-gradient-border:hover { animation-duration: 12s; } @keyframes rotateBorder { to { --gradient-angle: 360deg; } } .card-gradient-border-inner { background: var(--bg); border-radius: calc(var(--r-lg) - 2px); padding: 48px 40px; } .card-gradient-border-inner .card-title { font-family: var(--f-h); font-weight: 200; font-size: 38px; margin-bottom: 16px; } .card-gradient-border-inner .card-body { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.65; color: var(--text-s); margin-bottom: 24px; max-width: 600px; } /* Terminal card */ .card-terminal { background: #080d18; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .terminal-header { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); } .terminal-dot { width: 8px; height: 8px; border-radius: 50%; } .terminal-dot-red { background: #ff5f57; } .terminal-dot-yellow { background: #febc2e; } .terminal-dot-green { background: #28c840; } .terminal-title { font-family: var(--f-m); font-size: 11px; color: var(--text-m); margin-left: 8px; } .terminal-body { padding: 20px; font-family: var(--f-m); font-size: 13px; line-height: 1.7; } .terminal-body .cmd { color: var(--accent-cyan); } .terminal-body .val { color: var(--aws); } .terminal-body .ok { color: var(--logo-green); } .terminal-body .comment { color: var(--text-m); } .terminal-body .prompt { color: var(--text-m); } /* Comparison card */ .card-comparison { display: grid; grid-template-columns: 1fr 1px 1fr; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .comparison-side { padding: 32px 28px; } .comparison-divider { background: var(--border); } .comparison-side .comparison-label { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; } .comparison-without .comparison-label { color: var(--text-m); } .comparison-with .comparison-label { color: var(--accent-bright); } .comparison-side .comparison-item { font-family: var(--f-b); font-weight: 350; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--accent-a04); } .comparison-without .comparison-item { color: var(--text-m); } .comparison-with .comparison-item { color: var(--text-s); } /* Nested card */ .card-nested { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; } .card-nested-inner { background: rgba(20,28,48,0.6); border: 1px solid var(--accent-a06); border-radius: var(--r-md); padding: 24px; } .card-nested-inner .nested-content { font-family: var(--f-m); font-size: 12px; line-height: 1.8; color: var(--text-s); } /* Stat cards */ .cards-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-stat { background: var(--surface-card); border-radius: var(--r-md); padding: 36px 28px; border: 1px solid var(--border); border-top: 2px solid var(--logo-blue); text-align: center; transition: transform 0.3s var(--ease); } .card-stat:nth-child(2) { border-top-color: var(--logo-green); } .card-stat:nth-child(3) { border-top-color: var(--logo-coral); } .card-stat:hover { transform: translateY(-2px); } .card-stat .stat-number { font-family: var(--f-h); font-weight: 200; font-size: 48px; line-height: 1; color: var(--aws); margin-bottom: 8px; } .card-stat .stat-label { font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); } /* ======================================== 33. HOVER CARD VARIANTS ======================================== */ .hover-light-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .hover-light-card { background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 32px; transition: border-color 0.3s ease; } .hover-light-card:hover { border-color: color-mix(in srgb, var(--accent-bright) 18%, transparent); } .hover-light-card h3 { font-family: var(--f-h); font-weight: 200; font-size: 22px; margin-bottom: 8px; } .hover-light-card p { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-m); } /* ======================================== 34. BLOG CARDS ======================================== */ .blog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .blog-filter { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--border); background: transparent; color: var(--text-m); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .blog-filter.active, .blog-filter:hover { background: var(--accent-a12); border-color: var(--accent-a26); color: var(--accent-bright); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .card-blog { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s; } .card-blog:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); } .blog-thumb { aspect-ratio: 16/9; background: rgba(5,5,12,0.4); position: relative; overflow: hidden; } .blog-thumb-inner { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(1,29,56,0.8), rgba(5,5,12,0.9)); transition: transform 0.5s var(--ease); } .blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .card-blog:hover .blog-thumb-inner, .card-blog:hover .blog-thumb img { transform: scale(1.04); } .blog-content { padding: 24px; display: flex; flex-direction: column; gap: 10px; } .blog-category { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-cyan); background: color-mix(in srgb, var(--accent-cyan) 8%, transparent); padding: 3px 10px; border-radius: 9999px; display: inline-block; width: fit-content; } .blog-title { font-family: var(--f-h); font-weight: 200; font-size: 20px; line-height: 1.25; } .blog-excerpt { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.6; color: var(--text-s); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-meta { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); margin-top: auto; padding-top: 8px; } /* ======================================== 35. FAQ SECTION with sticky heading ======================================== */ .faq-sticky { display: grid; grid-template-columns: 280px 1fr; gap: 60px; } .faq-sticky-left { position: sticky; top: 120px; height: fit-content; } .faq-sticky-left h2 { font-family: var(--f-h); font-weight: 200; font-size: 38px; margin-bottom: 16px; } .faq-progress { width: 2px; height: 200px; background: var(--accent-a08); border-radius: 1px; margin-top: 16px; position: relative; } .faq-progress-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--accent-bright); border-radius: 1px; transition: height 0.4s var(--ease); } .faq-item details { border-bottom: 1px solid var(--border); } .faq-item summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; font-family: var(--f-b); font-weight: 400; font-size: 16px; color: var(--text); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-icon { font-family: var(--f-m); font-size: 18px; color: var(--text-m); transition: transform 0.3s var(--ease); } .faq-item details[open] .faq-icon { transform: rotate(45deg); } .faq-answer { overflow: hidden; } .faq-answer-inner { padding: 0 0 20px; } .faq-answer-inner p { font-family: var(--f-b); font-weight: 350; font-size: 15px; line-height: 1.65; color: var(--text-s); } /* ======================================== 36. VIDEO EMBED ======================================== */ .video-embed { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--surface-card); border: 1px solid var(--border); cursor: pointer; } .video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,5,12,0.7)); display: flex; align-items: center; justify-content: center; transition: background 0.3s; } .video-embed:hover .video-overlay { background: linear-gradient(180deg, transparent 30%, rgba(5,5,12,0.8)); } .video-play { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-a26); border: 1px solid var(--accent-a45); display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s; } .video-embed:hover .video-play { transform: scale(1.1); box-shadow: 0 0 30px var(--accent-a45); } .video-play::after { content: ''; width: 0; height: 0; border-left: 18px solid var(--accent-bright); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; } .video-title { position: absolute; bottom: 20px; left: 24px; font-family: var(--f-h); font-weight: 200; font-size: 18px; } .video-duration { position: absolute; top: 16px; right: 16px; font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); background: rgba(5,5,12,0.7); padding: 3px 8px; border-radius: 4px; } /* ======================================== 37. BENTO GRID ======================================== */ .bento-variety { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 16px; } .bento-v-wide { grid-column: span 2; } .bento-v-card { background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: 16px; padding: 28px; overflow: hidden; transition: border-color 0.3s; } .bento-v-card:hover { border-color: var(--border-h); } .bento-v-card h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; margin-bottom: 6px; } .bento-v-card .bento-desc { font-family: var(--f-b); font-weight: 350; font-size: 13px; line-height: 1.55; color: var(--text-m); } .bento-v-illustration { margin-top: 16px; min-height: 100px; display: flex; align-items: center; justify-content: center; } /* Hero bento tile: illustration-dominant, text underneath */ .bento-v-hero { padding: 0; display: flex; flex-direction: column; } .bento-v-illustration-hero { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: rgba(5,5,12,0.4); } .bento-v-illustration-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .bento-v-hero:hover .bento-v-illustration-hero img { transform: scale(1.04); } .bento-v-text { padding: 24px 28px 28px; } /* ======================================== 38. PROCESS FLOW (4 steps) ======================================== */ .process-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: process; } .process-step { position: relative; padding: 32px 20px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); text-align: center; opacity: 0.4; transition: opacity 0.5s var(--ease), border-color 0.3s; } .process-step.active { opacity: 1; border-color: var(--accent-a26); } .process-step::before { counter-increment: process; content: '0' counter(process); font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, var(--text-secondary)); display: block; margin-bottom: 14px; } /* brand rule: text never themed */ .process-step h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; margin-bottom: 8px; } .process-step p { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-s); } /* ======================================== 39. BEFORE/AFTER COMPARISON ======================================== */ .before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .before-after-panel { padding: 0; border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; } .before-after-panel.before { background: rgba(255,95,87,0.04); border-color: rgba(255,95,87,0.12); } .before-after-panel.after { background: var(--accent-a04); border-color: var(--accent-a15); } .before-after-illus { width: 100%; aspect-ratio: 16/9; background: rgba(5,5,12,0.4); overflow: hidden; } .before-after-illus img { width: 100%; height: 100%; object-fit: cover; display: block; } .before-after-body { padding: 24px 28px 28px; } .before-after-label { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; } .before-after-panel.before .before-after-label { color: #ff5f57; } .before-after-panel.after .before-after-label { color: var(--accent-bright); } /* ======================================== 40. FEATURE DEEP-DIVE (two column) ======================================== */ .feature-highlights-stack { display: flex; flex-direction: column; gap: 24px; } .feature-highlight { border-radius: 20px; overflow: hidden; position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; } .feature-highlight-blue { background: linear-gradient(135deg, var(--accent-a45), var(--accent-a12) 60%, rgba(1,29,56,0.5)); } .feature-highlight-cyan { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-cyan) 30%, transparent), color-mix(in srgb, var(--accent-cyan) 10%, transparent) 60%, rgba(1,29,56,0.5)); } .feature-highlight h3 { font-family: var(--f-h); font-weight: 200; font-size: 26px; margin-bottom: 10px; } .feature-highlight p { font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.6; color: rgba(235,241,251,0.8); margin-bottom: 20px; max-width: 360px; } .feature-highlight .badge-new { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255,255,255,0.15); color: #fff; padding: 3px 10px; border-radius: 4px; display: inline-block; margin-bottom: 12px; } .feature-highlight-text { padding: 40px; display: flex; flex-direction: column; justify-content: center; } .feature-highlight .ui-mockup { background: rgba(5,5,12,0.4); border-left: 1px solid rgba(255,255,255,0.06); overflow: hidden; padding: 24px; display: flex; flex-direction: column; justify-content: center; } @keyframes rowHighlight { 0%,100% { background: transparent; } 50% { background: var(--accent-a06); } } .ui-row { padding: 6px 8px; border-radius: 4px; font-family: var(--f-m); font-size: 10px; color: var(--text-m); display: flex; justify-content: space-between; } .ui-row:nth-child(odd) { animation: rowHighlight 4s ease-in-out infinite; } .ui-row:nth-child(even) { animation: rowHighlight 4s ease-in-out 2s infinite; } @keyframes badgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .floating-badge { display: inline-block; padding: 5px 14px; border-radius: 6px; font-family: var(--f-m); font-size: 10px; font-weight: 500; animation: badgeFloat 3s ease-in-out infinite; } /* ======================================== 41. FEATURE CAROUSEL — vertical nav left + visual right ======================================== */ .feature-carousel { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: stretch; } .feature-nav { display: flex; flex-direction: column; gap: 0; } .feature-nav-item { padding: 20px 20px 20px 24px; cursor: pointer; position: relative; border-left: 2px solid transparent; transition: border-color 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s; } .feature-nav-item:hover { background: var(--accent-a04); } .feature-nav-item.active { border-left-color: var(--accent); background: var(--accent-a04); } .feature-nav-item .feature-nav-title { font-family: var(--f-b); font-weight: 400; font-size: 16px; color: var(--text-m); margin-bottom: 4px; transition: color 0.3s; } .feature-nav-item.active .feature-nav-title { color: var(--text); } .feature-nav-item .feature-nav-desc { font-family: var(--f-b); font-weight: 350; font-size: 13px; color: var(--text-m); line-height: 1.5; margin-top: 4px; transition: color 0.3s; } .feature-nav-item.active .feature-nav-desc { color: var(--text-s); } .feature-visual-area { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); min-height: 300px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .feature-visual-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1); padding: 24px; } .feature-visual-panel.active { opacity: 1; } .feature-visual-panel svg { width: 90%; max-height: 90%; } .feature-visual-play { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-a15); border: 1px solid var(--accent-a26); display: flex; align-items: center; justify-content: center; position: absolute; bottom: 20px; right: 20px; cursor: pointer; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s; } .feature-visual-play:hover { transform: scale(1.08); box-shadow: 0 0 20px var(--accent-a26); } .feature-visual-play::after { content: ''; width: 0; height: 0; border-left: 14px solid var(--accent-bright); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } /* ======================================== 42. LINK STYLES ======================================== */ .link-underline { position: relative; color: var(--text-s); transition: color 0.25s var(--ease); } .link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .link-underline:hover { color: var(--text); } .link-underline:hover::after { transform: scaleX(1); } .link-color { color: var(--text-m); transition: color 0.25s var(--ease); } .link-color:hover { color: var(--accent-bright); } .link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--text-s); transition: color 0.25s var(--ease); } .link-arrow span { display: inline-block; transition: transform 0.25s var(--ease); } .link-arrow:hover { color: var(--accent-bright); } .link-arrow:hover span { transform: translateX(4px); } .link-mono { font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); transition: color 0.25s var(--ease); } .link-mono:hover { color: var(--accent-bright); } /* ======================================== 43. SECTION DIVIDER VARIANTS (labeled, light-dot) ======================================== */ .divider-labeled { display: flex; align-items: center; gap: 16px; height: auto; background: none; } .divider-labeled::before, .divider-labeled::after { content: ''; flex: 1; height: 1px; background: var(--border); } .divider-labeled .divider-text { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-m); white-space: nowrap; } .divider-light-dot { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-bright) 10%, transparent) 20%, color-mix(in srgb, var(--accent-bright) 18%, transparent) 50%, color-mix(in srgb, var(--accent-bright) 10%, transparent) 80%, transparent 100%); overflow: visible; } .divider-light-dot::before { content: ''; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-bright) 30%, transparent), transparent); animation: scanTravel 16s ease-in-out infinite; } @keyframes scanTravel { 0% { left: -60px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: calc(100% + 20px); opacity: 0; } } /* ======================================== 44. FLOATING PARTICLES AMBIENT ======================================== */ .particles-container { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: color-mix(in srgb, var(--accent-bright) 6%, transparent); animation: particleFloat linear infinite; } @keyframes particleFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(40px); opacity: 0; } } /* ======================================== 45. THREE-PILLAR FEATURE SECTION ======================================== */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 5vw, 60px); } .pillar .pillar-number { font-family: var(--f-m); font-size: 11px; letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 20px; } .pillar h3 { font-family: var(--f-h); font-weight: 200; font-size: 24px; margin-bottom: 12px; } .pillar p { font-family: var(--f-b); font-weight: 350; font-size: 15px; line-height: 1.65; color: var(--text-s); } /* ======================================== 46. TEXT ANIMATION VARIANTS ======================================== */ /* T1: Character-Level Glow (extended styles) */ .text-char-glow { font-family: var(--f-h); font-weight: 200; font-size: 42px; line-height: 1.15; } .text-char-glow .char, [data-char-glow] .char { display: inline; opacity: 0.25; color: var(--accent-bright); text-shadow: none; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .text-char-glow .char.lit { opacity: 1; color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 60%, transparent), 0 0 24px var(--accent-a18); } .text-char-glow .char.settled { opacity: 1; color: var(--text); text-shadow: none; transition: text-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* T2: Word-by-Word Glow */ .glow-headline { font-family: var(--f-h); font-weight: 200; font-size: 42px; line-height: 1.15; } .glow-word { display: inline-block; opacity: 0; text-shadow: none; transition: opacity 0.4s var(--ease), text-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .glow-word.active { opacity: 1; animation: wordGlowPulse 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes wordGlowPulse { 0% { opacity: 0; text-shadow: none; } 30% { opacity: 1; text-shadow: 0 0 20px var(--accent-a45), 0 0 40px var(--accent-a15); } 100% { opacity: 1; text-shadow: none; } } /* T3: Clip-Path Reveal */ .clip-reveal { font-family: var(--f-h); font-weight: 200; font-size: 42px; line-height: 1.15; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease); } .clip-reveal.visible { clip-path: inset(0 0 0 0); } /* Hero title glow sweep */ .hero-title-anim { background: linear-gradient(90deg, var(--accent-bright) 0%, var(--text) 40%, var(--text) 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: heroGlowSweep 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; } @keyframes heroGlowSweep { 0% { background-position: 100% 0; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-bright) 50%, transparent)); } 60% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-bright) 30%, transparent)); } 100% { background-position: 0% 0; filter: drop-shadow(0 0 0px transparent); } } /* Word swap */ .swap-word { display: inline-block; color: var(--accent-bright); position: relative; min-width: 280px; text-align: left; } .swap-word .word-inner { display: inline-block; animation: wordGlowIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes wordGlowIn { 0% { opacity: 0; filter: blur(4px); text-shadow: 0 0 0 transparent; } 50% { opacity: 1; filter: blur(0); text-shadow: 0 0 24px var(--accent-a45); } 100% { opacity: 1; filter: blur(0); text-shadow: 0 0 0 transparent; } } /* ======================================== 47. CONTACT FORM ======================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .form-group { margin-bottom: 20px; } .form-label { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); display: block; margin-bottom: 8px; } .form-input, .form-textarea { width: 100%; background: rgba(1,29,56,0.3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 16px; font-family: var(--f-b); font-weight: 350; font-size: 16px; color: var(--text); outline: none; transition: border-color 0.25s, box-shadow 0.25s; } .form-input:focus, .form-textarea:focus { border-color: var(--accent-a45); box-shadow: 0 0 0 3px var(--accent-a08); } .form-textarea { min-height: 120px; resize: vertical; } /* ======================================== 48. PRICING GRID ======================================== */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pricing-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 28px; display: flex; flex-direction: column; transition: border-color 0.3s; } .pricing-card:hover { border-color: var(--border-h); } .pricing-card.featured { border-color: var(--accent-a26); background: linear-gradient(180deg, var(--accent-a06), var(--surface-card)); } .pricing-tier { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-cyan); margin-bottom: 8px; } .pricing-name { font-family: var(--f-h); font-weight: 200; font-size: 26px; margin-bottom: 16px; } .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; } .pricing-features li { font-family: var(--f-b); font-weight: 350; font-size: 14px; color: var(--text-s); padding-left: 20px; position: relative; } .pricing-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent-cyan); font-size: 12px; } /* ======================================== 49. TRUST BAR & NEWSLETTER ======================================== */ .trust-bar { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .trust-item { font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); } .trust-divider { width: 1px; height: 20px; background: var(--border); } .newsletter-card { background: rgba(12,18,30,0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r-lg); padding: 48px; max-width: 600px; margin: 0 auto; text-align: center; } .newsletter-form { display: flex; gap: 12px; margin-top: 24px; } .newsletter-form input { flex: 1; } .newsletter-form button { flex-shrink: 0; } /* ======================================== 50. LOGO MARQUEE ======================================== */ .marquee-wrap { overflow: hidden; padding: 40px 0; position: relative; } .marquee-wrap::before, .marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .marquee-track { display: flex; gap: 48px; animation: marqueeScroll 30s linear infinite; width: max-content; } .marquee-track:hover { animation-play-state: paused; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-item { font-family: var(--f-m); font-size: 13px; letter-spacing: 0.05em; color: var(--text-m); white-space: nowrap; opacity: 0.5; transition: opacity 0.3s, color 0.3s; } .marquee-item:hover { opacity: 1; color: var(--text); } /* ======================================== 54. CURSOR SPOTLIGHT ======================================== */ .spotlight-section { position: relative; overflow: hidden; background: repeating-linear-gradient(0deg, transparent, transparent 40px, var(--accent-a04) 40px, var(--accent-a04) 41px), repeating-linear-gradient(90deg, transparent, transparent 40px, var(--accent-a04) 40px, var(--accent-a04) 41px); border-radius: var(--r-lg); padding: 80px 48px; } .spotlight-mask { position: absolute; inset: 0; background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), transparent 0%, rgba(5,5,12,0.85) 100%); pointer-events: none; transition: background 0.08s linear; z-index: 1; } .spotlight-content { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .spotlight-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 28px 22px; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .spotlight-card:hover { background: rgba(20,28,48,0.7); border-color: var(--accent-a15); } .spotlight-card .card-title { font-family: var(--f-h); font-weight: 200; font-size: 22px; margin-bottom: 10px; } .spotlight-card .card-body { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-s); } /* ======================================== 55. HORIZONTAL SCROLL CARDS ======================================== */ /* Horizontal scroll rail. Full-bleed so first card hugs the page gutter, not the .wrap column. Scroll-padding keeps snap points aligned. */ .hscroll-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 16px; } .hscroll-nav { display: flex; gap: 10px; align-items: center; } .horizontal-scroll { display: flex; gap: 20px; overflow-x: auto; /* `proximity` snap (not `mandatory`) — snap on arrow click without fighting the per-frame edge-auto-scroll that runs when the cursor sits in either edge zone. See `.edge-scrolling` below and the `wireEdgeScroll` helper. */ scroll-snap-type: x proximity; padding: 20px 0 32px; -ms-overflow-style: none; scrollbar-width: none; margin-left: calc(-50vw + 50%); width: 100vw; padding-left: max(24px, calc((100vw - 1120px) / 2)); padding-right: max(24px, calc((100vw - 1120px) / 2)); scroll-padding-left: max(24px, calc((100vw - 1120px) / 2)); -webkit-overflow-scrolling: touch; touch-action: pan-x; } /* When edge auto-scroll is driving (mouse parked in an edge zone), suspend snap entirely so each frame's `scrollLeft` assignment isn't rubber-banded back to a snap point. Toggled by JS. */ .horizontal-scroll.edge-scrolling { scroll-snap-type: none; } .horizontal-scroll::-webkit-scrollbar { display: none; } .horizontal-scroll .scroll-card { flex: 0 0 clamp(260px, 24vw, 320px); scroll-snap-align: start; opacity: 1; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); } .horizontal-scroll .scroll-card:hover { transform: translateY(-3px); } .scroll-card-illus { display: flex; flex-direction: column; padding: 0; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .scroll-card-img { aspect-ratio: 4/3; overflow: hidden; background: rgba(5,5,12,0.4); } .scroll-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } .scroll-card-illus:hover .scroll-card-img img { transform: scale(1.04); } .scroll-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; } .scroll-card-body .card-title { font-family: var(--f-h); font-weight: 200; font-size: 22px; color: var(--text); line-height: 1.15; } .scroll-card-body .card-body { font-family: var(--f-b); font-weight: 350; font-size: 13.5px; line-height: 1.55; color: var(--text-s); margin: 0; } /* ======================================== 56. TEAM CARDS ======================================== */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .card-team { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px 24px; text-align: center; transition: transform 0.3s var(--ease); } .card-team:hover { transform: translateY(-3px); } .team-photo { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-a12), color-mix(in srgb, var(--accent-cyan) 12%, transparent)); border: 1px solid var(--accent-a12); margin: 0 auto 16px; } .team-name { font-family: var(--f-h); font-weight: 200; font-size: 20px; margin-bottom: 4px; } .team-role { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 12px; } .team-bio { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-s); } /* ======================================== 57. TIMELINE (Horizontal) — canonical pattern, matches homepage Geometry: dot is 14px with 2px border => 18px total. Centered at (padding-top 28px + border-top 2px + radius 7px) = 37px. Line top: 36.5px. ======================================== */ .timeline-section-h { padding: var(--space-section) 0; position: relative; } .timeline-section-h .lbl { text-align: center; margin-bottom: 12px; } .timeline-section-h h2 { text-align: center; max-width: 720px; margin: 0 auto 48px; font-size: clamp(28px, 3vw, 38px); } .timeline-track-h { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto; padding: 28px 0 0; } .timeline-line-h { position: absolute; top: 36.5px; left: calc(12.5% + 7px); right: calc(12.5% + 7px); height: 1px; background: rgba(255,255,255,0.08); z-index: 0; } .timeline-line-fill-h { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-bright), var(--accent-cyan)); box-shadow: 0 0 6px var(--accent-a26); transition: width 0.5s var(--ease); } .t-era { position: relative; text-align: center; z-index: 1; } .t-era-dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 24px; background: var(--bg); border: 2px solid rgba(255,255,255,0.15); box-sizing: border-box; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease); position: relative; z-index: 2; } .t-era.active .t-era-dot { border-color: var(--accent-bright); background: var(--accent-bright); box-shadow: 0 0 14px var(--accent-bright), 0 0 28px var(--accent-a45); } .t-era-year { font-family: var(--f-m); font-weight: 400; font-size: 22px; color: var(--aws); margin-bottom: 6px; letter-spacing: 0.03em; } .t-era-headline { font-family: var(--f-h); font-weight: 200; font-size: 15px; line-height: 1.35; color: var(--text); margin-bottom: 4px; max-width: 200px; margin-left: auto; margin-right: auto; } .t-era-note { font-family: var(--f-m); font-size: 10.5px; color: var(--text-m); text-transform: uppercase; letter-spacing: 0.1em; } /* ======================================== 58. DEEP-DIVE (Two Column) ======================================== */ .deep-dive { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .deep-dive-text .section-heading, .deep-dive-text h3 { font-size: 34px; margin-bottom: 18px; } .deep-dive-specs { display: flex; flex-direction: column; gap: 12px; } .spec-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } .spec-row-label { font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); } .spec-row-value { font-family: var(--f-m); font-size: 12px; color: var(--text-s); } /* ======================================== 51. BUTTON SHOWCASE EXTRAS ======================================== */ .btn-small { padding: 7px 14px; font-size: 10px; border-radius: 8px; } .btn-icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } /* ======================================== 52. SECTION TRANSITIONS (gradient fades) ======================================== */ .sec-transition-in { position: relative; } .sec-transition-in::before { content: ''; position: absolute; left: 0; right: 0; top: -80px; height: 80px; background: linear-gradient(180deg, transparent 0%, var(--surface) 100%); pointer-events: none; z-index: 1; } .sec-transition-out::after { content: ''; position: absolute; left: 0; right: 0; bottom: -80px; height: 80px; background: linear-gradient(180deg, var(--surface) 0%, transparent 100%); pointer-events: none; z-index: 1; } /* ======================================== R. RESPONSIVE ======================================== */ @media (max-width: 960px) { .nav { width: calc(100vw - 16px); } .nav-links { display: none; } .hero { padding: 0 0 64px; padding-top: 100px; min-height: auto; } section { padding: 64px 0; } .stats-grid { grid-template-columns: 1fr; } .feature-cards { grid-template-columns: 1fr; } .sol-hd { grid-template-columns: 52px 1fr; } .sol-cta { display: none; } .sol-cols { grid-template-columns: 1fr; } .split-layout { grid-template-columns: 1fr; } .sticky-scroll { grid-template-columns: 1fr; } .sticky-scroll-left { position: relative; top: auto; } .ws-grid { grid-template-columns: 1fr; } .stat-strip { flex-direction: column; width: 100%; } .stat { border-right: none; border-bottom: 1px solid var(--border); } .stat:last-child { border-bottom: none; } .qband { padding: 56px 0; } .cta-paths { flex-direction: column; align-items: center; } .footer-grid { grid-template-columns: 1fr 1fr; } .tm-slide { flex: 0 0 min(380px, 85vw); } .mouse-glow { display: none; } .bg-continuity-lines, .bg-line-center, .bg-line-quarter-left, .bg-line-quarter-right { display: none; } .bg-grid { background-size: 48px 48px; } .cta-particle-canvas { display: none; } .sticky-visual { display: none; } .illust-cards-grid { grid-template-columns: 1fr; } .duo-cards { grid-template-columns: 1fr; } .hover-light-grid { grid-template-columns: 1fr; } .feature-highlight { grid-template-columns: 1fr; } .bento-variety { grid-template-columns: 1fr 1fr; } .bento-v-wide { grid-column: span 2; } .stats-viz { grid-template-columns: 1fr; gap: 40px; } .stat-viz-number { font-size: 48px; } .blog-grid { grid-template-columns: 1fr 1fr; } .faq-sticky { grid-template-columns: 1fr; } .faq-sticky-left { position: static; } .contact-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .feature-carousel { grid-template-columns: 1fr; } .feature-nav { flex-direction: row; overflow-x: auto; gap: 0; scrollbar-width: none; } .feature-nav::-webkit-scrollbar { display: none; } .feature-nav-item { border-left: none; border-bottom: 2px solid transparent; padding: 12px 16px; min-width: max-content; } .feature-nav-item.active { border-bottom-color: var(--accent); border-left-color: transparent; } .feature-nav-item .feature-nav-desc { display: none; } .feature-visual-area { min-height: 260px; aspect-ratio: 4/3; } .mega-menu { min-width: auto; grid-template-columns: 1fr; } .process-flow { grid-template-columns: 1fr 1fr; } .before-after { grid-template-columns: 1fr; } .cards-antimetal, .cards-specify, .cards-stat { grid-template-columns: 1fr; } .cards-glass { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } .trust-bar { flex-wrap: wrap; gap: 16px; } .team-grid { grid-template-columns: 1fr 1fr; } .spotlight-content { grid-template-columns: 1fr; } .deep-dive { grid-template-columns: 1fr; } .float-circle { display: none; } .hero-converge-lines { display: none; } } @media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } .hero-b h1 { font-size: 28px; } .blog-grid { grid-template-columns: 1fr; } .bento-variety { grid-template-columns: 1fr; } .bento-v-wide { grid-column: span 1; } .process-flow { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; } .trust-bar { flex-direction: column; gap: 12px; } .trust-divider { width: 40px; height: 1px; } .team-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } .fog-blob { animation: none; } .mouse-glow { display: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ NEW COMPONENTS — added 2026-04-23 Inspired by modal.com + specifyapp.com. All components match brand dark theme with blue/cyan accents. Designed to eliminate wall-of-text by pairing copy with Gemini-rendered 3D isometric illustrations (Neon.com style). ============================================================ */ /* ======================================== 56. ICON TILE ROW (modal.com "Powering any ML workload") N-up tile grid, accent-tinted container, dark tiles with centered 3D isometric illustration + heading + body. Use: offerings overview, capability array, product lineup. ======================================== */ .itr-section { padding: var(--space-section) 0; position: relative; } .itr-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .itr-head h2 { margin-bottom: 0; } .itr-head .lead { max-width: 360px; margin: 0; font-size: 15px; } .itr-container { background: linear-gradient(180deg, var(--accent-a04), var(--accent-a08)); border: 1px solid var(--accent-a12); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; } .itr-container::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 20% 10%, var(--accent-a08), transparent 60%), radial-gradient(ellipse 50% 35% at 85% 85%, color-mix(in srgb, var(--accent-cyan) 8%, transparent), transparent 60%); } .itr-grid { position: relative; z-index: 1; display: grid; gap: 14px; } .itr-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .itr-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .itr-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); } .itr-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); } .itr-grid[data-cols="7"] { grid-template-columns: repeat(7, 1fr); } .itr-tile { background: linear-gradient(180deg, #05070e, #080b18); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); position: relative; overflow: hidden; color: var(--text); text-decoration: none; } .itr-tile:hover { border-color: var(--accent-a26); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-a12), 0 0 40px var(--accent-a08); } .itr-img { aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--accent-a12), transparent 70%); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .itr-img img, .itr-img svg { width: 100%; height: 100%; object-fit: cover; display: block; } .itr-img-fallback { width: 60%; aspect-ratio: 1/1; border-radius: 12px; background: linear-gradient(135deg, var(--accent-a26), color-mix(in srgb, var(--accent-cyan) 30%, transparent)); border: 1px solid var(--accent-a26); } .itr-name { font-family: var(--f-h); font-weight: 200; font-size: 20px; line-height: 1.2; color: var(--text); } .itr-desc { font-family: var(--f-b); font-weight: 350; font-size: 13.5px; line-height: 1.55; color: var(--text-s); } .itr-meta { font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aws); margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); } /* ======================================== 57. FEATURE PAIR GRID (modal.com "Build on a powerful foundation") 2×2 grid, each pair = small icon + heading + body. Use: platform pillars, capability proofs, 4-item breakdowns. ======================================== */ .fpg-section { padding: 96px 0; } .fpg-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .fpg-intro { position: sticky; top: 120px; } .fpg-intro h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin-bottom: 20px; } .fpg-intro .lead { font-size: 16px; color: var(--text-s); } .fpg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; } .fpg-item { display: flex; flex-direction: column; gap: 10px; } .fpg-icon { width: 38px; height: 44px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(160deg, var(--accent-a26), var(--accent-a06)); border: none; display: flex; align-items: center; justify-content: center; color: var(--accent-bright); font-family: var(--f-m); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .fpg-item h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; line-height: 1.25; color: var(--text); margin: 0; } .fpg-item p { font-family: var(--f-b); font-weight: 350; font-size: 14.5px; line-height: 1.6; color: var(--text-s); margin: 0; } /* ======================================== 58. BENTO HERO GRID (specifyapp.com feature grid) 6-up asymmetric grid: 2 wide tiles top, 4 smaller below. Each tile can hold: text only, code snippet, 3D illustration, icon grid, stat callout. Use: hero-alt, "everything we do" at-a-glance, capability showcase. ======================================== */ .bento-hero { padding: 96px 0; } .bento-hero-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(240px, auto); gap: 16px; } .bento-cell { background: linear-gradient(180deg, var(--surface-card), rgba(5,7,14,0.6)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .bento-cell:hover { border-color: var(--border-h); transform: translateY(-2px); } .bento-cell[data-span="2"] { grid-column: span 2; } .bento-cell[data-span="3"] { grid-column: span 3; } .bento-cell[data-span="4"] { grid-column: span 4; } .bento-cell[data-span="6"] { grid-column: span 6; } .bento-cell[data-row-span="2"] { grid-row: span 2; } .bento-cell h3 { font-family: var(--f-h); font-weight: 200; font-size: 22px; line-height: 1.2; color: var(--text); margin: 0; } .bento-cell .bento-body { font-family: var(--f-b); font-weight: 350; font-size: 14.5px; line-height: 1.6; color: var(--text-s); max-width: 520px; } .bento-cell-visual { margin-top: auto; position: relative; min-height: 140px; display: flex; align-items: center; justify-content: center; } .bento-cell-visual img, .bento-cell-visual svg { max-width: 100%; max-height: 240px; display: block; } /* Code tile variant */ .bento-cell.is-code { padding: 20px 22px; } .bento-cell.is-code pre { font-family: var(--f-m); font-size: 12px; color: var(--text-s); line-height: 1.6; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow: auto; margin: 0; } .bento-cell.is-code .tok-k { color: var(--accent-bright); } .bento-cell.is-code .tok-s { color: var(--logo-green); } .bento-cell.is-code .tok-n { color: var(--aws); } .bento-cell.is-code .tok-c { color: var(--text-m); } /* Icon grid tile variant */ .bento-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; margin-top: 8px; } .bento-icon-dot { aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(135deg, var(--accent-a26), color-mix(in srgb, var(--accent-cyan) 30%, transparent)); border: 1px solid var(--accent-a18); display: flex; align-items: center; justify-content: center; color: var(--accent-bright); } .bento-icon-dot svg { width: 18px; height: 18px; } /* Illustration-full tile (big hero): image fills cell, copy overlays at bottom */ .bento-cell.bento-illus-full { padding: 0; overflow: hidden; position: relative; } .bento-illus-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.6s var(--ease); } .bento-cell.bento-illus-full:hover .bento-illus-img { transform: scale(1.04); } .bento-illus-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,12,0.1) 0%, transparent 40%, rgba(5,5,12,0.85) 75%, rgba(5,5,12,0.95) 100%); } .bento-illus-copy { position: relative; z-index: 2; padding: 28px; margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .bento-illus-copy h3 { font-size: 28px; text-shadow: 0 2px 14px rgba(0,0,0,0.4); } /* Illustration-side tile (smaller): image top-right, copy bottom-left */ .bento-cell.bento-illus-side { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; position: relative; } .bento-illus-side-img { width: 100%; height: 55%; object-fit: cover; display: block; } .bento-illus-side-copy { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; } /* Stat tile */ .bento-cell.bento-stat { display: flex; flex-direction: column; gap: 6px; } .bento-stat-num { font-family: var(--f-m); font-weight: 400; font-size: clamp(44px, 4vw, 60px); line-height: 1; color: var(--aws); letter-spacing: -0.02em; } .bento-stat-lbl { font-family: var(--f-h); font-weight: 200; font-size: 18px; color: var(--text); margin-bottom: 4px; } /* Customer logo tile */ .bento-cell.bento-logos { display: flex; flex-direction: column; gap: 12px; } .bento-logos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-top: auto; } .bento-logos-grid span { font-family: var(--f-h); font-weight: 300; font-size: 14px; color: var(--text-m); letter-spacing: 0.02em; white-space: nowrap; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-align: center; transition: color 0.3s, background 0.3s; } .bento-logos-grid span:hover { color: var(--text); background: var(--surface-2); } /* AK Way process row */ .bento-cell.bento-process { padding: 26px 32px 28px; } .bento-cell.bento-process h3 { margin-bottom: 8px; } .bento-process-steps { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; } .bento-step { flex: 1 1 0; min-width: 160px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)); border: 1px solid var(--border); } .bento-step-num { font-family: var(--f-m); font-size: 11px; color: var(--accent-bright); letter-spacing: 0.14em; text-transform: uppercase; } .bento-step-name { font-family: var(--f-h); font-weight: 200; font-size: 16px; color: var(--text); line-height: 1.25; } .bento-step-arrow { color: var(--text-m); font-family: var(--f-m); font-size: 14px; flex-shrink: 0; } /* Cell-level "↗" link arrow in top-right — Stripe pattern */ .bento-cell-arrow { position: absolute; top: 20px; right: 22px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-m); font-family: var(--f-m); font-size: 13px; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; } a.bento-cell:hover .bento-cell-arrow, .bento-cell:hover .bento-cell-arrow { background: var(--accent-a18); color: var(--text); border-color: var(--accent-a26); transform: translate(2px, -2px); } /* Cert hexagon row — visual for "X+ AWS certifications" tile */ .bento-cert-row { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .bento-cert-hex { width: 44px; height: 50px; position: relative; display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(160deg, var(--accent-a26), rgba(0,155,229,0.08)); border: none; font-family: var(--f-m); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-bright); text-align: center; line-height: 1.1; } .bento-cert-hex.dim { background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); color: var(--text-m); } .bento-cert-hex.aws { background: linear-gradient(160deg, rgba(212,150,30,0.28), rgba(212,150,30,0.08)); color: var(--aws); } .bento-cert-more { font-family: var(--f-h); font-weight: 200; font-size: 18px; color: var(--text-m); align-self: center; margin-left: 4px; } /* Code-visual-split — illustration slot now has proper sizing */ .cvs-image { aspect-ratio: 4/3; position: relative; } .cvs-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-md); } .cvs-image::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-md); box-shadow: inset 0 0 40px rgba(123,198,255,0.08); pointer-events: none; } /* ======================================== TIER BADGES + COMPOSITION HIERARCHY INDEX Every component section displays its tier, so agents know which to reach for first when planning a page. ======================================== */ .tier-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-m); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-m); background: rgba(5,5,12,0.5); margin-left: 10px; vertical-align: middle; } .tier-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-m); flex-shrink: 0; } .tier-badge[data-tier="S"] { color: var(--accent-bright); border-color: var(--accent-a26); background: var(--accent-a08); } .tier-badge[data-tier="S"]::before { background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-a45); } .tier-badge[data-tier="A"] { color: var(--text-s); } .tier-badge[data-tier="A"]::before { background: var(--text-s); } .tier-badge[data-tier="B"] { color: var(--text-m); } .tier-badge[data-tier="ghost"] { color: var(--aws); border-color: rgba(212,150,30,0.28); background: var(--aws-soft); } .tier-badge[data-tier="ghost"]::before { background: var(--aws); } .tier-badge[data-tier="deprecated"] { color: #ff5f57; border-color: rgba(255,95,87,0.28); background: rgba(255,95,87,0.06); text-decoration: line-through; } .tier-badge[data-tier="deprecated"]::before { background: #ff5f57; } .tier-index { margin-top: 16px; padding: 32px 32px 28px; background: linear-gradient(180deg, var(--accent-a08), rgba(5,5,12,0.4)); border: 1px solid var(--accent-a15); border-radius: var(--r-lg); } .tier-index h3 { font-family: var(--f-h); font-weight: 200; font-size: 22px; color: var(--text); margin-bottom: 6px; } .tier-index p { font-size: 13.5px; color: var(--text-s); line-height: 1.55; margin-bottom: 20px; max-width: 620px; } .tier-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .tier-list a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: rgba(5,5,12,0.5); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: border-color 0.3s, background 0.3s; } .tier-list a:hover { border-color: var(--accent-a26); background: rgba(5,5,12,0.7); } .tier-list .ti-name { font-family: var(--f-h); font-weight: 200; font-size: 15px; color: var(--text); } .tier-list .ti-why { font-family: var(--f-b); font-size: 11.5px; color: var(--text-s); line-height: 1.4; } @media (max-width: 760px) { .tier-list { grid-template-columns: 1fr; } } /* ======================================== GHOST COMPONENTS — now with demos (2026-04-24) trust-strip, logo-wall, stat-viz-4up, offering-tile-grid, timeline-horizontal, process-flow v2 ======================================== */ /* Trust strip — certifications marquee row */ .trust-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; overflow: hidden; background: rgba(5,5,12,0.4); } .trust-strip-track { display: flex; align-items: center; gap: 48px; flex-wrap: nowrap; font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-m); white-space: nowrap; } .trust-item { display: inline-flex; align-items: center; gap: 10px; color: var(--text-s); } .trust-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); flex-shrink: 0; box-shadow: 0 0 8px var(--accent-a45); } .trust-sep { color: var(--border-h); font-size: 8px; } /* Logo wall — 4-column enterprise customer grid (text-cell variant). * Scoped via :has() so this rule only activates when the wall actually * contains .logo-wall-cell children. The plain .logo-wall (section * container) defined in components.css line 585 stays a block-level * container so inner .logo-wall-grid rows (used by deck trust-strips) * keep their own grid-template-columns. (Disambiguated 2026-05-19 * after the trust-strip dash bug: nested .logo-wall-grid was getting * scoped to 315px / 8-cell = 8px-wide invisible-dash logos.) */ .logo-wall:has(> .logo-wall-cell) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-top: 28px; } .logo-wall-cell { background: rgba(5,5,12,0.6); padding: 28px 20px; display: flex; align-items: center; justify-content: center; font-family: var(--f-h); font-weight: 200; font-size: 18px; color: var(--text-s); letter-spacing: -0.01em; min-height: 80px; transition: color 0.3s, background 0.3s; } .logo-wall-cell:hover { color: var(--text); background: rgba(5,5,12,0.3); } /* Stat-viz-4up — 4 stat cards with speed-line SVGs */ .stat-viz-4up { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } /* Offering tile grid — uniform 4-up (desktop), 2-up (tablet), 1-up (mobile). Equal size, no spanning. */ .offering-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; } .offering-tile { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface-card), rgba(5,5,12,0.5)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color 0.3s, transform 0.3s; } .offering-tile:hover { border-color: var(--accent-a26); transform: translateY(-2px); } .offering-tile .offering-img { width: 100%; aspect-ratio: 3/2; margin-bottom: 12px; border-radius: 10px; overflow: hidden; background: rgba(5,5,12,0.4); } .offering-tile .offering-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .offering-tile .offering-name { font-family: var(--f-h); font-weight: 200; font-size: 20px; color: var(--text); line-height: 1.15; } .offering-tile .offering-desc { font-family: var(--f-b); font-weight: 350; font-size: 13px; line-height: 1.55; color: var(--text-s); } .offering-tile .offering-meta { margin-top: auto; font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright); } .offering-tile.is-cta { background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06)); border-color: var(--accent-a26); } /* Process flow v2 — adds arrows + icons between steps */ .process-flow-v2 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; margin-top: 40px; } .process-step-v2 { background: linear-gradient(180deg, var(--surface-card), rgba(5,5,12,0.5)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: border-color 0.3s; } .process-step-v2:hover { border-color: var(--accent-a26); } .process-step-v2 .step-num { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted, var(--text-secondary)); /* brand rule: text never themed */ } .process-step-v2 .step-icon { width: 44px; height: 50px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(160deg, var(--accent-a26), var(--accent-a06)); border: none; display: flex; align-items: center; justify-content: center; color: var(--accent-bright); font-family: var(--f-m); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .process-step-v2 h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; color: var(--text); line-height: 1.2; } .process-step-v2 p { font-family: var(--f-b); font-size: 13.5px; line-height: 1.55; color: var(--text-s); margin: 0; } .process-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-m); font-family: var(--f-m); font-size: 18px; padding: 0 8px; } @media (max-width: 960px) { .logo-wall:has(> .logo-wall-cell) { grid-template-columns: repeat(2, 1fr); } .stat-viz-4up { grid-template-columns: repeat(2, 1fr); } .offering-grid { grid-template-columns: repeat(2, 1fr); } .timeline-track-h { grid-template-columns: 1fr; gap: 20px; } .timeline-line-h { display: none; } .process-flow-v2 { grid-template-columns: 1fr; } .process-arrow { transform: rotate(90deg); padding: 4px 0; } } @media (max-width: 580px) { .logo-wall:has(> .logo-wall-cell) { grid-template-columns: 1fr 1fr; } } /* ======================================== 60. INDUSTRY ILLUSTRATION CAROUSEL (retool.com pattern) Tall 3:4 cards, illustration fills the card, title + hook overlay at the bottom, arrow in top-right corner. ======================================== */ /* Matches the homepage industries carousel: tall 3:4 cards, 240-300px wide, scroll-snap start, full-bleed track with a gutter so the first card doesn't touch the viewport edge. L/R arrows in the head. */ .ind-carousel-section { padding: var(--space-section) 0; } .ind-carousel-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 28px; } .ind-carousel-head h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin-bottom: 0; max-width: 820px; } .ind-carousel-head .lead { margin: 0; font-size: 15px; max-width: 360px; } .ind-carousel-nav { display: flex; gap: 10px; align-items: center; } .ind-arrow-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--border); color: var(--text-s); font-family: var(--f-m); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); } .ind-arrow-btn:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a08); transform: translateY(-1px); } .ind-arrow-btn:disabled { opacity: 0.3; cursor: default; } .ind-arrow-btn:disabled:hover { border-color: var(--border); color: var(--text-s); background: var(--surface-card); transform: none; } .ind-carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 0 24px; -ms-overflow-style: none; scrollbar-width: none; margin-left: calc(-50vw + 50%); width: 100vw; padding-left: max(24px, calc((100vw - 1120px) / 2)); padding-right: max(24px, calc((100vw - 1120px) / 2)); scroll-padding-left: max(24px, calc((100vw - 1120px) / 2)); } .ind-carousel-track::-webkit-scrollbar { display: none; } .ind-card { flex: 0 0 clamp(240px, 22vw, 300px); aspect-ratio: 3 / 4; scroll-snap-align: start; border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--surface-card); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: flex-end; transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s; text-decoration: none; color: var(--text); } .ind-card:hover { transform: translateY(-4px); border-color: var(--accent-a26); box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-a12); } .ind-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.6s var(--ease); } .ind-card:hover .ind-card-img { transform: scale(1.04); } /* Scrim: previously transparent through the top 40% of the card, which left the eyebrow + headline reading directly over the 3D illustration. Now the dark zone starts at ~30% and ramps continuously to ensure all card text stays legible regardless of which third of the card it occupies. */ .ind-card-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,12,0.35) 0%, rgba(5,5,12,0.45) 30%, rgba(5,5,12,0.78) 60%, rgba(5,5,12,0.92) 85%, rgba(5,5,12,0.96) 100%); } .ind-card-content { position: relative; z-index: 2; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; } .ind-card-name { font-family: var(--f-h); font-weight: 200; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; color: var(--text); letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5); } .ind-card-hook { font-family: var(--f-b); font-weight: 350; font-size: 13px; line-height: 1.45; color: var(--text-s); margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.6); } .ind-card-meta { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-bright); margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } .ind-card-arrow { position: absolute; top: 18px; right: 18px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: rgba(5,5,12,0.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: var(--text); font-family: var(--f-m); font-size: 13px; transition: background 0.3s var(--ease), border-color 0.3s, transform 0.3s var(--ease); } .ind-card:hover .ind-card-arrow { background: var(--accent-a26); border-color: var(--accent-a45); transform: translate(2px, -2px); } /* ======================================== 59. CODE + VISUAL SPLIT (specifyapp.com "Customize output") Left code panel, right 3D illustration or UI mockup. Use: dev-facing proof, "see how it works" reveals. ======================================== */ .cvs-section { padding: 96px 0; } .cvs-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .cvs-left { max-width: 520px; } .cvs-left h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; margin-bottom: 18px; } .cvs-left .lead { color: var(--text-s); margin-bottom: 28px; } .cvs-left ul { display: flex; flex-direction: column; gap: 14px; } .cvs-left ul li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-s); } .cvs-left ul li::before { content: ''; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-a12); border: 1px solid var(--accent-a26); flex-shrink: 0; } .cvs-right { position: relative; display: flex; flex-direction: column; gap: 14px; } .cvs-code-block { background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; font-family: var(--f-m); font-size: 12px; color: var(--text-s); line-height: 1.65; overflow: auto; } .cvs-code-tabs { display: flex; gap: 0; background: rgba(0,0,0,0.6); border: 1px solid var(--border); border-radius: 8px 8px 0 0; padding: 4px 4px 0; } .cvs-tab { font-family: var(--f-m); font-size: 11px; padding: 8px 16px; color: var(--text-m); border-radius: 6px 6px 0 0; cursor: pointer; border: 1px solid transparent; border-bottom: none; } .cvs-tab.active { color: var(--text); background: rgba(255,255,255,0.03); border-color: var(--border); } .cvs-image { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; } .cvs-image img { max-width: 100%; max-height: 100%; display: block; } /* OWASP / key-points card (used by the cvs feature variant + offering pages). */ .owasp-card { background: var(--surface-card); border: 1px solid var(--accent-a26); border-radius: var(--r-lg); padding: 36px 40px; } .owasp-card h3 { font-family: var(--f-h); font-weight: 200; font-size: 22px; color: var(--text); margin-bottom: 8px; } .owasp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; margin-top: 16px; } .owasp-item { font-family: var(--f-b); font-size: 14px; color: var(--text-s); line-height: 1.65; padding-left: 18px; position: relative; } .owasp-item::before { content: '\25B8'; position: absolute; left: 0; color: var(--accent); } .owasp-item strong { color: var(--text); font-weight: 500; } /* brand rule: text never themed */ @media (max-width: 760px) { .owasp-list { grid-template-columns: 1fr; } .owasp-card { padding: 24px 22px; } } /* ======================================== R+. RESPONSIVE for new components ======================================== */ @media (max-width: 960px) { .itr-grid[data-cols="5"], .itr-grid[data-cols="6"], .itr-grid[data-cols="7"] { grid-template-columns: repeat(3, 1fr); } .itr-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } .fpg-layout { grid-template-columns: 1fr; gap: 40px; } .fpg-intro { position: relative; top: auto; } .bento-hero-grid { grid-template-columns: repeat(3, 1fr); } .bento-cell[data-span="2"], .bento-cell[data-span="3"] { grid-column: span 3; } .bento-cell[data-span="4"], .bento-cell[data-span="6"] { grid-column: span 3; } .cvs-layout { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 580px) { .itr-grid[data-cols="3"], .itr-grid[data-cols="4"], .itr-grid[data-cols="5"], .itr-grid[data-cols="6"], .itr-grid[data-cols="7"] { grid-template-columns: repeat(2, 1fr); } .fpg-grid { grid-template-columns: 1fr; gap: 24px; } .bento-hero-grid { grid-template-columns: 1fr; } .bento-cell[data-span="2"], .bento-cell[data-span="3"], .bento-cell[data-span="4"], .bento-cell[data-span="6"] { grid-column: span 1; } .offering-grid { grid-template-columns: 1fr; } .ind-carousel-head { grid-template-columns: 1fr; } .ind-carousel-head h2 { font-size: clamp(26px, 8vw, 32px); } .hscroll-head { grid-template-columns: 1fr; gap: 12px; } .hscroll-nav { justify-content: flex-start; } .ind-carousel-nav { justify-content: flex-start; } .sol-hd { grid-template-columns: 48px 1fr; } .sol-cta { display: none; } } /* ============================================================ === CANONICAL LOGO TREATMENTS + MARQUEE === Promoted into components-full.css 2026-05-09. components-full.css is the stylesheet actually loaded by offering pages, the homepage, workshops, and case-study detail pages — but the canonical 4-context logo treatments and the scrolling .logo-marquee live in components.css (the master design-system bundle). Page renders therefore had no rules for .logo-trust / .logo-card / .logo-hero / .logo-lockup, and no rules for .logo-marquee. This block mirrors those canonical rules verbatim so the marquee on offering pages and the homepage actually scrolls. Source of truth remains components.css; keep these in sync if you edit either side. The logo-band rules in variant-shared.css predate this pass and are kept for any legacy markup still using that pattern. Reduced motion: handled by the global rule earlier in this file (`*, *::before, *::after { animation-duration: 0.01ms !important; }`) which neutralises the marquee scroll for users who request it. ============================================================ */ /* Treatment A: Trust strip / logo wall on dark BG. White silhouettes at uniform brightness (60% rest, 100% hover). */ .logo-trust { height: 30px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.6; transition: opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1); display: block; flex-shrink: 0; } .logo-trust:hover { opacity: 1; } /* Treatment B: Case-study card logo (light/dark card BG). Original colour, confined to 60x40 box, centred. */ .logo-card { width: 60px; height: 40px; object-fit: contain; display: block; margin: 0 auto 12px; } /* Treatment C: Case-study hero logo (top of case-study page, customer-callout, AWS partnership lockup). Original colour. */ .logo-hero { height: 48px; width: auto; max-width: 200px; object-fit: contain; display: block; } /* Treatment D: Customer logo lockup (deck covers, marketing collateral, AWS partnership row). Original colour. */ .logo-lockup { height: 60px; width: auto; max-width: 220px; object-fit: contain; display: block; } /* Customer-logo marquee — canonical scrolling logo strip used on the homepage and on every offering page. The track must be 2x the unique item set so the keyframe `translateX(-50%)` lands the second copy where the first started (seamless infinite scroll). Hover pauses; prefers-reduced-motion neutralises animation via the global rule. */ .logo-marquee { width: 100%; overflow: hidden; position: relative; padding: 32px 0; mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); } .logo-marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: logoScroll 60s linear infinite; } .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; } @keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ======================================== FAQ — common-questions accordion Used on offering pages between AWS competencies and Discovery CTA. ======================================== */ .faq-section { padding: var(--space-section) 0; position: relative; } .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--border); background: var(--surface-card); border-radius: var(--r-md); transition: border-color 0.25s var(--ease); } .faq-item[open] { border-color: var(--accent-a26); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-family: var(--f-h); font-weight: 300; font-size: 18px; color: var(--text); cursor: pointer; list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-toggle { font-family: var(--f-m); font-size: 22px; font-weight: 200; color: var(--accent-bright); transition: transform 0.25s var(--ease); flex-shrink: 0; } .faq-item[open] .faq-toggle { transform: rotate(45deg); } .faq-a { padding: 0 24px 20px 24px; font-family: var(--f-b); font-size: 15px; line-height: 1.7; color: var(--text-s); } /* ======================================== COMPARE — sibling-offering cross-pollination cards ======================================== */ .compare-section { padding: var(--space-section) 0; position: relative; } .compare-grid { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } } .compare-card { display: block; padding: 24px 28px; border: 1px solid var(--border); background: var(--surface-card); border-radius: var(--r-md); position: relative; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); text-decoration: none; color: var(--text); } .compare-card:hover { border-color: var(--accent-a45); transform: translateY(-2px); } .compare-card-name { font-family: var(--f-h); font-weight: 300; font-size: 22px; color: var(--text); margin-bottom: 10px; padding-right: 32px; } .compare-card-when { font-family: var(--f-b); font-size: 14px; line-height: 1.6; color: var(--text-s); margin: 0; } .compare-card-arrow { position: absolute; top: 24px; right: 24px; font-size: 18px; color: var(--accent-bright); transition: transform 0.25s var(--ease); } .compare-card:hover .compare-card-arrow { transform: translateX(4px); }