/* Fonts are loaded via in each page's (not an
@import here) so the request isn't serialized behind this file — faster FCP/LCP.
Keep the families/weights in sync with that link:
Inter 300;400;500;600;700 + Outfit 400;500;600;700;800, display=swap. */
/* ==========================================================================
Base CSS & Custom Properties
========================================================================== */
/* ==========================================================================
DESIGN TOKENS — single source of truth for the UI.
Every color, surface, line, radius, shadow, space, font and motion value
used across the site is defined here. Components reference these tokens;
they should not hardcode raw values. (Device-mockup illustrations keep a few
local shades since they depict an app UI, not the site's design system.)
========================================================================== */
:root {
/* ---- Surfaces ---- */
--bg-color: #121319; /* page background (base) */
--bg-color-alt: #1b1c24; /* cards / raised panels */
--bg-deep: #040508; /* footer / deepest band */
--bg-header-rgb: 8, 9, 13; /* sticky header surface (used with alpha) */
/* ---- Hairlines & overlays (white at low alpha) ---- */
--line-strong: rgba(255,255,255,.1);
--line: rgba(255,255,255,.08);
--line-subtle: rgba(255,255,255,.05);
--line-faint: rgba(255,255,255,.04);
--line-faintest: rgba(255,255,255,.03);
--surface-tint: rgba(255,255,255,.01);
--border-color: #2c2e3a; /* solid 1px border (inputs, frames) */
/* ---- Text ---- */
--text-primary: #f3f4f6;
--text-secondary: #a6aab8;
--text-muted: #888d9c; /* AA-compliant (>=4.5:1 on --bg-color) */
/* ---- Brand (one blue hue, three jobs) ---- */
--primary: #225EC0; /* fills: buttons, badges, active states */
--primary-strong: #3977DC; /* hover / gradient partner */
--accent: #6AA0FF; /* text on dark: links, eyebrows, icons (>=7:1) */
--accent-hover: #9CC0FF;
--primary-rgb: 34, 94, 192; /* for rgba() glows */
--primary-glow: rgba(var(--primary-rgb), 0.2);
--secondary: var(--primary-strong); /* back-compat alias */
--secondary-glow: rgba(57, 119, 220, 0.2);
/* ---- Semantic ---- */
--success: #2ecc63; /* "running locally" / completion */
--success-rgb: 46, 204, 99;
/* ---- Radii ---- */
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 8px;
--radius-pill: 999px;
/* ---- Elevation ---- */
--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25);
--shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.5);
/* Device mockups: layered ramp (progressive blur, decreasing alpha) so the
shadow reads soft yet grounded on the #121319 showcase — never a hard blob. */
--shadow-device:
0 2px 6px rgba(0, 0, 0, 0.30),
0 10px 24px rgba(0, 0, 0, 0.34),
0 24px 50px rgba(0, 0, 0, 0.42),
0 44px 88px rgba(0, 0, 0, 0.30);
--shadow-device-hover:
0 4px 10px rgba(0, 0, 0, 0.32),
0 16px 36px rgba(0, 0, 0, 0.40),
0 36px 72px rgba(0, 0, 0, 0.48),
0 64px 120px rgba(0, 0, 0, 0.34);
/* ---- Layout ---- */
--container-max: 1200px;
--gutter: 2rem;
/* ---- Vertical rhythm (one knob per gap) ---- */
--space-section: 2.5rem; /* section padding & gap between sections */
--space-header: 2rem; /* section title block → its content */
--space-hero-top: 1rem; /* hero title below the header */
/* ---- Typography ---- */
--font-header: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;
/* ---- Motion ---- */
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
/* Clip horizontal overflow at the viewport so the off-canvas mobile nav
drawer (position:fixed, translated off-screen) can't cause sideways
scrolling. `clip` (not `hidden`) doesn't create a scroll container, so
the sticky header and vertical scrolling keep working. */
overflow-x: clip;
}
body {
background-color: var(--bg-color);
color: var(--text-primary);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
}
/* Scrollbar Style */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
background: var(--bg-color-alt);
border: 2px solid var(--bg-color);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* ==========================================================================
Typography Standards
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-header);
color: var(--text-primary);
font-weight: 700;
line-height: 1.25;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
letter-spacing: -1.5px;
}
h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
letter-spacing: -1px;
}
h3 {
font-size: 1.5rem;
}
p {
color: var(--text-secondary);
font-size: 1.1rem;
}
a {
color: var(--accent);
text-decoration: none;
transition: var(--transition-smooth);
}
a:hover {
color: var(--accent-hover);
}
/* ==========================================================================
Accessibility: skip link + visible keyboard focus
========================================================================== */
.skip-link {
position: absolute;
left: 1rem;
top: -100px;
z-index: 2000;
background: var(--primary);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
font-family: var(--font-header);
font-weight: 600;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 1rem;
color: #fff;
outline: 3px solid var(--accent-hover);
outline-offset: 2px;
}
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Don't show the ring for mouse clicks, only keyboard */
:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
Header & Navbar Style
========================================================================== */
header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
background: rgba(var(--bg-header-rgb), 0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line-subtle);
transition: var(--transition-smooth);
}
header.scrolled {
background: rgba(var(--bg-header-rgb), 0.9);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-max);
margin: 0 auto;
padding: 1.25rem var(--gutter);
}
.logo-link {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-header);
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.5px;
}
.logo-bolt {
color: var(--primary);
font-size: 1.75rem;
animation: lightningGlow 3s infinite ease-in-out;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
nav a {
font-weight: 500;
font-size: 0.95rem;
color: var(--text-secondary);
}
nav a:hover, nav a.active {
color: var(--text-primary);
}
.btn-nav-download {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white !important;
padding: 0.6rem 1.25rem;
border-radius: var(--radius-lg);
font-weight: 600;
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}
.btn-nav-download:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.5);
}
/* Hamburger mobile menu button */
.menu-toggle {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
}
.menu-toggle span {
display: block;
width: 25px;
height: 2px;
background: var(--text-primary);
transition: var(--transition-smooth);
}
/* ==========================================================================
Grids & Layout Utilities
========================================================================== */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
section {
padding: var(--space-section) 0;
}
.promo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
justify-items: center; /* center items within grid cells */
justify-content: center; /* center grid content */
max-width: var(--container-max);
margin: 0 auto; /* center grid container */
padding-top: 0;
text-align: center; /* center text inside cells */
}
/* Center hero content inside left column */
.promo-grid .hero-content {
margin: 0 auto; /* center container */
text-align: center;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
align-items: center;
justify-items: center; /* center items horizontally within grid cells */
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Glassmorphism Card style -> Now Premium Flat Card */
.glass-card {
background: var(--bg-color-alt);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2.5rem;
transition: var(--transition-smooth);
box-shadow: var(--shadow-card);
}
.glass-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.12);
}
/* ==========================================================================
Hero Section & Demo Converter Widget
========================================================================== */
.hero {
min-height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* bottom padding gives the store badges breathing room before the next
section's background band starts */
padding: var(--space-hero-top) 0 var(--space-section);
}
.hero-centered {
height: 100%;
justify-content: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.hero-centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-subtitle {
font-family: var(--font-header);
color: var(--accent);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
margin-bottom: 1rem;
text-align: center;
}
.hero-title span {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-desc {
font-size: 1.2rem;
margin: 1.5rem auto 2.5rem auto;
max-width: 550px;
width: 100%;
text-align: center;
}
.hero-ctas {
display: flex;
justify-content: center;
gap: 1.5rem;
align-items: center;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: white;
padding: 1rem 2rem;
border-radius: var(--radius-lg);
font-family: var(--font-header);
font-weight: 700;
font-size: 1.05rem;
box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.35);
border: none;
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 45px rgba(var(--primary-rgb), 0.55);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--line-subtle);
border: 1px solid var(--line-strong);
color: var(--text-primary);
padding: 1rem 2rem;
border-radius: var(--radius-lg);
font-family: var(--font-header);
font-weight: 600;
font-size: 1.05rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.btn-secondary:hover {
background: var(--line-strong);
border-color: rgba(255, 255, 255, 0.2);
}
/* Interactive Converter widget */
.converter-widget {
background: rgba(13, 15, 23, 0.8);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.widget-header {
background: var(--surface-tint);
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-dots {
display: flex;
gap: 6px;
}
.widget-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
}
.widget-dots span:nth-child(1) { background-color: #ff5f56; }
.widget-dots span:nth-child(2) { background-color: #ffbd2e; }
.widget-dots span:nth-child(3) { background-color: var(--success); }
.widget-title {
font-family: var(--font-header);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
}
.widget-body {
padding: 2rem;
}
.dropzone {
border: 2px dashed var(--border-color);
background: var(--surface-tint);
border-radius: var(--radius-md);
padding: 3rem 2rem;
text-align: center;
cursor: pointer;
transition: var(--transition-smooth);
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.dragover {
border-color: var(--primary);
background: rgba(var(--primary-rgb), 0.04);
}
.dropzone-icon {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 0.75rem;
}
.dropzone-text {
font-weight: 600;
color: var(--text-primary);
}
.dropzone-subtext {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.file-size {
font-size: 0.8rem;
color: var(--text-secondary);
margin-top: 0.2rem;
}
/* File Selected & Conversion State */
.conversion-panel {
display: none;
}
.file-info-bar {
display: flex;
flex-direction: column;
background: var(--bg-color);
padding: 1.25rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
margin-bottom: 1.5rem;
gap: 1rem;
}
.file-info-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--text-secondary);
}
.file-info-badges {
display: flex;
gap: 0.35rem;
}
.file-badge {
background: #222530;
color: #9ca3af;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
}
.file-row-main {
display: flex;
align-items: center;
gap: 1rem;
}
.file-thumb-container {
position: relative;
width: 56px;
height: 56px;
background: #2b2d3a;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
color: #a6aab8;
font-size: 1.25rem;
flex-shrink: 0;
}
.file-thumb-size {
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
font-size: 0.55rem;
font-weight: 700;
white-space: nowrap;
background: rgba(0,0,0,0.6);
padding: 1px 3px;
border-radius: 2px;
color: #f3f4f6;
}
.file-details {
flex-grow: 1;
min-width: 0;
}
.file-name {
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.file-status-sub {
font-size: 0.75rem;
color: var(--text-secondary);
}
.file-status-badge {
border: 1px solid var(--primary);
color: var(--primary);
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
}
.profile-selector {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.profile-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
}
.profile-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.35rem;
background: #121319;
padding: 0.25rem;
border-radius: 24px;
border: 1px solid var(--border-color);
}
.profile-btn {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.5rem;
border-radius: 20px;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
transition: var(--transition-smooth);
}
.profile-btn:hover {
color: var(--text-primary);
}
.profile-btn.active {
background: #1f222e;
border: 1px solid #3d4151;
color: var(--primary);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.progress-container {
display: none;
flex-direction: column;
gap: 0.5rem;
margin: 1.5rem 0 0.5rem 0;
}
.progress-header {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-secondary);
}
.progress-bar-bg {
height: 6px;
background: #262834;
border-radius: 3px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
width: 0%;
background: var(--primary);
border-radius: 3px;
transition: width 0.08s linear;
}
.speed-gauge {
text-align: center;
font-family: var(--font-body);
font-weight: 500;
color: var(--primary);
margin-top: 0.25rem;
font-size: 0.85rem;
}
.btn-convert {
width: 100%;
padding: 0.85rem;
border: none;
background: var(--primary);
color: white;
font-family: var(--font-header);
font-weight: 700;
font-size: 0.95rem;
border-radius: var(--radius-md);
cursor: pointer;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
transition: var(--transition-smooth);
}
.btn-convert:hover {
background: var(--secondary);
box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35);
}
/* Done State */
.done-panel {
display: none;
text-align: center;
padding: 1.5rem 0;
}
.success-icon {
font-size: 3.5rem;
color: var(--accent);
margin-bottom: 1rem;
}
.success-badge {
display: inline-block;
background: rgba(var(--primary-rgb), 0.1);
border: 1px solid rgba(var(--primary-rgb), 0.3);
color: var(--accent);
padding: 0.25rem 0.75rem;
font-size: 0.8rem;
border-radius: 12px;
font-weight: 700;
margin: 0.5rem 0 1.5rem 0;
}
/* ==========================================================================
CSS Platform Device Mockup Frames (The 6 Screenshots)
========================================================================== */
.device-gallery-tabs {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
}
.tab-btn {
background: var(--line-faint);
border: 1px solid var(--line);
color: var(--text-secondary);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-lg);
font-family: var(--font-header);
font-weight: 600;
cursor: pointer;
transition: var(--transition-smooth);
}
.tab-btn:hover {
color: var(--text-primary);
background: var(--line);
}
.tab-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4);
}
.device-showcase-area {
display: flex;
justify-content: center;
align-items: center;
min-height: 540px;
position: relative;
/* No overflow:hidden — it would clip the device's soft drop-shadow at the
bottom. Horizontal scroll is already guarded at the page level
(html{overflow-x:clip}, body{overflow-x:hidden}). */
}
.tab-content {
display: none;
width: 100%;
justify-content: center;
align-items: center;
gap: 3rem;
}
.tab-content.active {
display: flex;
animation: fadeIn 0.4s ease-out;
}
/* Unified Platform Devices Structure */
[data-device] {
position: relative;
background-color: #1e2029;
border-radius: 36px;
box-shadow: var(--shadow-device), inset 0 2px 5px var(--line-strong);
border: 10px solid #101116;
display: flex;
flex-direction: column;
overflow: hidden;
transition: var(--transition-smooth);
}
.mockup-screen {
background: var(--bg-color-alt);
flex-grow: 1;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
user-select: none;
}
/* Screenshots fill the frame without distortion (crop instead of stretch) */
.mockup-screen img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: top center;
display: block;
}
/* Phone & tablet frames share a unified 500px height (desktop) for visual
harmony. Width is NOT hardcoded: each frame is width:fit-content and the
inner .mockup-screen carries an aspect-ratio equal to its screenshot's true
pixel ratio (see rules below), so the frame auto-sizes to the screenshot and
object-fit:cover has nothing to crop. align-items:center stops the flex
column from stretching the screen (which would make fit-content circular). */
[data-device="iphone"],
[data-device="android-phone"],
[data-device="ipad"],
[data-device="android-tablet"] {
width: fit-content;
align-items: center;
}
/* Per-device screen aspect-ratio = screenshot WxH (content-box, borders
excluded → matches the image exactly). Update the numbers if a screenshot
asset is swapped for one with a different aspect ratio.
height:100% makes the screen height definite (resolves against the frame's
fixed height) so the aspect-ratio-derived width is definite too — which the
frame's fit-content then wraps correctly (flex-grow alone leaves the height
indefinite, making fit-content fall back to the image's intrinsic width). */
[data-device="iphone"] .mockup-screen,
[data-device="android-phone"] .mockup-screen,
[data-device="ipad"] .mockup-screen,
[data-device="android-tablet"] .mockup-screen { height: 100%; }
[data-device="iphone"] .mockup-screen { aspect-ratio: 1206 / 2622; } /* screen_iphone_17_pro_dark_1.webp */
[data-device="android-phone"] .mockup-screen { aspect-ratio: 1080 / 2340; } /* android_phone_dark_1.webp */
[data-device="ipad"] .mockup-screen { aspect-ratio: 2064 / 2752; } /* screen_ipad_dark_1.webp */
[data-device="android-tablet"] .mockup-screen { aspect-ratio: 1600 / 2560; } /* android_tablet_dark_1.webp */
/* Device: iPhone Frame */
[data-device="iphone"] {
height: 500px;
border-radius: 40px;
}
/* Notch removed - already present in screenshot */
/* Device: Android Phone Frame */
[data-device="android-phone"] {
height: 500px;
border-radius: 36px;
}
/* Punch hole camera */
[data-device="android-phone"]::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background: #101116;
border-radius: 50%;
z-index: 10;
}
/* Device: iPad Tablet Frame */
[data-device="ipad"] {
height: 500px;
border-radius: 28px;
border-width: 14px;
}
/* Device: Android Tablet Frame */
[data-device="android-tablet"] {
height: 500px;
border-radius: 24px;
border-width: 12px;
}
/* Device: macOS Frame */
[data-device="macos"] {
width: 520px;
height: 341px;
border-radius: 16px;
border-width: 12px;
border-bottom-width: 16px;
}
/* Mac Stand base */
[data-device="macos"]::after {
content: "";
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 30px;
background: #2b2e3b;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
z-index: -1;
box-shadow: 0 14px 28px rgba(0,0,0,0.32);
}
/* Device: Windows Laptop Frame */
[data-device="windows"] {
width: 520px;
height: 341px;
border-radius: 8px;
border-width: 10px;
border-bottom-width: 14px;
}
/* Windows base lip */
[data-device="windows"]::after {
content: "";
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
width: 580px;
height: 8px;
background: #0f1015;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: -1;
}
/* Beautiful Premium CSS App Screenshots Placeholders */
.placeholder-screen {
width: 100%;
height: 100%;
padding: 1rem;
display: flex;
flex-direction: column;
color: var(--text-primary);
font-family: var(--font-body);
background: linear-gradient(135deg, #0b0c12 0%, #141618 100%);
position: relative;
overflow: hidden;
}
.placeholder-screen::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--line-strong) 50%, rgba(255,255,255,0) 100%);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
/* Mock App UI Elements */
.mock-app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--line);
font-size: 0.7rem;
color: var(--text-secondary);
}
.mock-app-logo {
font-family: var(--font-header);
font-weight: 800;
color: var(--primary);
display: flex;
align-items: center;
gap: 2px;
}
.mock-app-body {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.75rem;
padding: 1rem 0;
}
.mock-app-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.15) 100%);
border: 1px dashed var(--primary);
display: flex;
justify-content: center;
align-items: center;
color: var(--primary);
font-size: 1.25rem;
}
[data-device="macos"] .mock-app-circle,
[data-device="windows"] .mock-app-circle,
[data-device="android-tablet"] .mock-app-circle {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
.mock-app-text-line {
height: 6px;
background: var(--line);
border-radius: 3px;
width: 70%;
}
.mock-app-text-line.short {
width: 40%;
}
.mock-app-button {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
height: 24px;
width: 80%;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.6rem;
font-weight: 700;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mock-app-badge {
font-family: var(--font-header);
background: var(--line-subtle);
border: 1px solid var(--line-strong);
padding: 0.25rem 0.5rem;
font-size: 0.55rem;
border-radius: 6px;
font-weight: 700;
color: var(--secondary);
}
.mock-app-tablet-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
width: 100%;
height: 100%;
}
.mock-app-sidebar {
border-right: 1px solid rgba(255, 255, 255, 0.06);
padding-right: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mock-app-side-item {
height: 16px;
background: var(--line-faint);
border-radius: 4px;
width: 100%;
}
.mock-app-side-item.active {
background: rgba(var(--primary-rgb), 0.15);
border: 1px solid rgba(var(--primary-rgb), 0.3);
}
/* Generic Placeholder Banner Overlay for Custom Replacement later */
.placeholder-tag {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
padding: 0.4rem;
font-size: 0.65rem;
text-align: center;
color: var(--text-secondary);
border-top: 1px solid var(--line-subtle);
}
/* Label displayed above each device mockup frame */
.device-label {
font-family: var(--font-header);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
text-align: center;
letter-spacing: 0.5px;
margin-bottom: 0.6rem;
text-transform: uppercase;
}
/* ==========================================================================
Features & Platform Grid Sections
========================================================================== */
.section-header {
text-align: center;
max-width: 650px;
margin: 0 auto var(--space-header) auto;
}
.section-header h2 {
margin-bottom: 1rem;
}
.feature-icon {
font-size: 2.25rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.feature-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.feature-list {
list-style: none;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.95rem;
align-items: flex-start;
text-align: left;
}
.feature-list li {
display: flex;
align-items: flex-start; /* align icon to the first line of (possibly wrapping) text */
gap: 0.5rem;
}
.feature-check {
color: var(--accent);
font-weight: 700;
line-height: 1.2; /* keep the icon on the first text line */
}
/* Hero bullets: center each line so the list matches the centered hero text
above. The icon stays flush with the first line of (possibly wrapping) text. */
.hero-content .feature-list {
max-width: 100%;
margin-inline: auto;
align-items: center;
text-align: center;
}
.hero-content .feature-list li {
justify-content: center;
}
/* ==========================================================================
Lead Capture & Email Collection Section
========================================================================== */
.lead-box {
background: linear-gradient(135deg, rgba(var(--bg-header-rgb), 0.9) 0%, rgba(13,15,23,0.9) 100%);
border: 1px solid var(--line);
border-radius: 24px;
padding: 4rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.lead-box::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, transparent 60%);
z-index: 0;
pointer-events: none;
}
.lead-box-content {
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.lead-title {
margin-bottom: 1rem;
}
.lead-desc {
margin-bottom: 2.5rem;
}
.lead-form {
display: flex;
gap: 0.75rem;
max-width: 500px;
margin: 0 auto;
}
.input-email {
flex-grow: 1;
background: var(--line-faintest);
border: 1px solid var(--line-strong);
color: var(--text-primary);
padding: 1rem 1.5rem;
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: 1rem;
transition: var(--transition-smooth);
}
.input-email:focus {
outline: none;
border-color: var(--primary);
background: var(--line-subtle);
box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.25);
}
.lead-success-msg {
display: none;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--success);
font-weight: 600;
font-size: 1.1rem;
animation: fadeIn 0.4s ease-out;
}
/* ==========================================================================
Policy & Document Page Styles (Terms, Privacy)
========================================================================== */
.policy-layout {
padding: 1.5rem 0 6rem 0;
}
.policy-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 4rem;
align-items: start;
}
.policy-sidebar {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.policy-sidebar-title {
font-family: var(--font-header);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 1.5px;
margin-bottom: 0.75rem;
padding-left: 0.5rem;
}
.policy-side-link {
display: block;
padding: 0.6rem 1rem;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 500;
transition: var(--transition-smooth);
}
.policy-side-link:hover, .policy-side-link.active {
background: var(--line-faint);
color: var(--text-primary);
border-left: 3px solid var(--primary);
padding-left: calc(1rem - 3px);
}
.policy-content {
background: var(--surface-tint);
border: 1px solid var(--line-faint);
border-radius: var(--radius-lg);
padding: 2rem 3rem 3rem;
}
.policy-date {
font-size: 0.9rem;
color: var(--text-muted);
margin-top: 0.5rem;
margin-bottom: 2rem;
display: block;
}
.policy-content section {
padding: 2rem 0;
border-bottom: 1px solid var(--line-subtle);
}
.policy-content section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.policy-content section:first-of-type {
padding-top: 0;
}
.policy-content h2 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.policy-content p {
margin-bottom: 1.25rem;
font-size: 1rem;
}
.policy-content ul {
list-style: none;
margin-bottom: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-left: 1rem;
}
.policy-content ul li {
position: relative;
color: var(--text-secondary);
}
.policy-content ul li::before {
content: "•";
color: var(--secondary);
position: absolute;
left: -1rem;
font-weight: 700;
}
.policy-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.policy-table th, .policy-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--line-subtle);
}
.policy-table th {
background: rgba(255, 255, 255, 0.02);
color: var(--text-primary);
font-family: var(--font-header);
font-weight: 600;
}
.policy-table td {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* ==========================================================================
Google Search Ad Campaign Page Styles (promo.html)
========================================================================== */
.promo-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* two equal columns */
gap: 4rem;
align-items: start; /* top-align text column & preview (exact match at >=1200px) */
justify-items: center; /* horizontal centering of cells */
max-width: var(--container-max);
margin: 0 auto;
padding-top: 0;
text-align: center;
}
/* Center hero content inside the left column */
.promo-grid .hero-content {
margin: 0 auto;
text-align: center;
}
/* Band 1: centered eyebrow + headline above the 2-col hero */
.promo-hero-head {
max-width: 820px;
margin: 0 auto 1rem;
padding-top: var(--space-hero-top);
text-align: center;
}
/* Tighten the gap between the headline (Band 1) and the description (Band 2). */
.promo-grid .hero-desc {
margin-top: 0.5rem;
}
/* Band 3: centered download caption + badges below the 2-col hero */
.promo-hero-cta {
margin-top: var(--space-section);
text-align: center;
}
.promo-cta-caption {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
/* Real app screenshot in the hero's right column */
.promo-hero-shot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 2.5rem; /* room for the laptop stand */
}
/* Wide desktop (container maxed): scale the macOS preview so its top & bottom
line up with the text column. The frame is taken out of flow (absolute) so the
text defines the row height; the frame then fills that height with its ratio
preserved. Gated to >=1200px so the landscape frame always fits the column. */
@media (min-width: 1200px) {
.promo-grid { align-items: stretch; }
.promo-hero-shot {
position: relative;
padding-bottom: 0;
}
.hero-shot-desktop {
position: absolute;
inset: 0;
margin: auto;
height: 100%;
width: auto;
max-width: 100%;
aspect-ratio: 520 / 341;
}
.hero-shot-desktop::after { display: none; } /* stand would overflow the matched height */
}
/* Desktop two-column hero (text column beside the app shot): left-align the
description + feature bullets. Mobile (<=1024px, where the grid stacks) keeps
the centered layout. */
@media (min-width: 1025px) {
.promo-grid .hero-content { text-align: left; }
.promo-grid .hero-desc {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.promo-grid .hero-content .feature-list {
align-items: flex-start;
text-align: left;
margin-inline: 0;
}
.promo-grid .hero-content .feature-list li { justify-content: flex-start; }
}
/* Desktop shows the macOS laptop; the phone pair is mobile-only */
.hero-shot-mobile { display: none; }
@media (max-width: 768px) {
.promo-hero-shot { padding-bottom: 0; }
.hero-shot-desktop { display: none; }
.hero-shot-mobile {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 0.75rem;
}
/* Two phones side by side on a narrow screen; width auto-derives from the
screenshot ratio (set only the height) */
/* Scale radius + bezel by 300/500 so the shrunk phones stay proportional
(a fixed px radius/border would look over-round and chunky at this size). */
.hero-shot-mobile [data-device="iphone"] {
height: 300px;
border-radius: 24px; /* 40 × 0.6 */
border-width: 6px; /* 10 × 0.6 */
}
.hero-shot-mobile [data-device="android-phone"] {
height: 300px;
border-radius: 22px; /* 36 × 0.6 */
border-width: 6px; /* 10 × 0.6 */
}
}
.promo-trust-strip {
display: flex;
justify-content: space-around;
gap: 2rem;
background: var(--surface-tint);
border: 1px solid var(--line-faint);
border-radius: var(--radius-lg);
padding: 2rem;
margin-top: 3.5rem;
text-align: center;
}
.trust-item {
flex: 1;
padding: 0 0.5rem;
}
.trust-item .trust-num {
display: block;
font-family: var(--font-header);
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 0.25rem;
}
/* Demo "conversion complete" result title (not a document heading) */
.done-title {
font-family: var(--font-header);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.trust-item p {
font-size: 0.9rem;
color: var(--text-muted);
}
.promo-screenshots-section {
background: var(--surface-tint);
padding: var(--space-section) 0;
border-top: 1px solid var(--line-faintest);
}
.screenshots-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
justify-items: center;
align-items: center;
}
/* Showcase scaling inside promo grid — zoom affects layout, transform does not */
.screenshots-grid [data-device] {
zoom: 0.72;
box-shadow: var(--shadow-device);
}
.screenshots-grid [data-device]:hover {
zoom: 0.78;
box-shadow: var(--shadow-device-hover);
}
/* ==========================================================================
Footer Section Styling
========================================================================== */
footer {
position: relative;
overflow: hidden;
background-color: var(--bg-deep);
border-top: 1px solid var(--line-subtle);
padding: 4.5rem 0 2.75rem;
color: var(--text-secondary);
}
/* Glowing accent line along the top seam */
footer::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: min(92%, 960px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.5), transparent);
}
/* Soft atmospheric glow anchored to the brand corner */
footer::after {
content: "";
position: absolute;
bottom: -55%;
left: 12%;
width: 620px;
height: 420px;
background: radial-gradient(ellipse at center, rgba(var(--primary-rgb), 0.08), transparent 70%);
pointer-events: none;
}
/* Centered, vertically-rhythmic footer composition */
.footer-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2.25rem;
}
.footer-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
}
.footer-brand img {
display: block;
opacity: 0.95;
}
.footer-desc {
max-width: 440px;
font-size: 0.95rem;
line-height: 1.75;
color: var(--text-secondary);
}
.footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 2rem;
}
.footer-nav a {
position: relative;
color: var(--text-secondary);
font-size: 0.95rem;
font-weight: 500;
padding: 0.25rem 0;
}
.footer-nav a:hover {
color: var(--text-primary);
}
/* Hairline divider that fades at both ends */
.footer-divider {
width: min(100%, 680px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 1.5rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.footer-status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Live "running locally" indicator */
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.5);
animation: statusPulse 2.4s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.45); }
50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0); }
}
/* Desktop: landscape distribution — brand left / nav right, full-width
divider, then copyright left / status right. Mobile keeps the centered stack. */
@media (min-width: 769px) {
.footer-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand nav"
"divider divider"
"bottom bottom";
align-items: start;
text-align: left;
column-gap: 4rem;
row-gap: 2.5rem;
}
.footer-brand {
grid-area: brand;
align-items: flex-start;
text-align: left;
}
.footer-desc {
max-width: 420px;
}
/* Tidy right-hand link column, top-aligned to the logo */
.footer-nav {
grid-area: nav;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
align-self: start;
gap: 0.9rem;
padding-top: 0.35rem;
}
.footer-nav a {
font-size: 0.9rem;
}
/* Underline that wipes in from the right on hover */
.footer-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-nav a:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
.footer-divider {
grid-area: divider;
width: 100%;
}
.footer-bottom {
grid-area: bottom;
justify-content: space-between;
width: 100%;
gap: 1rem 2rem;
}
}
/* ==========================================================================
Animations CSS
========================================================================== */
@keyframes lightningGlow {
0%, 100% { filter: drop-shadow(0 0 2px var(--primary-glow)); }
50% { filter: drop-shadow(0 0 12px var(--primary)); }
}
@keyframes pulse {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.03); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==========================================================================
Responsive Tablet Breakpoints (max-width: 1024px)
========================================================================== */
@media (max-width: 1024px) {
section {
padding: 2rem 0;
}
/* Grid shifts for Tablets */
.grid-2 {
grid-template-columns: 1fr;
gap: 3rem;
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.promo-grid {
grid-template-columns: 1fr;
gap: 3.5rem;
}
/* Hero centering on Tablets */
.hero .container {
gap: 1rem;
}
/* Policy sidebar adjustment for Tablet */
.policy-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.policy-sidebar {
position: relative;
top: 0;
flex-direction: row;
flex-wrap: wrap;
background: var(--surface-tint);
padding: 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--line-faint);
}
.policy-sidebar-title {
width: 100%;
margin-bottom: 0.5rem;
}
.policy-content {
padding: 2rem;
}
/* Devices gallery adjustments */
.tab-content {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.screenshots-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
/* ==========================================================================
Responsive Mobile Breakpoints (max-width: 768px)
========================================================================== */
@media (max-width: 768px) {
/* Hamburger trigger */
.menu-toggle {
display: flex;
}
nav ul {
position: fixed;
top: 0;
right: 0;
width: 280px;
height: 100vh;
background: rgba(var(--bg-header-rgb), 0.95);
backdrop-filter: blur(20px);
border-left: 1px solid var(--line-subtle);
flex-direction: column;
justify-content: center;
gap: 2.5rem;
padding: 2rem;
/* translateX (not right:-100%) keeps the closed drawer from expanding the
page's scroll width and causing horizontal scroll on mobile. */
transform: translateX(100%);
transition: var(--transition-smooth);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
nav ul.active {
transform: translateX(0);
}
.nav-container {
padding: 1rem 1.5rem;
}
/* Phone header (standard pages): logo pinned to the left edge, the language
selector + hamburger pushed to the right edge with space between. The
switcher collapses to a compact globe (label hidden) so long localized
names like "Español (México)" never crowd the logo or overflow. */
.nav-container .lang-switcher:not(.promo-lang) {
margin-left: auto;
}
.lang-switcher:not(.promo-lang) .lang-btn .lang-current {
display: none;
}
.grid-3 {
grid-template-columns: 1fr;
}
.screenshots-grid {
grid-template-columns: 1fr;
}
.hero-ctas {
flex-direction: column;
width: 100%;
}
.btn-primary, .btn-secondary {
width: 100%;
justify-content: center;
}
/* Fix feature list on mobile: left-align, top-align icon */
.feature-list {
align-items: flex-start;
text-align: left;
width: 100%;
}
.feature-list li {
align-items: flex-start;
text-align: left;
width: 100%;
}
/* Hero bullets: centered to match the centered hero text above. */
.hero-feature-list {
align-items: center;
text-align: center;
}
.hero-feature-list li {
width: auto; /* override .feature-list li width:100% so the row centers */
justify-content: center;
align-items: flex-start;
text-align: center;
}
.feature-check {
flex-shrink: 0;
margin-top: 2px;
}
.lead-form {
flex-direction: column;
gap: 0.75rem;
}
.lead-box {
padding: 3rem 1.5rem;
}
/* Shrink Mockup Scales on Mobile Screen sizes */
[data-device="macos"], [data-device="windows"] {
width: 320px;
height: 210px;
}
[data-device="macos"]::after, [data-device="windows"]::after {
display: none; /* Hide bases on small viewports */
}
/* Tablet width auto-derives from the screenshot ratio (set only the height).
border-radius + border-width are scaled by height/500 so the mobile frame
is an exact miniature of the desktop one (same corner % and bezel %) — a
fixed px radius would grow proportionally and clip the screenshot corner. */
[data-device="ipad"] {
height: 320px; /* ×0.64 of desktop 500px */
border-radius: 18px; /* 28 × 0.64 */
border-width: 9px; /* 14 × 0.64 */
}
[data-device="android-tablet"] {
height: 352px; /* ×0.704 of desktop 500px */
border-radius: 17px; /* 24 × 0.704 */
border-width: 8px; /* 12 × 0.704 */
}
.device-showcase-area {
min-height: 400px;
}
.footer-inner {
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
}
/* ==========================================================================
Store Download Badges (shared — was duplicated inline in index/promo)
========================================================================== */
.store-badges {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 1rem;
}
.store-badges a {
display: inline-flex;
border-radius: 12px;
transition: var(--transition-smooth);
}
.store-badges a:hover {
transform: translateY(-2px);
filter: drop-shadow(0 6px 18px rgba(var(--primary-rgb), 0.35));
}
.store-badges img {
display: block;
height: 53px;
width: auto;
}
/* The Microsoft Store badge SVG bakes a ~1px margin into its artwork: the solid
badge is only 42 units tall within a 44-unit viewBox, so at 53px it renders
~2.4px shorter than the App Store / Google Play badges (which fill their
viewBox). Scale it up so the SOLID badge matches 53px (53 × 44/42 ≈ 55.5px);
the faint outer border is intentionally ignored, per design. */
.store-badges img[data-i18n-src="common.badge.microsoft.src"] {
height: 55.5px;
}
/* Eyebrow used as an inline-block label (not a section heading) */
.eyebrow {
display: inline-block;
font-family: var(--font-header);
color: var(--accent);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
margin-bottom: 1rem;
}
/* ==========================================================================
Accessibility utilities
========================================================================== */
.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;
}
/* Adequate touch targets (WCAG 2.5.5) for text links on touch devices */
@media (max-width: 768px) {
nav a,
footer a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
/* ==========================================================================
Respect reduced-motion preferences
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
i18n — language switcher, flash guard, and RTL (Arabic) support
========================================================================== */
/* Flash guard: hide content for a non-English start until translations apply.
Only added by js/i18n.js for non-en-US locales, with a ~1200ms failsafe. */
html.i18n-translating body { visibility: hidden; }
/* Cluster the nav links + language switcher to the right of the logo. Works on
desktop (nav visible) and mobile (nav off-canvas → switcher + burger cluster). */
.nav-container { gap: 1.25rem; }
#nav-menu { margin-left: auto; }
/* Language switcher button + popup */
.lang-switcher { position: relative; flex-shrink: 0; }
.lang-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-header);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface-tint);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
padding: 0.4rem 0.8rem;
cursor: pointer;
transition: var(--transition-smooth);
}
.lang-btn:hover { color: var(--text-primary); border-color: var(--line-strong); }
.lang-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.lang-globe { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.lang-current { white-space: nowrap; }
.lang-caret {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
flex-shrink: 0;
}
.lang-menu {
position: absolute;
top: calc(100% + 0.5rem);
inset-inline-end: 0;
min-width: 210px;
max-height: 64vh;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 0.4rem;
background: var(--bg-color-alt);
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
box-shadow: var(--shadow-pop);
z-index: 1002;
}
.lang-option {
padding: 0.55rem 0.85rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
}
.lang-option:hover,
.lang-option:focus-visible {
background: rgba(var(--primary-rgb), 0.14);
color: var(--text-primary);
outline: none;
}
.lang-option[aria-selected="true"] { color: var(--accent); font-weight: 700; }
/* ---- RTL (Arabic) overrides ------------------------------------------------ */
/* Logo image uses an inline margin-right; flip it for RTL. */
[dir="rtl"] .logo-link img {
margin-right: 0 !important;
margin-inline-start: 0 !important;
margin-inline-end: 0.4rem !important;
}
/* Left-aligned hero/feature lists flip to right in RTL. */
[dir="rtl"] .feature-list,
[dir="rtl"] .hero-content .feature-list { text-align: right; }
/* Desktop landscape footer text flips to right. */
[dir="rtl"] .footer-inner,
[dir="rtl"] .footer-brand { text-align: right; }
/* Promo's logo-only centered header: pin the switcher to the inline-end edge
(auto-flips for RTL) without disturbing the centered logo. */
/* Promo header: logo pinned left, language switcher pinned right (matches the
index header). space-between keeps them at opposite edges with no overlap. */
.promo-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.promo-nav .promo-lang {
position: static;
transform: none;
inset-inline-end: auto;
}
/* Legal page machine-translation notice (shown by js/i18n.js for non-English locales) */
/* Author `display:flex` would otherwise override the UA `[hidden]{display:none}`
rule (author origin beats UA origin), keeping the banner visible even when
js/i18n.js sets the `hidden` attribute. This higher-specificity rule restores it. */
.legal-disclaimer[hidden] {
display: none;
}
.legal-disclaimer {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 2rem;
padding: 0.85rem 1.1rem;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-secondary);
background: rgba(var(--primary-rgb), 0.08);
border: 1px solid rgba(var(--primary-rgb), 0.25);
border-radius: var(--radius-sm);
}
.legal-disclaimer a {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
white-space: nowrap;
}
.legal-disclaimer a:hover { color: var(--accent-hover); }
/* ==========================================================================
Device mockup lightbox — desktop click-to-zoom
Behaviour lives in js/lightbox.js; this is presentation only. The cursor
affordance is gated to the same desktop condition the JS enforces.
========================================================================== */
@media (min-width: 769px) and (pointer: fine) {
[data-device].is-zoomable { cursor: zoom-in; }
}
.lightbox-backdrop {
position: fixed;
inset: 0;
z-index: 3000; /* above the sticky header (~2000) */
display: flex;
align-items: center;
justify-content: center;
padding: 4vmin;
background: rgba(0, 0, 0, 0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.lightbox-backdrop.is-open {
opacity: 1;
visibility: visible;
transition: opacity 0.28s ease;
}
/* JS sets transform: scale() here so corner-radius/bezel scale uniformly
(resizing the frame's height would distort those px-based proportions). */
.lightbox-stage {
transform-origin: center center;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
/* Defense in depth: a cloned frame must lay out inside the stage on its own
intrinsic box. Pin it to the device default (position:relative, no offsets) so
it can't inherit a context position that escapes the stage — while keeping the
relative anchor its notch/camera/stand pseudo-elements depend on. */
.lightbox-stage > [data-device] {
position: relative;
inset: auto;
margin: 0;
}
.lightbox-close {
position: absolute;
top: max(1rem, 2vmin);
right: max(1rem, 2vmin);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
line-height: 1;
color: var(--text-primary);
background: var(--bg-color-alt);
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
cursor: pointer;
transition: var(--transition-smooth);
}
.lightbox-close:hover {
background: #23252f;
border-color: rgba(255, 255, 255, 0.2);
}
@media (prefers-reduced-motion: reduce) {
.lightbox-backdrop,
.lightbox-backdrop.is-open,
.lightbox-stage { transition: none; }
}
/* ---------------------------------------------------------------- FAQ accordion
Native / disclosure — accessible and works with JS disabled. */
.faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-item {
background: var(--bg-color-alt);
border: 1px solid var(--line-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.35rem;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
list-style: none; /* hide default disclosure triangle (standards) */
transition: color 0.18s ease;
}
.faq-item summary::-webkit-details-marker { display: none; } /* hide on WebKit */
.faq-item summary:hover { color: var(--accent); }
/* Plus/minus indicator built from a pseudo-element so it works without icons. */
.faq-item summary::after {
content: "";
flex: 0 0 auto;
width: 14px;
height: 14px;
position: relative;
background:
linear-gradient(var(--accent), var(--accent)) center/14px 2px no-repeat,
linear-gradient(var(--accent), var(--accent)) center/2px 14px no-repeat;
transition: transform 0.22s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); } /* + becomes × */
.faq-item summary:focus-visible {
outline: 3px solid var(--accent);
outline-offset: -3px;
border-radius: var(--radius-md);
}
.faq-answer {
padding: 0 1.35rem 1.2rem;
color: var(--text-secondary);
}
.faq-answer p { margin: 0; line-height: 1.65; }
[dir="rtl"] .faq-item summary { text-align: right; }
@media (prefers-reduced-motion: reduce) {
.faq-item summary,
.faq-item summary::after { transition: none; }
}