/* ============================================================================ Three Sixty Tools — main.css (the ONLY stylesheet) Ultra-modern dark SaaS design system for professional AV / show-control software. Dark is the default theme; light mode via . Sections: 01. Design tokens (dark + light) 02. Reset & base elements 03. Scrollbars, selection, focus 04. Typography 05. Buttons 06. Cards 07. Forms 08. Feedback (alerts, badges, status dots, empty states) 09. Tables 10. Site nav 11. Dropdowns 12. Hero 13. Marketing components 14. Dashboard / account / admin 15. Cookie consent 16. Footer 17. Utilities 18. Animation (.reveal, reduced motion) 19. Print ========================================================================== */ /* ============================================================================ 01. DESIGN TOKENS ========================================================================== */ :root { color-scheme: dark; /* Surfaces */ --bg-0: #070a13; --bg-1: #0c1120; --bg-2: #121931; --bg-3: #1a2342; /* Text */ --fg-0: #eef1f8; --fg-1: #9aa5bd; --fg-2: #5f6a85; /* Brand */ --accent: #2f7df6; --accent-2: #00d4ff; --grad: linear-gradient(135deg, var(--accent), var(--accent-2)); --accent-soft: rgba(47, 125, 246, .12); --accent-ring: rgba(47, 125, 246, .20); /* Status */ --good: #2ecc71; --warn: #f1c40f; --bad: #e74c3c; /* Structure */ --border: rgba(148, 163, 205, .14); --border-strong: rgba(148, 163, 205, .28); --radius: 4px; --radius-lg: 4px; /* Glass / translucency */ --glass-bg: rgba(255, 255, 255, .045); --glass-border: rgba(255, 255, 255, .08); --nav-bg: rgba(7, 10, 19, .86); --panel-trans: rgba(12, 17, 32, .88); --overlay: rgba(4, 7, 14, .62); /* Shadows & glows */ --shadow-1: 0 2px 10px rgba(2, 6, 16, .35); --shadow-2: 0 18px 48px -16px rgba(2, 6, 16, .6); --glow-accent: 0 10px 32px -8px rgba(47, 125, 246, .5); --glow-cyan: 0 18px 52px -18px rgba(0, 212, 255, .28); /* Type */ --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; } [data-theme="light"] { color-scheme: light; --bg-0: #f7f9fd; --bg-1: #ffffff; --bg-2: #eef2f8; --bg-3: #e2e8f4; --fg-0: #0e1626; --fg-1: #4a5670; --fg-2: #8b96ad; --accent-soft: rgba(47, 125, 246, .10); --accent-ring: rgba(47, 125, 246, .18); --border: rgba(15, 23, 42, .10); --border-strong: rgba(15, 23, 42, .20); --glass-bg: rgba(255, 255, 255, .66); --glass-border: rgba(15, 23, 42, .08); --nav-bg: rgba(247, 249, 253, .92); --panel-trans: rgba(255, 255, 255, .92); --overlay: rgba(15, 23, 42, .42); --shadow-1: 0 2px 10px rgba(15, 23, 42, .06); --shadow-2: 0 18px 48px -16px rgba(15, 23, 42, .14); --glow-accent: 0 10px 28px -8px rgba(47, 125, 246, .35); --glow-cyan: 0 18px 44px -18px rgba(0, 140, 255, .18); } /* ============================================================================ 02. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; /* always reserve the vertical scrollbar gutter so centered content never shifts between short and scrolling pages */ } html, body { /* `clip` (not `hidden`) still contains the hero glow bleed but does NOT create a scroll container — which is what was breaking the sticky header. */ overflow-x: clip; } body { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg-0); color: var(--fg-0); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { display: block; flex: 1 0 auto; } img, svg, video, canvas { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; } a { color: var(--accent); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--accent-2); } p { line-height: 1.65; } ul, ol { padding-left: 1.3em; } hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; } strong, b { font-weight: 700; color: var(--fg-0); } small { font-size: 13px; } blockquote { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } fieldset { border: none; padding: 0; } [hidden] { display: none !important; } /* ============================================================================ 03. SCROLLBARS, SELECTION, FOCUS ========================================================================== */ * { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); border: 2px solid transparent; background-clip: padding-box; } ::selection { background: var(--accent); color: #fff; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================================ 04. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; color: var(--fg-0); } .h-hero { font-size: clamp(2.4rem, 4.6vw + .6rem, 4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--fg-0); } .h1 { font-size: clamp(1.9rem, 2.6vw + .5rem, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--fg-0); } .h2 { font-size: clamp(1.45rem, 1.4vw + .7rem, 1.8rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--fg-0); } .h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--fg-0); } .lead { font-size: 1.16rem; line-height: 1.65; color: var(--fg-1); } .eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--accent); margin-bottom: 14px; } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ============================================================================ 05. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--fg-0); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .005em; white-space: nowrap; text-decoration: none; user-select: none; cursor: pointer; transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease, color .18s ease, filter .18s ease, opacity .18s ease; } .btn:hover { color: var(--fg-0); } .btn:active { transform: translateY(0) scale(.985); } .btn:disabled, .btn[disabled], .btn.disabled { opacity: .55; pointer-events: none; } /* Primary — brand gradient with a restrained glow */ .btn-primary { background-image: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 2px 12px -4px rgba(47, 125, 246, .45); } .btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--glow-accent); filter: brightness(1.06); } /* Outline — quiet accent border */ .btn-outline { border-color: rgba(47, 125, 246, .45); color: var(--fg-0); background: transparent; } .btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); } /* Ghost — text-level button */ .btn-ghost { color: var(--fg-1); background: transparent; } .btn-ghost:hover { color: var(--fg-0); background: var(--bg-2); } /* Danger */ .btn-danger { background: var(--bad); border-color: transparent; color: #fff; } .btn-danger:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 28px -8px rgba(231, 76, 60, .45); } /* Sizes */ .btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 4px; } .btn-lg { padding: 13px 26px; font-size: 15.5px; border-radius: 4px; } .btn-block { display: flex; width: 100%; } /* Theme toggle (in .nav-cta) — moon in dark, sun in light */ .theme-btn { font-size: 15px; line-height: 1; padding-left: 10px; padding-right: 10px; } .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-light { display: inline; } .caret { font-size: 10px; opacity: .65; } /* ============================================================================ 06. CARDS ========================================================================== */ .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); } .card-pad { padding: 28px; } .card-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--fg-0); margin-bottom: 8px; } /* Glassmorphism panel */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } /* Lift + accent glow on hover */ .card-hover { transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease; } .card-hover:hover { transform: translateY(-4px); border-color: rgba(47, 125, 246, .45); box-shadow: var(--glow-cyan), var(--shadow-1); } @media (max-width: 640px) { .card-pad { padding: 20px; } } /* ============================================================================ 07. FORMS ========================================================================== */ .form-group { margin-bottom: 18px; } .label { display: block; font-size: 13px; font-weight: 600; color: var(--fg-1); margin-bottom: 7px; } .required::after { content: " *"; color: var(--bad); } .input, .select, .textarea { display: block; width: 100%; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg-0); font-size: 14.5px; line-height: 1.5; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .input::placeholder, .textarea::placeholder { color: var(--fg-2); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; } /* Custom chevron for selects */ .select { appearance: none; -webkit-appearance: none; 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 d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa5bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } [data-theme="light"] .select { 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 d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .textarea { min-height: 120px; resize: vertical; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } } .form-hint { font-size: 12.5px; color: var(--fg-2); margin-top: 6px; line-height: 1.5; } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--fg-1); line-height: 1.55; margin: 10px 0; cursor: pointer; } .checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); cursor: pointer; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } .input-error, .input-error:focus { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(231, 76, 60, .16); } /* ============================================================================ 08. FEEDBACK — alerts, badges, status dots, empty states ========================================================================== */ .alert { padding: 12px 16px; border: 1px solid transparent; border-left-width: 3px; border-radius: var(--radius); font-size: 14px; line-height: 1.55; transition: opacity .4s ease, transform .4s ease; } .alert a { color: inherit; text-decoration: underline; } .alert-success { background: rgba(46, 204, 113, .10); border-color: rgba(46, 204, 113, .28); border-left-color: var(--good); color: #8ce0ae; } .alert-error { background: rgba(231, 76, 60, .10); border-color: rgba(231, 76, 60, .30); border-left-color: var(--bad); color: #f3a195; } .alert-warning { background: rgba(241, 196, 15, .10); border-color: rgba(241, 196, 15, .28); border-left-color: var(--warn); color: #f3d667; } .alert-info { background: rgba(47, 125, 246, .10); border-color: rgba(47, 125, 246, .30); border-left-color: var(--accent); color: #9cc1fb; } [data-theme="light"] .alert-success { color: #11713d; } [data-theme="light"] .alert-error { color: #ad2c1d; } [data-theme="light"] .alert-warning { color: #876a02; } [data-theme="light"] .alert-info { color: #1a56c4; } /* Badges — small status pills */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid transparent; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.6; white-space: nowrap; vertical-align: middle; } .badge-accent { background: rgba(47, 125, 246, .14); border-color: rgba(47, 125, 246, .30); color: #82b2fa; } .badge-good { background: rgba(46, 204, 113, .13); border-color: rgba(46, 204, 113, .30); color: #6fdfa2; } .badge-warn { background: rgba(241, 196, 15, .13); border-color: rgba(241, 196, 15, .30); color: #f0d05e; } .badge-bad { background: rgba(231, 76, 60, .14); border-color: rgba(231, 76, 60, .32); color: #f29c8e; } .badge-muted { background: var(--bg-2); border-color: var(--border); color: var(--fg-1); } [data-theme="light"] .badge-accent { color: #1d5fd0; } [data-theme="light"] .badge-good { color: #137a42; } [data-theme="light"] .badge-warn { color: #8a6c03; } [data-theme="light"] .badge-bad { color: #b93527; } /* Status dots */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); vertical-align: middle; } .status-dot.good { background: var(--good); box-shadow: 0 0 0 3px rgba(46, 204, 113, .16); } .status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(241, 196, 15, .16); } .status-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(231, 76, 60, .16); } /* Empty state for lists with nothing in them */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 52px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--fg-1); font-size: 14.5px; line-height: 1.6; } .empty-state .h3 { color: var(--fg-0); } /* ============================================================================ 09. TABLES ========================================================================== */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); padding: 12px 16px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--fg-0); vertical-align: middle; } .table tbody tr { transition: background-color .15s ease; } .table tbody tr:hover { background: var(--bg-2); } .table tbody tr:last-child td { border-bottom: none; } .table-actions { text-align: right; white-space: nowrap; } .table-actions .btn { vertical-align: middle; } /* Comparison table — sticky first column, centered checks */ .compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-1); text-align: left; min-width: 180px; border-right: 1px solid var(--border); } .compare-table th, .compare-table td { text-align: center; } .compare-table tbody tr:hover td:first-child { background: var(--bg-2); } /* ============================================================================ 10. SITE NAV — sticky glass header ========================================================================== */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--border-strong); box-shadow: var(--shadow-1); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; } .nav-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-0); font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } .nav-logo:hover { color: var(--fg-0); } .nav-logo img { border-radius: 4px; flex: 0 0 auto; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-links a { position: relative; display: inline-block; padding: 8px 13px; color: var(--fg-1); font-size: 14px; font-weight: 500; border-radius: 4px; transition: color .18s ease; } .nav-links a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left center; transition: transform .22s ease; } .nav-links a:hover { color: var(--fg-0); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { transform: scaleX(1); } .nav-cta { display: flex; align-items: center; gap: 10px; } /* Burger — hidden on desktop */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; align-items: center; } .nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--fg-0); transition: transform .25s ease, opacity .2s ease; } header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } header.nav-open .nav-burger span:nth-child(2) { opacity: 0; } header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Hidden on desktop — lives inside the burger panel on mobile. */ .nav-mobile-extra { display: none; } /* Mobile nav panel */ @media (max-width: 960px) { .nav-burger { display: inline-flex; } /* Everything except the burger moves into the panel on mobile. */ .nav-cta .lang-switch, .nav-cta .theme-btn, .nav-cta > .btn, .nav-cta .dropdown { display: none; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px; /* Solid: the full-menu panel sits over hero text — translucency ghosts. */ background: var(--bg-1); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-2); max-height: calc(100vh - 70px); overflow-y: auto; } header.nav-open .nav-links { display: flex; animation: nav-drop .22s ease both; } .nav-links a { padding: 12px 14px; font-size: 15px; } .nav-links a::after { display: none; } .nav-links a:hover { background: var(--bg-2); } .nav-links a.active { background: var(--accent-soft); } .nav-mobile-extra { display: flex; flex-direction: column; gap: 8px; } .nav-mobile-divider { height: 1px; background: var(--border); margin: 8px 0 6px; } .nav-mobile-extra a.btn { display: flex; width: 100%; justify-content: center; padding: 12px 14px; font-size: 15px; border: 1px solid var(--border); } .nav-mobile-extra a.btn-primary { border: 0; } .nav-mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } .nav-mobile-row .theme-btn { display: inline-flex; } } @keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================ 11. DROPDOWNS ========================================================================== */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 210px; padding: 6px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu a { display: block; padding: 9px 12px; border-radius: 4px; color: var(--fg-1); font-size: 14px; font-weight: 500; white-space: nowrap; } .dropdown-menu a:hover { background: var(--bg-2); color: var(--fg-0); } /* ============================================================================ 12. HERO ========================================================================== */ .hero { position: relative; isolation: isolate; padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 7vw, 88px); } /* Ambient radial glows behind the hero — pointer-transparent, clipped by the body's overflow-x so the page never scrolls sideways. */ .hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(120px); opacity: .55; } [data-theme="light"] .hero-glow { opacity: .32; } /* Optional admin-set hero background photo, behind the glow, with a scrim that keeps the headline readable and fades cleanly into the page below. */ .hero-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; animation: hero-fade .9s ease both; /* fade the photo in on load (preloaded, so no flash) */ } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } .hero-bg::after { content: ""; position: absolute; inset: 0; /* --hero-overlay (0–1, admin-set) controls how dark the scrim is. */ background: linear-gradient(180deg, rgba(7, 10, 19, calc(var(--hero-overlay, .76) * .86)) 0%, rgba(7, 10, 19, var(--hero-overlay, .76)) 55%, var(--bg-0) 100%); } [data-theme="light"] .hero-bg::after { background: linear-gradient(180deg, rgba(247, 249, 253, calc(var(--hero-overlay, .76) * .9)) 0%, rgba(247, 249, 253, var(--hero-overlay, .76)) 55%, var(--bg-0) 100%); } /* With a photo present, soften the ambient glow so it doesn't muddy the image. */ .hero.has-bg .hero-glow { opacity: .22; } /* Multi-image hero slideshow (home + admin sign-in). Layers stack and cross-fade via opacity; a single scrim sits over all of them (home only). */ .hero-bgs { position: absolute; inset: 0; z-index: -1; animation: hero-fade .9s ease both; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1s ease; } .hero-slide.is-active { opacity: 1; } .hero-bgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 10, 19, calc(var(--hero-overlay, .76) * .86)) 0%, rgba(7, 10, 19, var(--hero-overlay, .76)) 55%, var(--bg-0) 100%); } [data-theme="light"] .hero-bgs::after { background: linear-gradient(180deg, rgba(247, 249, 253, calc(var(--hero-overlay, .76) * .9)) 0%, rgba(247, 249, 253, var(--hero-overlay, .76)) 55%, var(--bg-0) 100%); } /* Admin Settings → hero image gallery (thumbnails with a remove button). */ .hero-gallery { display: flex; flex-wrap: wrap; gap: 10px; } .hero-thumb { position: relative; width: 150px; height: 84px; border-radius: var(--radius); border: 1px solid var(--border); background-size: cover; background-position: center; overflow: hidden; } .hero-thumb form { margin: 0; } .hero-thumb-del { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .15s ease; } .hero-thumb-del:hover { background: var(--bad); } /* Admin live preview thumbnail for the hero overlay slider. */ .hero-preview { position: relative; width: 100%; max-width: 420px; aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-2) center / cover no-repeat; display: flex; align-items: flex-end; } .hero-preview-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 10, 19, .55) 0%, rgba(7, 10, 19, 1) 100%); /* opacity set live by the slider (0–1) */ } .hero-preview-text { position: relative; z-index: 1; padding: 14px 16px; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } .hero-preview-sub { font-weight: 500; font-size: 12px; opacity: .85; margin-top: 4px; } .hero-glow::before, .hero-glow::after { content: ""; position: absolute; border-radius: 50%; } .hero-glow::before { top: -18%; left: 6%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(47, 125, 246, .55) 0%, transparent 65%); animation: glow-drift 16s ease-in-out infinite alternate; } .hero-glow::after { top: 4%; right: 4%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(0, 212, 255, .42) 0%, transparent 65%); animation: glow-drift 21s ease-in-out infinite alternate-reverse; } @keyframes glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(46px, -28px, 0) scale(1.14); } } .hero-title { font-size: clamp(2.4rem, 4.6vw + .6rem, 4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--fg-0); } .hero-sub { max-width: 640px; margin-top: 18px; font-size: 1.18rem; line-height: 1.65; color: var(--fg-1); } .text-center .hero-sub { margin-left: auto; margin-right: auto; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .text-center .hero-cta { justify-content: center; } /* ============================================================================ 13. MARKETING COMPONENTS ========================================================================== */ /* --- Feature cards ------------------------------------------------------- */ .feature-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; height: 100%; } .feature-card .card-title { margin-bottom: 6px; } .feature-card p { color: var(--fg-1); font-size: 14.5px; } .feature-icon, .feature-card .icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; font-size: 20px; line-height: 1; border-radius: 4px; background: linear-gradient(135deg, rgba(47, 125, 246, .20), rgba(0, 212, 255, .10)); border: 1px solid rgba(47, 125, 246, .28); color: var(--accent-2); } /* --- Product cards ------------------------------------------------------- */ .product-card { position: relative; /* anchor the FREE sticker */ display: flex; flex-direction: column; height: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; } /* "FREE" corner sticker on free products (products listing + home cards). */ .free-badge { position: absolute; top: 10px; right: 10px; width: 100px; height: 100px; z-index: 2; pointer-events: none; filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .28)); } @media (max-width: 480px) { .free-badge { width: 82px; height: 82px; top: 8px; right: 8px; } } .product-card > :last-child { margin-top: auto; /* keeps action rows aligned in equal-height grids */ } /* Secondary "Download Trial" action sits on its own row beneath the primary buttons. Always rendered (an invisible placeholder when a product has no trial) so the primary action buttons line up across every card in the grid. */ .prod-trial-row { margin-top: 8px; } .product-icon { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 4px; overflow: hidden; /* Transparent: icons (incl. transparent PNGs) show clean with no box behind them. Seeded SVG icons carry their own background, so they still look like tiles. */ } .product-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .product-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .os-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-1); background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; } /* Checkmark feature lists inside product & price cards */ .product-card ul, .price-card ul { list-style: none; margin: 0 0 18px; padding: 0; } .product-card ul li, .price-card ul li { position: relative; padding: 4px 0 4px 24px; color: var(--fg-1); font-size: 14px; line-height: 1.55; } .product-card ul li::before, .price-card ul li::before { content: "✓"; position: absolute; left: 0; top: 4px; color: var(--accent-2); font-weight: 700; } /* --- Pricing ------------------------------------------------------------- */ .price-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease; } .price-card > :last-child { margin-top: auto; } .price-card.featured { border-color: rgba(47, 125, 246, .55); box-shadow: var(--glow-cyan), 0 0 0 1px rgba(47, 125, 246, .25); transform: scale(1.02); z-index: 1; } .price-amount { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--fg-0); } @media (max-width: 960px) { .price-card.featured { transform: none; } } /* --- Testimonials -------------------------------------------------------- */ .testimonial-card { display: flex; flex-direction: column; height: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; } .testimonial-card::before { content: "\201C"; font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; line-height: .6; color: var(--accent); opacity: .55; margin-bottom: 14px; } .testimonial-card p { color: var(--fg-1); font-size: 14.5px; } /* --- Logo row ------------------------------------------------------------ */ .logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; } .logo-row > * { color: var(--fg-1); font-weight: 600; font-size: 15px; letter-spacing: .02em; opacity: .7; transition: opacity .2s ease; white-space: nowrap; } .logo-row > *:hover { opacity: 1; } /* --- Numbered steps ------------------------------------------------------ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; counter-reset: step; } .step { position: relative; } .step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 6px 18px -4px rgba(47, 125, 246, .45); } .step .card-title { margin-bottom: 4px; } .step p { color: var(--fg-1); font-size: 14.5px; } /* --- FAQ (
) ------------------------------------ */ .faq-item { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; transition: border-color .2s ease; } .faq-item[open] { border-color: var(--border-strong); } .faq-item summary { position: relative; padding: 16px 48px 16px 18px; font-weight: 600; font-size: 14.5px; color: var(--fg-0); cursor: pointer; list-style: none; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--fg-2); transition: transform .25s ease, color .2s ease; } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--accent); } .faq-item > *:not(summary) { padding: 0 18px 6px; margin: 0; color: var(--fg-1); font-size: 14.5px; line-height: 1.65; } .faq-item > *:not(summary):last-child { padding-bottom: 18px; } /* --- Timeline (changelog / roadmap) --------------------------------------- */ .timeline { position: relative; margin: 0; padding-left: 28px; border-left: 2px solid var(--border); list-style: none; } .timeline-item { position: relative; padding-bottom: 30px; } .timeline-item:last-child { padding-bottom: 4px; } .timeline-item::before { content: ""; position: absolute; left: -35px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--accent-soft); } .timeline-date { display: block; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); margin-bottom: 4px; } /* --- Search / filter bar -------------------------------------------------- */ .search-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .search-bar .input { flex: 1 1 240px; width: auto; } .search-bar .select { flex: 0 1 200px; width: auto; } /* --- Tags ----------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--fg-1); background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } a.tag:hover { color: var(--accent); border-color: rgba(47, 125, 246, .45); background: var(--accent-soft); } /* --- Tabs ----------------------------------------------------------------- */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; } .tab { position: relative; flex: 0 0 auto; padding: 11px 16px; background: none; border: none; color: var(--fg-1); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .18s ease; } .tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transition: transform .22s ease; } .tab:hover { color: var(--fg-0); } .tab.active { color: var(--fg-0); } .tab.active::after { transform: scaleX(1); } .tab-panel { padding-top: 22px; } /* --- Newsletter box ------------------------------------------------------- */ .newsletter-box form { width: 100%; } .newsletter-box .input { flex: 1 1 auto; min-width: 0; } .newsletter-box .btn { flex: 0 0 auto; } /* ============================================================================ 14. DASHBOARD / ACCOUNT / ADMIN ========================================================================== */ .dash-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .dash-main { min-width: 0; } /* Sidebar */ .sidebar { position: sticky; top: 88px; /* below the 64px sticky nav */ background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; } body.admin .sidebar { top: 24px; /* admin has no marketing nav */ } .sidebar-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 12px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fg-0); overflow-wrap: anywhere; } .sidebar-title > .text-small { line-height: 1.35; } .sidebar-link { display: block; padding: 9px 12px; margin-bottom: 2px; border-radius: 4px; color: var(--fg-1); font-size: 14px; font-weight: 500; transition: background-color .16s ease, color .16s ease; } .sidebar-link:hover { background: var(--bg-2); color: var(--fg-0); } .sidebar-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar-sep { border: none; border-top: 1px solid var(--border); margin: 10px 0; } @media (max-width: 960px) { .dash-layout { grid-template-columns: 1fr; gap: 20px; } .sidebar { position: static; } } /* Stat cards */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } } .stat-card { position: relative; overflow: hidden; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: .55; } .stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--fg-0); } .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-1); margin-top: 4px; } /* Page head — title + actions row */ .page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; } .page-head .h1, .page-head .h2, .page-head .h3 { margin: 0; } /* Definition list — key / value pairs */ .kv { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 10px 18px; margin: 0; } .kv dt { font-size: 13px; font-weight: 600; color: var(--fg-2); padding-top: 1px; } .kv dd { margin: 0; font-size: 14.5px; color: var(--fg-0); overflow-wrap: anywhere; } @media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 10px; } } /* License key chip — monospace, copyable */ .license-key { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 14px; letter-spacing: 1px; color: var(--fg-0); white-space: nowrap; user-select: all; } /* Support ticket messages */ .ticket-msg { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; } .ticket-msg.from-admin { border-left: 3px solid var(--accent); background: rgba(47, 125, 246, .07); } [data-theme="light"] .ticket-msg.from-admin { background: rgba(47, 125, 246, .05); } /* Mono code block */ .code { display: block; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--fg-0); white-space: pre; overflow-x: auto; } /* Inline code fallback */ code { font-family: var(--mono); font-size: .92em; } /* Pagination */ .pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .pagination a, .pagination span, .pagination strong { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-1); color: var(--fg-1); font-size: 13.5px; font-weight: 500; transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .pagination a:hover { border-color: rgba(47, 125, 246, .45); color: var(--fg-0); } .pagination .current, .pagination .active, .pagination strong { background: var(--accent-soft); border-color: rgba(47, 125, 246, .45); color: var(--accent); font-weight: 600; } /* Prev / Next navigation buttons */ .pagination .page-prevnext { gap: 4px; font-weight: 600; color: var(--fg-0); } .pagination .page-prevnext.is-disabled { opacity: .4; cursor: default; } /* Ellipsis gap — not a button */ .pagination .ellipsis { min-width: auto; padding: 0 4px; border-color: transparent; background: transparent; color: var(--fg-2); } /* Breadcrumbs */ .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--fg-2); margin-bottom: 16px; } .breadcrumbs a { color: var(--fg-1); } .breadcrumbs a:hover { color: var(--fg-0); } .breadcrumbs > * + *::before { content: "›"; margin-right: 8px; color: var(--fg-2); } /* Admin shell */ body.admin { background: var(--bg-0); } .admin-wrap { width: 100%; max-width: 1500px; margin: 0 auto; padding: 24px; flex: 1 0 auto; } @media (max-width: 640px) { .admin-wrap { padding: 16px; } } /* ============================================================================ 15. COOKIE CONSENT ========================================================================== */ .cookie-banner { position: fixed; bottom: 20px; left: 20px; z-index: 1200; max-width: 380px; padding: 18px 20px; background: var(--panel-trans); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); animation: cookie-in .45s ease both; } .cookie-banner p { color: var(--fg-1); } .cookie-banner a { color: var(--accent); } @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; } } .cookie-overlay { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cookie-modal { width: 100%; max-width: 460px; box-shadow: var(--shadow-2); animation: cookie-in .3s ease both; } .cookie-modal .checkbox-row { margin: 14px 0; } /* ============================================================================ 16. FOOTER ========================================================================== */ .footer { flex-shrink: 0; background: var(--bg-1); border-top: 1px solid var(--border); padding: 56px 0 24px; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.6fr; gap: 32px; } .footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-1); margin-bottom: 14px; } .footer-col a { display: block; padding: 4px 0; color: var(--fg-1); font-size: 14px; transition: color .18s ease; } .footer-col a:hover { color: var(--fg-0); } .footer-col p a, .footer-bottom a { display: inline; padding: 0; color: var(--accent); } .footer-col p a:hover, .footer-bottom a:hover { color: var(--accent-2); } .footer .nav-logo { display: inline-flex; padding: 0; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-2); } @media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================================ 17. UTILITIES ========================================================================== */ /* Containers & sections */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .container-narrow { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: 24px; } @media (max-width: 640px) { .container, .container-narrow { padding-inline: 18px; } } .section { padding-block: clamp(56px, 8vw, 88px); } .section-sm { padding-block: clamp(32px, 5vw, 48px); } /* Grid */ .grid { display: grid; gap: 24px; } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } } /* Flex */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; } /* Spacing — 4 / 8 / 16 / 24 / 32 / 48 */ .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 32px; } .mt-6 { margin-top: 48px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 32px; } .mb-6 { margin-bottom: 48px; } /* Text */ .text-center { text-align: center; } .text-muted { color: var(--fg-1); } .text-faint { color: var(--fg-2); } .text-small { font-size: 13px; } /* Misc */ .hidden { display: none !important; } .w-full { width: 100%; } /* ============================================================================ 18. ANIMATION ========================================================================== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; transition: none; } .hero-glow::before, .hero-glow::after { animation: none; } /* Exception: the hero slideshow is an explicit, gentle opacity cross-fade the site owner configured — keep it fading (not cutting) even when motion is reduced. Overrides the global `transition-duration: .01ms !important` above. */ .hero-slide { transition-duration: 1s !important; } } /* ============================================================================ 19. PRINT — used by the invoice page ========================================================================== */ @media print { @page { margin: 14mm; } html, body { background: #fff !important; color: #000 !important; overflow: visible; } .nav, .footer, .sidebar, .sidebar-sep, .cookie-banner, .cookie-overlay, .nav-burger, .pagination, .breadcrumbs, .btn, button { display: none !important; } main { display: block; } .dash-layout { display: block; } .hero-glow { display: none !important; } a { color: #000 !important; text-decoration: underline; } .card, .table-wrap, .stat-card, .ticket-msg { background: #fff !important; border-color: #999 !important; box-shadow: none !important; break-inside: avoid; } .card::before, .stat-card::before { display: none !important; } .h-hero, .h1, .h2, .h3, .card-title, .stat-value, .price-amount, .kv dd, .table td, .license-key, .code { color: #000 !important; } .gradient-text { background: none; -webkit-text-fill-color: #000; color: #000; } .text-muted, .text-faint, .kv dt, .table th, .stat-label, .timeline-date { color: #444 !important; } .table td, .table th { border-color: #ccc !important; } .badge { border: 1px solid #999 !important; background: none !important; color: #000 !important; } .license-key, .code { background: #f3f3f3 !important; border-color: #bbb !important; } .alert { border: 1px solid #999 !important; background: none !important; color: #000 !important; } } /* ============================================================ utilities (added in review) */ .text-right { text-align: right; } .text-bad { color: var(--bad); } .justify-center{ justify-content: center; } .flex-col { flex-direction: column; } .mb-0 { margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } /* inline field-level validation message under an input */ .form-error { color: var(--bad); font-size: 12.5px; margin: 6px 0 0; } /* ============================================================ prose — rich admin-authored HTML (legal pages, product overview) */ .prose { color: var(--fg-1); line-height: 1.75; } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose h2 { font-size: 1.4rem; font-weight: 700; color: var(--fg-0); margin: 2em 0 .6em; letter-spacing: -.01em; } .prose h3 { font-size: 1.12rem; font-weight: 600; color: var(--fg-0); margin: 1.6em 0 .5em; } .prose h4 { font-size: 1rem; font-weight: 600; color: var(--fg-0); margin: 1.4em 0 .4em; } .prose p { margin: 0 0 1em; } .prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; } .prose li { margin: .35em 0; } .prose a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; } .prose a:hover { color: var(--accent); } .prose strong { color: var(--fg-0); font-weight: 600; } .prose blockquote { margin: 1.2em 0; padding: .6em 1.1em; border-left: 3px solid var(--accent); background: var(--bg-2); border-radius: 0 4px 4px 0; color: var(--fg-1); } .prose code { font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace; font-size: .9em; background: var(--bg-2); padding: .15em .4em; border-radius: 4px; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; } .prose th, .prose td { text-align: left; padding: .55em .7em; border-bottom: 1px solid var(--border); } .prose th { color: var(--fg-0); font-weight: 600; } /* ============================================================ language switcher */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-2); } .lang-switch a { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--fg-2); padding: 3px 7px; border-radius: 4px; line-height: 1; transition: color .15s, background .15s; } .lang-switch a:hover { color: var(--fg-0); } .lang-switch a.active { color: #fff; background: var(--accent); } /* On small screens the top-bar copy disappears; the burger-panel copy (.nav-mobile-row .lang-switch) stays usable. */ @media (max-width: 600px) { .lang-switch { display: none; } .nav-mobile-row .lang-switch { display: flex; } } /* ============================================================ confirm modal + toasts (JS-driven) */ .confirm-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--overlay); backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s ease; } .confirm-modal.is-open { opacity: 1; } .confirm-dialog { width: 100%; max-width: 420px; background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 22px 22px 18px; transform: translateY(6px) scale(.98); transition: transform .15s ease; } .confirm-modal.is-open .confirm-dialog { transform: none; } .confirm-dialog h3 { font-size: 1.05rem; font-weight: 700; color: var(--fg-0); margin: 0 0 8px; } .confirm-dialog p { color: var(--fg-1); font-size: 14px; line-height: 1.55; margin: 0 0 18px; overflow-wrap: anywhere; } .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; } .toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 36px)); pointer-events: none; } .toast-stack .alert { margin: 0; box-shadow: var(--shadow-2); pointer-events: auto; transform: translateY(8px); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .toast-stack .alert.is-in { transform: none; opacity: 1; } /* upload progress modal (reuses .confirm-modal / .confirm-dialog shell) */ .upload-name { font-weight: 600; color: var(--fg-0); font-size: 14px; margin: 0 0 10px; overflow-wrap: anywhere; } .upload-bar { height: 10px; background: var(--bg-3); border-radius: 999px; overflow: hidden; margin: 2px 0 8px; } .upload-bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .15s ease; } .upload-bar.indeterminate .upload-bar-fill { width: 35%; animation: upload-indet 1.1s ease-in-out infinite; } @keyframes upload-indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } .upload-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--fg-1); } .upload-status { margin: 12px 0 16px; color: var(--fg-1); font-size: 13px; } .upload-status.is-error { color: var(--bad); } .upload-status.is-done { color: var(--good); } /* ============================================================================ 20. MOBILE RESPONSIVE REFINEMENTS (phones) Fills the gaps the responsive audit surfaced at ~375px. Existing breakpoints already collapse the grids, footer, stat-grid and cookie banner. ========================================================================== */ @media (max-width: 640px) { /* Search / filter bar — stack the input + selects full-width (their 240px/200px flex-basis was overflowing a ~340px phone). */ .search-bar { flex-direction: column; align-items: stretch; } .search-bar .input, .search-bar .select { flex: 1 1 auto; width: 100%; min-width: 0; } /* Newsletter (home card + footer) — input over button, both full-width. */ .newsletter-box form { flex-direction: column; gap: 10px; } .newsletter-box .input, .newsletter-box .btn { width: 100%; } /* License key — let the 32-char key wrap instead of scrolling the page. */ .license-key { white-space: normal; word-break: break-all; letter-spacing: .5px; max-width: 100%; } /* Compare table — keep it scrolling inside .table-wrap, but shrink the sticky first column + cells so a couple of product columns show first. */ .compare-table { font-size: 13px; } .compare-table th:first-child, .compare-table td:first-child { min-width: 116px; } .compare-table th, .compare-table td { padding: 9px 8px; } /* Table action buttons wrap to usable tap targets. */ .table-actions { white-space: normal; } /* Account dropdown menu never wider than the viewport. */ .dropdown-menu { max-width: calc(100vw - 24px); } /* Support page form + sidebar grid collapses to one column. */ .support-grid { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { /* A little more content width on very narrow phones. */ .container, .container-narrow { padding-inline: 14px; } /* Hero CTA buttons stack full-width (3 long labels were cramped). */ .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } /* page-head (title + action button) stacks. */ .page-head { flex-direction: column; align-items: flex-start; gap: 14px; } .page-head > a, .page-head > .btn { width: 100%; justify-content: center; } /* 16px form fields stop iOS Safari zooming in on focus. */ .input, .select, .textarea { font-size: 16px; } /* Keep large price numbers from overflowing narrow cards. */ .price-amount { font-size: 1.85rem; } } /* ------------------------------------------------------------------ dropzone Drag & drop / click / paste upload target (see upload_dropzone() helper + initDropzones() in main.js). */ .dropzone { border: 1.5px dashed var(--border-strong); border-radius: 8px; background: rgba(148, 163, 205, .06); padding: 24px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 10px; user-select: none; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; } .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-ring); } .dropzone.is-busy { opacity: .65; pointer-events: none; } .dropzone-inner { display: flex; flex-direction: column; gap: 5px; align-items: center; font-size: .95rem; } .dropzone-ico { color: var(--fg-2, currentColor); opacity: .65; margin-bottom: 2px; } .dropzone-sub { font-size: .85rem; } .dropzone-busy { color: var(--accent); font-weight: 600; } /* ============================================================================ 20. FILE UPLOAD CONTROLS ---------------------------------------------------------------------------- Two progressive layers used by admin upload forms (downloads, etc.): • .file-input — a styled native . Works with NO JS; ::file-selector-button is restyled to match the button system so the control never falls back to raw browser grey. • .filepicker — JS (initFilePickers) upgrades that input into a click / drag-and-drop zone with a selected-file chip. Unlike the image .dropzone it does NOT auto-submit (these inputs live in multi-field forms) and it keeps the real input in the DOM, so data-upload progress + plain submit keep working. ========================================================================== */ /* ---- Baseline: styled native file input ---------------------------------- */ .file-input { display: block; width: 100%; padding: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg-1); font-family: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .file-input::file-selector-button { margin: 0 14px 0 0; padding: 10px 18px; border: 0; border-right: 1px solid var(--border); background: var(--bg-3); color: var(--fg-0); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .file-input:hover { border-color: var(--border-strong); } .file-input:hover::file-selector-button { background: var(--accent-soft); color: var(--accent); } .file-input:focus, .file-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .file-input-sm { font-size: 13px; } .file-input-sm::file-selector-button { margin-right: 11px; padding: 7px 13px; font-size: 12.5px; } /* Legacy WebKit alias (Safari < 16.4) so the no-JS fallback isn't raw grey. Kept as a separate block — combining vendor + standard pseudos in one list makes the whole rule drop in engines that don't know one of them. */ .file-input::-webkit-file-upload-button { margin: 0 14px 0 0; padding: 10px 18px; border: 0; border-right: 1px solid var(--border); background: var(--bg-3); color: var(--fg-0); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; -webkit-appearance: none; } .file-input:hover::-webkit-file-upload-button { background: var(--accent-soft); color: var(--accent); } .file-input-sm::-webkit-file-upload-button { margin-right: 11px; padding: 7px 13px; font-size: 12.5px; } /* ---- Enhanced: click / drag-and-drop picker ------------------------------ */ .filepicker { position: relative; } /* Once JS enhances, the real input is pulled out of the visual flow but stays in the DOM and focusable-by-script so the form still carries its .files. */ .filepicker > .file-input.is-enhanced { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .filepicker-zone { display: flex; align-items: center; width: 100%; background: var(--bg-2); border: 1.5px dashed var(--border-strong); border-radius: 8px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } /* The main "choose" target: a real