/* ---------- Self-hosted font ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-400.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-500.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-600.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-700.woff2) format('woff2'); } /* ---------- Tokens: "Nova" redesign (Sep 2026) ---------- Replaces the warm orange/violet "Aurora" palette with a cooler, two-accent system built around teal as the primary accent and indigo as a secondary accent used sparingly for contrast (badges, secondary glows, gradient stops). Darks now carry a faint blue undertone instead of the previous violet one. Radii are pulled back down (20px -> 16px lineage) for a crisper, more geometric feel than the previous rounder pass — every component below already keys off these variables, so this one change cascades site-wide. Headings move to Sora (loaded via Google Fonts in each page's ) via the --font-serif token, which every h1/h2/h3/em rule already references. The variable NAMES are kept as-is (--accent, --violet, --gradient-aurora, etc.) even though the hue families changed, so every existing rule that references them repaints automatically without needing to be touched individually. */ :root { --bg-dark: #06090f; --bg-dark-2: #0d1420; --panel-dark: #121b28; --accent: #06b6d4; --accent-light: #67e8f9; --accent-dark: #0e7490; --accent-soft: #ecfeff; --accent-soft-border: #a5f3fc; --accent-contrast: #ffffff; --violet: #facc15; --violet-light: #fde047; --violet-dark: #854d0e; --violet-soft: #fefce8; /* Two further solid accent colours (Sep 2026 "multi-colour" pass) — turquoise (--accent) and yellow (--violet) stay the primary/secondary pair; these two round out a small, semantic 4-colour system mapped to Edunexa's four core modules: CRM = turquoise, Finance = yellow, Projects = indigo, HR/Team = coral. Used wherever a section needs to visually distinguish more than two categories (module icons, the interactive dashboard demo, FAQ categories) without falling back to a gradient. */ --indigo: #6366f1; --indigo-dark: #4338ca; --indigo-soft: #eef2ff; --coral: #f97316; --coral-dark: #c2410c; --coral-soft: #fff7ed; /* Solid, not a gradient — kept under the old token name so every rule below that already references var(--gradient-aurora) repaints as a flat brand-colour fill without needing to be touched individually (Sep 2026 "solid Material" pass: dropped every gradient fill/glow sitewide in favour of flat colour + elevation shadows). */ --gradient-aurora: var(--accent); --ink: #0a0a0f; --ink-soft: #5c5866; --ink-on-dark: #ecebf3; --ink-on-dark-soft: #9f9bac; --paper: #ffffff; --paper-soft: #f5f7fa; --border: #e3e7ee; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --shadow-sm: 0 8px 24px -12px rgba(6,9,15,0.16); --shadow-md: 0 24px 56px -24px rgba(6,9,15,0.28); --shadow-lg: 0 60px 120px -48px rgba(6,9,15,0.45); /* Neutral elevation, not a colour-matched glow — kept under the old token name so every rule below already using it repaints as plain Material-style elevation rather than a coloured halo. */ --shadow-glow: 0 16px 32px -12px rgba(6,9,15,0.35); --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Display face for every h1/h2/h3/em on the site — see file header. */ --font-serif: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Matches the hero's dark base so an elastic overscroll bounce at the top of the page reveals this instead of the browser's default white behind the floating navbar. */ background: var(--bg-dark); /* `overflow-x` belongs here, not on `body`: setting it on `body` makes Chrome/WebKit treat `body` as its own scroll container instead of the real viewport, which breaks `position: sticky` on `.navbar` — it renders the sticky `top` offset as a permanent gap even at scroll 0. */ overflow-x: hidden; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.03em; } em { font-family: var(--font-serif); font-style: normal; font-weight: 700; background: var(--gradient-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero em, .workflow__title em, .cta-card__main em { filter: brightness(1.25); } /* ---------- Gradient text utility ---------- For a headline word/phrase that needs the aurora treatment outside an (e.g. inside a ). */ .grad-text { background: var(--gradient-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Inline highlight mark ---------- A second way of picking out a phrase within a sentence, alongside the italic-serif "em" accent used in headings: a flat highlighter-pen stripe sat behind the lower two-fifths of the text rather than a colour or weight change, so the emphasis reads as something drawn onto the copy after the fact rather than a font-level treatment. Used sparingly, one phrase per paragraph at most, scattered through body copy across every section. `--invert` is the same device recoloured for use on the site's dark sections (hero, workflow, CTA). */ mark, .hl { background: linear-gradient(to bottom, transparent 60%, var(--accent-soft) 60%); color: inherit; padding: 0 1px; } .hl--invert { background: linear-gradient(to bottom, transparent 60%, rgba(6,182,212,0.32) 60%); } ::selection { background: var(--accent-soft); color: var(--accent-dark); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .accent { color: var(--accent); } /* ---------- Buttons ---------- Pill radius across the board now (was a 4px near-square), and the primary CTA carries the aurora gradient plus a colour-matched glow shadow instead of a flat fill — the one element on every page that should visibly announce the new palette. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; white-space: nowrap; transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease, opacity 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn--accent { background: var(--gradient-aurora); color: var(--accent-contrast); box-shadow: var(--shadow-glow); } .btn--accent:hover { box-shadow: var(--shadow-lg); } .btn--light { background: var(--paper); color: var(--ink); } .btn--light:hover { opacity: 0.9; } .btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.35); } .btn--ghost:hover { background: rgba(255,255,255,0.08); } .btn--dark { background: var(--ink); color: var(--paper); } .btn--dark:hover { opacity: 0.85; } .btn--outline-dark { background: transparent; color: var(--ink); border: 1px solid var(--border); width: 100%; margin-top: 20px; } .btn--outline-dark:hover { border-color: var(--ink); } .btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn--outline:hover { border-color: var(--ink); } .link-muted { color: var(--ink-on-dark); font-weight: 600; font-size: 0.95rem; } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } /* ---------- Navbar: floating glass pill ---------- NOTE for future edits: keep `backdrop-filter` off `.navbar__inner` whenever `.navbar.is-open` — `backdrop-filter` (like `filter` and `transform`) creates a new containing block for `position: fixed` descendants, and the fullscreen mobile menu below relies on `.navbar__links`/`.navbar__actions` being fixed against the *viewport*. Losing that guard traps the mobile menu inside this 68px bar again. */ .navbar { position: sticky; /* `top` must be 0, not a positive offset: `.navbar` is the first element on the page, so its static (unscrolled) position is already above any positive `top` value — the sticky algorithm has to satisfy "stay at least `top`px from the viewport edge" even at scroll 0, so it was rendering permanently shifted down by that amount, exposing `body`'s background as a gap above it on every single page load. The floating look now comes from real padding below, painted with this element's own background instead of an empty gap. */ top: 0; z-index: 50; padding: 14px 16px 0; background: var(--bg-dark); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; max-width: 1180px; margin: 0 auto; padding: 0 12px 0 22px; background: rgba(18, 16, 25, 0.72); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 40px -22px rgba(0,0,0,0.65); transition: height 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .navbar.is-open .navbar__inner { backdrop-filter: none; -webkit-backdrop-filter: none; } .brand { display: flex; align-items: center; gap: 10px; color: var(--paper); font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; flex: none; } .brand__mark { width: 27px; height: 27px; border-radius: 8px; flex: none; transition: transform 0.2s ease; } .brand:hover .brand__mark { transform: rotate(-6deg); } .navbar__links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); border-radius: 999px; padding: 5px; } .navbar__links a { color: var(--ink-on-dark-soft); font-weight: 600; font-size: 0.88rem; padding: 8px 16px; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease; } .navbar__links a:hover { color: var(--paper); background: rgba(255,255,255,0.08); } .navbar__links a.is-active { color: var(--paper); background: var(--gradient-aurora); } .navbar__actions { display: flex; align-items: center; gap: 10px; flex: none; } .navbar__actions .btn--light { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.22); padding: 10px 20px; } .navbar__actions .btn--light:hover { background: rgba(255,255,255,0.08); opacity: 1; border-color: rgba(255,255,255,0.4); } .navbar__actions .btn--accent { padding: 10px 20px; font-size: 0.9rem; background: var(--accent); box-shadow: none; } .navbar__actions .btn--accent:hover { background: var(--accent-dark); box-shadow: none; } .navbar__toggle { display: none; } .navbar__mobile-link, .navbar__mobile-pricing { display: none; } /* ---------- Navbar: plain light bar (homepage only) ---------- A second navbar skin — flat white bar, plain text links, no floating glass pill — used only where `navbar--light` is added to the markup (currently just index.html). Every other page keeps the dark floating pill navbar above untouched. Only the mobile fullscreen menu keeps its dark styling regardless of variant — a dark full-bleed overlay reads fine even off a light desktop bar, and it means none of the .is-open rules below need a light-mode counterpart. */ .navbar--light { background: var(--paper); padding: 0; border-bottom: 1px solid var(--border); } .navbar--light .navbar__inner { height: 76px; background: none; border: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0 12px; } .navbar--light.navbar--scrolled .navbar__inner { height: 64px; box-shadow: 0 1px 0 var(--border); background: none; } .navbar--light .brand { color: var(--ink); } .navbar--light .navbar__links { background: none; border: none; padding: 0; gap: 4px; justify-content: flex-start; margin-left: 8px; } .navbar--light .navbar__links a { color: var(--ink-soft); border-radius: var(--radius-sm); } .navbar--light .navbar__links a:hover { color: var(--ink); background: var(--paper-soft); } .navbar--light .navbar__links a.is-active { color: var(--accent-dark); background: var(--accent-soft); } .navbar--light .navbar__actions .btn--light { background: none; color: var(--ink); border: none; padding: 10px 16px; } .navbar--light .navbar__actions .btn--light:hover { background: var(--paper-soft); border-color: transparent; } /* ---------- Hero (homepage): plain white hero + colour-band stage ---------- A structurally different hero from `.hero`/`.hero--split` below (which other pages' compact heroes still use) — left-aligned plain black headline on white, flat buttons, a checkmark list, no eyebrow chip, no gradient text — then the product screenshot sits on its own full-bleed solid-colour band underneath rather than beside the copy, with the screenshot nudged up to bleed slightly into the white hero above it. */ .hero-zoho { background: var(--paper); padding: 72px 0 0; } .hero-zoho__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 32px; } .hero-zoho__visual { display: flex; justify-content: center; } .hero-zoho__visual svg { max-width: 100%; height: auto; } @media (max-width: 980px) { .hero-zoho__grid { grid-template-columns: 1fr; } .hero-zoho__visual { display: none; } } .hero-zoho__title { font-size: clamp(2.3rem, 4.6vw, 3.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); max-width: 760px; margin-bottom: 22px; } .hero-zoho__subtitle { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); max-width: 620px; margin-bottom: 30px; } .hero-zoho__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .hero-zoho__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; } .hero-zoho__checklist li { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; } .hero-zoho__checklist li::before { content: '✓'; color: #15803d; font-weight: 800; } .btn--flat-accent { background: var(--accent); color: #fff; } .btn--flat-accent:hover { background: var(--accent-dark); } .hero-stage { background: var(--paper-soft); padding: 26px 0 64px; margin-top: 44px; } .hero-stage .dash-interactive-hint { color: var(--ink-soft); } .hero-stage__screenshot { transform: translateY(-24px); } @media (max-width: 720px) { .hero-stage { padding-top: 16px; } .hero-stage__screenshot { transform: translateY(-12px); } } /* ---------- Hero ---------- */ /* Light by default (Sep 2026 "one theme, every page" pass) — every page using .hero (about/pricing/faq/contact/success) now matches the homepage's plain white hero instead of a separate dark treatment. */ .hero { background: var(--paper); color: var(--ink); padding: 90px 0 0; text-align: center; overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-light); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; margin-bottom: 22px; padding: 7px 16px; border-radius: 999px; background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.28); } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-aurora); flex: none; } .eyebrow--dark { color: var(--accent-dark); background: rgba(6,182,212,0.08); border-color: rgba(6,182,212,0.18); } .hero__title { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.15; max-width: 820px; margin: 0 auto 24px; } .hero__subtitle { max-width: 620px; margin: 0 auto 34px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; } .hero__actions { display: flex; justify-content: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .hero__note { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 60px; } .hero--compact { padding: 80px 0 90px; } .hero--compact .hero__subtitle { margin-bottom: 0; } /* ---------- Hero: split layout (home page) ---------- Copy on the left, a live-dashboard mock on the right, rather than a single centred column — the previous hero's shape. Text is left-aligned and un-centred within its half; the visual half is hidden below the point where the two columns would otherwise get too cramped to read. */ .hero--split { text-align: left; padding: 64px 0 0; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: 48px; padding-bottom: 64px; } .hero--split .eyebrow { margin-bottom: 18px; } .hero--split .hero__title { margin: 0 0 22px; max-width: none; font-size: clamp(2.1rem, 4vw, 2.9rem); } .hero--split .hero__subtitle { margin: 0 0 16px; max-width: 540px; } .hero--split .hero__subtitle:last-of-type { margin-bottom: 30px; } .hero--split .hero__actions { justify-content: flex-start; margin-bottom: 14px; } .hero--split .hero__note { margin-bottom: 0; } .hero__visual { position: relative; display: flex; justify-content: center; } .hero__visual .dash-scale { position: relative; z-index: 1; } @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero__visual { display: none; } .hero--split { text-align: center; } .hero--split .hero__subtitle { margin-left: auto; margin-right: auto; } .hero--split .hero__actions { justify-content: center; } } /* ---------- Checkout modal ---------- */ .checkout-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.6); padding: 24px; } .checkout-modal.is-open { display: flex; } .checkout-modal__panel { position: relative; background: var(--paper); border-radius: var(--radius-lg); width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto; padding: 20px; } .checkout-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); font-size: 1.3rem; line-height: 1; cursor: pointer; z-index: 2; } .checkout-modal__status { text-align: center; color: var(--ink-soft); font-size: 0.92rem; padding: 60px 20px; } .checkout-modal__status--error { color: #b42318; } .checkout-modal__status[hidden] { display: none; } /* ---------- Scroll-reveal (site-wide) ---------- "Expo-out" easing plus a slight scale-in reads as more considered than a flat linear/ease fade — used across every [data-reveal] target site -wide (see assets/js/main.js's auto-tag list and assets/js/scroll-fx.js for the parallax/counter siblings of this system). Two directional variants (data-reveal="left" / "right") are available for rows that read better sliding in from a side than rising from below, e.g. the alternating .tour-row feature-tour entries. */ [data-reveal] { opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal="left"] { transform: translateX(-36px) scale(0.98); } [data-reveal="right"] { transform: translateX(36px) scale(0.98); } [data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); } [data-reveal="left"].is-visible, [data-reveal="right"].is-visible { transform: translateX(0) scale(1); } [data-reveal].is-visible:nth-child(2) { transition-delay: 0.08s; } [data-reveal].is-visible:nth-child(3) { transition-delay: 0.16s; } [data-reveal].is-visible:nth-child(4) { transition-delay: 0.24s; } [data-reveal].is-visible:nth-child(5) { transition-delay: 0.32s; } [data-reveal].is-visible:nth-child(6) { transition-delay: 0.4s; } [data-reveal].is-visible:nth-child(7) { transition-delay: 0.48s; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-visible { opacity: 1; transform: none; transition: none; } } /* ---------- Parallax (site-wide) ---------- Elements tagged data-parallax="" (e.g. "0.15") are translated vertically by assets/js/scroll-fx.js as the page scrolls, at a fraction of the scroll speed — the classic "moves slower than the page" depth cue. will-change hints the browser to promote the layer ahead of the first transform write, avoiding a jank frame on the first scroll event. JS skips wiring this up entirely under prefers-reduced-motion, so no motion query is needed here. */ [data-parallax] { will-change: transform; } /* ---------- Stat strip (animated counters) ---------- A compact row of large numbers that count up from 0 when scrolled into view (assets/js/scroll-fx.js reads data-counter as the target integer). Sits directly under the hero on the homepage — deliberately built from true, structural facts about the product (module count, guarantee length, one-off pricing) rather than invented social-proof metrics. */ .stat-strip { padding: 56px 0 80px; background: var(--bg-dark); } .stat-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); overflow: hidden; } .stat-strip__item { background: var(--bg-dark); padding: 30px 20px; text-align: center; } .stat-strip__num { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-family: var(--font-serif); font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; background: var(--gradient-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-strip__label { display: block; margin-top: 8px; color: var(--ink-on-dark-soft); font-size: 0.82rem; line-height: 1.4; } @media (max-width: 720px) { .stat-strip { padding-bottom: 56px; } .stat-strip__grid { grid-template-columns: repeat(2, 1fr); } .stat-strip__item { padding: 24px 14px; } } /* ---------- Scroll-reveal: mobile ---------- On phones each reveal target is full-width and scrolled to individually (rather than several sitting side by side in the same viewport at once like on desktop), so it can afford a more noticeable, tactile motion — a bigger rise combined with a scale-in — without feeling busy. */ @media (max-width: 720px) { [data-reveal] { transform: translateY(40px) scale(0.96); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].is-visible { transform: translateY(0) scale(1); } } @media (max-width: 720px) and (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------- Scroll progress bar ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); z-index: 200; transition: width 0.1s linear; } @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } } /* ---------- Navbar: tightens and gains more contrast on scroll ---------- */ .navbar--scrolled .navbar__inner { height: 58px; background: rgba(10, 9, 14, 0.88); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 48px -20px rgba(0,0,0,0.75); } /* ---------- Hero dashboard preview: peek carousel ---------- Each .dash is a fixed-size decorative "screenshot" of the app, not a real reflowing layout — like the real dashboard.php it echoes, it's built once at a natural 1100x~650px desktop size and scaled down as a single unit, since reflowing a sidebar+table layout below ~600px stops being legible regardless of how the CSS is written. The four slides sit side by side in .dash-peek__track, all simultaneously in the DOM (unlike the module carousel above them) — a peek carousel's whole point is that the previous/next slide is partially visible at the edges, dimmed and slightly scaled down, while the active one is centered at full size. The inline script computes each item's transform scale (to fit the fixed 1100px .dash into whatever width .dash-peek__item actually has) and the track's translateX (to center the active item), both from real measured widths rather than hand-tuned breakpoints, so it stays correct at any viewport size. */ .dash-peek { width: 100%; max-width: 1100px; margin: 60px auto 0; overflow: hidden; } .dash-peek__track { display: flex; gap: 16px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .dash-peek__item { /* Same flex-basis for every item, so all four render at the exact same size — the peek effect comes purely from the viewport clipping the neighbours at the edges, not from shrinking them; only opacity marks which one is active. */ flex: 0 0 82%; max-width: 82%; opacity: 0.45; transition: opacity 0.4s ease; } .dash-peek__item--active { opacity: 1; } .dash-scale { overflow: hidden; } .dash { width: 1100px; transform-origin: top left; color: var(--ink); text-align: left; } /* Dot navigation, used by the hero peek carousel below (the only carousel left on the page — see assets/js/carousels.js). */ .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; } .carousel-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--border); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .carousel-dot:hover { background: var(--accent-soft); } .carousel-dot--active { background: var(--accent); transform: scale(1.3); } .carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dash__frame { display: flex; /* Fills whatever height the carousel JS gives .dash (see carousels.js — every slide is stretched to the tallest slide's natural height), so shorter-content slides (e.g. Customers, which has no chart/activity row) get extra blank paper background at the bottom of the sidebar and main columns instead of a gap that shows the page behind them. */ height: 100%; background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 60px 100px -40px rgba(0,0,0,0.6); overflow: hidden; } .dash__sidebar { width: 190px; flex: none; background: var(--paper-soft); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; } .dash__sidebar-brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 22px; padding: 0 6px; } .dash__nav { display: flex; flex-direction: column; gap: 3px; } .dash__nav-item { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); } .dash__nav-item--active { background: var(--accent-soft); color: var(--accent-dark); } /* Interactive hero dashboard (assets/js/dashboard-demo.js) — the tour-row and cta-band mockups elsewhere on the page stay static since their copy is written to match one fixed panel; only #heroDash swaps content. */ .dash--interactive .dash__nav-item { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .dash--interactive .dash__nav-item:hover:not(.dash__nav-item--active) { background: rgba(6,182,212,0.08); color: var(--ink); } .dash--interactive .dash__nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Active-panel highlight recolours to match whichever module is open (set via a data-driven class in assets/js/dashboard-demo.js), rather than always showing turquoise regardless of which section you're on. */ .dash--color-finance .dash__nav-item--active { background: var(--violet-soft); color: var(--violet-dark); } .dash--color-projects .dash__nav-item--active { background: var(--indigo-soft); color: var(--indigo-dark); } .dash--color-hr .dash__nav-item--active { background: var(--coral-soft); color: var(--coral-dark); } .dash--interactive .dash__main { transition: opacity 0.18s ease; } .dash--interactive .dash__main.is-switching { opacity: 0.4; } .dash-interactive-hint { text-align: center; color: var(--ink-on-dark-soft); font-size: 0.78rem; font-weight: 600; margin: 0 0 14px; } .dash__upgrade { margin-top: auto; background: var(--ink); color: var(--paper); border-radius: var(--radius-md); padding: 14px; } .dash__upgrade p { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; } .dash__upgrade > span { font-size: 0.7rem; color: var(--ink-on-dark-soft); display: block; margin-bottom: 10px; } .dash__upgrade-btn { display: inline-block; background: var(--accent); color: var(--accent-contrast); font-size: 0.74rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; } .dash__main { flex: 1; min-width: 0; padding: 22px 26px; } .dash__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; } .dash__topbar strong { display: block; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; } .dash__topbar span { font-size: 0.8rem; color: var(--ink-soft); } .dash__topbar-cta { display: inline-block; background: var(--accent); color: var(--accent-contrast); font-size: 0.78rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; white-space: nowrap; flex: none; } .dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .dash__stat { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; } .dash__stat span { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 6px; } .dash__stat strong { display: block; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 4px; } .dash__stat em { font-style: normal; font-size: 0.7rem; color: var(--accent-dark); font-weight: 600; } .dash__row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; margin-bottom: 18px; } .dash__highlights { display: flex; flex-direction: column; gap: 14px; } .dash__highlight { flex: 1; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; justify-content: center; } .dash__highlight--accent { background: var(--ink); border-color: var(--ink); color: var(--paper); } .dash__highlight span { display: block; font-size: 0.74rem; margin-bottom: 8px; opacity: 0.75; } .dash__highlight strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; } .dash__chart { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; } .dash__chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 0.82rem; } .dash__chart-head span { color: var(--ink-soft); font-size: 0.74rem; } .dash__chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 90px; } .dash__chart-bars span { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 0 0; } .dash__chart-bars span:nth-child(6) { background: var(--accent); } .dash__activity { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .dash__activity > strong { font-size: 0.82rem; } .dash__activity-item { display: flex; align-items: center; gap: 10px; } .dash__activity-item div { flex: 1; min-width: 0; } .dash__activity-item strong { display: block; font-size: 0.78rem; font-weight: 700; } .dash__activity-item span { font-size: 0.7rem; color: var(--ink-soft); } .dash__activity-item em { font-style: normal; font-size: 0.68rem; color: var(--ink-soft); flex: none; } .dash__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; flex: none; } .dash__table { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .dash__table-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .dash__table-head strong { font-weight: 700; } .dash__table-head span { font-size: 0.76rem; color: var(--accent-dark); font-weight: 700; } .dash__table-row { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 0.8rem; } .dash__table-row:last-child { border-bottom: none; } .dash__table-row--head { color: var(--ink-soft); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* Card view for the "recent items" list inside each hero carousel slide, in place of the table-row layout above. */ .dash__card-grid { padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .dash__mini-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; } .dash__mini-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; font-weight: 700; } .dash__mini-card__top .badge { flex: none; } .dash__mini-card__top-meta { font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); } .dash__mini-card__line { font-size: 0.76rem; color: var(--ink-soft); } .dash__mini-card__amount { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; margin-top: 2px; } /* ---------- Section headings ---------- */ .section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; } .section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.22; } .section-title--center { text-align: center; max-width: 760px; margin: 0 auto 60px; } .section-lede { margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; } /* A second way of presenting a section kicker: instead of a horizontal small-caps line sitting above the heading like every other section on the page, the label runs vertically along a rule to the left of a left-aligned block — a spine, not a banner. One-off treatment, used on a single section so it reads as a deliberate accent rather than a second system competing with the horizontal eyebrow everywhere else. */ .section-head--spine { display: flex; align-items: flex-start; gap: 20px; max-width: 720px; margin: 0 0 56px; text-align: left; } .section-head--spine .eyebrow { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin: 0; padding-right: 2px; border-right: 1px solid var(--border); } .section-head--spine .section-title, .section-head--spine .section-lede { margin-left: 0; } /* ---------- Feature tour ---------- Real screenshot on one side, plain explanation on the other, flipping sides feature to feature — the standard "see it in action" pattern, using the actual dashboard mockups (built once, reused here) rather than an icon-and-blurb summary of them. .tour-row__media holds a full 1100px-wide .dash mockup (see .dash / .dash__frame etc. under "Hero dashboard preview" below) scaled down to fit the column via JS (assets/js/carousels.js's fitTourMedia()), the same measure-then-scale approach already used for the old hero carousel, just without needing every slide to match a shared height this time since each row is independent rather than sitting in a peeking carousel track. */ .tour { padding: 110px 0; background: var(--paper); } .tour-list { display: flex; flex-direction: column; gap: 100px; margin-top: 64px; } .tour-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .tour-row--reverse .tour-row__body { order: 2; } .tour-row--reverse .tour-row__media { order: 1; } .tour-row__index { display: block; font-weight: 800; color: var(--accent); font-size: 0.85rem; letter-spacing: 0.06em; margin-bottom: 14px; } .tour-row__body h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.2; } .tour-row__body > p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin-bottom: 22px; } .tour-row__list { display: flex; flex-direction: column; gap: 10px; } .tour-row__list li { position: relative; padding-left: 24px; color: var(--ink); font-size: 0.96rem; font-weight: 500; line-height: 1.5; } .tour-row__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } /* Each of the four core modules gets its own signature colour, reused consistently everywhere that module shows up (FAQ categories, the interactive dashboard demo) rather than defaulting every module to the same turquoise. */ .tour-row--finance .tour-row__index { color: var(--violet-dark); } .tour-row--finance .tour-row__list li::before { background: var(--violet); } .tour-row--projects .tour-row__index { color: var(--indigo); } .tour-row--projects .tour-row__list li::before { background: var(--indigo); } .tour-row--hr .tour-row__index { color: var(--coral); } .tour-row--hr .tour-row__list li::before { background: var(--coral); } .tour-row__media { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; background: var(--paper); } /* ---------- Workflow ---------- Redesigned (Sep 2026, "yellow/white/turquoise" pass) from a dark, timeline-on-navy panel to a light card grid — the dark-panel treatment was the one piece of the previous redesign the client explicitly disliked. Each step is now its own bordered white card with a gradient-filled number badge, matching the .spec-item card language used in the highlights section rather than a vertical connected line. */ .workflow { padding: 100px 0; background: var(--paper-soft); } .workflow .wrap { max-width: 1080px; } .workflow__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 600; line-height: 1.25; max-width: 720px; margin-bottom: 56px; color: var(--ink); } .workflow-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .workflow-step { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .workflow-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .workflow-step__num { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gradient-aurora); color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 20px; } .workflow-step__body h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: var(--ink); } .workflow-step__body p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; margin: 0; } .workflow__foot { margin-top: 40px; padding-top: 0; border-top: none; color: var(--ink-soft); font-size: 0.95rem; text-align: center; } @media (max-width: 720px) { .workflow-steps { grid-template-columns: 1fr; } } /* ---------- Statement break ---------- A new component type, not a restyle of an existing one: a full-width section that is nothing but a single oversized line of type, no card, no border, no icon. Set bold and tight rather than italic — a flat declarative statement, not a magazine pull-quote — dropped between the redline prose above and the spec grid below as a rhythm break. */ .statement { padding: 130px 24px; text-align: center; background: var(--paper); } .statement__quote { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.25; max-width: 940px; margin: 0 auto; color: var(--ink); } .statement__cite { display: block; margin-top: 30px; font-family: var(--font-sans); font-style: normal; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Why choose us ---------- A slide-deck-style icon grid: soft-tinted circular icon, bold heading, short line of support, on a plain card — deliberately different from the marquee below (a continuous ticker of granular features). This is a flat, scannable "reasons" grid, and replaces an earlier numbered manifesto-list section that covered similar ground. */ .why-us { padding: 100px 0; background: var(--paper-soft); } .why-us__head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .why-us__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--ink); } .why-us__title em { font-style: normal; } .why-us__subtitle { margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; } .why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .why-us__card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 26px; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .why-us__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .why-us__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; } .why-us__card:nth-child(4n+2) .why-us__icon { background: var(--violet-soft); color: var(--violet-dark); } .why-us__card:nth-child(4n+3) .why-us__icon { background: var(--indigo-soft); color: var(--indigo-dark); } .why-us__card:nth-child(4n+4) .why-us__icon { background: var(--coral-soft); color: var(--coral-dark); } .why-us__card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .why-us__card p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0; } @media (max-width: 960px) { .why-us__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .why-us { padding: 64px 0; } .why-us__grid { grid-template-columns: 1fr; } .why-us__card { padding: 28px 22px; } } /* ---------- Highlights (marquee) ---------- A continuously scrolling ticker rather than a static grid: the item list is rendered twice back to back inside .marquee__track (see index.html), and the track animates exactly one set-width to the left, so the loop point is invisible. Pauses on hover/focus so a reader can actually stop and read one, and drops the animation entirely under prefers-reduced-motion (falls back to a manually scrollable strip instead). */ .highlights { padding: 90px 0; background: var(--paper-soft); } .highlights__head { text-align: center; max-width: 640px; margin: 0 auto 50px; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee__track { display: flex; width: max-content; gap: 18px; animation: marquee-scroll 44s linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; } .marquee__track { animation: none; } } .spec-item { flex: 0 0 260px; width: 260px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 22px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .spec-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .spec-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.95rem; margin-bottom: 16px; } /* Rotate through all four accent colours across the ticker instead of every card using the same turquoise icon. */ .spec-item:nth-child(4n+2) .spec-item__icon { background: var(--violet); } .spec-item:nth-child(4n+3) .spec-item__icon { background: var(--indigo); } .spec-item:nth-child(4n+4) .spec-item__icon { background: var(--coral); } .spec-item__label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 10px; } .spec-item__desc { font-size: 0.92rem; line-height: 1.55; color: var(--ink); } /* ---------- Pricing ---------- */ .pricing { padding: 110px 0; background: var(--paper); } .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .price-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 28px; position: relative; overflow: hidden; } .price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--border); } /* Each tier keeps a visible (not just on-hover) accent colour, tied to what that tier newly unlocks, for a clearer sense of progression up the ladder than a single highlighted card alone gives. */ .price-card[data-plan="starter"]::before { background: var(--accent-light); } .price-card[data-plan="growth"]::before { background: var(--accent); } .price-card[data-plan="pro"]::before { background: var(--coral); } .price-card--highlight::before { background: var(--gradient-aurora); } .price-card--highlight { background: var(--bg-dark); color: var(--paper); border-color: transparent; box-shadow: var(--shadow-glow); } .price-card--highlight > * { position: relative; z-index: 1; } .price-card__badge { position: absolute; top: 24px; right: 24px; background: var(--gradient-aurora); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; } /* Tier icon — the module/capability each plan newly unlocks, echoing the same glyph language used in the interactive dashboard demo and hero illustration (◔ customers, ↗ leads, ☺ team, ▥ reports). */ .price-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; background: var(--accent-soft); color: var(--accent-dark); } .price-card[data-plan="pro"] .price-card__icon { background: var(--coral-soft); color: var(--coral-dark); } .price-card--highlight .price-card__icon { background: rgba(255,255,255,0.15); color: #fff; } .price-card__name { font-weight: 700; color: var(--ink-soft); margin-bottom: 14px; } .price-card--highlight .price-card__name { color: var(--ink-on-dark-soft); } .price-card__amount { font-family: var(--font-serif); font-size: 2.3rem; font-weight: 700; margin-bottom: 14px; } .price-card__amount span { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-left: 4px; } .price-card--highlight .price-card__amount span { color: var(--ink-on-dark-soft); } .price-card__desc { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; min-height: 66px; } .price-card--highlight .price-card__desc { color: var(--ink-on-dark); } .price-card__features { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; } .price-card__features li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 0.86rem; line-height: 1.4; } .price-card__features li::before { content: '✓'; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent-dark); font-size: 0.62rem; font-weight: 800; } .price-card--highlight .price-card__features li { color: var(--ink-on-dark); } .price-card--highlight .price-card__features li::before { background: rgba(255,255,255,0.15); color: var(--accent-light); } .price-card .btn--outline-dark { margin-top: 26px; } .price-card--highlight .btn--outline-dark, .price-card--highlight .btn--accent { margin-top: 22px; width: 100%; } .pricing__foot { margin-top: 40px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; } /* ---------- Plan comparison ---------- */ .plan-compare { padding: 105px 0; background: var(--paper-soft); } .plan-compare .section-title { margin-bottom: 12px; } .plan-compare__intro { max-width: 620px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 32px; } .plan-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px; } /* Simplified "spec sheet" comparison table (Sep 2026 "professional" pass) — dropped the sticky header (it was mis-positioning against the extra description row and overlapping content), the colour-band category rows, and the full-column tint on the highlighted plan. Plan name + one-line tagline now live together in a single header cell instead of a separate description row, and category rows are a plain uppercase label with breathing room rather than a coloured banner. */ .plan-compare__table { width: 100%; min-width: 760px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); border-spacing: 0; border-collapse: separate; background: var(--paper); } .plan-compare__table th, .plan-compare__table td { padding: 16px 18px; border-bottom: 1px solid var(--border); text-align: center; font-size: 0.88rem; } .plan-compare__table thead th { padding: 22px 18px 18px; border-bottom: 1px solid var(--border); } .plan-compare__table th:first-child { width: 34%; text-align: left; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft); } .plan-compare__plan-name { display: block; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: var(--ink); } .plan-compare__plan-tagline { display: block; margin-top: 4px; font-size: 0.76rem; font-weight: 500; color: var(--ink-soft); } .plan-compare__table tbody th { color: var(--ink); font-weight: 600; text-align: left; font-size: 0.9rem; } .plan-compare__table tbody tr:last-child th, .plan-compare__table tbody tr:last-child td { border-bottom: 0; } .plan-compare__table tbody tr:hover td { background: var(--paper-soft); } .plan-compare__group th { width: auto !important; padding: 26px 18px 8px !important; color: var(--ink-soft) !important; background: none; font-size: 0.7rem !important; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; border-bottom: none; } .plan-compare__group:first-child th { padding-top: 4px !important; } .plan-compare__yes { color: var(--accent-dark); font-weight: 700; font-size: 1rem; } .plan-compare__no { color: var(--border); font-weight: 400; } .plan-compare__note { margin-top: 18px; color: var(--ink-soft); font-size: 0.85rem; } /* ---------- FAQ ---------- Was a stack of individually bordered/shadowed cards — one more instance of the same white rounded box used for pricing, platform, and highlights. Stripped down to a borderless, ruled index instead: a bigger italic-serif numeral leads each question, and a hairline rule (not a box) separates entries, closer to a printed FAQ page or table of contents than a stack of accordion widgets. Shared between the homepage teaser (.faq) and the standalone FAQ page (.faq-page), since both reuse .faq__item. */ .faq { padding: 110px 0; background: var(--paper-soft); } .faq__wrap { display: grid; grid-template-columns: 340px 1fr; gap: 60px; } .faq__intro .section-lede { margin-bottom: 28px; } .faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .faq__item { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 28px 2px; box-shadow: none; } .faq__item summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; display: flex; align-items: baseline; gap: 4px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item-label { display: flex; align-items: baseline; flex: 1; } .faq__item-num { font-weight: 800; color: var(--accent); font-size: 1.05rem; margin-right: 16px; flex: none; } .faq__item summary::after { content: '+'; font-size: 1.3rem; color: var(--ink-soft); margin-left: auto; flex: none; } .faq__item[open] summary::after { content: '\2013'; color: var(--accent); } .faq__item p { margin: 16px 0 0 31px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; max-width: 640px; } /* ---------- CTA band ---------- Redesigned (Sep 2026, "yellow/white/turquoise" pass): dropped the dashboard-screenshot half entirely — the client didn't want a repeat of the product mockup here — in favour of a single bold, full-width colour panel (the gradient itself is the visual, not a border/glow accent around a white card). Centred content plus a plain-language "what's included" chip row stands in for the picture. */ .cta-band { padding: 100px 0; background: var(--paper); } /* Dark closing panel (Sep 2026 "premium" pass) — a loud full-saturation turquoise fill plus highlighter-stripe text read as "cheap SaaS template," not premium. A deep near-black panel is the more restrained, considered choice here, closer to how Linear/Stripe treat a closing CTA — the module colours in the illustration and pill list do the colour work instead of the background. */ .cta-panel { position: relative; background: var(--bg-dark); border-radius: var(--radius-lg); padding: 80px 48px; text-align: center; overflow: hidden; } .cta-panel__illustration { display: block; margin: 0 auto 30px; } .cta-panel__eyebrow { color: var(--accent-light); background: rgba(6,182,212,0.14); border-color: rgba(6,182,212,0.3); } .cta-panel__title { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; max-width: 720px; margin: 0 auto 18px; } .cta-panel__title .hl { color: var(--accent-light); background: none; } .cta-panel__desc { color: var(--ink-on-dark); font-size: 1.05rem; line-height: 1.65; max-width: 560px; margin: 0 auto 34px; } .cta-panel__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 38px; } .cta-panel__list li { color: var(--ink-on-dark); font-weight: 700; font-size: 0.85rem; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); } .cta-panel__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .cta-panel__note { color: var(--ink-on-dark-soft); font-size: 0.85rem; } @media (max-width: 720px) { .cta-panel { padding: 56px 24px; } } /* ---------- Footer ---------- */ .footer { position: relative; background: var(--bg-dark); color: var(--ink-on-dark); padding: 88px 0 0; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gradient-aurora); opacity: 0.6; } .footer .wrap { position: relative; z-index: 1; } .footer__inner { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; } .brand--footer { margin-bottom: 16px; } .footer__brand p { font-size: 0.9rem; line-height: 1.6; max-width: 260px; } .footer__business-info { display: flex; flex-direction: column; gap: 7px; } .footer__business-info p { margin: 0; } .footer__business-info address { font-size: 0.9rem; font-style: normal; line-height: 1.65; margin: 12px 0 2px; } .footer__business-info a { font-size: 0.9rem; overflow-wrap: anywhere; transition: color 0.15s ease; } .footer__business-info a:hover { color: var(--accent-light); } .footer__heading { color: var(--ink-on-dark-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; } .footer__col { display: flex; flex-direction: column; gap: 16px; } .footer__col a { font-size: 0.92rem; transition: color 0.15s ease; } .footer__col a:hover { color: var(--accent-light); } .footer__bottom { display: flex; justify-content: space-between; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; } .footer__bottom a:hover { color: var(--accent-light); } /* ---------- Cookie notice ---------- */ .cookie-notice { position: fixed; right: 24px; bottom: 24px; z-index: 120; width: min(360px, calc(100vw - 32px)); overflow: hidden; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .cookie-notice__intro { padding: 20px 18px 18px; color: var(--ink); } .cookie-notice__intro h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; } .cookie-notice__intro p { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.55; } .cookie-notice__intro a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; } .cookie-notice__options { padding: 0 18px 16px; color: var(--ink-soft); font-size: 0.82rem; } .cookie-notice__options label { display: flex; align-items: center; gap: 9px; padding: 8px 0; } .cookie-notice__options span { margin-left: auto; font-size: 0.72rem; color: var(--accent-dark); font-weight: 700; } .cookie-notice__actions { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 7px; } .cookie-notice__actions button { width: 100%; min-height: 38px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 800; } .cookie-notice__details { border: 0; background: transparent; color: var(--accent-dark); text-align: right; padding: 5px 8px 8px; } .cookie-notice__details span, .cookie-notice__customise span { float: right; font-size: 1.15rem; line-height: 0.75; } .cookie-notice__allow { border: 1px solid var(--accent); color: var(--accent-contrast); background: var(--accent); } .cookie-notice__customise, .cookie-notice__necessary { border: 1px solid var(--accent); color: var(--ink); background: var(--paper); } .cookie-notice__customise.is-saving { background: var(--accent); color: var(--accent-contrast); } /* ---------- Contact details ---------- */ .contact-details { margin-top: 32px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65; } .contact-details p + p { margin-top: 5px; } .contact-details strong { color: var(--ink); } .contact-details a { color: var(--accent-dark); font-weight: 700; } /* ---------- Legal / prose pages ---------- */ .legal { padding: 80px 0 110px; background: var(--paper); } .legal .wrap { max-width: 760px; } .legal__updated { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 28px; } .legal__intro { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .legal h2 { font-size: 1.35rem; font-weight: 600; margin: 44px 0 14px; line-height: 1.3; } .legal h2:first-of-type { margin-top: 40px; } .legal h3 { font-size: 1.02rem; font-weight: 600; margin: 26px 0 10px; color: var(--accent-dark); } .legal p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 16px; font-size: 0.98rem; } .legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .legal li { color: var(--ink-soft); line-height: 1.7; margin-bottom: 8px; font-size: 0.98rem; } .legal__table-wrap { overflow-x: auto; margin: 8px 0 28px; } .legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; } .legal th, .legal td { text-align: left; padding: 12px 14px; border: 1px solid var(--border); } .legal th { background: var(--paper-soft); font-weight: 700; } .legal__footer { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); } .legal__footer p { font-size: 0.92rem; margin-bottom: 6px; } .legal__disclaimer { color: var(--ink-soft); font-size: 0.9rem; margin-top: 18px; line-height: 1.7; } /* ---------- FAQ full page ---------- */ .faq-page { padding: 80px 0 110px; background: var(--paper); } .faq-page .wrap { max-width: 780px; } .faq-page__intro { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; margin-bottom: 48px; } .faq-page__category { margin-top: 48px; } .faq-page__category:first-child { margin-top: 0; } .faq-page__category h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 22px; } .faq-page__footer { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); } .faq-page__footer p { font-size: 0.92rem; margin-bottom: 6px; color: var(--ink-soft); } .faq-page__disclaimer { color: var(--ink-soft); font-size: 0.9rem; margin-top: 18px; line-height: 1.7; } /* ---------- About ---------- */ .about-page { padding: 100px 0; background: var(--paper); } .about-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } .about-page__copy { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; } .about-page__copy p { margin-bottom: 22px; } .about-page__copy .btn { margin-top: 12px; } .about-page--detail { padding-top: 0; } .about-page__prose { max-width: 780px; } .about-page__prose > .section-title { margin-bottom: 34px; } .about-page__prose h3 { margin: 38px 0 12px; color: var(--ink); font-size: 1.2rem; font-weight: 600; } .about-page__prose p { margin-bottom: 22px; color: var(--ink-soft); font-size: 1rem; line-height: 1.78; } .about-page__prose .btn { margin-top: 14px; } .about-values { padding: 90px 0 110px; background: var(--paper-soft); } .about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; } .about-values__grid article { padding: 28px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); } .about-values__grid h2 { margin-bottom: 12px; font-size: 1.1rem; font-weight: 600; } .about-values__grid p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65; } /* ---------- Contact form ---------- */ .contact { padding: 80px 0 110px; background: var(--paper); } .contact .wrap { max-width: 620px; } .contact-form { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label { font-weight: 700; font-size: 0.9rem; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="date"], .form-field input[type="number"], .form-field input[type="password"], .form-field select, .form-field textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-family: inherit; font-size: 0.95rem; color: var(--ink); background: var(--paper); } .form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236e6870'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; } .form-field textarea { min-height: 150px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--ink-soft); } .form-consent input { margin-top: 3px; } .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { font-size: 0.92rem; padding: 12px 16px; border-radius: var(--radius-sm); display: none; } .form-status--success { background: var(--accent-soft); color: var(--accent-dark); display: block; } .form-status--error { background: #fef2f2; color: #b42318; display: block; } .form-submit { align-self: flex-start; border: none; cursor: pointer; } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------- App shell (logged-in product) ---------- */ .app-shell { display: flex; min-height: 100vh; background: var(--paper-soft); } .app-sidebar { width: 240px; flex: none; background: var(--paper); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .app-sidebar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; padding: 0 10px 20px; color: var(--ink); } .app-sidebar__nav { display: flex; flex-direction: column; gap: 2px; } .app-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; } .app-sidebar__link:hover { background: var(--paper-soft); color: var(--ink); } .app-sidebar__link--active { background: var(--accent-soft); color: var(--accent-dark); } .app-sidebar__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); } .app-sidebar__business { font-size: 0.85rem; font-weight: 700; padding: 0 12px 4px; color: var(--ink); } .app-sidebar__role { font-size: 0.75rem; color: var(--ink-soft); padding: 0 12px 10px; text-transform: capitalize; } .app-main { flex: 1; min-width: 0; } .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: var(--paper); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .app-topbar h1 { font-size: 1.35rem; font-weight: 600; } .app-nav-toggle { display: none; } .app-content { padding: 32px; max-width: 1180px; } .app-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; box-shadow: 0 1px 2px rgba(10,10,10,0.03); } .stat-card span { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 8px; } .stat-card strong { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; } .app-panel { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 24px; box-shadow: 0 1px 2px rgba(10,10,10,0.03); } .app-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } .app-panel__head h2 { font-size: 1.05rem; font-weight: 600; } .app-panel__body { padding: 4px 0; } .app-panel__empty { padding: 40px 22px; text-align: center; color: var(--ink-soft); font-size: 0.92rem; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th, .data-table td { text-align: left; padding: 12px 22px; border-bottom: 1px solid var(--border); } .data-table th { color: var(--ink-soft); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--paper-soft); } .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .data-table select, .data-table input[type="date"] { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font-family: inherit; font-size: 0.85rem; color: var(--ink); background: var(--paper); } .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .badge--grey { background: #ede8e9; color: var(--ink-soft); } .badge--teal { background: var(--accent-soft); color: var(--accent-dark); } .badge--green { background: #dcf5e3; color: #15803d; } .badge--amber { background: #fef3c7; color: #b45309; } .badge--red { background: #fee2e2; color: #b42318; } .app-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .app-form-grid .form-field--full { grid-column: 1 / -1; } .app-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .app-toolbar h1 { font-size: 1.55rem; font-weight: 600; } /* ---------- Finances ---------- */ .finance-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .finance-entry-form { display: grid; grid-template-columns: minmax(140px, 1fr) 100px 130px 150px auto; gap: 10px; align-items: end; padding: 16px 22px; border-bottom: 1px solid var(--border); } .finance-entry-form__amount { width: 100px; } .finance-entry-form__category { width: 130px; } .finance-entry-form__date { width: 150px; } .finance-entry-form__submit { border: 0; padding: 11px 20px; cursor: pointer; } .app-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper-soft); padding: 24px; } .app-auth__card { background: var(--paper); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 20px 50px -20px rgba(10,10,10,0.15); border: 1px solid var(--border); } .app-auth__card h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 8px; } .app-auth__card p.sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 28px; } .app-auth__foot { margin-top: 20px; text-align: center; font-size: 0.9rem; color: var(--ink-soft); } .app-auth__foot a { color: var(--accent-dark); font-weight: 700; } .modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(10,10,10,0.5); padding: 24px; } .modal.is-open { display: flex; } .modal__panel { position: relative; background: var(--paper); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 28px; } .modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); font-size: 1.3rem; line-height: 1; cursor: pointer; } .modal h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; } @media (max-width: 900px) { body.app-menu-open { overflow: hidden; } .app-sidebar { display: flex; position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(290px, 82vw); height: 100dvh; transform: translateX(-105%); box-shadow: 24px 0 60px rgba(10, 10, 10, 0.2); transition: transform 0.2s ease; } .app-sidebar.is-open { transform: translateX(0); } .app-sidebar.is-open::after { content: ''; position: fixed; inset: 0 0 0 min(290px, 82vw); background: rgba(10, 10, 10, 0.4); z-index: -1; } .app-nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: var(--paper); font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; } .app-content { padding: 20px; } .app-form-grid { grid-template-columns: 1fr; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .about-values__grid { grid-template-columns: repeat(2, 1fr); } .workflow__step { grid-template-columns: 56px 200px 1fr; gap: 24px; } .pricing-grid { grid-template-columns: repeat(2, 1fr); } .tour-row { gap: 36px; } .faq__wrap { grid-template-columns: 1fr; } .cta-card__main { padding: 60px 44px; } .cta-card__media { padding: 32px; } .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { /* Bigger peek item / smaller side reveal on phones — there's less width to spare for "next slide" teaser than on desktop. */ .dash-peek__item { flex-basis: 90%; max-width: 90%; } /* Narrow phones: the numeral/heading/paragraph row collapses to a single column, with the numeral pinned to the spine on the left and the heading/paragraph stacked beside it. */ .workflow__step { grid-template-columns: 1fr; gap: 8px; padding-left: 56px; position: relative; } .workflow__num { position: absolute; left: 0; top: 34px; } .workflow__step-bg { top: 24px; right: 0; font-size: 3.4rem; } body.menu-open { overflow: hidden; } .navbar__links, .navbar__actions { display: none; } .navbar__toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; padding: 8px; cursor: pointer; } .form-field input, .form-field select, .form-field textarea { font-size: 16px; } .navbar__toggle span { width: 22px; height: 2px; background: var(--paper); transition: transform 0.2s ease, opacity 0.2s ease; } .navbar--light .navbar__toggle span { background: var(--ink); } .navbar--light.navbar.is-open .navbar__toggle span { background: var(--paper); } .navbar.is-open .navbar__links { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 16px; z-index: 60; overflow-y: auto; background: var(--bg-dark-2); padding: 88px 16px 152px; gap: 0; border: none; border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(0,0,0,0.32); } .navbar.is-open .navbar__links::before { content: 'EDUNEXA'; position: absolute; top: 86px; left: 16px; color: var(--ink-on-dark-soft); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.16em; } .navbar.is-open .navbar__links a { color: var(--paper); background: none; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.12); padding: 15px 0; font-size: 1rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; } .navbar.is-open .navbar__links a.is-active { background: none; color: var(--accent-light); } .navbar.is-open .navbar__links a:first-of-type { margin-top: 36px; } .navbar.is-open .navbar__actions { display: flex; flex-direction: column; align-items: stretch; position: fixed; right: 32px; bottom: 32px; left: 32px; z-index: 61; gap: 9px; } .navbar.is-open .navbar__actions .link-muted { display: none; } .navbar.is-open .navbar__actions .btn { width: 100%; min-height: 42px; border-radius: 0; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } .navbar.is-open .navbar__actions .btn--light { background: var(--accent); color: var(--accent-contrast); } .navbar.is-open .navbar__mobile-pricing { display: inline-flex; color: var(--paper); border: 1px solid rgba(255,255,255,0.85); } .navbar.is-open .navbar__toggle { position: fixed; top: 52px; right: 28px; z-index: 62; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0; border: 2px solid var(--accent); } .navbar.is-open .navbar__toggle span { display: none; } .navbar.is-open .navbar__toggle::after { content: '\00d7'; color: var(--paper); font-size: 1.4rem; font-weight: 500; line-height: 1; } .navbar.is-open .navbar__toggle:hover { background: rgba(255,255,255,0.08); } .navbar__mobile-link { display: none; } .navbar.is-open .navbar__mobile-link { display: block; } .navbar.is-open .navbar__links a:hover { color: var(--accent-light); } .navbar.is-open { position: relative; z-index: 70; } .pricing-grid { grid-template-columns: 1fr; } .spec-item { width: 220px; flex-basis: 220px; padding: 22px 18px; } .tour-list { gap: 56px; margin-top: 40px; } .tour-row { grid-template-columns: 1fr; gap: 28px; } .tour-row--reverse .tour-row__body { order: 1; } .tour-row--reverse .tour-row__media { order: 2; } .tour-row__body h3 { font-size: 1.4rem; } .cta-card { grid-template-columns: 1fr; } .cta-card__main { padding: 48px 24px 36px; } .cta-card__main h2, .cta-card__main > p { max-width: none; } .cta-card__media { border-left: none; border-top: 1px solid var(--border); padding: 24px; } .about-page__grid, .about-values__grid { grid-template-columns: 1fr; gap: 20px; } .footer__inner { grid-template-columns: 1fr; } .wrap { padding: 0 16px; } .hero { padding: 60px 0 0; } .hero--compact { padding: 56px 0 64px; } .hero__title { font-size: clamp(2.1rem, 10vw, 2.7rem); } .hero__subtitle { font-size: 0.98rem; } .hero__actions, .btn-row { align-items: stretch; } .hero__actions .btn, .btn-row .btn { width: 100%; } .platform, .workflow, .pricing, .plan-compare, .faq-page, .legal, .contact, .about-page { padding: 56px 0 68px; } .compare-table__row p, .compare-table__head span { padding: 16px 20px; } .plan-compare__scroll { margin-right: -16px; padding-right: 16px; } .plan-compare__table th, .plan-compare__table td { padding: 13px 15px; } .about-values { padding: 56px 0 68px; } .section-title { font-size: clamp(1.85rem, 8vw, 2.35rem); } .price-card { padding: 26px 20px; } .footer { padding-top: 48px; } .footer__inner { gap: 32px; padding-bottom: 38px; } .footer__bottom { flex-direction: column; gap: 8px; padding: 18px 0; } .cookie-notice { right: 16px; bottom: 12px; left: 16px; width: auto; } .checkout-modal { padding: 12px; align-items: flex-end; } .checkout-modal__panel { max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 16px 10px; } .modal { padding: 12px; align-items: flex-end; } .modal__panel { max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 24px 18px; } .app-topbar { gap: 12px; padding: 12px 16px; } .app-topbar h1 { font-size: 1.1rem; } .app-content { padding: 16px; } .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; } .stat-card { padding: 15px; } .stat-card strong { font-size: 1.2rem; } .app-toolbar { align-items: stretch; margin-bottom: 16px; } .app-toolbar h1 { font-size: 1.3rem; } .app-toolbar .btn { width: 100%; } .app-panel { margin-bottom: 16px; border-radius: var(--radius-sm); } .app-panel__head { padding: 15px 16px; } .app-panel__body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { min-width: 620px; font-size: 0.84rem; } .data-table th, .data-table td { padding: 10px 14px; } .data-table .btn { padding: 8px 12px; font-size: 0.76rem; } .app-auth { align-items: flex-start; padding: 16px; } .app-auth__card { border-radius: var(--radius-md); padding: 28px 20px; margin-top: 28px; } .finance-entry-grid { grid-template-columns: 1fr; gap: 16px; } .finance-entry-form { grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 16px; min-width: 0; } .finance-entry-form__description { grid-column: 1 / -1; } .finance-entry-form__amount, .finance-entry-form__category, .finance-entry-form__date { width: auto; } .finance-entry-form__date { grid-column: 1 / -1; } .finance-entry-form__submit { grid-column: 1 / -1; width: 100%; } .finance-entry-form input { min-width: 0; width: 100%; } } /* ---------- Liveliness: hover lift on cards ---------- */ .price-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }