/* ============================================ RENATUS V2 BASE STYLES Shared across all v2 public pages NO inline styles - all from design tokens ============================================ */ /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } .hidden { display: none !important; } html { scroll-behavior: smooth; /* `overflow-x: clip` (not `hidden`) is critical — `hidden` implicitly computes `overflow-y: auto`, which turns into the scroll container and silently breaks every `position: sticky` element on the site (preview panes on /free, /solutions, /products, etc). `clip` prevents horizontal overflow without creating a scroll container, so sticky keeps working against the viewport. */ overflow-x: clip; } body { font-family: var(--font-family); font-size: var(--text-base); line-height: var(--lh-body); color: var(--navy); background: var(--white); /* Sticky footer: stretch the body to fill the viewport, then let the main content area grow so the footer is pinned to the bottom on short pages without overlapping content on long pages. */ min-height: 100vh; display: flex; flex-direction: column; } body > #spaContent { flex: 1 0 auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img { max-width: 100%; height: auto; } /* ============================================ TOP BAR / HEADER ============================================ */ .top-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 0 var(--space-8); z-index: 1000; transition: background var(--transition-fast); } .top-bar-inner { width: 100%; height: 100%; max-width: var(--content-max-width); display: flex; align-items: center; justify-content: space-between; position: relative; } .top-bar.transparent { background: transparent; } .top-bar.transparent:hover { background: transparent; } .top-bar.transparent.scrolled { background: var(--white); } .top-bar.transparent.scrolled .top-bar-link { color: var(--navy); font-weight: 300; } .top-bar.transparent.scrolled .top-bar-link:hover { color: var(--pink); } .top-bar.transparent.scrolled .logo-full.logo-inverse { display: none; } .top-bar.transparent.scrolled .logo-full.logo-color { display: block; } .top-bar.transparent.scrolled .btn-signup { background: var(--navy); color: var(--white); } .top-bar.transparent.scrolled .mobile-menu-btn, .top-bar.transparent.scrolled .mobile-search-btn, .top-bar.transparent.scrolled .mobile-profile-btn { color: var(--navy); } .top-bar.transparent.scrolled .nav-lang-trigger { color: var(--navy); font-weight: 300; } .top-bar.white { background: var(--white); } .top-bar.white .top-bar-link { color: var(--navy); font-weight: 300; } .top-bar.white .top-bar-link:hover { color: var(--pink); } .top-bar.white .logo-full.logo-inverse { display: none; } .top-bar.white .logo-full.logo-color { display: block; } .top-bar.white .btn-signup { background: var(--navy); color: var(--white); } .top-bar.white .mobile-menu-btn, .top-bar.white .mobile-search-btn, .top-bar.white .mobile-profile-btn { color: var(--navy); } .top-bar.white .nav-lang-trigger { color: var(--navy); font-weight: 300; } .logo-area { display: flex; align-items: center; } .logo-link { display: flex; align-items: center; gap: var(--space-2); } .logo-full { height: 32px; width: auto; } .logo-wordmark { height: 24px; width: auto; } .logo-full.logo-inverse { display: block; } .logo-full.logo-color { display: none; } .logo-wordmark.logo-inverse, .logo-wordmark.logo-color { display: none; } /* Centre nav: small text links inside the floating pill navbar. Absolutely positioned so it stays optically centred regardless of how wide the right-hand controls grow (auth state, credits, etc.). */ .top-bar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 28px; pointer-events: auto; } .top-bar-center-tab { display: inline-flex; align-items: center; } .top-bar-center-link { font-size: 14px; font-weight: 500; color: var(--white); text-decoration: none; letter-spacing: 0.1px; padding: 6px 4px; border: 0; background: transparent; cursor: pointer; transition: opacity 140ms ease; white-space: nowrap; opacity: 0.92; } .top-bar-center-link:hover, .top-bar-center-link[aria-expanded="true"] { opacity: 1; text-decoration: none; } .top-bar-center-link.active { opacity: 1; font-weight: 700; } /* On scrolled / white navbars the pill background is light, so the centre links need to switch to the dark text colour to stay legible. */ .top-bar.white .top-bar-center-link, .top-bar.transparent.scrolled .top-bar-center-link { color: var(--navy); } /* Override the home-mega-trigger active style (white-on-white pillow designed to merge with the panel) — doesn't suit a floating pill. */ .top-bar-center .home-mega-trigger.active, .top-bar-center .home-mega-trigger[aria-expanded="true"] { background: transparent; box-shadow: none; border-radius: 0; font-weight: 500; color: inherit; } @media (max-width: 900px) { .top-bar-center { display: none; } } /* Active page name shown only on mobile (≤900px) where the centre nav collapses. Desktop already gets the active page from the bolded centre link, so the label hides above the breakpoint. Absolutely centred so it stays optically aligned regardless of how wide the right-hand controls grow. */ .top-bar-page-name { display: none; } @media (max-width: 900px) { .top-bar-page-name { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 600; color: var(--white); letter-spacing: 0.1px; white-space: nowrap; pointer-events: none; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; } .top-bar.white .top-bar-page-name, .top-bar.transparent.scrolled .top-bar-page-name { color: var(--navy); } } .top-bar-right { display: flex; align-items: center; gap: var(--space-10); } /* Tighten the spacing between the language switcher and the user avatar so the language pill reads as part of the account cluster rather than floating between the credits pill and the avatar. The parent's 40px gap is collapsed to 24px for this pair only. */ .top-bar-right > .top-bar-user { margin-left: calc(var(--space-6) - var(--space-10)); } .top-bar-link { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--white); transition: color var(--transition-fast); } .top-bar-link:hover { color: var(--navy); } .top-bar-link.active { font-weight: var(--font-bold); } .top-bar.white .top-bar-link.active, .top-bar.transparent.scrolled .top-bar-link.active { font-weight: var(--font-bold); } .btn-signup { background: var(--navy); color: var(--white); padding: var(--space-2) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-base); font-weight: var(--font-semibold); transition: all var(--transition-base); text-decoration: none; } .btn-signup:hover { background: var(--navy); color: var(--white); box-shadow: var(--shadow-md-heavy); } .top-bar-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: all var(--transition-base); white-space: nowrap; } .top-bar-pill + .top-bar-pill { margin-left: calc(15px - var(--space-10)); } /* Default pill — black on transparent so it's visible against the white floating-pill chrome (desktop, every page) and against the white background on mobile inner pages. The home mobile gradient overrides this back to white in home.css. */ .top-bar-pill-upgrade, .top-bar-pill-credits { background: transparent; color: var(--navy); border-color: var(--navy); } .top-bar-pill-upgrade:hover, .top-bar-pill-credits:hover { background: rgba(0, 0, 0, 0.06); color: var(--navy); } .top-bar-user { position: relative; } .top-bar-user-trigger { cursor: pointer; display: flex; align-items: center; } .top-bar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--font-semibold); font-family: 'Inter', sans-serif; } .top-bar-user-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--white); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 180px; padding: var(--space-2) 0; z-index: 1001; } .top-bar-user-menu.open { display: block; } .top-bar-user-menu-header { padding: 12px 16px; border-bottom: 1px solid var(--gray-light, var(--gray-light)); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; } .top-bar-user-menu-name { font-size: var(--text-sm, 14px); font-weight: var(--font-semibold, 600); color: var(--navy); } .top-bar-user-menu-plan { font-size: 12px; color: var(--ink-2); } /* The plan label under the user's name has two variants for the non-org branches (subscriber tier / free user). Desktop shows the tier or email; mobile swaps in the live credits balance so the header doubles as a quick credits indicator + CTA. On mobile we also hide the un-suffixed .top-bar-user-menu-plan (used by the admin / org / participant / enterprise branches) so the role label is dropped — only credits sit under the user's name. */ .top-bar-user-menu-plan-credits { display: none; } @media (max-width: 768px) { .top-bar-user-menu-plan:not(.top-bar-user-menu-plan-credits) { display: none; } .top-bar-user-menu-plan-credits { display: inline; } } .top-bar-user-menu-credits { font-size: 12px; color: var(--ink-2); } /* Tokens line that sits inside the header, directly under the user name. Matches the previous standalone Tokens row's small grey styling (11px / #888) but rendered as a flex item of the header so it inherits the header padding and sits flush under the name. */ .top-bar-user-menu-tokens { font-size: 12px; font-weight: var(--font-normal, 400); color: #888; } .top-bar-user-menu-item { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--navy); text-decoration: none; transition: background var(--transition-fast); } .top-bar-user-menu-item:hover { background: var(--color-grey-50, var(--gray-background)); } .top-bar-user-menu-divider { height: 1px; background: var(--gray-light, var(--gray-light)); margin: var(--space-1) 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border: none; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); transition: all var(--transition-base); text-decoration: none; cursor: pointer; } .btn-primary { background: var(--navy); color: var(--white); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--ink-2); border: 1px solid var(--navy); } .btn-outline:hover { background: var(--gray-background); color: var(--navy); } .btn-large { padding: var(--space-4) var(--space-8); font-size: var(--text-base); } /* Inline text link */ .inline-link { color: var(--navy); text-decoration: none; font-weight: var(--font-medium); transition: color var(--transition-fast); } .inline-link:hover { color: var(--pink); } /* Figma split button */ .split-btn { display: inline-flex; overflow: hidden; } .split-btn-left, .split-btn-right { font-size: var(--text-base); letter-spacing: 0; line-height: 1; padding: 0 28px; height: 48px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: all var(--transition-base); text-decoration: none; } .split-btn-left { background: var(--navy); color: var(--white); font-weight: var(--font-medium); border-radius: var(--radius-full) 0 0 var(--radius-full); } .split-btn-left:hover { background: var(--navy); box-shadow: var(--shadow-md-heavy); transform: translateY(-1px); } .split-btn-right { background: var(--gray-background); color: var(--ink-2); font-weight: var(--font-normal); border-radius: 0 var(--radius-full) var(--radius-full) 0; } .split-btn-right:hover { background: var(--gray-light); box-shadow: var(--shadow-md); transform: translateY(-1px); } /* ============================================ PILL TABS (shared toggle component) White active pill on grey container ============================================ */ .pill-tabs { display: inline-flex; align-self: flex-start; background: var(--gray-background); border-radius: var(--radius-full); overflow: hidden; padding: var(--pill-container-padding); gap: var(--pill-container-gap); } .pill-tabs.centered { align-self: center; } .pill-tab { padding: 0 var(--pill-tab-padding-x); height: 48px; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); font-weight: var(--font-normal); line-height: 1; color: var(--ink-2); background: transparent; border: none; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-base); white-space: nowrap; } .pill-tab:hover { color: var(--navy); } .pill-tab.active { background: var(--white); color: var(--navy); font-weight: var(--font-semibold); box-shadow: var(--shadow-sm); } /* ============================================ FAQ ACCORDION (shared component) Pink bg, white rounded cards, expand/collapse ============================================ */ .faq-section { padding: var(--space-20) 0 var(--space-16); background: var(--yellow); } .faq-section .faq-layout { max-width: var(--landing-container); margin: 0 auto; padding: 0 var(--landing-container-padding); display: flex; gap: var(--space-16); align-items: flex-start; } .faq-section .faq-header { flex: 0 0 30%; position: sticky; top: var(--space-8); } .faq-title { margin-bottom: 0; } .faq-subtitle { font-size: var(--text-xl); font-weight: var(--font-normal); line-height: var(--lh-body); color: var(--navy); margin-top: var(--space-3); } .faq-grid { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); } .faq-item { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; } .faq-question { width: 100%; padding: var(--space-5) var(--space-8); background: none; border: none; font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--navy); text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); letter-spacing: var(--ls-cta); line-height: 1.4; } .faq-icon { width: var(--space-10); height: var(--space-10); border: 2px solid var(--gray-light); border-radius: 50%; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; } .faq-icon::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); margin-top: -3px; } .faq-item.open .faq-icon { border-color: transparent; } .faq-item.open .faq-icon::after { content: 'X'; border: none; width: auto; height: auto; transform: none; margin-top: 0; font-size: var(--text-base); color: var(--ink-2); font-weight: var(--font-normal); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-answer-inner { padding: 0 var(--space-8) var(--space-5); font-size: var(--text-lg); line-height: 1.7; color: var(--navy); } .faq-answer-inner p { margin-bottom: var(--space-4); } .faq-answer-inner p:last-child { margin-bottom: 0; } .faq-link { font-size: var(--text-lg); line-height: 1.7; color: var(--navy); text-decoration: none; display: block; margin-top: var(--space-2); transition: color var(--transition-fast); } .faq-link:hover { color: var(--pink); } .faq-item.open .faq-answer { max-height: 800px; } @media (max-width: 768px) { .faq-section .faq-layout { flex-direction: column; gap: var(--space-2); padding: 0 30px; } .faq-section { padding: var(--space-8) 0; } .faq-header { position: sticky; top: 0; z-index: 2; margin-bottom: 0; padding: 10px 0; background: var(--yellow); } .faq-title { font-size: var(--section-heading-mobile); line-height: var(--section-heading-mobile-lh); margin-bottom: 10px; } .faq-subtitle { font-size: 14px; line-height: 1.5; } .faq-grid { gap: var(--space-2); padding: 0; } .faq-question { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); } .faq-icon { width: var(--space-6); height: var(--space-6); min-width: var(--space-6); } .faq-answer-inner { padding: 0 var(--space-5) var(--space-4); font-size: 14px; line-height: 1.3; font-weight: var(--font-weight-light); } } /* ============================================ FOOTER ============================================ */ .footer { background: var(--navy); color: var(--white); padding: 96px var(--space-8) 64px; position: relative; z-index: 5; } .footer-inner { max-width: 1425px; margin: 0 auto; } .footer-main { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); margin-bottom: var(--space-10); } .footer-logo { display: block; flex: 0 0 auto; } .footer-logo-img { height: 56px; width: auto; } .footer-columns { display: flex; gap: var(--space-16, 64px); } .footer-social { display: flex; align-items: center; gap: 16px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: rgba(255, 255, 255, 0.6); transition: color var(--transition-fast); } .footer-social a:hover { color: var(--white); } .footer-social a svg { display: block; width: 20px; height: 20px; } .footer-social-placeholder { cursor: default; color: rgba(255, 255, 255, 0.6); } .footer-col h4 { font-size: 20px; font-weight: var(--font-semibold); line-height: 28px; margin-bottom: 18px; color: var(--white); cursor: default; display: flex; align-items: center; justify-content: flex-start; gap: 0; } .footer-chevron { display: none; flex-shrink: 0; transition: transform 0.25s ease; stroke: var(--white); stroke-width: 3; opacity: 1; margin-left: 8px; } .footer-col.open .footer-chevron { transform: rotate(180deg); } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; } .footer-col a { font-size: 17px; line-height: 22px; color: rgba(255, 255, 255, 0.75); transition: color var(--transition-fast); } .footer-col a:hover { color: var(--white); } .footer-bottom { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; justify-content: flex-start; align-items: center; gap: 30px; font-size: 14px; line-height: 19px; color: rgba(255, 255, 255, 0.7); } /* Mobile copyright span is hidden by default; shown only at 768–1366px where it replaces the full desktop registration text. */ .footer-copyright--mobile { display: none; } /* ---------- Collapsed footer (non-home pages): compact one-row layout at ≥1200px (desktop). Below 1200px every page renders the same full footer so mobile/tablet look identical on all pages. ---------- */ @media (min-width: 1200px) { .footer--collapsed { padding: 20px var(--space-8); } .footer--collapsed .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .footer--collapsed .footer-logo { display: none; } .footer--collapsed .footer-main { margin: 0; flex: 0 0 auto; order: 2; } .footer--collapsed .footer-bottom { order: 1; display: flex; align-items: center; justify-content: flex-start; gap: 30px; margin: 0; padding: 0; border-top: 0; flex: 0 1 auto; min-width: 0; } .footer--collapsed .footer-bottom > span { flex: 0 0 auto; } .footer--collapsed .footer-columns { gap: var(--space-8); align-items: center; } .footer--collapsed .footer-col { position: relative; } .footer--collapsed .footer-col h4 { font-size: 14px; font-weight: var(--font-semibold); line-height: 1; margin: 0; cursor: pointer; } .footer--collapsed .footer-col h4 .footer-chevron { display: inline-block; width: 10px; height: 10px; margin-left: 6px; } .footer--collapsed .footer-col ul { position: absolute; bottom: calc(100% + 12px); left: 0; min-width: 220px; /* Cap width so the dropdown can never exceed the viewport (minus a small breathing margin), even at narrow window widths. Without this, long entries like "Do Not Sell or Share My Personal Information" force the menu wider than the screen and the right edge gets clipped. */ max-width: calc(100vw - 24px); padding: 14px 18px; background: var(--navy); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; box-shadow: var(--shadow-xl-heavy); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 20; } /* The rightmost column ("Useful links") sits flush against the right edge of the footer; anchoring its dropdown with left:0 makes it overflow off-screen and get clipped by the viewport. Anchor the last column's dropdown to the right edge of the trigger instead, so it expands inward (leftward) and stays fully visible. */ .footer--collapsed .footer-col:last-child ul { left: auto; right: 0; } .footer--collapsed .footer-col.open ul { opacity: 1; visibility: visible; transform: translateY(0); } } /* ============================================ SHORT COPYRIGHT TEXT AT TABLET+ ============================================ */ @media (min-width: 768px) and (max-width: 1366px) { .footer-copyright--desktop { display: none; } .footer-copyright--mobile { display: inline; } } /* ============================================ MOBILE DESKTOP BANNER ============================================ */ .mobile-desktop-banner { display: none; background: var(--navy); color: white; text-align: center; padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium); position: relative; } .mobile-desktop-banner.dismissed { display: none !important; } .mobile-desktop-banner button { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1; } /* ============================================ MOBILE NAV + MENU (hidden on desktop) ============================================ */ .mobile-search-btn, .mobile-profile-btn, .mobile-menu-btn { background: none; border: none; cursor: pointer; color: var(--white); text-decoration: none; padding: 4px; display: none; align-items: center; justify-content: center; } .mobile-menu-btn .close-icon { display: none; } .mobile-menu-btn.open .menu-icon { display: none; } .mobile-menu-btn.open .close-icon { display: block; } .mobile-menu-overlay { display: none; position: fixed; top: var(--topbar-height); left: 16px; right: auto; bottom: auto; background: var(--white); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 180px; padding: var(--space-2) 0; z-index: 999; } .mobile-menu-overlay.open { display: block; } .mobile-menu-nav { display: flex; flex-direction: column; } .mobile-menu-nav a { font-size: var(--font-size-sm); font-weight: 400; color: var(--navy); text-decoration: none; padding: 5px 16px; transition: background 150ms ease; } .mobile-menu-nav a:hover { background: var(--gray-lightest); } .mobile-menu-divider { height: 1px; background: var(--gray-lighter); margin: 8px 16px; } .mobile-menu-signup { align-self: flex-start; margin: 4px 16px; font-size: var(--font-size-sm); padding: 10px 28px; } body.mobile-menu-open { overflow: hidden; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 900px) { .footer { padding: 48px 32px; } .footer-main { flex-direction: column; } .footer-columns { gap: var(--space-8); } } @media (max-width: 768px) { .mobile-desktop-banner { display: block; } .top-bar-right { display: flex; order: 3; gap: 0; } .top-bar-right > .top-bar-link, .top-bar-right > .btn-signup { display: none; } .top-bar-right > .top-bar-user { display: flex; } .top-bar { height: 70px; padding: 0 16px; } .top-bar.transparent { background: transparent; } .logo-area { order: 2; flex: 1; justify-content: flex-start; margin-left: 12px; } .logo-full { display: none !important; } /* Mobile default (used on inner pages over white content): show the BLACK wordmark so it's readable. The home page overrides this in home.css to flip to the WHITE wordmark over the pink gradient. */ .logo-wordmark.logo-inverse { display: none; } .logo-wordmark.logo-color { display: block; } .top-bar.white .logo-wordmark.logo-inverse { display: none; } .top-bar.white .logo-wordmark.logo-color { display: block; } .logo-wordmark { height: 16px; } .logo-symbol { display: none; } .mobile-menu-btn { display: flex; order: 1; } .mobile-search-btn { display: none; } } @media (max-width: 767px) { /* Mobile footer: vertical left-aligned stack matching the offcanvas nav style (border-bottom dividers, 14px semibold). Accordion expand kept; chevron hidden; links stay left so the chatbot button (bottom-right) doesn't overlap. Breakpoint is 767px (not 768px) so iPad (768px+) gets the collapsed desktop footer layout instead of this mobile accordion. */ .footer { padding: 6px 20px; } .footer-logo, .footer-bottom { display: none; } .footer-main { flex-direction: column; gap: 0; margin-bottom: 0; } .footer-columns { display: flex; flex-direction: column; gap: 0; align-items: stretch; } .footer-col { text-align: left; } .footer-col h4 { font-size: 14px; font-weight: 600; padding: 10px 0; margin: 0; justify-content: flex-start; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .footer-chevron { display: none; } .footer-col ul { gap: 2px; max-height: 0; overflow: hidden; transition: max-height 250ms ease, padding 250ms ease; } .footer-col.open ul { max-height: 240px; padding: 4px 0 6px; } .footer-col a { font-size: 12px; line-height: 1.4; } /* Non-home pages: match home-page mobile footer exactly — columns side by side, links hidden, footer-bottom visible. */ .footer--collapsed .footer-columns { flex-direction: row; align-items: flex-start; gap: 10px; } .footer--collapsed .footer-col { position: static; text-align: left; } .footer--collapsed .footer-col h4 { font-size: 12px; font-weight: 500; padding: 8px 4px; margin: 0; justify-content: flex-start; line-height: inherit; white-space: nowrap; cursor: pointer; } .footer--collapsed .footer-col ul { display: none; } .footer--collapsed .footer-bottom { display: flex; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 10px; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } } /* Program Access Modal — chrome moved to canonical Tier B selectors (#programAccessOverlay scope) in static/css/work.css. May 9 2026. The .mw-modal-error helper for inline form errors lives there too. */ /* ============================================ SECTION TITLE & DESC Universal heading/description pattern ============================================ */ .page-section { max-width: var(--landing-container); margin: 0 auto; padding: var(--space-20) var(--landing-container-padding); } /* Section-based hero pages (/pricing, /company, /legal, /products, /partner, /support). Reads the canonical --page-hero-pad-top token so the heading sits at the SAME y-distance from page top as the listing-hero pages (/free, /explore, /work). Christine 5 May 2026 — single source of truth lives in tokens/spacing.css. */ .page-section-hero { padding-top: var(--page-hero-pad-top); } @media (max-width: 768px) { .page-section-hero { padding-top: var(--page-hero-pad-top-mobile); } } .page-section-header { text-align: center; margin-bottom: var(--space-12); } .section-desc { font-size: var(--text-lg); color: var(--navy); line-height: 1.7; } .card-title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--navy); } .card-desc { font-size: var(--text-base); color: var(--ink-2); line-height: 1.6; } .card-meta { font-size: var(--text-sm); color: var(--ink-2); } .card-link { color: var(--navy); font-weight: var(--font-medium); text-decoration: none; transition: color var(--transition-fast); } .card-link:hover { color: var(--pink); } /* ============================================ TEXT LINK (arrow link pattern) ============================================ */ .text-link { font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--navy); text-decoration: none; transition: color var(--transition-fast); display: inline-flex; align-items: center; gap: var(--spacing-2xs); } .text-link:hover { color: var(--pink); } .text-link .link-arrow { display: inline-block; transition: transform 150ms ease; } .text-link:hover .link-arrow { transform: translateX(3px); } .btn-outline-pill { display: inline-flex; align-items: center; gap: var(--spacing-2xs); padding: var(--space-2) var(--space-4); border: 1px solid var(--gray-light); border-radius: var(--radius-full, 999px); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--navy); text-decoration: none; background: var(--white); transition: border-color var(--transition-fast), color var(--transition-fast); margin-top: var(--space-4); } .btn-outline-pill:hover { border-color: var(--pink); color: var(--pink); } .btn-outline-pill .link-arrow { display: inline-block; transition: transform 150ms ease; } .btn-outline-pill:hover .link-arrow { transform: translateX(3px); } /* ============================================ SHARED COMPONENTS Single source of truth — do not redefine elsewhere ============================================ */ /* --- Buttons --- */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-md) var(--space-xl); background: var(--white); color: var(--navy); border: 1px solid var(--gray-light); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-weight-medium); cursor: pointer; text-decoration: none; transition: all var(--transition-fast); } .btn-secondary:hover { background: var(--gray-background); } .btn-icon { width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .btn-icon:hover { background: var(--gray-background); } .btn-text { background: none; border: none; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .btn-text:hover { background: var(--gray-background); } .btn-text.danger { color: var(--negative); } /* --- Toggle Switch --- */ .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--gray-light); transition: 0.3s; border-radius: 26px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: var(--white); transition: 0.3s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--navy); } input:checked + .toggle-slider:before { transform: translateX(22px); } input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; } /* --- Modal --- */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: none; align-items: center; justify-content: center; z-index: 1000; } .modal-overlay.active { display: flex; } .modal { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 90vh; overflow: hidden; box-shadow: var(--shadow-xl); } .modal.modal-wide { max-width: 760px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-xl); border-bottom: 1px solid var(--gray-light); } .modal-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); } .modal-close { background: none; border: none; cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-sm); color: var(--gray-mid); } .modal-close:hover { background: var(--gray-background); color: var(--navy); } .modal-body { padding: var(--space-xl); max-height: 65vh; overflow-y: auto; } .modal-footer { display: flex; justify-content: flex-end; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--gray-light); background: var(--gray-background); } /* --- Form Group --- */ .form-group { margin-bottom: var(--space-lg); } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--navy); margin-bottom: var(--space-xs); } /* --- Status Badge --- */ .status-badge { display: inline-block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-medium); } .status-badge.active, .status-badge.completed, .status-badge.paid { color: var(--positive); } .status-badge.pending, .status-badge.in_progress { color: var(--neutral); } .status-badge.failed, .status-badge.inactive { color: var(--negative); } /* --- Toast --- */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; } .toast { padding: var(--space-md) var(--space-xl); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); font-size: var(--text-sm); animation: slideIn 0.3s ease; } .toast.success { background: var(--positive); color: var(--white); } .toast.error { background: var(--negative); color: var(--white); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* --- Section Title (shared across all pages) --- Single source of truth for the page/section heading token. Resolves to 52px semibold on desktop (was previously overridden in home.css, which only loaded on /free + /explore — leaving /pricing and /work at the smaller --title-1 fallback). Pulling the size + line-height tokens in here means every page that uses .section-title now gets the same heading regardless of which page stylesheet happens to be loaded. */ .section-title { font-size: var(--section-heading); font-weight: var(--font-weight-semibold); color: var(--navy); line-height: var(--section-heading-lh); margin-bottom: var(--space-6); } /* Mobile: shrink the shared page-title size from the 52px desktop value down to 32px so headings don't wrap aggressively on narrow viewports. Applies wherever .section-title is used. (Moved here from home.css so it applies on every page, not just /free + /explore.) */ @media (max-width: 768px) { .section-title { font-size: var(--section-heading-mobile); line-height: var(--section-heading-mobile-lh); } } /* --- Language Switcher (navbar) --- */ .nav-language-switcher { position: relative; } .nav-lang-trigger { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: transparent; border: none; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--white); cursor: pointer; transition: opacity 0.2s; } .nav-lang-trigger:hover { opacity: 0.7; } .nav-lang-trigger svg { flex-shrink: 0; } .nav-lang-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); min-width: 220px; max-height: 360px; overflow-y: auto; z-index: 1001; padding: var(--space-1) 0; } .nav-lang-dropdown.open { display: block; } .nav-lang-option { display: flex; flex-direction: column; width: 100%; padding: var(--space-1-5) var(--space-4); background: transparent; border: none; text-align: left; cursor: pointer; transition: background 0.15s; font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--lh-nav); } .nav-lang-option:hover { background: var(--gray-background); } .nav-lang-option.active { background: var(--gray-background); } .nav-lang-option.active .lang-native { color: var(--color-pink); } .lang-native { font-size: var(--body-2); font-weight: var(--font-medium); color: var(--navy); } .nav-lang-divider { height: 1px; background: var(--gray-light); margin: var(--space-1) 0; } /* ============================================================ GLOBAL MOBILE BEST-PRACTICES - Prevent iOS auto text-size bumps when rotating - Cleaner tap interactions (no grey flash) - Prevent horizontal scroll bugs from oversized children - Ensure form inputs don't trigger iOS zoom (16px floor) - Comfortable touch target floor for nav/buttons ============================================================ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } @media (max-width: 768px) { html, body { overflow-x: hidden; } input, textarea, select { font-size: 16px !important; } /* Touch target floor for primary controls */ .top-bar a, .top-bar button, .landing-hero-btn, .faq-question, .hp-pricing-strip-link, .hp-pricing-pro-link { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }