/* ========================================================================== NextGenn Studio — shared stylesheet (v2 "midnight" theme) -------------------------------------------------------------------------- Used by every page (index, services, work, about, contact). THE LOOK (inspired by premium AI-studio sites): - Near-black backgrounds — the dark IS the brand. - Cards are "glass": white at very low opacity + a hairline border. - One sky-blue accent leads (#39A3DB); violet (#6B5CE7) only supports. - Motion everywhere, but subtle: shimmering gradient text, drifting glows, a scrolling marquee, spotlight hovers, a scroll progress bar. HOW THIS FILE IS ORGANISED (mobile-first): - Base styles target phones. - The @media blocks near the bottom add tablet/desktop layout. - Colors, spacing and fonts live as variables in :root, so changing a value in ONE place updates the whole site. SECTION MAP 1. Design tokens (colors, fonts, spacing) 2. Reset & base elements 3. Layout helpers (container, section, eyebrow, headings) 4. Buttons 5. Brand / logo 6. Navbar 7. Hero (home) + page hero (inner pages) 8. Marquee — the scrolling text band (NEW) 9. Benefit callouts ("What we make") 10. Work tiles (selected work + portfolio) 11. Feature / "why directed AI" split 12. Service cards 13. Categories band 14. Why NextGenn (reasons) 15. Process steps 16. CTA band 17. Footer 18. Contact form 19. Scroll progress bar (NEW) 20. Spotlight hover (NEW) 21. Scroll-reveal — "liquid glass" defrost + light sweep 22. Reduced-motion safety switch 23. Responsive breakpoints (~640px and ~960px) 24. Comparison table — "how NextGenn compares" (services) (NEW) 25. Pricing tiers — three packages, middle highlighted (services) (NEW) 26. FAQ accordion — native
, works with JS off (services) (NEW) 27. Testimonials — placeholder client quote cards (home) (NEW) 28. Feature strip — "What we make": 3 equal divider columns (home) (NEW) 29. Why rows — "Built to make products move": open rows (home) (NEW) ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS — the brand palette + key sizes, all in one place. -------------------------------------------------------------------------- */ :root { /* Backgrounds: near-black. Sections alternate between two barely different blacks so the page still has gentle "bands". */ --bg: #050507; /* page background — almost pure black */ --bg-alt: #0A0A0E; /* a whisper lighter, for alternating sections */ /* Surfaces are translucent white — on black this reads as "glass". */ --surface: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.06); /* Accents: sky blue leads, violet supports (used sparingly) */ --blue: #39A3DB; --violet: #6B5CE7; /* Text colors */ --ink: #F5F5F7; /* ghost white — primary text */ --muted: #9A9AA7; /* cool gray — body/secondary text */ --slate: #5C5C6B; /* dim gray — subtle meta/captions */ /* Hairline borders (white at low opacity reads as a soft line on black) */ --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.15); /* The signature blue → violet gradient, reused on text, buttons, borders */ --gradient: linear-gradient(135deg, var(--blue), var(--violet)); --gradient-soft: linear-gradient(135deg, rgba(57,163,219,0.10), rgba(107,92,231,0.10)); /* Fonts loaded via in each page's */ --font-head: 'Space Grotesk', system-ui, -apple-system, sans-serif; /* headings */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* body text */ /* Shape & spacing */ --radius: 20px; /* default corner roundness */ --radius-sm: 12px; --nav-h: 76px; /* navbar height (used for scroll offsets) */ --maxw: 1180px; /* max content width */ } /* -------------------------------------------------------------------------- 2. RESET & BASE — start every browser from the same place. -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; /* width includes padding + border — simpler math */ } html { scroll-behavior: smooth; /* anchor links glide instead of jumping */ scroll-padding-top: var(--nav-h); /* keep targets clear of the sticky nav */ -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* the decorative glows can extend past the edge */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Headings use the Sora display font */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; } ul { list-style: none; } /* A clear focus ring for keyboard users (accessibility) */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; } /* -------------------------------------------------------------------------- 3. LAYOUT HELPERS -------------------------------------------------------------------------- */ /* Centers content and caps line length for readability */ .container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } /* Vertical rhythm between sections (desktop bumps this up later) */ .section { padding: 4.5rem 0; position: relative; } /* A slightly lighter band to separate a section from its neighbours. The band now FADES in at the top and out at the bottom (instead of a hard edge), and a faint blue bloom sits at its top — so each section melts into the next rather than cutting. */ .section--alt { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(57, 163, 219, 0.06), transparent 70%), linear-gradient(180deg, transparent 0%, var(--bg-alt) 22%, var(--bg-alt) 78%, transparent 100%); } /* Paints text with the brand gradient — and slowly shimmers it. The gradient is wider than the text (200%) and the animation slides it across, so headline words feel alive without being distracting. */ .gradient-text { background: linear-gradient(110deg, var(--blue), var(--violet), var(--blue)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } @keyframes shimmer { to { background-position: 200% center; } } /* Small UPPERCASE label that sits above each section headline */ .eyebrow { display: inline-block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.74rem; font-weight: 600; color: var(--blue); margin-bottom: 1rem; } /* Centered heading block at the top of a section */ .section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; } .section-head h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); } .section-sub { color: var(--muted); margin-top: 1rem; font-size: 1.02rem; } /* Generic responsive grid (one column on phones; widened in @media) */ .grid { display: grid; gap: 1.25rem; } /* A centered button sitting under a grid */ .section-action { text-align: center; margin-top: 2.75rem; } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.6rem; border-radius: 999px; /* fully rounded pill */ font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; cursor: pointer; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } /* Primary button — the brand gradient with a blue glow that intensifies on hover, like a light turning up */ .btn-gradient { background: var(--gradient); color: #fff; box-shadow: 0 6px 24px rgba(57, 163, 219, 0.30); } .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 38px rgba(57, 163, 219, 0.45); } /* Secondary button — glassy outline that lights up blue on hover */ .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { transform: translateY(-2px); border-color: var(--blue); background: rgba(57, 163, 219, 0.08); } /* Larger variant for hero/CTA */ .btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; } /* -------------------------------------------------------------------------- 5. BRAND / LOGO (icon + wordmark, reused in nav and footer) -------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 0.6rem; } /* The transparent logo icon sits directly on the dark theme (~40px tall) */ .brand-logo { height: 40px; width: auto; } .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--ink); } /* -------------------------------------------------------------------------- 6. NAVBAR — a floating "glass pill" that hovers over the page. The outer .navbar is an invisible sticky strip; the visible bar is .navbar-inner — a rounded frosted capsule. JS still adds .scrolled once the page moves, which darkens the pill and lifts it with shadow. -------------------------------------------------------------------------- */ .navbar { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; } /* The capsule itself — frosted glass from the very first pixel */ .navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 1.5rem, 1060px); /* a touch narrower than the content, so it clearly "floats" */ min-height: 56px; padding: 0.4rem 0.55rem 0.4rem 1.05rem; /* tighter right side — the CTA pill sits there */ border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 10, 14, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Scrolled: the pill darkens and gains a soft drop shadow */ .navbar.scrolled .navbar-inner { background: rgba(7, 7, 10, 0.8); border-color: var(--line-strong); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); } .nav-link { position: relative; color: var(--ink); opacity: 0.72; font-size: 0.96rem; font-weight: 500; transition: opacity 0.2s ease; } .nav-link:hover { opacity: 1; } /* The current page's link: full opacity + a small gradient underline */ .nav-link.is-active { opacity: 1; } .nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--gradient); } /* Hamburger button — three bars; hidden on desktop (see @media) */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; background: none; border: 1px solid var(--line-strong); border-radius: 999px; /* round, to match the pill bar */ cursor: pointer; } .nav-toggle span { height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } /* When open, morph the three bars into an X */ .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu: a rounded glass card that drops down just below the pill */ .nav-menu { display: none; position: absolute; top: calc(var(--nav-h) - 4px); left: 0.75rem; right: 0.75rem; flex-direction: column; gap: 1.1rem; padding: 1.5rem 1.4rem 1.7rem; background: rgba(7, 7, 10, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); } .nav-menu.open { display: flex; } /* The CTA is slightly slimmer than a normal button so it nests in the pill. (On mobile it spans the dropdown's width.) */ .nav-cta { margin-top: 0.25rem; padding: 0.62rem 1.3rem; font-size: 0.92rem; } /* The "Free Sample" link is a special offer, so it gets a creative pill: a gradient hairline border with a ✦ sparkle, a soft pulsing glow to catch the eye, and a full gradient fill on hover / when it's the current page. */ .nav-free { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.95rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: var(--ink); opacity: 1; border: 1.5px solid transparent; background: linear-gradient(rgba(12, 12, 17, 0.85), rgba(12, 12, 17, 0.85)) padding-box, var(--gradient) border-box; animation: free-glow 2.8s ease-in-out infinite; } .nav-free::before { content: "✦"; color: var(--blue); font-size: 0.85em; line-height: 1; } .nav-free:hover, .nav-free.is-active { color: #fff; background: var(--gradient) padding-box, var(--gradient) border-box; } .nav-free:hover::before, .nav-free.is-active::before { color: #fff; } .nav-free.is-active::after { display: none; } /* pill replaces the underline */ @keyframes free-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(57, 163, 219, 0); } 50% { box-shadow: 0 0 16px 0 rgba(57, 163, 219, 0.40); } } /* -------------------------------------------------------------------------- 7b. PROMO BAR — slim sitewide announcement for the free-sample offer. It's created in main.js so every page gets it automatically (same idea as the scroll progress bar), and it's dismissible. It sits in normal flow above the sticky navbar, so it scrolls away and the navbar then pins to the top — no offset juggling needed. -------------------------------------------------------------------------- */ .promo-bar { position: relative; z-index: 90; /* under the navbar (100), above page content */ display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 2.75rem; /* extra right padding leaves room for the × */ text-align: center; background: var(--gradient); color: #fff; font-size: 0.9rem; line-height: 1.3; } .promo-bar-link { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; color: #fff; } .promo-bar-spark { opacity: 0.85; } /* Keep the ✦ and "First time here?" glued together as one wrap unit, so the star always sits just left of the headline and the rest of the message flows onto the next line on narrow screens. */ .promo-bar-head { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .promo-bar-cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .promo-bar-close { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: none; border: none; border-radius: 50%; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease, background 0.2s ease; } .promo-bar-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); } /* -------------------------------------------------------------------------- 7. HERO -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; /* keep the blurred glows from making scrollbars */ /* Cinematic: the hero fills the whole first screen (minus the navbar). svh = "small viewport height" — the safe height on phones where browser bars shrink and grow; the vh line above it is the fallback. */ min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: flex; /* lets us center the content vertically */ align-items: center; justify-content: center; padding: 3.5rem 0 5.5rem; /* bottom padding reserves room for the scroll cue */ text-align: center; } /* A faint engineering-grid backdrop. The mask fades it out toward the bottom so it feels like light falling from above, not wallpaper. */ .hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, black, transparent 78%); mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, black, transparent 78%); pointer-events: none; } /* Decorative blurred color blobs floating behind the hero text. They drift slowly so the dark never feels static. Blue is brighter than violet on purpose — blue leads this palette. */ .glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(130px); /* heavy blur = soft ambient light */ pointer-events: none; /* never block clicks */ z-index: 0; animation: glow-drift 16s ease-in-out infinite; } .glow-blue { background: var(--blue); opacity: 0.22; top: -200px; left: -160px; } .glow-violet { background: var(--violet); opacity: 0.14; bottom: -240px; right: -160px; animation-delay: -8s; /* offset so the two never move in sync */ } @keyframes glow-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, 30px) scale(1.15); } } .hero-inner { position: relative; z-index: 1; } /* sit above the glows */ /* In the hero, the little label becomes a glass chip — a quiet premium badge */ .hero-inner .eyebrow { border: 1px solid var(--line-strong); background: var(--surface); padding: 0.45rem 0.95rem; border-radius: 999px; margin-bottom: 1.6rem; } .hero-title { /* The min keeps long words from overflowing narrow phones; the max keeps it bold and oversized on desktop. overflow-wrap is a safety net so a single long word always breaks instead of spilling past the screen edge. */ font-size: clamp(2.4rem, 7.5vw, 5.4rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1.4rem; max-width: 16ch; margin-inline: auto; overflow-wrap: break-word; } .hero-sub { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 500; color: var(--ink); max-width: 640px; margin: 0 auto 2.4rem; /* the sub now leads straight into the buttons */ } /* The word that cycles (Beauty → Fashion → …). JS swaps the text and re-adds .swap; this animation slides the new word up into place. */ .rotate-word { display: inline-block; font-weight: 700; } .rotate-word.swap { animation: word-in 0.45s ease; } @keyframes word-in { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: none; } } /* The two hero buttons, side by side (stack on the smallest screens) */ .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-bottom: 2.5rem; } /* Small trust line under the hero buttons */ .trust { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.85rem; font-size: 0.84rem; color: var(--muted); } .trust strong { color: var(--ink); font-weight: 600; } .trust .dot { color: var(--slate); } /* On the page-hero variant (e.g. the free-sample offer), give the CTA room to breathe below the paragraph instead of hugging it. */ .page-hero .hero-cta { margin-top: 1.9rem; margin-bottom: 0; } /* Offer highlights — icon-topped cards under the free-sample hero CTA. A line icon in a gradient chip on top, a short label below. */ .offer-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 2.1rem; padding: 0; list-style: none; } .offer-card { flex: 0 0 106px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem; padding: 1.05rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid rgba(57, 163, 219, 0.18); background: var(--gradient-soft); /* subtle blue→violet wash */ transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .offer-card:hover { transform: translateY(-3px); border-color: rgba(57, 163, 219, 0.5); box-shadow: 0 12px 30px rgba(57, 163, 219, 0.15); } /* Vivid gradient chip with a white icon — the pop of colour for the row */ .offer-card-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--gradient); color: #fff; box-shadow: 0 6px 16px rgba(57, 163, 219, 0.32); } .offer-card-icon svg { width: 21px; height: 21px; } .offer-card span { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.25; } /* Scroll cue — a small round glass button pinned to the hero's bottom edge. It bobs gently to invite scrolling and links to the section below. The base transform keeps it horizontally centered; the animation re-states that X offset while adding the vertical bob. */ .scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 1; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); animation: cue-bob 2.6s ease-in-out infinite; transition: color 0.2s ease, border-color 0.2s ease; } .scroll-cue:hover { color: var(--ink); border-color: var(--blue); } .scroll-cue svg { width: 18px; height: 18px; } @keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* --- Inner-page hero (services / work / about / contact) --- */ .page-hero { position: relative; overflow: hidden; text-align: center; padding: 4rem 0 2.5rem; } .page-hero .hero-title { font-size: clamp(2.1rem, 6vw, 3.6rem); max-width: 20ch; } .page-hero-sub { color: var(--muted); max-width: 620px; margin: 1rem auto 0; font-size: 1.05rem; } /* -------------------------------------------------------------------------- 8. MARQUEE — an endless scrolling band of what we do. The track holds the word list TWICE; the animation slides the track exactly half its width, then loops — so the seam is invisible. -------------------------------------------------------------------------- */ .marquee { overflow: hidden; padding: 1.05rem 0; /* Hairlines above and below that FADE OUT toward the screen edges — even these lines never read as a hard cut. (No background color anymore, so the band sits seamlessly on the page.) */ border-block: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent) 1; } .marquee-track { display: flex; align-items: center; gap: 2.75rem; width: max-content; /* as wide as its content needs */ animation: marquee-scroll 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } /* let people read */ .marquee-track span { font-family: var(--font-head); font-weight: 700; font-size: clamp(0.92rem, 2.2vw, 1.2rem); text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; /* never wrap mid-phrase */ color: rgba(245, 245, 247, 0.38); /* quiet, watermark-like text */ } .marquee-track .star { color: var(--blue); font-size: 0.85em; } @keyframes marquee-scroll { to { transform: translateX(-50%); } /* half = one full copy of the list */ } /* -------------------------------------------------------------------------- 8b. MEDIA MARQUEE — an endless strip of image + video thumbnails, used on the Pricing page to show real on-model work right under the prices. Same loop trick as the text marquee: the track holds the set TWICE and slides exactly half its width. Edges fade out via a mask so thumbnails glide in and out instead of cutting off. -------------------------------------------------------------------------- */ .media-marquee { overflow: hidden; padding: 0.5rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .media-marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee-scroll 55s linear infinite; } .media-marquee:hover .media-marquee-track { animation-play-state: paused; } /* Each thumbnail — all the creatives are landscape 4:3, so we lock that ratio and crop with object-fit so the strip stays perfectly even. */ .media-thumb { flex: 0 0 auto; width: clamp(230px, 27vw, 330px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); transition: transform 0.3s ease, border-color 0.3s ease; } .media-thumb:hover { transform: translateY(-4px); border-color: rgba(57, 163, 219, 0.45); } /* -------------------------------------------------------------------------- 9. BENEFIT CALLOUTS — short, honest selling points (no fake stats) -------------------------------------------------------------------------- */ .benefit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .benefit:hover { transform: translateY(-4px); border-color: rgba(57, 163, 219, 0.45); background: var(--surface-2); } .benefit h3 { font-size: 1.15rem; margin-bottom: 0.4rem; } .benefit p { color: var(--muted); font-size: 0.96rem; } /* The icon badge shared by benefits / services / reasons / contact cards. "Neon glass chip": a dark glass tile whose gradient hairline border slowly shimmers (same animation the headlines use), with the icon glowing neon blue over a soft pool of light. Hovering the card turns the glow up. */ .badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 1.1rem; color: var(--blue); /* the icons draw in currentColor */ /* The "gradient border" trick — two stacked backgrounds: layer 1 (top): a solid near-black tile painted only INSIDE the border; layer 2 (under): the brand gradient, peeking through the transparent 1px border — so only the hairline edge shows the gradient. */ border: 1px solid transparent; background: linear-gradient(#101017, #101017) padding-box, linear-gradient(110deg, var(--blue), var(--violet), var(--blue)) border-box; background-size: auto, 200% auto; /* wide gradient → it can slide */ animation: shimmer 6s linear infinite; /* same shimmer as .gradient-text */ /* a whisper of light along the top edge, like glass catching the room */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); } /* The soft pool of light the icon sits on */ .badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 55%, rgba(57, 163, 219, 0.28), transparent 72%); } /* The icon itself is neon — it carries its own glow */ .badge svg { position: relative; /* sits above the light pool */ width: 22px; height: 22px; filter: drop-shadow(0 0 7px rgba(57, 163, 219, 0.75)); transition: color 0.3s ease, filter 0.3s ease; } /* Hovering the surrounding card turns the dimmer up: hotter, wider glow */ .benefit:hover .badge svg, .card:hover .badge svg, .reason:hover .badge svg, .contact-card:hover .badge svg { color: #7CCDF2; /* a lighter, hotter blue */ filter: drop-shadow(0 0 12px rgba(57, 163, 219, 1)); } /* -------------------------------------------------------------------------- 10. WORK TILES — gradient placeholders, clearly swappable for real images. To use a real image later, replace the
with: ... -------------------------------------------------------------------------- */ .work-tile { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .work-tile:hover { transform: translateY(-5px); border-color: rgba(57, 163, 219, 0.5); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } /* The gradient "image" area. A subtle dot pattern adds texture. */ .work-media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 1rem; background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px); background-size: 18px 18px; overflow: hidden; } .work-media { transition: transform 0.4s ease; } /* Real project media (image or video) fills the 4:3 tile. object-fit: cover crops any overflow so nothing ever looks stretched. */ .work-img { position: absolute; inset: 0; /* pin to all four edges of the tile */ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } /* Gentle zoom on the media when hovering the tile, for a lively feel */ .work-tile:hover .work-img { transform: scale(1.05); } /* Category chip in the top-left corner of each tile */ .work-cat { position: absolute; top: 0.9rem; left: 0.9rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: rgba(5, 5, 7, 0.55); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.3rem 0.65rem; border-radius: 999px; } /* "Project coming soon" hint sitting on the gradient */ .work-soon { font-size: 0.8rem; font-weight: 500; color: rgba(245, 245, 247, 0.85); } .work-info { padding: 1rem 1.1rem 1.2rem; } .work-title { font-size: 1.05rem; margin-bottom: 0.15rem; } .work-kind { color: var(--muted); font-size: 0.88rem; } /* Six gradient variations so a grid of tiles never looks repetitive. All are dark and moody now — blue leads, violet only tints. */ .grad-1 { background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px), linear-gradient(135deg, rgba(57,163,219,0.45), rgba(107,92,231,0.18)); } .grad-2 { background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px), linear-gradient(135deg, rgba(107,92,231,0.38), rgba(57,163,219,0.20)); } .grad-3 { background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px), linear-gradient(160deg, rgba(57,163,219,0.32), rgba(107,92,231,0.30)); } .grad-4 { background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px), linear-gradient(135deg, rgba(107,92,231,0.26), rgba(57,163,219,0.40)); } .grad-5 { background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px), linear-gradient(150deg, rgba(57,163,219,0.40), rgba(107,92,231,0.24)); } .grad-6 { background-image: radial-gradient(rgba(245,245,247,0.10) 1px, transparent 1.5px), linear-gradient(135deg, rgba(107,92,231,0.34), rgba(57,163,219,0.26)); } /* -------------------------------------------------------------------------- 11. FEATURE SPLIT — the "why directed AI" problem/solution section. Text on one side, a highlighted card on the other (desktop). -------------------------------------------------------------------------- */ .split { display: grid; gap: 2rem; align-items: center; } .split-text h2 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: 1.2rem; } .split-text p { color: var(--muted); margin-bottom: 1rem; font-size: 1.02rem; } .split-text p:last-of-type { margin-bottom: 1.75rem; } /* The highlighted panel: a glass card with a gradient glow in the corner */ .split-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; position: relative; overflow: hidden; } .split-card::before { /* a soft gradient glow inside the corner */ content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: var(--gradient); filter: blur(70px); opacity: 0.28; } .split-list { position: relative; display: grid; gap: 1.2rem; } .split-list li { display: flex; gap: 0.85rem; align-items: flex-start; } .split-list .check { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--gradient); color: #fff; } .split-list .check svg { width: 15px; height: 15px; } .split-list h4 { font-size: 1rem; margin-bottom: 0.15rem; } .split-list p { color: var(--muted); font-size: 0.92rem; margin: 0; } /* -------------------------------------------------------------------------- 12. SERVICE CARDS -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.6rem; height: 100%; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .card:hover { transform: translateY(-5px); border-color: rgba(57, 163, 219, 0.45); background: var(--surface-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } .card h3 { font-size: 1.18rem; margin-bottom: 0.5rem; } .card p { color: var(--muted); font-size: 0.96rem; } /* Larger service blocks used on services.html */ .service-row { display: grid; gap: 1.5rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .service-row:hover { border-color: rgba(57, 163, 219, 0.4); background: var(--surface-2); transform: translateY(-3px); } .service-num { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; margin-bottom: 0.75rem; } .service-row h3 { font-size: 1.4rem; margin-bottom: 0.75rem; } .service-row p { color: var(--muted); margin-bottom: 0.65rem; } .service-meta { font-size: 0.9rem; color: var(--muted); } .service-meta strong { color: var(--ink); font-weight: 600; } /* Mini example gallery of 4:3 thumbnails per service. On phones the thumbnails stack one-per-row so each one is large and easy to see; from tablet width up they line up as a 3-across strip (see the 640px media query), and the strip spans the full card width on desktop (see the 960px media query). */ .svc-gallery { display: grid; grid-template-columns: 1fr; /* phones: one big image per row */ gap: 0.75rem; margin-top: 0.75rem; } .svc-thumb { width: 100%; aspect-ratio: 4 / 3; /* same shape as the work tiles */ object-fit: cover; /* fill the box, crop overflow — never stretch */ display: block; border-radius: var(--radius-sm); border: 1px solid var(--line); } /* Format / use-case tags — small rounded chips under each service's text. Purely informative (not links): they show at a glance where that service is used or what you get, so someone scanning the page gets the gist fast. */ .svc-tags { display: flex; flex-wrap: wrap; /* chips drop to the next line on narrow phones */ gap: 0.5rem; margin-top: 1rem; } .svc-tag { font-size: 0.78rem; font-weight: 600; color: var(--ink); background: rgba(45, 197, 219, 0.09); /* faint cyan-leaning wash — stays visible even on row hover */ border: 1px solid rgba(45, 197, 219, 0.26); padding: 0.35rem 0.8rem; border-radius: 999px; /* fully rounded pill */ } /* -------------------------------------------------------------------------- 13. CATEGORIES BAND — the four specialties as styled items -------------------------------------------------------------------------- */ .cat-grid { display: grid; gap: 1rem; } .cat-item { display: flex; align-items: center; gap: 0.9rem; padding: 1.25rem 1.3rem; border-radius: var(--radius-sm); background: var(--gradient-soft); border: 1px solid var(--line); transition: transform 0.25s ease, border-color 0.25s ease; } .cat-item:hover { transform: translateY(-4px); border-color: rgba(57,163,219,0.5); } .cat-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gradient); flex-shrink: 0; box-shadow: 0 0 14px rgba(57, 163, 219, 0.65); } .cat-item h3 { font-size: 1.05rem; } .cat-item span { display: block; color: var(--muted); font-size: 0.84rem; font-weight: 400; } /* -------------------------------------------------------------------------- 14. WHY NEXTGENN — three reasons with a numbered badge -------------------------------------------------------------------------- */ .reason { padding: 0.25rem; } .reason .num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; margin-bottom: 0.6rem; } .reason h3 { font-size: 1.18rem; margin-bottom: 0.45rem; } .reason p { color: var(--muted); font-size: 0.96rem; } /* -------------------------------------------------------------------------- 15. PROCESS STEPS — 01 → 02 → 03 -------------------------------------------------------------------------- */ .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.6rem; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .step:hover { transform: translateY(-4px); border-color: rgba(57, 163, 219, 0.4); background: var(--surface-2); } .step-num { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; line-height: 1; margin-bottom: 1rem; } .step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .step p { color: var(--muted); font-size: 0.96rem; } /* -------------------------------------------------------------------------- 16. CTA BAND — bold closing call-to-action panel -------------------------------------------------------------------------- */ .cta { position: relative; overflow: hidden; text-align: center; border-radius: 26px; padding: 3.5rem 1.5rem; background: radial-gradient(circle at 30% 20%, rgba(57,163,219,0.22), transparent 55%), radial-gradient(circle at 75% 80%, rgba(107,92,231,0.18), transparent 55%), var(--bg-alt); border: 1px solid var(--line-strong); } .cta h2 { font-size: clamp(1.9rem, 5.5vw, 3rem); max-width: 18ch; margin: 0 auto 1.5rem; } .cta p { color: var(--muted); max-width: 520px; margin: 0 auto 2rem; } /* -------------------------------------------------------------------------- 17. FOOTER — brand + link columns + copyright -------------------------------------------------------------------------- */ .footer { /* The top hairline fades out toward the edges — same soft treatment as the marquee, so the footer eases in instead of cutting */ border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent) 1; padding: 3.5rem 0 2.5rem; margin-top: 1rem; } .footer-grid { display: grid; gap: 2.25rem; margin-bottom: 2.5rem; } .footer-tagline { color: var(--muted); font-size: 0.95rem; margin-top: 1rem; max-width: 28ch; } .footer-h { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 600; color: var(--slate); margin-bottom: 1rem; } .footer-col { display: flex; flex-direction: column; gap: 0.7rem; } .footer-col a { color: var(--muted); font-size: 0.94rem; transition: color 0.2s ease; width: fit-content; } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .footer-copy { color: var(--slate); font-size: 0.84rem; } .footer-note { color: var(--slate); font-size: 0.84rem; } /* -------------------------------------------------------------------------- 18. CONTACT FORM -------------------------------------------------------------------------- */ /* Single centered column: form, then the "reach us" block beneath it */ .contact-grid { display: grid; gap: 2rem; max-width: 600px; margin-inline: auto; } .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.6rem; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.45rem; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 0.96rem; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field textarea { resize: vertical; min-height: 130px; } .field input::placeholder, .field textarea::placeholder { color: var(--slate); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(57, 163, 219, 0.2); } /* The dropdown's own option list needs a SOLID background (no transparency) */ .field select option { background: #0A0A0E; color: var(--ink); } .form .btn { width: 100%; margin-top: 0.4rem; } /* Image drop-zone on the free-sample form — drag a photo in (or click to browse) and a thumbnail preview appears. JS in main.js drives it. */ .dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .dropzone:hover { border-color: rgba(57, 163, 219, 0.6); background: rgba(57, 163, 219, 0.05); } .dropzone.is-dragover { border-color: var(--blue); background: rgba(57, 163, 219, 0.12); } .dropzone-prompt { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .dropzone-icon { width: 30px; height: 30px; color: var(--blue); } .dropzone-title { font-size: 0.95rem; color: var(--ink); } .dropzone-browse { color: var(--blue); font-weight: 600; text-decoration: underline; } .dropzone-hint { font-size: 0.78rem; color: var(--slate); } .dropzone-previews { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1rem 0 0; padding: 0; list-style: none; } .dropzone-preview { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); } .dropzone-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .dropzone-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; } .dropzone-remove:hover { background: rgba(0, 0, 0, 0.85); } .field-hint { color: var(--slate); font-weight: 400; font-size: 0.85em; } /* -------------------------------------------------------------------------- SUCCESS BADGE — a ring + checkmark that draw themselves in, with a soft pulsing glow. Plays once on the free-sample thank-you page. -------------------------------------------------------------------------- */ .success-badge { width: 96px; height: 96px; margin: 0 auto 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gradient-soft); border: 1px solid var(--line); animation: badge-pop 0.5s ease-out both, badge-glow 2.6s ease-in-out 1.1s infinite; } .success-svg { width: 56px; height: 56px; overflow: visible; } .success-ring, .success-check { fill: none; stroke: url(#successGrad); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .success-ring { stroke-dasharray: 214; stroke-dashoffset: 214; /* circumference ≈ 214 */ animation: draw-ring 0.7s ease-out 0.2s forwards; } .success-check { stroke-dasharray: 46; stroke-dashoffset: 46; animation: draw-check 0.45s ease-out 0.85s forwards; } @keyframes draw-ring { to { stroke-dashoffset: 0; } } @keyframes draw-check { to { stroke-dashoffset: 0; } } @keyframes badge-pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } @keyframes badge-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(57, 163, 219, 0); } 50% { box-shadow: 0 0 32px 4px rgba(57, 163, 219, 0.35); } } /* Reduced motion: skip the draw/glow and just show a finished checkmark */ @media (prefers-reduced-motion: reduce) { .success-badge, .success-ring, .success-check { animation: none; } .success-ring, .success-check { stroke-dashoffset: 0; } } /* The friendly success message JS reveals after "sending" */ .form-success { display: none; margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--gradient-soft); border: 1px solid rgba(57, 163, 219, 0.4); color: var(--ink); font-size: 0.94rem; } .form-success.show { display: block; } /* Direct contact options beside the form */ .contact-direct { display: grid; gap: 1rem; align-content: start; } .contact-card { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .contact-card:hover { transform: translateY(-3px); border-color: rgba(57, 163, 219, 0.5); background: var(--surface-2); } .contact-card .badge { margin-bottom: 0; } .contact-text { display: flex; flex-direction: column; gap: 0.15rem; } .contact-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 600; color: var(--slate); } .contact-value { font-weight: 600; color: var(--ink); } /* ----- "OR REACH US DIRECTLY" divider — a soft hairline with a label ----- */ .reach-divider { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0.4rem; } .reach-divider::before, .reach-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); } .reach-divider span { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 600; color: var(--slate); white-space: nowrap; } /* ----- Two accent buttons: green WhatsApp + blue Email Us ----- */ .reach-buttons { display: grid; grid-template-columns: 1fr 1fr; /* WhatsApp + Email side by side */ gap: 0.9rem; } .reach-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); font-family: var(--font-head); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink); /* lift + colored glow on hover */ transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .reach-btn svg { width: 20px; height: 20px; flex-shrink: 0; transition: filter 0.22s ease; } /* Resting state — each button is washed in its own brand color */ .reach-btn--whatsapp { color: #2FD27A; /* WhatsApp-style green */ border-color: rgba(47, 210, 122, 0.40); background: linear-gradient(160deg, rgba(47, 210, 122, 0.22), rgba(47, 210, 122, 0.09)); } .reach-btn--email { color: var(--blue); /* brand blue */ border-color: rgba(57, 163, 219, 0.40); background: linear-gradient(160deg, rgba(57, 163, 219, 0.22), rgba(57, 163, 219, 0.09)); } .reach-btn--instagram { grid-column: 1 / -1; /* full width, on its own row below */ color: #E1306C; /* Instagram magenta */ border-color: rgba(225, 48, 108, 0.40); /* purple → magenta → orange, Instagram's signature blend */ background: linear-gradient(150deg, rgba(131, 58, 180, 0.22), rgba(225, 48, 108, 0.18) 55%, rgba(253, 150, 55, 0.14)); } /* Hover — the button rises and its colored glow turns up (like screenshot 2) */ .reach-btn--whatsapp:hover { transform: translateY(-3px); border-color: rgba(47, 210, 122, 0.7); box-shadow: 0 10px 30px rgba(47, 210, 122, 0.30); } .reach-btn--whatsapp:hover svg { filter: drop-shadow(0 0 8px rgba(47, 210, 122, 0.85)); } .reach-btn--email:hover { transform: translateY(-3px); border-color: rgba(57, 163, 219, 0.7); box-shadow: 0 10px 30px rgba(57, 163, 219, 0.35); } .reach-btn--email:hover svg { filter: drop-shadow(0 0 8px rgba(57, 163, 219, 0.85)); } .reach-btn--instagram:hover { transform: translateY(-3px); border-color: rgba(225, 48, 108, 0.75); box-shadow: 0 10px 30px rgba(225, 48, 108, 0.32); } .reach-btn--instagram:hover svg { filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.85)); } /* On very narrow phones, stack WhatsApp + Email too */ @media (max-width: 380px) { .reach-buttons { grid-template-columns: 1fr; } } /* The padlock on the Send Inquiry button — nudges up slightly on hover */ .btn-lock { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s ease; } .btn-gradient:hover .btn-lock { transform: translateY(-1px) scale(1.05); } /* -------------------------------------------------------------------------- 19. SCROLL PROGRESS BAR — a thin gradient line pinned to the very top. JS creates the element and stretches it (scaleX) as you scroll, so you always know how far down the page you are. -------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient); transform: scaleX(0); /* JS updates this between 0 and 1 */ transform-origin: left; /* grow from the left edge */ z-index: 200; /* above the navbar */ pointer-events: none; } /* -------------------------------------------------------------------------- 20. SPOTLIGHT HOVER — a soft blue light that follows your cursor across cards. JS writes the mouse position into the --mx / --my variables; this ::after layer paints a radial glow exactly there. -------------------------------------------------------------------------- */ .benefit, .card, .step, .service-row, .contact-card, .cat-item, .work-tile { position: relative; /* anchors the ::before/::after light layers to the card */ } .benefit::after, .card::after, .step::after, .service-row::after, .contact-card::after, .cat-item::after, .work-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 240px circle at var(--mx, 50%) var(--my, 50%), rgba(57, 163, 219, 0.12), transparent 65% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* the light never blocks clicks */ } .benefit:hover::after, .card:hover::after, .step:hover::after, .service-row:hover::after, .contact-card:hover::after, .cat-item:hover::after, .work-tile:hover::after { opacity: 1; } /* -------------------------------------------------------------------------- 21. SCROLL-REVEAL — "liquid glass" defrost. Elements arrive frosted — blurred, translucent and sitting lower — then sharpen into focus as they glide up into place. JS adds .visible (via IntersectionObserver); the transition does the rest. Note: the upward glide uses the `translate` property instead of `transform`, so it can never fight the hover lifts (which use transform) — the browser combines the two automatically. -------------------------------------------------------------------------- */ .reveal { opacity: 0; translate: 0 22px; filter: blur(8px); /* the "frost" on the glass */ /* This easing starts quickly and settles very gently — calm and premium */ transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), translate 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--stagger, 0s); } .reveal.visible { opacity: 1; translate: 0 0; filter: none; /* fully sharp once settled */ } /* Inside a .reveal-group, children reveal in a gentle cascade (stagger). The delay lives in a CSS variable so the light sweep below can reuse it. */ .reveal-group > .reveal:nth-child(2) { --stagger: 0.07s; } .reveal-group > .reveal:nth-child(3) { --stagger: 0.14s; } .reveal-group > .reveal:nth-child(4) { --stagger: 0.21s; } .reveal-group > .reveal:nth-child(5) { --stagger: 0.28s; } .reveal-group > .reveal:nth-child(6) { --stagger: 0.35s; } /* Light sweep — just as a glass card sharpens, a streak of light glides across it once, like a reflection moving over glass. The streak is a wide gradient painted on a ::before layer; the animation slides the gradient from one side to the other, then the layer goes invisible. (.split-card is excluded — its ::before already draws the corner glow.) */ .benefit::before, .card::before, .step::before, .work-tile::before, .service-row::before, .contact-card::before, .cat-item::before, .cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; /* follow the card's rounded corners */ background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.06) 47%, rgba(57, 163, 219, 0.10) 50%, rgba(255, 255, 255, 0.06) 53%, transparent 60%); background-size: 260% 100%; /* much wider than the card … */ background-repeat: no-repeat; opacity: 0; /* invisible until its moment */ pointer-events: none; /* the light never blocks clicks */ } .benefit.visible::before, .card.visible::before, .step.visible::before, .work-tile.visible::before, .service-row.visible::before, .contact-card.visible::before, .cat-item.visible::before, .cta.visible::before { /* … so sliding the background sweeps the streak across the card. The delay = this card's own stagger + a beat, so the light arrives just as the card finishes sharpening. Runs exactly once. */ animation: glass-sweep 1.1s ease-out calc(var(--stagger, 0s) + 0.45s) 1; } @keyframes glass-sweep { 0% { opacity: 0; background-position: 140% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -40% 0; } } /* -------------------------------------------------------------------------- 22. REDUCED MOTION — respect visitors who turn animations off in their OS. Everything still works; it just stops moving. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; translate: none; filter: none; transition: none; } .btn, .card, .work-tile, .contact-card, .benefit, .step, .cat-item, .service-row, .work-media { transition: none; } .gradient-text, .glow, .marquee-track, .media-marquee-track, .rotate-word.swap, .scroll-cue, .badge, .nav-free { animation: none; } .visible::before { animation: none; } /* no light sweep either */ } /* -------------------------------------------------------------------------- 23. RESPONSIVE BREAKPOINTS — widen layouts as the screen grows. -------------------------------------------------------------------------- */ /* Tablets and up (≥ 640px) */ @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-work { grid-template-columns: repeat(2, 1fr); } .grid-services { grid-template-columns: repeat(2, 1fr); } .cat-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .hero-cta { flex-wrap: nowrap; } /* Tablets and up: service thumbnails go back to a 3-across strip */ .svc-gallery { grid-template-columns: repeat(3, 1fr); } } /* Desktops and up (≥ 960px) */ @media (min-width: 960px) { /* Swap the hamburger for inline nav links */ .nav-toggle { display: none; } .nav-menu { display: flex; position: static; flex-direction: row; align-items: center; gap: 1.2rem; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; } .nav-cta { margin-top: 0; } .section { padding: 6.5rem 0; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-work { grid-template-columns: repeat(3, 1fr); } .grid-services { grid-template-columns: repeat(3, 1fr); } .cat-grid { grid-template-columns: repeat(4, 1fr); } .reasons { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(3, 1fr); } /* Feature split becomes two columns */ .split { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } .split-text { text-align: left; } /* Larger service rows: number/title column + description column */ .service-row { grid-template-columns: 200px 1fr; gap: 2.5rem; } .svc-gallery { grid-column: 1 / -1; } /* gallery spans under number + text */ .service-num { margin-bottom: 0; } /* Footer: brand block wider, then three link columns */ .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* Large desktops — a little more air around the hero content. (The hero's height comes from min-height now, so padding only fine-tunes the breathing room, it no longer sets the size.) */ @media (min-width: 1200px) { .hero { padding: 4rem 0 6.5rem; } } /* -------------------------------------------------------------------------- 24. COMPARISON TABLE — how NextGenn stacks up against the alternatives. The whole table lives in .cmp-wrap, which scrolls sideways on phones so the five columns never get crushed. The NextGenn column is tinted and capped with a gradient accent bar so the eye lands on it. -------------------------------------------------------------------------- */ .cmp-wrap { overflow-x: auto; /* horizontal scroll on small screens */ -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .cmp-table { width: 100%; min-width: 720px; /* keeps columns readable → forces scroll when narrower */ border-collapse: collapse; font-size: 0.94rem; } .cmp-table th, .cmp-table td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } /* Column headers (DIY AI Tools, Freelancers, …) */ .cmp-table thead th { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: var(--muted); white-space: nowrap; } /* The row-label cell at the start of each body row */ .cmp-table tbody th { font-family: var(--font-body); font-weight: 600; color: var(--ink); white-space: nowrap; } /* No divider under the final row */ .cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; } /* The highlighted NextGenn column (shared by its header + body cells) */ .cmp-col-self { background: var(--gradient-soft); } .cmp-table thead .cmp-col-self { position: relative; color: var(--ink); } /* Gradient accent bar across the top of the NextGenn header cell */ .cmp-table thead .cmp-col-self::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gradient); } /* A ✓/✗ icon next to a short word, e.g. "✓ On-brand" */ .cmp-cell { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; } .cmp-icon { width: 17px; height: 17px; flex-shrink: 0; } .cmp-yes { color: var(--blue); } /* check = brand blue */ .cmp-no { color: var(--slate); } /* cross = dim gray */ .cmp-cell span { color: var(--muted); } .cmp-col-self .cmp-cell span { color: var(--ink); font-weight: 500; } /* -------------------------------------------------------------------------- 25. PRICING TIERS — three package cards; the middle one is the hero. To change prices, edit the "from $…" lines directly in services.html (look for the "EDIT PRICES HERE" comment). -------------------------------------------------------------------------- */ .pricing-grid { display: grid; gap: 1.25rem; align-items: stretch; } .price-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.7rem; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .price-card:hover { transform: translateY(-4px); border-color: rgba(57, 163, 219, 0.45); background: var(--surface-2); } /* The "Most Popular" card: a gradient hairline border (same trick as .badge), a soft outer glow, and — on desktop — lifted above its neighbours. */ .price-card--popular { border: 1px solid transparent; background: linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box, linear-gradient(135deg, var(--blue), var(--violet)) border-box; box-shadow: 0 18px 50px rgba(57, 163, 219, 0.22); } /* The little "MOST POPULAR" pill pinned to the top edge */ .price-badge { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); background: var(--gradient); color: #fff; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; padding: 0.4rem 0.9rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(57, 163, 219, 0.4); } .price-name { font-size: 1.5rem; margin-bottom: 0.3rem; } .price-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; } .price-sub strong { color: var(--ink); font-weight: 700; } .price-list { display: grid; gap: 0.85rem; margin-bottom: 1.75rem; } .price-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.94rem; color: var(--muted); } /* Small gradient check chip (same look as the .split-list checks) */ .price-list .check { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--gradient); color: #fff; } .price-list .check svg { width: 13px; height: 13px; } /* Pushes the button to the bottom so all three cards line their CTAs up */ .price-cta { margin-top: auto; } .price-cta .btn { width: 100%; } /* -------------------------------------------------------------------------- 25b. PRICING CATEGORY TABS — switch between Photoshoots / Videos / Both / Monthly. Each tab reveals one .price-panel (its own 3-card tier grid). The switching is handled in main.js. As a safety net, if JavaScript is off the element never gets its "js" class, and the rules at the bottom of this block fall back to showing every panel stacked — so no prices are ever hidden from a no-JS visitor or a search engine. -------------------------------------------------------------------------- */ /* The tab bar: a rounded glass strip holding the four category buttons. It wraps onto two rows on small screens so the labels never get crushed. */ .price-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 640px; margin: 0 auto 2.75rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .price-tab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.05rem; border: none; border-radius: 999px; background: none; color: var(--muted); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .price-tab:hover { color: var(--ink); } .price-tab svg { width: 17px; height: 17px; flex-shrink: 0; } /* The chosen tab fills with the signature gradient */ .price-tab.is-active { color: #fff; background: var(--gradient); box-shadow: 0 6px 18px rgba(57, 163, 219, 0.32); } /* Tiny "Best value" pill that rides inside a tab (used on the bundle tab). On an inactive tab it shows the gradient to draw the eye; on the active tab — which is already gradient — it flips to translucent white so it stays readable. */ .price-tab-tag { padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--gradient); color: #fff; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .price-tab.is-active .price-tab-tag { background: rgba(255, 255, 255, 0.24); } /* One category's content. Hidden until its tab is selected. */ .price-panel { display: none; } .price-panel.is-active { display: block; } /* The header above each tier grid: a gradient icon chip, the category name, and a one-line description. */ .price-cat-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.65rem; margin-bottom: 2.25rem; } .price-cat-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--gradient-soft); border: 1px solid var(--line); color: var(--blue); } .price-cat-icon svg { width: 27px; height: 27px; } .price-cat-name { font-size: 1.35rem; } .price-cat-desc { color: var(--muted); font-size: 0.96rem; max-width: 48ch; } /* No-JS fallback: with the "js" class absent, reveal every panel stacked and drop the tab bar (it would do nothing without its click handler). */ html:not(.js) .price-tabs { display: none; } html:not(.js) .price-panel { display: block; margin-bottom: 3.5rem; } /* A small footnote that sits under a category's cards — used for things like "longer videos are a custom quote" that don't belong inside a package. */ .price-note { max-width: 580px; margin: 1.75rem auto 0; padding: 0.85rem 1.2rem; text-align: center; font-size: 0.9rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .price-note a { color: var(--blue); font-weight: 600; } /* -------------------------------------------------------------------------- 26. FAQ — native
/ accordion. Using the browser's own element means it expands/collapses and is keyboard-accessible even with JavaScript switched off. -------------------------------------------------------------------------- */ .faq { max-width: 760px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; /* hide the default disclosure triangle */ padding: 1.3rem 0.25rem; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); transition: color 0.2s ease; } .faq-q:hover { color: var(--blue); } .faq-q::-webkit-details-marker { display: none; } /* hide the marker in Safari too */ /* A "+" drawn from two bars that becomes "−" when the item is open */ .faq-icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--blue); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } /* horizontal bar */ .faq-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } /* vertical bar */ .faq-item[open] .faq-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } /* + → − */ .faq-a { margin: 0; padding: 0 0.25rem 1.4rem; max-width: 64ch; color: var(--muted); font-size: 0.97rem; } /* A gentle fade-in as an answer opens */ .faq-item[open] .faq-a { animation: faq-open 0.35s ease; } @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 27. TESTIMONIALS — glass quote cards. Content is PLACEHOLDER for now (see the note in the section); swap in real client quotes later. -------------------------------------------------------------------------- */ .testimonial-grid { display: grid; gap: 1.25rem; } .testimonial { display: flex; flex-direction: column; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .testimonial:hover { transform: translateY(-4px); border-color: rgba(57, 163, 219, 0.45); background: var(--surface-2); } .stars { display: inline-flex; gap: 0.2rem; color: var(--blue); } .stars svg { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(57, 163, 219, 0.5)); } .quote { margin: 0; font-size: 1.02rem; line-height: 1.6; font-style: italic; color: var(--ink); } .who { display: flex; flex-direction: column; gap: 0.1rem; margin-top: auto; } .who-name { font-weight: 600; color: var(--ink); font-size: 0.96rem; } .who-role { color: var(--slate); font-size: 0.84rem; } /* --- Cursor spotlight for the new cards (mirrors section 20). The JS in main.js writes --mx/--my onto these cards; this paints the soft light. */ .price-card::after, .testimonial::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 240px circle at var(--mx, 50%) var(--my, 50%), rgba(57, 163, 219, 0.12), transparent 65% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .price-card:hover::after, .testimonial:hover::after { opacity: 1; } /* --- Responsive: widen the new grids on larger screens --- */ @media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } .testimonial-grid { grid-template-columns: repeat(3, 1fr); } /* Raise the popular card so it clearly leads the row */ .price-card--popular { transform: translateY(-12px); } .price-card--popular:hover { transform: translateY(-16px); } } /* --- Reduced motion: keep the new sections still, like the rest of the site --- */ @media (prefers-reduced-motion: reduce) { .price-card, .testimonial, .faq-q, .faq-icon::before, .faq-icon::after { transition: none; } .faq-item[open] .faq-a { animation: none; } } /* -------------------------------------------------------------------------- 28. FEATURE STRIP — the "What we make" section, rebuilt as three EQUAL, box-free columns split by thin glowing vertical dividers. No card backgrounds — just an icon, a heading and a line of copy per column — so it reads cleaner and more premium than a row of boxes, and every benefit carries the same visual weight. -------------------------------------------------------------------------- */ .strip { display: grid; gap: 2.25rem; } .strip-col { padding: 0.25rem; } .strip-col h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .strip-col p { color: var(--muted); font-size: 0.96rem; max-width: 34ch; } /* Icon — a bare neon glyph sitting on a soft pool of blue light (no chip box): a different treatment again to the service-card badges and the why-row icons. */ .strip-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1.1rem; color: var(--blue); } .strip-icon::before { /* the soft light pool behind the icon */ content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(57, 163, 219, 0.22), transparent 70%); } .strip-icon svg { position: relative; /* sit above the light pool */ width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(57, 163, 219, 0.7)); transition: transform 0.3s ease, filter 0.3s ease, color 0.3s ease; } /* brighten the icon when its column is hovered */ .strip-col:hover .strip-icon svg { transform: scale(1.08); color: #7CCDF2; filter: drop-shadow(0 0 13px rgba(57, 163, 219, 1)); } /* From tablet up: three equal columns with a glowing gradient divider between them. The divider fades out at its top and bottom (via border-image), so it never reads as a hard line. */ @media (min-width: 768px) { .strip { grid-template-columns: repeat(3, 1fr); gap: 0; } .strip-col { padding: 0.5rem 2.25rem; } .strip-col:first-child { padding-left: 0; } .strip-col:last-child { padding-right: 0; } .strip-col + .strip-col { border-left: 1px solid transparent; border-image: linear-gradient(180deg, transparent, rgba(57, 163, 219, 0.45) 50%, transparent) 1; } } /* -------------------------------------------------------------------------- 29. WHY ROWS — the "Built to make products move" section, rebuilt as open, un-boxed rows separated by fading gradient hairlines. An editorial counterpoint to all the cards: big neon icon, then heading + text, with a gradient accent bar that grows at the left edge on hover. -------------------------------------------------------------------------- */ .why-list { max-width: 880px; margin-inline: auto; } .why-row { position: relative; display: grid; grid-template-columns: auto 1fr; /* icon column + text column */ gap: 1.25rem; align-items: center; padding: 1.75rem 0.75rem; } /* Fading gradient hairline between rows (same edge-fade as the marquee/footer) */ .why-row + .why-row { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent) 1; } /* A gradient accent bar that grows from the centre at the left edge on hover */ .why-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--gradient); transform: translateY(-50%); transition: height 0.3s ease; } .why-row:hover::before { height: 62%; } .why-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--blue); /* bare neon icon — no chip box */ } .why-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(57, 163, 219, 0.6)); transition: transform 0.3s ease, filter 0.3s ease, color 0.3s ease; } .why-row:hover .why-icon svg { transform: scale(1.08); color: #7CCDF2; filter: drop-shadow(0 0 13px rgba(57, 163, 219, 0.95)); } .why-text h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin-bottom: 0.35rem; } .why-text p { color: var(--muted); font-size: 1rem; max-width: 56ch; } /* --- Reduced motion for the two rebuilt sections --- */ @media (prefers-reduced-motion: reduce) { .strip-icon svg, .why-row::before, .why-icon svg { transition: none; } }