/* ========================================================================== Skinread — site.css One shared stylesheet for the whole marketing site. Fonts are loaded via in each page (Hanken Grotesk + Geist Mono, Google Fonts). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { --ink: #16271E; --ink-2: #2E3F37; --muted: #8A938C; --muted-2: #AAB1AB; --line: rgba(20, 38, 30, 0.08); --line-2: rgba(20, 38, 30, 0.12); --field: #F1F3F1; --field-2: #E9ECE8; --coral: #F4795F; --coral-deep: #CE5238; --coral-soft: rgba(244, 121, 95, 0.12); --sage: #7BA88A; --sage-soft: rgba(123, 168, 138, 0.14); --amber: #E8973C; --shadow: 0 6px 18px rgba(20, 38, 30, .05); --shadow-md: 0 1px 2px rgba(16, 18, 22, .04), 0 10px 30px rgba(16, 18, 22, .07); --radius: 20px; /* Derived: accessible coral for text on light backgrounds (AA ≥ 4.5:1). */ --coral-text: #C0492F; /* Type families */ --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale */ --t-eyebrow: 0.78rem; --t-sm: 0.9rem; --t-base: 1rem; --t-lg: 1.12rem; --t-xl: 1.35rem; --t-2xl: clamp(1.6rem, 3.4vw, 2.25rem); --t-3xl: clamp(2.1rem, 5vw, 3.3rem); /* Spacing */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem; --container: 1120px; --pad: clamp(1.15rem, 4vw, 2.25rem); --nav-h: 64px; } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); } body { min-height: 100vh; background: #fff; color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, picture, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 3px; border-radius: 6px; } /* -------------------------------------------------------------------------- 3. Utilities / shared components -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .eyebrow { font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-text); } .section { padding-block: var(--sp-8); } .section--tint { background: var(--field); } .section-head { max-width: 60ch; margin-bottom: var(--sp-6); } .section-head .eyebrow { margin-bottom: var(--sp-3); } .section-head h2 { font-size: var(--t-2xl); } .section-head p { margin-top: var(--sp-4); color: var(--ink-2); font-size: var(--t-lg); line-height: 1.6; max-width: 56ch; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 0.7rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: var(--t-sm); line-height: 1; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: var(--ink-2); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { background: var(--field); } .btn-ghost--invert { color: #fff; border-color: rgba(255, 255, 255, 0.28); } .btn-ghost--invert:hover { background: rgba(255, 255, 255, 0.1); } /* App Store badge link */ .appstore { display: inline-block; line-height: 0; border-radius: 13px; transition: transform .18s ease; } .appstore:hover { transform: translateY(-1px); } .appstore img { width: 160px; height: auto; } /* Generic pill */ .pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.32em 0.8em; border-radius: 999px; font-size: var(--t-sm); font-weight: 500; background: var(--field); color: var(--ink-2); white-space: nowrap; } .pill--sage { background: var(--sage-soft); color: #2f5e42; } .pill--coral { background: var(--coral-soft); color: var(--coral-text); } /* Soft icon tile */ .icon-tile { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--coral-soft); font-size: 1.3rem; flex: none; } .icon-tile--sage { background: var(--sage-soft); } .icon-tile--amber { background: rgba(232, 151, 60, 0.14); } /* -------------------------------------------------------------------------- 4. Sticky nav -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(20, 38, 30, 0.02); } .nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: var(--sp-4); } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.16rem; letter-spacing: -0.02em; } .brand__orb { width: 18px; height: 18px; border-radius: 999px; flex: none; background: radial-gradient(circle at 35% 30%, #F8A993, var(--coral) 55%, var(--coral-deep)); box-shadow: 0 0 0 4px var(--coral-soft); } .nav__links { display: flex; align-items: center; gap: var(--sp-6); } /* Two-selector specificity so links never fall back to UA blue. */ .nav__links a:link, .nav__links a:visited { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; transition: color .18s ease; } .nav__links a:hover { color: var(--coral-text); } .nav__cta { display: flex; align-items: center; gap: var(--sp-3); } .nav__toggle { display: none; } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-top: var(--sp-7); padding-bottom: var(--sp-6); background: radial-gradient(120% 90% at 50% -10%, var(--coral-soft) 0%, transparent 55%), linear-gradient(#fff, #fff); } .hero__head { text-align: center; max-width: 880px; margin-inline: auto; } .hero__title { font-size: var(--t-3xl); letter-spacing: -0.03em; margin-top: var(--sp-3); } .hero__title .coral { color: var(--coral-text); } .hero__orb { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 999px; vertical-align: baseline; margin-left: 0.12em; background: radial-gradient(circle at 35% 30%, #FBC0AE, var(--coral) 55%, var(--coral-deep)); box-shadow: 0 4px 14px rgba(244, 121, 95, 0.45); } .hero__sub { margin: var(--sp-4) auto 0; max-width: 50ch; color: var(--ink-2); font-size: var(--t-lg); } .hero__sub .skin { background: var(--sage-soft); color: #2f5e42; padding: 0.08em 0.5em; border-radius: 999px; font-weight: 500; white-space: nowrap; } /* --- Marquee --- */ .marquee { position: relative; margin-top: var(--sp-5); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .marquee__track { display: flex; width: max-content; align-items: center; animation: marquee 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; gap: 0.4em; margin-right: 14px; /* margin, not flex-gap, so the loop is seamless */ padding: 0.5em 1em; border-radius: 999px; font-size: 0.95rem; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--field); color: var(--ink-2); border: 1px solid var(--line); } .marquee__item--plain { background: transparent; border-color: transparent; color: var(--muted); } .marquee__item--sage { background: var(--sage-soft); color: #2f5e42; border-color: transparent; box-shadow: 0 6px 16px rgba(123, 168, 138, 0.22); } .marquee__item--coral { background: var(--coral-soft); color: var(--coral-text); border-color: transparent; box-shadow: 0 6px 16px rgba(244, 121, 95, 0.2); } .marquee__item--amber { background: rgba(232, 151, 60, 0.14); color: #9a5d12; border-color: transparent; box-shadow: 0 6px 16px rgba(232, 151, 60, 0.2); } .marquee__item .ico { font-size: 1.05em; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Stage (1080×600, JS-scaled) --- */ .stage-wrap { position: relative; width: 100%; margin-top: var(--sp-5); } .stage { position: absolute; top: 0; left: 50%; width: 1080px; height: 600px; transform-origin: top center; transform: translateX(-50%) scale(var(--stage-scale, 1)); } /* Connector layer */ .stage__lines { position: absolute; inset: 0; width: 1080px; height: 600px; pointer-events: none; z-index: 2; } /* Phone */ .phone-frame { position: absolute; top: 11px; left: 400px; width: 280px; height: 578px; z-index: 3; filter: drop-shadow(0 30px 50px rgba(20, 38, 30, 0.22)); } .phone-screen { position: absolute; left: 4.57%; top: 2.21%; width: 90.86%; height: 95.58%; border-radius: 34px; overflow: hidden; background: #0d1512; z-index: 1; } .phone-screen > img { width: 100%; height: 100%; object-fit: cover; } .phone-glass-top { position: absolute; inset: 0 0 auto 0; height: 36%; padding: 30px 18px 0; background: linear-gradient(180deg, rgba(13, 21, 18, 0.78) 0%, rgba(13, 21, 18, 0.45) 55%, rgba(13, 21, 18, 0) 100%); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 2; } .phone-glass-top .label { display: block; margin-top: 16px; color: #fff; font-weight: 600; font-size: 1rem; text-align: center; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } .phone-frame__overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; /* bezel + island + reflections sit over the photo */ pointer-events: none; } /* Floating finding cards */ .find-card { position: absolute; z-index: 3; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); padding: 0.7rem 0.85rem; min-width: 132px; } .find-card__k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .find-card__v { font-weight: 700; font-size: 1.05rem; margin-top: 2px; } .find-card__v .unit { color: var(--muted); font-weight: 500; font-size: 0.8rem; } .find-card__note { font-size: 0.78rem; color: var(--ink-2); margin-top: 2px; } .find-card__note .up { color: #2f7a4f; font-weight: 600; } .find-card--age { top: 64px; left: 36px; } .find-card--redness { top: 256px; left: 14px; } .find-card--hydration{ top: 446px; left: 54px; } .find-card--type { top: 78px; right: 36px; } .find-card--pores { top: 262px; right: 14px; } .find-card--texture { top: 450px; right: 50px; } .find-card--expert { top: 20px; left: 712px; min-width: 0; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); } .find-card--expert .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sage); flex: none; } .find-card--expert span { font-size: 0.82rem; font-weight: 600; } .find-card--expert em { font-style: normal; color: var(--muted); font-weight: 500; } /* Inner mini-nav pill bar */ .stage__mininav { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 3; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .stage__mininav a:link, .stage__mininav a:visited { padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; color: var(--ink-2); } .stage__mininav a:hover { background: var(--field); } .stage__mininav a.is-active { background: var(--ink); color: #fff; } /* -------------------------------------------------------------------------- 6. Track over time -------------------------------------------------------------------------- */ .track__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); align-items: center; } .track__copy h2 { font-size: var(--t-2xl); } .track__lead { margin-top: var(--sp-4); color: var(--ink-2); font-size: var(--t-lg); line-height: 1.6; max-width: 48ch; } .track__copy ul { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); } .track__copy li { display: flex; gap: 0.6rem; color: var(--ink-2); } .track__copy li::before { content: ""; width: 8px; height: 8px; margin-top: 0.5rem; border-radius: 999px; background: var(--coral); flex: none; } .chart-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: var(--sp-5); } .chart-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .chart-card__head .k { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .chart-card svg { width: 100%; height: auto; } .delta-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--sage-soft); color: #2f5e42; font-weight: 700; font-size: 0.85rem; } /* -------------------------------------------------------------------------- 7. What Skinread detects -------------------------------------------------------------------------- */ .detect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .detect-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); transition: transform .2s ease, box-shadow .2s ease; } .detect-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .detect-card h3 { font-size: var(--t-lg); } .detect-card p { color: var(--ink-2); font-size: var(--t-sm); } .detect-card__metric { margin-top: auto; font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-text); padding-top: var(--sp-3); border-top: 1px solid var(--line); } /* -------------------------------------------------------------------------- 8. How it works -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); counter-reset: step; } .step { display: flex; flex-direction: column; gap: var(--sp-4); } .step__panel { position: relative; height: 180px; border-radius: var(--radius); background: var(--field); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; } .step__num { counter-increment: step; position: absolute; top: 12px; left: 14px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted); } .step__num::before { content: "0" counter(step); } .step h3 { font-size: var(--t-lg); } .step p { color: var(--ink-2); font-size: var(--t-sm); } .step__viz { font-size: 2.6rem; } /* -------------------------------------------------------------------------- 9. Testimonials -------------------------------------------------------------------------- */ .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); } .quote-card blockquote { font-size: var(--t-lg); line-height: 1.5; color: var(--ink); } .quote-card__who { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; } .quote-card__avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--field-2); display: grid; place-items: center; font-weight: 700; color: var(--ink-2); flex: none; } .quote-card__name { font-weight: 600; font-size: var(--t-sm); } .quote-card__meta { color: var(--muted); font-size: 0.8rem; } .placeholder-tag { align-self: flex-start; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-text); background: var(--coral-soft); padding: 0.25rem 0.55rem; border-radius: 999px; } /* -------------------------------------------------------------------------- 10. FAQ -------------------------------------------------------------------------- */ .faq { max-width: 760px; } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; font-weight: 600; font-size: var(--t-lg); min-height: 44px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; color: var(--coral-text); transition: transform .2s ease; flex: none; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { color: var(--ink-2); padding-bottom: var(--sp-5); max-width: 64ch; } /* -------------------------------------------------------------------------- 11. Final CTA band -------------------------------------------------------------------------- */ .cta-band { padding-block: var(--sp-8); } .cta-band__panel { background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); background-image: radial-gradient(90% 120% at 50% -10%, rgba(244, 121, 95, 0.22), transparent 60%); } .cta-band__panel h2 { color: #fff; font-size: var(--t-2xl); max-width: 20ch; } .cta-band__panel p { color: var(--muted-2); max-width: 46ch; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .footer { background: var(--field); border-top: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-5); } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); } .footer__blurb { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--t-sm); max-width: 34ch; } .footer__col h3 { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); font-weight: 500; } .footer__col ul { display: grid; gap: var(--sp-3); } .footer__col a:link, .footer__col a:visited { color: var(--ink-2); font-size: var(--t-sm); } .footer__col a:hover { color: var(--coral-text); } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); padding-bottom: var(--sp-4); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); } .footer__legal a:link, .footer__legal a:visited { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; } .footer__legal a:hover { color: var(--coral-text); } .footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; padding-top: var(--sp-5); } .footer__bottom p { color: var(--muted); font-size: 0.8rem; } .footer__disclaimer { max-width: 70ch; } /* -------------------------------------------------------------------------- 13. Legal / document template -------------------------------------------------------------------------- */ .doc { max-width: 760px; margin-inline: auto; padding-block: var(--sp-7); } .doc__banner { display: flex; gap: 0.6rem; align-items: flex-start; background: rgba(232, 151, 60, 0.12); border: 1px solid rgba(232, 151, 60, 0.35); color: #7a4a12; border-radius: 14px; padding: var(--sp-4); font-size: var(--t-sm); margin-bottom: var(--sp-6); } .doc__date { font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); margin-top: var(--sp-3); } .doc h1 { font-size: clamp(2rem, 5vw, 2.7rem); margin-top: var(--sp-3); } .doc__body { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); } .doc__body h2 { font-size: var(--t-xl); margin-top: var(--sp-4); } .doc__body h3 { font-size: var(--t-lg); } .doc__body p, .doc__body li { color: var(--ink-2); line-height: 1.65; } .doc__body ul { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: 1.2rem; list-style: disc; } .doc__body a:link, .doc__body a:visited { color: var(--coral-text); text-decoration: underline; text-underline-offset: 2px; } .doc__body dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: var(--sp-3) var(--sp-5); } .doc__body dt { font-weight: 600; color: var(--ink); } .doc__body dd { color: var(--ink-2); } .ph { border: 1px dashed var(--line-2); background: var(--field); border-radius: 6px; padding: 0.05em 0.45em; font-family: var(--mono); font-size: 0.85em; color: var(--muted); } /* -------------------------------------------------------------------------- 14. Responsive — primary breakpoint 760px -------------------------------------------------------------------------- */ @media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .detect-grid { grid-template-columns: repeat(2, 1fr); } .quote-grid { grid-template-columns: 1fr; } .track__grid { grid-template-columns: 1fr; gap: var(--sp-6); } } @media (max-width: 760px) { :root { --nav-h: 58px; } /* Nav collapses to logo + App Store; section links hide */ .nav__links { display: none; } /* Hero: drop the scaled stage entirely, show a centered phone */ .stage-wrap { margin-top: var(--sp-6); } .stage { position: static; width: auto; height: auto; transform: none; display: flex; justify-content: center; } .stage__lines, .find-card, .stage__mininav, .find-card--expert { display: none; } .phone-frame { position: relative; top: auto; left: auto; margin-inline: auto; } .detect-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: var(--sp-6); } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } .doc__body dl { grid-template-columns: 1fr; gap: var(--sp-1) 0; } .doc__body dt { margin-top: var(--sp-3); } } /* -------------------------------------------------------------------------- 15. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee__track { animation: none; transform: none; } .float-pill { animation: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================== 16. Premium upgrades (framed canvas, scroll-fill statement, line icons, stats strip, bigger type, refined cards). Loaded last so it extends the base styles above. ========================================================================== */ :root { --frame-gap: 10px; --frame-bg: #E7EAE6; /* larger, more confident scale */ --t-2xl: clamp(1.95rem, 4vw, 2.85rem); --t-xl: 1.45rem; } /* ---- Framed canvas (desktop/tablet only) ---- */ @media (min-width: 761px) { html { background: var(--frame-bg); } body { margin: var(--frame-gap); min-height: calc(100vh - (var(--frame-gap) * 2)); background: #fff; border: 1px solid var(--line-2); border-radius: 28px; } .nav { top: var(--frame-gap); border-radius: 27px 27px 0 0; } .footer { border-radius: 0 0 27px 27px; } } /* ---- More air + bigger headings ---- */ .section { padding-block: clamp(4rem, 8vw, 7rem); } .section-head { margin-bottom: var(--sp-7); } .section-head h2, .track__copy h2 { letter-spacing: -0.03em; } /* ---- Thin-line icons (replace emoji) ---- */ .icon-tile { width: 52px; height: 52px; border-radius: 15px; color: var(--coral-deep); } .icon-tile--sage { color: #2f5e42; } .icon-tile--amber { color: #9a5d12; } .icon-tile svg { width: 26px; height: 26px; display: block; } .icon-tile svg [stroke] { stroke: currentColor; } /* ---- Stats strip ---- */ .stats { padding-block: clamp(2.5rem, 5vw, 4rem); } .stats__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .stat { display: flex; align-items: center; gap: var(--sp-4); } .stat__ico { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--field); color: var(--ink-2); } .stat__ico svg { width: 28px; height: 28px; } .stat__ico svg [stroke] { stroke: currentColor; } .stat strong { display: block; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .stat span { color: var(--muted); font-size: var(--t-sm); } /* ---- Scroll-fill statement ---- */ .statement { position: relative; padding-block: clamp(5.5rem, 12vw, 10rem); overflow: hidden; } .statement__text { max-width: 1040px; margin-inline: auto; text-align: center; font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.16; letter-spacing: -0.025em; text-wrap: balance; } .statement__text .fw { color: var(--muted-2); transition: color 0.35s var(--ease); } .statement__text .fw.on { color: var(--ink); } .statement__text .fw--accent.on { color: var(--coral-text); } .float-pill { position: absolute; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); font-weight: 600; font-size: 0.95rem; white-space: nowrap; animation: floaty 6s ease-in-out infinite alternate; } .float-pill .ico { font-size: 1.1em; line-height: 1; } .float-pill--a { top: 14%; left: 16%; animation-delay: -0.5s; } .float-pill--b { top: 11%; right: 13%; animation-delay: -2.4s; } .float-pill--c { top: 46%; left: 8%; animation-delay: -1.4s; } .float-pill--d { bottom: 16%; left: 38%; animation-delay: -3.1s; } .float-pill--e { bottom: 12%; right: 16%; animation-delay: -1.9s; } @keyframes floaty { from { transform: translateY(6px); } to { transform: translateY(-8px); } } /* ---- Refined cards / quotes ---- */ .detect-card { border-radius: 22px; padding: var(--sp-6); } .detect-card h3 { font-size: var(--t-xl); } .quote-grid { gap: var(--sp-5); } .quote-card { border-radius: 22px; padding: var(--sp-6); } .quote-card blockquote { position: relative; font-size: var(--t-xl); line-height: 1.45; letter-spacing: -0.01em; } .quote-card blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: 0.8; color: var(--coral); margin-bottom: var(--sp-2); } .placeholder-tag { background: transparent; color: var(--muted); padding: 0; font-size: 0.66rem; } .quote-card__avatar { background: linear-gradient(135deg, var(--sage-soft), var(--coral-soft)); color: var(--ink-2); } .step__panel { height: 200px; border-radius: 22px; } .step h3 { font-size: var(--t-xl); } .step__viz { color: var(--ink-2); } .step__viz svg { width: 56px; height: 56px; } .step__viz svg [stroke] { stroke: currentColor; } /* ---- Mobile: drop the frame + simplify the statement ---- */ @media (max-width: 760px) { .float-pill { display: none; } .statement__text { font-size: clamp(1.7rem, 7vw, 2.2rem); } .stats__row { grid-template-columns: 1fr; gap: var(--sp-5); } }