/* ReadyCore — Premium landing (Cloudflare Pages) Anti-bugs: root-relative assets, overflow-x hidden+clip, WCAG AA focus styles. */ :root{ --container: 1120px; --gutter: 20px; --bg: #f6f7fb; --surface: rgba(255,255,255,0.78); --surface2: rgba(255,255,255,0.6); --text: #0b0f19; --muted: rgba(11,15,25,0.7); --border: rgba(15,20,32,0.14); --a1: #ff5a2f; --a2: #a5b4fc; --a3: #0b0f19; --p1: #f0e9ff; --p2: #e9fff5; --p3: #fff1e8; --g1: radial-gradient(900px 560px at 18% 12%, rgba(255,90,47,0.22), transparent 60%); --g2: radial-gradient(980px 640px at 86% 18%, rgba(165,180,252,0.26), transparent 58%); --g3: radial-gradient(1000px 680px at 82% 88%, rgba(153,246,228,0.18), transparent 55%); --g4: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.35)); --ctaGrad: linear-gradient(135deg, rgba(255,90,47,1) 0%, rgba(165,180,252,1) 100%); --shadow: 0 12px 44px rgba(9,12,20,0.12); --shadow2: 0 10px 24px rgba(9,12,20,0.10); --radius: 18px; --radius2: 24px; --focus: 0 0 0 3px rgba(255,90,47,0.35), 0 0 0 6px rgba(165,180,252,0.25); --headerH: 72px; } @media (prefers-color-scheme: dark){ :root{ --bg: #060815; --surface: rgba(12,15,30,0.72); --surface2: rgba(12,15,30,0.56); --text: #f2f6ff; --muted: rgba(242,246,255,0.72); --border: rgba(255,255,255,0.14); --shadow: 0 20px 64px rgba(0,0,0,0.45); --shadow2: 0 10px 30px rgba(0,0,0,0.35); --g4: linear-gradient(180deg, rgba(12,15,30,0.6), rgba(12,15,30,0.28)); } } /* Manual override (JS sets data-theme on ) */ html[data-theme="light"]{ color-scheme: light; } html[data-theme="dark"]{ color-scheme: dark; } html[data-theme="light"]:root{ --bg: #f6f7fb; --surface: rgba(255,255,255,0.78); --surface2: rgba(255,255,255,0.6); --text: #0b0f19; --muted: rgba(11,15,25,0.7); --border: rgba(15,20,32,0.14); --shadow: 0 12px 44px rgba(9,12,20,0.12); --shadow2: 0 10px 24px rgba(9,12,20,0.10); --g4: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.35)); } html[data-theme="dark"]:root{ --bg: #060815; --surface: rgba(12,15,30,0.72); --surface2: rgba(12,15,30,0.56); --text: #f2f6ff; --muted: rgba(242,246,255,0.72); --border: rgba(255,255,255,0.14); --shadow: 0 20px 64px rgba(0,0,0,0.45); --shadow2: 0 10px 30px rgba(0,0,0,0.35); --g4: linear-gradient(180deg, rgba(12,15,30,0.6), rgba(12,15,30,0.28)); } *{ box-sizing: border-box; } html, body{ margin:0; padding:0; width:100%; overflow-x:hidden; overflow-x:clip; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: none; } img{ max-width:100%; height:auto; display:block; } button{ font: inherit; } code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } :focus-visible{ outline: none; box-shadow: var(--focus); border-radius: 10px; } .container{ width:min(var(--container), 100% - 2*var(--gutter)); margin-inline:auto; } .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .muted{ color: var(--muted); } .lead{ font-size: clamp(1.05rem, 1.2vw + 0.7rem, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 62ch; } .small{ font-size: 0.95rem; line-height: 1.55; } .micro{ font-size: 0.85rem; line-height: 1.5; } .spacer{ height: 18px; } .section{ min-height: 100svh; padding: 30px 0; display: flex; align-items: center; position: relative; } .section::before{ content:""; position:absolute; inset:0; pointer-events:none; background: var(--g1), var(--g2), var(--g3), var(--g4); opacity: 0.6; } .section > .container, .section > .container.hero__grid{ position: relative; z-index: 1; } /* Background noise (lightweight SVG data-uri) */ body::before{ content:""; position: fixed; inset:0; pointer-events:none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Language hint bar on / */ .lang-hint{ position: relative; z-index: 30; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.55); backdrop-filter: blur(8px); } @media (prefers-color-scheme: dark){ .lang-hint{ background: rgba(12,15,30,0.55); } } .lang-hint__inner{ display:flex; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 0.92rem; color: var(--muted); } .lang-hint__links{ display:flex; flex-wrap: wrap; gap: 10px; } .lang-hint__links a{ padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.6); } @media (prefers-color-scheme: dark){ .lang-hint__links a{ background: rgba(12,15,30,0.6); } } /* Header */ .site-header{ position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); } @media (prefers-color-scheme: dark){ .site-header{ background: rgba(10,12,24,0.55); } } .site-header::after{ content:""; position:absolute; left:0; bottom:0; height: 2px; width: var(--progress, 0%); background: var(--ctaGrad); opacity: 0.9; } .header__inner{ display:flex; align-items:center; justify-content: space-between; gap: 14px; padding: 14px 0; } .brand{ display:flex; align-items:center; gap: 10px; min-width: 130px; } .brand__text{ font-weight: 750; letter-spacing: -0.02em; } .brand__mark{ flex: 0 0 auto; } .nav-desktop{ display:flex; gap: 14px; align-items:center; justify-content:center; flex: 1 1 auto; } .nav-desktop a{ font-size: 0.95rem; color: var(--muted); padding: 8px 10px; border-radius: 999px; } .nav-desktop a:hover{ color: var(--text); background: rgba(255,255,255,0.5); } @media (prefers-color-scheme: dark){ .nav-desktop a:hover{ background: rgba(12,15,30,0.55); } } .header__actions{ display:flex; align-items:center; gap: 10px; } /* Language switcher */ .lang{ position: relative; } .lang__summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.6); color: var(--muted); } @media (prefers-color-scheme: dark){ .lang__summary{ background: rgba(12,15,30,0.6); } } .lang[open] .lang__summary{ color: var(--text); box-shadow: var(--shadow2); } .lang__panel{ position:absolute; top: calc(100% + 10px); right:0; min-width: 220px; border: 1px solid var(--border); border-radius: 14px; padding: 8px; background: rgba(255,255,255,0.92); box-shadow: var(--shadow); backdrop-filter: blur(10px); } @media (prefers-color-scheme: dark){ .lang__panel{ background: rgba(10,12,24,0.92); } } .lang__item{ display:block; padding: 10px 10px; border-radius: 12px; color: var(--muted); } .lang__item:hover{ background: rgba(255,90,47,0.12); color: var(--text); } .chev{ opacity: 0.75; } .theme-toggle{ border: 1px solid var(--border); border-radius: 999px; padding: 8px 10px; background: rgba(255,255,255,0.6); cursor:pointer; color: var(--muted); } @media (prefers-color-scheme: dark){ .theme-toggle{ background: rgba(12,15,30,0.6); } } .theme-toggle:hover{ color: var(--text); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.6); color: var(--text); cursor:pointer; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; font-weight: 650; } .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); } .btn--primary{ border-color: transparent; background: var(--ctaGrad); color: white; box-shadow: 0 14px 34px rgba(255,90,47,0.18); } .btn--primary:hover{ box-shadow: 0 18px 44px rgba(255,90,47,0.22); } .btn--ghost{ background: rgba(255,255,255,0.45); } @media (prefers-color-scheme: dark){ .btn--ghost{ background: rgba(12,15,30,0.45); } } .btn--block{ width: 100%; } .header-cta{ display:inline-flex; } .icon-btn{ border: 1px solid var(--border); background: transparent; color: var(--muted); width: 42px; height: 42px; border-radius: 14px; cursor:pointer; } .icon-btn:hover{ color: var(--text); box-shadow: var(--shadow2); } .hamburger{ display:none; border: 1px solid var(--border); background: rgba(255,255,255,0.6); border-radius: 14px; width: 44px; height: 44px; padding:0; cursor:pointer; } @media (prefers-color-scheme: dark){ .hamburger{ background: rgba(12,15,30,0.6); } } .hamburger__bars{ display:block; width: 20px; height: 2px; background: currentColor; margin: 0 auto; border-radius: 999px; position: relative; color: var(--muted); } .hamburger__bars::before, .hamburger__bars::after{ content:""; position:absolute; left:0; width:100%; height:2px; background: currentColor; border-radius: 999px; } .hamburger__bars::before{ top:-6px; } .hamburger__bars::after{ top:6px; } /* Mobile drawer */ .mobile-dialog{ border:none; padding:0; margin:0; width:100%; height:100%; max-width:none; background: transparent; z-index: 999; } .mobile-dialog::backdrop{ background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); } .mobile-drawer{ position: fixed; inset: 0; padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 18px); display:flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,0.92); } @media (prefers-color-scheme: dark){ .mobile-drawer{ background: rgba(10,12,24,0.92); } } .mobile-drawer__top{ display:flex; align-items:center; justify-content: space-between; gap: 12px; } .brand--mini .brand__text{ font-size: 1rem; } .nav-mobile{ display:flex; flex-direction: column; gap: 6px; padding-top: 8px; } .nav-mobile a{ padding: 12px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.6); color: var(--text); } @media (prefers-color-scheme: dark){ .nav-mobile a{ background: rgba(12,15,30,0.6); } } .mobile-drawer__bottom{ margin-top: auto; display:flex; flex-direction: column; gap: 10px; } .mobile-drawer__row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; } body.nav-open{ position: fixed; width: 100%; overflow: hidden; } /* Layout / alignment rules */ @media (max-width: 900px){ .nav-desktop{ display:none; } .header-cta{ display:none; } /* no CTA in header on mobile */ .hamburger{ display:inline-flex; align-items:center; justify-content:center; } .section{ text-align:center; } .lead{ margin-inline:auto; } } /* Cards & grids */ .grid{ display:grid; gap: 14px; } .grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 900px){ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; } } .card{ border: 1px solid var(--border); border-radius: var(--radius2); background: var(--surface); box-shadow: var(--shadow2); padding: 16px; position: relative; overflow: hidden; } .card::before{ content:""; position:absolute; inset:-1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,90,47,0.35), rgba(165,180,252,0.28), rgba(153,246,228,0.22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } .card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); } /* Reveal motion */ .reveal{ opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms ease; } .reveal.is-in{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } .btn{ transition: none; } .card:hover{ transform: none; } } /* Hero */ .hero__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: center; } @media (max-width: 900px){ .hero__grid{ grid-template-columns: 1fr; gap: 18px; } } .eyebrow{ display:inline-flex; align-items:center; gap: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--muted); font-weight: 650; width: fit-content; } .hero h1{ font-size: clamp(2rem, 3vw + 1rem, 3.1rem); line-height: 1.05; letter-spacing: -0.035em; margin: 12px 0 10px; } .hero__bullets{ margin: 14px 0 18px; padding-left: 18px; color: var(--muted); display:grid; gap: 8px; } @media (max-width: 900px){ .hero__bullets{ padding-left: 0; list-style: none; } .hero__bullets li::before{ content:"✓"; display:inline-block; margin-right: 10px; color: var(--a1); font-weight: 800; } } .hero__ctas{ display:flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 900px){ .hero__ctas{ justify-content: center; } } .hero__media{ display:flex; align-items:center; justify-content:center; } .hero__frame{ width: min(460px, 100%); border-radius: 28px; background: rgba(255,255,255,0.55); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 18px; } @media (prefers-color-scheme: dark){ .hero__frame{ background: rgba(12,15,30,0.45); } } .hero__frame img{ width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin-inline: auto; } /* Trust badges */ .trust{ margin-top: 18px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } @media (max-width: 900px){ .trust{ grid-template-columns: repeat(2, minmax(0,1fr)); } } .badge{ display:flex; align-items:center; gap: 10px; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; background: var(--surface2); } .badge img{ width: 40px; height: 40px; object-fit: contain; } .badge span{ font-size: 0.9rem; color: var(--muted); line-height: 1.2; } /* Experience */ .experience h2, .benefits h2, .how h2, .ingredients h2, .pricing h2, .guarantee h2, .bonuses h2, .faq h2{ font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); letter-spacing: -0.02em; margin: 0 0 10px; } .subhead{ margin: 0 0 12px; font-size: 1.1rem; color: var(--text); } .experience__grid{ display:grid; grid-template-columns: 1fr 0.95fr; gap: 18px; align-items: start; margin-top: 18px; } @media (max-width: 900px){ .experience__grid{ grid-template-columns: 1fr; } } .experience__steps{ display:flex; flex-direction: column; gap: 12px; } .step{ padding: 14px 14px; border-radius: var(--radius2); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow2); } .step h3{ margin: 0 0 6px; font-size: 1.05rem; } .step.is-active{ border-color: rgba(255,90,47,0.5); box-shadow: 0 20px 50px rgba(255,90,47,0.12); } .experience__media{ position: relative; } .experience__sticky{ position: sticky; top: calc(env(safe-area-inset-top) + var(--headerH) + 16px); border-radius: 28px; border: 1px solid var(--border); background: var(--surface2); box-shadow: var(--shadow); padding: 16px; } .experience__img{ width: 100%; aspect-ratio: 1 / 1; object-fit: contain; opacity: 0; transition: opacity 260ms ease; position:absolute; inset: 16px; } .experience__sticky{ min-height: 420px; } .experience__img.is-active{ opacity: 1; position:absolute; } .experience__sticky::after{ content:""; position:absolute; inset: 0; border-radius: 28px; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.35)); opacity: 0.4; } @media (prefers-color-scheme: dark){ .experience__sticky::after{ background: linear-gradient(180deg, rgba(12,15,30,0), rgba(12,15,30,0.5)); } } @media (max-width: 900px){ .experience__sticky{ position: relative; top: 0; } .experience__img{ position: relative; inset: 0; opacity: 1; } .experience__img + .experience__img{ display:none; } } /* Testimonials */ .testimonials{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } @media (max-width: 900px){ .testimonials{ grid-template-columns: 1fr; } } .testimonial img{ border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,0.5); } /* Ingredients label grid */ .label-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 12px; } @media (max-width: 900px){ .label-grid{ grid-template-columns: 1fr; } } .label img{ border-radius: 18px; border: 1px solid var(--border); background: #fff; } @media (prefers-color-scheme: dark){ .label img{ background: #0b0f19; } } /* Plans */ .plans .plan{ display:flex; flex-direction: column; align-items: stretch; padding: 16px; border-radius: var(--radius2); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); overflow:hidden; position: relative; } .plan__top{ display:flex; flex-direction: column; gap: 10px; } .plan__badge{ width: fit-content; padding: 6px 12px; border-radius: 999px; background: rgba(255,90,47,0.14); border: 1px solid rgba(255,90,47,0.25); color: var(--text); font-weight: 700; font-size: 0.9rem; } .plan__title{ margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; } .plan__media{ border-radius: 22px; border: 1px solid var(--border); background: rgba(255,255,255,0.5); padding: 12px; } @media (prefers-color-scheme: dark){ .plan__media{ background: rgba(12,15,30,0.45); } } .plan__media img{ width: 100%; aspect-ratio: 1/1; object-fit: contain; margin-inline:auto; } .plan__price{ display:flex; align-items: baseline; gap: 10px; } .plan__priceMain{ font-size: 2.2rem; font-weight: 850; letter-spacing: -0.03em; } .plan__priceSub{ color: var(--muted); font-weight: 650; } .plan__save{ color: rgba(255,90,47,0.95); font-weight: 750; } .plan__cta{ margin-top: auto; display:flex; flex-direction: column; gap: 8px; } /* Guarantee */ .guarantee__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items:center; } @media (max-width: 900px){ .guarantee__grid{ grid-template-columns: 1fr; } } .guarantee__media{ border-radius: 28px; border: 1px solid var(--border); background: rgba(255,255,255,0.5); box-shadow: var(--shadow); padding: 16px; } @media (prefers-color-scheme: dark){ .guarantee__media{ background: rgba(12,15,30,0.45); } } .guarantee__media img{ aspect-ratio: 1/1; object-fit: contain; } /* Bonuses */ .bonus{ display:flex; gap: 14px; align-items: center; } @media (max-width: 900px){ .bonus{ flex-direction: column; text-align:center; } } .bonus__media{ width: 160px; flex: 0 0 auto; border-radius: 22px; border: 1px solid var(--border); background: rgba(255,255,255,0.5); padding: 12px; } @media (prefers-color-scheme: dark){ .bonus__media{ background: rgba(12,15,30,0.45); } } .bonus__media img{ width: 100%; aspect-ratio: 1/1; object-fit: contain; } /* FAQ */ .faq__list{ display:flex; flex-direction: column; gap: 10px; margin-top: 12px; } .faq__item{ border: 1px solid var(--border); border-radius: var(--radius2); background: var(--surface); box-shadow: var(--shadow2); padding: 12px 14px; } .faq__item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content: space-between; gap: 10px; font-weight: 750; } .faq__item summary::-webkit-details-marker{ display:none; } .faq__icon{ font-size: 1.2rem; color: var(--muted); } .faq__item[open] .faq__icon{ transform: rotate(45deg); } .faq__body{ padding-top: 10px; } /* Footer */ .site-footer{ border-top: 1px solid var(--border); padding: 26px 0; background: rgba(255,255,255,0.35); } @media (prefers-color-scheme: dark){ .site-footer{ background: rgba(10,12,24,0.35); } } .footer__grid{ display:grid; grid-template-columns: 1.3fr 0.9fr 0.8fr; gap: 16px; align-items:start; } @media (max-width: 900px){ .footer__grid{ grid-template-columns: 1fr; } } .footer__brand{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; } .footer__nav{ display:flex; flex-direction: column; gap: 8px; } .footer__nav a{ color: var(--muted); padding: 6px 0; } .footer__nav a:hover{ color: var(--text); } .footer__bottom{ display:flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; flex-wrap: wrap; } /* Floating CTA (mobile only) */ .floating-cta{ position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 14px calc(env(safe-area-inset-bottom) + 14px); z-index: 70; display:none; background: rgba(255,255,255,0.62); border-top: 1px solid var(--border); backdrop-filter: blur(10px); } @media (prefers-color-scheme: dark){ .floating-cta{ background: rgba(10,12,24,0.62); } } .floating-cta__inner{ width:min(var(--container), 100% - 2*var(--gutter)); margin-inline:auto; display:flex; flex-direction: column; gap: 8px; } @media (max-width: 900px){ .floating-cta{ display:block; } body{ padding-bottom: 104px; } } /* Legal */ .legal .prose h2{ margin-top: 18px; font-size: 1.15rem; } .legal .prose p, .legal .prose li{ color: var(--muted); line-height: 1.65; } .legal .prose ul{ padding-left: 18px; } /* 360px audit helpers */ @media (max-width: 380px){ .header__inner{ gap: 10px; } .brand__text{ font-size: 0.98rem; } .lang__summary{ padding: 7px 9px; } .theme-toggle{ padding: 7px 9px; } } /* Reduced motion safety */ @media (prefers-reduced-motion: reduce){ .site-header::after{ transition: none; } } /* Picture helpers */ picture{ display:block; } picture > img{ width:100%; height:auto; display:block; } .experience__img > img{ width:100%; height:100%; object-fit:contain; }