/* ============================================================================ VTurnU homepage. SCOPING RULE, do not break it: never style a bare element under .hp. .hp is on , so `.hp a {}` repaints the shared header and footer too. That is exactly what made the hero button and every footer link invisible: links were forced to ink on an ink ground. Style .hp-* section classes and named component classes only. ============================================================================ */ .hp { --paper: #F6F2EA; --paper-2: #FFFDF9; --ink: #14102A; --ink-2: #1E1940; --ink-70: rgba(20, 16, 42, .72); --ink-55: rgba(20, 16, 42, .60); --ink-12: rgba(20, 16, 42, .12); --ink-06: rgba(20, 16, 42, .06); --cyan: #00A5C4; --blue: #2473D0; --violet: #4438CA; --pink: #E5306E; --orange: #E07600; --on-ink: #F6F2EA; --on-ink-70: rgba(246, 242, 234, .76); --on-ink-12: rgba(246, 242, 234, .16); --sans: Figtree, Poppins, system-ui, -apple-system, sans-serif; --display: Caprasimo, Poppins, system-ui; --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 2.5rem; --s6: 3rem; --s8: 4rem; --s10: 5rem; --s12: 6rem; --shell: 1200px; } .hp main { display: block; overflow-x: clip; } .hp-sec { padding: clamp(3.5rem, 7vw, 6rem) 0; } .hp-wrap { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } /* ---- type ------------------------------------------------------------- */ .hp-h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 6.4vw, 4.25rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 var(--s4); color: var(--ink); } .hp-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.85rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--s3); color: var(--ink); } .hp-eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--violet); margin: 0 0 var(--s3); } .hp-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9375rem; margin: 0 0 var(--s4); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--violet); background: var(--paper-2); border: 1px solid rgba(68, 56, 202, .22); border-radius: 999px; } .hp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; } .hp-lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--ink-70); max-width: 60ch; margin: 0 0 var(--s5); } .hp-sec--ink .hp-h2, .hp-sec--ink .hp-h1 { color: var(--on-ink); } .hp-sec--ink .hp-lead { color: var(--on-ink-70); } .hp-sec--ink .hp-eyebrow { color: var(--cyan); } /* ---- buttons ---------------------------------------------------------- */ /* Specificity is deliberate: these must beat any inherited link colour. */ .hp .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.0625rem 2rem; min-height: 56px; font: 600 1.0625rem/1 var(--sans); text-align: center; text-decoration: none; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } /* Both gradient stops are dark enough to carry white text at 4.5:1. The brighter brand pink and orange measured 4.2 and 3.1, which fails. */ .hp .hp-btn--primary { background: linear-gradient(100deg, #D42461, #B85A00); color: #FFFFFF; border-color: transparent; box-shadow: 0 8px 22px rgba(212, 36, 97, .32); } .hp .hp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(229, 48, 110, .40); color: #FFFFFF; } .hp .hp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-12); } .hp .hp-btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-2px); } .hp .hp-btn--on-ink { background: var(--on-ink); color: var(--ink); } .hp .hp-btn--on-ink:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); color: var(--ink); } .hp .hp-btn--ghost-on-ink { background: transparent; color: var(--on-ink); border-color: var(--on-ink-12); } .hp .hp-btn--ghost-on-ink:hover { background: var(--on-ink); color: var(--ink); } .hp .hp-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; } .hp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } /* ---- reveal ----------------------------------------------------------- */ .hp-js [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); } .hp-js [data-rise].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hp-js [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- hero ------------------------------------------------------------- */ .hp-hero { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem); overflow: hidden; } .hp-hero::before { content: ""; position: absolute; inset: -40% -15% auto -15%; height: 110%; background: radial-gradient(50% 65% at 14% 28%, rgba(36, 115, 208, .24), transparent 70%), radial-gradient(46% 60% at 86% 14%, rgba(229, 48, 110, .20), transparent 70%), radial-gradient(38% 50% at 60% 78%, rgba(68, 56, 202, .14), transparent 70%); pointer-events: none; } .hp-hero .hp-wrap { position: relative; } .hp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .hp-hero-copy { max-width: 42ch; } .hp-hero .hp-lead { margin-bottom: var(--s5); } .hp-hero-mark { color: var(--pink); } .hp-hero-note { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; } .hp-hero-note li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; color: var(--ink-70); } .hp-hero-note svg { flex: none; color: var(--blue); } /* ---- hero visual: an illustrative search + AI-answer mockup, with real client numbers layered on as proof chips. Generic domain, no real brand or actual Google artwork, so it reads as an illustration, not a claim to be a screenshot. ---------------------------------------------------- */ .hp-hero-visual { display: flex; justify-content: center; padding: var(--s4) var(--s3) var(--s5); } .hp-mock { position: relative; width: 100%; max-width: 440px; background: var(--paper-2); border: 1px solid var(--ink-12); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(20, 16, 42, .28); transform: rotate(-1.2deg); } .hp-mock-bar { display: flex; align-items: center; gap: .4375rem; padding: .8125rem 1.125rem; border-bottom: 1px solid var(--ink-12); } .hp-mock-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .hp-mock-url { margin-left: .625rem; padding: .25rem .75rem; background: var(--ink-06); border-radius: 999px; font-size: .75rem; color: var(--ink-55); font-family: monospace; } .hp-mock-body { display: grid; gap: var(--s3); padding: clamp(1.25rem, 3vw, 1.75rem); } .hp-mock-r-title { font-size: 1.0625rem; font-weight: 600; color: #1A0DAB; margin: 0 0 .1875rem; line-height: 1.35; } .hp-mock-r-url { font-size: .8125rem; color: #0A6B1D; margin: 0 0 .375rem; } .hp-mock-r-desc { font-size: .875rem; line-height: 1.5; color: var(--ink-70); margin: 0; } .hp-mock-ai { padding: var(--s3); background: linear-gradient(135deg, rgba(36, 115, 208, .09), rgba(68, 56, 202, .09)); border: 1px solid rgba(68, 56, 202, .18); border-radius: 12px; } .hp-mock-ai-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); margin: 0 0 .5rem; } .hp-mock-ai-text { font-size: .875rem; line-height: 1.55; color: var(--ink); margin: 0; } .hp-mock-ai-text strong { color: var(--violet); } .hp-chip { position: absolute; display: inline-flex; align-items: baseline; gap: .5rem; padding: .625rem 1rem; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(20, 16, 42, .25); font-family: var(--display); font-weight: 400; font-size: 1.1875rem; color: var(--ink); line-height: 1; white-space: nowrap; } .hp-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; } .hp-chip-l { font-family: var(--sans); font-size: .8125rem; font-weight: 600; color: var(--ink-55); } .hp-chip--a { top: -18px; right: -8px; transform: rotate(2deg); } .hp-chip--b { bottom: -16px; left: -18px; transform: rotate(-2deg); } /* ---- logo marquee ----------------------------------------------------- */ .hp-marquee-sec { padding: var(--s6) 0; border-block: 1px solid var(--ink-12); background: var(--paper-2); } .hp-marquee-head { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 var(--s4); } .hp-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .hp-marquee-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); width: max-content; animation: hp-slide 38s linear infinite; } .hp-marquee:hover .hp-marquee-track { animation-play-state: paused; } .hp-marquee-track img { height: clamp(34px, 4.5vw, 46px); width: auto; display: block; filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease; } .hp-marquee-track img:hover { filter: none; opacity: 1; } @keyframes hp-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .hp-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } .hp-marquee-track { animation: none; } } /* ---- services --------------------------------------------------------- */ .hp-svc-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); } .hp-svc-head .hp-lead { margin-bottom: 0; } .hp-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); border: 1px solid var(--ink-12); border-radius: 16px; overflow: hidden; } .hp-svc { display: flex; flex-direction: column; gap: var(--s2); padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--paper-2); text-decoration: none; position: relative; transition: background .2s ease; } .hp-svc::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; } .hp-svc:hover { background: var(--paper); } .hp-svc:hover::before { transform: scaleX(1); } .hp-svc:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; } .hp-svc-t { font-size: 1.1875rem; font-weight: 700; color: var(--ink); margin: 0; } .hp-svc-d { font-size: .9688rem; line-height: 1.55; color: var(--ink-70); margin: 0; flex: 1; } /* The accent lives in the top rule, which is decorative. This label is real text, and the brighter accents (cyan, pink, orange) only reach 2.5 to 3.7 against paper, so it stays ink. */ .hp-svc-go { font-size: .9375rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: .375rem; transition: gap .2s ease; } .hp-svc:hover .hp-svc-go { gap: .625rem; } /* ---- results ---------------------------------------------------------- */ .hp-sec--ink { background: var(--ink); color: var(--on-ink); } .hp-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s6); } .hp-res { padding: var(--s5) var(--s4); border: 1px solid var(--on-ink-12); border-radius: 14px; background: linear-gradient(160deg, rgba(246, 242, 234, .05), transparent); } .hp-res-n { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 var(--s2); } .hp-res:nth-child(1) .hp-res-n { color: #4FC9E3; } .hp-res:nth-child(2) .hp-res-n { color: #9E93FF; } .hp-res:nth-child(3) .hp-res-n { color: #FF7FA8; } .hp-res-l { font-size: 1rem; color: var(--on-ink); margin: 0 0 var(--s2); font-weight: 600; } .hp-res-w { font-size: .9063rem; color: var(--on-ink-70); margin: 0; } /* ---- mid-page conversion band ---------------------------------------- */ .hp-band { background: linear-gradient(100deg, var(--violet), var(--blue)); color: #fff; } .hp-band .hp-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .hp-band-t { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; margin: 0 0 .5rem; color: #fff; } /* Full white, not 88%: over the lighter blue end of the gradient the faded version measured 4.04 against a 4.5 requirement. */ .hp-band-s { font-size: 1rem; color: #FFFFFF; margin: 0; max-width: 52ch; } .hp .hp-band .hp-btn--on-ink { background: #fff; color: var(--violet); } /* ---- FAQ, two columns ------------------------------------------------- */ .hp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); align-items: start; } .hp-faq-col { display: flex; flex-direction: column; } .hp-faq-i { border-bottom: 1px solid var(--ink-12); } .hp-faq-i summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0; min-height: 56px; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink); } .hp-faq-i summary::-webkit-details-marker { display: none; } .hp-faq-i summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--violet); font-weight: 400; } .hp-faq-i[open] summary { color: var(--violet); } .hp-faq-i[open] summary::after { content: "\2212"; } .hp-faq-i summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .hp-faq-a { padding: 0 0 var(--s4); font-size: 1rem; line-height: 1.65; color: var(--ink-70); max-width: 54ch; } /* ---- conversion form -------------------------------------------------- */ .hp-form-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .hp-form-why { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); } .hp-form-why li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: start; font-size: 1rem; line-height: 1.5; color: var(--on-ink-70); } .hp-form-why b { color: var(--on-ink); font-weight: 600; } .hp-tick { flex: none; margin-top: .125rem; } .hp-form { display: grid; gap: var(--s3); padding: clamp(1.5rem, 3vw, 2.25rem); background: rgba(246, 242, 234, .06); border: 1px solid var(--on-ink-12); border-radius: 16px; } .hp-f { display: grid; gap: .4375rem; } .hp-f label { font-size: .875rem; font-weight: 600; color: var(--on-ink); } .hp-f input, .hp-f select, .hp-f textarea { width: 100%; padding: .875rem 1rem; min-height: 52px; font: 400 1rem/1.4 var(--sans); color: var(--on-ink); background: rgba(20, 16, 42, .45); border: 1.5px solid var(--on-ink-12); border-radius: 9px; transition: border-color .18s ease, background .18s ease; } .hp-f textarea { min-height: 96px; resize: vertical; } .hp-f input::placeholder, .hp-f textarea::placeholder { color: rgba(246, 242, 234, .45); } .hp-f input:focus, .hp-f select:focus, .hp-f textarea:focus { outline: none; border-color: var(--cyan); background: rgba(0, 165, 196, .12); } .hp-f input[aria-invalid="true"] { border-color: #FF7FA8; } .hp-f-err { font-size: .8125rem; color: #FF9CBB; min-height: 1.1em; } .hp-f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hp-form-fine { font-size: .8438rem; color: var(--on-ink-70); margin: 0; text-align: center; } .hp-form-ok { padding: var(--s4); border: 1.5px solid var(--cyan); background: rgba(0, 165, 196, .14); border-radius: 12px; } .hp-form-ok p { margin: 0; color: var(--on-ink); } .hp-form-bad { padding: var(--s3); border: 1.5px solid #FF7FA8; background: rgba(229, 48, 110, .14); border-radius: 10px; color: var(--on-ink); font-size: .9375rem; } /* ---- sticky mobile CTA ------------------------------------------------ */ .hp-sticky { display: none; } @media (max-width: 760px) { .hp-sticky { display: flex; gap: .625rem; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: .625rem .875rem calc(.625rem + env(safe-area-inset-bottom)); background: rgba(246, 242, 234, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--ink-12); } .hp-sticky .hp-btn { flex: 1; padding: .875rem 1rem; font-size: 1rem; min-height: 52px; } .hp main { padding-bottom: 84px; } } /* Tawk sits bottom-right by default and covered the mobile CTA bar and the submit button. Pin it left so both stay clickable. */ #tawkchat-container iframe, iframe[title*="chat" i] { left: 12px !important; right: auto !important; } @media (max-width: 760px) { iframe[title*="chat" i] { bottom: 84px !important; } } /* ---- responsive ------------------------------------------------------- */ @media (max-width: 1000px) { .hp-hero-grid { grid-template-columns: 1fr; } .hp-hero-copy { max-width: 100%; } .hp-mock { transform: none; max-width: 480px; } .hp-svc-grid { grid-template-columns: repeat(2, 1fr); } .hp-res-grid { grid-template-columns: 1fr; } .hp-form-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .hp-faq-grid { grid-template-columns: 1fr; } .hp-band .hp-wrap { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .hp-svc-grid { grid-template-columns: 1fr; } .hp-actions { flex-direction: column; align-items: stretch; } .hp .hp-btn { width: 100%; } /* Absolute corner chips have no room on a narrow screen, so they drop into the card's own flow as a plain row underneath instead. */ .hp-hero-visual { padding: 0 var(--s3) var(--s4); } .hp-mock { display: flex; flex-direction: column; } .hp-chip { position: static; transform: none; margin: 0 var(--s3) var(--s3); align-self: flex-start; } } @media (max-width: 400px) { .hp-chip { font-size: 1.0625rem; padding: .5rem .875rem; } }