/* ============================================================================ O-DOMO marketing site — design system + palette cloned from NAM.Site's "Obsidian" theme (pure-black void, electric violet → cyan). Kept close to the model site by choice. No web fonts, no CDN — system font stacks only. The --c-blue* names are kept for structural parity but hold the violet brand colour (so the app could later be recoloured to match, not the reverse). ============================================================================ */ :root { --c-bg: #000000; --c-bg-raise: #0b0b11; --c-surface: rgba(255, 255, 255, 0.04); --c-surface-2: rgba(255, 255, 255, 0.07); --c-border: rgba(255, 255, 255, 0.10); --c-border-strong: rgba(255, 255, 255, 0.18); --c-text: #f4f4f8; --c-text-dim: rgba(244, 244, 248, 0.58); --c-text-faint: rgba(244, 244, 248, 0.34); --c-blue: #8b3dff; --c-blue-deep: #5b18d6; --c-cyan: #00e5ff; --c-cyan-soft: #6ef3ff; --c-glow-blue: rgba(139, 61, 255, 0.35); --c-glow-cyan: rgba(0, 229, 255, 0.22); --c-ok: #45d68f; --grad-brand: linear-gradient(100deg, var(--c-blue), var(--c-cyan), var(--c-blue)); --grad-btn: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue), var(--c-cyan)); --shadow-btn: 0 6px 22px color-mix(in srgb, var(--c-blue) 40%, transparent); --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.55); } /* ============================================================ SWAPPABLE THEMES — every colour is a variable, so a theme is just an override block. Selected via (SiteTheme service, ?theme= switch). Default (:root) = Obsidian. ============================================================ */ html[data-site-theme="midnight"] { --c-bg: #070b14; --c-bg-raise: #0b1020; --c-surface: rgba(151, 168, 205, 0.06); --c-surface-2: rgba(151, 168, 205, 0.12); --c-text: #edf1f9; --c-text-dim: rgba(237, 241, 249, 0.60); --c-text-faint: rgba(237, 241, 249, 0.34); --c-blue: #5b9dff; --c-blue-deep: #2e6be6; --c-cyan: #40c9ff; --c-cyan-soft: #8fe3ff; --c-glow-blue: rgba(91, 157, 255, 0.35); --c-glow-cyan: rgba(64, 201, 255, 0.22); } html[data-site-theme="aurora"] { --c-bg: #05080a; --c-bg-raise: #0a1014; --c-surface: rgba(160, 230, 210, 0.06); --c-surface-2: rgba(160, 230, 210, 0.12); --c-text: #eefaf4; --c-text-dim: rgba(238, 250, 244, 0.60); --c-text-faint: rgba(238, 250, 244, 0.34); --c-blue: #2dd4bf; --c-blue-deep: #0f9d8f; --c-cyan: #4ade80; --c-cyan-soft: #a7f3d0; --c-glow-blue: rgba(45, 212, 191, 0.32); --c-glow-cyan: rgba(74, 222, 128, 0.22); } html[data-site-theme="sunset"] { --c-bg: #0c0710; --c-bg-raise: #140b18; --c-surface: rgba(255, 200, 180, 0.06); --c-surface-2: rgba(255, 200, 180, 0.12); --c-text: #fbf1f4; --c-text-dim: rgba(251, 241, 244, 0.60); --c-text-faint: rgba(251, 241, 244, 0.34); --c-blue: #ffb454; --c-blue-deep: #e0791f; --c-cyan: #ff5c8a; --c-cyan-soft: #ffa8c3; --c-glow-blue: rgba(255, 180, 84, 0.30); --c-glow-cyan: rgba(255, 92, 138, 0.24); } html[data-site-theme="ember"] { --c-bg: #000000; --c-bg-raise: #120a04; --c-surface: rgba(255, 170, 90, 0.06); --c-surface-2: rgba(255, 170, 90, 0.12); --c-text: #faf5ef; --c-text-dim: rgba(250, 245, 239, 0.60); --c-text-faint: rgba(250, 245, 239, 0.34); --c-blue: #ff8c1a; --c-blue-deep: #d96a00; --c-cyan: #ffc857; --c-cyan-soft: #ffdf9e; --c-glow-blue: rgba(255, 140, 26, 0.32); --c-glow-cyan: rgba(255, 200, 87, 0.20); } /* Theme-independent tokens (fonts, spacing) shared by every theme. */ :root { --font-body: "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --font-display: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; --radius: 16px; --radius-lg: 28px; --header-h: 72px; --ease-out: cubic-bezier(.16, 1, .3, 1); --maxw: 1180px; } * { box-sizing: border-box; } /* Horizontal overflow must be clipped on BOTH html and body: on mobile the html element can still pan sideways when only body hides it, and the slide entrances translate sections up to 80px past the viewport edge. `clip` (with `hidden` fallback) blocks it without creating a scroll container. */ html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--c-glow-blue); color: #fff; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0; } img { max-width: 100%; display: block; } /* ---------- ambient background ---------- */ .site-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; } .bg-grid { position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: linear-gradient(rgba(91, 157, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 157, 255, 0.05) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(600px) rotateX(56deg) scale(1.6) translateY(-10%); transform-origin: top center; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%); animation: grid-breathe 9s var(--ease-out) infinite; } @keyframes grid-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .85; } } .bg-aurora { position: fixed; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(45% 45% at 18% 12%, var(--c-glow-blue), transparent 60%), radial-gradient(40% 40% at 82% 20%, var(--c-glow-cyan), transparent 60%), radial-gradient(50% 50% at 70% 88%, rgba(46, 107, 230, 0.18), transparent 62%); filter: blur(48px); animation: aurora-drift 26s ease-in-out infinite alternate; } @keyframes aurora-drift { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-4%, 3%, 0); } } /* Star canvas — a background layer, must be out of flow like grid/aurora, otherwise it takes a full viewport of space and pushes the header down. */ #odo-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: 20px; padding: 0 clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--c-bg) 62%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--c-border); } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; } .brand-logo { height: 52px; width: auto; } .header-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; } .header-link { color: var(--c-text-dim); font-weight: 600; font-size: .95rem; transition: color .15s; } .header-link:hover { color: var(--c-text); } .header-actions { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; } .nav-burger { display: none; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; border-radius: 999px; padding: 12px 24px; cursor: pointer; border: 1px solid transparent; transition: transform .2s var(--ease-out), box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--c-blue); color: #fff; box-shadow: var(--shadow-btn); } .btn-primary:hover { background: var(--c-blue-deep); } .btn-ghost { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); } .btn-ghost:hover { background: var(--c-surface-2); } .btn-sm { padding: 8px 16px; font-size: .9rem; } .btn-lg { padding: 15px 32px; font-size: 1.08rem; } .btn-block { width: 100%; } /* ---------- sections ---------- */ .site-main { flex: 1; } .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 40px); } .section-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; margin-bottom: 14px; } .section-sub { color: var(--c-text-dim); font-size: 1.15rem; max-width: 640px; } .gradient-text { background: var(--grad-brand); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-slide 6s linear infinite; padding-bottom: .08em; } @keyframes gradient-slide { to { background-position: 200% center; } } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 5vw, 64px); align-items: center; min-height: 88vh; max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 40px); } /* hero copy is not selectable (user-select inherits to all children) */ .hero { -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* headings get programmatic focus via FocusOnNavigate — hide that focus ring */ h1:focus, h1:focus-visible { outline: none; } .hero-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .8rem; color: var(--c-cyan); margin-bottom: 18px; } .hero-title { font-size: clamp(2.4rem, 5.5vw, 4.8rem); font-weight: 800; } .hero-sub { color: var(--c-text-dim); font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 22px 0 32px; max-width: 540px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-note { margin-top: 18px; color: var(--c-text-faint); font-size: .9rem; } .hero-visual { position: relative; } .hero-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); aspect-ratio: 3 / 2; } .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-img-glow { position: absolute; inset: -30% -10% -30% -10%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, var(--c-glow-blue), transparent 70%); filter: blur(40px); } /* ---------- feature grids (how / benefits) ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; transition: transform .3s var(--ease-out), border-color .3s, background .3s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .card:hover { transform: translateY(-4px); border-color: var(--c-border-strong); background: var(--c-surface-2); } .card-img-wrap { border-radius: 12px; overflow: hidden; margin: -4px -4px 16px; aspect-ratio: 16 / 11; } .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); } .card:hover .card-img { transform: scale(1.05); } .card-num { font-family: var(--font-mono); color: var(--c-cyan); font-size: .85rem; letter-spacing: .1em; } .card-title { font-size: 1.25rem; font-weight: 700; margin: 8px 0; } .card-body { color: var(--c-text-dim); font-size: .98rem; } .benefit-card .card-img-wrap { aspect-ratio: 1 / 1; } /* ---------- pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 44px; align-items: stretch; } .price-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 30px 26px; display: flex; flex-direction: column; gap: 6px; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .price-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--c-glow-blue), var(--shadow-card); } .price-card.featured { border-color: color-mix(in srgb, var(--c-blue) 55%, transparent); box-shadow: 0 0 0 1px var(--c-glow-blue); } .price-badge { align-self: flex-start; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-cyan); background: var(--c-surface-2); border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; } .price-name { font-size: 1.25rem; font-weight: 700; } .price-amount { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; } .price-per { color: var(--c-text-dim); font-size: .95rem; } .price-desc { color: var(--c-text-dim); font-size: .95rem; margin: 8px 0 14px; } .price-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .price-list li { display: flex; gap: 8px; align-items: flex-start; color: var(--c-text); font-size: .95rem; } .price-list li::before { content: "✓"; color: var(--c-ok); font-weight: 800; } .price-card .btn { margin-top: auto; } .pricing-foot { text-align: center; margin-top: 24px; color: var(--c-text-faint); font-size: .9rem; } /* The add-on row: minmax 180px keeps all five on one line at full width (content ≈1100px → 5×180 + 4×20 gap = 980px). */ .pricing-grid.addons { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 20px; } /* Secondary to the two plan cards, and it keeps the longest translated names (CA "comandament", NL "Afstandsbedieningsmodule") inside a 180px column. */ .pricing-grid.addons .price-name { font-size: 1.12rem; } /* ---- align the rows ACROSS the cards ---- Card titles wrap to a different number of lines per language (CA "Mòdul comandament a distància" takes three, EN "Wall tablet" one), which staggered every price, caption and description down the row. Subgrid makes each card share the grid's row tracks, so name / price / caption / description / button line up whatever the wrapping — no per-language height to maintain. The card keeps its own 6px row-gap, which overrides the parent's 20px, so spacing inside a card is unchanged and 20px still separates wrapped bands. Row counts are exact and must stay in sync with UcPricing.razor: .plans = name, price, per, desc, feature list, CTA (6) .addons = name, price, per, desc, CTA (5) The inactive monthly/annual CTA is display:none, so it never occupies a row. Browsers without subgrid simply fall back to the previous ragged layout. */ @supports (grid-template-rows: subgrid) { /* grid-template-columns is required: without it the card's single implicit column is auto-sized and can grow past the card, clipping long text. */ .pricing-grid.plans > .price-card, .pricing-grid.addons > .price-card { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); } .pricing-grid.plans > .price-card { grid-row: span 6; } .pricing-grid.addons > .price-card { grid-row: span 5; } } /* "Recommended" sits outside the flow so the featured card has the same row count as the plain one; both reserve the space with padding instead. */ .pricing-grid.plans > .price-card { padding-top: 52px; } .pricing-grid.plans .price-badge { position: absolute; top: 22px; left: 26px; margin-bottom: 0; } /* Long compounds have to fit a 180px card: NL "Afstandsbedieningsmodule" is one unbreakable 24-character word, CA "Mòdul comandament a distància" is three lines. App.razor sets , so hyphens:auto breaks them at proper syllables; overflow-wrap is only the last-resort fallback that stops an overflow when no dictionary is available. */ .price-name { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* ---------- compatibility strip (UcCompatLogos) ---------- Protocol NAMES set in our own display face, never the owners' logos or brand type — see the note at the top of UcCompatLogos.razor before changing this. */ .compat { padding-top: 0; text-align: center; } .compat-eyebrow { color: var(--c-text-faint); margin-bottom: 18px; } .compat-row { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; } .compat-row li { font-family: var(--font-display); font-size: clamp(1.55rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: var(--c-text); } /* Separator lives on the item so it wraps with it and never dangles on a line end. */ .compat-row li + li::before { content: "·"; color: var(--c-text-faint); font-weight: 400; margin: 0 .55em; } .compat-note { max-width: 620px; margin: 20px auto 0; color: var(--c-text-faint); font-size: .8rem; line-height: 1.55; } /* small left-aligned footnote under a feature section (e.g. Remote Control) */ .section-foot { margin-top: 22px; color: var(--c-text-faint); font-size: .9rem; max-width: 760px; } /* ---------- monthly / annual billing switch (CSS-only, no JS) ---------- */ .bill-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .billing-toggle { display: inline-flex; gap: 4px; margin: 28px auto 0; padding: 5px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); justify-self: center; } .section .billing-toggle { display: flex; width: max-content; margin-left: auto; margin-right: auto; } .billing-toggle label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--c-text-dim); transition: background .2s, color .2s; } #bill-mo:checked ~ .billing-toggle label[for="bill-mo"], #bill-yr:checked ~ .billing-toggle label[for="bill-yr"] { background: var(--c-blue); color: #fff; } .save-badge { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-ok) 22%, transparent); color: #9af0c4; } #bill-mo:checked ~ .billing-toggle label[for="bill-mo"] .save-badge, #bill-yr:checked ~ .billing-toggle label[for="bill-yr"] .save-badge { background: rgba(255,255,255,.22); color: #fff; } /* default = monthly shown; annual hidden until its radio is checked */ .amt-yr, .per-yr, .cta-yr { display: none; } #bill-yr:checked ~ .pricing-grid .amt-mo, #bill-yr:checked ~ .pricing-grid .per-mo, #bill-yr:checked ~ .pricing-grid .cta-mo { display: none; } #bill-yr:checked ~ .pricing-grid .amt-yr, #bill-yr:checked ~ .pricing-grid .per-yr { display: inline; } #bill-yr:checked ~ .pricing-grid .cta-yr { display: inline-flex; } /* ---------- CTA band ---------- */ .cta-band { text-align: center; } .cta-band .btn { margin-top: 24px; } /* ---------- forms / panels ---------- */ .panel-page { max-width: 460px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 20px; } .panel-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 32px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-card); } .panel-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; } .panel-sub { color: var(--c-text-dim); margin-bottom: 22px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field label { font-size: .9rem; color: var(--c-text-dim); font-weight: 600; } .field input, .field select, .field textarea { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 12px; padding: 12px 14px; color: var(--c-text); font-size: 1rem; font-family: var(--font-body); width: 100%; } .field textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } /* native option list follows the OS, so force a dark, legible palette */ .field select option { background: var(--c-bg-raise); color: var(--c-text); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-blue); } .form-msg { border-radius: 12px; padding: 12px 14px; font-size: .92rem; margin: 4px 0 14px; } .form-msg.err { background: color-mix(in srgb, #f2565f 16%, transparent); color: #ff9aa0; border: 1px solid rgba(242,86,95,.4); } .form-msg.ok { background: color-mix(in srgb, var(--c-ok) 16%, transparent); color: #9af0c4; border: 1px solid rgba(69,214,143,.4); } .form-msg.warn { background: color-mix(in srgb, #f5a623 16%, transparent); color: #ffd28a; border: 1px solid rgba(245,166,35,.45); font-weight: 600; } .form-alt { text-align: center; color: var(--c-text-dim); font-size: .92rem; margin-top: 16px; } .form-alt a { color: var(--c-blue); font-weight: 600; } /* inline radio/checkbox rows (cancellation form) */ .field .choice { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--c-text); font-weight: 400; cursor: pointer; padding: 4px 0; } .field .choice input { width: auto; accent-color: var(--c-blue); margin: 0; } /* read-back summary the visitor can save/print (cancellation receipt) */ .cancel-summary { border: 1px solid var(--c-border); border-radius: 12px; padding: 4px 16px; margin: 14px 0; background: var(--c-surface); } .cancel-summary .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--c-border); font-size: .93rem; } .cancel-summary .row:last-child { border-bottom: none; } .cancel-summary .row span { color: var(--c-text-dim); white-space: nowrap; } .cancel-summary .row b { text-align: right; word-break: break-word; } /* payment iframe */ /* The gateway is a whole payment page: card fields, then the wallet buttons (Google Pay, and Apple Pay on an iPhone), then the payment details. At the panel's normal 460px it rendered as a narrow column with its own scrollbar and the wallet buttons fell below the fold, so the checkout widens its panel and the frame is tall enough to show the lot. Cross-origin content cannot be measured from here, so the height is deliberately generous: spare white space at the bottom is better than a second scrollbar over a payment form. */ .panel-page:has(.pay-frame) { max-width: 720px; } .pay-frame { width: 100%; height: 1150px; border: 0; border-radius: var(--radius); background: #fff; } @media (max-width: 640px) { /* Narrow screens stack every Redsys row, which needs noticeably more room. */ .pay-frame { height: 1320px; } } .pay-methods { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .pay-method { flex: 1; min-width: 130px; padding: 14px; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; text-align: center; font-weight: 600; } .pay-method.active { border-color: var(--c-blue); background: color-mix(in srgb, var(--c-blue) 18%, var(--c-surface)); } .pay-summary { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); } .pay-total { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; } .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- legal / discount ---------- */ .legal-page { max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 20px; } /* Obfuscated company name — assembled from two pseudo-element fragments so the name never exists as one indexable string in HTML, DOM or CSS. */ .co-name { font-weight: 700; color: var(--c-text); white-space: nowrap; } .co-name::before { content: "EB"; } .co-name::after { content: "OX3"; } .legal-notice { border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); padding: 18px 20px; margin: 18px 0 30px; font-size: .92rem; } .legal-notice p { margin: 0 0 10px; } .legal-notice p:last-child { margin-bottom: 0; } .legal-notice .ln-lang { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; color: var(--c-cyan); margin-right: 8px; } .legal-page h2 { color: var(--c-text); } .legal-meta { color: var(--c-text-faint); font-size: .88rem; margin-bottom: 26px; } .legal-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 8px; } .legal-page h2 { font-size: 1.3rem; margin: 28px 0 8px; } .legal-page p, .legal-page li { color: var(--c-text-dim); } .disc-code-box { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: .1em; text-align: center; background: var(--c-surface-2); border: 1px dashed var(--c-border-strong); border-radius: 14px; padding: 18px; margin: 22px 0; color: var(--c-cyan); } /* ---------- language dropdown ---------- */ .site-lang { position: relative; } .site-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text-dim); font-size: .88rem; font-weight: 600; } .site-lang > summary::-webkit-details-marker { display: none; } .site-lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #10151f; border: 1px solid var(--c-border); border-radius: 12px; padding: 6px; min-width: 150px; box-shadow: var(--shadow-card); z-index: 50; } .site-lang-item { display: block; padding: 8px 12px; border-radius: 8px; color: var(--c-text-dim); font-size: .92rem; } .site-lang-item:hover { background: var(--c-surface-2); color: var(--c-text); } .site-lang-item.active { color: var(--c-blue); font-weight: 700; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--c-border); padding: 32px clamp(16px, 4vw, 40px); } .footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--c-text-faint); font-size: .88rem; } .footer-links { display: flex; gap: 14px; flex-wrap: wrap; } .footer-links a { color: var(--c-text-dim); } .footer-links a:hover { color: var(--c-text); } /* ---------- scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0s); } [data-reveal].is-revealed { opacity: 1; transform: none; } html:not(.js-on) [data-reveal] { opacity: 1; transform: none; } /* ---------- responsive ---------- */ /* Grid/flex children default to min-width:auto, which lets long content force the track wider than a phone screen — the other horizontal-scroll trigger. */ .hero > *, .grid-3 > *, .grid-4 > *, .pricing-grid > * { min-width: 0; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; text-align: center; min-height: auto; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-visual { max-width: 420px; margin: 8px auto 0; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { /* mobile: collapse the nav behind a hamburger (CSS-only via #nav-toggle) */ .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; padding: 11px; cursor: pointer; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--c-text); border-radius: 2px; transition: transform .2s, opacity .2s; } .header-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px clamp(16px, 4vw, 40px) 20px; background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-card); } #nav-toggle:checked ~ .header-nav { display: flex; } .header-link { display: block; padding: 11px 4px; font-size: 1.05rem; } .header-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 10px; } .header-actions .btn { width: 100%; } .site-lang { align-self: stretch; margin: 4px 0; } .site-lang > summary { width: max-content; } /* in the hamburger panel the language list flows inline instead of an off-screen popover */ .site-lang-menu { position: static; right: auto; top: auto; min-width: 0; margin-top: 6px; padding: 4px 0 0; background: transparent; border: none; box-shadow: none; } .site-lang-item { padding: 10px 8px; font-size: 1rem; } #nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } #nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; } } /* ============================================================ MOTION — "light follows you". One orchestrated load moment (the hero lights up like a house at dusk) plus one signature interaction (a cursor spotlight over cards). All colours come from theme variables so every theme keeps working. ============================================================ */ /* page-load orchestration: hero copy rises in, the home lights up */ @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes lights-on { 0% { filter: brightness(.22) saturate(.55); } 65% { filter: brightness(1.07) saturate(1.06); } 100% { filter: brightness(1) saturate(1); } } @keyframes glow-bloom { from { opacity: 0; } to { opacity: 1; } } .hero-eyebrow, .hero-title, .hero-sub, .hero-actions, .hero-note { animation: rise-in .7s var(--ease-out) backwards; } .hero-title { animation-delay: .08s; } .hero-sub { animation-delay: .16s; } .hero-actions { animation-delay: .24s; } .hero-note { animation-delay: .34s; } .hero-img { animation: lights-on 1.6s ease-out .35s backwards; } .hero-img-glow { animation: glow-bloom 1.9s ease-out .55s backwards; } /* Slide-in elements are hidden from the FIRST paint (browsers paint progressively before end-of-body scripts run — JS-only hiding flashes the content once before the animation). The head sets .js-on pre-paint; without JS the content just shows. The animator restores opacity inline when done. */ html.js-on [data-slide] { opacity: 0; } /* Embedded in the mobile app: belt and braces next to the two guards above (no .js-on in embed mode, site.js bails out) — nothing may ever be hidden waiting for an animation that will not run inside the app's frame. */ html.embed [data-slide], html.embed [data-reveal] { opacity: 1 !important; transform: none !important; } /* signature: a pool of light tracks the pointer across cards */ .card, .price-card { position: relative; overflow: hidden; } .card::after, .price-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 42%), var(--c-glow-blue), transparent 68%); opacity: 0; transition: opacity .35s; } .card:hover::after, .price-card:hover::after { opacity: .5; } /* the recommended plan breathes softly, like the lit room of the house */ @keyframes featured-breathe { 0%, 100% { box-shadow: 0 0 0 1px var(--c-glow-blue), 0 0 24px var(--c-glow-blue); } 50% { box-shadow: 0 0 0 1px var(--c-glow-cyan), 0 0 46px var(--c-glow-blue); } } .price-card.featured { animation: featured-breathe 4.5s ease-in-out infinite; } /* primary buttons: a light sweep crosses on hover */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 44%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-18deg); transition: left .55s ease; } .btn-primary:hover::after { left: 125%; } /* Reduced motion only stills the ambient background — content animations always play, matching the REYSTI model app (Windows' "Show animations" off / RDP sessions report reduced motion and would otherwise hide them entirely). */ @media (prefers-reduced-motion: reduce) { .bg-grid, .bg-aurora { animation: none; } } /* ---------- theme picker (dev/pre-launch) ---------- */ .theme-picker { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; gap: 6px; padding: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-bg) 70%, transparent); border: 1px solid var(--c-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-card); } .theme-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: block; } .theme-dot.active { border-color: #fff; } .theme-dot.obsidian { background: linear-gradient(135deg, #8b3dff, #00e5ff); } .theme-dot.midnight { background: linear-gradient(135deg, #5b9dff, #40c9ff); } .theme-dot.aurora { background: linear-gradient(135deg, #2dd4bf, #4ade80); } .theme-dot.sunset { background: linear-gradient(135deg, #ffb454, #ff5c8a); } .theme-dot.ember { background: linear-gradient(135deg, #ff8c1a, #ffc857); } @media (max-width: 560px) { .theme-picker { bottom: 10px; right: 10px; } } /* ---------- account page (PgAccount) ---------- */ .panel-section { margin: 26px 0 10px; font-size: 1.02rem; font-weight: 700; } .acct-grid { display: flex; flex-direction: column; gap: 6px; } .acct-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 10px; font-size: 0.92rem; } .acct-row span { opacity: 0.65; } .acct-links { display: flex; flex-direction: column; gap: 8px; } /* ---------- interactive plan picker (signed-in surfaces: /account, /subscribe) ---------- Same look as the marketing pricing switch, but driven by Blazor rather than the CSS-only radios (those only work inside the statically rendered page). */ .plan-toggle { display: flex; width: max-content; gap: 4px; margin: 22px auto 0; padding: 5px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); } .plan-toggle button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; font-family: inherit; font-weight: 600; font-size: .95rem; color: var(--c-text-dim); transition: background .2s, color .2s; } .plan-toggle button.on { background: var(--c-blue); color: #fff; } .plan-toggle button.on .save-badge { background: rgba(255,255,255,.22); color: #fff; } /* Inside a panel the cards must stay compact: the checkout column is narrow. */ .panel-card .pricing-grid { margin-top: 18px; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .panel-card .price-card { padding: 20px; } .panel-card .price-amount { font-size: 1.6rem; } /* The plan the customer is already on: shown as a flat marker, never clickable. */ .btn.is-current { cursor: default; opacity: .7; border-style: dashed; pointer-events: none; } /* the two-way switches wrap on a narrow panel instead of overflowing it */ .plan-toggle { max-width: 100%; flex-wrap: wrap; justify-content: center; } .plan-toggle.acct-choice { margin-top: 16px; } /* "/ month" suffix next to a payment total */ .pay-per { font-size: .9rem; font-weight: 400; opacity: .6; } /* ---------- basket ---------- */ .cart-lines { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; } .cart-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface-2); font-size: .95rem; } .cart-line .cart-name { flex: 1; min-width: 0; font-weight: 600; } .cart-line .cart-per { display: block; font-weight: 400; font-size: .8rem; color: var(--c-text-dim); } .cart-line .cart-amount { font-weight: 700; white-space: nowrap; } .cart-qty { display: inline-flex; align-items: center; gap: 4px; } .cart-qty button { width: 26px; height: 26px; line-height: 1; cursor: pointer; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); color: var(--c-text); font-family: inherit; font-size: 1rem; } .cart-qty span { min-width: 20px; text-align: center; font-weight: 700; } .cart-remove { border: 0; background: transparent; cursor: pointer; color: var(--c-text-dim); font-size: 1.3rem; line-height: 1; padding: 0 2px; } .cart-remove:hover { color: var(--c-text); } /* "add another plan or module" disclosure on the checkout */ .cart-more { margin: 6px 0 18px; } .cart-more > summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--c-blue); } /* basket line in read-only mode (the payment step) */ .cart-qty-flat { color: var(--c-text-dim); font-size: .9rem; } /* the checkout waits here while the browser stores are read back */ .panel-loading { display: flex; justify-content: center; padding: 40px 0; }