/* ========================================================================== AURORA — Technosouls Club, ground-up creative redesign ========================================================================== */ :root, [data-theme="dark"] { --au-bg: #07070a; --au-bg-2: #0d0d12; --au-bg-3: #14141b; --au-fg: #f5f3ef; --au-fg-dim: #a5a5b3; --au-fg-low: #50505c; --au-line: rgba(255, 255, 255, 0.07); --au-line-hi: rgba(255, 255, 255, 0.18); --au-cyan: #36bfd1; --au-lime: #d1ff4f; --au-rose: #ff5a36; --au-glow: rgba(54, 191, 209, 0.55); /* themeable glass surfaces */ --au-glass: rgba(13, 13, 18, 0.55); --au-surface: rgba(15, 15, 22, 0.55); --au-surface-hi: rgba(24, 24, 34, 0.7); --au-chip: rgba(18, 18, 26, 0.85); --au-chip-hi: rgba(30, 30, 42, 0.95); --au-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; --au-serif: 'Instrument Serif', Georgia, serif; --au-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --au-ease: cubic-bezier(0.22, 1, 0.36, 1); --au-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --au-edge: 6vw; } /* ----- Light theme ----------------------------------------------------- */ [data-theme="light"] { --au-bg: #f3f1ec; --au-bg-2: #eae7e0; --au-bg-3: #e1ddd4; --au-fg: #101015; --au-fg-dim: #54545f; --au-fg-low: #9a9aa6; --au-line: rgba(16, 16, 21, 0.12); --au-line-hi: rgba(16, 16, 21, 0.26); --au-cyan: #0e8fa0; --au-lime: #6f8f00; --au-rose: #d83c16; --au-glow: rgba(14, 143, 160, 0.4); --au-glass: rgba(250, 249, 246, 0.72); --au-surface: rgba(255, 255, 255, 0.66); --au-surface-hi: rgba(255, 255, 255, 0.92); --au-chip: rgba(255, 255, 255, 0.82); --au-chip-hi: #ffffff; } /* the ambient orbs are tuned for a dark canvas — soften them on light */ [data-theme="light"] .au-bg__orb { mix-blend-mode: multiply; opacity: 0.18; filter: blur(120px); } /* smooth the page-level swap between themes (component hovers keep their own transitions; scoping this to avoids overriding them) */ html.au-theme-ready body { transition: background-color 0.4s var(--au-ease), color 0.4s var(--au-ease); } /* ----- Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--au-bg); color: var(--au-fg); font-family: var(--au-display); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } html { scroll-behavior: smooth; } body { line-height: 1.5; font-weight: 400; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { font-family: inherit; cursor: pointer; } input, textarea, button, select { font: inherit; color: inherit; } ul { list-style: none; padding: 0; margin: 0; } ::selection { background: var(--au-lime); color: var(--au-bg); } /* ========================================================================== AMBIENT BG — drifting glowing orbs (parallax base for the dark theme) ========================================================================== */ .au-bg { position: fixed; inset: -10vmax; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; } .au-bg__orb { position: absolute; display: block; border-radius: 50%; filter: blur(110px); opacity: 0.55; mix-blend-mode: screen; will-change: transform; } .au-bg__orb--cyan { width: 620px; height: 620px; background: radial-gradient(circle, rgba(54, 191, 209, 0.95), transparent 70%); top: -8vmax; left: -8vmax; animation: orbDriftA 28s ease-in-out infinite; } .au-bg__orb--lime { width: 540px; height: 540px; background: radial-gradient(circle, rgba(209, 255, 79, 0.7), transparent 70%); top: 35%; right: -10vmax; animation: orbDriftB 34s ease-in-out infinite; } .au-bg__orb--rose { width: 480px; height: 480px; background: radial-gradient(circle, rgba(255, 90, 54, 0.7), transparent 70%); bottom: -8vmax; left: 35%; animation: orbDriftC 30s ease-in-out infinite; } .au-bg__orb--cyan-b { width: 380px; height: 380px; background: radial-gradient(circle, rgba(54, 191, 209, 0.55), transparent 70%); top: 60%; left: -6vmax; animation: orbDriftA 38s ease-in-out infinite reverse; } .au-bg__orb--lime-b { width: 320px; height: 320px; background: radial-gradient(circle, rgba(209, 255, 79, 0.45), transparent 70%); top: 10%; left: 45%; animation: orbDriftB 42s ease-in-out infinite; } .au-bg__orb--white { width: 260px; height: 260px; background: radial-gradient(circle, rgba(245, 243, 239, 0.25), transparent 70%); bottom: 25%; right: 20%; animation: orbDriftC 36s ease-in-out infinite reverse; } @keyframes orbDriftA { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(120px, 90px) scale(1.12); } 66% { transform: translate(-60px, 140px) scale(0.94); } } @keyframes orbDriftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-140px, -70px) scale(1.18); } } @keyframes orbDriftC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(90px, -110px) scale(1.08); } } /* Make sure every page section sits ABOVE the orb layer */ .au-hero, .au-marquee, .au-section, .au-services, .au-tech, .au-skills, .au-contact, .au-map, .au-foot, .au-stats { position: relative; z-index: 1; } /* ========================================================================== GRAIN OVERLAY ========================================================================== */ .au-grain { position: fixed; inset: 0; pointer-events: none; z-index: 998; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; animation: auGrainShift 7s steps(7) infinite; } @keyframes auGrainShift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-1%, 3%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); } } /* ========================================================================== LOADER ========================================================================== */ .au-loader { position: fixed; inset: 0; background: var(--au-bg); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--au-edge); transition: clip-path 1.2s var(--au-ease) 0.2s; clip-path: inset(0 0 0 0); } .au-loader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; } .au-loader__brand { font-family: var(--au-display); font-weight: 600; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.04em; color: var(--au-fg); } .au-loader__brand em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); } .au-loader__bar { margin-top: 40px; width: min(420px, 60vw); height: 1px; background: var(--au-line); overflow: hidden; } .au-loader__bar>i { display: block; height: 100%; width: 0%; background: var(--au-fg); transition: width 0.18s linear; } .au-loader__pct { margin-top: 18px; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--au-fg-dim); } /* ========================================================================== SCROLL PROGRESS BAR (top) ========================================================================== */ .au-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, var(--au-cyan), var(--au-lime)); z-index: 997; pointer-events: none; transition: width 0.1s linear; } /* ========================================================================== NAV (floating glass pill) ========================================================================== */ .au-nav { position: fixed; top: 20px; left: var(--au-edge); right: var(--au-edge); z-index: 996; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 16px 14px 24px; background: var(--au-glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--au-line); border-radius: 999px; transform: translateY(-180%); transition: transform 0.9s var(--au-ease) 1.6s; } .au-loader.is-done~.au-nav, body.au-ready .au-nav { transform: translateY(0); } .au-nav__brand { display: inline-flex; align-items: center; line-height: 0; padding-right: 14px; border-right: 1px solid var(--au-line); flex-shrink: 0; } .au-nav__brand img { height: 34px; width: auto; max-width: none; object-fit: contain; /* dark theme: render the colour logo as solid white */ filter: brightness(0) invert(1); opacity: 0.95; transition: opacity 0.3s var(--au-ease), filter 0.3s var(--au-ease); } /* light theme: the original colour logo reads correctly — drop the filter */ [data-theme="light"] .au-nav__brand img { filter: none; } .au-nav__brand:hover img { opacity: 1; } .au-nav__items { display: inline-flex; align-items: center; gap: 24px; } .au-nav__items a { font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--au-fg-dim); position: relative; transition: color 0.3s var(--au-ease); } .au-nav__items a:hover, .au-nav__items a.is-active { color: var(--au-fg); } .au-nav__cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--au-fg); color: var(--au-bg); border-radius: 999px; font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.3s var(--au-ease), color 0.3s var(--au-ease); } .au-nav__cta:hover { background: var(--au-lime); } .au-nav__cta span.au-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--au-bg); } /* group the theme icon directly before the "Start a project" CTA */ .au-nav__actions { display: flex; align-items: center; gap: 16px; } /* ----- Theme toggle ---------------------------------------------------- */ .au-theme { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--au-line); background: transparent; color: var(--au-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: border-color 0.3s var(--au-ease), color 0.3s var(--au-ease), background 0.3s var(--au-ease); } .au-theme:hover { border-color: var(--au-line-hi); color: var(--au-cyan); } /* show only the icon matching the current preference */ .au-theme i { display: none; } .au-theme[data-state="dark"] .ico-dark, .au-theme[data-state="light"] .ico-light, .au-theme[data-state="system"] .ico-system { display: inline-block; } .au-theme__label { display: none; } /* wide variant for the mobile menu footer */ .au-theme--wide { width: auto; height: auto; border-radius: 999px; gap: 10px; padding: 12px 20px; font-size: 13px; } .au-theme--wide .au-theme__label { display: inline; font-family: var(--au-mono); font-size: 13px; letter-spacing: 0.02em; } .au-nav__burger { display: none; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1px solid var(--au-line); align-items: center; justify-content: center; color: var(--au-fg); } .au-nav__burger i { display: block; width: 14px; height: 1px; background: var(--au-fg); position: relative; transition: background 0.3s var(--au-ease); } .au-nav__burger i::before, .au-nav__burger i::after { content: ""; position: absolute; left: 0; width: 14px; height: 1px; background: var(--au-fg); transition: transform 0.4s var(--au-ease), top 0.4s var(--au-ease); } .au-nav__burger i::before { top: -5px; } .au-nav__burger i::after { top: 5px; } body.au-menu-open .au-nav__burger i { background: transparent; } body.au-menu-open .au-nav__burger i::before { top: 0; transform: rotate(45deg); } body.au-menu-open .au-nav__burger i::after { top: 0; transform: rotate(-45deg); } /* ========================================================================== FULLSCREEN MOBILE MENU ========================================================================== */ .au-menu { position: fixed; inset: 0; z-index: 994; background: var(--au-bg); padding: 110px var(--au-edge) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--au-ease); pointer-events: none; overflow-y: auto; } .au-menu::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--au-line) 1px, transparent 1px), linear-gradient(to bottom, var(--au-line) 1px, transparent 1px); background-size: 14vw 14vw; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); pointer-events: none; z-index: 0; opacity: 0.4; } body.au-menu-open .au-menu { clip-path: inset(0 0 0 0); pointer-events: auto; } body.au-menu-open { overflow: hidden; } .au-menu__items { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; } .au-menu__items a { font-family: var(--au-display); font-weight: 500; font-size: clamp(38px, 11vw, 80px); line-height: 1.05; letter-spacing: -0.04em; color: var(--au-fg); padding: 6px 0; display: inline-flex; align-items: center; gap: 16px; transition: color 0.3s var(--au-ease), transform 0.5s var(--au-ease); opacity: 0; transform: translateY(20px); } body.au-menu-open .au-menu__items a { opacity: 1; transform: translateY(0); transition: opacity 0.5s var(--au-ease), transform 0.5s var(--au-ease), color 0.3s var(--au-ease); } body.au-menu-open .au-menu__items a:nth-child(1) { transition-delay: 0.18s; } body.au-menu-open .au-menu__items a:nth-child(2) { transition-delay: 0.24s; } body.au-menu-open .au-menu__items a:nth-child(3) { transition-delay: 0.30s; } body.au-menu-open .au-menu__items a:nth-child(4) { transition-delay: 0.36s; } body.au-menu-open .au-menu__items a:nth-child(5) { transition-delay: 0.42s; } body.au-menu-open .au-menu__items a:nth-child(6) { transition-delay: 0.48s; } .au-menu__items a span.au-menu__num { font-family: var(--au-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; color: var(--au-fg-low); align-self: flex-start; margin-top: 14px; } .au-menu__items a:hover, .au-menu__items a:focus { color: var(--au-cyan); } .au-menu__foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; align-items: end; padding-top: 24px; border-top: 1px solid var(--au-line); } .au-menu__foot-block { display: flex; flex-direction: column; gap: 6px; } .au-menu__foot-block h5 { font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-fg-low); margin: 0; font-weight: 400; } .au-menu__foot-block a { color: var(--au-fg); font-size: 16px; } .au-menu__foot-block a+a { font-size: 14px; color: var(--au-fg-dim); } .au-menu__cta { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 26px; background: var(--au-lime); color: var(--au-bg); border-radius: 999px; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 12px; transition: background 0.4s var(--au-ease); } .au-menu__cta:hover { background: var(--au-fg); } .au-menu { display: none; } /* ========================================================================== PRICING OVERLAY (Start a project) ========================================================================== */ .au-pricing { position: fixed; inset: 0; z-index: 999; background: color-mix(in srgb, var(--au-bg) 45%, transparent); backdrop-filter: blur(34px) saturate(160%); -webkit-backdrop-filter: blur(34px) saturate(160%); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--au-ease), visibility 0.45s var(--au-ease); } body.au-pricing-open .au-pricing { opacity: 1; visibility: visible; } body.au-pricing-open { overflow: hidden; } .au-pricing__inner { max-width: 1680px; margin: 0 auto; padding: clamp(80px, 12vh, 130px) var(--au-edge) 60px; transform: translateY(24px); transition: transform 0.55s var(--au-ease); } body.au-pricing-open .au-pricing__inner { transform: translateY(0); } .au-pricing__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 44px; } .au-pricing__head .au-h2 { margin: 10px 0 14px; } .au-pricing__head p { color: var(--au-fg-dim); max-width: 52ch; margin: 0; } .au-pricing__close { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--au-line-hi); background: var(--au-surface); color: var(--au-fg); font-size: 20px; display: grid; place-items: center; transition: background 0.3s var(--au-ease), transform 0.3s var(--au-ease), color 0.3s var(--au-ease); } .au-pricing__close:hover { background: var(--au-rose); color: #fff; transform: rotate(90deg); } /* ----- plan cards ----- */ .au-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; } .au-plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border: 1px solid var(--au-line); border-radius: 22px; background: color-mix(in srgb, var(--au-surface) 55%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); transition: border-color 0.4s var(--au-ease), transform 0.4s var(--au-ease), background 0.4s var(--au-ease); } .au-plan:hover { border-color: var(--au-line-hi); transform: translateY(-4px); } .au-plan--popular { border-color: color-mix(in srgb, var(--au-lime) 60%, transparent); background: color-mix(in srgb, var(--au-surface-hi) 65%, transparent); } .au-plan__badge { position: absolute; top: -12px; left: 26px; padding: 6px 14px; background: var(--au-lime); color: var(--au-bg); border-radius: 999px; font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .au-plan__emoji { font-size: 28px; line-height: 1; } .au-plan__name { font-family: var(--au-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; margin: 14px 0 8px; } .au-plan__tag { color: var(--au-fg-dim); font-size: 16px; margin: 0 0 18px; min-height: 44px; } .au-plan__price { display: flex; flex-direction: column; gap: 2px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--au-line); } .au-plan__price span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-fg-low); } .au-plan__off { font-family: var(--au-mono); font-style: normal; font-size: 10px; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--au-rose); color: #fff; letter-spacing: 0.12em; white-space: nowrap; } .au-plan__price b { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-family: var(--au-display); font-weight: 600; font-size: 46px; letter-spacing: -0.03em; } .au-plan__price b s { font-size: 22px; font-weight: 400; color: var(--au-fg-low); text-decoration-thickness: 1.5px; } .au-plan--popular .au-plan__price b { color: var(--au-lime); } .au-plan__features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; flex: 1; } .au-plan__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--au-fg); } .au-plan__features i { color: var(--au-cyan); font-size: 12px; margin-top: 5px; flex: none; } .au-plan--popular .au-plan__features i { color: var(--au-lime); } .au-plan__ideal { margin-bottom: 22px; } .au-plan__ideal h5 { font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-fg-low); margin: 0 0 6px; font-weight: 400; } .au-plan__ideal span { font-size: 15px; color: var(--au-fg-dim); } .au-plan__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 22px; border: 1px solid var(--au-line-hi); background: transparent; color: var(--au-fg); border-radius: 999px; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.35s var(--au-ease), color 0.35s var(--au-ease), border-color 0.35s var(--au-ease); } .au-plan__cta:hover { background: var(--au-fg); color: var(--au-bg); border-color: var(--au-fg); } .au-plan--popular .au-plan__cta { background: var(--au-lime); color: var(--au-bg); border-color: var(--au-lime); } .au-plan--popular .au-plan__cta:hover { background: var(--au-fg); border-color: var(--au-fg); } /* ----- built-with tech stack ----- */ .au-pricing__stack { padding: 30px 30px 32px; border: 1px solid var(--au-line); border-radius: 22px; background: color-mix(in srgb, var(--au-surface) 55%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); margin-bottom: 32px; } .au-pricing__stack h4 { font-family: var(--au-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 6px; } .au-pricing__stack .au-pricing__note { margin: 0 0 20px; } .au-pricing__chips { display: flex; flex-wrap: wrap; gap: 10px; } .au-stackchip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--au-line-hi); border-radius: 999px; background: var(--au-chip); font-size: 14px; color: var(--au-fg); transition: border-color 0.3s var(--au-ease), background 0.3s var(--au-ease), transform 0.3s var(--au-ease); } .au-stackchip i { font-size: 16px; color: var(--au-cyan); } .au-stackchip:hover { border-color: color-mix(in srgb, var(--au-cyan) 60%, transparent); background: var(--au-chip-hi); transform: translateY(-2px); } /* ----- add-ons + hosting ----- */ .au-pricing__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 32px; } .au-pricing__table { padding: 28px 26px; border: 1px solid var(--au-line); border-radius: 22px; background: color-mix(in srgb, var(--au-surface) 55%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .au-pricing__table h4 { font-family: var(--au-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; margin: 0 0 18px; } .au-pricing__table dl { margin: 0; } /* a single full-width table splits its rows into two columns */ .au-pricing__table--wide { grid-column: 1 / -1; } .au-pricing__table--wide dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .au-pricing__table--wide dl > div { border-top: 1px solid var(--au-line); } .au-pricing__table--wide dl > div:nth-child(-n+2) { border-top: 0; } @media (max-width: 600px) { .au-pricing__table--wide dl { grid-template-columns: 1fr; } .au-pricing__table--wide dl > div:nth-child(2) { border-top: 1px solid var(--au-line); } } .au-pricing__table dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--au-line); } .au-pricing__table dl > div:first-child { border-top: 0; } .au-pricing__table dt { font-size: 14px; color: var(--au-fg); } .au-pricing__table dd { margin: 0; font-family: var(--au-mono); font-size: 13px; color: var(--au-cyan); white-space: nowrap; } .au-pricing__note { margin: 18px 0 0; font-size: 12px; color: var(--au-fg-low); line-height: 1.6; } /* ----- custom CTA strip ----- */ .au-pricing__custom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; padding: 28px 30px; border: 1px solid var(--au-line); border-radius: 22px; background: color-mix(in srgb, var(--au-surface-hi) 60%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .au-pricing__custom h4 { font-family: var(--au-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 6px; } .au-pricing__custom p { margin: 0; color: var(--au-fg-dim); font-size: 14px; max-width: 60ch; } .au-plan__cta--ghost { width: auto; flex: none; } @media (max-width: 940px) { .au-pricing__grid { grid-template-columns: 1fr; } .au-pricing__extras { grid-template-columns: 1fr; } } @media (max-width: 600px) { .au-pricing__head { flex-direction: row; } .au-plan__tag { min-height: 0; } } /* ========================================================================== SECTION INDEX (right side dots) ========================================================================== */ .au-index { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 995; display: flex; flex-direction: column; gap: 18px; pointer-events: none; } .au-index a { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--au-fg-low); transition: color 0.3s var(--au-ease); } .au-index a::before { content: ""; width: 18px; height: 1px; background: var(--au-fg-low); transition: width 0.4s var(--au-ease), background 0.4s var(--au-ease); } .au-index a span { opacity: 0; transform: translateX(8px); transition: opacity 0.3s var(--au-ease), transform 0.3s var(--au-ease); } .au-index a:hover, .au-index a.is-active { color: var(--au-fg); } .au-index a.is-active::before { width: 38px; background: var(--au-cyan); } .au-index a:hover span, .au-index a.is-active span { opacity: 1; transform: translateX(0); } /* ========================================================================== HERO ========================================================================== */ .au-hero { position: relative; min-height: 100vh; padding: 160px var(--au-edge) 80px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; } .au-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--au-line) 1px, transparent 1px), linear-gradient(to bottom, var(--au-line) 1px, transparent 1px); background-size: 8vw 8vw; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); z-index: -2; pointer-events: none; } .au-hero__globe { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: flex; align-items: center; justify-content: center; } .au-hero__globe canvas { width: min(90vw, 720px); height: min(90vw, 720px); opacity: 0.9; } .au-hero__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-fg-dim); } .au-hero__meta span { display: inline-flex; align-items: center; gap: 10px; } .au-hero__meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--au-lime); box-shadow: 0 0 12px var(--au-lime); animation: auBlink 1.6s var(--au-ease) infinite; } @keyframes auBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .au-hero__title { margin: 64px 0 0; font-family: var(--au-display); font-size: clamp(56px, 12vw, 220px); font-weight: 700; line-height: 0.88; letter-spacing: -0.05em; text-transform: none; } .au-hero__title em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); } .au-hero__title .au-outline { color: transparent; -webkit-text-stroke: 1.5px var(--au-fg); } .au-hero__row { display: block; overflow: hidden; } .au-hero__row>span { display: inline-block; transform: translateY(110%); will-change: transform; } body.au-ready .au-hero__row>span { transform: translateY(0); transition: transform 1.2s var(--au-ease); } body.au-ready .au-hero__row:nth-child(1)>span { transition-delay: 0.05s; } body.au-ready .au-hero__row:nth-child(2)>span { transition-delay: 0.18s; } body.au-ready .au-hero__row:nth-child(3)>span { transition-delay: 0.31s; } body.au-ready .au-hero__row:nth-child(4)>span { transition-delay: 0.44s; } .au-hero__foot { margin-top: 80px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: end; } .au-hero__caption { color: var(--au-fg-dim); max-width: 380px; font-size: 15px; line-height: 1.7; } .au-hero__caption strong { color: var(--au-fg); font-weight: 500; } .au-cta { display: inline-flex; align-items: center; gap: 14px; padding: 20px 30px; background: var(--au-fg); color: var(--au-bg); border-radius: 999px; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.4s var(--au-ease), color 0.4s var(--au-ease); justify-self: center; will-change: transform; } .au-cta:hover { background: var(--au-lime); } .au-cta span.au-cta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--au-bg); } .au-hero__scroll { justify-self: end; text-align: right; color: var(--au-fg-dim); font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 14px; } .au-hero__scroll::after { content: ""; width: 1px; height: 60px; background: linear-gradient(to bottom, var(--au-fg-dim), transparent); animation: auScrollLine 2s var(--au-ease) infinite; } @keyframes auScrollLine { 0% { transform: scaleY(0.2); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0.2); transform-origin: bottom; } } /* ========================================================================== MARQUEE ========================================================================== */ .au-marquee { border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); padding: 28px 0; overflow: hidden; background: var(--au-bg); } .au-marquee--reverse { background: transparent; } .au-marquee { background: var(--au-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .au-marquee__track { display: inline-flex; gap: 60px; align-items: center; white-space: nowrap; animation: auMarq 35s linear infinite; } .au-marquee--reverse .au-marquee__track { animation: auMarq 35s linear infinite reverse; } .au-marquee__track span { font-family: var(--au-display); font-weight: 600; font-size: clamp(24px, 3.6vw, 56px); letter-spacing: -0.02em; } .au-marquee__track span.au-outline { color: transparent; -webkit-text-stroke: 1px var(--au-fg); } .au-marquee__track span em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); } .au-marquee__track i.au-mark { color: var(--au-lime); font-size: 22px; display: inline-block; transform: rotate(0deg); transition: transform 0.6s var(--au-ease); } @keyframes auMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== SECTIONS BASE ========================================================================== */ .au-section { padding: 160px var(--au-edge); position: relative; } .au-section--alt { background: transparent; } .au-eyebrow { font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--au-cyan); display: inline-flex; align-items: center; gap: 12px; } .au-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--au-cyan); } .au-h2 { margin: 24px 0 0; font-family: var(--au-display); font-weight: 500; font-size: clamp(40px, 6vw, 96px); line-height: 1.02; letter-spacing: -0.04em; } .au-h2 em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); } .au-h2 .au-outline { color: transparent; -webkit-text-stroke: 1.5px var(--au-fg); } /* ========================================================================== MANIFESTO (sticky stacked words) ========================================================================== */ .au-manifesto { padding: 200px var(--au-edge) 280px; position: relative; } .au-manifesto__lead { font-family: var(--au-display); font-weight: 500; font-size: clamp(34px, 4.8vw, 76px); line-height: 1.1; letter-spacing: -0.03em; max-width: 1100px; margin: 60px 0 100px; } .au-manifesto__lead em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); } .au-manifesto__stack { position: relative; height: 70vh; } .au-manifesto__word { position: sticky; top: 40vh; font-family: var(--au-display); font-size: clamp(72px, 14vw, 220px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: var(--au-fg); text-align: center; pointer-events: none; } .au-manifesto__word:nth-child(1) { color: var(--au-fg); } .au-manifesto__word:nth-child(2) { color: transparent; -webkit-text-stroke: 1.5px var(--au-fg); } .au-manifesto__word:nth-child(3) { color: var(--au-cyan); font-family: var(--au-serif); font-style: italic; font-weight: 400; } .au-manifesto__word:nth-child(4) { color: var(--au-lime); } /* ========================================================================== STATS STRIP ========================================================================== */ .au-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--au-line); border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); } .au-stat { background: var(--au-surface); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding: 50px var(--au-edge); display: flex; flex-direction: column; gap: 14px; transition: background 0.5s var(--au-ease); } .au-stat:hover { background: var(--au-surface-hi); } .au-stat__num { font-family: var(--au-display); font-weight: 700; font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; color: var(--au-fg); display: inline-flex; align-items: baseline; } .au-stat__num em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); font-size: 0.6em; margin-left: 6px; } .au-stat__label { font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--au-fg-dim); } /* ========================================================================== SERVICES (horizontal scroll) ========================================================================== */ .au-services { background: transparent; border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); padding-bottom: 0; } .au-services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 80px; } .au-services__head p { color: var(--au-fg-dim); font-size: 17px; line-height: 1.7; margin: 0; max-width: 480px; justify-self: end; } /* SERVICES — interactive ledger accordion */ .au-services__list { margin-bottom: 120px; } .au-srv { --ac: var(--au-cyan); position: relative; border-top: 1px solid var(--au-line); transition: border-color 0.4s var(--au-ease); } .au-srv:last-child { border-bottom: 1px solid var(--au-line); } .au-srv:hover, .au-srv.is-open { border-top-color: var(--au-line-hi); } .au-srv:nth-child(2) { --ac: var(--au-lime); } .au-srv:nth-child(3) { --ac: var(--au-rose); } .au-srv:nth-child(4) { --ac: var(--au-cyan); } .au-srv:nth-child(5) { --ac: var(--au-lime); } /* the clickable row */ .au-srv__bar { width: 100%; background: none; border: 0; cursor: pointer; color: var(--au-fg); text-align: left; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 36px; padding: clamp(24px, 3.4vw, 46px) 8px; position: relative; isolation: isolate; } /* accent wash that fades in on hover / open */ .au-srv__bar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 12%, transparent), transparent 55%); opacity: 0; transition: opacity 0.5s var(--au-ease); z-index: -1; } .au-srv__bar:hover::before { opacity: 1; } .au-srv.is-open .au-srv__bar::before { opacity: 1; } /* left accent bar grows from 0 when open */ .au-srv__bar::after { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--ac); transform: translateY(-50%); transition: height 0.5s var(--au-ease); box-shadow: 0 0 18px var(--ac); } .au-srv.is-open .au-srv__bar::after { height: 64%; } .au-srv__idx { font-family: var(--au-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--au-fg-low); transition: color 0.4s var(--au-ease); } .au-srv__bar:hover .au-srv__idx, .au-srv.is-open .au-srv__idx { color: var(--ac); } .au-srv__name { font-family: var(--au-display); font-weight: 600; font-size: clamp(28px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.035em; transition: transform 0.5s var(--au-ease); } .au-srv__name em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--ac); } .au-srv__bar:hover .au-srv__name { transform: translateX(14px); } .au-srv__cat { font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--au-fg-dim); } /* plus / minus toggle */ .au-srv__plus { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--au-line); position: relative; flex: none; transition: background 0.4s var(--au-ease), border-color 0.4s var(--au-ease), transform 0.4s var(--au-ease); } .au-srv__plus::before, .au-srv__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: var(--au-fg); transform: translate(-50%, -50%); transition: transform 0.4s var(--au-ease), background 0.4s var(--au-ease); } .au-srv__plus::after { transform: translate(-50%, -50%) rotate(90deg); } .au-srv__bar:hover .au-srv__plus { border-color: var(--ac); } .au-srv.is-open .au-srv__plus { background: var(--ac); border-color: var(--ac); transform: rotate(180deg); } .au-srv.is-open .au-srv__plus::before, .au-srv.is-open .au-srv__plus::after { background: var(--au-bg); } .au-srv.is-open .au-srv__plus::after { transform: translate(-50%, -50%) rotate(0deg); } /* expanding panel — CSS grid-rows trick (no JS height math) */ .au-srv__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--au-ease); position: relative; } .au-srv.is-open .au-srv__panel { grid-template-rows: 1fr; } .au-srv__panelclip { overflow: hidden; min-height: 0; } .au-srv__panelinner { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 720px; padding: 4px 8px 48px; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--au-ease) 0.08s, transform 0.5s var(--au-ease) 0.08s; } .au-srv.is-open .au-srv__panelinner { opacity: 1; transform: none; } .au-srv__icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--au-line); display: inline-flex; align-items: center; justify-content: center; color: var(--ac); font-size: 22px; } .au-srv__desc { color: var(--au-fg-dim); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; margin: 6px 0 22px; } .au-srv__tags { display: flex; flex-wrap: wrap; gap: 8px; } .au-srv__tags span { display: inline-block; padding: 7px 13px; border: 1px solid var(--au-line); border-radius: 999px; font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--au-fg-dim); } /* oversized ghost numeral in the panel */ .au-srv__ghost { position: absolute; right: 8px; bottom: 0; font-family: var(--au-display); font-weight: 700; font-size: clamp(120px, 18vw, 260px); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--ac) 28%, transparent); pointer-events: none; z-index: 0; opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--au-ease) 0.05s, transform 0.6s var(--au-ease) 0.05s; } .au-srv.is-open .au-srv__ghost { opacity: 1; transform: none; } /* ========================================================================== TECH STACK BENTO ========================================================================== */ .au-tech { padding: 160px var(--au-edge); } .au-tech__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; margin-bottom: 80px; } .au-tech__head p { color: var(--au-fg-dim); font-size: 17px; line-height: 1.7; margin: 0; max-width: 460px; justify-self: end; } /* STACK — dual-direction logo conveyor */ .au-tech__belt { display: flex; flex-direction: column; gap: 20px; margin: 0 calc(var(--au-edge) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .au-tech__row { display: flex; overflow: hidden; } .au-tech__track { display: flex; width: max-content; animation: au-belt 42s linear infinite; will-change: transform; } .au-tech__row--rev .au-tech__track { animation-direction: reverse; } /* pause + dim when the belt is hovered (spotlight on the one you touch) */ .au-tech__belt:hover .au-tech__track { animation-play-state: paused; } .au-tech__belt:hover .au-chip { opacity: 0.4; } @keyframes au-belt { to { transform: translateX(-50%); } } .au-tech__set { display: flex; flex: none; padding: 10px 0; } .au-chip { display: inline-flex; align-items: center; flex: none; gap: 18px; margin-right: 24px; padding: 24px 38px; border: 1px solid var(--au-line); border-radius: 999px; background: var(--au-chip); white-space: nowrap; opacity: 1; transition: opacity 0.4s var(--au-ease), border-color 0.4s var(--au-ease), background 0.4s var(--au-ease), transform 0.4s var(--au-ease); } .au-chip img { height: 40px; width: 40px; object-fit: contain; opacity: 0.8; filter: saturate(0.85); transition: opacity 0.4s var(--au-ease), filter 0.4s var(--au-ease), transform 0.4s var(--au-ease); } .au-chip b { font-family: var(--au-mono); font-size: 17px; font-weight: 500; letter-spacing: 0.02em; color: var(--au-fg-dim); transition: color 0.4s var(--au-ease); } /* hovered chip overrides the dim and lights up */ .au-tech__belt:hover .au-chip:hover { opacity: 1; } .au-chip:hover { border-color: var(--au-line-hi); background: var(--au-chip-hi); transform: translateY(-4px); } .au-chip:hover img { opacity: 1; filter: saturate(1.15) drop-shadow(0 6px 20px rgba(54, 191, 209, 0.28)); transform: scale(1.12); } .au-chip:hover b { color: var(--au-fg); } /* ========================================================================== APPROACH / SKILLS ========================================================================== */ .au-skills { background: transparent; border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); padding: 160px var(--au-edge); } /* APPROACH / SKILLS — animated horizontal progress rows */ .au-skills__grid { display: flex; flex-direction: column; margin-top: 80px; } .au-skill { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 28px; padding: 40px 0; border-top: 1px solid var(--au-line); } .au-skill:last-child { border-bottom: 1px solid var(--au-line); } .au-skill__name { grid-column: 1; font-family: var(--au-display); font-weight: 500; font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.025em; line-height: 1.1; transition: color 0.4s var(--au-ease), transform 0.5s var(--au-ease); } .au-skill__pct { grid-column: 2; justify-self: end; font-family: var(--au-mono); font-weight: 500; font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.02em; color: var(--au-cyan); font-variant-numeric: tabular-nums; } .au-skill__pct i { font-style: normal; font-size: 0.5em; opacity: 0.65; margin-left: 2px; } .au-skill__track { grid-column: 1 / -1; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--au-line); overflow: hidden; } .au-skill__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--au-cyan), var(--au-lime)); box-shadow: 0 0 18px rgba(54, 191, 209, 0.45); transition: width 1.4s var(--au-ease); } .au-skill.is-visible .au-skill__fill { width: var(--pct, 80%); } .au-skill:hover .au-skill__name { color: var(--au-cyan); transform: translateX(8px); } /* ========================================================================== CONTACT ========================================================================== */ .au-contact { padding: 200px var(--au-edge); position: relative; } .au-contact__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; margin-bottom: 100px; align-items: end; } .au-contact__big { font-family: var(--au-display); font-weight: 600; font-size: clamp(56px, 9vw, 160px); line-height: 0.95; letter-spacing: -0.05em; margin: 30px 0 0; } .au-contact__big em { font-family: var(--au-serif); font-style: italic; font-weight: 400; color: var(--au-cyan); } .au-contact__side p { color: var(--au-fg-dim); font-size: 17px; line-height: 1.7; margin: 0; max-width: 380px; } .au-contact__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--au-line); border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); margin-bottom: 100px; } .au-channel { background: var(--au-surface); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); padding: 50px 36px; display: flex; flex-direction: column; gap: 16px; transition: background 0.5s var(--au-ease); } .au-channel:hover { background: var(--au-surface-hi); } .au-channel__label { font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--au-fg-dim); } .au-channel__body { font-family: var(--au-display); font-size: 22px; line-height: 1.4; color: var(--au-fg); } .au-channel__body a { display: block; transition: color 0.3s var(--au-ease); } .au-channel__body a:hover { color: var(--au-cyan); } /* Form */ .au-form { background: var(--au-surface); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--au-line); border-radius: 28px; padding: 70px 60px; } .au-form__head { text-align: center; margin-bottom: 50px; } .au-form__head p { margin: 20px auto 0; max-width: 540px; color: var(--au-fg-dim); line-height: 1.7; } .au-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .au-form__grid .au-field--full { grid-column: 1 / -1; } .au-field { position: relative; } .au-field input, .au-field textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--au-line); padding: 20px 0 16px; color: var(--au-fg); font-size: 16px; outline: none; transition: border-color 0.4s var(--au-ease); resize: vertical; font-family: var(--au-display); } .au-field input::placeholder, .au-field textarea::placeholder { color: var(--au-fg-low); } .au-field input:focus, .au-field textarea:focus { border-color: var(--au-cyan); } .au-field .text-danger { color: var(--au-rose); font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.08em; margin-top: 8px; display: block; } .au-form__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 50px; } .au-btn { display: inline-flex; align-items: center; gap: 14px; padding: 22px 36px; background: var(--au-lime); color: var(--au-bg); border: none; border-radius: 999px; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; transition: background 0.4s var(--au-ease), color 0.4s var(--au-ease); will-change: transform; } .au-btn:hover { background: var(--au-fg); } .au-form .alert { grid-column: 1 / -1; margin-top: 24px; padding: 18px 22px; border-radius: 14px; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.06em; border: 1px solid var(--au-line); } .au-form .alert-success { background: rgba(209, 255, 79, 0.08); color: var(--au-lime); border-color: rgba(209, 255, 79, 0.4); } .au-form .alert-danger { background: rgba(255, 90, 54, 0.08); color: var(--au-rose); border-color: rgba(255, 90, 54, 0.4); } /* ========================================================================== FOOTER — simple classic copyright bar ========================================================================== */ .au-foot { background: var(--au-bg); border-top: 1px solid var(--au-line); padding: 32px var(--au-edge); } .au-foot__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--au-display); font-size: 14px; color: var(--au-fg-dim); } .au-foot__copy { margin: 0; color: var(--au-fg-dim); font-size: 14px; } .au-foot__copy a { color: var(--au-fg); transition: color 0.3s var(--au-ease); } .au-foot__copy a:hover { color: var(--au-cyan); } .au-foot__social { display: inline-flex; gap: 10px; } .au-foot__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--au-line); display: inline-flex; align-items: center; justify-content: center; color: var(--au-fg-dim); transition: border-color 0.3s var(--au-ease), color 0.3s var(--au-ease); } .au-foot__social a:hover { border-color: var(--au-cyan); color: var(--au-cyan); } /* ========================================================================== REVEAL / SCRAMBLE / MAGNETIC HELPERS ========================================================================== */ .au-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--au-ease), transform 1s var(--au-ease); } .au-reveal.is-visible { opacity: 1; transform: translateY(0); } .au-reveal-stagger>* { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--au-ease), transform 0.9s var(--au-ease); } .au-reveal-stagger.is-visible>* { opacity: 1; transform: translateY(0); } .au-reveal-stagger.is-visible>*:nth-child(1) { transition-delay: 0.05s; } .au-reveal-stagger.is-visible>*:nth-child(2) { transition-delay: 0.12s; } .au-reveal-stagger.is-visible>*:nth-child(3) { transition-delay: 0.19s; } .au-reveal-stagger.is-visible>*:nth-child(4) { transition-delay: 0.26s; } .au-reveal-stagger.is-visible>*:nth-child(5) { transition-delay: 0.33s; } .au-reveal-stagger.is-visible>*:nth-child(6) { transition-delay: 0.40s; } .au-reveal-stagger.is-visible>*:nth-child(7) { transition-delay: 0.47s; } .au-reveal-stagger.is-visible>*:nth-child(8) { transition-delay: 0.54s; } .au-reveal-stagger.is-visible>*:nth-child(9) { transition-delay: 0.61s; } [data-magnetic] { will-change: transform; } /* ----- HERO ENTRANCE (CSS-driven, fires on body.au-ready) ----- */ /* The row spans already animate via the rule above. These add a gentle fade-in to the meta / caption / cta / scroll cue so the hero feels alive. */ .au-hero__meta>*, .au-hero__caption, .au-cta, .au-hero__scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--au-ease), transform 0.9s var(--au-ease); } body.au-ready .au-hero__meta>*, body.au-ready .au-hero__caption, body.au-ready .au-cta, body.au-ready .au-hero__scroll { opacity: 1; transform: translateY(0); } body.au-ready .au-hero__meta>*:nth-child(1) { transition-delay: 0.5s; } body.au-ready .au-hero__meta>*:nth-child(2) { transition-delay: 0.6s; } body.au-ready .au-hero__caption { transition-delay: 0.9s; } body.au-ready .au-cta { transition-delay: 1.0s; } body.au-ready .au-hero__scroll { transition-delay: 1.1s; } /* ========================================================================== RESPONSIVE ========================================================================== */ /* ===== Tablet (≤ 1100px) ===== */ @media (max-width: 1100px) { :root { --au-edge: 5vw; } /* Section padding */ .au-section { padding-top: 120px; padding-bottom: 120px; } .au-manifesto { padding: 130px var(--au-edge) 180px; } .au-contact { padding: 130px var(--au-edge); } /* Layout collapse */ .au-hero__foot, .au-services__head, .au-tech__head, .au-contact__row { grid-template-columns: 1fr; gap: 40px; } .au-tech__head p, .au-services__head p, .au-contact__side p { justify-self: start; max-width: none; } .au-stats { grid-template-columns: repeat(2, 1fr); } .au-skills__grid { grid-template-columns: repeat(2, 1fr); } .au-form { padding: 50px 36px; } .au-contact__channels { grid-template-columns: 1fr; } /* Hide right index, swap to burger nav */ .au-index { display: none; } .au-nav__items { display: none; } .au-nav__cta { display: none; } /* Keep the theme toggle visible in the bar, pushed to the right just before the burger (the CTA inside stays hidden via the rule above) */ .au-nav__actions { display: flex; margin-left: auto; } .au-nav__burger { display: inline-flex; } .au-menu { display: flex; } /* Hero scroll cue horizontal */ .au-hero__scroll { justify-self: start; flex-direction: row; align-items: center; } .au-hero__scroll::after { width: 60px; height: 1px; background: linear-gradient(to right, var(--au-fg-dim), transparent); animation: none; } } /* ===== Phone (≤ 768px) ===== */ @media (max-width: 768px) { :root { --au-edge: 22px; } /* Sectional padding — much tighter */ .au-section { padding-top: 90px; padding-bottom: 90px; } .au-tech, .au-skills { padding-top: 90px; padding-bottom: 90px; } .au-manifesto { padding: 90px var(--au-edge) 130px; } .au-contact { padding: 100px var(--au-edge); } .au-foot { padding-top: 70px; } /* Nav — full-width bar on phone, only logo + burger */ .au-nav { top: 0; left: 0; right: 0; padding: 12px 16px; gap: 14px; border-left: 0; border-right: 0; border-top: 0; border-radius: 0; background: var(--au-glass); } .au-nav__brand { padding-right: 0; border-right: 0; } .au-nav__brand img { height: 18px; } .au-nav__burger { width: 36px; height: 36px; } /* Hero */ .au-hero { padding-top: 110px; padding-bottom: 60px; min-height: 100svh; min-height: 100vh; } .au-hero__meta { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 10px; letter-spacing: 0.16em; } .au-hero__title { margin-top: 40px; font-size: clamp(48px, 14vw, 92px); letter-spacing: -0.04em; } .au-hero__foot { margin-top: 50px; gap: 24px; } .au-hero__caption { font-size: 14px; line-height: 1.65; } .au-hero__globe canvas { width: 94vw; height: 94vw; } .au-cta { padding: 16px 24px; font-size: 11px; gap: 10px; } /* Marquee — hidden entirely on mobile */ .au-marquee, .au-marquee--reverse { display: none; } /* Manifesto */ .au-manifesto__lead { margin: 30px 0 50px; font-size: clamp(24px, 6.5vw, 40px); line-height: 1.2; } .au-manifesto__stack { height: 50vh; } .au-manifesto__word { top: 32vh; font-size: clamp(56px, 18vw, 120px); } /* Stats */ .au-stats { grid-template-columns: 1fr 1fr; } .au-stat { padding: 32px var(--au-edge); gap: 10px; } .au-stat__num { font-size: clamp(36px, 11vw, 56px); } .au-stat__label { font-size: 10px; } /* Services */ .au-services__head { margin-bottom: 50px; } .au-services__list { margin-bottom: 80px; } .au-srv__bar { grid-template-columns: auto 1fr auto; gap: 16px; } .au-srv__cat { display: none; } .au-srv__panelinner { grid-template-columns: 1fr; gap: 18px; } .au-srv__icon { width: 52px; height: 52px; font-size: 19px; } /* Tech */ .au-tech__head { margin-bottom: 50px; } .au-chip { padding: 18px 28px; margin-right: 16px; gap: 14px; } .au-chip img { height: 30px; width: 30px; } .au-chip b { font-size: 14px; } /* Skills — compact progress rows */ .au-skills__grid { margin-top: 44px; } .au-skill { padding: 26px 0; gap: 10px 18px; } .au-skill__name { font-size: 20px; } .au-skill__pct { font-size: 20px; } .au-skill__track { height: 4px; } /* Contact */ .au-contact__row { margin-bottom: 60px; gap: 24px; align-items: flex-start; } .au-contact__big { margin-top: 20px; } .au-contact__channels { margin-bottom: 50px; } .au-channel { padding: 32px 22px; } .au-channel__body { font-size: 17px; } .au-form { padding: 36px 20px; border-radius: 20px; } .au-form__head { margin-bottom: 32px; } .au-form__head .au-h2 { font-size: clamp(28px, 8vw, 44px); } .au-form__foot { margin-top: 32px; flex-direction: column; align-items: stretch; gap: 20px; } .au-form__foot .g-recaptcha { transform: scale(0.85); transform-origin: left top; margin-bottom: -14px; } .au-btn { padding: 18px 26px; font-size: 11px; justify-content: center; } /* Map */ .au-map iframe { height: 320px; } /* Footer */ .au-foot { padding: 28px var(--au-edge); } .au-foot__bottom { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; } .au-foot__copy { font-size: 13px; } } /* ===== Small phone (≤ 420px) ===== */ @media (max-width: 420px) { :root { --au-edge: 18px; } .au-nav__brand img { height: 16px; } .au-hero__title { font-size: clamp(40px, 15vw, 64px); } .au-stats { grid-template-columns: 1fr; } .au-skills__grid { grid-template-columns: 1fr; } .au-srv__bar { gap: 14px; padding: 22px 4px; } .au-srv__plus { width: 38px; height: 38px; } .au-form__foot .g-recaptcha { transform: scale(0.78); } .au-menu__items a { font-size: clamp(32px, 12vw, 56px); gap: 12px; } .au-menu__foot { grid-template-columns: 1fr; } } /* ============================== Website service (pricing teaser) ============================== */ .au-web { position: relative; overflow: hidden; } .au-web__glow { position: absolute; top: 50%; right: -10%; width: 50vw; height: 50vw; max-width: 720px; max-height: 720px; transform: translateY(-50%); background: radial-gradient(circle, var(--au-glow) 0%, transparent 65%); opacity: 0.5; pointer-events: none; filter: blur(20px); } .au-web__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 56px; align-items: center; } .au-web__lead { margin-top: 26px; max-width: 46ch; color: var(--au-fg-dim); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; } .au-web__perks { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; } .au-web__perks li { display: flex; align-items: center; gap: 12px; font-family: var(--au-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--au-fg); } .au-web__perks i { color: var(--au-lime); font-size: 15px; width: 18px; text-align: center; } /* Price card */ .au-web__card { position: relative; padding: 40px 36px; border: 1px solid var(--au-line-hi); border-radius: 24px; background: var(--au-surface-hi); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); } .au-web__ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 7px 18px; border-radius: 999px; background: var(--au-lime); color: var(--au-bg); font-family: var(--au-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .au-web__cardtag { margin: 8px 0 0; font-family: var(--au-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--au-fg-dim); } .au-web__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 14px 0 0; } .au-web__amt { font-family: var(--au-display); font-weight: 700; font-size: clamp(46px, 6vw, 64px); line-height: 1; color: var(--au-fg); } .au-web__per { font-family: var(--au-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--au-cyan); } .au-web__joke { margin: 16px auto 0; max-width: 34ch; font-size: 13px; line-height: 1.6; color: var(--au-fg-low); } .au-web__cta { margin-top: 28px; } .au-web__fine { display: block; margin-top: 18px; font-family: var(--au-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--au-fg-low); } @media (max-width: 900px) { .au-web__inner { grid-template-columns: 1fr; gap: 40px; } .au-web__perks { grid-template-columns: 1fr; } .au-web__card { max-width: 460px; } } /* ============================== Sticky WhatsApp button ============================== */ .au-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 1000; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; font-size: 30px; text-decoration: none; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); transition: transform 0.25s ease, box-shadow 0.25s ease; animation: au-whatsapp-pulse 2.4s ease-out infinite; } .au-whatsapp:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6); color: #fff; } @keyframes au-whatsapp-pulse { 0% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); } } @media (max-width: 768px) { .au-whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 27px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }