/* ============================================================ WhereTo — site stylesheet Modeled on the Varaus template, recolored to the app's Azure / Amber / Charcoal palette (RCL Morland + Noto Sans). Color/font tokens are CSS variables in . ============================================================ */ /* ── RCL Morland (self-hosted, matches the app) ─────────────── */ @font-face { font-family: 'RCL Morland'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/RCLMorland-Regular.ttf') format('truetype'); } @font-face { font-family: 'RCL Morland'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/RCLMorland-Italic.ttf') format('truetype'); } @font-face { font-family: 'RCL Morland'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/RCLMorland-Medium.ttf') format('truetype'); } @font-face { font-family: 'RCL Morland'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/RCLMorland-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'RCL Morland'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/RCLMorland-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'RCL Morland'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/RCLMorland-Bold.ttf') format('truetype'); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); background: var(--cream); color: var(--ink-soft); line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: color .2s ease; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .wrap-wide { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Type ─────────────────────────────── */ .eyebrow { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.7vw, 20px); letter-spacing: 0.2px; text-transform: none; color: var(--azure); display: block; margin-bottom: 8px; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--navy); letter-spacing: 0; line-height: 1.15; } .italic { font-style: italic; color: var(--azure); } .lede { color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.75; max-width: 56ch; } /* ── Buttons (Varaus .theme-btn, recolored) ────────────────── */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.4px; text-transform: capitalize; padding: 16px 32px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, background .25s ease, color .25s ease, border-color .25s ease; } .btn > * { position: relative; z-index: 2; } /* diagonal sheen wipe on hover, echoing the template's ::before motion */ .btn::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(255,255,255,0.16); transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,100%,0); transition: transform .6s ease; } .btn:hover::before { transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,-100%,0); } .btn-primary { background: var(--azure); color: #fff; border-color: var(--azure); } .btn-primary:hover { background: var(--azure-press); border-color: var(--azure-press); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(32,156,224,0.32); } .btn-ghost { background: #fff; color: var(--azure); border-color: var(--wg200); } .btn-ghost:hover { color: #fff; background: var(--azure); border-color: var(--azure); transform: translateY(-2px); } .btn-light { background: #fff; color: var(--navy); border-color: transparent; } .btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,30,40,0.2); } .btn-amber { background: var(--amber); color: #fff; border-color: var(--amber); } .btn-amber:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(230,152,0,0.3); } /* ── Solar icons ─────────────────────────────── */ .ico { display: inline-block; width: 1em; height: 1em; line-height: 1; vertical-align: -0.125em; fill: currentColor; flex-shrink: 0; } /* ── Header ─────────────────────────────── */ header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--wg200); transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; } .brand-logo-light { display: none; } /* Solid header (Varaus header-style-3): light bar with charcoal labels. Picks up a soft shadow once the page is scrolled. */ header.scrolled { box-shadow: 0 4px 20px rgba(20,30,40,0.08); } .nav { display: flex; align-items: center; justify-content: space-between; height: 84px; } .nav-links { margin-left: clamp(24px, 4vw, 56px); margin-right: auto; } .brand { display: flex; align-items: center; gap: 11px; } .brand .mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); display: grid; place-items: center; flex-shrink: 0; font-family: var(--serif); font-style: italic; color: var(--cream); font-size: 18px; box-shadow: 0 2px 8px rgba(20,30,40,0.25); } .brand .name { font-family: var(--serif); font-size: 20px; color: var(--navy); white-space: nowrap; letter-spacing: -0.2px; } .brand-logo { height: 34px; width: auto; display: block; } footer .brand-logo { height: 32px; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a, .nav-dropdown > button { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.2px; color: var(--navy); transition: color .15s ease; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .nav-links a:hover, .nav-dropdown > button:hover { color: var(--azure); } /* Partner dropdown */ .nav-dropdown { position: relative; } .nav-dropdown > button .caret { font-size: 9px; transition: transform .2s ease; } .nav-dropdown:hover > button .caret, .nav-dropdown:focus-within > button .caret { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; right: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 236px; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; } /* invisible bridge so the menu survives the gap between button and menu */ .nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-dropdown-end .nav-dropdown-menu { left: auto; right: 0; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; } /* Each full item row (background + divider) slides up into place on open — Varaus margin-top collapse; stacked rows give the independent cascade. */ .nav-dropdown-menu a { display: block; padding: 13px 20px; font-size: 14px; color: var(--navy); letter-spacing: 0.2px; text-transform: none; background: var(--card); border-bottom: 1px solid var(--wg200); margin-top: 22px; transition: margin-top .5s ease, background .2s ease, color .2s ease; } .nav-dropdown-menu a:last-child { border-bottom: 0; } .nav-dropdown:hover .nav-dropdown-menu a, .nav-dropdown:focus-within .nav-dropdown-menu a { margin-top: 0; } .nav-dropdown-menu a:hover { background: var(--azure-tint); color: var(--azure); } .nav-cta .btn { padding: 11px 22px; font-size: 11px; } /* Hamburger (mobile only) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; margin: 0 auto; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu panel */ .mobile-menu { display: none; } .mobile-menu a { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--navy); padding: 15px 0; border-bottom: 1px solid var(--wg200); } .mobile-menu a:hover, .mobile-menu a:active { color: var(--rust); } .mobile-menu .mobile-menu-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--wg500); padding: 18px 0 4px; } .mobile-menu .mobile-sub { color: var(--wg600); font-weight: 400; } .mobile-menu .mobile-cta { margin-top: 20px; padding: 15px 30px; border-bottom: 0; color: var(--cream); justify-content: center; } /* ── Hero ─────────────────────────────── */ .hero { padding: clamp(72px, 10vw, 120px) 0 clamp(64px, 8vw, 104px); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -120px; left: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(32,156,224,0.07) 0%, transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 80px); align-items: center; } .hero h1 { font-size: clamp(44px, 6.5vw, 76px); line-height: 1.04; margin: 20px 0 26px; white-space: pre-line; } .hero .lede { font-size: clamp(15px, 1.5vw, 18px); } .hero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .hero-media { position: relative; } .hero-img { width: 100%; height: clamp(380px, 48vw, 560px); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .hero-badge { position: absolute; left: -20px; bottom: 32px; background: rgba(255,255,255,0.96); border: 1px solid var(--wg200); border-radius: var(--radius-md); padding: 16px 22px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 14px; backdrop-filter: blur(8px); } .hero-badge .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--rust); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32,156,224,0.4); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(32,156,224,0.4); } 70% { box-shadow: 0 0 0 8px rgba(32,156,224,0); } 100% { box-shadow: 0 0 0 0 rgba(32,156,224,0); } } .hero-badge .bt { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.2; } .hero-badge .bs { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wg500); margin-top: 2px; } /* ── Hero slider (home) — Varaus hero-style-1, recolored ────── */ .hero-slider { position: relative; height: clamp(560px, 96vh, 900px); margin: 0 clamp(0px, 2.8vw, 40px); /* Varaus inset frame */ overflow: hidden; display: flex; align-items: center; background: var(--navy); } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 7s ease; will-change: opacity, transform; } .hero-slide.active { opacity: 1; transform: scale(1); } /* Charcoal wash so the caption stays readable over any photo */ .hero-slide-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(25,25,25,0.72) 0%, rgba(25,25,25,0.42) 48%, rgba(25,25,25,0.15) 100%), linear-gradient(0deg, rgba(25,25,25,0.5) 0%, transparent 45%); } .hero-caption-wrap { position: relative; z-index: 2; width: 100%; } .slide-caption { max-width: 720px; overflow: hidden; } .slide-caption .eyebrow { color: #7FC7EE; font-size: clamp(18px, 1.8vw, 22px); } .slide-caption h1 { font-size: clamp(46px, 7.2vw, 92px); line-height: 1.05; color: #fff; margin: 14px 0 22px; white-space: pre-line; text-shadow: 0 2px 30px rgba(0,0,0,0.3); } .slide-caption .italic { color: #7FC7EE; } .slide-caption .lede { color: rgba(255,255,255,0.88); font-size: clamp(16px, 1.6vw, 20px); max-width: 54ch; } .slide-caption .btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; } /* Caption slide-in — plays ONCE on load (Varaus fadeInLeft timing: 1.5s both, ease, staggered title 0.5s / subtitle 1s / buttons 1.5s). The background images cycle behind the static caption; the caption does not re-animate. */ .slide-caption > * { animation: fadeInLeft 1.5s both; } .slide-caption > .slide-eyebrow { animation-delay: 0.2s; } .slide-caption > .slide-title { animation-delay: 0.5s; } .slide-caption > .slide-subtitle { animation-delay: 1s; } .slide-caption > .btns { animation-delay: 1.5s; } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .btn-hero-ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-hero-ghost:hover { background: rgba(255,255,255,0.18); border-color: #fff; transform: translateY(-2px); } /* Arrows — slide in from off-screen on hover (Varaus behavior) */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 30px; line-height: 1; color: #fff; background: rgba(32,156,224,0.52); border: 0; transition: background .4s ease, left .5s ease, right .5s ease; } .hero-arrow:hover { background: var(--azure); } .hero-prev { left: -70px; } .hero-next { right: -70px; } .hero-slider:hover .hero-prev { left: 26px; } .hero-slider:hover .hero-next { right: 26px; } /* Dots */ .hero-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(22px, 4vw, 40px); display: flex; justify-content: center; gap: 12px; } .hero-dot { width: 13px; height: 13px; border-radius: 50%; cursor: pointer; padding: 0; background: transparent; border: 2px solid rgba(255,255,255,0.7); transition: background .2s ease, transform .2s ease, width .3s ease, border-radius .3s ease; } .hero-dot:hover { background: rgba(255,255,255,0.5); } .hero-dot.active { background: var(--azure); border-color: #fff; width: 30px; border-radius: 7px; } /* ── Highlights bar (overlaps hero, Varaus search-bar position) ── */ .highlights-wrap { position: relative; z-index: 20; } .highlights { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); margin-top: -68px; overflow: hidden; } .highlight { display: flex; align-items: center; gap: 16px; padding: 28px 26px; position: relative; } .highlight + .highlight::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--wg200); } .highlight-icon { font-size: 40px; flex-shrink: 0; line-height: 1; color: var(--amber); } .highlight-text h4 { font-family: var(--serif); font-size: 20px; color: var(--navy); line-height: 1.2; margin-bottom: 3px; } .highlight-text p { font-size: 13px; color: var(--ink-soft); line-height: 1.45; } /* ── Video banner ─────────────────────────────── */ .video-banner { position: relative; background-size: cover; background-position: center; padding: clamp(90px, 14vw, 170px) 0; text-align: center; overflow: hidden; } .video-banner-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25,25,25,0.72) 0%, rgba(25,25,25,0.5) 100%); } .video-banner-inner { position: relative; z-index: 2; } .video-play { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 26px; display: grid; place-items: center; background: var(--azure); color: #fff; font-size: 40px; box-shadow: 0 0 0 0 rgba(32,156,224,0.5); animation: pulse 2.4s infinite; transition: background .2s ease, transform .2s ease; } .video-play:hover { background: var(--azure-press); transform: scale(1.06); } .video-banner .eyebrow { color: #7FC7EE; } .video-banner h2 { color: #fff; font-size: clamp(30px, 4.5vw, 50px); line-height: 1.12; margin: 6px auto 14px; max-width: 20ch; } .video-banner .italic { color: #7FC7EE; } .video-banner p { color: rgba(255,255,255,0.8); max-width: 46ch; margin: 0 auto; } /* ── Section scaffold ─────────────────────────────── */ section.block { padding: clamp(72px, 9vw, 110px) 0; } section.block.tint { background: var(--tint); } .sec-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 60px); } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .sec-head h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1.12; margin-top: 6px; white-space: pre-line; } .sec-head p { margin-top: 18px; } .sec-head.center p { margin-left: auto; margin-right: auto; } /* ── Feature split ─────────────────────────────── */ .feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .feature-split.flip .feature-text { order: -1; } .feature-img-wrap { position: relative; } .feature-img { width: 100%; height: clamp(400px, 48vw, 580px); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: opacity 0.3s ease; } .feature-img.fading { opacity: 0; } /* Optional overlapping secondary image (two-image content section) */ .feature-img-2 { position: absolute; bottom: -34px; left: -34px; width: clamp(150px, 26%, 230px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); border: 5px solid var(--card); box-shadow: var(--shadow-lg); } .feature-split.flip .feature-img-2 { left: auto; right: -34px; } .feature-stat { position: absolute; border-radius: var(--radius-md); background: rgba(255,255,255,0.96); border: 1px solid var(--wg200); box-shadow: var(--shadow-md); padding: 14px 20px; backdrop-filter: blur(10px); } .feature-stat .sv { font-family: var(--serif); font-size: 28px; color: var(--rust); line-height: 1; } .feature-stat .sl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wg600); margin-top: 3px; } .feature-text h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; margin: 16px 0 20px; white-space: pre-line; } .feature-text .lede { margin-bottom: 20px; } .feature-text .body-copy { color: var(--wg600); font-size: 15px; line-height: 1.75; } /* ── Vibe chips ─────────────────────────────── */ .chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .chip { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.4px; color: var(--navy); background: var(--card); border: 1px solid var(--wg200); border-radius: 999px; padding: 8px 18px; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; cursor: default; } .chip:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .chip.accent { background: rgba(32,156,224,0.08); border-color: rgba(32,156,224,0.25); color: var(--rust); } .chip.accent:hover { background: var(--rust); color: var(--cream); border-color: var(--rust); } .chip.active, .chip.accent.active { background: var(--navy); color: var(--cream); border-color: var(--navy); box-shadow: var(--shadow-sm); } .chip[data-img] { cursor: pointer; } /* ── Feature list (Together) ─────────────────────────────── */ .feature-list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .feature-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--wg600); } .feature-list .fi { font-size: 18px; color: var(--rust); flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(32,156,224,0.1); display: grid; place-items: center; margin-top: 1px; } /* ── Steps ─────────────────────────────── */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step-card { background: var(--card); border: 1px solid var(--wg200); border-radius: var(--radius-md); padding: 28px 24px; } .step-num { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--rust); line-height: 1; margin-bottom: 14px; } .step-card h3 { font-size: 20px; margin-bottom: 8px; } .step-card p { font-size: 14px; color: var(--wg600); line-height: 1.65; } /* ── Tile grid (vibes, benefits, use-cases, partner types) ── */ .tile-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 20px; } .tile { display: block; background: var(--card); border: 1px solid var(--wg200); border-radius: var(--radius-md); padding: 26px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--wg300); } .tile .tile-icon { margin-bottom: 16px; color: var(--amber); font-size: 42px; line-height: 1; } .tile h3 { font-size: 21px; margin-bottom: 8px; } .tile p { font-size: 14px; color: var(--wg600); line-height: 1.65; } .tile-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 16px; } /* Image-forward card with floating caption — Varaus destination card */ .tile.card-photo { position: relative; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; } .card-photo-img { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 3.5; box-shadow: var(--shadow-sm); } .card-photo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } a.card-photo:hover .card-photo-img img { transform: scale(1.06); } .card-photo-badge { position: absolute; top: 14px; left: 14px; z-index: 3; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; font-size: 18px; background: rgba(255,255,255,0.92); box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); } /* the floating white caption card */ .card-photo-body { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 90%; background: #fff; border-radius: 10px; padding: 16px 18px 18px; box-shadow: var(--shadow-md); transition: transform .3s ease, box-shadow .3s ease; } a.card-photo:hover .card-photo-body { transform: translateX(-50%) translateY(-4px); box-shadow: var(--shadow-lg); } .card-photo-body h3 { font-size: 21px; color: var(--navy); margin-bottom: 4px; line-height: 1.2; } .card-photo-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-photo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--azure); } .card-photo-link span { transition: transform .25s ease; } a.card-photo:hover .card-photo-link span { transform: translateX(4px); } /* ── Chat section ─────────────────────────────── */ .chat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; } .chat-text h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; margin: 16px 0 20px; white-space: pre-line; } .chat-bubbles { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .bubble { background: var(--cream); border: 1px solid var(--wg200); border-radius: 18px 18px 18px 4px; padding: 14px 20px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--navy); box-shadow: var(--shadow-sm); animation: floatIn .6s ease both; } .bubble:nth-child(2) { animation-delay: .15s; } .bubble:nth-child(3) { animation-delay: .3s; } @keyframes floatIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } .chat-img-wrap { position: relative; } .chat-img { width: 100%; height: clamp(360px, 44vw, 520px); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ── Testimonials ─────────────────────────────── */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .testimonial-card { background: var(--card); border: 0; border-bottom: 2px solid var(--azure); border-radius: 6px; padding: 32px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px; transition: box-shadow .3s ease, transform .3s ease; } .testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .testimonial-card .stars { color: var(--amber); font-size: 15px; letter-spacing: 3px; } .testimonial-card blockquote { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--navy); flex: 1; } .testimonial-card figcaption { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .tavatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--cream); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); box-shadow: 0 2px 8px rgba(20,30,40,0.25); } .tmeta { display: flex; flex-direction: column; line-height: 1.35; } .tname { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--navy); } .tloc { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--wg500); } /* ── FAQ accordion ─────────────────────────────── */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--wg200); } .faq-item summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--serif); font-size: 19px; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: var(--rust); font-size: 24px; flex-shrink: 0; } .faq-item[open] summary::after { content: '–'; } .faq-item .faq-body { padding: 0 0 22px; color: var(--wg600); font-size: 15px; line-height: 1.75; max-width: 66ch; } /* ── Email capture ─────────────────────────────── */ .email-capture { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; max-width: 460px; } .email-capture.center { margin-left: auto; margin-right: auto; justify-content: center; } .email-capture input[type="email"] { flex: 1 1 240px; min-width: 0; font-family: var(--sans); font-size: 14px; color: var(--navy); background: var(--card); border: 1.5px solid var(--wg300); border-radius: 999px; padding: 14px 22px; } .email-capture input[type="email"]:focus { outline: none; border-color: var(--rust); } .email-note { font-size: 12px; color: var(--wg500); margin-top: 10px; } /* ── Contact form ─────────────────────────────── */ .contact-form { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .contact-form input, .contact-form textarea { font-family: var(--sans); font-size: 15px; color: var(--navy); width: 100%; background: var(--card); border: 1.5px solid var(--wg300); border-radius: var(--radius-sm); padding: 14px 16px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--rust); } .contact-form textarea { resize: vertical; } .contact-form .btn { align-self: flex-start; } /* ── App disclaimer line ─────────────────────────────── */ .app-disclaimer { font-size: 13px; color: var(--wg500); letter-spacing: 0.2px; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; } .app-disclaimer::before { content: '📱'; } /* ── Rich text ─────────────────────────────── */ .rich-text { max-width: 720px; margin: 0 auto; color: var(--wg600); font-size: 16px; line-height: 1.8; } .rich-text h2 { font-size: clamp(28px, 4vw, 42px); margin: 36px 0 14px; } .rich-text h3 { font-size: 22px; margin: 28px 0 10px; } .rich-text p { margin-bottom: 16px; } .rich-text a { color: var(--rust); text-decoration: underline; } .rich-text ul, .rich-text ol { margin: 0 0 16px 22px; } /* ── Download / CTA band ─────────────────────────────── */ .download-band { background: var(--navy); border-radius: var(--radius-lg); padding: clamp(56px, 8vw, 96px) clamp(32px, 6vw, 80px); text-align: center; background-image: radial-gradient(ellipse at 18% 40%, rgba(32,156,224,0.28) 0%, transparent 60%), radial-gradient(ellipse at 82% 60%, rgba(230,152,0,0.16) 0%, transparent 60%); } .download-band .eyebrow { color: #7FC7EE; } .download-band h2 { color: #fff; font-size: clamp(32px, 5vw, 58px); line-height: 1.1; margin: 8px auto 16px; max-width: 18ch; } .download-band .italic { color: #7FC7EE; } .download-band p { color: rgba(255,255,255,0.7); max-width: 40ch; margin: 0 auto 40px; } .download-band .email-capture input[type="email"] { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: var(--cream); } .download-band .email-capture input[type="email"]::placeholder { color: rgba(255,255,255,0.5); } .download-band .app-disclaimer { color: rgba(255,255,255,0.55); } .store-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .store-btn { display: inline-flex; align-items: center; gap: 13px; background: rgba(255,255,255,0.1); color: var(--cream); border: 1.5px solid rgba(255,255,255,0.25); border-radius: 14px; padding: 14px 26px; transition: background .2s, transform .18s, box-shadow .18s; backdrop-filter: blur(8px); } .store-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } .store-btn svg { flex-shrink: 0; } .store-btn-label { display: flex; flex-direction: column; text-align: left; } .store-btn-sub { font-size: 10px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase; opacity: 0.65; } .store-btn-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; } /* ── Footer ─────────────────────────────── */ footer { background: var(--footer); padding: 72px 0 40px; } .foot-top { display: grid; grid-template-columns: 1.3fr 2fr 1.4fr; gap: clamp(32px, 5vw, 64px); align-items: start; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.12); } .foot-tagline { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-top: 16px; max-width: 30ch; } .foot-social { display: flex; gap: 12px; margin-top: 22px; } .foot-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.2); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .foot-social a:hover { background: var(--rust); border-color: var(--rust); color: #fff; transform: translateY(-2px); } .foot-news h4 { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 14px; } .foot-news p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 16px; } .foot-news-form { display: flex; gap: 8px; flex-wrap: wrap; } .foot-news-form input[type="email"] { flex: 1 1 160px; min-width: 0; font-family: var(--sans); font-size: 13px; color: var(--cream); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 12px 18px; } .foot-news-form input[type="email"]::placeholder { color: rgba(255,255,255,0.45); } .foot-news-form input[type="email"]:focus { outline: none; border-color: var(--rust); } .foot-news-form .btn { padding: 12px 22px; font-size: 11px; } .foot-links { display: flex; gap: 48px; flex-wrap: wrap; } .foot-col h4 { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 14px; } .foot-col a, .foot-col span { display: block; font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 9px; } .foot-col a:hover { color: #fff; } .foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); } .foot-bottom span { font-size: 11px; color: rgba(255,255,255,0.38); letter-spacing: 0.5px; } .foot-bottom a { color: rgba(255,255,255,0.38); } .foot-bottom a:hover { color: rgba(255,255,255,0.75); } /* ── Reveal ─────────────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } /* ── Responsive ─────────────────────────────── */ @media (max-width: 960px) { .hero-grid { display: flex; flex-direction: column; gap: 0; } .hero-copy { display: contents; } .hero-copy > .eyebrow { order: 1; align-self: flex-start; } .hero-copy > h1 { order: 2; margin-top: 10px; margin-bottom: 14px; } .hero-media { order: 3; margin: 0 0 16px; } .hero-copy > .lede { order: 4; } .hero-copy > .cta { order: 5; margin-top: 22px; } .hero-img { height: clamp(260px, 58vw, 400px); } .feature-split, .feature-split.flip, .chat-grid { grid-template-columns: 1fr; } .feature-split.flip .feature-text { order: 0; } .feature-img, .chat-img { height: clamp(280px, 60vw, 420px); } .steps-grid { grid-template-columns: repeat(2, 1fr); } .tile-grid { grid-template-columns: repeat(2, 1fr); } .testimonial-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } .foot-top { grid-template-columns: 1fr 1fr; gap: 36px 40px; } .foot-brand { grid-column: 1 / -1; } .highlights { grid-template-columns: repeat(2, 1fr); margin-top: -50px; } .highlight:nth-child(3)::before, .highlight:nth-child(4)::before { display: none; } } @media (max-width: 720px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-toggle { display: flex; } .hero-slider { height: clamp(520px, 82vh, 720px); } .hero-arrow { display: none; } .hero-slider-overlay { background: linear-gradient(0deg, rgba(20,30,40,0.72) 0%, rgba(20,30,40,0.3) 55%, rgba(20,30,40,0.4) 100%); } header.menu-open .mobile-menu { display: flex; flex-direction: column; padding: 4px 24px 26px; background: var(--cream); border-top: 1px solid var(--wg200); } .foot-links { gap: 28px; } .foot-top { grid-template-columns: 1fr; gap: 32px; } .highlights { grid-template-columns: 1fr; margin-top: -40px; } .highlight + .highlight::before { display: none; } .highlight + .highlight { border-top: 1px solid var(--wg200); } } @media (max-width: 480px) { .wrap { padding: 0 18px; } .hero-badge { left: 0; } .feature-stat { display: none; } .steps-grid, .tile-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .bubble { animation: none; } .slide-caption > * { animation: none !important; opacity: 1 !important; transform: none !important; } .hero-slide { transition: opacity .4s ease; } .nav-dropdown-menu a { margin-top: 0; transition: background .2s ease, color .2s ease; } html { scroll-behavior: auto; } }