/* ============================================================ ServSafe Prep — Marketing Site Styles Plain CSS3. Light + Dark themes via [data-theme] on . ============================================================ */ /* ---------- Design Tokens ---------- */ :root { /* Brand */ --red: #C8202B; --red-dark: #9E1620; --red-soft: #FBD9DB; --gold: #E8842E; --gold-soft: #FFD9A8; --teal: #1FA37A; --coral: #D03A36; /* Light theme surfaces */ --bg: #FEF7F5; --bg-alt: #FBEDEA; --surface: #FFFFFF; --surface-2: #FFF8F6; --text: #2B1414; --muted: #7A5A57; --faint: #A78A86; --border: #F1DBD7; --shadow: 0 10px 40px -12px rgba(158, 22, 32, 0.18); --shadow-lg: 0 30px 70px -20px rgba(158, 22, 32, 0.28); --header-bg: rgba(254, 247, 245, 0.72); /* Type */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Layout */ --max: 1180px; --radius: 22px; --radius-sm: 14px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="dark"] { --bg: #1A0E0E; --bg-alt: #241313; --surface: #2A1818; --surface-2: #2E1A1A99; --text: #FBEDEA; --muted: #CDA8A3; --faint: #9A7A76; --border: #3D2322; --red-soft: #4A1A1D; --shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.7); --header-bg: rgba(26, 14, 14, 0.72); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s var(--ease), color 0.4s var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--text); } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(64px, 9vw, 128px) 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease); white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; box-shadow: 0 12px 28px -10px rgba(200, 32, 43, 0.65); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -12px rgba(200, 32, 43, 0.7); } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .btn-gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #4A2A05; box-shadow: 0 12px 28px -10px rgba(232, 132, 46, 0.6); } .btn-gold:hover { transform: translateY(-3px); } /* ---------- Header ---------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); border-bottom: 1px solid transparent; } .header.scrolled { background: var(--header-bg); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; } .brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 4px 12px -3px rgba(158, 22, 32, 0.5); } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { font-size: 15px; font-weight: 500; color: var(--muted); transition: color 0.2s; position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0; background: var(--red); border-radius: 2px; transition: width 0.3s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 14px; } .theme-toggle { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: transform 0.4s var(--ease), background 0.3s; } .theme-toggle:hover { transform: rotate(35deg) scale(1.05); } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle .moon { display: none; } [data-theme="dark"] .theme-toggle .sun { display: none; } [data-theme="dark"] .theme-toggle .moon { display: block; } .hamburger { display: none; width: 42px; height: 42px; border-radius: 12px; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); } .hamburger svg { width: 22px; height: 22px; } /* Mobile drawer */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: var(--surface); z-index: 200; padding: 90px 30px 30px; transform: translateX(100%); transition: transform 0.4s var(--ease); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 8px; } .drawer.open { transform: translateX(0); } .drawer a { padding: 14px 4px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--border); } .drawer .btn { margin-top: 18px; justify-content: center; } .drawer-close { position: absolute; top: 22px; right: 24px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); color: var(--text); } .overlay { position: fixed; inset: 0; background: rgba(40, 12, 12, 0.5); z-index: 150; opacity: 0; visibility: hidden; transition: opacity 0.4s; backdrop-filter: blur(3px); } .overlay.open { opacity: 1; visibility: visible; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 150px 0 90px; overflow: hidden; } .hero-mesh { position: absolute; inset: -20% -10% auto; height: 720px; z-index: -1; background: radial-gradient(50% 50% at 18% 22%, rgba(200, 32, 43, 0.26), transparent 70%), radial-gradient(45% 45% at 82% 8%, rgba(232, 132, 46, 0.20), transparent 70%), radial-gradient(50% 50% at 65% 55%, rgba(31, 163, 122, 0.14), transparent 70%); filter: blur(8px); animation: drift 18s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-30px, 30px, 0) scale(1.08); } } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--red-soft); color: var(--red-dark); margin-bottom: 24px; border: 1px solid color-mix(in srgb, var(--red) 18%, transparent); } [data-theme="dark"] .eyebrow { color: #F4A6AB; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 25%, transparent); } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 22px; } .hero h1 .grad { background: linear-gradient(120deg, var(--red), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero p.lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--muted); max-width: 540px; margin-bottom: 36px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .store-badges { display: flex; gap: 14px; flex-wrap: wrap; } .hero-meta { display: flex; gap: 28px; margin-top: 38px; flex-wrap: wrap; } .hero-meta .stat .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; } .hero-meta .stat .lbl { font-size: 13px; color: var(--muted); } /* App-store style badge */ .store-badge { display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px; border-radius: 14px; background: #2B1414; color: #fff; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); box-shadow: 0 10px 24px -12px rgba(43, 20, 20, 0.6); } [data-theme="dark"] .store-badge { background: #fff; color: #2B1414; border: 1px solid var(--border); } .store-badge:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -14px rgba(43, 20, 20, 0.6); } .store-badge svg { width: 26px; height: 26px; } .store-badge .sb-small { font-size: 10px; opacity: 0.85; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.04em; } .store-badge .sb-big { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.1; } /* Phone mockup */ .phone-wrap { position: relative; display: grid; place-items: center; } .phone { position: relative; width: min(300px, 78%); aspect-ratio: 300 / 612; background: linear-gradient(160deg, var(--red-dark), #5e0c12); border-radius: 42px; padding: 13px; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,0.06); animation: float 6s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(-1.5deg); } } .phone-screen { width: 100%; height: 100%; background: var(--bg); border-radius: 31px; overflow: hidden; display: flex; flex-direction: column; } .phone-notch { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; background: #5e0c12; border-radius: 0 0 16px 16px; z-index: 3; } .ps-head { padding: 26px 18px 14px; } .ps-greet { font-size: 11px; color: var(--muted); } .ps-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); } .ps-streak { margin: 0 18px 14px; background: linear-gradient(120deg, var(--red), var(--red-dark)); border-radius: 16px; padding: 14px; color: #fff; display: flex; align-items: center; justify-content: space-between; } .ps-streak .big { font-family: var(--font-display); font-size: 26px; font-weight: 700; } .ps-streak .lbl { font-size: 10px; opacity: 0.85; } .ps-days { display: flex; gap: 5px; } .ps-days span { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.25); } .ps-days span.on { background: var(--gold-soft); } .ps-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 4px 18px; } .ps-card { border-radius: 14px; padding: 12px; } .ps-card .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 18px; } .ps-card .ic svg { width: 15px; height: 15px; } .ps-card .t { font-size: 11px; font-weight: 700; color: var(--text); } .ps-card .s { font-size: 9px; color: var(--muted); } .ps-floating { position: absolute; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 13px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); } .ps-floating .ring { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--teal) 82%, var(--border) 0); display: grid; place-items: center; } .ps-floating .ring i { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--teal); } .ps-floating .num { font-family: var(--font-display); font-weight: 700; font-size: 15px; } .ps-floating .lbl { font-size: 10px; color: var(--muted); } .fl-1 { top: 16%; right: -4%; animation: float 5s ease-in-out infinite 0.5s; } .fl-2 { bottom: 13%; left: -8%; animation: float 5.5s ease-in-out infinite 1s; } /* ---------- Marquee / social proof ---------- */ .proof { padding: 38px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); } .proof-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .proof-stars { display: flex; align-items: center; gap: 12px; } .stars { display: inline-flex; gap: 2px; color: var(--gold); } .stars svg { width: 18px; height: 18px; fill: currentColor; } .proof-text { font-size: 14px; color: var(--muted); } .proof-text strong { color: var(--text); font-family: var(--font-display); } .proof-logos { display: flex; gap: 30px; align-items: center; opacity: 0.7; flex-wrap: wrap; } .proof-logos span { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--muted); letter-spacing: 0.02em; } /* ---------- Section heading ---------- */ .sec-head { max-width: 660px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; } .sec-head .kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } .sec-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 18px; } .sec-head p { color: var(--muted); font-size: 1.1rem; } /* ---------- Features grid ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s; position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; background: radial-gradient(80% 80% at 50% 0%, color-mix(in srgb, var(--red) 8%, transparent), transparent 70%); } .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--red) 30%, var(--border)); } .feature-card:hover::before { opacity: 1; } .feature-card:hover .fi { transform: rotate(-8deg) scale(1.08); } .fi { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; transition: transform 0.45s var(--ease); } .fi svg { width: 26px; height: 26px; } .fi.red { background: var(--red-soft); color: var(--red); } .fi.gold { background: #FFE3B5; color: #B8740F; } .fi.coral { background: #FFD4D1; color: var(--coral); } .fi.teal { background: #C2EFDF; color: #0B7C63; } .fi.violet { background: #EFD5E6; color: #9B3A78; } .fi.sky { background: #FBD9DB; color: var(--red-dark); } .feature-card h3 { font-size: 1.25rem; margin-bottom: 10px; } .feature-card p { color: var(--muted); font-size: 0.97rem; } /* ---------- Big visual split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; } .split.alt .split-visual { order: -1; } .split-text .kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } .split-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 18px; } .split-text p { color: var(--muted); margin-bottom: 26px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 1rem; } .check-list .ck { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; margin-top: 2px; } .check-list .ck svg { width: 14px; height: 14px; } .split-visual { position: relative; } .visual-card { background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .bar-row .bl { width: 92px; font-size: 13px; color: var(--muted); flex: 0 0 92px; } .bar-track { flex: 1; height: 12px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--red), var(--gold)); width: 0; transition: width 1.2s var(--ease); } .bar-row .bv { font-family: var(--font-display); font-weight: 700; font-size: 14px; width: 42px; text-align: right; } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; } .step { position: relative; padding: 34px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform 0.4s var(--ease), box-shadow 0.4s; } .step:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .step .n { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--red), var(--red-dark)); margin-bottom: 22px; box-shadow: 0 10px 22px -8px rgba(200,32,43,0.6); } .step h3 { font-size: 1.2rem; margin-bottom: 10px; } .step p { color: var(--muted); font-size: 0.96rem; } .steps-line { position: absolute; } /* ---------- Gallery ---------- */ .gallery { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 26px; scroll-snap-type: x mandatory; } .gallery::-webkit-scrollbar { height: 8px; } .gallery::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .shot { flex: 0 0 auto; width: 240px; aspect-ratio: 240 / 500; scroll-snap-align: center; border-radius: 32px; padding: 11px; background: linear-gradient(160deg, var(--red-dark), #5e0c12); box-shadow: var(--shadow); transition: transform 0.4s var(--ease); } .shot:hover { transform: translateY(-8px) scale(1.02); } .shot-inner { width: 100%; height: 100%; background: var(--bg); border-radius: 24px; overflow: hidden; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; } .shot-inner .sh-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; } .shot-inner .sh-sub { font-size: 11px; color: var(--muted); margin-bottom: 6px; } .sh-q { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px; font-size: 11px; line-height: 1.4; } .sh-opt { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: 11px; display: flex; align-items: center; gap: 8px; } .sh-opt .rb { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 13px; } .sh-opt.correct { border-color: var(--teal); background: #C2EFDF55; } .sh-opt.correct .rb { border-color: var(--teal); background: var(--teal); } .sh-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 10px; font-weight: 700; padding: 5px 11px; border-radius: 999px; } /* ---------- Testimonials ---------- */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; transition: transform 0.4s var(--ease), box-shadow 0.4s; display: flex; flex-direction: column; gap: 18px; } .testi:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .testi .quote { font-size: 1.05rem; line-height: 1.6; } .testi .who { display: flex; align-items: center; gap: 13px; margin-top: auto; } .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 18px; } .testi .who .nm { font-weight: 700; font-size: 15px; } .testi .who .rl { font-size: 13px; color: var(--muted); } /* ---------- FAQ ---------- */ .faq { max-width: 760px; margin: 0 auto; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; background: var(--surface); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; } .faq-item.open { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); box-shadow: var(--shadow); } .faq-q { width: 100%; text-align: left; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--text); } .faq-q .chev { flex: 0 0 24px; transition: transform 0.35s var(--ease); color: var(--red); } .faq-item.open .faq-q .chev { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq-a-inner { padding: 0 24px 22px; color: var(--muted); } /* ---------- CTA banner ---------- */ .cta-banner { position: relative; border-radius: 34px; overflow: hidden; padding: clamp(48px, 7vw, 84px); text-align: center; color: #fff; background: linear-gradient(135deg, var(--red), var(--red-dark) 60%, #5e0c12); box-shadow: var(--shadow-lg); } .cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 80% -10%, rgba(232,132,46,0.38), transparent 60%); } .cta-banner > * { position: relative; } .cta-banner h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 18px; } .cta-banner p { color: rgba(255,255,255,0.85); font-size: 1.15rem; max-width: 560px; margin: 0 auto 34px; } .cta-banner .store-badges { justify-content: center; } .cta-banner .store-badge { background: #fff; color: #2B1414; } /* ---------- Footer ---------- */ .footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 72px 0 36px; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; margin-bottom: 50px; } .footer-brand .brand { margin-bottom: 16px; } .footer-brand p { color: var(--muted); font-size: 0.95rem; max-width: 300px; } .footer-social { display: flex; gap: 12px; margin-top: 22px; } .footer-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s, background 0.3s; } .footer-social a:hover { transform: translateY(-3px); color: var(--red); border-color: var(--red); } .footer-social svg { width: 18px; height: 18px; } .footer-col h4 { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 18px; } .footer-col a { display: block; color: var(--muted); font-size: 0.95rem; padding: 7px 0; transition: color 0.2s, padding-left 0.2s; } .footer-col a:hover { color: var(--red); padding-left: 5px; } .footer-bottom { border-top: 1px solid var(--border); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; } .footer-bottom .made { display: inline-flex; align-items: center; gap: 6px; } .footer-bottom .made svg { width: 14px; height: 14px; color: var(--coral); } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } .reveal.d5 { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .phone, .fl-1, .fl-2, .hero-mesh { animation: none; } html { scroll-behavior: auto; } } /* ============================================================ Editorial pages (privacy / terms) ============================================================ */ .doc-hero { padding: 130px 0 30px; } .doc-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 12px; } .doc-hero .updated { color: var(--muted); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; } .doc-hero .updated svg { width: 16px; height: 16px; color: var(--red); } .doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; padding-bottom: 100px; } .toc { position: sticky; top: 96px; } .toc h4 { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 14px; } .toc a { display: block; color: var(--muted); font-size: 0.9rem; padding: 7px 14px; border-left: 2px solid var(--border); transition: color 0.2s, border-color 0.2s, background 0.2s; border-radius: 0 8px 8px 0; } .toc a:hover, .toc a.active { color: var(--red); border-left-color: var(--red); background: color-mix(in srgb, var(--red) 6%, transparent); } .doc-body { max-width: 720px; } .doc-body section { margin-bottom: 44px; scroll-margin-top: 96px; } .doc-body h2 { font-size: 1.55rem; margin-bottom: 16px; display: flex; align-items: baseline; gap: 12px; } .doc-body h2 .sn { font-size: 1rem; color: var(--red); font-family: var(--font-display); } .doc-body h3 { font-size: 1.15rem; margin: 24px 0 10px; } .doc-body p { color: var(--muted); margin-bottom: 16px; } .doc-body ul.bullets { list-style: none; margin: 0 0 16px; } .doc-body ul.bullets li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--muted); } .doc-body ul.bullets li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .doc-body a.inline { color: var(--red); font-weight: 500; } .doc-body a.inline:hover { text-decoration: underline; } .callout { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: var(--radius-sm); padding: 20px 24px; margin: 20px 0; } .callout p { margin: 0; color: var(--text); } /* ============================================================ Support page ============================================================ */ .support-hero { padding: 140px 0 60px; text-align: center; position: relative; overflow: hidden; } .support-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 16px; } .support-hero p { color: var(--muted); font-size: 1.15rem; max-width: 520px; margin: 0 auto 34px; } .search-bar { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 8px 7px 22px; box-shadow: var(--shadow); } .search-bar svg { width: 20px; height: 20px; color: var(--faint); flex: 0 0 20px; } .search-bar input { flex: 1; border: none; background: none; font-size: 16px; color: var(--text); outline: none; font-family: inherit; } .search-bar input::placeholder { color: var(--faint); } .search-bar .btn { padding: 11px 20px; } .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .quick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s; cursor: pointer; } .quick-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--red) 28%, var(--border)); } .quick-card:hover .fi { transform: rotate(-8deg) scale(1.08); } .quick-card h3 { font-size: 1.12rem; margin-bottom: 8px; } .quick-card p { color: var(--muted); font-size: 0.92rem; } .contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; } .contact-intro h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; } .contact-intro p { color: var(--muted); margin-bottom: 28px; } .contact-card-direct { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-top: 8px; } .contact-card-direct .row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .contact-card-direct .row:last-child { margin-bottom: 0; } .contact-card-direct .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; flex: 0 0 46px; } .contact-card-direct .ic svg { width: 20px; height: 20px; } .contact-card-direct .lbl { font-size: 12px; color: var(--muted); } .contact-card-direct .val { font-weight: 600; } .form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); } .field { position: relative; margin-bottom: 26px; } .field input, .field textarea { width: 100%; padding: 18px 16px 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 16px; outline: none; transition: border-color 0.25s, background 0.25s; } .field textarea { min-height: 130px; resize: vertical; } .field label { position: absolute; left: 16px; top: 15px; color: var(--faint); font-size: 16px; pointer-events: none; transition: all 0.2s var(--ease); } .field input:focus, .field textarea:focus { border-color: var(--red); background: var(--surface); } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 6px; font-size: 11px; color: var(--red); font-weight: 600; } .field .err { color: var(--coral); font-size: 12px; margin-top: 6px; display: none; } .field.invalid input, .field.invalid textarea { border-color: var(--coral); } .field.invalid .err { display: block; } .form .btn { width: 100%; justify-content: center; } .form-success { display: none; text-align: center; padding: 20px; } .form-success.show { display: block; } .form-success .ic { width: 64px; height: 64px; border-radius: 50%; background: #C2EFDF; color: var(--teal); display: grid; place-items: center; margin: 0 auto 18px; } .form-success .ic svg { width: 30px; height: 30px; } .form-success h3 { font-size: 1.4rem; margin-bottom: 8px; } .form-success p { color: var(--muted); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 60px; } .phone-wrap { max-width: 420px; margin: 0 auto; } .features-grid, .testi-grid, .steps { grid-template-columns: repeat(2, 1fr); } .quick-grid { grid-template-columns: repeat(2, 1fr); } .split, .split.alt { grid-template-columns: 1fr; } .split.alt .split-visual { order: 0; } .contact-wrap { grid-template-columns: 1fr; } .doc-layout { grid-template-columns: 1fr; } .toc { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .nav-links { display: none; } .nav-actions .btn-desktop { display: none; } .hamburger { display: grid; } .features-grid, .testi-grid, .steps, .quick-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-brand { grid-column: 1 / -1; } .proof-inner { flex-direction: column; align-items: flex-start; } body { font-size: 16px; } }