/* ===== Reset & Base ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Lets height transition to/from auto (used by the guide folders' open/close animation). Ignored by browsers that do not support it - they just snap, as before. */ interpolate-size: allow-keywords; --color-bg: #fafafa; --color-surface: #ffffff; --color-text: #111111; --color-text-secondary: #555555; --color-text-muted: #888888; --color-primary: #111111; --color-primary-hover: #333333; --color-accent: #2563eb; /* The logo mark. Fixed in both themes - it is the brand, not a UI accent. Same value as OhBrandColor in Studio's Generic.xaml. */ --color-brand: #2563eb; --color-accent-hover: #1d4ed8; --color-border: #e5e5e5; --color-border-light: #f0f0f0; --color-success: #16a34a; --color-error: #dc2626; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 8px 30px rgba(0,0,0,0.08); --shadow-xl: 0 20px 60px rgba(0,0,0,0.1); } /* ===== Dark theme ===== A script in header.php resolves the OS setting (or the visitor's saved choice) into data-theme="light|dark" on before the page paints, so there is no flash and the CSS only needs one condition. Colours are OpenHub Studio's palette (Styles/Generic.xaml), so the site and the app look like the same product. */ :root[data-theme="dark"] { --color-bg: #0C1016; /* OhBackground */ --color-surface: #141A22; /* OhSurface */ --color-surface-raised: #1A2230; /* OhSurfaceElevated */ --color-text: #E8EDF3; /* OhPrimaryText */ --color-text-secondary: #B6C2D1; /* OhSecondaryText */ --color-text-muted: #8B98A8; /* OhMutedText */ --color-primary: #E8EDF3; /* inverted: light button, dark label */ --color-primary-hover: #FFFFFF; --color-accent: #5090D3; /* OhAccent */ --color-accent-hover: #6BA3DD; --color-border: #243040; /* OhBorder */ --color-border-light: #1A2230; --color-success: #6CCB5F; /* OhSuccess */ --color-error: #FF6B6B; /* OhDanger */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 8px 30px rgba(0,0,0,0.5); --shadow-xl: 0 20px 60px rgba(0,0,0,0.6); } /* Anything sitting on --color-primary needs a dark label now that it is a light surface */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .lang-split-btn.active, [data-theme="dark"] .lang-split-btn.active:hover, [data-theme="dark"] .popular-badge, [data-theme="dark"] .type-btn.active { color: var(--color-bg); } /* The accent stays a blue fill, so its label stays light */ [data-theme="dark"] .btn-accent { color: #FFFFFF; } [data-theme="dark"] .navbar { background: rgba(12, 16, 22, 0.85); } /* Mock UI panels that hardcoded near-white greys */ [data-theme="dark"] .mock-titlebar, [data-theme="dark"] .mock-capture-bar, [data-theme="dark"] .mock-timeline { background: var(--color-surface-raised); } [data-theme="dark"] .mock-inspector { background: var(--color-surface); } [data-theme="dark"] .badge { background: rgba(80, 144, 211, 0.14); } [data-theme="dark"] .badge-inactive { color: #FAA825; /* OhWarning */ background: rgba(250, 168, 37, 0.14); } /* Screenshots and demo iframes are usually light - dim them slightly so they do not glare */ [data-theme="dark"] .media-item img { filter: brightness(0.92); } /* Open mobile menu panel - same hardcoded light fill as the navbar. Scoped to the widths where .nav-links IS a dropdown panel: unscoped, the same fill painted a dark box behind the inline links on the desktop bar. */ @media (max-width: 768px) { [data-theme="dark"] .nav-links { background: rgba(12, 16, 22, 0.95); } } html { color-scheme: light dark; font-family: var(--font); font-size: 16px; color: var(--color-text); background: var(--color-bg); scroll-behavior: smooth; scrollbar-gutter: stable both-edges; -webkit-font-smoothing: antialiased; } body { line-height: 1.6; /* Sticky footer: the page is a column at least as tall as the viewport, and
takes up any slack - so on a short page the footer sits on the bottom edge rather than floating up under the content, and on a long page it stays below the fold until you scroll to it. The fixed navbar is out of flow, so it does not count against this height. */ display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } a { text-decoration: none; color: inherit; transition: color 0.2s; } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ===== Navbar ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 250, 250, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border-light); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 6px; } .logo-icon { display: inline-grid; grid-template-columns: repeat(2, 10px); gap: 2px; transform: rotate(45deg); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); vertical-align: middle; margin-right: 4px; } .logo-icon span { width: 10px; height: 10px; border-radius: 2px; background: var(--color-brand); transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Logo idle animations handled by JS */ .nav-links { display: flex; align-items: center; gap: 28px; font-size: 0.9rem; font-weight: 450; color: var(--color-text-secondary); } .nav-links a:hover { color: var(--color-text); } .nav-links > a.active { color: var(--color-text); font-weight: 600; } /* Mobile menu button */ .mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .mobile-menu-btn span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .mobile-menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-btn.open span:nth-child(2) { opacity: 0; } .mobile-menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ===== Fade Up Animation ===== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .product-card-wide, .price-card, .coming-soon-card, .media-item, .tool-card, .support-form, .support-success, .license-box, .status-icon { animation: fadeUp 0.5s ease both; } .price-card:nth-child(2) { animation-delay: 0.08s; } .price-card:nth-child(3) { animation-delay: 0.16s; } .shop-hero, .hero, .tools-hero { animation: fadeUp 0.4s ease both; } /* Pinned to the window edge, positioned against .navbar (already fixed, so it is the containing block) rather than the centred .navbar-inner. Out of the flow entirely, so the logo, nav links and language switch keep exactly the position they have on pages without a picker. */ /* Starts exactly where the 1120px content column ends - just outside its right edge, rather than out at the window edge. 560px is half the container width. */ .currency-split { position: absolute; left: calc(50% + 560px); top: 50%; transform: translateY(-50%); } /* The margin it parks in does not exist on narrow screens - parked there it sits past the right edge, and phones had no region picker or theme toggle at all (which also meant no way onto the currency a discount was issued in). In the flow instead: a slim right-aligned row under the nav. */ @media (max-width: 1520px) { /* Pin the pill to the row's right corner below the width where the content-column margin is wide enough to hold it. The "United Kingdom" pill plus the theme toggle is ~184px, so the corner and content-edge positions coincide at ~1520px (1152 + 2*184) - not the old 1420 that assumed a narrower pill and left an overlap band between them. */ .currency-split { left: auto; right: 16px; } /* The dropdown opens from the right edge now - anchored left it ran off-screen. */ .region-pick-menu { left: auto; right: 0; } } /* The links give way by exactly what the pinned pill still overlaps: the container's own margin clears part of it, the clamp hands over the rest - full inset when the margin is gone, down to a small gap by ~1520 where the margin alone suffices. 210 = pill+toggle (~184) + its 16px offset + a little breathing room, so Roadmap never touches the pill. No jump at the boundary. */ @media (max-width: 1520px) { .navbar-inner { padding-right: clamp(24px, calc(210px - (100vw - 1120px) / 2), 210px); } } /* The menu's copy of the theme toggle exists only at hamburger widths. Two classes deep on purpose: the base .theme-toggle block sits LATER in this file, and at equal specificity its inline-flex would win - which put a second moon in the desktop nav. */ button.theme-toggle-menu { display: none; } /* On phones (hamburger widths) the picker rides IN the nav row, just left of the menu icon - no extra row, so the body offset above is undone. The theme toggle moves into the hamburger menu, which is what buys the pill its room. The mid-width row remains for tablets, where the nav links still occupy that side of the bar. */ @media (max-width: 768px) { .currency-split { position: absolute; left: auto; right: 62px; top: 50%; transform: translateY(-50%); padding: 0; } /* The tablet inset above would push the hamburger inside the pill - here the pill sits at right:62 precisely so the hamburger keeps the outer corner. Normal padding again. */ .navbar-inner { padding-right: 24px; } .currency-split .theme-toggle { display: none; } button.theme-toggle-menu { display: inline-flex; } /* Compact pill, or logo + pill + hamburger cannot share a small phone's width. */ .region-pick > summary { padding: 4px 8px; font-size: 0.75rem; } body { padding-top: 0; } } /* ===== Theme toggle ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; background: none; border: none; border-left: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--color-border-light); color: var(--color-text); } .theme-toggle svg { width: 15px; height: 15px; } /* Show the icon for the theme you would switch TO, which is the usual convention */ .theme-icon-moon { display: none; } [data-theme="dark"] .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-moon { display: block; } /* ===== Language Split Button ===== */ .lang-split { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .lang-split-btn { font-size: 0.8rem; font-weight: 500; padding: 5px 14px; color: var(--color-text-muted); transition: all 0.15s; border-right: 1px solid var(--color-border); } .lang-split-btn:last-child { border-right: none; } .lang-split-btn.active { background: var(--color-primary); color: #fff; } .lang-split-btn:hover:not(.active) { background: var(--color-border-light); color: var(--color-text); } .lang-split-btn.active:hover { color: #fff; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 0.875rem; font-weight: 500; padding: 8px 18px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-accent { background: var(--color-accent); color: #fff; border-color: var(--color-accent); } .btn-accent:hover { background: var(--color-accent-hover); } .btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-outline:hover { background: var(--color-surface); border-color: var(--color-text-muted); } .btn-ghost { background: transparent; color: var(--color-text-secondary); } .btn-ghost:hover { color: var(--color-text); } .btn-lg { padding: 12px 28px; font-size: 0.95rem; border-radius: var(--radius-lg); } .btn-block { width: 100%; text-align: center; } /* ===== Badge ===== */ .badge { display: inline-block; font-size: 0.8rem; font-weight: 500; color: var(--color-accent); background: rgba(37, 99, 235, 0.08); padding: 5px 14px; border-radius: 999px; letter-spacing: 0.01em; } /* ===== Add-ons ===== */ .addons-section { max-width: 720px; margin: 0 auto 60px; } /* On the landing the add-ons sit right under the plan cards - give them a bit more air above. */ .lp-section .addons-section { margin-top: 56px; } .addon-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .addon-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .addon-info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; /* The Premium pill sits beside the name rather than on the baseline of a 1rem heading, where it would ride high and look like a superscript. */ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .addon-desc li { font-size: 0.85rem; color: var(--color-text-secondary); padding-left: 16px; position: relative; line-height: 1.7; } .addon-desc li::before { content: "+"; position: absolute; left: 0; color: var(--color-accent); } .addon-buy { text-align: right; flex-shrink: 0; min-width: 150px; } .addon-price { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .addon-price span { font-size: 0.8rem; font-weight: 400; color: var(--color-text-muted); } .addon-price .price-was { display: block; font-size: 0.8rem; } @media (max-width: 640px) { .addon-row { flex-direction: column; align-items: stretch; gap: 14px; } .addon-buy { text-align: left; } } /* ===== System requirements table ===== */ .spec-table-wrap { max-width: 720px; margin: 0 auto 60px; } .spec-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; text-align: center; } .spec-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .spec-table thead th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); text-align: left; padding: 0 16px 8px; } .spec-table tbody th { width: 28%; font-weight: 500; color: var(--color-text-secondary); text-align: left; padding: 11px 16px; border-top: 1px solid var(--color-border-light); } .spec-table td { padding: 11px 16px; border-top: 1px solid var(--color-border-light); } .spec-dash { color: var(--color-text-muted); } /* On a phone the label goes above and the two values stay side by side underneath it - stacking all three loses the comparison, which is the only reason the table exists. */ @media (max-width: 640px) { .spec-table, .spec-table tbody, .spec-table tr, .spec-table tbody th { display: block; width: auto; } .spec-table thead { display: none; } .spec-table tr { border-top: 1px solid var(--color-border-light); padding: 10px 0; } .spec-table tbody th { border-top: none; padding: 0 0 6px; font-weight: 600; color: var(--color-text); } .spec-table td { display: inline-block; vertical-align: top; width: 50%; border-top: none; padding: 0 12px 0 0; font-size: 0.85rem; } /* Rows with no recommended value span the full width instead of leaving a gap */ .spec-table td[colspan] { width: 100%; padding-right: 0; } .spec-table td::before { content: attr(data-label); display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 2px; } } /* ===== Sale price ===== */ .price-was { font-size: 0.85rem; color: var(--color-text-muted); text-decoration: line-through; line-height: 1.2; } /* The hand-written price line - what Norwegian law wants said when there is no lawful struck-through before-price, e.g. "Ordinaer pris fra 16. november: 1290 kr". Quiet: it is a statement of fact under the price, not another sales line competing with the badge. */ .price-card .price-note { margin-top: 6px; font-size: 0.78rem; line-height: 1.4; color: var(--color-text-muted); } .price-save { font-size: 0.85rem; font-weight: 500; color: var(--color-success); margin-top: 2px; } /* Test site only - marks products that are inactive on the live site */ .badge-inactive { color: #92400e; background: rgba(245, 158, 11, 0.15); font-weight: 600; margin-left: 6px; } /* ===== Loading Spinner ===== */ .logo-spinner { display: inline-grid; grid-template-columns: repeat(2, 10px); gap: 2px; animation: logo-spin 0.8s steps(4) infinite; } .logo-spinner span { width: 10px; height: 10px; border-radius: 2px; background: var(--color-accent); } @keyframes logo-spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } /* ===== Landing Hero ===== */ .hero { padding: 140px 0 60px; text-align: center; } .hero-content h1 { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 20px; } .hero-sub { font-size: 1.15rem; color: var(--color-text-secondary); max-width: 520px; margin: 0 auto 32px; line-height: 1.6; } .hero-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 60px; } .hero-visual { max-width: 900px; margin: 0 auto; } /* ===== Mock Studio (hero visual) ===== */ .mock-studio { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; height: 460px; text-align: left; } .mock-titlebar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); background: #f7f7f8; } .mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); } .mock-titlebar-name { width: 140px; height: 10px; border-radius: 5px; background: var(--color-border); margin-left: 10px; } .mock-rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: #dc2626; background: rgba(220, 38, 38, 0.08); padding: 3px 10px; border-radius: 999px; } .mock-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; animation: rec-blink 1.6s ease-in-out infinite; } @keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .mock-workspace { flex: 1; display: flex; min-height: 0; } .mock-canvas { flex: 1; position: relative; margin: 20px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #eef2ff, #e0e7ff 55%, #dbeafe); border: 1px solid var(--color-border-light); overflow: hidden; } .mock-capture { position: absolute; inset: 14% 20% 14% 12%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 34px 20px 20px; display: flex; flex-direction: column; gap: 12px; } .mock-capture-bar { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: #f7f7f8; border-bottom: 1px solid var(--color-border-light); } .mock-capture-line { height: 10px; border-radius: 5px; background: var(--color-border-light); } .mock-capture-line.w-70 { width: 70%; } .mock-capture-line.w-50 { width: 50%; } .mock-capture-line.w-60 { width: 60%; } .mock-cursor { position: absolute; top: 58%; left: 55%; width: 22px; height: 22px; color: var(--color-primary); animation: cursor-drift 7s ease-in-out infinite; } .mock-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); } .mock-click-ring { position: absolute; top: -9px; left: -9px; width: 40px; height: 40px; border: 2px solid var(--color-accent); border-radius: 50%; opacity: 0; animation: click-ring 3.5s ease-out infinite; } @keyframes cursor-drift { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-70px, -40px); } 60% { transform: translate(40px, 20px); } } @keyframes click-ring { 0%, 55% { opacity: 0; transform: scale(0.3); } 62% { opacity: 0.8; } 80% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; } } .mock-inspector { width: 190px; border-left: 1px solid var(--color-border-light); background: #fbfbfc; padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; } .mock-inspector-title { height: 12px; width: 60%; border-radius: 6px; background: var(--color-border); margin-bottom: 8px; } .mock-inspector-row { height: 26px; border-radius: var(--radius); background: var(--color-border-light); } .mock-inspector-row.short { width: 65%; } .mock-timeline { position: relative; border-top: 1px solid var(--color-border-light); background: #f7f7f8; padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 8px; } .mock-track { position: relative; height: 22px; border-radius: 6px; background: var(--color-border-light); overflow: hidden; } .mock-clip { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; } .mock-clip.clip-video { background: linear-gradient(180deg, #60a5fa, #3b82f6); } .mock-clip.clip-voice { background: linear-gradient(180deg, #34d399, #10b981); } .mock-clip.clip-fx { background: linear-gradient(180deg, #c4b5fd, #a78bfa); } .mock-playhead { position: absolute; top: 8px; bottom: 10px; left: 20px; width: 2px; border-radius: 1px; background: var(--color-primary); z-index: 2; animation: playhead-sweep 10s linear infinite; } .mock-playhead::before { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 8px; background: var(--color-primary); border-radius: 3px 3px 5px 5px; } @keyframes playhead-sweep { from { left: 20px; } to { left: calc(100% - 22px); } } /* ===== Features (landing) ===== */ .features { padding: 40px 0 20px; } .features-included { max-width: 760px; } .features-included h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .included-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 48px; } .included-list li { font-size: 0.95rem; color: var(--color-text-secondary); padding-left: 24px; position: relative; } .included-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } /* ===== CTA Section ===== */ .cta-section { padding: 100px 0; text-align: center; } .cta-content h2 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 12px; } .cta-content p { font-size: 1.05rem; color: var(--color-text-secondary); margin-bottom: 28px; } /* ===== Shop Hero ===== */ .shop-hero { padding: 120px 0 60px; text-align: center; } .shop-hero h1 { font-size: 3rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 16px; } .shop-hero p { font-size: 1.15rem; color: var(--color-text-secondary); max-width: 520px; margin: 0 auto; line-height: 1.6; } /* ===== Product List ===== */ .products-section { padding: 40px 0 100px; } /* Wide product card */ .product-card-wide { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); margin-bottom: 24px; transition: box-shadow 0.2s, border-color 0.2s; cursor: pointer; text-decoration: none; color: inherit; } .product-card-wide:hover { box-shadow: var(--shadow-lg); border-color: var(--color-text-muted); } .product-card-wide-content { flex: 1; } .product-card-wide-content .badge { margin-bottom: 12px; } .product-card-wide-content h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .product-card-wide-content p { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 16px; max-width: 560px; } .product-card-features { display: flex; flex-wrap: wrap; gap: 6px 20px; } .product-card-features li { font-size: 0.85rem; color: var(--color-text-muted); padding-left: 18px; position: relative; } .product-card-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } .product-card-wide-action { text-align: center; flex-shrink: 0; } .product-card-wide-price { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: var(--color-text); } .product-card-wide-price span { font-weight: 400; color: var(--color-text-muted); } /* Legacy grid card (kept for future use) */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product-card { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; } .product-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-text-muted); transform: translateY(-2px); } .product-card-image { height: 200px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-border-light); } .product-card-image img { max-height: 160px; object-fit: contain; } .product-card-image .product-icon { width: 80px; height: 80px; display: inline-grid; grid-template-columns: repeat(2, 24px); gap: 6px; } .product-icon span { width: 24px; height: 24px; border-radius: 4px; background: var(--color-accent); opacity: 0.7; } .product-icon span:first-child { opacity: 1; } .product-card-body { padding: 24px; } .product-card-body .badge { margin-bottom: 12px; } .product-card-body h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; } .product-card-body p { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 20px; } .product-card-footer { display: flex; align-items: center; justify-content: space-between; } .product-price { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .product-price .price-period { font-size: 0.85rem; font-weight: 400; color: var(--color-text-muted); } /* ===== Product Detail Page ===== */ .product-detail { padding: 120px 0 80px; } .product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .product-detail-image { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: var(--radius-xl); border: 1px solid var(--color-border); height: 400px; display: flex; align-items: center; justify-content: center; } .product-detail-image .product-icon-lg { display: inline-grid; grid-template-columns: repeat(2, 40px); gap: 10px; } .product-icon-lg span { width: 40px; height: 40px; border-radius: 6px; background: var(--color-accent); opacity: 0.7; } .product-icon-lg span:first-child { opacity: 1; } .product-detail-info h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 12px; } .product-detail-info .badge { margin-bottom: 16px; } .product-detail-info .product-description { font-size: 1.05rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 32px; } .product-detail-price { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; } .product-detail-price .price-period { font-size: 1rem; font-weight: 400; color: var(--color-text-muted); } .product-detail-info .price-note { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 24px; } .product-features { margin-bottom: 32px; } .product-features h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .product-features ul { display: flex; flex-direction: column; gap: 10px; } .product-features li { font-size: 0.95rem; color: var(--color-text-secondary); padding-left: 24px; position: relative; } .product-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } .buy-form { display: flex; flex-direction: column; gap: 12px; } .buy-form input[type="email"] { font-family: var(--font); font-size: 0.95rem; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 0.2s; } .buy-form input[type="email"]:focus { border-color: var(--color-accent); } /* ===== Success / Cancel Pages ===== */ .status-page { padding: 160px 0 100px; text-align: center; } .status-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 2rem; } .status-icon.success { background: rgba(22, 163, 74, 0.1); color: var(--color-success); } .status-icon.error { background: rgba(220, 38, 38, 0.1); color: var(--color-error); } .status-page h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 12px; } .status-page p { font-size: 1.05rem; color: var(--color-text-secondary); max-width: 480px; margin: 0 auto 32px; line-height: 1.6; } .license-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; max-width: 500px; margin: 0 auto 32px; text-align: left; } .license-box label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); display: block; margin-bottom: 8px; } .license-box code { display: block; font-size: 1rem; font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; background: var(--color-bg); padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--color-border-light); word-break: break-all; user-select: all; } /* ===== Requirements ===== */ .product-requires { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 12px; } .product-requires a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(37, 99, 235, 0.3); text-underline-offset: 2px; } .product-requires a:hover { text-decoration-color: var(--color-accent); } /* ===== Media Gallery ===== */ .media-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 960px; margin: 0 auto 60px; } .media-item { border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); } .media-item:only-child, .media-item.media-demo { grid-column: 1 / -1; } .media-image img { width: 100%; height: auto; display: block; } .media-video-wrapper, .media-demo-wrapper { position: relative; padding-bottom: 56.25%; height: 0; } .media-demo-wrapper { padding-bottom: 65%; } .media-video-wrapper iframe, .media-video-wrapper video, .media-demo-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .media-caption { font-size: 0.85rem; color: var(--color-text-muted); padding: 12px 16px; text-align: center; border-top: 1px solid var(--color-border-light); } /* ===== Pricing Section ===== */ .pricing-section { margin-bottom: 80px; } .pricing-title { font-size: clamp(1.5rem, 5vw, 2rem); /* smaller on phones, 2rem on desktop */ font-weight: 700; letter-spacing: -0.025em; text-align: center; margin-bottom: 8px; } .pricing-subtitle { font-size: 1rem; color: var(--color-text-secondary); text-align: center; margin-bottom: 40px; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .price-card { position: relative; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg); } .price-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-lg); background: var(--color-surface); } .popular-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 3px 14px; border-radius: 999px; } .price-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; } .price { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; line-height: 1.15; /* Flex so the period can wrap without dragging the number's leading with it. As inline text, a wrapped second line is still as tall as the block's own strut - 2.5rem of it - no matter what line-height the small text carries, which is why it sat so far below the price. As flex items each row is only as tall as what is in it, and row-gap 0 puts the period directly under the amount. It still sits beside the amount whenever there is room. */ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; } .price span { font-size: 1rem; font-weight: 400; color: var(--color-text-muted); /* Paddle writes the amount, so its length varies by country - and where it no longer fits beside the number, the line broke inside the word: "one-" above, "time" below. The period moves as one piece or not at all. */ white-space: nowrap; /* Its own, or the wrapped line inherits the 2.5rem number's leading and the period floats far below the price it belongs to. On one line this changes nothing - the two sit on a shared baseline either way. */ line-height: 1; } .price-desc { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 20px; } .price-desc-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .price-desc-list li { font-size: 0.95rem; color: var(--color-text-secondary); padding-left: 24px; position: relative; } .price-desc-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } .plan-email-input { font-family: var(--font); font-size: 0.95rem; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 0.2s; width: 100%; margin-bottom: 10px; } .plan-email-input:focus { border-color: var(--color-accent); } /* ===== Billing Toggle ===== */ .billing-toggle { display: flex; justify-content: center; gap: 0; margin-bottom: 32px; background: var(--color-border-light); border-radius: 999px; padding: 4px; width: fit-content; margin-left: auto; margin-right: auto; } .billing-btn { font-family: var(--font); font-size: 0.875rem; font-weight: 500; padding: 8px 24px; border: none; border-radius: 999px; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: all 0.2s; } .billing-btn.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); } .billing-btn:hover:not(.active) { color: var(--color-text); } .price-billed-yearly { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 4px; } .save-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; color: #16a34a; background: rgba(22, 163, 74, 0.1); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } /* ===== Coming Soon ===== */ .coming-soon-card { text-align: center; padding: 48px 32px; border: 2px dashed var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg); } .coming-soon-card .badge { margin-bottom: 16px; } .coming-soon-card h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; } .coming-soon-card p { font-size: 0.95rem; color: var(--color-text-secondary); max-width: 440px; margin: 0 auto; line-height: 1.6; } /* ===== Purchase Modal ===== */ .purchase-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeUp 0.3s ease; } .purchase-modal { background: var(--color-surface); border-radius: var(--radius-xl); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); } /* Paddle's inline checkout, drawn inside the purchase dialog. Narrow padding, because the frame has its own: Paddle lays its checkout out to the max width set in its dashboard, and anything narrower than that here clips the right-hand edge of the fields rather than reflowing them. */ .paddle-checkout-frame { padding: 12px 16px 20px; min-height: 450px; } /* The dialog is sized for the form; the checkout that replaces it is wider. Widened only while the checkout is up, so the form keeps the width it was designed at. */ .purchase-modal.checkout-open { max-width: 720px; } .purchase-modal-header { padding: 24px 28px 16px; border-bottom: 1px solid var(--color-border-light); position: relative; } .purchase-modal-header h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; } .purchase-plan-name { font-size: 0.9rem; color: var(--color-accent); font-weight: 500; } .purchase-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.5rem; color: var(--color-text-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius); } .purchase-close:hover { background: var(--color-border-light); color: var(--color-text); } .purchase-modal form { padding: 20px 28px 28px; } .purchase-field { margin-bottom: 16px; } .purchase-field label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 6px; color: var(--color-text-secondary); } .purchase-field input, .purchase-field select, .purchase-field textarea { font-family: var(--font); font-size: 0.9rem; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); width: 100%; outline: none; transition: border-color 0.2s, box-shadow 0.2s; /* Recessed onto the page colour, not the modal's surface - on the surface the fields were only a hairline away from invisible, in both themes. Text follows the theme too: the browser's default near-black once made dark mode unreadable. */ background: var(--color-bg); color: var(--color-text); } .purchase-field input::placeholder, .purchase-field textarea::placeholder { color: var(--color-text-muted); } .purchase-field input:hover, .purchase-field select:hover, .purchase-field textarea:hover { border-color: var(--color-text-muted); } .purchase-field input:focus, .purchase-field select:focus, .purchase-field textarea:focus { border-color: var(--color-accent); /* A soft ring, from the theme's own accent, so focus reads in dark mode too - the bare border-color change was invisible against the dark surface. */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); } /* Chrome paints autofilled fields with its own light background, which glows in dark mode. Its background-color cannot be overridden, but an inset box-shadow the size of the field can paint over it - the standard shim. The text colour needs -webkit-text-fill-color for the same reason. */ .purchase-field input:-webkit-autofill, .purchase-field input:-webkit-autofill:hover { -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); box-shadow: 0 0 0 1000px var(--color-bg) inset; } .purchase-field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); /* The focus ring rides outside the same paint-over, so autofilled fields keep it too. */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 0 1000px var(--color-bg) inset; } /* The native select arrow follows the OS theme, not the page's - replace it with one that sits between the two palettes so a single glyph reads on both. */ .purchase-field select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23889' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .purchase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .purchase-type-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .type-btn { flex: 1; padding: 8px; border: none; background: var(--color-bg); font-family: var(--font); font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; transition: all 0.15s; } .type-btn.active { background: var(--color-primary); color: #fff; } .purchase-consents { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; } .purchase-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--color-text-secondary); cursor: pointer; } .purchase-checkbox input { margin-top: 2px; width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--color-accent); } .purchase-checkbox a { color: var(--color-accent); text-decoration: underline; } .purchase-actions { display: flex; gap: 12px; justify-content: flex-end; } @media (max-width: 768px) { .purchase-row { grid-template-columns: 1fr; } .purchase-modal { max-height: 95vh; } } /* ===== Support Form ===== */ .support-form { display: flex; flex-direction: column; gap: 20px; } .support-field { display: flex; flex-direction: column; gap: 6px; } .support-field label { font-size: 0.85rem; font-weight: 500; color: var(--color-text); } .support-field input, .support-field select, .support-field textarea { font-family: var(--font); font-size: 0.95rem; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 0.2s; background: var(--color-surface); color: var(--color-text); width: 100%; } .support-field input:focus, .support-field select:focus, .support-field textarea:focus { border-color: var(--color-accent); } .support-field textarea { resize: vertical; min-height: 120px; } .support-success { text-align: center; padding: 40px 0; } .support-success h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; } .support-success p { color: var(--color-text-secondary); font-size: 1rem; } .support-error { background: rgba(220, 38, 38, 0.08); color: var(--color-error); padding: 12px 16px; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 16px; } /* ===== Footer ===== */ .footer { border-top: 1px solid var(--color-border-light); padding: 40px 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-brand { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 6px; } .footer-links { display: flex; gap: 24px; font-size: 0.875rem; color: var(--color-text-muted); } /* The legal row: on every page because the law wants it findable, quiet because nobody comes for it. The label is a heading for the row, not a link. */ .footer-legal { display: flex; flex-direction: column; gap: 6px; } .footer-legal a { font-size: 0.8rem; color: var(--color-text-muted); } .footer-legal a:hover { color: var(--color-text); } .footer-legal-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); opacity: 0.7; text-decoration: none; } .footer-legal-label:hover { opacity: 1; color: var(--color-text); } .footer-links a:hover { color: var(--color-text); } .footer-copy { font-size: 0.8rem; color: var(--color-text-muted); } /* The "featured on" badges sit on their own full-width row at the bottom, spread across it. */ .footer-badge { flex-basis: 100%; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } .footer-badge img { display: block; border-radius: 8px; } @media (max-width: 640px) { .footer-badge { justify-content: center; } } /* ===== Responsive ===== */ @media (max-width: 768px) { .hero-content h1 { font-size: 2.2rem; } .mock-inspector { display: none; } .mock-studio { height: 340px; } .mock-capture { inset: 10% 12% 10% 8%; } .included-list { grid-template-columns: 1fr; } .shop-hero h1 { font-size: 2.2rem; } .shop-hero p { font-size: 1rem; } .media-gallery { grid-template-columns: 1fr; } .product-card-wide { flex-direction: column; text-align: center; gap: 24px; padding: 28px; } .product-card-wide-content p { max-width: none; } .product-card-features { justify-content: center; } .products-grid, .pricing-grid { grid-template-columns: 1fr; } .product-detail-grid { grid-template-columns: 1fr; gap: 32px; } .product-detail-image { height: 260px; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(250, 250, 250, 0.95); backdrop-filter: blur(12px); flex-direction: column; padding: 24px; border-bottom: 1px solid var(--color-border-light); gap: 16px; } .nav-links.open { display: flex; } .mobile-menu-btn { display: flex; } .footer-inner { flex-direction: column; text-align: center; } } @media (max-width: 1024px) and (min-width: 769px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } /* ===== Customer portal ===== */ .portal-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .portal-form label { font-size: 0.85rem; font-weight: 500; color: var(--color-text-secondary); } .portal-form input { font-family: var(--font); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); margin-bottom: 8px; } .portal-form input:focus { outline: none; border-color: var(--color-accent); } .portal-code-input { font-family: Consolas, monospace; font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; } .portal-hint { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 10px; } .portal-error { font-size: 0.9rem; color: var(--color-error); background: rgba(220, 38, 38, 0.08); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; } .portal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; } .portal-license { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; } .portal-license-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .portal-license-head h2 { font-size: 1.15rem; font-weight: 600; } .portal-key { font-family: Consolas, monospace; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; } /* Licence state and update window, stacked. Two answers, so two badges - never one. */ .portal-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .portal-window { flex-shrink: 0; font-size: 0.78rem; font-weight: 500; color: var(--color-success); background: rgba(22, 163, 74, 0.1); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .portal-window.lapsed { color: #92400e; background: rgba(245, 158, 11, 0.15); } .portal-versions { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .portal-versions td { padding: 12px 8px; border-top: 1px solid var(--color-border-light); vertical-align: middle; } .portal-versions tr.not-covered td { opacity: 0.55; } .portal-version-no { font-weight: 600; } .portal-latest { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); margin-left: 8px; } .portal-version-date, .portal-version-size { color: var(--color-text-muted); font-size: 0.85rem; } .portal-version-action { text-align: right; } .portal-locked { font-size: 0.8rem; color: var(--color-text-muted); cursor: help; } .portal-upgrades { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border-light); } .portal-upgrades h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; } /* Jump list above the cards, and the tab strip on the help pages. */ .portal-index { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .portal-index a { font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; text-decoration: none; } .portal-index a:hover, .portal-index a.active { color: var(--color-accent); border-color: var(--color-accent); } /* Question or bug, above the form they both post to. */ .support-kind { margin-bottom: 14px; } /* One field that reads as a licence key whether or not it is showing one: the dots, the key, the eye and the copy button all sit in the same box, so nothing shifts when it opens. The border is on the wrapper rather than on the summary, since the copy button has to live outside the
- inside it, a click on Copy would also toggle the key open. */ .portal-key-field { display: inline-flex; align-items: stretch; margin-top: 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); overflow: hidden; transition: border-color 0.15s; } .portal-key-field:hover { border-color: var(--color-text-muted); } .portal-key-reveal summary { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 10px 6px 12px; list-style: none; transition: background 0.15s; } .portal-key-reveal summary::-webkit-details-marker { display: none; } .portal-key-reveal summary:hover { background: var(--color-surface); } .portal-key-copy { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; border: 0; border-left: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); cursor: pointer; transition: color 0.15s, background 0.15s; } .portal-key-copy:hover { color: var(--color-accent); background: var(--color-surface); } .portal-key-copy svg { width: 15px; height: 15px; } /* Confirmation lives on the button itself - a tick where the icon was, for a moment. */ .portal-key-copy .icon-copied { display: none; } .portal-key-copy.copied { color: var(--color-success); } .portal-key-copy.copied .icon-copy { display: none; } .portal-key-copy.copied .icon-copied { display: inline; } .portal-key-reveal .portal-key { margin: 0; font-size: 0.82rem; letter-spacing: 0.02em; } /* Dots and key occupy the same grid cell, so the field is always as wide as the wider of the two. They are switched with visibility rather than display: a hidden item still takes its space in the grid, which is what keeps the box from resizing when the key appears. Both are monospace with the same letter-spacing, so the two states line up character for character. */ .portal-key-stack { display: inline-grid; } .portal-key-stack > .portal-key { grid-area: 1 / 1; font-family: Consolas, monospace; letter-spacing: 0.08em; white-space: nowrap; } /* Muted while hidden - it is a placeholder, not information. The revealed key gets full contrast. */ .portal-key-masked { color: var(--color-text-muted); opacity: 0.7; } .portal-key-real { visibility: hidden; color: var(--color-text); font-weight: 500; user-select: all; } .portal-key-eye { display: inline-flex; align-items: center; color: var(--color-text-muted); padding: 2px; } .portal-key-eye svg { width: 16px; height: 16px; } .portal-key-eye .icon-eye-off { display: none; } .portal-key-reveal summary:hover .portal-key-eye { color: var(--color-accent); } /* Open: the key takes the dots' place and the eye closes. Nothing is left standing above it. */ .portal-key-reveal[open] .portal-key-masked { visibility: hidden; } .portal-key-reveal[open] .portal-key-real { visibility: visible; } .portal-key-reveal[open] .icon-eye { display: none; } .portal-key-reveal[open] .icon-eye-off { display: inline; } /* The reveal: one wipe across the field. The dots are cleared from the left edge at the same rate as the key arrives behind them, so it reads as a single movement rather than two things swapping. Both run on the same curve and duration - that is what keeps them locked together. */ @keyframes portal-key-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes portal-key-out { from { clip-path: inset(0 0 0 0); opacity: 0.7; } to { clip-path: inset(0 0 0 100%); opacity: 0; } } .portal-key-reveal[open] .portal-key-real { animation: portal-key-in 0.45s cubic-bezier(0.5, 0, 0.2, 1) both; } .portal-key-reveal[open] .portal-key-masked { visibility: visible; animation: portal-key-out 0.45s cubic-bezier(0.5, 0, 0.2, 1) both; } /* No reduced-motion opt-out here, deliberately: a 0.45s wipe on a five-group key is below the threshold that setting exists for, and honouring it made the reveal look broken on machines with Windows animations turned off. */ .portal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } /* The one download that matters, given the weight to match. */ .portal-latest-release { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 18px 20px; } .portal-latest-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 4px; } .portal-latest-version { font-size: 1.35rem; font-weight: 600; line-height: 1.2; } .portal-latest-meta { display: block; font-size: 0.8rem; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; } /* Release notes, rendered from the admin's Markdown-ish text (portalNotesHtml). */ .portal-notes { font-size: 0.85rem; color: var(--color-text-muted); } .portal-notes h3 { margin: 18px 0 6px; font-size: 0.95rem; font-weight: 600; color: var(--color-text); } .portal-notes h3:first-child { margin-top: 0; } .portal-notes ul, .portal-notes ol { margin: 0 0 6px; padding-left: 18px; } .portal-notes p { margin: 0 0 8px; } .portal-notes li { margin-bottom: 3px; } .portal-notes code { font-size: 0.8rem; } /* **Text** - bold, a touch larger and in the full text colour, so it reads as the lead of its line. */ .portal-notes strong { font-size: 1.06em; font-weight: 600; color: var(--color-text); } .portal-notes a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Release-notes trigger: sits on the version's date / size line, after the size, and opens the notes modal. Muted like the rest of that line - not the accent link colour (user call); the underline is what says it can be clicked. */ .portal-notes-link { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .portal-notes-link:hover { color: var(--color-text); } /* .purchase-overlay forces display:flex, so [hidden] alone would not hide it - this does. */ .portal-notes-overlay[hidden] { display: none; } /* In the modal the notes take the dialog's own padding, and scroll inside it - a full changelog is longer than a laptop screen. */ .portal-notes-overlay .portal-notes { margin: 0; padding: 22px 28px 28px; max-height: 70vh; overflow-y: auto; } .portal-older { margin-top: 16px; } .portal-older summary { cursor: pointer; font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); } .portal-older summary:hover { color: var(--color-accent); } /* Articles */ .portal-article-item { border-bottom: 1px solid var(--color-border-light); padding: 14px 0; } .portal-article-item summary, .portal-article-link { cursor: pointer; font-weight: 500; text-decoration: none; color: var(--color-text); } .portal-article-item summary:hover, .portal-article-link:hover { color: var(--color-accent); } .portal-article-link { display: block; border-bottom: 1px solid var(--color-border-light); padding: 14px 0; } .portal-article { font-size: 0.93rem; line-height: 1.65; } .portal-article h2 { font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; } .portal-article h3 { font-size: 1.05rem; font-weight: 600; margin: 22px 0 8px; } .portal-article h4 { font-size: 0.95rem; font-weight: 600; margin: 18px 0 6px; } .portal-article p { margin-bottom: 12px; } .portal-article ul, .portal-article ol { margin: 0 0 12px 20px; } .portal-article li { margin-bottom: 4px; } .portal-article hr { border: 0; border-top: 1px solid var(--color-border-light); margin: 20px 0; } .portal-article blockquote { border-left: 3px solid var(--color-border); padding-left: 14px; color: var(--color-text-muted); margin-bottom: 12px; } .portal-article code { font-family: Consolas, monospace; font-size: 0.85em; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 4px; padding: 1px 5px; } .portal-article .md-code { background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 14px 16px; overflow-x: auto; margin-bottom: 14px; } .portal-article .md-code code { background: none; border: 0; padding: 0; } @media (max-width: 640px) { .portal-header, .portal-license-head { flex-direction: column; } .portal-badges { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .portal-versions td { padding: 8px 4px; } .portal-version-size { display: none; } .portal-latest-release { flex-direction: column; align-items: stretch; } .portal-latest-release .btn { width: 100%; } } [data-theme="dark"] .portal-error { background: rgba(255, 107, 107, 0.12); } [data-theme="dark"] .portal-window { background: rgba(108, 203, 95, 0.12); } [data-theme="dark"] .portal-window.lapsed { color: #FAA825; background: rgba(250, 168, 37, 0.14); } .portal-machines { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border-light); } .portal-machines h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; } .portal-ok { font-size: 0.9rem; color: var(--color-success); background: rgba(22, 163, 74, 0.08); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; } [data-theme="dark"] .portal-ok { background: rgba(108, 203, 95, 0.12); } .portal-machines-link { font-size: 0.85rem; color: var(--color-accent); } .portal-machines-link:hover { text-decoration: underline; } /* [Premium] in plan copy becomes a pill */ .feature-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent); background: rgba(37, 99, 235, 0.1); padding: 1px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; } [data-theme="dark"] .feature-tag { background: rgba(80, 144, 211, 0.16); } /* ===== Article media: figures, the video player, the YouTube facade ===== */ .md-figure { margin: 0 0 18px; } .md-figure img { display: block; width: 100%; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); } .md-figure figcaption { margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); text-align: center; } .portal-article p > img { border-radius: var(--radius); vertical-align: middle; } /* The player. The