/** * Alan Solutions — Brand Override CSS * Loaded after main.css to apply AS brand guidelines over the Realiz template. * * Brand Colours: * Midnight Green #07140B (primary background) * Emerald #00A69D (primary accent — replaces template lime) * White #FFFFFF (light text) * Charcoal #373A36 (dark text / sidebar dark elements) * Sunset #F7931E (single-word highlight accent, dark bg only) * Ice #EDF5FC (support neutral) * Electric Glow #80FFF1 (highlight gradient start) * * Typography: Poppins (Google Fonts) * H1 / Ultra → Poppins Black (900) * H2 → Poppins Bold (700) * Body → Poppins Light (300) * Eyebrows → Poppins Black, ALL CAPS * Buttons → Poppins Black */ /* ============================================================ 1. POPPINS FONT IMPORT ============================================================ */ /* Poppins font is now loaded via in HTML for faster delivery. */ /* ============================================================ 2. BRAND CSS VARIABLES ============================================================ */ :root { --as-midnight: #07140B; --as-emerald: #00A69D; --as-white: #FFFFFF; --as-charcoal: #373A36; --as-sunset: #F7931E; --as-ice: #EDF5FC; --as-electric: #80FFF1; /* Override template font variables */ --font-body: 'Poppins', sans-serif; --font-display: 'Poppins', sans-serif; --tft-body: 'Poppins', sans-serif; --tft-display: 'Poppins', sans-serif; /* Override template colour variables — ensures #00A69D everywhere */ --tft-lime: #00A69D; --tft-accent: #00A69D; /* Note: --tft-h2-dark and --tft-bg intentionally NOT overridden here; page-scoped values in main.css should apply for those. */ } /* ============================================================ 3. GLOBAL FONT OVERRIDE ============================================================ */ html, body { font-family: 'Poppins', sans-serif !important; font-weight: 300; } .font-body { font-family: 'Poppins', sans-serif !important; font-weight: 300; } .font-display { font-family: 'Poppins', sans-serif !important; font-weight: 700; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif !important; } h1 { font-weight: 900 !important; } h2 { font-weight: 700 !important; } h3 { font-weight: 700 !important; } /* ============================================================ 4. BRAND COLOUR CLASS OVERRIDES ============================================================ */ /* Background — Midnight Green replaces #0d2620 */ .bg-brand-bg { background-color: var(--as-midnight) !important; } body { background-color: var(--as-midnight); } /* Emerald replaces lime (#d4f54c) */ .bg-brand-lime { background-color: var(--as-emerald) !important; } .text-brand-lime { color: var(--as-emerald) !important; } .border-brand-lime { border-color: var(--as-emerald) !important; } .decoration-brand-lime { text-decoration-color: var(--as-emerald) !important; } .shadow-\[0_20px_50px_rgba\(212\,245\,76\,0\.25\)\] { box-shadow: 0 20px 50px rgba(0, 166, 157, 0.25) !important; } /* Charcoal replaces brand-sidebar dark */ .bg-brand-sidebar { background-color: var(--as-charcoal) !important; } .text-brand-sidebar { color: var(--as-charcoal) !important; } /* Scrollbar */ ::-webkit-scrollbar-track { background: var(--as-midnight); } ::-webkit-scrollbar-thumb { background: rgba(0, 166, 157, 0.25); border-color: var(--as-midnight); } ::-webkit-scrollbar-thumb:hover { background: var(--as-emerald); } * { scrollbar-color: rgba(0, 166, 157, 0.25) var(--as-midnight); } /* Selection */ ::selection { background-color: var(--as-emerald); color: var(--as-midnight); } /* ============================================================ 5. SIDEBAR LEFT STRIP — Emerald instead of lime ============================================================ */ .rlz-brand-logo-box { background-color: var(--as-emerald) !important; border-right-color: rgba(0, 166, 157, 0.3) !important; } .rlz-brand-logo-box span { color: var(--as-midnight) !important; } /* The sidebar's 40px strip is bg-brand-lime in the template */ aside > div:first-child { background-color: var(--as-emerald) !important; } /* Hamburger — page-scoped selectors (body.tft-page-* specificity 0,2,1) Overrides main.css per-page rules at 0,2,0 specificity */ body.tft-page-home-2 .menu-toggle, body.tft-page-services .menu-toggle, body.tft-page-about-alt .menu-toggle, body.tft-page-contact .menu-toggle, body.tft-page-blog .menu-toggle, body.tft-page-portfolio .menu-toggle, body.tft-page-thank-you .menu-toggle { background-color: #07140B !important; } body.tft-page-home-2 .hamburger-line, body.tft-page-services .hamburger-line, body.tft-page-about-alt .hamburger-line, body.tft-page-contact .hamburger-line, body.tft-page-blog .hamburger-line, body.tft-page-portfolio .hamburger-line, body.tft-page-thank-you .hamburger-line { background-color: #F7931E !important; } body.tft-page-home-2 .menu-toggle:hover, body.tft-page-services .menu-toggle:hover, body.tft-page-about-alt .menu-toggle:hover, body.tft-page-contact .menu-toggle:hover, body.tft-page-blog .menu-toggle:hover, body.tft-page-portfolio .menu-toggle:hover, body.tft-page-thank-you .menu-toggle:hover { background-color: #F7931E !important; } body.tft-page-home-2 .menu-toggle:hover .hamburger-line, body.tft-page-services .menu-toggle:hover .hamburger-line, body.tft-page-about-alt .menu-toggle:hover .hamburger-line, body.tft-page-contact .menu-toggle:hover .hamburger-line, body.tft-page-blog .menu-toggle:hover .hamburger-line, body.tft-page-portfolio .menu-toggle:hover .hamburger-line, body.tft-page-thank-you .menu-toggle:hover .hamburger-line { background-color: #07140B !important; } /* Menu-open state (when nav is toggled open) */ body.tft-page-home-2 .menu-toggle.menu-open, body.tft-page-services .menu-toggle.menu-open, body.tft-page-about-alt .menu-toggle.menu-open, body.tft-page-contact .menu-toggle.menu-open, body.tft-page-blog .menu-toggle.menu-open, body.tft-page-portfolio .menu-toggle.menu-open, body.tft-page-thank-you .menu-toggle.menu-open { background-color: #F7931E !important; border-color: #F7931E !important; } body.tft-page-home-2 .menu-toggle.menu-open .hamburger-line, body.tft-page-services .menu-toggle.menu-open .hamburger-line, body.tft-page-about-alt .menu-toggle.menu-open .hamburger-line, body.tft-page-contact .menu-toggle.menu-open .hamburger-line, body.tft-page-blog .menu-toggle.menu-open .hamburger-line, body.tft-page-portfolio .menu-toggle.menu-open .hamburger-line, body.tft-page-thank-you .menu-toggle.menu-open .hamburger-line { background-color: #07140B !important; } /* ============================================================ 6. GLOW EFFECTS (on dark backgrounds only) ============================================================ */ /* White text glow → Emerald halo */ .as-glow { text-shadow: 0 0 20px rgba(0, 166, 157, 0.75), 0 0 50px rgba(0, 166, 157, 0.40), 0 0 100px rgba(0, 166, 157, 0.20); } /* Sunset text glow */ .as-glow-sunset { text-shadow: 0 0 20px rgba(247, 147, 30, 0.75), 0 0 50px rgba(247, 147, 30, 0.40), 0 0 100px rgba(247, 147, 30, 0.20); } /* ============================================================ 7. SUNSET ACCENT — single word emphasis on dark bg ============================================================ */ .as-sunset { color: var(--as-sunset) !important; } /* ============================================================ 8. BUTTONS ============================================================ */ .as-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 2rem; background-color: var(--as-emerald); color: var(--as-white) !important; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; border: none; cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s; } .as-btn-primary:hover { background-color: var(--as-emerald) !important; color: var(--as-midnight) !important; box-shadow: 0 0 25px rgba(0, 166, 157, 0.55), 0 0 50px rgba(128, 255, 241, 0.25); transform: translateY(-1px); } .as-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 2rem; background-color: transparent; color: rgba(255,255,255,0.8) !important; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: border-color 0.25s, color 0.25s; } .as-btn-secondary:hover { border-color: var(--as-emerald); color: var(--as-emerald) !important; } /* ============================================================ 9. HERO / VANGUARD TITLE OVERRIDES ============================================================ */ .tft-h2-vanguard__title { font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; } /* Reduced hero title size + increased line spacing */ .tft-h2-vanguard__title-line { font-size: clamp(2.2rem, 4.8vw, 4.8rem) !important; line-height: 1.2 !important; } /* No glow on hero title — remove text-shadow */ .tft-h2-vanguard__title { text-shadow: none !important; } .tft-h2-vanguard__kicker-text { font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; } .tft-h2-vanguard__kicker-line { background-color: var(--as-emerald) !important; } /* Remove the background TOPO text from the vanguard bg */ .tft-h2-vanguard__topo { opacity: 0.02 !important; } /* Update glow in vanguard bg */ .tft-h2-vanguard__glow { background: radial-gradient(ellipse at 50% 50%, rgba(0, 166, 157, 0.12) 0%, transparent 70%) !important; } /* ── Sidebar arrow icon — Emerald #00A69D */ aside .rounded-full i[data-lucide], aside .w-\[58px\] i, aside div.mt-auto .rounded-full i { color: #00A69D !important; } /* ============================================================ 10. EYEBROW TEXT UTILITY ============================================================ */ .as-eyebrow { font-family: 'Poppins', sans-serif !important; font-weight: 900; /* +2pt site-wide (was 0.65rem ≈ 10.4px → now 0.825rem ≈ 13.2px) */ font-size: 0.825rem; text-transform: uppercase; letter-spacing: 0.45em; color: var(--as-emerald); display: block; margin-bottom: 1.25rem; } /* ============================================================ 11. SERVICE CARD NUMBER ACCENT ============================================================ */ .as-service-number { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 3.5rem; line-height: 1; color: var(--as-emerald); margin-bottom: 0.75rem; display: block; transition: transform 0.4s; } .service-card:hover .as-service-number { transform: translateY(-6px); } /* ============================================================ SERVICES PAGE — SPECIALIZATION CARDS (Part 5) ============================================================ */ /* Bullet dots: emerald, slightly larger than the old 1px dash */ .as-service-bullet { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background-color: var(--as-emerald, #00A69D); } /* Card hover — lime → emerald everywhere (border, bg tint). Beats main.css:6906 which sets `border-color: #d4f54c; background: rgba(212,245,76,.02)`. */ .tft-page-services .service-card:hover { border-color: var(--as-emerald, #00A69D) !important; background: rgba(0, 166, 157, 0.04) !important; } /* Card heading hover — emerald (replaces group-hover:text-brand-lime). */ .as-service-card-heading { transition: color 0.4s ease; } .service-card:hover .as-service-card-heading { color: var(--as-emerald, #00A69D); } /* Per-card number hover colour: 01 stays emerald, 02/03/04 → sunset */ .service-card--num2:hover .as-service-number, .service-card--num3:hover .as-service-number, .service-card--num4:hover .as-service-number { color: var(--as-sunset, #F7931E); } /* Gradient glow per corner — subtle emerald radial, ~50% opacity at the centre fading to transparent. Implemented as ::before, behind card content. */ .service-card { position: relative; } .service-card[class*="service-card--glow-"]::before { content: ''; position: absolute; width: 70%; height: 70%; pointer-events: none; background: radial-gradient(circle at center, rgba(0, 166, 157, 0.5) 0%, rgba(0, 166, 157, 0.18) 35%, transparent 70%); z-index: 0; filter: blur(20px); } .service-card--glow-tl::before { top: -15%; left: -15%; } .service-card--glow-tr::before { top: -15%; right: -15%; } .service-card--glow-bl::before { bottom: -15%; left: -15%; } .service-card--glow-br::before { bottom: -15%; right: -15%; } /* "Best for" pill + sentence */ .as-best-for { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; font-size: 1rem; /* +4pt from text-[11px] (11px → ~16px) */ line-height: 1.55; color: #ffffff; font-style: italic; margin-top: 0; } .as-best-for-pill { display: inline-block; background-color: var(--as-emerald, #00A69D); color: #ffffff; padding: 0.35rem 0.9rem; border-radius: 9999px; font-style: normal; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap; line-height: 1; } .as-best-for-text { flex: 1 1 200px; min-width: 0; } /* ============================================================ 12. STAT CARDS — Poppins overrides ============================================================ */ .tft-stat-card-new__number { font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; } .tft-stat-card-new__label { font-family: 'Poppins', sans-serif !important; } /* ============================================================ 13. CTA DARK BANNER ============================================================ */ .as-cta-dark { background: linear-gradient(135deg, rgba(0, 166, 157, 0.15) 0%, var(--as-midnight) 50%); position: relative; overflow: hidden; } .as-cta-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(0, 166, 157, 0.08) 0%, transparent 60%); pointer-events: none; } /* ============================================================ 14. CLIENT NAME LIST ============================================================ */ .as-client-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; } .as-client-item { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); transition: color 0.3s; cursor: default; padding: 0.35rem 0.8rem; border: 1px solid rgba(255,255,255,0.08); } .as-client-item:hover { color: rgba(255,255,255,0.65); border-color: rgba(0,166,157,0.3); } /* ============================================================ 15. NAVIGATION OVERRIDES (flat link style for menu panel) ============================================================ */ .as-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; text-decoration: none; transition: color 0.25s; border-bottom: 1px solid rgba(255,255,255,0.08); } .as-nav-link:hover .as-nav-label { color: white; } .as-nav-label { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; color: rgba(255,255,255,0.65); transition: color 0.25s; } .as-nav-num { font-family: 'Poppins', sans-serif; font-size: 0.65rem; font-weight: 400; color: rgba(255,255,255,0.25); letter-spacing: 0.2em; } /* ============================================================ 16. FOOTER OVERRIDE ============================================================ */ .tft-footer-link { font-family: 'Poppins', sans-serif !important; font-weight: 300; } .tft-footer-main-grid h3 { font-family: 'Poppins', sans-serif !important; font-weight: 900; font-size: 0.65rem !important; letter-spacing: 0.4em; text-transform: uppercase; } .tft-copyright { font-family: 'Poppins', sans-serif !important; font-weight: 300; } /* ============================================================ 17. MARQUEE / RIBBON TEXT ============================================================ */ .tft-marquee-elite__word { font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; letter-spacing: 0.03em !important; transition: color 0.35s cubic-bezier(0.19, 1, 0.22, 1), transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), letter-spacing 0.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-text-stroke-color 0.35s ease !important; } /* Subtle per-item hover: emerald colour, ~5% scale, looser kerning. */ .tft-marquee-elite__word:hover { color: var(--as-emerald) !important; transform: scale(1.05) !important; letter-spacing: 0.06em !important; } .tft-marquee-elite__word--outline { letter-spacing: 0.03em !important; } .tft-marquee-elite__word--outline:hover { -webkit-text-stroke-color: var(--as-emerald) !important; color: transparent !important; transform: scale(1.05) !important; letter-spacing: 0.06em !important; } /* Marquee scroll never pauses on hover — only the hovered item's appearance changes. (Previous `animation-play-state: paused` rule removed per Realiz template behaviour.) */ .tft-ribbon-plus:hover .tft-marquee-elite__inner, .tft-marquee-elite:hover .tft-marquee-elite__inner, .tft-marquee-elite__inner { animation-play-state: running !important; } .tft-marquee-elite__icon { color: var(--as-emerald) !important; } /* Animated light-sweep across the ribbon → emerald (was lime). */ .tft-ribbon-plus__scan { background: linear-gradient(90deg, transparent, rgba(0, 166, 157, 0.18), transparent) !important; } /* ============================================================ 18. FAQ ACCORDION OVERRIDES ============================================================ */ .faq-title { font-family: 'Poppins', sans-serif !important; font-weight: 700; } .faq-body { font-family: 'Poppins', sans-serif !important; font-weight: 300; } .faq-kicker { font-family: 'Poppins', sans-serif !important; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3em; } .faq-orb { background-color: var(--as-emerald) !important; } /* ============================================================ SERVICES FAQ — recolour all lime to emerald + Part 7 spec ============================================================ */ /* Static panel: emerald border + emerald-tinted gradient bg */ .tft-page-services .faq-panel { border-color: rgba(0, 166, 157, 0.18) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), radial-gradient(circle at top right, rgba(0, 166, 157, 0.14), transparent 36%) !important; } .tft-page-services .faq-panel::before { background: linear-gradient(90deg, rgba(0, 166, 157, 0.10), transparent 32%, transparent 68%, rgba(0, 166, 157, 0.06)) !important; } /* Static kicker (eyebrow): emerald */ .tft-page-services .faq-kicker { color: var(--as-emerald, #00A69D) !important; } /* Static +icon strokes: white (orb bg stays emerald via alan-brand.css:585) */ .tft-page-services .faq-orb::before, .tft-page-services .faq-orb::after { background: #ffffff !important; } /* Static orb border: emerald to match the new palette */ .tft-page-services .faq-orb { border-color: rgba(0, 166, 157, 0.35) !important; } /* Hover state */ .tft-page-services .faq-panel:hover { border-color: rgba(0, 166, 157, 0.4) !important; } .tft-page-services .faq-panel:hover .faq-kicker { color: var(--as-sunset, #F7931E) !important; } .tft-page-services .faq-panel:hover .faq-title { color: var(--as-emerald, #00A69D) !important; } .tft-page-services .faq-panel:hover .faq-orb { background-color: var(--as-emerald) !important; border-color: rgba(0, 166, 157, 0.55) !important; box-shadow: 0 0 30px rgba(128, 255, 241, 0.45) !important; } /* Open state */ .tft-page-services .faq-panel.is-open { border-color: rgba(0, 166, 157, 0.5) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)), radial-gradient(circle at top right, rgba(0, 166, 157, 0.24), transparent 42%) !important; } .tft-page-services .faq-panel.is-open .faq-kicker { color: var(--as-sunset, #F7931E) !important; } .tft-page-services .faq-panel.is-open .faq-title { color: var(--as-emerald, #00A69D) !important; } .tft-page-services .faq-panel.is-open .faq-orb { background-color: var(--as-emerald) !important; border-color: rgba(0, 166, 157, 0.55) !important; box-shadow: 0 0 30px rgba(128, 255, 241, 0.45) !important; } /* ============================================================ 19. CONTACT FORM ============================================================ */ .tft-contact-input:focus { border-color: var(--as-emerald) !important; } .tft-btn-submit-contact { background-color: var(--as-emerald) !important; color: var(--as-white) !important; font-family: 'Poppins', sans-serif !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.18em; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s; } .tft-btn-submit-contact:hover { background-color: var(--as-emerald) !important; color: var(--as-midnight) !important; box-shadow: 0 0 25px rgba(0, 166, 157, 0.55), 0 0 50px rgba(128, 255, 241, 0.25) !important; } /* ============================================================ 20. BLOG CATEGORY BADGE ============================================================ */ .as-badge { display: inline-block; padding: 0.25rem 0.75rem; background-color: var(--as-emerald); color: var(--as-midnight); font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.15em; } /* ============================================================ 21. SOCIAL CARD OVERRIDES ============================================================ */ .tft-social-card { border-color: rgba(0, 166, 157, 0.15) !important; } .tft-social-card:hover { border-color: var(--as-emerald) !important; } .tft-social-title { font-family: 'Poppins', sans-serif !important; font-weight: 700; } /* ============================================================ 22. PROCESS TIMELINE OVERRIDES ============================================================ */ .step-progress-fill { background-color: var(--as-emerald) !important; } /* ============================================================ 23. TAG / PILL OVERRIDES ============================================================ */ .tft-tag-item { font-family: 'Poppins', sans-serif !important; font-weight: 700; border-color: rgba(0, 166, 157, 0.2) !important; color: rgba(255,255,255,0.5) !important; } .tft-tag-item:hover { background-color: rgba(0, 166, 157, 0.1) !important; color: var(--as-emerald) !important; border-color: var(--as-emerald) !important; } /* ============================================================ 24. HERO SUBTEXT & CTA AREA (home hero additions) ============================================================ */ .as-hero-sub { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,0.55); max-width: 480px; margin-top: 1.5rem; margin-bottom: 2.5rem; } .as-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ============================================================ 25. BENTO GRID — updated colours ============================================================ */ /* Event marketing card: solid Ice #EDF5FC in static, Electric Glow on hover. Must use `background` shorthand (not background-color) to clear the gradient set by main.css background: linear-gradient(...), white on .tft-bento__item--feature. Page-scoped selector (0,2,1) beats main.css (0,2,0). */ body.tft-page-home-2 .tft-bento__item--lime, body.tft-page-home-2 .tft-bento__item--feature { background: #EDF5FC !important; border-color: rgba(0, 166, 157, 0.15) !important; transition: background 0.4s ease !important; } body.tft-page-home-2 .tft-bento__item--lime:hover, body.tft-page-home-2 .tft-bento__item--feature:hover { background: #80FFF1 !important; } /* Keep text readable on light ice/electric bg */ .tft-bento__item--lime h3, .tft-bento__item--lime p, .tft-bento__item--lime span { color: var(--as-charcoal) !important; } .tft-bento__item--lime a { color: var(--as-midnight) !important; } .tft-comp-shell__inner { border-color: rgba(0, 166, 157, 0.3) !important; } .tft-bento__feature-orb { background: radial-gradient(circle at 50% 50%, rgba(0, 166, 157, 0.12) 0%, transparent 70%) !important; } /* ============================================================ 26. CAPABILITY CARD (about-alt) ============================================================ */ .capability-card:hover i { color: var(--as-emerald) !important; } .capability-card h3 { font-family: 'Poppins', sans-serif !important; font-weight: 700; } /* ============================================================ 27. LOCATION BUTTON (contact) ============================================================ */ .tft-location-btn:hover .tft-location-btn__bg { background-color: var(--as-emerald) !important; } /* ============================================================ 28. STAT WIDGET ============================================================ */ .tft-stat-value { font-family: 'Poppins', sans-serif !important; font-weight: 900; color: var(--as-emerald) !important; } .tft-stat-label { font-family: 'Poppins', sans-serif !important; font-weight: 300; } /* ============================================================ 29. NEWSLETTER INPUT OVERRIDE ============================================================ */ .tft-footer-newsletter-input:focus { outline: none; border-bottom-color: var(--as-emerald) !important; } .tft-footer-submit-btn { background-color: var(--as-emerald) !important; color: var(--as-white) !important; transition: background-color 0.25s, color 0.25s; } .tft-footer-submit-btn:hover { background-color: var(--as-emerald) !important; color: var(--as-midnight) !important; box-shadow: 0 0 25px rgba(0, 166, 157, 0.55), 0 0 50px rgba(128, 255, 241, 0.25) !important; } /* ============================================================ 30. SIDEBAR LOGO VERTICAL SIZING + CENTRING ============================================================ */ /* Anchor the logo absolutely so it sits at 50% of the sidebar height — aligns vertically with the rotated "Strategy · Execution · Design · Events" strip text (which is centred in its 40px column). */ aside.hidden.md\:flex > div.flex-1.h-full { position: relative; } .tft-sidebar-logo-vertical { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; } .tft-sidebar-logo-vertical img { width: 36px; height: auto; object-fit: contain; } /* ============================================================ 31. PROCESS TIMELINE DOT ============================================================ */ .tft-process-dot { background-color: var(--as-emerald) !important; border-color: var(--as-midnight) !important; } /* ============================================================ 32. TAB ACTIVE STATE ============================================================ */ .tft-tab-active { background-color: var(--as-charcoal) !important; color: white !important; border-color: var(--as-charcoal) !important; } .tft-tab:hover { border-color: var(--as-emerald) !important; } /* ============================================================ 33. BLOG CARD HOVER ============================================================ */ .blog-card h2:hover, .blog-card-img + * h2 { color: var(--as-emerald) !important; } /* ============================================================ 34. WHITE SECTION — Charcoal text overrides ============================================================ */ .bg-white .font-display, .bg-white h2, .bg-white h3 { color: var(--as-charcoal) !important; } .bg-white p { color: rgba(55, 58, 54, 0.65); } /* ============================================================ 35. PULSE DOT (blog sidebar) ============================================================ */ .tft-pulse-dot { background-color: var(--as-emerald) !important; } /* ============================================================ 36. BLOG CATEGORY PILLS ============================================================ */ .as-blog-cat-pill { display: inline-flex; align-items: center; padding: 0.45rem 1.1rem; font-family: 'Poppins', sans-serif; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.45); background: transparent; border: 1px solid rgba(255,255,255,0.12); cursor: pointer; transition: all 0.2s ease; } .as-blog-cat-pill:hover { color: white; border-color: rgba(255,255,255,0.35); } .as-blog-cat-pill.active { background-color: var(--as-emerald); color: var(--as-midnight); border-color: var(--as-emerald); } /* ============================================================ 37. BLOG ARTICLE BADGE ============================================================ */ .as-blog-badge { display: inline-block; padding: 0.2rem 0.65rem; background-color: var(--as-emerald); color: var(--as-midnight); font-family: 'Poppins', sans-serif; font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; } /* ============================================================ 38. HOMEPAGE STAT CARDS (items 10–13) — shorter height, white bg, midnight numbers, sunset hover ============================================================ */ .tft-stat-card-new { min-height: 250px !important; padding: 1.75rem 2rem !important; background: #07140B !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; border-radius: 1.5rem !important; } .tft-stat-card-new__top, .tft-stat-card-new__label, .tft-stat-card-new__index, .tft-stat-card-new__category { color: #ffffff !important; } .tft-stat-card-new__index { border-bottom-color: rgba(255, 255, 255, 0.12) !important; } .tft-stat-card-new__number { color: #ffffff !important; text-shadow: none !important; } .tft-stat-card-new__line { background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%) !important; } /* Hover: sunset accent */ .tft-stat-card-new:hover { background: #07140B !important; border-color: #F7931E !important; box-shadow: 0 20px 50px rgba(247, 147, 30, 0.18) !important; transform: translateY(-8px) !important; } /* Stat-card hover details. Colour rules are in section 43 (emerald). */ .tft-stat-card-new:hover .tft-stat-card-new__number { transform: scale(1.05); } .tft-stat-card-new:hover .tft-stat-card-new__line { /* Was emerald override but main.css:16573 forces lime with !important. Now sunset with !important to win the cascade. */ background: var(--as-sunset, #F7931E) !important; } .tft-stat-card-new:hover .tft-stat-card-new__top, .tft-stat-card-new:hover .tft-stat-card-new__label, .tft-stat-card-new:hover .tft-stat-card-new__index, .tft-stat-card-new:hover .tft-stat-card-new__category { color: #ffffff; } /* ============================================================ 39. DISCOVER BUTTON (item 14) — midnight pill fill, emerald sweep on hover ============================================================ */ .tft-page-home-2 .tft-btn-discover { background: var(--as-midnight) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } .tft-page-home-2 .tft-btn-discover::before { background: var(--as-emerald) !important; } .tft-page-home-2 .tft-btn-discover:hover span { color: var(--as-midnight) !important; } /* ============================================================ 40. CLIENT FEEDBACK PASS — 2026-05-15 ============================================================ */ /* Hero headline line-height bump to 1.35 */ .tft-h2-vanguard__title-line { line-height: 1.35 !important; } /* Leftmost vertical strip text → white (was midnight on emerald) */ .rlz-brand-logo-box span, aside > div:first-child span { color: #FFFFFF !important; } /* Sidebar symbol logo: mirrored horizontally AND vertically (= 180° flip) to match the mockup. No hover effect. */ .tft-sidebar-logo-vertical img { transform: none; width: 44px !important; transition: none !important; } .tft-sidebar-logo-vertical:hover img, .tft-sidebar-logo-vertical img:hover { transform: none !important; opacity: 1 !important; filter: none !important; } /* Sidebar bottom social arrow circle — midnight fill, emerald arrow */ aside .w-\[58px\] { background-color: var(--as-midnight) !important; border-color: var(--as-midnight) !important; } aside .w-\[58px\] i { color: var(--as-emerald) !important; } /* Hover: arrow → white, circle fill → emerald */ aside .w-\[58px\]:hover { background-color: var(--as-emerald) !important; border-color: var(--as-emerald) !important; } aside .w-\[58px\]:hover i { color: var(--as-white) !important; } /* Social tooltip labels (Li. / In.) — emerald pill, white text; hover → sunset, no glow */ aside .social-item { opacity: 1 !important; } aside .social-item a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9999px; background-color: var(--as-emerald) !important; color: var(--as-white) !important; font-weight: 700; text-decoration: none; box-shadow: none !important; filter: none !important; transition: background-color 0.25s; } aside .social-item a:hover { background-color: var(--as-sunset) !important; color: var(--as-white) !important; box-shadow: none !important; filter: none !important; transform: none !important; } /* ---- HAMBURGER (sidebar + mobile header) ---- */ /* Default: midnight fill, emerald lines */ body.tft-page-home-2 .menu-toggle, body.tft-page-services .menu-toggle, body.tft-page-about-alt .menu-toggle, body.tft-page-contact .menu-toggle, body.tft-page-blog .menu-toggle, body.tft-page-portfolio .menu-toggle, body.tft-page-thank-you .menu-toggle { background-color: var(--as-midnight) !important; border-color: var(--as-midnight) !important; transition: background-color 0.25s ease; } body.tft-page-home-2 .menu-toggle .hamburger-line, body.tft-page-services .menu-toggle .hamburger-line, body.tft-page-about-alt .menu-toggle .hamburger-line, body.tft-page-contact .menu-toggle .hamburger-line, body.tft-page-blog .menu-toggle .hamburger-line, body.tft-page-portfolio .menu-toggle .hamburger-line, body.tft-page-thank-you .menu-toggle .hamburger-line { background-color: var(--as-emerald) !important; transition: background-color 0.25s ease; } /* Hover: circle emerald, lines white */ body.tft-page-home-2 .menu-toggle:hover, body.tft-page-services .menu-toggle:hover, body.tft-page-about-alt .menu-toggle:hover, body.tft-page-contact .menu-toggle:hover, body.tft-page-blog .menu-toggle:hover, body.tft-page-portfolio .menu-toggle:hover, body.tft-page-thank-you .menu-toggle:hover { background-color: var(--as-emerald) !important; border-color: var(--as-emerald) !important; box-shadow: 0 0 25px rgba(0, 166, 157, 0.65), 0 0 50px rgba(0, 166, 157, 0.35) !important; } body.tft-page-home-2 .menu-toggle:hover .hamburger-line, body.tft-page-services .menu-toggle:hover .hamburger-line, body.tft-page-about-alt .menu-toggle:hover .hamburger-line, body.tft-page-contact .menu-toggle:hover .hamburger-line, body.tft-page-blog .menu-toggle:hover .hamburger-line, body.tft-page-portfolio .menu-toggle:hover .hamburger-line, body.tft-page-thank-you .menu-toggle:hover .hamburger-line { background-color: var(--as-white) !important; } /* Menu open (X state): keep emerald circle, white lines (override main.css) */ body.tft-page-home-2 .menu-toggle.menu-open, body.tft-page-services .menu-toggle.menu-open, body.tft-page-about-alt .menu-toggle.menu-open, body.tft-page-contact .menu-toggle.menu-open, body.tft-page-blog .menu-toggle.menu-open, body.tft-page-portfolio .menu-toggle.menu-open, body.tft-page-thank-you .menu-toggle.menu-open, body.menu-active .menu-toggle.menu-open { background-color: var(--as-emerald) !important; border-color: var(--as-emerald) !important; } body.tft-page-home-2 .menu-toggle.menu-open .hamburger-line, body.tft-page-services .menu-toggle.menu-open .hamburger-line, body.tft-page-about-alt .menu-toggle.menu-open .hamburger-line, body.tft-page-contact .menu-toggle.menu-open .hamburger-line, body.tft-page-blog .menu-toggle.menu-open .hamburger-line, body.tft-page-portfolio .menu-toggle.menu-open .hamburger-line, body.tft-page-thank-you .menu-toggle.menu-open .hamburger-line, body.menu-active .menu-toggle.menu-open .line-1, body.menu-active .menu-toggle.menu-open .line-2, body.menu-active .menu-toggle.menu-open .line-3 { background-color: var(--as-white) !important; } /* X-state — every interactive state forced emerald (no lime leak from template) */ body .menu-toggle.menu-open, body .menu-toggle.menu-open:hover, body .menu-toggle.menu-open:focus, body .menu-toggle.menu-open:active, body.menu-active .menu-toggle.menu-open, body.menu-active .menu-toggle.menu-open:hover, body.menu-active .menu-toggle.menu-open:focus, body.menu-active .menu-toggle.menu-open:active { background-color: var(--as-emerald) !important; background: var(--as-emerald) !important; border-color: var(--as-emerald) !important; } body .menu-toggle.menu-open:hover, body.menu-active .menu-toggle.menu-open:hover { box-shadow: 0 0 25px rgba(128, 255, 241, 0.65), 0 0 50px rgba(128, 255, 241, 0.35) !important; } /* ---- MENU PANEL ---- */ /* Force midnight green background — beats main.css #094030 */ nav#menu-panel, #menu-panel.tft-menu-glass, body.menu-active nav#menu-panel, body.tft-page-home-2 #menu-panel, body.tft-page-services #menu-panel, body.tft-page-about-alt #menu-panel, body.tft-page-contact #menu-panel, body.tft-page-blog #menu-panel, body.tft-page-portfolio #menu-panel, body.tft-page-thank-you #menu-panel { background-color: var(--as-midnight) !important; background: var(--as-midnight) !important; } /* Nav link rows — tighter, both label + num animate on hover, no clipping */ nav#menu-panel { overflow-x: visible; } nav#menu-panel ul, nav#menu-panel li { overflow: visible; } .as-nav-link { position: relative; padding: 0.95rem 0 !important; overflow: visible; } .as-nav-label { font-size: 1.35rem !important; transition: color 0.3s ease, transform 0.35s cubic-bezier(0.77,0,0.175,1) !important; display: inline-block; } .as-nav-num { transition: color 0.3s ease, transform 0.35s cubic-bezier(0.77,0,0.175,1) !important; display: inline-block; } /* Hover (non-current pages only) — emerald highlight bar + color + slide */ .as-nav-link:not([aria-current="page"]) { position: relative; } .as-nav-link:not([aria-current="page"])::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 70%; background: linear-gradient(90deg, rgba(0,166,157,0.18) 0%, rgba(0,166,157,0) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: -1; } .as-nav-link:not([aria-current="page"]):hover::after { opacity: 1; } .as-nav-link:not([aria-current="page"]):hover .as-nav-label { color: var(--as-emerald) !important; transform: translateX(-12px); } .as-nav-link:not([aria-current="page"]):hover .as-nav-num { color: var(--as-emerald) !important; transform: translateX(8px); } /* Current page: no hover reaction */ .as-nav-link[aria-current="page"]:hover .as-nav-label, .as-nav-link[aria-current="page"]:hover .as-nav-num { transform: none !important; } .as-nav-link[aria-current="page"] { cursor: default; } /* Current page indicator → sunset (use aria-current="page"). Specificity boost: include #menu-panel to beat main.css `#menu-panel span` rule. */ #menu-panel a.as-nav-link[aria-current="page"] span.as-nav-label, #menu-panel .as-nav-link[aria-current="page"] .as-nav-label { color: var(--as-sunset) !important; opacity: 1 !important; } #menu-panel a.as-nav-link[aria-current="page"] span.as-nav-num, #menu-panel .as-nav-link[aria-current="page"] .as-nav-num { color: rgba(247,147,30,0.6) !important; opacity: 1 !important; } /* Menu footer button area — pinned to very bottom of menu panel, horizontally centred to align with sidebar social arrow */ #menu-panel .menu-footer { position: absolute; left: 0; right: 0; bottom: 2.5rem; display: flex !important; justify-content: center; padding: 0; border-top: none; margin: 0; } nav#menu-panel > div { position: relative; min-height: 100%; } /* ---- BUTTONS — fully rounded pill ends ---- */ .as-btn-primary, .as-btn-secondary, .tft-btn-submit-contact, .tft-footer-submit-btn, .tft-page-home-2 .tft-btn-discover { border-radius: 9999px !important; } /* Discover btn keeps its own emerald hover (already correct: emerald bg, midnight span text) */ .tft-page-home-2 .tft-btn-discover:hover { box-shadow: 0 0 25px rgba(0, 166, 157, 0.55), 0 0 50px rgba(128, 255, 241, 0.25) !important; } /* ============================================================ 41. CLIENT FEEDBACK PASS — 2026-05-17 ============================================================ */ /* 1. Connect circle hover — remove dashed ring injected by main.js (overrides .realiz-social-trigger::before with `border:1px dashed`) */ .realiz-social-trigger::before, aside .realiz-social-trigger::before { display: none !important; border: none !important; content: none !important; } /* 2. Connect items (Li. / In.) hover — kill the lime drop-shadow from the JS-injected stylesheet and force emerald → sunset palette */ .realiz-social-stack .social-item a, aside .realiz-social-stack .social-item a { background: var(--as-emerald) !important; background-color: var(--as-emerald) !important; color: var(--as-white) !important; border-color: var(--as-emerald) !important; box-shadow: none !important; filter: none !important; } .realiz-social-stack .social-item a:hover, aside .realiz-social-stack .social-item a:hover { background: var(--as-sunset) !important; background-color: var(--as-sunset) !important; color: var(--as-white) !important; border-color: var(--as-sunset) !important; box-shadow: none !important; filter: none !important; transform: none !important; } /* 3. Exit (X-state) button — kill the lime halo on resting/focus/active, but ADD an emerald glow on hover that matches the hamburger's hover treatment. Overrides main.css:14081 (desktop) and main.css:14219 (mobile @media) which set `box-shadow: 0 0 35px rgba(212,245,76,.4)` on the open (resting) state. */ body .menu-toggle.menu-open, body .menu-toggle.menu-open:focus, body .menu-toggle.menu-open:active, body.menu-active .menu-toggle.menu-open, body.menu-active .menu-toggle.menu-open:focus, body.menu-active .menu-toggle.menu-open:active { box-shadow: none !important; } @media (max-width: 768px) { .menu-toggle.menu-open, body .menu-toggle.menu-open, body.menu-active .menu-toggle.menu-open { box-shadow: none !important; } } /* Emerald glow on X-state hover — same blur/opacity as hamburger hover */ body .menu-toggle.menu-open:hover, body.menu-active .menu-toggle.menu-open:hover { box-shadow: 0 0 25px rgba(0, 166, 157, 0.65), 0 0 50px rgba(0, 166, 157, 0.35) !important; } /* 4. Menu reveal animation — current page stays static while others animate in */ body.menu-active #menu-panel li:has(> a.as-nav-link[aria-current="page"]) { animation: none !important; opacity: 1 !important; transform: none !important; } /* 5. Menu hover highlight — fill the row exactly between the divider line above and the divider line below (= the link's full padded box). */ .as-nav-link:not([aria-current="page"])::after { top: 0 !important; bottom: 0 !important; height: auto !important; transform: none !important; } /* 6. Get in touch (menu footer) — match menu item width */ #menu-panel .menu-footer { left: 2.5rem !important; right: 2.5rem !important; } #menu-panel .menu-footer .as-btn-primary { width: 100% !important; justify-content: center; } /* 7. Get in touch hover — Electric Glow bg/halo, Charcoal text. Boosted specificity (a.as-btn-primary, menu-footer scope) so it beats the earlier `.as-btn-primary:hover { color: var(--as-midnight) !important }`. */ a.as-btn-primary:hover, .as-btn-primary:hover, #menu-panel .menu-footer .as-btn-primary:hover { background-color: var(--as-electric, #80FFF1) !important; color: #373A36 !important; box-shadow: 0 0 25px rgba(128, 255, 241, 0.65), 0 0 50px rgba(128, 255, 241, 0.35) !important; } a.as-btn-primary:hover i, .as-btn-primary:hover i, #menu-panel .menu-footer .as-btn-primary:hover i, a.as-btn-primary:hover svg, .as-btn-primary:hover svg { color: #373A36 !important; stroke: #373A36 !important; } /* ============================================================ 42. INDEX HERO PASS — 2026-05-17 ============================================================ */ /* Banner background, darker, Midnight Green dominant */ .tft-h2-vanguard, .as-hero-dark { background-color: var(--as-midnight, #07140B) !important; background-image: radial-gradient(ellipse at 75% 25%, rgba(0,166,157,0.10) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, rgba(7,20,11,1) 0%, rgba(7,20,11,1) 60%), linear-gradient(180deg, #07140B 0%, #04100A 100%) !important; } .tft-h2-vanguard__grid { background-image: linear-gradient(rgba(0,166,157,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,166,157,0.04) 1px, transparent 1px) !important; background-size: 80px 80px !important; opacity: 0.6; } .tft-h2-vanguard__glow { background: radial-gradient(circle at 75% 25%, rgba(128,255,241,0.06) 0%, transparent 65%) !important; } /* (Background topo lottie removed — was .tft-h2-vanguard__topo.as-topo-lottie) */ /* Banner heading, single display font, fits to 2 lines */ .tft-h2-vanguard__title.as-hero-title, .as-hero-title, .as-hero-title .tft-h2-vanguard__title-line, .as-hero-title .tft-h2-vanguard__title-line--serif, .as-hero-title .reveal-inner { font-family: 'Space Grotesk', sans-serif !important; font-style: normal !important; } /* Hero title — 2 line target via block spans (one line per source span). Each span renders as a block, giving a guaranteed break between "Simple, scalable marketing" and "for businesses that mean it." Second span's content may wrap to a third visible line if the column is narrow (acceptable per Part 2 spec). Sized so "Simple, scalable marketing" comfortably fits on one line at the column width across 1280 / 1440 / 1920 viewports. */ .as-hero-title, h1.as-hero-title { font-size: clamp(2.5rem, 4.2vw, 4.5rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; max-width: none !important; overflow: visible !important; white-space: normal !important; } .as-hero-title .tft-h2-vanguard__title-line { display: inline !important; font-size: inherit !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; overflow: visible !important; white-space: normal !important; } /* `.reveal-inner` (main.css:12364) uses translate/skew/blur/opacity which don't apply to inline elements. Force inline + neutralise transforms so text renders static. */ .as-hero-title .reveal-inner { display: inline !important; transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; } /* Keep the emerald "mean it." together on a single line. */ .as-hero-title .as-emerald-text { white-space: nowrap; } /* Mobile: smaller (but still chunky) type. */ @media (max-width: 768px) { .as-hero-title, h1.as-hero-title, .as-hero-title .tft-h2-vanguard__title-line { font-size: clamp(2rem, 8vw, 3.2rem) !important; } } /* Pages without a hero-aside (services, portfolio, etc.) need a width cap on the H1 so it wraps at roughly the same point as the home hero — whose text column is naturally constrained by the lottie aside. ~56rem ≈ 896px matches the home text column on standard desktop widths. */ .tft-page-services .as-hero-title, .tft-page-portfolio .as-hero-title { max-width: 56rem !important; } .as-emerald-text { color: var(--as-emerald, #00A69D) !important; } /* Banner body copy, slightly tighter so it sits on 2 lines */ .as-hero-sub { max-width: 32rem; font-size: 1rem; line-height: 1.55; } /* View our work button (secondary) — hover pairs with Get in Touch: same transition/easing + lift, but with a white-on-charcoal palette and no glow. */ .as-btn-secondary { transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s !important; } .as-btn-secondary:hover, a.as-btn-secondary:hover { background-color: #FFFFFF !important; color: #373A36 !important; border-color: #FFFFFF !important; box-shadow: none !important; transform: translateY(-1px); } .as-btn-secondary:hover i, .as-btn-secondary:hover svg { color: #373A36 !important; stroke: #373A36 !important; } /* Hero columns: vertically centre text and lottie relative to each other. Was `align-items: stretch` which left the lottie aligned to the top of the taller info column. */ /* Hero columns: vertically centre lottie and text relative to each other. */ .tft-h2-vanguard__content { align-items: center !important; gap: 3rem; } .tft-h2-vanguard__info { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; } .as-hero-media-bare { flex: 0 0 auto !important; width: auto !important; min-width: 320px; display: flex !important; align-items: center; justify-content: flex-end; background: transparent !important; /* Nudge the lottie above the text-column centre line. */ transform: translateY(-3rem); } .as-hero-lottie, div.as-hero-lottie, #alan-logo-hero, .as-hero-media-bare #alan-logo-hero, .as-hero-media-bare > div { width: 100%; max-width: 400px; aspect-ratio: 1 / 1; display: block; position: relative; background: transparent !important; background-color: transparent !important; background-image: none !important; } .as-hero-lottie svg, .as-hero-lottie canvas { display: block; width: 100% !important; height: 100% !important; } @media (max-width: 1023px) { .as-hero-media-bare { flex: 0 0 auto !important; width: 100% !important; min-width: 0; justify-content: center; margin-top: 2rem; } .as-hero-lottie { max-width: 360px; } } /* ============================================================ 43. INDEX FEEDBACK PASS — 2026-05-17 Services bento, Trusted By, Why Us, CTA, Footer ============================================================ */ /* ----- Section spacing ----- */ .tft-page-home-2 section.py-16.md\:py-24 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .as-trusted { padding-top: 8rem !important; padding-bottom: 6rem !important; } .as-whyus { padding-top: 6rem !important; padding-bottom: 6rem !important; } /* ----- Shared eyebrow ----- */ .as-eyebrow--emerald { color: var(--as-emerald, #00A69D) !important; } .as-eyebrow--lg { /* font-size removed — eyebrows site-wide use the unified 0.825rem from .as-eyebrow */ letter-spacing: 0.35em !important; } /* ============================================================ BENTO: Strategic Narrative (light card) ============================================================ */ .as-bento--strategy { color: #373A36; } .as-bento--strategy .as-bento-icon { background-color: var(--as-midnight, #07140B); color: var(--as-emerald, #00A69D); } .as-bento--strategy .as-bento-eyebrow { color: var(--as-emerald, #00A69D) !important; } .as-bento--strategy .as-bento-heading { color: #373A36 !important; } .as-bento--strategy .as-bento-body { color: #373A36 !important; opacity: 0.78; } .as-bento-tag { background-color: var(--as-emerald, #00A69D) !important; color: #ffffff !important; border: none !important; } /* ============================================================ BENTO: Marketing Execution (dark card) ============================================================ */ .as-bento--execution { border: 1px solid var(--as-emerald, #00A69D) !important; transition: background-color 0.45s cubic-bezier(0.19, 1, 0.22, 1), color 0.45s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.45s cubic-bezier(0.19, 1, 0.22, 1); } .as-bento--execution:hover { background-color: var(--as-emerald, #00A69D) !important; border-color: var(--as-emerald, #00A69D) !important; } .as-bento--execution .as-bento-icon-sm { /* Static: emerald circle, white glyph */ background-color: var(--as-emerald, #00A69D); color: #ffffff; transition: color 0.45s ease, background-color 0.45s ease; } /* Hover preserved as it was before: midnight circle, white glyph (explicit bg override needed now that the static is emerald) */ .as-bento--execution:hover .as-bento-icon-sm { background-color: var(--as-midnight, #07140B); color: #ffffff; } .as-bento--execution .as-bento-heading-sm { font-size: 2.25rem; line-height: 1.05; color: #ffffff; } .as-bento--execution .as-bento-body-sm { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,0.7); } .as-bento--execution .as-bento-learn { color: var(--as-emerald, #00A69D); transition: color 0.45s ease; } .as-bento--execution:hover .as-bento-learn { color: #ffffff; } /* ============================================================ BENTO: Design & Production (light, sizes match Execution) ============================================================ */ .as-bento--design { color: #373A36; } .as-bento--design .as-bento-icon-sm { background-color: var(--as-midnight, #07140B); color: var(--as-emerald, #00A69D); } .as-bento--design .as-bento-heading-sm { font-size: 2.25rem; line-height: 1.05; color: #373A36 !important; } .as-bento--design .as-bento-body-sm { font-size: 1rem; line-height: 1.5; color: #373A36 !important; opacity: 0.78; } .as-bento--design .as-bento-footnote { color: #373A36 !important; opacity: 0.5; } /* ============================================================ BENTO: Events that work (feature card) ============================================================ */ /* Transition uses the base bento curve (main.css:3863 — `all 0.6s cubic-bezier(0.23, 1, 0.32, 1)`) so transform + box-shadow + bg animate together with the same smoothness as Strategic Narrative and Design & Production. Was `background-color 0.45s cubic-bezier(0.19, 1, 0.22, 1) !important` which killed every other transition via shorthand + !important. */ .as-bento--events { background-color: #EDF5FC !important; background-image: none !important; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important; } .as-bento--events:hover { background-color: #80FFF1 !important; } .as-bento--events .as-bento-eyebrow { color: var(--as-emerald, #00A69D) !important; transition: color 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .as-bento--events:hover .as-bento-eyebrow { color: #373A36 !important; } .as-bento--events .as-bento-heading, .as-bento--events .as-bento-body { color: #373A36 !important; } /* "after." reads in charcoal so the full heading is one continuous colour */ .as-bento--events .as-bento-heading-accent { color: #373A36 !important; } .as-bento--events .as-bento-tag { background-color: var(--as-emerald, #00A69D) !important; color: #ffffff !important; border: none !important; } .as-bento--events .as-bento-icon { background-color: var(--as-midnight, #07140B); color: var(--as-emerald, #00A69D); } /* ============================================================ TRUSTED BY ============================================================ */ .as-trusted .as-trusted-heading { color: #373A36 !important; } .as-trusted .as-trusted-body { color: #373A36 !important; opacity: 0.7; } .tft-stat-card-new__number { font-size: clamp(2.2rem, 4vw, 3.4rem) !important; letter-spacing: 0.015em !important; white-space: nowrap; } .tft-stat-card-new__category, .tft-stat-card-new__label, .tft-stat-card-new__index { color: #373A36; } .tft-stat-card-new:hover .tft-stat-card-new__number, .tft-stat-card-new.group:hover .tft-stat-card-new__number { color: var(--as-emerald, #00A69D) !important; } .tft-stat-card-new, .tft-stat-card-new.group { position: relative; overflow: hidden; } .tft-stat-card-new::before, .tft-stat-card-new.group::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 166, 157, 0.18) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0; } .tft-stat-card-new:hover::before, .tft-stat-card-new.group:hover::before { opacity: 1; } /* Brand-logo carousel */ .as-client-marquee { width: 100%; overflow: hidden; padding: 1.5rem 0; border-top: 1px solid rgba(55, 58, 54, 0.08); border-bottom: 1px solid rgba(55, 58, 54, 0.08); } .as-client-marquee__track { display: flex; width: max-content; animation: as-client-scroll 40s linear infinite; will-change: transform; } /* Carousel scroll never pauses on hover — defensive `running` rule beats any future `paused` override. (Was: `:hover ... animation-play-state: paused`.) */ .as-client-marquee:hover .as-client-marquee__track, .as-client-marquee__track { animation-play-state: running !important; } .as-client-marquee__group { display: flex; align-items: center; gap: 4rem; padding-right: 4rem; } .as-client-marquee__group .as-client-item { font-family: "Space Grotesk", sans-serif; /* Reduced ~20% (was 1.5rem) so future real logos sit smaller in the carousel */ font-size: 1.2rem; font-weight: 600; color: rgba(55, 58, 54, 0.4); border: none !important; padding: 0; background: transparent; transition: color 0.3s ease; white-space: nowrap; } .as-client-marquee__group .as-client-item:hover { color: var(--as-emerald, #00A69D); } @keyframes as-client-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ WHY US ============================================================ */ .as-whyus-heading { color: #373A36 !important; max-width: 18em; } .as-whyus-body { color: #373A36 !important; opacity: 0.78; } .as-whyus .tft-tab-digit, .tft-h2__exploration-wrap .tft-tab-digit { display: none !important; } .as-whyus-tab.tft-tab, .as-whyus .tft-tab { background-color: #ffffff !important; color: #373A36 !important; border: 1px solid rgba(55, 58, 54, 0.15) !important; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .as-whyus-tab.tft-tab:hover, .as-whyus .tft-tab:hover { background-color: #EDF5FC !important; border-color: rgba(55, 58, 54, 0.2) !important; color: #373A36 !important; } .as-whyus-tab.tft-tab-active, .as-whyus .tft-tab-active, .as-whyus-tab.tft-tab.tft-tab-active:hover { background-color: var(--as-emerald, #00A69D) !important; color: #ffffff !important; border-color: var(--as-emerald, #00A69D) !important; } .as-whyus-cta.as-btn-primary { background-color: var(--as-emerald, #00A69D) !important; color: #ffffff !important; } .as-whyus-cta.as-btn-primary:hover { background-color: var(--as-electric, #80FFF1) !important; color: #373A36 !important; box-shadow: 0 0 25px rgba(128, 255, 241, 0.65), 0 0 50px rgba(128, 255, 241, 0.35) !important; } .as-whyus-orb { background-color: var(--as-emerald, #00A69D) !important; box-shadow: 0 20px 50px rgba(0, 166, 157, 0.25); transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; color: #ffffff; } .as-whyus-orb:hover { background-color: var(--as-electric, #80FFF1) !important; box-shadow: 0 0 30px rgba(128, 255, 241, 0.6), 0 20px 50px rgba(128, 255, 241, 0.35) !important; } /* ============================================================ READY-TO-SIMPLIFY ============================================================ */ .as-cta-heading { line-height: 1.15 !important; } /* ============================================================ FOOTER ============================================================ */ .tft-vanguard-footer .tft-footer-link:hover, .tft-vanguard-footer a:hover { color: var(--as-sunset, #F7931E) !important; } .tft-vanguard-footer .tft-back-to-top { transition: background-color 0.3s ease, color 0.3s ease; border-radius: 9999px; padding: 0.5rem; } .tft-vanguard-footer .tft-back-to-top:hover { background-color: var(--as-emerald, #00A69D) !important; color: #ffffff !important; border-color: transparent !important; } .tft-vanguard-footer .tft-back-to-top:hover svg { color: #ffffff !important; stroke: #ffffff !important; } /* ============================================================ SIDEBAR — LinkedIn Connect button ============================================================ */ .as-connect-btn { width: 58px; height: 58px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--as-emerald, #00A69D); border: 1px solid rgba(7, 20, 11, 0.15); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .as-connect-btn:hover { background-color: var(--as-emerald, #00A69D); color: #ffffff; border-color: var(--as-emerald, #00A69D); box-shadow: 0 0 25px rgba(0, 166, 157, 0.65), 0 0 50px rgba(0, 166, 157, 0.35); } /* ============================================================ 44. CONTACT PAGE — email fit fixes ============================================================ */ /* Sidebar menu button: lowercase, small, fits the panel without clipping. */ .as-btn-email { text-transform: none !important; letter-spacing: 0.02em !important; font-size: 0.78rem !important; padding: 0.85rem 1.2rem !important; overflow-wrap: anywhere; word-break: break-all; white-space: normal !important; line-height: 1.2 !important; text-align: center; } /* Large display email in the contact grid — let it break if column is narrow. */ .as-contact-email { overflow-wrap: anywhere; word-break: break-word; line-height: 1.15; } /* ============================================================ 45. INDEX CLEANUP PASS — moved inline styles to utility classes ============================================================ */ /* Vertical strip text colour (was inline color:#07140B) */ .as-strip-text { color: #07140B; } /* Hero section min height (was inline style on .tft-h2-vanguard) */ .as-hero-dark { min-height: 100vh; } /* Inline-rendered eyebrow inside the CTA "Ready?" lockup */ .as-eyebrow--inline { margin-bottom: 0 !important; } /* Larger CTA pill — used by Ready-to-Simplify Get-in-touch */ .as-btn-primary--lg { font-size: 0.8rem !important; padding: 1.1rem 2.5rem !important; } /* ============================================================ PORTFOLIO PAGE — filter pills, 4:5 card grid, lightbox ============================================================ */ .port-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .port-filter__btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: rgba(255, 255, 255, 0.6); font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.2s; } .port-filter__btn:hover { border-color: var(--as-emerald, #00A69D); color: #ffffff; transform: translateY(-1px); } .port-filter__btn.is-active { background-color: var(--as-emerald, #00A69D); border-color: var(--as-emerald, #00A69D); color: #ffffff; } .port-filter__idx { font-size: 0.6rem; opacity: 0.5; letter-spacing: 0.18em; } .port-filter__label { letter-spacing: 0.18em; } /* Grid */ .port-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } @media (min-width: 768px) { .port-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; } } @media (min-width: 1280px) { .port-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } } /* Card */ .port-card { position: relative; aspect-ratio: 4 / 5; border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.4s ease, box-shadow 0.5s ease; } .port-card.is-hidden { display: none; } .port-card:hover { transform: translateY(-6px); border-color: rgba(0, 166, 157, 0.4); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 166, 157, 0.15); } .port-card__media-wrap { position: absolute; inset: 0; overflow: hidden; } .port-card__video, .port-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.5s ease; display: block; } .port-card:hover .port-card__video, .port-card:hover .port-card__img { transform: scale(1.04); } .port-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 20, 11, 0.92) 0%, rgba(7, 20, 11, 0.45) 40%, rgba(7, 20, 11, 0.05) 75%, transparent 100%); pointer-events: none; transition: opacity 0.4s ease; } .port-card__content { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; z-index: 2; pointer-events: none; } .port-card__meta { font-family: 'Poppins', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--as-emerald, #00A69D); margin-bottom: 0.5rem; } .port-card__title { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 0; } /* PDF variant */ .port-card--pdf { background: linear-gradient(135deg, rgba(0, 166, 157, 0.18) 0%, rgba(7, 20, 11, 0.95) 70%); } .port-card__pdf { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--as-emerald, #00A69D); } .port-card__badge { position: absolute; top: 0.75rem; right: 0.75rem; background-color: var(--as-emerald, #00A69D); color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.25em; padding: 0.25rem 0.6rem; border-radius: 9999px; z-index: 3; } /* Play-icon overlay on video thumbnails (static poster + centred play badge) */ .port-card__play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 56px; height: 56px; border-radius: 9999px; background-color: rgba(7, 20, 11, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; backdrop-filter: blur(6px); transition: background-color 0.3s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.3s ease; } .port-card--video:hover .port-card__play-icon { background-color: var(--as-emerald, #00A69D); border-color: var(--as-emerald, #00A69D); transform: translate(-50%, -50%) scale(1); } /* Lightbox for image previews */ .port-lightbox { position: fixed; inset: 0; background: rgba(7, 20, 11, 0.94); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; backdrop-filter: blur(12px); } .port-lightbox[hidden] { display: none; } .port-lightbox__img, .port-lightbox__video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); background: #000; } .port-lightbox__video { width: min(100%, 1280px); } .port-lightbox__img[hidden], .port-lightbox__video[hidden] { display: none; } .port-lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; } .port-lightbox__close:hover { background-color: var(--as-emerald, #00A69D); border-color: var(--as-emerald, #00A69D); } /* ============================================================ LIME → EMERALD SWEEP — overrides remaining brand-lime hold-outs. Targets both Tailwind utility classes and decorative CSS values. ============================================================ */ /* Override the lime CSS variable so any rule that references it goes emerald */ :root, .tft-page-home-2, .tft-page-services, .tft-page-about-alt, .tft-page-contact, .tft-page-blog, .tft-page-portfolio, .tft-page-thank-you { --tft-lime: #00A69D; --brand-lime: #00A69D; } /* Tailwind utility overrides — covers `text-brand-lime`, `bg-brand-lime`, variants with opacity (/40, /30 etc.), borders, decorations, gradients. */ .text-brand-lime, a.text-brand-lime { color: var(--as-emerald, #00A69D) !important; } .bg-brand-lime { background-color: var(--as-emerald, #00A69D) !important; } .bg-brand-lime\/40 { background-color: rgba(0, 166, 157, 0.4) !important; } .bg-brand-lime\/30 { background-color: rgba(0, 166, 157, 0.3) !important; } .bg-brand-lime\/20 { background-color: rgba(0, 166, 157, 0.2) !important; } .bg-brand-lime\/10 { background-color: rgba(0, 166, 157, 0.1) !important; } .bg-brand-lime\/8 { background-color: rgba(0, 166, 157, 0.08) !important; } .bg-brand-lime\/5 { background-color: rgba(0, 166, 157, 0.05) !important; } .border-brand-lime { border-color: var(--as-emerald, #00A69D) !important; } .border-brand-lime\/30 { border-color: rgba(0, 166, 157, 0.3) !important; } .border-brand-lime\/20 { border-color: rgba(0, 166, 157, 0.2) !important; } .decoration-brand-lime { text-decoration-color: var(--as-emerald, #00A69D) !important; } .decoration-brand-lime\/30 { text-decoration-color: rgba(0, 166, 157, 0.3) !important; } .from-brand-lime { --tw-gradient-from: var(--as-emerald, #00A69D) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,166,157,0)) !important; } .to-brand-lime { --tw-gradient-to: var(--as-emerald, #00A69D) !important; } .via-brand-lime { --tw-gradient-stops: var(--tw-gradient-from), var(--as-emerald, #00A69D), var(--tw-gradient-to) !important; } /* Selection highlight — was lime via main.css */ ::selection { background-color: var(--as-emerald, #00A69D); color: #ffffff; } /* ============================================================ SKIP-TO-CONTENT — visible only when focused via keyboard ============================================================ */ .as-skip-link { position: fixed; top: 0; left: 0; z-index: 99999; padding: 0.85rem 1.5rem; background-color: var(--as-emerald, #00A69D); color: #ffffff !important; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-radius: 0 0 0.5rem 0; transform: translateY(-110%); transition: transform 0.2s ease; } .as-skip-link:focus { transform: translateY(0); outline: 2px solid #ffffff; outline-offset: -2px; } #main-content { /* invisible focus target — receives focus when skip link is activated */ outline: none; }