/* -------------------------------------------------------------------------- Arivyo landing — design tokens, layout, components Color: warm neutrals + single accent (:root default light, :root[data-theme="dark"]). Theme: data-theme on (inline script in index.html head + script.js toggle). -------------------------------------------------------------------------- */ /* Layout, type scale, motion — shared across themes */ :root { --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-lg: 1.25rem; --text-xl: clamp(1.75rem, 4vw, 2.25rem); --text-hero: clamp(2.25rem, 5.5vw, 3.25rem); --leading-tight: 1.2; --leading-normal: 1.55; --leading-relaxed: 1.65; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; --container: 72rem; --header-h: 4.25rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --transition: 0.2s ease; /* Semantic non-palette */ --color-error: #b45309; --color-error-text: #c2410c; /* ----------------------------------------------------------------------- Light palette (default — matches brand table below; works without JS) | Background #fafaf9 | Background Alt #f5f4f0 | Surface #ffffff | | Text #1a1a1a | Text Secondary #5c5c5c | Text Muted #8a8a8a | | Border #e5e4e0 | Border Light #eeede9 | | Accent: refined teal-green (CTAs, links, product bars) | ----------------------------------------------------------------------- */ color-scheme: light; --color-bg: #fafaf9; --color-bg-alt: #f5f4f0; --color-surface: #ffffff; --color-text: #1a1a1a; --color-text-secondary: #5c5c5c; --color-text-muted: #8a8a8a; --color-accent: #1a6b5a; --color-accent-hover: #145a4b; --color-accent-light: #e8f5f0; --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent); --color-border: #e5e4e0; --color-border-light: #eeede9; --color-border-strong: #d5d4cf; --color-fill-subtle: color-mix(in srgb, var(--color-bg-alt) 92%, var(--color-text) 8%); --color-input-fill: #faf9f7; --bg-section-hero: var(--color-bg); --bg-section-build: var(--color-bg-alt); --bg-section-products: var(--color-bg); --bg-section-why: var(--color-bg-alt); --bg-section-about: var(--color-bg); --bg-section-waitlist: var(--color-bg-alt); --bg-section-footer: color-mix(in srgb, var(--color-bg-alt) 88%, var(--color-text) 12%); --product-circlo: #1a6b5a; --product-debrief: #1f7564; --product-opero: #2a7a6a; --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05); --shadow-md: 0 4px 24px rgba(26, 26, 26, 0.08); --shadow-card: 0 2px 16px rgba(26, 26, 26, 0.06); --header-scrolled-bg: color-mix(in srgb, var(--color-surface) 94%, transparent); } /* Dark — same structure, warm charcoal base + lighter green accent for contrast */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #131312; --color-bg-alt: #1b1b19; --color-surface: #222221; --color-text: #f4f4f3; --color-text-secondary: #a8a8a5; --color-text-muted: #737370; --color-accent: #5dbea8; --color-accent-hover: #72cbb5; --color-accent-light: #243330; --color-accent-soft: color-mix(in srgb, var(--color-accent) 22%, transparent); --color-border: #353533; --color-border-light: #2a2a28; --color-border-strong: #454442; --color-fill-subtle: #2c2c2a; --color-input-fill: #1a1a19; --bg-section-hero: var(--color-bg); --bg-section-build: var(--color-bg-alt); --bg-section-products: var(--color-bg); --bg-section-why: var(--color-bg-alt); --bg-section-about: var(--color-bg); --bg-section-waitlist: var(--color-bg-alt); --bg-section-footer: color-mix(in srgb, var(--color-bg-alt) 92%, #000 8%); --product-circlo: #5aa896; --product-debrief: #5fb5a0; --product-opero: #52a090; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.35); --header-scrolled-bg: color-mix(in srgb, var(--color-surface) 92%, transparent); --color-error: #f59e0b; --color-error-text: #fbbf24; } /* Reset-ish baseline */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 0.15em; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); z-index: 200; padding: var(--space-xs) var(--space-sm); background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-weight: 600; } .skip-link:focus { top: var(--space-sm); outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Containers */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); } /* -------------------------------------------------------------------------- Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; /* Blends with hero; reads clean over other sections while scrolling */ background: color-mix(in srgb, var(--bg-section-hero) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .site-header.is-scrolled { background: var(--header-scrolled-bg); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: var(--container); margin-inline: auto; padding: var(--space-sm) var(--space-md); min-height: var(--header-h); } .logo { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--color-text); text-decoration: none; } .logo:hover { color: var(--color-accent); text-decoration: none; } .nav-primary { display: none; } .nav-list { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; } .nav-list a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; } .nav-list a:hover { color: var(--color-text); text-decoration: none; } .btn-nav { display: none; } /* Theme toggle — icon shows the mode you’ll switch to (moon = go dark, sun = go light) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; transition: border-color var(--transition), background var(--transition); flex-shrink: 0; } .theme-toggle:hover { border-color: var(--color-border-strong); background: var(--color-fill-subtle); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-toggle-icon { position: relative; width: 1.125rem; height: 1.125rem; } /* Moon: offset disc shadow = crescent */ .theme-toggle-icon--moon { width: 0.5rem; height: 0.5rem; border-radius: 50%; box-shadow: 0.38em 0.1em 0 0.1em var(--color-text-secondary); transform: rotate(-22deg); } /* Sun: solid disc + ring */ .theme-toggle-icon--sun { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-text-secondary); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-border); } :root:not([data-theme="dark"]) .theme-toggle-icon--sun, :root[data-theme="light"] .theme-toggle-icon--sun { display: none; } :root[data-theme="dark"] .theme-toggle-icon--moon { display: none; } /* Mobile menu toggle */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 2.75rem; height: 2.75rem; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); } .nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nav-toggle-bar { display: block; width: 1.375rem; height: 2px; background: var(--color-text); margin-inline: auto; transition: transform var(--transition), opacity var(--transition); } .site-header.is-open .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); } .site-header.is-open .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); } .mobile-nav { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-md); } .mobile-nav[hidden] { display: none; } .site-header.is-open .mobile-nav { display: block; } .mobile-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .mobile-nav-list a { display: block; padding: var(--space-xs) 0; font-weight: 500; color: var(--color-text); text-decoration: none; } .mobile-nav-list a:hover { color: var(--color-accent); text-decoration: none; } @media (min-width: 900px) { .nav-primary { display: block; margin-left: auto; margin-right: var(--space-md); } .btn-nav { display: inline-flex; } .nav-toggle { display: none; } .mobile-nav { display: none !important; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.35rem; font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: var(--color-text-muted); background: var(--color-bg); } .btn-block { width: 100%; text-align: center; margin-top: var(--space-sm); } .btn-product { margin-top: auto; align-self: flex-start; } .btn-submit { width: 100%; margin-top: var(--space-sm); padding: 0.85rem 1.5rem; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { background-color: var(--bg-section-hero); padding-block: var(--space-2xl) var(--space-xl); padding-top: max(var(--space-xl), calc(var(--space-lg) + env(safe-area-inset-top))); } .hero-grid { display: grid; gap: var(--space-xl); align-items: center; } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } } .hero-title { margin: 0 0 var(--space-md); font-size: var(--text-hero); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -0.03em; color: var(--color-text); } .hero-lead { margin: 0 0 var(--space-lg); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); max-width: 36ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* Abstract hero visual — cards / panels only */ .hero-visual { position: relative; min-height: 280px; display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-md); } .hero-panel { flex: 1; max-width: 280px; background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-md); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); transition: box-shadow var(--transition), transform var(--transition); } .hero-panel:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .hero-panel--main { margin-top: var(--space-lg); } .hero-panel-label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); margin-bottom: var(--space-md); } .hero-panel-rows { display: flex; flex-direction: column; gap: var(--space-sm); } .hero-row { height: 8px; background: var(--color-border); border-radius: 4px; } .hero-row--short { width: 65%; } .hero-stack { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: 0; } .hero-card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .hero-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } .hero-card--sm { width: 120px; padding: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); } .hero-card--md { width: 140px; padding: var(--space-md); } .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-soft); border: 2px solid var(--color-accent); flex-shrink: 0; } .hero-card-line { flex: 1; height: 4px; background: var(--color-border); border-radius: 2px; } .hero-card-blocks { display: flex; gap: 6px; } .hero-card-blocks span { flex: 1; height: 36px; background: var(--color-accent-soft); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } @media (max-width: 959px) { .hero-visual { justify-content: flex-start; min-height: 240px; } } /* -------------------------------------------------------------------------- Sections — shared -------------------------------------------------------------------------- */ .section { padding-block: var(--space-xl); } @media (min-width: 768px) { .section { padding-block: var(--space-2xl); } } .section--build { background-color: var(--bg-section-build); } .section--products { background-color: var(--bg-section-products); } .section--why { background-color: var(--bg-section-why); } .section--about { background-color: var(--bg-section-about); } .section--waitlist { background-color: var(--bg-section-waitlist); padding-block: var(--space-2xl) var(--space-3xl); } .section-title { margin: 0 0 var(--space-lg); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; line-height: var(--leading-tight); color: var(--color-text); } .section-divider { max-width: none; width: 100%; margin-inline: 0; height: 1px; background: var(--color-border-light); margin-block: 0; } /* What we build — three cards */ .card-grid { display: grid; gap: var(--space-md); } @media (min-width: 768px) { .card-grid--three { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } } .info-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .info-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card); transform: translateY(-2px); } /* Placeholder or real photo — fixed aspect ratio, full width */ .info-card-media { margin: 0; aspect-ratio: 16 / 10; background: var(--color-border); overflow: hidden; } .info-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .info-card-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; } .info-card-title { margin: 0 0 var(--space-sm); font-size: 1.125rem; font-weight: 700; color: var(--color-text); } .info-card-text { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } /* Products */ .product-grid { display: grid; gap: var(--space-lg); } @media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .product-card { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); position: relative; overflow: hidden; } /* Top accent bar per product — distinct but restrained */ .product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .product-card--circlo::before { background: var(--product-circlo); } .product-card--debrief::before { background: var(--product-debrief); } .product-card--opero::before { background: var(--product-opero); } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-border-strong); } .product-badge { display: inline-block; align-self: flex-start; font-size: var(--text-xs); font-weight: 600; text-transform: capitalize; letter-spacing: 0.04em; color: var(--color-text-secondary); background: var(--color-accent-light); padding: 0.35rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin-bottom: var(--space-md); } .product-name { margin: 0 0 var(--space-xs); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .product-tagline { margin: 0 0 var(--space-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); } .product-desc { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); flex-grow: 1; } /* Why Arivyo — scoped to #why-arivyo only */ #why-arivyo .section-title { text-align: center; margin-bottom: var(--space-md); max-width: none; } #why-arivyo .why-lede { margin: 0 auto var(--space-xl); max-width: 36rem; text-align: center; font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } #why-arivyo .why-pills { display: grid; grid-template-columns: 1fr; gap: var(--space-md); max-width: 48rem; margin-inline: auto; } @media (min-width: 768px) { #why-arivyo .why-pills { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } #why-arivyo .why-pill--row2 { grid-column: 1 / -1; justify-self: center; width: fit-content; max-width: 100%; } } #why-arivyo .why-pill { display: flex; align-items: center; gap: var(--space-sm); min-height: 3.5rem; padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 9999px; box-shadow: var(--shadow-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-text); line-height: var(--leading-normal); } #why-arivyo .why-pill-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent-light); color: var(--color-accent); } #why-arivyo .why-pill-icon svg { display: block; } #why-arivyo .why-pill-text { text-align: left; } /* About — scoped to #about only */ #about.section--about { background-color: var(--color-bg-alt); } #about.section { padding-block: var(--space-2xl); } @media (min-width: 768px) { #about.section { padding-block: var(--space-3xl); } } #about .about-inner { max-width: 42rem; margin-inline: auto; text-align: center; } #about .section-title { text-align: center; margin-bottom: var(--space-lg); } #about .about-main { margin: 0; font-size: var(--text-lg); font-weight: 400; color: var(--color-text-secondary); line-height: var(--leading-relaxed); } #about .about-closing { margin: var(--space-xl) 0 0; font-size: var(--text-base); font-style: italic; font-weight: 400; color: var(--color-text-muted); line-height: var(--leading-relaxed); } /* Waitlist */ .waitlist-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg); box-shadow: var(--shadow-card); } @media (min-width: 768px) { .waitlist-panel { padding: var(--space-xl); } } .waitlist-lead { margin: 0 0 var(--space-lg); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .waitlist-form .form-row { margin-bottom: var(--space-md); } .waitlist-form label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); } .optional-label { font-weight: 500; color: var(--color-text-muted); } .req { color: var(--color-accent); } .waitlist-form input, .waitlist-form select { width: 100%; padding: 0.75rem 1rem; font-family: inherit; font-size: var(--text-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-input-fill); color: var(--color-text); transition: border-color var(--transition), box-shadow var(--transition); } .waitlist-form input::placeholder { color: var(--color-text-muted); } .waitlist-form input:hover, .waitlist-form select:hover { border-color: var(--color-text-muted); } .waitlist-form input:focus, .waitlist-form select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .waitlist-form input[aria-invalid="true"] { border-color: var(--color-error); } .field-error { min-height: 1.25rem; margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-error-text); } .form-success { padding: var(--space-md); background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: var(--space-sm); } .form-success-title { margin: 0 0 var(--space-xs); font-weight: 700; font-size: var(--text-base); color: var(--color-text); } .form-success-text { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); background-color: var(--bg-section-footer); padding-block: var(--space-xl); } .footer-inner { display: flex; flex-direction: column; gap: var(--space-lg); } @media (min-width: 640px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; } } .footer-logo { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--color-text); } .footer-tagline { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: 28ch; line-height: var(--leading-relaxed); } .footer-meta { font-size: var(--text-xs); color: var(--color-text-muted); } .footer-copy { margin: 0 0 var(--space-xs); } .footer-contact { margin: 0; } .footer-contact a { font-weight: 500; text-decoration: none; } .footer-contact a:hover { text-decoration: underline; }