/* 19 Six Media – Siy overrides for a clean, scrolling landing page + purple accent */ /* ========================= Brand tokens ========================= */ :root { --purple: #7c3aed; /* requested accent */ --purple-40: rgba(124, 58, 237, 0.40); --text: #ffffff; --ink: #111111; } /* ========================= Convert Siy from fixed-panels to normal scroll ========================= */ section { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; margin: 0; background: transparent !important; } .containerOT { height: auto !important; overflow: visible !important; } .center-container { position: relative !important; height: auto !important; overflow: visible !important; } /* Make sure the hero occupies the full first viewport and creates space before main content */ #homeOT { position: relative !important; min-height: 100vh !important; z-index: 0 !important; } .upper-page { position: relative !important; min-height: 100vh !important; overflow: hidden !important; } .hero-fullscreen { position: absolute !important; inset: 0; } .hero-fullscreen-FIX, .hero-bg { width: 100%; height: 100%; } .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; } /* Hide Siy’s edge navigation/buttons and demo chrome */ .fixed-navigation, .section-closer, .sign-up-modal-launcher, .bottom-credits, .navigation, .social-icons-wrapper-share { display: none !important; } /* Ensure the contact modal sits above everything when opened */ .contact-modal { z-index: 2000 !important; } /* ========================= Hero Video + Overlay ========================= */ .html5-videoContainment { position: absolute !important; display: block !important; /* ensure it's not collapsed by any theme rule */ top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; background: #000; z-index: 0; } /* Heavier overlay so video is subtle but visible */ .overlay-dark-60-video::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); /* heavy darkness */ z-index: 1; pointer-events: none; } /* Fallback image if video can’t play */ .hero-bg.no-video { background-image: url("/site/img/hero-fallback.jpg"); /* put a 1920x1080+ jpg here */ } /* Ensure hero text and buttons stay above overlay/video */ .center-container-home, .center-block-home, .upper-content { position: relative; z-index: 2; } /* ========================= Typography & accent tweaks ========================= */ .title-intro-time { font-family: 'Oswald', sans-serif; font-size: clamp(44px, 6vw, 72px); line-height: 1.05; font-weight: 800; color: var(--purple) !important; text-shadow: 1px 1px 2px #000; margin: 0 auto 14px !important; max-width: 900px; } .subtitle-under { font-family: 'Raleway', sans-serif; font-size: clamp(16px, 2vw, 20px); letter-spacing: 0.02em; color: var(--text); margin: 12px auto 10px; text-shadow: 1px 1px 2px #000; } /* Badge sizing + spacing */ .meta-partner-wrap { margin-top: 14px; } .meta-partner-badge { height: 42px; width: auto; display: inline-block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); } /* Purple accents for “big numbers” */ .about-number-title, .services-number-title { color: var(--purple-40) !important; } /* Section subhead rule color */ h2.section-subheading span:before { border-top: 2px solid var(--text) !important; } /* Contact icons → purple */ .contact-info-description-img { color: var(--purple) !important; } /* ========================= Sequential fade-in on load ========================= */ .fade-seq { opacity: 0; transform: translateY(6px); transition: opacity 0.9s ease, transform 0.9s ease; will-change: opacity, transform; } /* Add .seq-on to (documentElement) in JS to trigger these */ .seq-on .seq-1 { opacity: 1; transform: none; transition-delay: .10s; } .seq-on .seq-2 { opacity: 1; transform: none; transition-delay: .30s; } .seq-on .seq-3 { opacity: 1; transform: none; transition-delay: .50s; } .seq-on .seq-4 { opacity: 1; transform: none; transition-delay: .70s; } /* ========================= Hero Buttons (perfect centering, pulse, no underline) ========================= */ .hero-actions { display: flex; justify-content: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; } .c-btn { font-family: 'Raleway', sans-serif; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; border-radius: 10px; padding: 14px 40px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; line-height: 1; text-decoration: none !important; /* remove underline */ color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; will-change: transform, box-shadow; } /* Remove any template pseudo underline/background anims */ .c-btn::before, .c-btn::after { display: none !important; content: none !important; } /* Solid CTA (primary) */ .c-btn.c-btn-solid { background: var(--purple); color: #fff; border: 2px solid var(--purple); box-shadow: 0 6px 18px rgba(124,58,237,0.25); } .c-btn.c-btn-solid:hover { transform: translateY(-2px); background: #6d28d9; border-color: #6d28d9; animation: cta-pulse 1.4s ease-in-out infinite; } /* Ghost CTA (secondary) */ .c-btn.c-btn-ghost { background: rgba(0,0,0,0.25); color: #fff; border: 2px solid var(--purple); box-shadow: 0 6px 18px rgba(124,58,237,0.15); backdrop-filter: blur(2px); } .c-btn.c-btn-ghost:hover { transform: translateY(-2px); background: var(--purple); color: #fff; animation: cta-pulse 1.4s ease-in-out infinite; } /* Pulse keyframes (soft glow) */ @keyframes cta-pulse { 0% { box-shadow: 0 6px 18px rgba(124,58,237,0.25); } 50% { box-shadow: 0 10px 28px rgba(124,58,237,0.45); } 100% { box-shadow: 0 6px 18px rgba(124,58,237,0.25); } } /* Stack on mobile */ @media (max-width: 640px) { .hero-actions { flex-direction: column; align-items: center; gap: 14px; } .c-btn { width: 82%; text-align: center; } } /* ========================= Hero fade-out into next section ========================= */ .hero-fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 160px; /* adjust fade height */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%); z-index: 2; pointer-events: none; } /* ========================= Booking Modal Styles (boxed layout + close button) ========================= */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 3000; padding: 20px; backdrop-filter: blur(6px); } .modal-overlay.active { display: flex; animation: fadeInModal 0.3s ease forwards; } @keyframes fadeInModal { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .modal-content { position: relative; background: #111; border-radius: 14px; overflow: hidden; max-width: 600px; /* width of the box */ width: 100%; height: 95vh; max-height: 95vh; /* box height */ box-shadow: 0 10px 40px rgba(0,0,0,0.5); border: 2px solid var(--purple); display: flex; flex-direction: column; } /* Close button */ .modal-close { position: absolute; top: 12px; right: 16px; background: transparent; border: none; color: var(--purple); font-size: 34px; font-weight: 600; cursor: pointer; border-radius: 8px; line-height: 1; transition: transform 0.25s ease, color 0.25s ease; z-index: 10; } .modal-close:hover { transform: scale(1.15); color: #a78bfa; } /* Iframe scrolls inside the box */ .modal-content iframe { flex: 1; width: 100%; height: 100%; border: none; overflow: auto; } /* ========================= DEMAND ENGINEERING SECTION ========================= */ .section--demand { background: #000; padding: 120px 0 110px; color: #fff; } .container-narrow { max-width: 980px; margin: 0 auto; padding: 0 22px; } .de-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 48px 42px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); backdrop-filter: blur(4px); text-align: center; } .de-eyebrow { font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; color: #c4b5fd; margin-bottom: 12px; } .de-title { font-family: 'Oswald', sans-serif; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.18; /* ↑ extra breathing room to prevent wrap overlap */ letter-spacing: -0.01em; color: #fff; margin: 10px 0 18px; overflow-wrap: anywhere; } .de-title span { color: var(--purple); } /* 👇 Only text paragraphs left-aligned */ .de-lead, .de-card p, .de-offer { text-align: left; font-family: 'Raleway', sans-serif; color: #f3f3f3; } .de-lead { font-size: 18px; margin: 10px 0 20px; } .de-offer { margin-top: 14px; color: #ddd; font-size: 17px; line-height: 1.6; } /* Keep actions centred */ .de-actions { margin-top: 32px; display: flex; justify-content: center; } /* Small screens */ @media (max-width: 640px) { .de-card { padding: 30px 24px; } .de-title { font-size: 32px; line-height: 1.22; } .de-lead, .de-offer { font-size: 16px; } } /* ========================= RESULTS — Responsive Gallery ========================= */ .section--results{ background:#000; padding:110px 0 120px; color:#fff; } .results-header{ text-align:center; margin-bottom:26px; } .results-title{ font-family:'Oswald',sans-serif; font-size:clamp(30px,4.5vw,52px); line-height:1.18; margin:0 0 8px; } .results-sub{ font-family:'Raleway',sans-serif; color:#d4d4d4; margin:0; } /* Grid */ .results-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:22px; } /* Card */ .result{ position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 32px rgba(0,0,0,.35); transform: translateY(12px); opacity: 0; transition: transform .6s ease, opacity .6s ease, box-shadow .25s ease, border-color .25s ease; } .result.show{ transform:none; opacity:1; } .result img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .45s ease, filter .45s ease; } .result::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 50%); opacity:.65; transition:opacity .25s ease; pointer-events:none; } .result:hover{ box-shadow:0 18px 45px rgba(124,58,237,.35); border-color: rgba(124,58,237,.45); } .result:hover img{ transform: scale(1.04); filter: saturate(1.05); } .result:hover::after{ opacity:.4; } /* Chip label */ .result-chip{ position:absolute; left:10px; bottom:10px; background:rgba(124,58,237,.9); color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 10px; border-radius:999px; box-shadow:0 6px 18px rgba(124,58,237,.35); } /* Small devices */ @media (max-width:640px){ .results-grid{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; } .result{ border-radius:12px; } .result-chip{ font-size:11px; padding:5px 9px; } } /* ========================= HERO VIDEO BOTTOM FADE RESTORE ========================= */ .hero-vignette { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%); z-index: 2; pointer-events: none; transition: opacity 0.6s ease; } /* ========================= RESULTS GALLERY (centered layout) ========================= */ .section--results { background:#000; color:#fff; padding: 110px 0 120px; } .results-header { text-align:center; margin-bottom: 22px; } .results-title { font-family:'Oswald',sans-serif; font-size:clamp(30px,4.5vw,52px); line-height:1.18; margin:0 0 8px; } .results-sub { font-family:'Raleway',sans-serif; color:#ddd; margin:0; } /* Grid: desktop 4 cols; tablet 3; mobile 1 */ .results-grid{ display:grid; gap:16px; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: start; } /* Cards */ .result{ position:relative; width:100%; max-width: 320px; /* keeps images nicely sized */ aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 36px rgba(0,0,0,.45); transform: translateY(12px); opacity: 0; transition: opacity .7s ease, transform .7s ease, box-shadow .25s ease, transform .25s ease; } .result img{ width:100%; height:100%; object-fit: cover; display:block; } .result:hover{ box-shadow: 0 18px 44px rgba(124,58,237,.35); transform: translateY(-2px); } /* Chips */ .result-chip{ position:absolute; left:12px; bottom:12px; background: rgba(124,58,237,.85); border:1px solid rgba(255,255,255,.15); color:#fff; font: 600 13px/1 'Raleway',sans-serif; padding:6px 10px; border-radius: 999px; box-shadow: 0 8px 18px rgba(124,58,237,.35); pointer-events:none; } /* Staggered fade-in when section becomes visible (JS adds .is-inview to .section--results) */ .section--results.is-inview .result{ opacity:1; transform:none; } .section--results.is-inview .result:nth-child(1){ transition-delay: .05s; } .section--results.is-inview .result:nth-child(2){ transition-delay: .12s; } .section--results.is-inview .result:nth-child(3){ transition-delay: .19s; } .section--results.is-inview .result:nth-child(4){ transition-delay: .26s; } .section--results.is-inview .result:nth-child(5){ transition-delay: .33s; } .section--results.is-inview .result:nth-child(6){ transition-delay: .40s; } /* ---- Desktop centering trick: place #5 under col 2 and #6 under col 3 ---- */ .results-grid .result:nth-child(5){ grid-column: 2; } .results-grid .result:nth-child(6){ grid-column: 3; } /* Tablet: 3 columns — keep 5 & 6 centered under the middle column area */ @media (max-width: 1024px){ .results-grid{ grid-template-columns: repeat(3, 1fr); } .results-grid .result:nth-child(5){ grid-column: 2; } /* center */ .results-grid .result:nth-child(6){ grid-column: 2; } /* stack under center */ } /* Mobile: 1 column, full width */ @media (max-width: 640px){ .results-grid{ grid-template-columns: 1fr; } .result{ max-width: 100%; border-radius: 12px; } } /* ========================= RESULTS GRID — 4 → 3 → 1 - Desktop (≥1024): 4 cols, center 5 & 6 under 2 & 3 - Tablet (768–1023): 3 cols → 3 + 3 (no stagger) - Mobile (<768): 1 col ========================= */ .results-grid{ display:grid; gap:18px; grid-auto-flow: row; } /* Desktop: 4 columns + center last row (items 5 & 6) */ @media (min-width:1024px){ .results-grid{ grid-template-columns:repeat(4,1fr); } /* center 5 & 6 under columns 2 and 3 */ .results-grid .result:nth-child(5){ grid-column:2; } .results-grid .result:nth-child(6){ grid-column:3; } } /* Tablet: 3 columns — ensure 3 + 3 (reset any manual placement) */ @media (min-width:768px) and (max-width:1023.98px){ .results-grid{ grid-template-columns:repeat(3,1fr); } .results-grid .result:nth-child(5), .results-grid .result:nth-child(6){ grid-column:auto !important; } } /* Mobile: single column (already what you want) */ @media (max-width:767.98px){ .results-grid{ grid-template-columns:1fr; } } /* Optional: make tiles consistent */ .results-grid .result{ position:relative; display:block; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:transform .25s ease, box-shadow .25s ease; } .results-grid .result img{ width:100%; height:auto; aspect-ratio: 4 / 3; /* keeps rows tidy */ object-fit:cover; display:block; } .results-grid .result:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(124,58,237,.25) inset; } /* Chip label stays */ .result-chip{ position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.55); border:1px solid rgba(124,58,237,.5); font:600 12px/1.1 'Raleway',sans-serif; color:#fff; letter-spacing:.04em; pointer-events:none; } /* ========================= RESULTS MODAL FIX ========================= */ #results-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; padding: 20px; } #results-modal.active { display: flex; animation: fadeIn .3s ease forwards; } #results-modal .modal-content--image { position: relative; background: transparent; border: none; padding: 0; max-width: 95vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } #results-modal-img { display: block; width: auto; height: auto; max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 12px; box-shadow: 0 0 40px rgba(0,0,0,0.6); } #results-modal .modal-close { position: absolute; top: -12px; right: -12px; font-size: 34px; line-height: 1; color: #fff; background: rgba(124,58,237,0.85); border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s ease, transform .25s ease; } #results-modal .modal-close:hover { background: rgba(124,58,237,1); transform: scale(1.1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ========================= DEMAND ENGINEERING PROCESS SECTION ========================= */ .section--process { background: #080808; padding: 140px 0 130px; color: #fff; text-align: center; } .process-title { font-family: 'Oswald', sans-serif; font-size: clamp(36px, 4vw, 54px); color: #fff; margin-bottom: 70px; line-height: 1.22; /* ← fix: more space between wrapped lines */ overflow-wrap: anywhere; } .process-title span { color: var(--purple); } .process-stack { display: flex; flex-direction: column; gap: 48px; align-items: center; } .process-card { max-width: 780px; width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 50px 42px; backdrop-filter: blur(6px); text-align: left; box-shadow: 0 20px 60px rgba(0,0,0,0.35); transform: translateY(40px); opacity: 0; transition: all 1s ease; } .process-card.show { transform: none; opacity: 1; } .process-heading { font-family: 'Oswald', sans-serif; font-size: 28px; color: var(--purple); margin-bottom: 16px; line-height: 1.25; } .process-card p { font-size: 17px; color: #ddd; line-height: 1.65; margin: 0; } /* Summary box */ .process-summary { max-width: 820px; background: linear-gradient(to bottom right, rgba(124,58,237,0.12), rgba(255,255,255,0.04)); border: 1px solid rgba(124,58,237,0.3); border-radius: 18px; padding: 60px 50px; margin-top: 40px; text-align: center; transform: translateY(40px); opacity: 0; transition: all 1s ease; } .process-summary.show { transform: none; opacity: 1; } .process-summary p { font-size: 18px; color: #f0f0f0; margin-bottom: 32px; } .process-actions { display: flex; justify-content: center; } /* Scroll fade-in animation */ .fade-step { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s ease; } .fade-step.show { opacity: 1; transform: none; } @media (max-width: 640px) { .process-card, .process-summary { padding: 30px 24px; } .process-title { line-height: 1.26; margin-bottom: 42px; } .process-heading { font-size: 22px; } .process-summary p { font-size: 16px; } } /* ========================= REVIEWS (1-per-view, snap cleanly) ========================= */ .section--reviews { background: #000; padding: 120px 0; color: #fff; text-align: center; } .reviews-header { margin-bottom: 46px; } .reviews-title { font-family: 'Oswald', sans-serif; font-size: clamp(32px, 4vw, 48px); margin: 0 0 16px; line-height: 1.2; overflow-wrap: anywhere; } .reviews-sub { color: #d4d4d4; margin: 0; font-size: 17px; line-height: 1.6; } .reviews-slider { position: relative; max-width: 760px; margin: 0 auto 28px; } /* Viewport: no padding/gap so each slide = exact viewport width */ .reviews-viewport { overflow-x: auto; overflow-y: hidden; width: 100%; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } /* Track: no gap/padding; each child is full viewport width */ .reviews-track { display: flex; align-items: stretch; } .review-card { flex: 0 0 100%; /* exact viewport width */ box-sizing: border-box; /* padding doesn’t change width */ padding: 42px 40px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; backdrop-filter: blur(4px); text-align: left; position: relative; transition: box-shadow 0.3s ease, transform 0.3s ease; scroll-snap-align: start; /* align each slide at left edge */ } .review-card.is-active { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.4), 0 20px 60px rgba(0, 0, 0, 0.5); } .review-body { font-size: 20px; line-height: 1.7; color: #f3f3f3; margin-bottom: 16px; } .review-author { font-size: 16px; color: #c4b5fd; letter-spacing: 0.02em; } /* Nav — perfectly centred icons */ .review-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(124, 58, 237, 0.25); border: 1px solid rgba(124, 58, 237, 0.6); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; /* smaller ensures glyph fits perfectly */ line-height: 0; /* remove any default baseline shift */ cursor: pointer; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; z-index: 10; display: flex; align-items: center; justify-content: center; } .review-prev { left: -72px; } .review-next { right: -72px; } .review-nav:hover { background: rgba(124, 58, 237, 0.45); box-shadow: 0 0 12px rgba(124, 58, 237, 0.4); transform: translateY(-50%) scale(1.08); } /* Support for font-awesome or chevron icons */ .review-nav i { display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 0; } /* Footer */ .reviews-footnote { color: #bfbfbf; margin: 16px 0 28px; } .reviews-cta { text-align: center; } /* Responsive */ @media (max-width: 900px) { .review-prev { left: -56px; } .review-next { right: -56px; } } @media (max-width: 768px) { .reviews-slider { max-width: 92%; } .review-card { padding: 28px 22px; } .review-body { font-size: 18px; } .review-nav { width: 42px; height: 42px; font-size: 20px; } .review-prev { left: 8px; } .review-next { right: 8px; } } @media (max-width: 480px) { .reviews-slider { max-width: 100%; } .review-card { padding: 24px 18px; } .review-prev { left: 4px; } .review-next { right: 4px; } } /* ========================= SECRET (reveal video section) ========================= */ .section--secret { background: #000; padding: 120px 0; color: #fff; text-align: center; } .secret-header { margin-bottom: 28px; } .secret-title { font-family: 'Oswald', sans-serif; font-size: clamp(32px, 4.4vw, 50px); margin: 0 0 12px; line-height: 1.18; /* safer wrap */ } .secret-sub { color: #d7d7d7; font-size: 18px; line-height: 1.7; margin: 0 auto; max-width: 860px; text-wrap: pretty; } .secret-cta { margin: 28px 0 60px; } /* Video container with rounded corners & card feel */ .secret-video-wrap { margin: 0 auto 28px; max-width: 980px; padding: 0 12px; } .secret-video-frame { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } /* 16:9 responsive ratio */ .secret-video-frame::before { content: ""; display: block; padding-top: 56.25%; } .secret-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; border-radius: 14px; } /* Footer prompt + CTA */ .secret-footer { margin-top: 18px; } .secret-footer-title { font-family: 'Oswald', sans-serif; font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 18px; } .secret-footer-actions { display: flex; justify-content: center; gap: 14px; } /* Small screens */ @media (max-width: 640px) { .secret-sub { font-size: 16px; padding: 0 6px; } .secret-video-wrap { padding: 0; } } /* ===== Vertical rhythm tighten (place at END of overrides.css) ===== */ :root { --section-pad: 84px; } @media (max-width: 1024px) { :root { --section-pad: 68px; } } @media (max-width: 640px) { :root { --section-pad: 48px; } } /* Normalize section padding (hero stays as-is) */ .section--demand, .section--results, .section--reviews, .section--secret, #about, #services, #contact { padding-top: var(--section-pad) !important; padding-bottom: var(--section-pad) !important; } /* Tighten headers inside each section */ .results-header { margin-bottom: 22px !important; } .reviews-header { margin-bottom: 22px !important; } .secret-header { margin-bottom: 18px !important; } /* Kill extra gaps from Siy divider blocks */ .dividerOT, .dividerOT.out-top, .dividerOT.out-bottom, .dividerOT.dividerOT-inner { height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Make sure hero doesn't push extra space */ #homeOT { margin-bottom: 0 !important; } .upper-page { margin-bottom: 0 !important; } /* Container spacing sanity */ .container-narrow { margin-top: 0 !important; margin-bottom: 0 !important; } /* Headline/subhead spacing tweaks */ .results-title, .reviews-title, .secret-title { margin-bottom: 10px !important; } .results-sub, .reviews-sub, .secret-sub { margin-top: 8px !important; } /* Reviews slider minor gap (keeps arrows clear) */ .reviews-slider { margin-bottom: 20px !important; } /* ====================== HEADER ====================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; transition: background-color 0.4s ease, box-shadow 0.4s ease; background: transparent; /* starts transparent over video */ box-shadow: none; } .site-header.is-solid { background: rgba(0, 0, 0, 0.9); /* appears on scroll */ box-shadow: 0 2px 12px rgba(0,0,0,0.4); backdrop-filter: blur(6px); } .header-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; } .header-home i { font-size: 24px; color: #fff; transition: color 0.3s ease, transform 0.3s ease; } .header-home:hover i { color: #c4b5fd; transform: scale(1.1); } .header-login { background: rgba(124,58,237,0.85); color: #fff; font-weight: 600; text-decoration: none; padding: 10px 20px; border-radius: 8px; transition: background 0.3s ease; } .header-login:hover { background: rgba(124,58,237,1); } @media (max-width: 640px) { .header-inner { padding: 14px 20px; } .header-home i { font-size: 22px; } .header-login { font-size: 14px; padding: 8px 16px; } } /* ========================= LEGAL PAGES (policies) ========================= */ .legal-page { background: #000; color: #ddd; padding: 180px 0 100px; /* add top space to clear fixed header */ font-size: 16px; line-height: 1.8; } .legal-page .container { max-width: 900px; margin: 0 auto; } .legal-page h1 { font-family: 'Oswald', sans-serif; font-size: clamp(36px, 4vw, 52px); margin-bottom: 28px; color: #fff; text-align: center; } .legal-page h2, .legal-page h3 { color: #c4b5fd; margin-top: 32px; margin-bottom: 12px; } .legal-page p { margin-bottom: 18px; text-align: justify; } .legal-page ul { margin: 12px 0 20px 24px; list-style: disc; } .legal-page a { color: #c4b5fd; text-decoration: underline; } .legal-page a:hover { color: #fff; } /* === Legal pages: headings centered, body left-aligned === */ .legal-page .container { max-width: 980px; } .legal-page h1, .legal-page h2, .legal-page h3 { text-align: center; margin: 0 0 14px; } .legal-page p, .legal-page ul, .legal-page ol, .legal-page li { text-align: left; } .legal-page p + h2, .legal-page ul + h2, .legal-page ol + h2 { margin-top: 28px; } /* give the page breathing room below the header */ .legal-page { padding-top: 96px; padding-bottom: 96px; } /* small helper so “Cookie Settings” links look like your CTAs */ a.legal-inline-link { color: var(--purple); text-decoration: underline; } /* ====================== FOOTER ====================== */ .site-footer { background: #000; color: #d4d4d4; text-align: center; padding: 60px 20px 40px; border-top: 1px solid rgba(255,255,255,0.1); } .footer-inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* Rounded + smaller logo */ .footer-logo img { max-width: 100px; /* smaller size */ width: 100%; height: auto; display: block; border-radius: 12px; /* rounded corners */ box-shadow: 0 4px 20px rgba(255,255,255,0.1); /* subtle glow for contrast */ } /* Policy links */ .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .footer-links a { color: #c4b5fd; font-weight: 500; text-decoration: none; transition: color 0.25s ease; } .footer-links a:hover { color: #fff; text-decoration: underline; } /* Legal text */ .footer-legal { font-size: 14px; line-height: 1.6; color: #bfbfbf; max-width: 600px; } .footer-legal p { margin: 0 0 6px; } /* Mobile adjustments */ @media (max-width: 768px) { .footer-logo img { max-width: 85px; /* even smaller on mobile */ border-radius: 10px; } .footer-links { flex-direction: column; gap: 10px; } .footer-legal { font-size: 13px; line-height: 1.5; } } /* ========================= NEXT STEPS FINAL FIXES ========================= */ .section--nextsteps { padding-top: 100px; /* Prevent header clipping */ } .ns-header { text-align: left; margin-bottom: 42px; } .ns-title { font-family: 'Oswald', sans-serif; font-size: clamp(34px, 4vw, 48px); margin: 0 0 10px; color: #fff; } .ns-sub { color: #d4d4d4; margin-top: 10px; } /* Card styling */ .ns-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 34px 28px; margin-bottom: 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); backdrop-filter: blur(6px); } /* Terms bullets */ .ns-terms-list { list-style: none; padding: 0; margin: 18px 0; } .ns-terms-list li { position: relative; padding-left: 26px; margin-bottom: 12px; line-height: 1.7; color: #f3f3f3; } .ns-terms-list li::before { content: ''; position: absolute; top: 10px; left: 0; width: 9px; height: 9px; border-radius: 50%; background-color: #7c3aed; box-shadow: 0 0 6px rgba(124,58,237,0.6); } /* Form grid layout */ .ns-grid { display: grid; gap: 14px; } .ns-grid--1 { grid-template-columns: 1fr; } .ns-grid--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 768px) { .ns-grid--2 { grid-template-columns: 1fr; } } .ns-field label { display: block; font-weight: 600; margin-bottom: 6px; } .ns-field input { width: 100%; padding: 10px 12px; /* smaller height */ border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #fff; font-size: 15px; height: 42px; /* consistent smaller height */ box-sizing: border-box; } .ns-field input:focus { outline: none; border-color: rgba(124,58,237,0.6); box-shadow: 0 0 6px rgba(124,58,237,0.4); } .ns-check { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; } .ns-check input { width: 18px; height: 18px; } .ns-actions { margin-top: 20px; text-align: left; } .ns-errors ul { margin-top: 8px; color: #ffb4b4; } /* === Next Steps: minimal tweaks requested === */ .ns-field { text-align: left; } .ns-field label { text-align: left; } .ns-field .required { color: #ff4d4d; margin-left: 2px; font-weight: 700; } /* Optional spacer to keep grid alignment when only using one column */ .ns-spacer { display: block; } /* Left-align all Terms of Service text */ .ns-card--terms, .ns-card--terms p, .ns-card--terms ul, .ns-card--terms li { text-align: left; } /* Make the SVG home icon purple and clickable */ .header-home .home-icon { color: #7c3aed; /* purple */ display: inline-flex; line-height: 0; } .header-home:hover .home-icon { color: #a78bfa; } /* Keep header transparent by default; your existing .is-solid rule will add bg on scroll */ .site-header { background: transparent; box-shadow: none; } /* =============================== STRATEGY CALL SECTION (with button) =============================== */ .section--strategycall { padding: 100px 0; text-align: center; background: radial-gradient(circle at center, rgba(124,58,237,0.1) 0%, rgba(0,0,0,0.9) 80%); color: #fff; } .sc-header { margin-bottom: 40px; } .sc-title { font-family: 'Oswald', sans-serif; font-size: clamp(36px, 5vw, 52px); font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.2; /* ← fix overlap on wrap */ overflow-wrap: anywhere; } .sc-title span { color: #a78bfa; text-shadow: 0 0 10px rgba(167,139,250,0.6); } .sc-sub { color: #d1d1d1; font-size: 18px; margin-top: 12px; } .sc-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; max-width: 800px; margin: 0 auto; padding: 40px 36px; backdrop-filter: blur(8px); box-shadow: 0 0 30px rgba(124,58,237,0.2); text-align: left; } .sc-card p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; } .sc-list { list-style: none; padding: 0; margin: 24px 0; } .sc-list li { font-size: 17px; margin-bottom: 10px; padding-left: 28px; position: relative; } .sc-list li::before { content: "•"; position: absolute; left: 0; color: #7c3aed; font-size: 24px; line-height: 0.9; text-shadow: 0 0 6px rgba(124,58,237,0.8); } .sc-tagline { font-size: 20px; text-align: center; color: #a78bfa; margin-top: 30px; } .sc-cta { text-align: center; margin-top: 28px; } .sc-btn { background-color: #7c3aed; border: none; color: #fff; padding: 14px 36px; border-radius: 10px; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 0 16px rgba(124,58,237,0.4); transition: all 0.3s ease; } .sc-btn:hover { background-color: #a78bfa; box-shadow: 0 0 24px rgba(124,58,237,0.6); transform: translateY(-2px); } /* ===== Reviews: tiny-phone mode (stack, left-aligned) ===== */ @media (max-width: 375px) { #reviews .container.container-narrow { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } /* kill slider behavior + snap; make it a simple stack */ #reviews .reviews-viewport { overflow: visible !important; scroll-snap-type: none !important; } #reviews .reviews-track { display: block !important; /* turn off horizontal flex row */ transform: none !important; width: 100% !important; max-width: 100% !important; } /* cards: full width, left-aligned, no fixed widths */ #reviews .review-card { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; margin: 0 0 12px 0 !important; scroll-snap-align: none !important; transform: none !important; } /* arrows: hide so they don't affect layout */ #reviews .review-prev, #reviews .review-next { display: none !important; } /* hard reset any inline width/position Siy might inject */ #reviews [style*="width"], #reviews [style*="left"], #reviews [style*="right"], #reviews [style*="transform"] { width: auto !important; left: auto !important; right: auto !important; transform: none !important; } /* left-align text in this section */ #reviews .reviews-header, #reviews .reviews-title, #reviews .reviews-sub, #reviews .review-card { text-align: left !important; } } /* ========================================================= FIX (results modal): close "X" clipped on mobile ========================================================= */ #results-modal .modal-content { position: relative !important; /* Make room inside the box so the X isn't clipped */ padding-top: 56px !important; /* If a global rule forces hidden, ensure the button can render */ overflow: visible !important; } #results-modal .modal-close { position: absolute !important; /* sit inside the modal box */ top: 12px !important; right: 12px !important; z-index: 10000 !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 0 !important; background: rgba(0,0,0,0.7) !important; color: #fff !important; font-size: 28px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; } /* Keep the image nicely contained; allow space for the header padding */ #results-modal .modal-content--image img, #results-modal img#results-modal-img { display: block !important; width: 100% !important; height: auto !important; max-height: calc(90vh - 56px) !important; /* subtract the padded header */ object-fit: contain !important; border-radius: 12px !important; } /* Extra safety on small screens */ @media (max-width: 767px) { #results-modal .modal-content { max-width: 95vw !important; margin: 0 auto !important; padding-top: 64px !important; /* a bit more room for notches */ } #results-modal .modal-close { top: 16px !important; right: 16px !important; width: 44px !important; height: 44px !important; font-size: 32px !important; } } /* ========================= TESTIMONIALS (new) ========================= */ .section--testimonials { background: #000; padding: 120px 0; color: #fff; } .t-header { text-align: center; margin-bottom: 32px; } .t-title { font-family: 'Oswald', sans-serif; font-size: clamp(32px, 4vw, 48px); line-height: 1.2; margin: 0 0 12px; overflow-wrap: anywhere; } .t-sub { color: #d4d4d4; margin: 0; font-size: 17px; line-height: 1.6; } /* Desktop slider container */ .t-slider { position: relative; max-width: 820px; margin: 0 auto 24px; } .t-viewport { overflow: hidden; width: 100%; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .t-track { display: flex; transition: transform 0.6s ease; } .t-card { flex: 0 0 100%; padding: 42px 40px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; backdrop-filter: blur(4px); text-align: left; } .t-body { font-size: 20px; line-height: 1.7; color: #f3f3f3; margin: 0 0 16px; } .t-author { font-size: 16px; color: #c4b5fd; letter-spacing: 0.02em; margin: 0; } /* Nav */ .t-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(124, 58, 237, 0.25); border: 1px solid rgba(124, 58, 237, 0.6); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; z-index: 10; display: flex; align-items: center; justify-content: center; } .t-prev { left: -72px; } .t-next { right: -72px; } .t-nav:hover { background: rgba(124, 58, 237, 0.45); box-shadow: 0 0 12px rgba(124, 58, 237, 0.4); transform: translateY(-50%) scale(1.08); } /* Foot + CTA */ .t-footnote { color: #bfbfbf; margin: 16px 0 28px; text-align: center; } .t-cta { text-align: center; } /* Tablet */ @media (max-width: 900px) { .t-prev { left: -56px; } .t-next { right: -56px; } } /* Mobile: stack reviews (no slider) */ @media (max-width: 768px) { .t-slider { max-width: 100%; } .t-nav { display: none; } .t-viewport { overflow: visible; box-shadow: none; } .t-track { display: block; transform: none !important; } .t-card { margin: 0 0 12px 0; padding: 28px 22px; } .t-body { font-size: 18px; } }