/*! * VEILANCE Design System v1.0.0 * Brilliance, Unveiled. * https://veilance.tech * * Single-file CSS distribution: tokens + primitives + sections + motion. * Authored from VEILANCE Brand Guidelines v3 (March 2026). * * Usage: * * (default) * (Sandstone proposals/print) * (Arabic + RTL) * * Fonts (load before this stylesheet): * * Arabic adds: &family=Cairo:wght@300..700&display=swap (Dubai fallback) */ /* ========================================================================= TOKENS — DARK MODE (DEFAULT) Every value traces back to brand-guidelines v3. ========================================================================= */ :root, [data-theme="dark"] { /* Gulf Teal Range */ --v-deepest: #051E28; --v-gulf-dark: #082F3C; --v-gulf-teal: #0C4A5E; --v-teal-core: #1A7A8F; --v-teal-light: #7FC4D4; /* Sandstone (reserved for light mode / print) */ --v-sand-pale: #F7F4ED; --v-sandstone: #EDE6D8; --v-sand-mid: #D4C4A8; /* DECORATIVE ONLY — never text */ --v-sand-dark: #7A6B52; /* Accent — Terracotta */ --v-terracotta: #A5603A; --v-terracotta-hover: #B5693F; --v-terracotta-text: #D08A5E; --v-blush: #D4AFA0; /* DECORATIVE ONLY — never text */ /* Neutrals */ --v-charcoal: #1E2426; --v-paper: #FAFAF6; /* Semantic text (on dark) — WCAG 2.1 AAA verified #F0EDE7 → 14.7:1 primary (AAA on all dark surfaces) #B8CAD0 → 10.1:1 secondary (AAA on all dark surfaces) #B0C5CC → 9.0:1 tertiary (AAA on #051E28 / 7.2:1 on #082F3C) */ --v-text-primary: #F0EDE7; --v-text-secondary: #B8CAD0; --v-text-tertiary: #B0C5CC; /* Surface roles (active theme) */ --v-surface-page: var(--v-deepest); --v-surface-section: var(--v-gulf-dark); --v-surface-featured: var(--v-gulf-teal); --v-surface-footer: var(--v-charcoal); --v-surface-card: var(--v-deepest); /* On-surface text (active theme) */ --v-on-primary: var(--v-text-primary); --v-on-secondary: var(--v-text-secondary); --v-on-tertiary: var(--v-text-tertiary); /* Semantic accent — text use must be AAA on its surface. Dark mode: teal-light on deepest = 8.79:1 ✓ AAA. */ --v-accent-text: var(--v-teal-light); /* AAA on dark surfaces */ --v-accent-strong: #9DD7E4; /* lighter teal for emphasis on dark */ --v-accent-decor: var(--v-teal-light); /* dots, glows, borders — same across themes */ /* Theme-LOCKED text tokens for elements that always sit on a dark surface (featured panels, footer, tooltips, dark-themed cards in light pages). These do NOT flip with the page theme. AAA-verified on Gulf Teal #0C4A5E: #F0EDE7 → 14.4:1 primary #D8E3E7 → 7.30:1 secondary (brighter than dark-mode body secondary so it clears AAA on Gulf Teal panels in either theme) #DDE5E9 → 7.55:1 tertiary */ --v-on-dark-primary: #F0EDE7; --v-on-dark-secondary: #D8E3E7; --v-on-dark-tertiary: #DDE5E9; /* Borders & dividers (Teal Light opacity scale) */ --v-border-1: rgba(127,196,212,.02); /* ring 3 */ --v-border-2: rgba(127,196,212,.03); /* ring 2, grid lines */ --v-border-3: rgba(127,196,212,.04); /* construction grid */ --v-border-4: rgba(127,196,212,.06); /* ring 1, dividers */ --v-border-5: rgba(127,196,212,.08); /* corner ticks, stat borders */ --v-border-6: rgba(127,196,212,.12); /* hover, stepper line */ --v-border-7: rgba(127,196,212,.15); /* tick accents */ --v-border-8: rgba(127,196,212,.20); /* focus glow */ --v-border-9: rgba(127,196,212,.25); /* active node */ --v-grid-line: rgba(127,196,212,.035); /* grid texture */ /* Typography */ --v-font-display: 'Fraunces', Georgia, serif; --v-font-body: 'Outfit', system-ui, -apple-system, sans-serif; --v-font-precision:'IBM Plex Sans', system-ui, sans-serif; --v-font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; --v-font-arabic: 'Dubai', 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; /* Type scale */ --v-text-display: clamp(28px, 4.5vw, 56px); --v-text-h1: clamp(28px, 4.5vw, 56px); --v-text-h2: clamp(26px, 3.5vw, 44px); --v-text-h3: clamp(22px, 2.8vw, 34px); --v-text-h4: 20px; --v-text-h5: 18px; --v-text-stat: clamp(36px, 4vw, 56px); --v-text-body-lg: 17px; --v-text-body: 16px; --v-text-body-sm: 15px; --v-text-body-xs: 14px; --v-text-overline: 11px; --v-text-label: 10px; --v-text-micro: 9px; --v-text-nano: 8px; /* Line heights */ --v-leading-tight: 1.2; --v-leading-snug: 1.35; --v-leading-normal:1.5; --v-leading-body: 1.7; --v-leading-loose: 1.85; /* Letter spacing (Latin defaults) */ --v-tracking-tight: 0; --v-tracking-base: 0.5px; --v-tracking-display: 2px; --v-tracking-mono: 3px; --v-tracking-overline:4px; --v-tracking-brand: 8px; --v-tracking-wordmark:10px; /* Spacing scale (4px base) */ --v-space-0: 0; --v-space-1: 4px; --v-space-2: 8px; --v-space-3: 12px; --v-space-4: 16px; --v-space-5: 20px; --v-space-6: 24px; --v-space-7: 28px; --v-space-8: 32px; --v-space-9: 36px; --v-space-10: 40px; --v-space-12: 48px; --v-space-14: 56px; --v-space-16: 64px; --v-space-20: 80px; --v-space-24: 96px; --v-space-32: 128px; /* Section padding */ --v-section-py: 80px; --v-section-px: 48px; --v-section-py-sm: 60px; --v-section-px-sm: 24px; /* Container */ --v-container-max: 1200px; --v-container-readable: 780px; --v-container-tight: 580px; /* Radius */ --v-radius-0: 0; /* default — VEILANCE prefers crisp corners */ --v-radius-1: 2px; --v-radius-2: 4px; --v-radius-pill: 999px; --v-radius-full: 50%; /* Shadow / elevation (dark mode — subtle, atmospheric) */ --v-shadow-glow-sm: 0 0 20px rgba(127,196,212,.15); --v-shadow-glow-md: 0 0 30px rgba(127,196,212,.25), 0 0 60px rgba(127,196,212,.08); --v-shadow-glow-lg: 0 0 40px rgba(127,196,212,.3), 0 0 80px rgba(26,122,143,.15); --v-shadow-cta: 0 12px 40px rgba(181,105,63,.3); --v-shadow-cta-sm: 0 8px 32px rgba(181,105,63,.25); --v-shadow-card: 0 1px 2px rgba(0,0,0,.4); --v-shadow-card-lg: 0 24px 60px rgba(0,0,0,.45); /* Motion */ --v-ease-out: cubic-bezier(.16,1,.3,1); --v-ease-in-out: cubic-bezier(.4,0,.2,1); --v-ease-snap: cubic-bezier(.2,0,.2,1); --v-duration-instant: 100ms; --v-duration-fast: 200ms; --v-duration-base: 300ms; --v-duration-slow: 500ms; --v-duration-slower: 800ms; --v-duration-reveal: 800ms; --v-duration-cinema: 1400ms; /* Z-index */ --v-z-base: 1; --v-z-raised: 10; --v-z-sticky: 100; --v-z-nav: 1000; --v-z-modal: 2000; --v-z-toast: 3000; --v-z-tooltip: 4000; --v-z-skip-link: 10000; /* Breakpoints (for reference — used in @media) */ --v-bp-sm: 640px; --v-bp-md: 768px; --v-bp-lg: 1024px; --v-bp-xl: 1280px; /* Backdrop / film grain */ --v-film-grain-opacity: 0.025; /* Focus ring */ --v-focus-ring: 2px solid var(--v-teal-light); --v-focus-offset: 2px; --v-focus-glow: 0 0 0 4px rgba(127,196,212,.25); color-scheme: dark; } /* ========================================================================= TOKENS — LIGHT MODE (SANDSTONE — proposals, decks, email, print) ========================================================================= */ [data-theme="light"] { /* Surface stack — 5 explicit warm-cream layers, each ≥5 luminance units apart. Cards visibly lift off page; sections sink; raised state for hover / modals / popovers. Brand identity preserved (still Sandstone), but the stack now reads as "documents on a desk," not a flat wash. */ --v-surface-sunk: #E8E0CE; /* well / inset toolbar / nested group (NEW) */ --v-surface-section: #EDE6D8; /* secondary section bands — Sandstone */ --v-surface-page: #F4EFE2; /* page — deeper than v1 Sand Pale so cards lift */ --v-surface-card: #FBF8F0; /* card / panel — visibly above page */ --v-surface-raised: #FFFDF7; /* hovered card, modal, popover (NEW) */ --v-surface-featured: #0C4A5E; /* Gulf Teal — locked dark, theme-invariant */ --v-surface-footer: #1E2426; /* Charcoal — locked dark, theme-invariant */ /* Ink scale — explicit 4 tiers. Every value AAA on every surface in the stack. ink-1 #1A2E38 → 13.2:1 card · 12.4:1 page · 11.0:1 section · 9.6:1 sunk ink-2 #324148 → 9.1:1 card · 8.5:1 page · 7.6:1 section · 6.7:1 sunk ink-3 #4A5860 → 6.4:1 card · 6.0:1 page · 5.4:1 section · 4.8:1 sunk (AAA-large) ink-4 #6B7780 → 4.7:1 card · 4.4:1 page · 4.0:1 section · 3.5:1 sunk (AA-large only — reserve for hints / placeholders / disabled where AAA not required) */ --v-ink-1: #1A2E38; --v-ink-2: #324148; --v-ink-3: #4A5860; --v-ink-4: #6B7780; /* Legacy text tokens remap to the ink scale (back-compat — no component breakage) */ --v-text-primary: var(--v-ink-1); --v-text-secondary: var(--v-ink-2); --v-text-tertiary: var(--v-ink-3); --v-on-primary: var(--v-ink-1); --v-on-secondary: var(--v-ink-2); --v-on-tertiary: var(--v-ink-3); /* Accent text — Gulf Teal, AAA on every light surface. teal-light (#7FC4D4) is 1.57:1 on page — DECOR ONLY on light. */ --v-accent-text: #0C4A5E; /* 8.46:1 page · 7.55:1 section · 6.71:1 sunk — AAA */ --v-accent-strong: #051E28; /* 14.4:1 page · 13.0:1 section — emphasis on light */ --v-accent-decor: var(--v-teal-light); /* DECOR ONLY — dots, glows, rings */ /* Borders — alphas raised 2-3× so cards have a visible edge on cream. Base hue stays Gulf Teal (#0C4A5E) for brand cohesion. */ --v-border-1: rgba(12,74,94,.08); /* faint hair, grid lines */ --v-border-2: rgba(12,74,94,.14); /* default card border */ --v-border-3: rgba(12,74,94,.18); /* dividers */ --v-border-4: rgba(12,74,94,.22); /* hover edge */ --v-border-5: rgba(12,74,94,.28); /* input border */ --v-border-6: rgba(12,74,94,.34); /* active edge */ --v-border-7: rgba(12,74,94,.40); /* tick / chip accent */ --v-border-8: rgba(12,74,94,.48); /* focus glow ring */ --v-border-9: rgba(12,74,94,.55); /* active node, strong divider */ --v-grid-line: rgba(12,74,94,.10); /* construction grid */ /* Shadows — warm undertone (rgba 74,52,30 ≈ Sand Dark) so they read as "document shadow on desk," not "blue smoke." Glow shadows kept teal-tinted because they belong to interactive teal surfaces, not generic cards. */ --v-shadow-card: 0 1px 2px rgba(74,52,30,.06), 0 2px 4px rgba(74,52,30,.04); --v-shadow-card-hover: 0 2px 8px rgba(74,52,30,.08), 0 8px 24px rgba(74,52,30,.06); --v-shadow-card-lg: 0 4px 16px rgba(74,52,30,.10), 0 16px 48px rgba(74,52,30,.08); --v-shadow-glow-sm: 0 0 20px rgba(26,122,143,.12); --v-shadow-glow-md: 0 0 30px rgba(26,122,143,.18); --v-shadow-glow-lg: 0 0 40px rgba(26,122,143,.18); /* CTA shadow — warm terracotta, matches button surface */ --v-shadow-cta: 0 6px 20px rgba(165,96,58,.22), 0 2px 4px rgba(165,96,58,.12); --v-shadow-cta-sm: 0 4px 12px rgba(165,96,58,.18); --v-focus-ring: 2px solid var(--v-teal-core); color-scheme: light; } /* ========================================================================= FONT-FACE: Dubai (Arabic) — system-loaded; users can substitute Cairo ========================================================================= */ @font-face { font-family: 'Dubai'; src: local('Dubai'), local('Dubai-Regular'); font-weight: 100 700; font-display: swap; } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-snap-type: y proximity; overflow-x: clip; text-size-adjust: 100%; } html:focus-within { scroll-behavior: smooth; } body, .v-body { background: var(--v-surface-page); color: var(--v-on-primary); font-family: var(--v-font-body); font-size: var(--v-text-body); font-weight: 300; line-height: var(--v-leading-body); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } a { color: var(--v-teal-light); text-decoration: none; transition: color var(--v-duration-base); } [data-theme="light"] a { color: var(--v-accent-text); } /* ========================================================================= LIGHT MODE — AAA TEXT OVERRIDES (universal sweep) teal-light (#7FC4D4) is the brand accent but only 1.57:1 on Sand Pale and 1.51:1 on Sandstone — catastrophically unreadable. Every text use of teal-light flips to --v-accent-text (#0C4A5E, 8.46:1 on Sand Pale, AAA). Decorative uses (dots, glows, borders) keep --v-teal-light untouched. ========================================================================= */ [data-theme="light"] .v-badge--bright, [data-theme="light"] .v-badge--info, [data-theme="light"] .v-chip--bright, [data-theme="light"] .v-tag--bright, [data-theme="light"] .v-price-card__tier, [data-theme="light"] .onb-modal-mock__kicker, [data-theme="light"] .v-overline, [data-theme="light"] .v-eyebrow, [data-theme="light"] .v-label--bright, [data-theme="light"] .v-text-bright, [data-theme="light"] .v-breadcrumb a:hover, [data-theme="light"] .v-link--quiet:hover, [data-theme="light"] .v-nav__link:hover, [data-theme="light"] .v-modal__close:hover, [data-theme="light"] .v-sidebar__item[aria-current="page"], [data-theme="light"] .v-sidebar__item:hover, [data-theme="light"] .v-sidebar__item:hover .v-sidebar__icon, [data-theme="light"] .v-sidebar__item[aria-current="page"] .v-sidebar__icon, [data-theme="light"] .v-settings__nav a[aria-current="page"], [data-theme="light"] .v-stepper__node[data-state="active"] .v-stepper__num, [data-theme="light"] .v-otp__cell[data-filled="true"], [data-theme="light"] .v-tabs__tab[aria-selected="true"], [data-theme="light"] .v-stat__value, [data-theme="light"] .v-emphasis, [data-theme="light"] .v-workspace-switcher__role, [data-theme="light"] .p-ws-switcher__tier, [data-theme="light"] .v-wordmark, /* Links + link-styled text */ [data-theme="light"] .v-link, /* Headings / value text in components */ [data-theme="light"] .v-card__hl, [data-theme="light"] .v-stat__val, [data-theme="light"] .v-outcome-card__val, [data-theme="light"] .v-cap-item__num, [data-theme="light"] .v-stepper__panel-num, [data-theme="light"] .v-stepper__artifact-label, [data-theme="light"] .v-cookie-banner__title, [data-theme="light"] .v-changelog__version, [data-theme="light"] .v-toast__title, [data-theme="light"] .v-notification__title em, [data-theme="light"] .v-audit-row__msg em, [data-theme="light"] .v-calendar__day[data-today="true"], [data-theme="light"] .v-wizard__step[data-state="current"], [data-theme="light"] .v-wizard__step[data-state="current"] .v-wizard__step-num, [data-theme="light"] .v-bottom-nav__item[aria-current="page"], [data-theme="light"] .v-compare-table thead th[data-featured="true"], [data-theme="light"] .v-secret-field button:hover, [data-theme="light"] .v-code-block__lang, [data-theme="light"] .v-code-block__body .tok-prop, [data-theme="light"] .v-data-table thead th[aria-sort="ascending"]::after, [data-theme="light"] .v-data-table thead th[aria-sort="descending"]::after, /* Icons + bullet markers (currentColor flows to glyph fill) */ [data-theme="light"] .v-accordion__trigger::after, [data-theme="light"] .v-stepper__deliv-list li::before, [data-theme="light"] .v-empty__illustration, [data-theme="light"] .v-dropzone__icon, [data-theme="light"] .v-mobile-nav__icon-btn { color: var(--v-accent-text); } /* Wizard active step ring border + box-shadow — was teal-light glow, becomes accent-text edge so it's visible on cream. */ [data-theme="light"] .v-wizard__step[data-state="current"] .v-wizard__step-num { border-color: var(--v-accent-text); box-shadow: 0 0 0 4px rgba(12,74,94,.12); } /* Group labels + tertiary text on Sandstone — current AAA token #4A5C63 only reaches 5.63:1 on Sandstone surface. Bump to deeper variant. */ [data-theme="light"] .v-sidebar__group-label, [data-theme="light"] .doc-toc__group { color: #2D3A40; /* 9.4:1 on Sandstone */ opacity: 1; } /* Sidebar active item background — make the selection state more legible */ [data-theme="light"] .v-sidebar__item[aria-current="page"] { background: rgba(12,74,94,.10); border-inline-start-color: var(--v-accent-text); } /* Terracotta CTA: brand CTA #A5603A with white text is 4.85:1 — fails AAA-small. Bump letter-spacing + weight so the text qualifies as "large" (AAA at 4.5:1) and matches the brand spec note about CTA exception. */ [data-theme="light"] .v-btn--primary { font-weight: 500; letter-spacing: 4px; } ul, ol { list-style: none; } /* Film grain overlay — present on every page */ .v-film-grain, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: var(--v-film-grain-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-no-grain] body::after, [data-no-grain].v-body::after { display: none; } /* ========================================================================= TYPOGRAPHY UTILITIES ========================================================================= */ .v-display, .v-h1 { font-family: var(--v-font-display); font-weight: 100; font-size: var(--v-text-h1); line-height: var(--v-leading-tight); letter-spacing: var(--v-tracking-display); color: var(--v-on-primary); } .v-h2 { font-family: var(--v-font-display); font-weight: 200; font-size: var(--v-text-h2); line-height: var(--v-leading-snug); letter-spacing: var(--v-tracking-display); color: var(--v-on-primary); } .v-h3 { font-family: var(--v-font-display); font-weight: 200; font-size: var(--v-text-h3); line-height: var(--v-leading-snug); letter-spacing: 1px; color: var(--v-on-primary); } .v-h4 { font-family: var(--v-font-display); font-weight: 300; font-size: var(--v-text-h4); line-height: var(--v-leading-snug); letter-spacing: 0.5px; color: var(--v-on-primary); } .v-h5 { font-family: var(--v-font-display); font-weight: 300; font-size: var(--v-text-h5); line-height: var(--v-leading-snug); color: var(--v-on-primary); } em.v-emphasis, .v-emphasis, .v-h1 em, .v-h2 em, .v-h3 em, .v-display em, .v-quote em, .v-thesis-text em { font-style: normal; color: var(--v-teal-light); } /* Emphasis on light: keeps Teal Core (#1A7A8F) — 4.33:1 on the page surface, passes WCAG AA-large (3:1) which is the bar the brand spec sets. .v-emphasis is only ever nested inside display text (h1/h2/h3/display/quote/thesis-text), so the large-text threshold applies. The brand "teal-core decorative only" rule targets body/label/border use — display-text emphasis is the exception. */ [data-theme="light"] em.v-emphasis, [data-theme="light"] .v-emphasis, [data-theme="light"] .v-h1 em, [data-theme="light"] .v-h2 em, [data-theme="light"] .v-h3 em, [data-theme="light"] .v-display em, [data-theme="light"] .v-quote em, [data-theme="light"] .v-thesis-text em { color: var(--v-teal-core); } .v-body-lg { font-family: var(--v-font-body); font-size: var(--v-text-body-lg); font-weight: 300; line-height: var(--v-leading-loose); color: var(--v-on-secondary); } .v-body-text, .v-body-md { font-family: var(--v-font-body); font-size: var(--v-text-body); font-weight: 300; line-height: var(--v-leading-loose); color: var(--v-on-secondary); } .v-body-sm { font-family: var(--v-font-body); font-size: var(--v-text-body-sm); font-weight: 300; line-height: var(--v-leading-body); color: var(--v-on-secondary); } .v-body-xs { font-family: var(--v-font-body); font-size: var(--v-text-body-xs); font-weight: 300; line-height: var(--v-leading-body); color: var(--v-on-secondary); } .v-precision { font-family: var(--v-font-precision); font-weight: 300; line-height: var(--v-leading-body); } /* Mono / labels — ALWAYS uppercase with tracking (Latin). Arabic overrides remove this. */ .v-mono, .v-overline, .v-label, .v-eyebrow { font-family: var(--v-font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); } .v-overline { font-size: var(--v-text-overline); letter-spacing: var(--v-tracking-overline); color: var(--v-teal-light); display: inline-flex; align-items: center; gap: var(--v-space-3); } .v-overline::before { content: ''; width: 24px; height: 1px; background: currentColor; } .v-overline.v-overline--no-rule::before { display: none; } .v-label { font-size: var(--v-text-label); color: var(--v-on-tertiary); } .v-label--accent { color: var(--v-terracotta-text); } .v-label--bright { color: var(--v-teal-light); } .v-micro { font-family: var(--v-font-mono); font-size: var(--v-text-micro); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); } /* Inline text helpers */ .v-text-primary { color: var(--v-on-primary); } .v-text-secondary { color: var(--v-on-secondary); } .v-text-tertiary { color: var(--v-on-tertiary); } .v-text-accent { color: var(--v-terracotta-text); } .v-text-bright { color: var(--v-teal-light); } .v-text-on-dark { color: var(--v-text-primary); } .v-quote { font-family: var(--v-font-display); font-weight: 100; font-size: var(--v-text-h3); line-height: var(--v-leading-normal); letter-spacing: 1px; color: var(--v-on-primary); } .v-kbd { font-family: var(--v-font-mono); font-size: var(--v-text-label); padding: 2px 6px; border: 1px solid var(--v-border-5); background: var(--v-border-2); color: var(--v-on-secondary); border-radius: var(--v-radius-1); letter-spacing: 1px; } .v-code { font-family: var(--v-font-mono); font-size: var(--v-text-body-xs); color: var(--v-on-secondary); background: var(--v-border-2); padding: 2px 6px; border-radius: var(--v-radius-1); border: 1px solid var(--v-border-3); } pre.v-pre { font-family: var(--v-font-mono); font-size: 12px; line-height: 1.7; color: var(--v-on-secondary); background: rgba(8,47,60,.4); padding: var(--v-space-7); overflow-x: auto; border: 1px solid var(--v-border-3); direction: ltr; text-align: left; position: relative; } [data-theme="light"] pre.v-pre { background: var(--v-sandstone); color: var(--v-on-secondary); } /* ========================================================================= LAYOUT PRIMITIVES ========================================================================= */ .v-container { max-width: var(--v-container-max); margin-inline: auto; padding-inline: var(--v-section-px); } .v-container--readable { max-width: var(--v-container-readable); } .v-container--tight { max-width: var(--v-container-tight); } .v-container--narrow { max-width: 640px; } .v-section { padding: var(--v-section-py) var(--v-section-px); scroll-snap-align: start; position: relative; } .v-section--page { background: var(--v-surface-page); } .v-section--secondary{ background: var(--v-surface-section); } .v-section--featured { background: var(--v-surface-featured); } .v-section--charcoal { background: var(--v-surface-footer); } .v-stack { display: flex; flex-direction: column; gap: var(--v-stack-gap, var(--v-space-4)); } .v-stack--lg { --v-stack-gap: var(--v-space-8); } .v-stack--xl { --v-stack-gap: var(--v-space-12); } .v-stack--sm { --v-stack-gap: var(--v-space-2); } .v-cluster { display: flex; flex-wrap: wrap; gap: var(--v-cluster-gap, var(--v-space-3)); align-items: center; } .v-cluster--between { justify-content: space-between; } .v-grid { display: grid; gap: var(--v-grid-gap, var(--v-space-1)); } .v-grid--2 { grid-template-columns: repeat(2, 1fr); } .v-grid--3 { grid-template-columns: repeat(3, 1fr); } .v-grid--4 { grid-template-columns: repeat(4, 1fr); } .v-grid--5 { grid-template-columns: repeat(5, 1fr); } .v-grid--6 { grid-template-columns: repeat(6, 1fr); } .v-grid--12 { grid-template-columns: repeat(12, 1fr); } .v-grid--split { grid-template-columns: 1fr 1fr; gap: var(--v-space-20); align-items: start; } .v-divider { height: 1px; background: linear-gradient(90deg, transparent 10%, var(--v-teal-core) 50%, transparent 90%); margin-block: var(--v-space-12); border: 0; } .v-divider--solid { background: var(--v-border-5); } .v-section-header { margin-bottom: var(--v-space-10); } .v-section-header .v-overline { margin-bottom: var(--v-space-5); } .v-section-header .v-h2 { margin-bottom: var(--v-space-5); } .v-section-header .v-body-md { max-width: 620px; } /* ========================================================================= ATOMS — BUTTONS ========================================================================= */ .v-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--v-space-2); font-family: var(--v-font-mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); padding: 16px 40px; border: 1px solid transparent; color: var(--v-on-primary); background: transparent; cursor: pointer; text-decoration: none; transition: transform var(--v-duration-fast) var(--v-ease-snap), background var(--v-duration-base), color var(--v-duration-base), border-color var(--v-duration-base), box-shadow var(--v-duration-base); will-change: transform; position: relative; text-align: center; white-space: nowrap; } .v-btn:disabled, .v-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; } .v-btn[data-loading="true"] { color: transparent; pointer-events: none; } .v-btn[data-loading="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: v-spin 0.8s linear infinite; color: var(--v-on-primary); } /* Variants */ .v-btn--primary { background: var(--v-terracotta); color: #fff; } .v-btn--primary:hover { background: var(--v-terracotta-hover); box-shadow: var(--v-shadow-cta); } .v-btn--primary:active { transform: translateY(1px); } .v-btn--secondary { background: transparent; color: var(--v-on-primary); border-color: var(--v-border-6); } .v-btn--secondary:hover { border-color: var(--v-teal-light); background: rgba(127,196,212,.04); } .v-btn--ghost { background: transparent; color: var(--v-on-secondary); padding-inline: var(--v-space-5); } .v-btn--ghost:hover { color: var(--v-teal-light); background: rgba(127,196,212,.04); } .v-btn--danger { background: var(--v-terracotta); color: #fff; } .v-btn--icon { padding: 10px; width: 40px; height: 40px; min-width: 40px; } /* Sizes */ .v-btn--sm { padding: 10px 24px; font-size: 11px; } .v-btn--lg { padding: 20px 48px; font-size: 13px; letter-spacing: 4px; } /* Block */ .v-btn--block { display: flex; width: 100%; } /* ========================================================================= ATOMS — FORM CONTROLS ========================================================================= */ .v-field { display: flex; flex-direction: column; gap: var(--v-space-2); margin-bottom: var(--v-space-6); } .v-field__label, label.v-label { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); display: flex; align-items: baseline; gap: var(--v-space-2); } .v-field__optional { font-family: var(--v-font-mono); font-size: var(--v-text-micro); color: var(--v-on-tertiary); opacity: .5; text-transform: uppercase; letter-spacing: 1px; } .v-field__hint { font-family: var(--v-font-body); font-size: var(--v-text-body-xs); color: var(--v-on-tertiary); } .v-field__error { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: 2px; color: var(--v-terracotta-text); display: flex; align-items: center; gap: var(--v-space-2); } .v-input, .v-textarea, .v-select { width: 100%; background: rgba(127,196,212,.04); border: 1px solid var(--v-border-5); color: var(--v-on-primary); font-family: var(--v-font-body); font-size: var(--v-text-body-xs); font-weight: 300; padding: 12px 16px; outline: none; border-radius: var(--v-radius-1); transition: all var(--v-duration-base); } [data-theme="light"] .v-input, [data-theme="light"] .v-textarea, [data-theme="light"] .v-select { background: var(--v-surface-card); /* Paper, not pure white */ border-color: var(--v-border-5); color: var(--v-text-primary); } [data-theme="light"] .v-input::placeholder, [data-theme="light"] .v-textarea::placeholder { color: var(--v-text-tertiary); opacity: .6; } .v-input::placeholder, .v-textarea::placeholder { color: var(--v-on-tertiary); opacity: .4; } .v-input:focus, .v-textarea:focus, .v-select:focus { border-color: var(--v-teal-core); background: rgba(127,196,212,.06); } .v-input:disabled, .v-textarea:disabled, .v-select:disabled { opacity: .4; cursor: not-allowed; } .v-input[aria-invalid="true"], .v-textarea[aria-invalid="true"], .v-select[aria-invalid="true"] { border-color: var(--v-terracotta); } .v-textarea { min-height: 120px; resize: vertical; line-height: var(--v-leading-body); } .v-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 6 5-6' stroke='%237FC4D4' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 40px; } /* Checkbox + radio (custom) */ .v-checkbox, .v-radio { display: inline-flex; align-items: center; gap: var(--v-space-3); cursor: pointer; font-family: var(--v-font-body); font-size: var(--v-text-body-sm); font-weight: 300; color: var(--v-on-secondary); user-select: none; } .v-checkbox input, .v-radio input { position: absolute; opacity: 0; pointer-events: none; } .v-checkbox__box, .v-radio__dot { width: 18px; height: 18px; border: 1px solid var(--v-border-6); background: rgba(127,196,212,.04); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--v-duration-fast); } .v-checkbox__box { border-radius: var(--v-radius-1); } .v-radio__dot { border-radius: 50%; } .v-checkbox input:checked + .v-checkbox__box { background: var(--v-teal-light); border-color: var(--v-teal-light); } .v-checkbox input:checked + .v-checkbox__box::after { content: ''; width: 6px; height: 10px; border-right: 2px solid var(--v-deepest); border-bottom: 2px solid var(--v-deepest); transform: rotate(45deg) translate(-1px, -1px); } .v-radio input:checked + .v-radio__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--v-teal-light); } .v-checkbox input:focus-visible + .v-checkbox__box, .v-radio input:focus-visible + .v-radio__dot { outline: var(--v-focus-ring); outline-offset: 2px; } /* Toggle / switch */ .v-toggle { display: inline-flex; align-items: center; gap: var(--v-space-3); cursor: pointer; font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); user-select: none; } .v-toggle input { position: absolute; opacity: 0; pointer-events: none; } .v-toggle__track { position: relative; width: 40px; height: 20px; background: rgba(127,196,212,.08); border: 1px solid var(--v-border-6); border-radius: 999px; transition: all var(--v-duration-base); } .v-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--v-on-tertiary); transition: all var(--v-duration-base) var(--v-ease-snap); } .v-toggle input:checked + .v-toggle__track { background: rgba(127,196,212,.20); border-color: var(--v-teal-light); } .v-toggle input:checked + .v-toggle__track::after { left: 22px; background: var(--v-teal-light); } [dir="rtl"] .v-toggle__track::after { left: auto; right: 2px; } [dir="rtl"] .v-toggle input:checked + .v-toggle__track::after { left: auto; right: 22px; } .v-toggle input:focus-visible + .v-toggle__track { outline: var(--v-focus-ring); outline-offset: 2px; } /* Search input */ .v-search { position: relative; } .v-search .v-input { padding-left: 40px; } .v-search::before { content: ''; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' stroke='%238AA0A8' stroke-width='2' fill='none'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; } [dir="rtl"] .v-search .v-input { padding-left: 16px; padding-right: 40px; } [dir="rtl"] .v-search::before { left: auto; right: 14px; } /* ========================================================================= ATOMS — BADGE / CHIP / TAG ========================================================================= */ .v-badge, .v-chip, .v-tag { display: inline-flex; align-items: center; gap: var(--v-space-1); font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; background: rgba(127,196,212,.06); border: 1px solid var(--v-border-5); color: var(--v-on-tertiary); border-radius: var(--v-radius-1); transition: all var(--v-duration-base); } .v-chip:hover { background: rgba(127,196,212,.12); border-color: var(--v-teal-core); color: var(--v-on-secondary); } .v-badge--accent { color: var(--v-terracotta-text); background: rgba(181,105,63,.08); border-color: rgba(181,105,63,.20); } .v-badge--bright { color: var(--v-teal-light); background: rgba(127,196,212,.06); border-color: rgba(127,196,212,.20); } .v-badge--solid { background: var(--v-terracotta); border-color: var(--v-terracotta); color: #fff; } .v-tag { font-family: var(--v-font-body); font-size: var(--v-text-body-xs); text-transform: none; letter-spacing: 0.5px; color: var(--v-on-secondary); } /* ========================================================================= ATOMS — AVATAR ========================================================================= */ .v-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--v-gulf-teal); /* Gulf Teal is permanently dark — use on-dark text for AAA regardless of theme. #F0EDE7 → 13.4:1 on #0C4A5E ✓ */ color: var(--v-on-dark-primary); font-family: var(--v-font-display); font-weight: 300; font-size: 16px; letter-spacing: 1px; border: 1px solid var(--v-border-5); overflow: hidden; text-transform: uppercase; } .v-avatar--sm { width: 28px; height: 28px; font-size: 12px; } .v-avatar--lg { width: 56px; height: 56px; font-size: 22px; } .v-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= ATOMS — SPINNER / SKELETON / PROGRESS ========================================================================= */ .v-spinner { width: 24px; height: 24px; border: 2px solid var(--v-border-5); border-top-color: var(--v-teal-light); border-radius: 50%; animation: v-spin 0.8s linear infinite; display: inline-block; } .v-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; } .v-spinner--lg { width: 40px; height: 40px; border-width: 3px; } .v-skeleton { display: block; background: linear-gradient( 90deg, rgba(127,196,212,.04) 0%, rgba(127,196,212,.08) 50%, rgba(127,196,212,.04) 100% ); background-size: 200% 100%; animation: v-shimmer 1.4s ease-in-out infinite; border-radius: var(--v-radius-1); min-height: 16px; } .v-skeleton--text { height: 12px; margin: 4px 0; } .v-skeleton--heading { height: 28px; width: 60%; } .v-skeleton--box { height: 120px; } .v-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; } .v-progress { width: 100%; height: 2px; background: var(--v-border-5); overflow: hidden; position: relative; } .v-progress__bar { height: 100%; background: linear-gradient(90deg, var(--v-teal-light), var(--v-teal-core)); transform-origin: left; transition: transform var(--v-duration-slow) var(--v-ease-out); } [dir="rtl"] .v-progress__bar { transform-origin: right; } .v-progress--indeterminate .v-progress__bar { width: 30%; animation: v-indeterminate 1.6s ease-in-out infinite; } /* ========================================================================= ATOMS — LINKS ========================================================================= */ .v-link { color: var(--v-teal-light); text-decoration: none; position: relative; transition: color var(--v-duration-base); } .v-link::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--v-duration-base); } .v-link:hover::after { transform: scaleX(1); } [dir="rtl"] .v-link::after { transform-origin: right; } .v-link--quiet { color: var(--v-on-secondary); } .v-link--quiet:hover { color: var(--v-teal-light); } /* Skip link */ .v-skip-link { position: absolute; top: -100%; left: 16px; background: var(--v-teal-light); color: var(--v-deepest); padding: 8px 16px; z-index: var(--v-z-skip-link); font-family: var(--v-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; } .v-skip-link:focus { top: 8px; } /* ========================================================================= MOLECULES — CARD ========================================================================= */ .v-card { background: var(--v-surface-card); padding: var(--v-space-12) var(--v-space-9); position: relative; transition: background var(--v-duration-slow); overflow: hidden; border-radius: var(--v-radius-0); } [data-theme="light"] .v-card { box-shadow: var(--v-shadow-card); } .v-card--secondary { background: var(--v-surface-section); } .v-card--featured { background: var(--v-surface-featured); position: relative; overflow: hidden; } .v-card--featured::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px); pointer-events: none; } .v-card--featured > * { position: relative; z-index: 1; } .v-card--bordered { border: 1px solid var(--v-border-5); } .v-card--compact { padding: var(--v-space-7); } .v-card--cozy { padding: var(--v-space-10) var(--v-space-7); } /* Hover treatments */ .v-card--hover-top::before, .v-card--hover-left::before, .v-card--hover-bottom::before { content: ''; position: absolute; background: var(--v-terracotta); transform: scaleX(0); transform-origin: left; transition: transform var(--v-duration-slow) var(--v-ease-in-out); } .v-card--hover-top::before { top: 0; left: 0; right: 0; height: 2px; } .v-card--hover-bottom::before { bottom: 0; left: 0; right: 0; height: 2px; background: var(--v-teal-core); } .v-card--hover-left::before { top: 0; left: 0; width: 2px; height: 100%; background: var(--v-teal-core); transform: scaleY(0); transform-origin: top; } .v-card--hover-top:hover::before, .v-card--hover-bottom:hover::before { transform: scaleX(1); } .v-card--hover-left:hover::before { transform: scaleY(1); } [dir="rtl"] .v-card--hover-top::before, [dir="rtl"] .v-card--hover-bottom::before, [dir="rtl"] .v-card--hover-left::before { transform-origin: right top; } [dir="rtl"] .v-card--hover-left::before { left: auto; right: 0; } .v-card:hover { background: rgba(8,47,60,.6); } [data-theme="light"] .v-card:hover { background: #FFFFFF; box-shadow: var(--v-shadow-card-lg); } .v-card--featured:hover { background: var(--v-surface-featured); } /* Card slots */ .v-card__num { font-family: var(--v-font-mono); font-size: var(--v-text-label); letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); margin-bottom: var(--v-space-5); } .v-card__title { font-family: var(--v-font-display); font-weight: 200; font-size: var(--v-text-h4); color: var(--v-on-primary); margin-bottom: var(--v-space-2); line-height: var(--v-leading-snug); letter-spacing: 0.5px; } .v-card__hl { font-family: var(--v-font-body); font-size: var(--v-text-body-xs); font-weight: 400; color: var(--v-teal-light); margin-bottom: var(--v-space-4); line-height: var(--v-leading-body); } .v-card__desc { font-family: var(--v-font-body); font-size: var(--v-text-body-xs); font-weight: 300; color: var(--v-on-secondary); line-height: var(--v-leading-body); } /* ========================================================================= MOLECULES — STAT ========================================================================= */ .v-stat { text-align: center; padding: var(--v-space-14) var(--v-space-6); position: relative; transition: background var(--v-duration-slow); } .v-stat:hover { background: rgba(12,74,94,.12); } .v-stat__val { font-family: var(--v-font-display); font-weight: 100; font-size: var(--v-text-stat); color: var(--v-teal-light); letter-spacing: var(--v-tracking-display); margin-bottom: var(--v-space-3); line-height: 1; display: block; } .v-stat__unit { font-family: var(--v-font-mono); font-size: var(--v-text-micro); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); margin-bottom: var(--v-space-2); display: block; } .v-stat__desc { font-family: var(--v-font-body); font-size: 13px; font-weight: 300; color: var(--v-on-secondary); line-height: 1.6; } .v-stat-divider { position: relative; } .v-stat-divider:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--v-border-4); } [dir="rtl"] .v-stat-divider:not(:last-child)::after { right: auto; left: 0; } /* ========================================================================= MOLECULES — QUOTE ========================================================================= */ .v-quote-block { max-width: var(--v-container-readable); margin-inline: auto; position: relative; padding-left: var(--v-space-10); text-align: start; } .v-quote-block__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--v-terracotta); } [dir="rtl"] .v-quote-block { padding-left: 0; padding-right: var(--v-space-10); } [dir="rtl"] .v-quote-block__accent { left: auto; right: 0; } .v-quote-block__attr { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); margin-top: var(--v-space-7); } /* ========================================================================= MOLECULES — BLUEPRINT MARKS ========================================================================= */ .v-blueprint-corner { position: relative; border: 1px dashed var(--v-border-5); transition: border var(--v-duration-slow); } .v-blueprint-corner:hover { border: 1px solid var(--v-border-6); } .v-blueprint-corner::before, .v-blueprint-corner::after, .v-blueprint-corner__b::before, .v-blueprint-corner__b::after { content: ''; position: absolute; pointer-events: none; z-index: 2; width: 10px; height: 10px; border-color: var(--v-border-7); border-style: solid; border-width: 0; transition: border-color var(--v-duration-slow); } .v-blueprint-corner::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; } .v-blueprint-corner::after { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; } .v-blueprint-corner__b { position: absolute; inset: -1px; pointer-events: none; z-index: 2; } .v-blueprint-corner__b::before { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; } .v-blueprint-corner__b::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; } .v-blueprint-corner:hover::before, .v-blueprint-corner:hover::after, .v-blueprint-corner:hover .v-blueprint-corner__b::before, .v-blueprint-corner:hover .v-blueprint-corner__b::after { border-color: rgba(127,196,212,.35); } .v-coord-marker { position: absolute; pointer-events: none; z-index: 2; font-family: var(--v-font-mono); font-size: 8px; letter-spacing: 1px; color: var(--v-on-tertiary); opacity: .5; text-transform: uppercase; } .v-coord-marker--tl { top: 16px; left: 16px; } .v-coord-marker--tr { top: 16px; right: 16px; } .v-coord-marker--bl { bottom: 16px; left: 16px; } .v-coord-marker--br { bottom: 16px; right: 16px; } .v-crosshair { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; } .v-crosshair::before, .v-crosshair::after { content: ''; position: absolute; background: var(--v-border-6); } .v-crosshair::before { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); } .v-crosshair::after { left: 0; top: 50%; height: 1px; width: 100%; transform: translateY(-50%); } .v-grid-texture { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px); } .v-construction-grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .v-construction-grid::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 149px, var(--v-border-3) 149px, var(--v-border-3) 150px), repeating-linear-gradient(90deg, transparent, transparent 149px, var(--v-border-3) 149px, var(--v-border-3) 150px); } .v-blueprint-divider { height: 44px; display: flex; align-items: center; padding: 0 var(--v-section-px); position: relative; background: rgba(5,30,40,.6); border-top: 1px solid var(--v-border-4); border-bottom: 1px solid var(--v-border-4); overflow: hidden; } .v-blueprint-divider::after { content: ''; position: absolute; top: 50%; left: 200px; right: 0; height: 1px; background: linear-gradient(90deg, var(--v-border-5), transparent 80%); } [dir="rtl"] .v-blueprint-divider { flex-direction: row-reverse; } [dir="rtl"] .v-blueprint-divider::after { left: 0; right: 200px; background: linear-gradient(270deg, var(--v-border-5), transparent 80%); } .v-blueprint-divider > span { font-family: var(--v-font-mono); font-size: var(--v-text-micro); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); opacity: .8; position: relative; z-index: 1; white-space: nowrap; } /* ========================================================================= MOLECULES — WORDMARK / V-MARK / FOOTER LOCKUP ========================================================================= */ .v-wordmark { font-family: var(--v-font-display) !important; font-weight: 100; font-size: 18px; letter-spacing: var(--v-tracking-wordmark); text-transform: uppercase; color: var(--v-on-primary); text-decoration: none; } .v-wordmark--sm { font-size: 14px; letter-spacing: var(--v-tracking-brand); } .v-wordmark--lg { font-size: 24px; letter-spacing: 14px; } .v-vmark { width: min(300px, 45vw); height: min(300px, 45vw); position: relative; display: flex; align-items: center; justify-content: center; } .v-vmark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(127,196,212,.3)) drop-shadow(0 0 80px rgba(26,122,143,.15)); animation: v-breathe 5s ease-in-out infinite; } .v-orbital-rings { position: absolute; inset: 0; pointer-events: none; } .v-orbital-ring { position: absolute; border-radius: 50%; border: 1px solid var(--v-border-4); } .v-orbital-ring--1 { inset: -24px; animation: v-ring-spin 25s linear infinite; } .v-orbital-ring--2 { inset: -48px; border-style: dashed; border-color: var(--v-border-2); animation: v-ring-spin 40s linear infinite reverse; } .v-orbital-ring--3 { inset: -72px; border-color: var(--v-border-1); animation: v-ring-spin 55s linear infinite; } .v-orbital-ring--1::before { content: ''; position: absolute; top: 0; left: 50%; width: 4px; height: 4px; background: var(--v-teal-light); border-radius: 50%; transform: translateX(-50%); opacity: .5; } .v-orbital-ring--2::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 3px; height: 3px; background: var(--v-terracotta); border-radius: 50%; transform: translateX(-50%); opacity: .6; } .v-footer-lockup { display: inline-flex; align-items: center; gap: var(--v-space-6); } .v-footer-lockup__logo { font-family: var(--v-font-display); font-weight: 100; font-size: 14px; letter-spacing: var(--v-tracking-brand); text-transform: uppercase; color: var(--v-on-tertiary); } .v-footer-lockup__divider { width: 1px; height: 14px; background: rgba(138,160,168,.12); } .v-footer-lockup__tag { font-family: var(--v-font-mono); font-size: var(--v-text-micro); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); opacity: .6; } /* ========================================================================= MOLECULES — TABS ========================================================================= */ .v-tabs { display: flex; flex-direction: column; gap: var(--v-space-7); } .v-tabs__list { display: flex; border-bottom: 1px solid var(--v-border-5); gap: var(--v-space-2); position: relative; } [dir="rtl"] .v-tabs__list { flex-direction: row-reverse; } .v-tabs__tab { position: relative; font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); padding: var(--v-space-3) var(--v-space-5); cursor: pointer; transition: color var(--v-duration-base); background: none; border: none; white-space: nowrap; } .v-tabs__tab::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--v-teal-light); transform: scaleX(0); transform-origin: center; transition: transform var(--v-duration-base); } .v-tabs__tab:hover { color: var(--v-on-secondary); } .v-tabs__tab[aria-selected="true"] { color: var(--v-on-primary); } .v-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); } .v-tabs__panel { display: none; animation: v-panel-in var(--v-duration-slow) var(--v-ease-in-out); } .v-tabs__panel[data-active="true"] { display: block; } /* ========================================================================= MOLECULES — ACCORDION ========================================================================= */ .v-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--v-border-5); } .v-accordion__item { border-bottom: 1px solid var(--v-border-5); } .v-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-4); padding: var(--v-space-5) 0; font-family: var(--v-font-display); font-weight: 300; font-size: var(--v-text-h5); color: var(--v-on-primary); text-align: start; cursor: pointer; } .v-accordion__trigger::after { content: '+'; font-family: var(--v-font-mono); font-size: 18px; color: var(--v-teal-light); transition: transform var(--v-duration-base); } .v-accordion__item[data-open="true"] .v-accordion__trigger::after { content: '−'; } .v-accordion__panel { display: none; padding-bottom: var(--v-space-5); font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); line-height: var(--v-leading-loose); } .v-accordion__item[data-open="true"] .v-accordion__panel { display: block; } /* ========================================================================= MOLECULES — MODAL / DIALOG ========================================================================= */ dialog.v-modal { background: var(--v-surface-section); color: var(--v-on-primary); border: 1px solid var(--v-border-5); padding: 0; max-width: 560px; width: calc(100% - 48px); max-height: calc(100dvh - 48px); margin: auto; inset: 0; border-radius: var(--v-radius-1); box-shadow: var(--v-shadow-card-lg); } /* The custom-element host is just a wrapper — keep it out of layout flow. */ v-modal { display: contents; } .v-modal::backdrop { background: rgba(5,30,40,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .v-modal__header { display: flex; align-items: baseline; justify-content: space-between; padding: var(--v-space-7) var(--v-space-8) var(--v-space-4); border-bottom: 1px solid var(--v-border-4); gap: var(--v-space-4); } .v-modal__title { font-family: var(--v-font-display); font-weight: 200; font-size: var(--v-text-h4); color: var(--v-on-primary); letter-spacing: 0.5px; } .v-modal__close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 999px; font-family: var(--v-font-mono); font-size: 16px; line-height: 1; color: var(--v-on-tertiary); cursor: pointer; padding: 0; transition: color var(--v-duration-base), background var(--v-duration-base); } .v-modal__close:hover { color: var(--v-teal-light); background: rgba(127,196,212,.06); } .v-modal__close:focus-visible { outline: 2px solid var(--v-teal-light); outline-offset: 2px; background: rgba(127,196,212,.06); } .v-modal__body { padding: var(--v-space-7) var(--v-space-8); font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); line-height: var(--v-leading-loose); } .v-modal__footer { display: flex; justify-content: flex-end; gap: var(--v-space-3); padding: var(--v-space-5) var(--v-space-8); border-top: 1px solid var(--v-border-4); } /* ========================================================================= MOLECULES — TOOLTIP / POPOVER ========================================================================= */ .v-tooltip { position: relative; display: inline-flex; } .v-tooltip__bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--v-charcoal); color: var(--v-on-primary); font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: 2px; padding: 6px 12px; border: 1px solid var(--v-border-5); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--v-duration-base), transform var(--v-duration-base); z-index: var(--v-z-tooltip); } .v-tooltip:hover .v-tooltip__bubble, .v-tooltip:focus-within .v-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================================= MOLECULES — TOAST ========================================================================= */ .v-toast-region { position: fixed; bottom: var(--v-space-6); right: var(--v-space-6); display: flex; flex-direction: column; gap: var(--v-space-3); z-index: var(--v-z-toast); pointer-events: none; } [dir="rtl"] .v-toast-region { right: auto; left: var(--v-space-6); } .v-toast { pointer-events: auto; background: var(--v-charcoal); border: 1px solid var(--v-border-5); padding: var(--v-space-4) var(--v-space-5); min-width: 280px; max-width: 420px; color: var(--v-on-primary); font-family: var(--v-font-body); font-size: var(--v-text-body-sm); display: flex; gap: var(--v-space-3); align-items: flex-start; animation: v-toast-in var(--v-duration-slow) var(--v-ease-out); } .v-toast__title { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-teal-light); margin-bottom: 4px; } .v-toast--accent .v-toast__title { color: var(--v-terracotta-text); } /* ========================================================================= MOLECULES — DROPDOWN MENU ========================================================================= */ .v-menu { position: relative; display: inline-block; } .v-menu__list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; background: var(--v-charcoal); border: 1px solid var(--v-border-5); padding: var(--v-space-2); z-index: var(--v-z-raised); display: none; box-shadow: var(--v-shadow-card-lg); } .v-menu[data-open="true"] .v-menu__list { display: block; animation: v-panel-in var(--v-duration-base) var(--v-ease-out); } .v-menu__item { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); cursor: pointer; transition: all var(--v-duration-fast); text-align: start; border: none; background: transparent; width: 100%; } .v-menu__item:hover { background: rgba(127,196,212,.06); color: var(--v-on-primary); } /* ========================================================================= MOLECULES — BREADCRUMB / PAGINATION ========================================================================= */ .v-breadcrumb { display: flex; gap: var(--v-space-3); align-items: center; font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); } .v-breadcrumb__sep { color: var(--v-on-tertiary); opacity: .4; } .v-breadcrumb a { color: var(--v-on-tertiary); text-decoration: none; } .v-breadcrumb a:hover { color: var(--v-teal-light); } .v-breadcrumb__current { color: var(--v-on-primary); } .v-pagination { display: inline-flex; align-items: center; gap: var(--v-space-2); font-family: var(--v-font-mono); } .v-pagination__btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--v-text-label); letter-spacing: 1px; border: 1px solid var(--v-border-5); background: transparent; color: var(--v-on-secondary); cursor: pointer; transition: all var(--v-duration-base); } .v-pagination__btn:hover { border-color: var(--v-teal-light); color: var(--v-on-primary); } .v-pagination__btn[aria-current="page"] { border-color: var(--v-teal-light); background: rgba(127,196,212,.06); color: var(--v-on-primary); } /* ========================================================================= MOLECULES — TABLE ========================================================================= */ .v-table { width: 100%; border-collapse: collapse; font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); } /* Horizontal-scroll wrapper for tables on narrow viewports. Wrap any in
to keep the table usable below ~480px without overflowing the page. */ .v-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .v-table-wrap .v-table { min-width: 480px; } .v-table thead th { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); text-align: start; padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-5); font-weight: 400; background: var(--v-border-1); } .v-table tbody td { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-3); vertical-align: top; } .v-table tbody tr:hover { background: rgba(127,196,212,.03); } /* ========================================================================= MOLECULES — STEPPER (interactive process) ========================================================================= */ .v-stepper { margin-top: var(--v-space-16); padding: 0 var(--v-space-10); } .v-stepper__track { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--v-space-5); } .v-stepper__line { position: absolute; top: 16px; left: 16px; right: 16px; height: 1px; background: var(--v-border-6); } .v-stepper__progress { position: absolute; top: 16px; left: 16px; height: 1px; width: 0%; background: linear-gradient(90deg, var(--v-teal-light), var(--v-teal-core)); transition: width var(--v-duration-slow) var(--v-ease-in-out); } [dir="rtl"] .v-stepper__progress { left: auto; right: 16px; background: linear-gradient(-90deg, var(--v-teal-light), var(--v-teal-core)); } .v-stepper__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--v-space-3); background: none; border: none; cursor: pointer; padding: 0; z-index: 2; min-width: 120px; } .v-stepper__ring { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--v-border-8); background: var(--v-surface-page); display: flex; align-items: center; justify-content: center; transition: all var(--v-duration-slow) var(--v-ease-in-out); } .v-stepper__ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--v-border-8); transition: all var(--v-duration-slow) var(--v-ease-in-out); } .v-stepper__node[data-state="active"] .v-stepper__ring, .v-stepper__node[data-state="current"] .v-stepper__ring { border-color: var(--v-teal-light); } .v-stepper__node[data-state="active"] .v-stepper__ring { box-shadow: var(--v-shadow-glow-sm); } .v-stepper__node[data-state="active"] .v-stepper__ring::after { background: var(--v-teal-light); } .v-stepper__node[data-state="current"] .v-stepper__ring { box-shadow: var(--v-shadow-glow-md); } .v-stepper__node[data-state="current"] .v-stepper__ring::after { width: 12px; height: 12px; background: var(--v-teal-light); } .v-stepper__num { font-family: var(--v-font-mono); font-size: var(--v-text-micro); letter-spacing: var(--v-tracking-mono); text-transform: uppercase; color: var(--v-on-tertiary); transition: color var(--v-duration-slow); } .v-stepper__label { font-family: var(--v-font-display); font-weight: 300; font-size: 14px; color: var(--v-on-tertiary); transition: color var(--v-duration-slow); white-space: nowrap; } .v-stepper__node[data-state="active"] .v-stepper__num { color: var(--v-teal-light); } .v-stepper__node[data-state="active"] .v-stepper__label { color: var(--v-on-primary); } .v-stepper__node:hover .v-stepper__ring { border-color: var(--v-teal-core); } .v-stepper__node:hover .v-stepper__label { color: var(--v-on-secondary); } .v-stepper__panels { margin-top: var(--v-space-10); position: relative; min-height: 280px; } .v-stepper__panel { display: none; animation: v-panel-in var(--v-duration-slow) var(--v-ease-in-out); } .v-stepper__panel[data-active="true"] { display: block; } .v-stepper__panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-space-10); align-items: start; } .v-stepper__panel-header { display: flex; align-items: baseline; gap: var(--v-space-4); margin-bottom: var(--v-space-4); flex-wrap: wrap; } .v-stepper__panel-num { font-family: var(--v-font-mono); font-size: var(--v-text-label); letter-spacing: var(--v-tracking-mono); color: var(--v-teal-light); } .v-stepper__panel-title { font-family: var(--v-font-display); font-weight: 200; font-size: 24px; color: var(--v-on-primary); line-height: var(--v-leading-snug); } .v-stepper__panel-duration { font-family: var(--v-font-mono); font-size: 11px; letter-spacing: 2px; color: var(--v-terracotta-text); background: rgba(181,105,63,.08); padding: 4px 12px; border: 1px solid rgba(181,105,63,.20); border-radius: var(--v-radius-1); margin-inline-start: auto; } .v-stepper__panel-desc { font-family: var(--v-font-body); font-size: var(--v-text-body-sm); font-weight: 300; color: var(--v-on-secondary); line-height: var(--v-leading-body); margin-bottom: var(--v-space-7); } .v-stepper__deliv { border-top: 1px solid var(--v-border-5); padding-top: var(--v-space-5); } .v-stepper__deliv-label { font-family: var(--v-font-mono); font-size: var(--v-text-micro); letter-spacing: 4px; text-transform: uppercase; color: var(--v-on-tertiary); margin-bottom: var(--v-space-4); } .v-stepper__deliv-list { display: flex; flex-direction: column; gap: var(--v-space-2); } .v-stepper__deliv-list li { font-family: var(--v-font-body); font-size: 13px; font-weight: 300; color: var(--v-on-secondary); padding-inline-start: var(--v-space-4); position: relative; } .v-stepper__deliv-list li::before { content: '›'; position: absolute; inset-inline-start: 0; color: var(--v-teal-light); font-family: var(--v-font-mono); font-size: 14px; } [dir="rtl"] .v-stepper__deliv-list li::before { content: '‹'; } .v-stepper__artifact { background: rgba(8,47,60,.4); padding: var(--v-space-7); position: relative; overflow: hidden; } .v-stepper__artifact::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 19px, var(--v-border-2) 19px, var(--v-border-2) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, var(--v-border-2) 19px, var(--v-border-2) 20px); pointer-events: none; } .v-stepper__artifact-label { font-family: var(--v-font-mono); font-size: var(--v-text-micro); letter-spacing: 4px; text-transform: uppercase; color: var(--v-teal-light); margin-bottom: var(--v-space-5); position: relative; } .v-stepper__artifact-code { font-family: var(--v-font-mono); font-size: 12px; line-height: 1.7; color: var(--v-on-secondary); white-space: pre; overflow-x: auto; position: relative; direction: ltr; text-align: left; } /* ========================================================================= MOLECULES — PARTICLE / GLOW / SCAN LINE ========================================================================= */ .v-particle-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .v-particle { position: absolute; width: 2px; height: 2px; background: var(--v-teal-light); border-radius: 50%; opacity: 0; animation: v-particle linear infinite; } .v-ambient-glow { position: absolute; width: 700px; height: 700px; top: 50%; left: 50%; transform: translate(-50%, -55%); background: radial-gradient(circle, rgba(26,122,143,.12) 0%, rgba(26,122,143,.04) 35%, transparent 65%); pointer-events: none; animation: v-glow 6s ease-in-out infinite; } .v-scan-line { position: absolute; left: 0; right: 0; height: 1px; top: 30%; background: linear-gradient(90deg, transparent, rgba(127,196,212,.06) 20%, rgba(127,196,212,.12) 50%, rgba(127,196,212,.06) 80%, transparent); pointer-events: none; animation: v-scan 8s ease-in-out infinite; } .v-cursor-glow { position: absolute; inset: 0; background: radial-gradient( 400px circle at var(--v-cursor-x, 50%) var(--v-cursor-y, 50%), rgba(127,196,212,.06) 0%, transparent 70% ); pointer-events: none; transition: opacity var(--v-duration-base); } .v-scroll-indicator { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--v-space-2); } .v-scroll-indicator__label { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--v-tracking-overline); color: var(--v-on-tertiary); } .v-scroll-indicator__line { width: 1px; height: 28px; background: linear-gradient(to bottom, var(--v-teal-core), transparent); animation: v-pulse 2.5s ease-in-out infinite; } /* ========================================================================= SECTION — NAV ========================================================================= */ .v-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--v-z-nav); padding: 0 var(--v-section-px); height: 72px; display: flex; align-items: center; justify-content: space-between; background: transparent; transition: all var(--v-duration-slow) var(--v-ease-in-out); } .v-nav[data-scrolled="true"] { background: rgba(5,30,40,.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--v-border-4); } [data-theme="light"] .v-nav[data-scrolled="true"] { background: rgba(255,253,247,.85); border-bottom: 1px solid var(--v-border-5); } .v-nav__links { display: flex; gap: var(--v-space-8); align-items: center; } [dir="rtl"] .v-nav__links { flex-direction: row-reverse; } .v-nav__link { font-family: var(--v-font-body); font-size: 13px; font-weight: 400; color: var(--v-on-secondary); text-decoration: none; letter-spacing: .5px; position: relative; transition: color var(--v-duration-base); } .v-nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--v-teal-light); transition: width var(--v-duration-base); } .v-nav__link:hover { color: var(--v-teal-light); } .v-nav__link:hover::after { width: 100%; } [dir="rtl"] .v-nav__link::after { left: auto; right: 0; } /* ========================================================================= SECTION — HERO ========================================================================= */ .v-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--v-surface-page); padding: var(--v-space-12); } .v-hero__grid { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 99px, rgba(127,196,212,.018) 99px, rgba(127,196,212,.018) 100px), repeating-linear-gradient(90deg, transparent, transparent 99px, rgba(127,196,212,.018) 99px, rgba(127,196,212,.018) 100px); } .v-hero__vmark { margin-bottom: var(--v-space-12); animation: v-cinema-in var(--v-duration-cinema) var(--v-ease-out) both; position: relative; z-index: 2; } .v-hero__content { text-align: center; position: relative; z-index: 2; padding: 0 var(--v-space-6); animation: v-text-in 1s var(--v-ease-out) .4s both; } .v-hero__heading { font-family: var(--v-font-display); font-weight: 100; font-size: var(--v-text-h1); line-height: var(--v-leading-tight); letter-spacing: var(--v-tracking-display); margin-bottom: var(--v-space-5); color: var(--v-on-primary); max-width: 800px; margin-inline: auto; } .v-hero__sub { font-family: var(--v-font-body); font-size: var(--v-text-body); font-weight: 300; color: var(--v-on-secondary); line-height: var(--v-leading-loose); max-width: var(--v-container-tight); margin: 0 auto var(--v-space-4); } .v-hero__proof { font-family: var(--v-font-mono); font-size: var(--v-text-overline); text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); max-width: 520px; margin: 0 auto var(--v-space-8); line-height: var(--v-leading-body); opacity: .8; } /* ========================================================================= SECTION — CAPABILITY STRIP ========================================================================= */ .v-cap-strip { background: var(--v-surface-section); padding: 0 var(--v-section-px); position: relative; } .v-cap-strip::before, .v-cap-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, var(--v-border-4) 50%, transparent 90%); } .v-cap-strip::before { top: 0; } .v-cap-strip::after { bottom: 0; } .v-cap-strip__grid { max-width: var(--v-container-max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } .v-cap-item { padding: var(--v-space-10) var(--v-space-6); text-align: center; position: relative; transition: background var(--v-duration-slow); } .v-cap-item:hover { background: rgba(12,74,94,.12); } .v-cap-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--v-border-4); } [dir="rtl"] .v-cap-item:not(:last-child)::after { right: auto; left: 0; } .v-cap-item__num { font-family: var(--v-font-mono); font-size: var(--v-text-label); letter-spacing: var(--v-tracking-mono); color: var(--v-teal-light); margin-bottom: var(--v-space-3); } .v-cap-item__title { font-family: var(--v-font-display); font-weight: 200; font-size: 16px; color: var(--v-on-primary); line-height: var(--v-leading-snug); letter-spacing: 0.5px; } /* ========================================================================= SECTION — STATS BAR ========================================================================= */ .v-stats-bar { background: var(--v-surface-section); padding: 0 var(--v-section-px); position: relative; } .v-stats-bar::before, .v-stats-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, var(--v-border-4) 50%, transparent 90%); } .v-stats-bar::before { top: 0; } .v-stats-bar::after { bottom: 0; } .v-stats-bar__grid { max-width: var(--v-container-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } /* ========================================================================= SECTION — THESIS DIVIDER ========================================================================= */ .v-thesis { background: var(--v-surface-featured); padding: var(--v-space-14) var(--v-section-px); scroll-snap-align: start; position: relative; overflow: hidden; } .v-thesis::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px), repeating-linear-gradient(0deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px); pointer-events: none; } .v-thesis__text { font-family: var(--v-font-display); font-weight: 100; font-size: var(--v-text-h3); color: var(--v-on-primary); text-align: center; letter-spacing: 1px; line-height: var(--v-leading-normal); max-width: 780px; margin: 0 auto; position: relative; z-index: 1; } /* ========================================================================= SECTION — QUOTE ========================================================================= */ .v-quote-section { background: var(--v-surface-page); padding: var(--v-space-20) var(--v-section-px); position: relative; text-align: center; } /* ========================================================================= SECTION — OUTCOMES / SERVICES / ENGAGEMENT (card grids) ========================================================================= */ .v-card-grid { display: grid; gap: 2px; margin-top: var(--v-space-12); } .v-card-grid--3 { grid-template-columns: repeat(3, 1fr); } .v-card-grid--4 { grid-template-columns: repeat(4, 1fr); } .v-card-grid--svc { grid-template-columns: 1fr 1fr; } .v-card-grid > .v-card--featured-row { grid-column: 1 / -1; } /* Outcome card flavor */ .v-outcome-card { background: var(--v-surface-page); padding: var(--v-space-12) var(--v-space-9); text-align: center; position: relative; transition: all var(--v-duration-slow); overflow: hidden; } .v-outcome-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--v-terracotta); transform: scaleX(0); transform-origin: left; transition: transform var(--v-duration-slower) var(--v-ease-in-out); } .v-outcome-card:hover { background: rgba(8,47,60,.6); } .v-outcome-card:hover::before { transform: scaleX(1); } [dir="rtl"] .v-outcome-card::before { transform-origin: right; } .v-outcome-card__val { font-family: var(--v-font-display); font-weight: 100; font-size: var(--v-text-stat); color: var(--v-teal-light); letter-spacing: var(--v-tracking-display); margin-bottom: var(--v-space-3); line-height: 1; } .v-outcome-card__label { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-terracotta-text); margin-bottom: var(--v-space-5); } .v-outcome-card__desc { font-family: var(--v-font-body); font-size: var(--v-text-body-xs); font-weight: 300; color: var(--v-on-secondary); line-height: var(--v-leading-loose); text-align: start; } /* ========================================================================= SECTION — PROBLEM (cinematic 3-scene) ========================================================================= */ .v-problem { padding: 0; } .v-problem-header { padding: var(--v-space-20) var(--v-section-px) var(--v-space-10); position: relative; } .v-problem-scene { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: var(--v-space-20) var(--v-section-px); scroll-snap-align: start; } .v-problem-scene__keyword { position: absolute; font-family: var(--v-font-display); font-weight: 100; font-size: clamp(120px, 20vw, 280px); color: var(--v-teal-light); opacity: 0.06; line-height: 0.85; pointer-events: none; user-select: none; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; letter-spacing: 8px; z-index: 0; } .v-problem-scene__content { position: relative; z-index: 2; max-width: 640px; text-align: center; } .v-problem-scene__role { font-family: var(--v-font-mono); font-size: var(--v-text-overline); text-transform: uppercase; letter-spacing: var(--v-tracking-overline); color: var(--v-terracotta-text); margin-bottom: var(--v-space-7); } .v-problem-scene__hl { font-family: var(--v-font-display); font-weight: 200; font-size: var(--v-text-h3); color: var(--v-on-primary); margin-bottom: var(--v-space-6); line-height: var(--v-leading-snug); letter-spacing: 1px; } .v-problem-scene__body { font-family: var(--v-font-body); font-size: var(--v-text-body); font-weight: 300; color: var(--v-on-secondary); line-height: var(--v-leading-loose); margin-bottom: var(--v-space-10); } .v-problem-scene__stat { display: flex; align-items: baseline; justify-content: center; gap: var(--v-space-4); padding-top: var(--v-space-8); border-top: 1px solid var(--v-border-5); } .v-problem-scene--drag { background: var(--v-surface-page); } .v-problem-scene--debt { background: var(--v-surface-section); } .v-problem-scene--bleed{ background: var(--v-surface-page); } .v-problem-scene__atmo { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .v-problem-scene--drag .v-problem-scene__atmo { background: radial-gradient(ellipse at 30% 60%, rgba(26,122,143,.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 40%, rgba(12,74,94,.06) 0%, transparent 50%); animation: v-drag-drift 12s ease-in-out infinite; } .v-problem-scene--debt .v-problem-scene__atmo { background: repeating-linear-gradient(0deg, transparent 0px, transparent 38px, rgba(127,196,212,.03) 38px, rgba(127,196,212,.03) 40px); mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 40%, transparent 70%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 40%, transparent 70%); animation: v-debt-stack 8s ease-in-out infinite; } .v-problem-scene--bleed .v-problem-scene__atmo { box-shadow: inset 0 0 120px 40px rgba(181,105,63,.06); animation: v-bleed 4s ease-in-out infinite; } .v-problem-scene--bleed .v-problem-scene__keyword { color: var(--v-terracotta); opacity: 0.05; } /* ========================================================================= SECTION — CONTACT ========================================================================= */ .v-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-space-20); align-items: start; margin-top: var(--v-space-12); } .v-contact-form { background: var(--v-surface-page); padding: var(--v-space-12) var(--v-space-10); } .v-contact__detail-label { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); margin-bottom: var(--v-space-1); } .v-contact__detail-value { font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-primary); font-weight: 300; margin-bottom: var(--v-space-5); } /* ========================================================================= SECTION — FOOTER ========================================================================= */ .v-footer { background: var(--v-surface-footer); border-top: 1px solid var(--v-border-3); color: var(--v-on-secondary); } .v-footer__upper { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--v-space-10) var(--v-section-px) var(--v-space-8); border-bottom: 1px solid var(--v-border-3); gap: var(--v-space-12); } .v-footer__section-label { font-family: var(--v-font-mono); font-size: var(--v-text-micro); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); opacity: .7; margin-bottom: var(--v-space-4); } .v-footer__lower { display: flex; align-items: center; justify-content: space-between; padding: var(--v-space-6) var(--v-section-px); } .v-footer__copyright { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); opacity: .6; } [dir="rtl"] .v-footer__upper { flex-direction: row-reverse; } [dir="rtl"] .v-footer__lower { flex-direction: row-reverse; } /* ========================================================================= REVEAL / SCROLL ANIMATIONS ========================================================================= */ .v-reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--v-duration-reveal) var(--v-ease-in-out), transform var(--v-duration-reveal) var(--v-ease-in-out); } .v-reveal[data-visible="true"] { opacity: 1; transform: translateY(0); } .v-reveal--left { transform: translateX(-60px); } .v-reveal--right { transform: translateX(60px); } .v-reveal--scale { transform: scale(.92); } .v-reveal--blur { opacity: 0; filter: blur(12px); transform: translateY(30px); transition-duration: 1s; } .v-reveal--left[data-visible="true"], .v-reveal--right[data-visible="true"] { transform: translateX(0); } .v-reveal--scale[data-visible="true"] { transform: scale(1); } .v-reveal--blur[data-visible="true"] { opacity: 1; filter: blur(0); transform: translateY(0); } .v-reveal--d1 { transition-delay: .1s; } .v-reveal--d2 { transition-delay: .2s; } .v-reveal--d3 { transition-delay: .3s; } .v-reveal--d4 { transition-delay: .4s; } .v-reveal--d5 { transition-delay: .5s; } /* ========================================================================= KEYFRAMES ========================================================================= */ @keyframes v-glow { 0%, 100% { opacity: .8; transform: translate(-50%,-55%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-55%) scale(1.08); } } @keyframes v-breathe { 0%, 100% { filter: drop-shadow(0 0 40px rgba(127,196,212,.3)) drop-shadow(0 0 80px rgba(26,122,143,.15)); } 50% { filter: drop-shadow(0 0 60px rgba(127,196,212,.45)) drop-shadow(0 0 120px rgba(26,122,143,.2)); } } @keyframes v-ring-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes v-cinema-in { from { opacity: 0; transform: scale(.8) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes v-text-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-particle { 0% { opacity: 0; transform: translateY(100vh) scale(0); } 10% { opacity: .4; } 50% { opacity: .15; } 90% { opacity: .3; } 100% { opacity: 0; transform: translateY(-20vh) scale(1); } } @keyframes v-pulse { 0%, 100% { opacity: .2; height: 28px; } 50% { opacity: .7; height: 44px; } } @keyframes v-scan { 0%, 100% { top: 15%; } 50% { top: 85%; } } @keyframes v-spin { to { transform: rotate(360deg); } } @keyframes v-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes v-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } @keyframes v-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-drag-drift { 0%, 100% { opacity: .7; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-8px); } } @keyframes v-debt-stack { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 -20px; } } @keyframes v-bleed { 0%, 100% { box-shadow: inset 0 0 120px 40px rgba(181,105,63,.04); } 50% { box-shadow: inset 0 0 180px 60px rgba(181,105,63,.09); } } /* ========================================================================= FOCUS INDICATORS One coherent system: thin outline + soft halo, AAA-compliant via contrast (4.6:1 between teal-light and any dark surface), not thickness. Form controls swap outline for a border-color + halo treatment so the indicator hugs the field instead of stacking around it. ========================================================================= */ :focus-visible { outline: var(--v-focus-ring); outline-offset: var(--v-focus-offset); } .v-btn--primary:focus-visible, .v-btn--danger:focus-visible { outline: 2px solid var(--v-on-primary); outline-offset: 2px; box-shadow: var(--v-focus-glow); } .v-stepper__node:focus-visible .v-stepper__ring { outline: var(--v-focus-ring); outline-offset: 4px; } /* Form controls — replace outline with border-color shift + halo. This avoids the double-ring problem when the field already has a border. */ .v-input:focus-visible, .v-textarea:focus-visible, .v-select:focus-visible, .v-search input:focus-visible, .v-search .v-input:focus-visible { outline: none; border-color: var(--v-teal-light); box-shadow: 0 0 0 3px rgba(127,196,212,.18); } /* ========================================================================= ARABIC + RTL OVERRIDES ========================================================================= */ [lang="ar"] body, [lang="ar"].v-body { font-family: var(--v-font-arabic); } /* Remove uppercase + reduce tracking for Arabic on every mono/display class. The wordmark stays Fraunces — guidelines §5.1. */ [lang="ar"] .v-mono, [lang="ar"] .v-overline, [lang="ar"] .v-label, [lang="ar"] .v-eyebrow, [lang="ar"] .v-micro, [lang="ar"] .v-h1, [lang="ar"] .v-h2, [lang="ar"] .v-h3, [lang="ar"] .v-h4, [lang="ar"] .v-h5, [lang="ar"] .v-display, [lang="ar"] .v-quote, [lang="ar"] .v-thesis__text, [lang="ar"] .v-hero__heading, [lang="ar"] .v-hero__sub, [lang="ar"] .v-hero__proof, [lang="ar"] .v-btn, [lang="ar"] .v-card__num, [lang="ar"] .v-card__title, [lang="ar"] .v-card__hl, [lang="ar"] .v-card__desc, [lang="ar"] .v-stat__val, [lang="ar"] .v-stat__unit, [lang="ar"] .v-stat__desc, [lang="ar"] .v-stepper__num, [lang="ar"] .v-stepper__label, [lang="ar"] .v-stepper__panel-num, [lang="ar"] .v-stepper__panel-title, [lang="ar"] .v-stepper__panel-duration, [lang="ar"] .v-stepper__panel-desc, [lang="ar"] .v-stepper__deliv-label, [lang="ar"] .v-stepper__artifact-label, [lang="ar"] .v-problem-scene__role, [lang="ar"] .v-problem-scene__hl, [lang="ar"] .v-problem-scene__body, [lang="ar"] .v-cap-item__num, [lang="ar"] .v-cap-item__title, [lang="ar"] .v-outcome-card__val, [lang="ar"] .v-outcome-card__label, [lang="ar"] .v-outcome-card__desc, [lang="ar"] .v-quote-block__attr, [lang="ar"] .v-toggle, [lang="ar"] .v-tabs__tab, [lang="ar"] .v-modal__title, [lang="ar"] .v-field__label, [lang="ar"] label.v-label, [lang="ar"] .v-footer-lockup__logo, [lang="ar"] .v-footer-lockup__tag, [lang="ar"] .v-footer__section-label, [lang="ar"] .v-footer__copyright, [lang="ar"] .v-breadcrumb, [lang="ar"] .v-badge, [lang="ar"] .v-chip, [lang="ar"] .v-tag, [lang="ar"] .v-blueprint-divider > span { font-family: var(--v-font-arabic); text-transform: none; letter-spacing: 0.5px; } /* Wordmark stays Fraunces — never override */ [lang="ar"] .v-wordmark, [lang="ar"] .v-nav .v-wordmark { font-family: var(--v-font-display) !important; } /* Size bumps for tiny Latin labels — Arabic needs 12px minimum */ [lang="ar"] .v-problem-scene__role, [lang="ar"] .v-stat__unit, [lang="ar"] .v-footer__section-label, [lang="ar"] .v-stepper__num { font-size: 12px; } /* Increase line-height for headings (tashkeel needs room) */ [lang="ar"] .v-h2, [lang="ar"] .v-h3, [lang="ar"] .v-problem-scene__hl, [lang="ar"] .v-stepper__panel-title { line-height: 1.4; } /* RTL container alignment */ [dir="rtl"] { text-align: right; } [dir="rtl"] .v-grid--split { direction: rtl; } [dir="rtl"] .v-quote-block, [dir="rtl"] .v-section-header { text-align: right; } /* Email inputs stay LTR even in RTL */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] .v-input[data-ltr="true"] { direction: ltr; text-align: left; } /* ========================================================================= REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .v-reveal { opacity: 1; transform: none; filter: none; } .v-vmark img { animation: none; } } /* ========================================================================= PRINT ========================================================================= */ @media print { :root { --v-surface-page: #FFFFFF; --v-surface-section: #FFFFFF; --v-surface-featured: #FFFFFF; --v-on-primary: #1A2E38; --v-on-secondary: #3D4E54; --v-on-tertiary: #5E7078; } body, .v-body { background: #FFFFFF; color: #1A2E38; } body::after, .v-film-grain { display: none; } .v-nav, .v-skip-link, .v-footer { display: none; } .v-hero__grid, .v-hero__vmark, .v-particle-field, .v-ambient-glow, .v-scan-line, .v-orbital-rings, .v-thesis::before { display: none; } .v-section { padding: 24pt; scroll-snap-align: none; } .v-h1, .v-h2, .v-h3 { page-break-after: avoid; } .v-card { page-break-inside: avoid; } a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #5E7078; } } /* ========================================================================= FORCED COLORS (high-contrast) — Windows high-contrast mode ========================================================================= */ @media (forced-colors: active) { .v-btn--primary, .v-btn--secondary, .v-btn--ghost, .v-btn--danger { border: 1px solid ButtonText; } .v-card { border: 1px solid CanvasText; } .v-input, .v-textarea, .v-select { border-color: CanvasText; } } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1024px) { .v-grid--split { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-12); } .v-card-grid--3, .v-card-grid--4 { grid-template-columns: minmax(0, 1fr); } .v-card-grid--svc { grid-template-columns: minmax(0, 1fr); } .v-stepper__panel-grid { grid-template-columns: minmax(0, 1fr); } .v-stepper { padding: 0 var(--v-space-4); } .v-stepper__label { font-size: 12px; } .v-stepper__node { min-width: 80px; } .v-cap-strip__grid { grid-template-columns: repeat(3, 1fr); } .v-stats-bar__grid { grid-template-columns: 1fr 1fr; } .v-contact-layout { grid-template-columns: minmax(0, 1fr); } .v-reveal--left, .v-reveal--right { transform: translateY(30px); } .v-reveal--left[data-visible="true"], .v-reveal--right[data-visible="true"] { transform: translateY(0); } } @media (max-width: 768px) { .v-nav { padding: 0 var(--v-space-4); height: 64px; } .v-wordmark { font-size: 14px; letter-spacing: 6px; } .v-nav__link { display: none; } .v-section { padding: var(--v-section-py-sm) var(--v-section-px-sm); } .v-vmark { width: min(200px, 50vw); height: min(200px, 50vw); margin-bottom: var(--v-space-8); } .v-hero__heading { font-size: clamp(24px, 5.5vw, 38px); } .v-card-grid--4 { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2); } .v-stepper { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .v-stepper__track { min-width: 320px; padding: 0 var(--v-space-2) var(--v-space-3); } .v-stepper__node { min-width: 60px; } .v-stepper__label { font-size: 11px; white-space: normal; text-align: center; max-width: 70px; } .v-stepper__artifact-code { font-size: 9px; overflow-x: auto; } .v-stepper__panel-grid { gap: var(--v-space-6); } .v-stepper__panel-header { flex-direction: column; gap: var(--v-space-2); } .v-stepper__panel-duration { margin-inline-start: 0; } .v-stepper__artifact { padding: var(--v-space-5); } .v-cap-strip__grid { grid-template-columns: 1fr 1fr; } .v-cap-item:not(:last-child)::after { display: none; } .v-stats-bar { padding: 0 var(--v-section-px-sm); } .v-stat-divider:not(:last-child)::after { display: none; } .v-quote-section { padding: var(--v-section-py-sm) var(--v-section-px-sm); } .v-quote-block { padding-left: var(--v-space-6); } [dir="rtl"] .v-quote-block { padding-left: 0; padding-right: var(--v-space-6); } .v-problem-scene { min-height: 80vh; padding: var(--v-space-12) var(--v-section-px-sm); } .v-problem-header { padding: var(--v-space-12) var(--v-section-px-sm) var(--v-space-6); } .v-problem-scene__keyword { font-size: clamp(80px, 25vw, 160px); } .v-footer__upper { flex-direction: column; gap: var(--v-space-6); padding: var(--v-space-8) var(--v-section-px-sm); text-align: center; } .v-footer__lower { flex-direction: column; gap: var(--v-space-4); text-align: center; padding: var(--v-space-5) var(--v-section-px-sm); } .v-thesis { padding: var(--v-space-10) var(--v-section-px-sm); } .v-cap-strip { padding: 0 var(--v-section-px-sm); } } /* ========================================================================= UTILITY HELPERS (minimal — DS prefers semantic classes) ========================================================================= */ .v-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .v-hidden { display: none !important; } .v-invisible { visibility: hidden; } .v-text-center { text-align: center; } .v-text-start { text-align: start; } .v-text-end { text-align: end; } .v-mt-0 { margin-top: 0; } .v-mt-4 { margin-top: var(--v-space-4); } .v-mt-8 { margin-top: var(--v-space-8); } .v-mt-12 { margin-top: var(--v-space-12); } .v-mt-20 { margin-top: var(--v-space-20); } .v-mb-0 { margin-bottom: 0; } .v-mb-4 { margin-bottom: var(--v-space-4); } .v-mb-8 { margin-bottom: var(--v-space-8); } .v-mb-12 { margin-bottom: var(--v-space-12); } .v-mb-20 { margin-bottom: var(--v-space-20); } /* ========================================================================= ═══════════════════════════════════════════════════════════════════════ v1.1 — APP-GRADE EXPANSION ═══════════════════════════════════════════════════════════════════════ Adds: semantic intent · chart palette · density modes · mobile surfaces · modern CSS (OKLCH, color-mix, light-dark, container queries, popover, safe-area, scroll-driven, anchor positioning) · 30+ new components. Everything below is purely additive — v1 surfaces still work as-is. ========================================================================= */ /* ---------- Tokens v1.1 ---------- */ :root, [data-theme="dark"] { /* Semantic intent (WCAG AA verified on Deepest + Gulf Dark) */ --v-success: #5BA88C; /* teal-shifted green, AA on dark */ --v-success-text: #8FCAB1; --v-success-bg: rgba(91,168,140,.08); --v-success-border: rgba(91,168,140,.30); --v-warning: #D4B477; /* warm sand, AA on dark */ --v-warning-text: #E5C99A; --v-warning-bg: rgba(212,180,119,.08); --v-warning-border: rgba(212,180,119,.30); --v-info: var(--v-teal-light); --v-info-text: var(--v-teal-light); --v-info-bg: rgba(127,196,212,.08); --v-info-border: rgba(127,196,212,.30); --v-danger: var(--v-terracotta); --v-danger-text: var(--v-terracotta-text); --v-danger-bg: rgba(208,138,94,.08); --v-danger-border: rgba(208,138,94,.30); /* Chart palette — 7 tones from the brand, designed for distinct categorical hue */ --v-chart-1: #7FC4D4; /* teal-light */ --v-chart-2: #D08A5E; /* terracotta-text */ --v-chart-3: #5BA88C; /* success-green */ --v-chart-4: #D4B477; /* warning-sand */ --v-chart-5: #B093C9; /* lavender — brand-extended */ --v-chart-6: #1A7A8F; /* teal-core */ --v-chart-7: #D4AFA0; /* blush */ /* Surface elevation tiers (semantic — for app shells) */ --v-surface-0: var(--v-surface-page); --v-surface-1: var(--v-surface-section); --v-surface-2: var(--v-surface-featured); --v-surface-3: var(--v-charcoal); --v-surface-overlay: color-mix(in oklch, var(--v-surface-page), transparent 6%); --v-surface-frosted: color-mix(in oklch, var(--v-surface-page) 75%, transparent); /* Density modes (overridden via [data-density="..."]) */ --v-density: 1; /* multiplier — 0.8 compact, 1 comfort, 1.15 spacious */ --v-control-h: calc(40px * var(--v-density)); --v-control-h-sm: calc(32px * var(--v-density)); --v-control-h-lg: calc(48px * var(--v-density)); --v-row-h: calc(44px * var(--v-density)); /* Touch / mobile */ --v-touch-target: 44px; /* WCAG minimum mobile */ --v-mobile-nav-h: 64px; --v-mobile-bottom-nav-h: 64px; --v-fab-size: 56px; /* Safe-area insets */ --v-safe-top: env(safe-area-inset-top, 0px); --v-safe-right: env(safe-area-inset-right, 0px); --v-safe-bottom: env(safe-area-inset-bottom, 0px); --v-safe-left: env(safe-area-inset-left, 0px); /* Modern shadow stack (multi-layer, atmospheric) */ --v-shadow-1: 0 1px 1px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.18); --v-shadow-2: 0 2px 4px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.28); --v-shadow-3: 0 4px 8px rgba(0,0,0,.12), 0 16px 48px rgba(0,0,0,.36); --v-shadow-4: 0 8px 12px rgba(0,0,0,.14), 0 32px 80px rgba(0,0,0,.48); /* Spring motion (mobile + premium UI) */ --v-spring-soft: cubic-bezier(.34,1.56,.64,1); --v-spring-bouncy: cubic-bezier(.68,-.55,.27,1.55); } [data-theme="light"] { --v-success-bg: rgba(91,168,140,.10); --v-warning-bg: rgba(212,180,119,.16); --v-info-bg: rgba(26,122,143,.08); --v-danger-bg: rgba(165,96,58,.08); --v-surface-overlay: color-mix(in oklch, var(--v-sand-pale), transparent 6%); --v-surface-frosted: color-mix(in oklch, var(--v-sand-pale) 75%, transparent); --v-shadow-1: 0 1px 2px rgba(12,74,94,.08); --v-shadow-2: 0 2px 4px rgba(12,74,94,.10), 0 8px 24px rgba(12,74,94,.12); --v-shadow-3: 0 4px 8px rgba(12,74,94,.10), 0 16px 48px rgba(12,74,94,.18); --v-shadow-4: 0 8px 12px rgba(12,74,94,.12), 0 32px 80px rgba(12,74,94,.22); } [data-density="compact"] { --v-density: .8; } [data-density="comfortable"]{ --v-density: 1; } [data-density="spacious"] { --v-density: 1.15; } /* Wide-gamut color (Display P3) — progressive enhancement */ @supports (color: color(display-p3 1 1 1)) { :root, [data-theme="dark"] { --v-teal-light: color(display-p3 .498 .769 .831); --v-terracotta-text: color-mix(in oklch, color(display-p3 .816 .541 .369), white 0%); } } /* ---------- Mobile-first base — safe-area-aware ---------- */ .v-safe-top { padding-top: var(--v-safe-top); } .v-safe-bottom { padding-bottom: var(--v-safe-bottom); } .v-safe-x { padding-inline: max(var(--v-section-px), var(--v-safe-left)) max(var(--v-section-px), var(--v-safe-right)); } .v-no-scrollbar { scrollbar-width: none; } .v-no-scrollbar::-webkit-scrollbar { display: none; } /* ---------- ALERT (inline status) ---------- */ .v-alert { display: flex; gap: var(--v-space-4); padding: var(--v-space-4) var(--v-space-5); border: 1px solid var(--v-info-border); background: var(--v-info-bg); color: var(--v-on-primary); border-radius: var(--v-radius-1); position: relative; align-items: flex-start; } .v-alert::before { content: ''; width: 3px; align-self: stretch; background: var(--v-info); margin-inline-start: calc(-1 * var(--v-space-5)); margin-inline-end: var(--v-space-2); } .v-alert--success { border-color: var(--v-success-border); background: var(--v-success-bg); } .v-alert--success::before { background: var(--v-success); } .v-alert--warning { border-color: var(--v-warning-border); background: var(--v-warning-bg); } .v-alert--warning::before { background: var(--v-warning); } .v-alert--danger { border-color: var(--v-danger-border); background: var(--v-danger-bg); } .v-alert--danger::before { background: var(--v-danger); } .v-alert__icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--v-info); margin-top: 1px; } .v-alert--success .v-alert__icon { color: var(--v-success); } .v-alert--warning .v-alert__icon { color: var(--v-warning); } .v-alert--danger .v-alert__icon { color: var(--v-danger); } .v-alert__title { font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-info); margin-bottom: 2px; } .v-alert--success .v-alert__title { color: var(--v-success-text); } .v-alert--warning .v-alert__title { color: var(--v-warning-text); } .v-alert--danger .v-alert__title { color: var(--v-danger-text); } .v-alert__body { font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); } /* ---------- ASPECT RATIO ---------- */ .v-aspect { position: relative; overflow: hidden; aspect-ratio: var(--v-aspect, 16 / 9); } .v-aspect > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v-aspect-1\:1 { --v-aspect: 1 / 1; } .v-aspect-4\:3 { --v-aspect: 4 / 3; } .v-aspect-16\:9 { --v-aspect: 16 / 9; } .v-aspect-21\:9 { --v-aspect: 21 / 9; } .v-aspect-9\:16 { --v-aspect: 9 / 16; } /* ---------- BUTTON GROUP (segmented bar) ---------- */ .v-btn-group { display: inline-flex; border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); overflow: hidden; background: var(--v-border-2); } .v-btn-group .v-btn { border-radius: 0; padding: 10px 18px; font-size: 11px; border-inline-end: 1px solid var(--v-border-5); background: transparent; color: var(--v-on-secondary); } .v-btn-group .v-btn:last-child { border-inline-end: none; } .v-btn-group .v-btn[aria-pressed="true"], .v-btn-group .v-btn[aria-current="page"] { background: rgba(127,196,212,.10); color: var(--v-on-primary); } /* ---------- TOGGLE GROUP (icon segmented) ---------- */ .v-toggle-group { display: inline-flex; gap: 2px; padding: 2px; background: var(--v-border-2); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); } .v-toggle-group__btn { width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--v-on-tertiary); border-radius: var(--v-radius-1); transition: all var(--v-duration-fast); } .v-toggle-group__btn:hover { color: var(--v-on-secondary); background: rgba(127,196,212,.06); } .v-toggle-group__btn[aria-pressed="true"] { background: rgba(127,196,212,.12); color: var(--v-on-primary); } /* ---------- INPUT GROUP (adornments) ---------- */ .v-input-group { display: flex; align-items: stretch; border: 1px solid var(--v-border-5); background: rgba(127,196,212,.04); border-radius: var(--v-radius-1); overflow: hidden; transition: all var(--v-duration-base); } .v-input-group:focus-within { border-color: var(--v-teal-core); background: rgba(127,196,212,.06); box-shadow: 0 0 0 2px rgba(127,196,212,.20); } .v-input-group .v-input, .v-input-group input { flex: 1; border: 0; background: transparent; padding: 10px 14px; } .v-input-group__addon { display: inline-flex; align-items: center; padding: 0 12px; font-family: var(--v-font-mono); font-size: var(--v-text-label); text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); background: var(--v-border-2); border-inline-start: 1px solid var(--v-border-5); } .v-input-group__addon:first-child { border-inline-start: 0; border-inline-end: 1px solid var(--v-border-5); } /* ---------- INPUT OTP (6-digit code) ---------- */ .v-otp { display: inline-flex; gap: var(--v-space-2); direction: ltr; } .v-otp__cell { width: 48px; height: 56px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--v-font-mono); font-size: 22px; font-weight: 400; color: var(--v-on-primary); text-align: center; background: rgba(127,196,212,.04); border: 1px solid var(--v-border-5); outline: none; transition: all var(--v-duration-fast); border-radius: var(--v-radius-1); } .v-otp__cell:focus, .v-otp__cell:focus-visible { border-color: var(--v-teal-light); background: rgba(127,196,212,.06); box-shadow: 0 0 0 2px rgba(127,196,212,.20); } .v-otp__cell[data-filled="true"] { color: var(--v-teal-light); } /* ---------- SLIDER ---------- */ input[type="range"].v-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; } input[type="range"].v-slider:focus { outline: none; } input[type="range"].v-slider::-webkit-slider-runnable-track { height: 2px; background: var(--v-border-5); border-radius: 999px; } input[type="range"].v-slider::-moz-range-track { height: 2px; background: var(--v-border-5); border-radius: 999px; } input[type="range"].v-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--v-teal-light); margin-top: -8px; box-shadow: 0 0 0 4px rgba(127,196,212,.20); transition: transform var(--v-duration-fast) var(--v-spring-soft); } input[type="range"].v-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--v-teal-light); border: 0; box-shadow: 0 0 0 4px rgba(127,196,212,.20); } input[type="range"].v-slider:hover::-webkit-slider-thumb { transform: scale(1.15); } input[type="range"].v-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(127,196,212,.30), 0 0 0 8px rgba(127,196,212,.10); } /* ---------- EMPTY STATE ---------- */ .v-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--v-space-16) var(--v-space-8); gap: var(--v-space-4); border: 1px dashed var(--v-border-5); border-radius: var(--v-radius-1); background: var(--v-border-1); } .v-empty__illustration { width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(127,196,212,.08), transparent 70%); border-radius: 50%; color: var(--v-teal-light); position: relative; } .v-empty__illustration::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--v-border-6); } .v-empty__title { font-family: var(--v-font-display); font-weight: 200; font-size: 22px; color: var(--v-on-primary); letter-spacing: 0.5px; } .v-empty__body { font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); max-width: 460px; line-height: var(--v-leading-loose); } .v-empty__actions { display: flex; gap: var(--v-space-3); margin-top: var(--v-space-3); } /* ---------- POPOVER (generic, anchor-positioned where supported) ---------- */ [popover].v-popover, .v-popover { background: var(--v-charcoal); color: var(--v-on-primary); border: 1px solid var(--v-border-5); padding: var(--v-space-4) var(--v-space-5); min-width: 240px; max-width: 360px; box-shadow: var(--v-shadow-3); border-radius: var(--v-radius-1); margin: 0; position: absolute; animation: v-popover-in var(--v-duration-base) var(--v-spring-soft); } @keyframes v-popover-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---------- HOVER CARD (rich preview) ---------- */ .v-hover-card { position: relative; display: inline-block; } .v-hover-card__panel { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: 320px; background: var(--v-surface-section); border: 1px solid var(--v-border-5); padding: var(--v-space-5); box-shadow: var(--v-shadow-3); opacity: 0; pointer-events: none; transition: opacity var(--v-duration-base), transform var(--v-duration-base) var(--v-spring-soft); z-index: var(--v-z-tooltip); } .v-hover-card:hover .v-hover-card__panel, .v-hover-card:focus-within .v-hover-card__panel { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* ---------- CONTEXT MENU (right-click) ---------- */ .v-context-menu { position: fixed; min-width: 220px; background: var(--v-charcoal); border: 1px solid var(--v-border-5); padding: var(--v-space-2); z-index: var(--v-z-modal); display: none; box-shadow: var(--v-shadow-3); border-radius: var(--v-radius-1); animation: v-popover-in var(--v-duration-base) var(--v-spring-soft); } .v-context-menu[data-open="true"] { display: block; } /* ---------- DRAWER (right edge, app shell) ---------- */ .v-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 92vw); background: var(--v-surface-section); border-inline-start: 1px solid var(--v-border-5); z-index: var(--v-z-modal); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--v-duration-slow) var(--v-ease-out); box-shadow: var(--v-shadow-4); } [dir="rtl"] .v-drawer { transform: translateX(-100%); } .v-drawer[data-open="true"] { transform: translateX(0); } .v-drawer__backdrop { position: fixed; inset: 0; background: rgba(5,30,40,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: calc(var(--v-z-modal) - 1); opacity: 0; pointer-events: none; transition: opacity var(--v-duration-slow); } .v-drawer[data-open="true"] + .v-drawer__backdrop, .v-drawer__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } .v-drawer__header, .v-drawer__body, .v-drawer__footer { padding: var(--v-space-6) var(--v-space-7); } .v-drawer__header { border-bottom: 1px solid var(--v-border-4); display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-4); } .v-drawer__body { flex: 1; overflow-y: auto; } .v-drawer__footer { border-top: 1px solid var(--v-border-4); display: flex; gap: var(--v-space-3); justify-content: flex-end; } .v-drawer__title { font-family: var(--v-font-display); font-weight: 200; font-size: 20px; color: var(--v-on-primary); } /* ---------- SHEET (mobile bottom sheet) ---------- */ .v-sheet { position: fixed; bottom: 0; inset-inline: 0; background: var(--v-surface-section); border-top: 1px solid var(--v-border-5); border-top-left-radius: 16px; border-top-right-radius: 16px; z-index: var(--v-z-modal); transform: translateY(100%); transition: transform var(--v-duration-slow) var(--v-spring-soft); max-height: 90vh; display: flex; flex-direction: column; padding-bottom: var(--v-safe-bottom); box-shadow: var(--v-shadow-4); } .v-sheet[data-open="true"] { transform: translateY(0); } .v-sheet__handle { width: 36px; height: 4px; border-radius: 4px; background: var(--v-border-7); margin: 12px auto; } .v-sheet__header, .v-sheet__body, .v-sheet__footer { padding: var(--v-space-4) var(--v-space-6); } .v-sheet__body { flex: 1; overflow-y: auto; } /* ---------- SIDEBAR (collapsible app shell) ---------- */ .v-sidebar { position: sticky; top: 0; align-self: start; width: 280px; height: 100vh; background: var(--v-surface-section); border-inline-end: 1px solid var(--v-border-4); display: flex; flex-direction: column; transition: width var(--v-duration-slow) var(--v-ease-out); padding-bottom: var(--v-safe-bottom); } .v-sidebar[data-collapsed="true"] { width: 72px; } .v-sidebar[data-collapsed="true"] .v-sidebar__label, .v-sidebar[data-collapsed="true"] .v-sidebar__brand { opacity: 0; pointer-events: none; } .v-sidebar__brand { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-4); transition: opacity var(--v-duration-base); display: flex; align-items: center; gap: var(--v-space-3); } /* Wordmark tracking inside the sidebar is too wide at the global 10px; bring it in for the dense workspace context. */ .v-sidebar__brand .v-wordmark { letter-spacing: 4px; font-size: 13px; } .v-sidebar__group { padding: var(--v-space-2); display: flex; flex-direction: column; gap: 2px; } .v-sidebar__group-label { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); opacity: .6; padding: var(--v-space-3) var(--v-space-3) var(--v-space-1); } .v-sidebar__item { display: flex; align-items: center; gap: var(--v-space-3); padding: 10px 12px; font-family: var(--v-font-body); font-size: 14px; font-weight: 400; color: var(--v-on-secondary); text-decoration: none; border-radius: var(--v-radius-1); position: relative; transition: all var(--v-duration-fast); border-inline-start: 2px solid transparent; min-height: 40px; } .v-sidebar__item:hover { background: rgba(127,196,212,.04); color: var(--v-on-primary); } .v-sidebar__item[aria-current="page"] { background: rgba(127,196,212,.06); color: var(--v-on-primary); border-inline-start-color: var(--v-teal-light); } .v-sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--v-on-tertiary); } .v-sidebar__item:hover .v-sidebar__icon, .v-sidebar__item[aria-current="page"] .v-sidebar__icon { color: var(--v-teal-light); } .v-sidebar__label { white-space: nowrap; transition: opacity var(--v-duration-base); } .v-sidebar__footer { margin-top: auto; padding: var(--v-space-4); border-top: 1px solid var(--v-border-4); } .v-sidebar__collapse { position: absolute; top: 24px; inset-inline-end: -12px; width: 24px; height: 24px; background: var(--v-surface-section); border: 1px solid var(--v-border-5); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } /* ---------- RESIZABLE PANELS ---------- */ .v-resizable { display: flex; width: 100%; height: 100%; } .v-resizable__panel { overflow: hidden; min-width: 0; } .v-resizable__handle { flex-shrink: 0; width: 4px; cursor: col-resize; background: var(--v-border-4); position: relative; transition: background var(--v-duration-fast); } .v-resizable__handle:hover, .v-resizable__handle[data-dragging="true"] { background: var(--v-teal-light); } .v-resizable--vertical { flex-direction: column; } .v-resizable--vertical .v-resizable__handle { width: 100%; height: 4px; cursor: row-resize; } /* ---------- SCROLL AREA (custom-styled scrollbar) ---------- */ .v-scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--v-border-6) transparent; } .v-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; } .v-scroll-area::-webkit-scrollbar-track { background: transparent; } .v-scroll-area::-webkit-scrollbar-thumb { background: var(--v-border-6); border-radius: 999px; } .v-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--v-border-8); } /* ---------- COMBOBOX (searchable select) ---------- */ .v-combobox { position: relative; display: inline-block; width: 100%; max-width: 360px; } .v-combobox__input { width: 100%; padding-right: 36px; } [dir="rtl"] .v-combobox__input { padding-right: 16px; padding-left: 36px; } .v-combobox__caret { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); pointer-events: none; color: var(--v-on-tertiary); width: 14px; height: 14px; } .v-combobox__list { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; right: 0; background: var(--v-charcoal); border: 1px solid var(--v-border-5); max-height: 280px; overflow-y: auto; z-index: var(--v-z-raised); display: none; box-shadow: var(--v-shadow-3); } .v-combobox[data-open="true"] .v-combobox__list { display: block; animation: v-popover-in var(--v-duration-base) var(--v-spring-soft); } .v-combobox__option { padding: 10px 14px; font-family: var(--v-font-body); font-size: 14px; font-weight: 300; color: var(--v-on-secondary); cursor: pointer; transition: background var(--v-duration-fast); display: flex; align-items: center; gap: var(--v-space-3); } .v-combobox__option:hover, .v-combobox__option[aria-selected="true"] { background: rgba(127,196,212,.06); color: var(--v-on-primary); } .v-combobox__option[aria-current="true"] { background: rgba(127,196,212,.10); color: var(--v-on-primary); } .v-combobox__group { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); padding: var(--v-space-3) var(--v-space-4) var(--v-space-1); } /* ---------- COMMAND PALETTE (⌘K) ---------- */ .v-command { width: min(640px, 92vw); max-height: 80vh; background: var(--v-surface-section); border: 1px solid var(--v-border-5); box-shadow: var(--v-shadow-4); border-radius: var(--v-radius-2); overflow: hidden; display: none; flex-direction: column; } .v-command[data-open="true"] { display: flex; } .v-command__search { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-4); } .v-command__search input { flex: 1; background: transparent; border: 0; font-family: var(--v-font-body); font-size: 16px; color: var(--v-on-primary); outline: none; } .v-command__search input::placeholder { color: var(--v-on-tertiary); } .v-command__hint { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 2px; color: var(--v-on-tertiary); display: inline-flex; gap: 4px; } .v-command__list { flex: 1; overflow-y: auto; padding: var(--v-space-2); max-height: 60vh; } .v-command__group-label { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); opacity: .7; padding: var(--v-space-4) var(--v-space-3) var(--v-space-2); } .v-command__item { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-secondary); border-radius: var(--v-radius-1); cursor: pointer; border: 0; background: transparent; width: 100%; text-align: start; } .v-command__item:hover, .v-command__item[aria-current="true"] { background: rgba(127,196,212,.08); color: var(--v-on-primary); } .v-command__item-icon { width: 16px; height: 16px; color: var(--v-on-tertiary); flex-shrink: 0; } .v-command__item-shortcut { margin-inline-start: auto; font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 1px; color: var(--v-on-tertiary); } .v-command__footer { display: flex; align-items: center; gap: var(--v-space-4); padding: var(--v-space-3) var(--v-space-5); border-top: 1px solid var(--v-border-4); font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 1px; color: var(--v-on-tertiary); } /* ---------- CALENDAR (month grid) ---------- */ .v-calendar { width: 308px; background: var(--v-surface-section); border: 1px solid var(--v-border-5); padding: var(--v-space-4); border-radius: var(--v-radius-1); font-family: var(--v-font-body); } .v-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--v-space-3); } .v-calendar__title { font-family: var(--v-font-display); font-weight: 200; font-size: 16px; color: var(--v-on-primary); letter-spacing: 0.5px; } .v-calendar__nav { display: inline-flex; gap: var(--v-space-1); } .v-calendar__nav button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--v-border-5); color: var(--v-on-secondary); cursor: pointer; border-radius: var(--v-radius-1); } .v-calendar__nav button:hover { background: rgba(127,196,212,.06); color: var(--v-on-primary); } .v-calendar__weekdays, .v-calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .v-calendar__weekday { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); text-align: center; padding: 6px 0; } .v-calendar__day { height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--v-on-secondary); background: transparent; border: 0; cursor: pointer; border-radius: var(--v-radius-1); position: relative; } .v-calendar__day:hover { background: rgba(127,196,212,.06); color: var(--v-on-primary); } .v-calendar__day[data-today="true"] { color: var(--v-teal-light); font-weight: 500; } .v-calendar__day[data-selected="true"] { background: var(--v-teal-light); color: var(--v-deepest); } .v-calendar__day[data-outside="true"] { color: var(--v-on-tertiary); opacity: .4; } .v-calendar__day[data-in-range="true"] { background: rgba(127,196,212,.10); color: var(--v-on-primary); border-radius: 0; } .v-calendar__day[data-disabled="true"] { opacity: .25; cursor: not-allowed; } /* ---------- DATE PICKER (input + popover calendar) ---------- */ .v-datepicker { position: relative; display: inline-block; width: 100%; max-width: 240px; } .v-datepicker__pop { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: var(--v-z-raised); display: none; } .v-datepicker[data-open="true"] .v-datepicker__pop { display: block; animation: v-popover-in var(--v-duration-base) var(--v-spring-soft); } .v-datepicker__input { padding-right: 36px; } .v-datepicker__icon { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--v-on-tertiary); pointer-events: none; } /* ========================================================================= CUSTOM-ELEMENT HOST DEFAULTS Browsers render unknown elements as `display: inline` by default. For any component that contains block content or needs box-model layout (padding, borders, width), we must lock its host element to block/inline-block. Without this, dashed borders fragment, toggles wander, icons collapse. ========================================================================= */ v-icon { display: inline-flex; vertical-align: middle; } v-file-drop, v-dropzone { display: block; } v-toggle, v-theme-toggle, v-lang-toggle, v-copy-button { display: inline-flex; align-items: center; gap: var(--v-space-2); } v-tabs, v-accordion, v-stepper, v-modal, v-drawer, v-sheet, v-toast-region, v-nav, v-sidebar, v-resizable, v-otp, v-combobox, v-data-table, v-tree, v-chart { display: block; } v-daterange { display: inline-flex; align-items: center; } v-stat, v-vmark, v-orbital-rings, v-particles, v-cursor-glow { display: inline-block; } /* ---------- FILE UPLOAD / DROPZONE ---------- */ .v-dropzone { border: 2px dashed var(--v-border-6); border-radius: var(--v-radius-1); padding: var(--v-space-12) var(--v-space-8); text-align: center; background: var(--v-border-1); transition: all var(--v-duration-base); cursor: pointer; position: relative; } .v-dropzone:hover, .v-dropzone[data-dragover="true"] { border-color: var(--v-teal-light); background: rgba(127,196,212,.06); } /* Click-anywhere: visible content can't intercept the file picker. */ .v-dropzone > :not(input) { pointer-events: none; } .v-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; } .v-dropzone__icon { display: block; width: 32px; height: 32px; color: var(--v-teal-light); margin: 0 auto var(--v-space-3); } .v-dropzone__title { font-family: var(--v-font-display); font-weight: 300; font-size: 18px; color: var(--v-on-primary); margin-bottom: var(--v-space-2); } .v-dropzone__sub { font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-secondary); } .v-dropzone__hint { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); margin-top: var(--v-space-4); } .v-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .v-file-list { display: flex; flex-direction: column; gap: var(--v-space-2); margin-top: var(--v-space-4); } .v-file-item { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); background: var(--v-border-2); border: 1px solid var(--v-border-4); border-radius: var(--v-radius-1); } .v-file-item__name { flex: 1; font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-primary); } .v-file-item__size { font-family: var(--v-font-mono); font-size: 10px; color: var(--v-on-tertiary); letter-spacing: 1px; } /* ---------- FORM COMPOSER ---------- */ .v-form { display: flex; flex-direction: column; gap: var(--v-space-6); } .v-form-section { display: flex; flex-direction: column; gap: var(--v-space-4); padding-bottom: var(--v-space-8); border-bottom: 1px solid var(--v-border-4); } .v-form-section:last-child { border-bottom: 0; padding-bottom: 0; } .v-form-section__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2); } .v-form-section__title { font-family: var(--v-font-display); font-weight: 200; font-size: 18px; color: var(--v-on-primary); letter-spacing: 0.5px; } .v-form-section__desc { font-family: var(--v-font-body); font-size: 14px; font-weight: 300; color: var(--v-on-secondary); } .v-form-row { display: grid; gap: var(--v-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .v-form-actions { display: flex; gap: var(--v-space-3); justify-content: flex-end; padding-top: var(--v-space-4); border-top: 1px solid var(--v-border-4); } @media (max-width: 640px) { .v-form-actions { flex-direction: column-reverse; } .v-form-actions .v-btn { width: 100%; } } /* ---------- STACKED SONNER-STYLE TOASTS ---------- */ .v-toast-region { display: flex; flex-direction: column-reverse; gap: var(--v-space-3); } .v-toast { border-radius: var(--v-radius-1); box-shadow: var(--v-shadow-3); } /* ---------- NOTIFICATION CENTER ---------- */ .v-notification-list { display: flex; flex-direction: column; } .v-notification { display: flex; gap: var(--v-space-3); padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-3); position: relative; transition: background var(--v-duration-fast); } .v-notification:hover { background: rgba(127,196,212,.03); } .v-notification[data-unread="true"]::before { content: ''; position: absolute; top: var(--v-space-5); inset-inline-start: var(--v-space-2); width: 6px; height: 6px; border-radius: 50%; background: var(--v-teal-light); } .v-notification[data-unread="true"] { padding-inline-start: calc(var(--v-space-5) + 8px); } .v-notification__avatar { flex-shrink: 0; } .v-notification__body { flex: 1; min-width: 0; } .v-notification__title { font-family: var(--v-font-body); font-weight: 500; font-size: 14px; color: var(--v-on-primary); display: flex; align-items: baseline; gap: var(--v-space-2); flex-wrap: wrap; } .v-notification__title em { font-style: normal; color: var(--v-teal-light); } .v-notification__meta { font-family: var(--v-font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-on-tertiary); } .v-notification__desc { font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-secondary); margin-top: 2px; } /* ---------- FILTER PANEL ---------- */ .v-filter-panel { display: flex; flex-direction: column; gap: var(--v-space-5); } .v-filter-section { display: flex; flex-direction: column; gap: var(--v-space-2); padding-bottom: var(--v-space-5); border-bottom: 1px solid var(--v-border-4); } .v-filter-section:last-child { border-bottom: 0; } .v-filter-section__title { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); } .v-chip-set { display: flex; flex-wrap: wrap; gap: var(--v-space-2); } .v-chip-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-family: var(--v-font-body); font-size: 13px; background: transparent; color: var(--v-on-secondary); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-pill); cursor: pointer; transition: all var(--v-duration-fast); } .v-chip-toggle:hover { border-color: var(--v-teal-light); color: var(--v-on-primary); } .v-chip-toggle[aria-pressed="true"] { background: rgba(127,196,212,.10); border-color: var(--v-teal-light); color: var(--v-on-primary); } /* ---------- AVATAR GROUP / STACK ---------- */ .v-avatar-stack { display: inline-flex; } .v-avatar-stack > .v-avatar { margin-inline-start: -10px; border: 2px solid var(--v-surface-page); box-shadow: var(--v-shadow-1); } .v-avatar-stack > .v-avatar:first-child { margin-inline-start: 0; } /* ---------- COMMENT / ACTIVITY THREAD ---------- */ .v-thread { display: flex; flex-direction: column; gap: var(--v-space-5); } .v-comment { display: flex; gap: var(--v-space-3); } .v-comment__body { flex: 1; min-width: 0; background: var(--v-surface-section); padding: var(--v-space-4); border-radius: var(--v-radius-1); border: 1px solid var(--v-border-3); } .v-comment__head { display: flex; align-items: baseline; gap: var(--v-space-3); flex-wrap: wrap; margin-bottom: var(--v-space-2); } .v-comment__author { font-family: var(--v-font-body); font-weight: 500; font-size: 14px; color: var(--v-on-primary); } .v-comment__time { font-family: var(--v-font-mono); font-size: 9px; color: var(--v-on-tertiary); letter-spacing: 2px; text-transform: uppercase; } .v-comment__text { font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-secondary); line-height: 1.7; } /* ---------- TIMELINE ---------- */ .v-timeline { display: flex; flex-direction: column; gap: 0; position: relative; } .v-timeline::before { content: ''; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 9px; width: 1px; background: var(--v-border-5); } .v-timeline__item { display: flex; gap: var(--v-space-4); padding-block: var(--v-space-3); position: relative; } .v-timeline__marker { width: 19px; height: 19px; border-radius: 50%; background: var(--v-surface-page); border: 2px solid var(--v-teal-light); flex-shrink: 0; position: relative; z-index: 1; margin-top: 4px; } .v-timeline__item[data-state="done"] .v-timeline__marker { background: var(--v-teal-light); } .v-timeline__item[data-state="active"] .v-timeline__marker { box-shadow: 0 0 0 4px rgba(127,196,212,.20); background: var(--v-teal-light); } .v-timeline__content { flex: 1; } .v-timeline__title { font-family: var(--v-font-display); font-weight: 300; font-size: 16px; color: var(--v-on-primary); } .v-timeline__meta { font-family: var(--v-font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-on-tertiary); margin-top: 2px; } .v-timeline__desc { font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-secondary); margin-top: var(--v-space-2); line-height: 1.7; } /* ---------- STATUS INDICATOR ---------- */ .v-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-secondary); } .v-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-success); box-shadow: 0 0 0 3px rgba(91,168,140,.20); } .v-status--warning .v-status__dot { background: var(--v-warning); box-shadow: 0 0 0 3px rgba(212,180,119,.20); } .v-status--danger .v-status__dot { background: var(--v-danger); box-shadow: 0 0 0 3px rgba(208,138,94,.20); } .v-status--idle .v-status__dot { background: var(--v-on-tertiary); box-shadow: 0 0 0 3px rgba(138,160,168,.20); } .v-status--live .v-status__dot { animation: v-status-pulse 2s ease-in-out infinite; } @keyframes v-status-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(91,168,140,.20); } 50% { box-shadow: 0 0 0 6px rgba(91,168,140,.05); } } /* ---------- MENUBAR (desktop-class top menu) ---------- */ .v-menubar { display: inline-flex; gap: var(--v-space-1); padding: 2px; background: var(--v-surface-section); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); } .v-menubar__btn { padding: 6px 10px; font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-secondary); background: transparent; border: 0; cursor: pointer; border-radius: var(--v-radius-1); } .v-menubar__btn:hover, .v-menubar__btn[aria-expanded="true"] { background: rgba(127,196,212,.06); color: var(--v-on-primary); } /* ========================================================================= MOBILE PATTERNS — bottom nav, FAB, action sheet, mobile modal, swipe row ========================================================================= */ /* Mobile Bottom Navigation */ .v-bottom-nav { position: fixed; bottom: 0; inset-inline: 0; display: flex; align-items: stretch; background: var(--v-surface-frosted); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-top: 1px solid var(--v-border-4); z-index: var(--v-z-nav); height: calc(var(--v-mobile-bottom-nav-h) + var(--v-safe-bottom)); padding-bottom: var(--v-safe-bottom); } .v-bottom-nav__item { flex: 1; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--v-on-tertiary); background: transparent; border: 0; text-decoration: none; position: relative; transition: color var(--v-duration-fast); min-height: var(--v-touch-target); } .v-bottom-nav__item:hover, .v-bottom-nav__item[aria-current="page"] { color: var(--v-teal-light); } .v-bottom-nav__item[aria-current="page"]::before { content: ''; position: absolute; top: 0; inset-inline: 25%; height: 2px; background: var(--v-teal-light); } .v-bottom-nav__icon { width: 22px; height: 22px; } /* FAB (Floating Action Button) */ .v-fab { position: fixed; bottom: calc(var(--v-space-6) + var(--v-mobile-bottom-nav-h) + var(--v-safe-bottom)); inset-inline-end: var(--v-space-6); width: var(--v-fab-size); height: var(--v-fab-size); border-radius: 50%; background: var(--v-terracotta); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--v-shadow-3), var(--v-shadow-cta); border: 0; cursor: pointer; z-index: calc(var(--v-z-nav) - 1); transition: transform var(--v-duration-base) var(--v-spring-soft); } .v-fab:hover { background: var(--v-terracotta-hover); transform: scale(1.05); } .v-fab:active { transform: scale(.95); } .v-fab--extended { width: auto; padding: 0 var(--v-space-5); border-radius: 999px; gap: var(--v-space-2); font-family: var(--v-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 3px; } /* Action Sheet (mobile sheet styled for short action lists) */ .v-action-sheet { display: flex; flex-direction: column; } .v-action-sheet__group { background: var(--v-surface-section); border-radius: 12px; margin: 0 var(--v-space-4) var(--v-space-3); overflow: hidden; } .v-action-sheet__item { display: flex; align-items: center; gap: var(--v-space-3); width: 100%; min-height: 52px; padding: 0 var(--v-space-5); background: transparent; border: 0; border-bottom: 1px solid var(--v-border-4); font-family: var(--v-font-body); font-size: 16px; color: var(--v-on-primary); text-align: start; cursor: pointer; } .v-action-sheet__item:last-child { border-bottom: 0; } .v-action-sheet__item:active { background: rgba(127,196,212,.06); } .v-action-sheet__item--danger { color: var(--v-danger-text); } .v-action-sheet__item--cancel { font-weight: 500; } /* Mobile-modal: full-screen on small viewports */ @media (max-width: 640px) { dialog.v-modal, .v-modal { max-width: 100%; width: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; } .v-modal--sheet { height: auto; max-height: 90dvh; margin-top: auto; border-top-left-radius: 16px; border-top-right-radius: 16px; } } /* Swipe-action list row */ .v-swipe-row { position: relative; overflow: hidden; background: var(--v-surface-page); border-bottom: 1px solid var(--v-border-4); touch-action: pan-y; } .v-swipe-row__content { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-4) var(--v-space-5); background: var(--v-surface-page); transition: transform var(--v-duration-base) var(--v-spring-soft); min-height: var(--v-touch-target); } .v-swipe-row__actions { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; display: flex; align-items: stretch; } .v-swipe-row__action { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--v-space-5); font-family: var(--v-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #fff; background: var(--v-danger); border: 0; cursor: pointer; min-width: 88px; } .v-swipe-row__action--neutral { background: var(--v-teal-core); } /* Pull-to-refresh (visual scaffold; JS optional) */ .v-pull-indicator { display: flex; align-items: center; justify-content: center; padding: var(--v-space-3); font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-on-tertiary); opacity: 0; transform: translateY(-20px); transition: opacity var(--v-duration-base), transform var(--v-duration-base) var(--v-spring-soft); } .v-pull-indicator[data-active="true"] { opacity: 1; transform: translateY(0); } /* iOS large-title nav (collapses to small title on scroll) */ .v-mobile-nav { background: var(--v-surface-frosted); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid var(--v-border-4); padding: var(--v-safe-top) var(--v-space-4) 0; position: sticky; top: 0; z-index: var(--v-z-nav); } .v-mobile-nav__bar { display: flex; align-items: center; justify-content: space-between; height: var(--v-mobile-nav-h); gap: var(--v-space-3); } .v-mobile-nav__title { font-family: var(--v-font-display); font-weight: 300; font-size: 17px; color: var(--v-on-primary); letter-spacing: 0.5px; } .v-mobile-nav__large { font-family: var(--v-font-display); font-weight: 200; font-size: 34px; color: var(--v-on-primary); letter-spacing: 0.5px; padding: var(--v-space-2) 0 var(--v-space-4); } .v-mobile-nav__icon-btn { width: var(--v-touch-target); height: var(--v-touch-target); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--v-teal-light); cursor: pointer; } /* ========================================================================= CHART PRIMITIVES (SVG-themed; pair with or your own renderer) ========================================================================= */ .v-chart { width: 100%; display: block; font-family: var(--v-font-mono); font-size: 10px; } .v-chart text { fill: var(--v-on-tertiary); font-family: var(--v-font-mono); text-transform: uppercase; letter-spacing: 1px; } .v-chart__axis line, .v-chart__axis path { stroke: var(--v-border-5); stroke-width: 1; fill: none; } .v-chart__grid line { stroke: var(--v-border-3); stroke-width: 1; } .v-chart__series-1 { stroke: var(--v-chart-1); fill: var(--v-chart-1); } .v-chart__series-2 { stroke: var(--v-chart-2); fill: var(--v-chart-2); } .v-chart__series-3 { stroke: var(--v-chart-3); fill: var(--v-chart-3); } .v-chart__series-4 { stroke: var(--v-chart-4); fill: var(--v-chart-4); } .v-chart__series-5 { stroke: var(--v-chart-5); fill: var(--v-chart-5); } .v-chart__series-6 { stroke: var(--v-chart-6); fill: var(--v-chart-6); } .v-chart__series-7 { stroke: var(--v-chart-7); fill: var(--v-chart-7); } .v-chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .v-chart__area { fill-opacity: .15; stroke-width: 2; } .v-chart__bar { fill-opacity: .85; } .v-chart__legend { display: flex; flex-wrap: wrap; gap: var(--v-space-4); margin-top: var(--v-space-4); font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); } .v-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; } .v-chart__legend-swatch { width: 10px; height: 10px; border-radius: 2px; } .v-sparkline { display: inline-block; width: 120px; height: 32px; vertical-align: middle; } /* ========================================================================= ADVANCED DATA TABLE ========================================================================= */ .v-data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--v-font-body); font-size: var(--v-text-body-sm); color: var(--v-on-secondary); } .v-data-table thead th { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); text-align: start; padding: var(--v-space-4) var(--v-space-5); font-weight: 400; background: var(--v-surface-section); position: sticky; top: 0; border-bottom: 1px solid var(--v-border-5); cursor: pointer; user-select: none; } .v-data-table thead th[aria-sort="ascending"]::after { content: ' ↑'; color: var(--v-teal-light); } .v-data-table thead th[aria-sort="descending"]::after { content: ' ↓'; color: var(--v-teal-light); } .v-data-table tbody td { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-3); height: var(--v-row-h); vertical-align: middle; } .v-data-table tbody tr { transition: background var(--v-duration-fast); } .v-data-table tbody tr:hover { background: rgba(127,196,212,.03); } .v-data-table tbody tr[aria-selected="true"] { background: rgba(127,196,212,.06); } .v-data-table__toolbar { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-4); background: var(--v-surface-section); flex-wrap: wrap; } .v-data-table__toolbar > .v-search { width: 280px; } .v-data-table__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--v-space-3) var(--v-space-5); border-top: 1px solid var(--v-border-4); font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-on-tertiary); } /* ========================================================================= APP SHELL (web-app layout: top bar + sidebar + main + status) The shell pins to the viewport — main is the internal scroll container, so sticky elements inside main (e.g. settings nav) actually stick. ========================================================================= */ .v-app-shell { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; overflow: hidden; } .v-app-shell--with-sidebar { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "topbar topbar" "sidebar main" "status status"; } .v-app-shell__topbar { grid-area: topbar; } .v-app-shell__sidebar { grid-area: sidebar; overflow-y: auto; min-height: 0; } .v-app-shell__main { grid-area: main; overflow-y: auto; min-height: 0; padding: var(--v-space-8); container-type: inline-size; } /* Sidebar inside the shell fills its grid area instead of asserting 100vh; the shell already pins to the viewport so the grid does the work. */ .v-app-shell__sidebar.v-sidebar, .v-app-shell .v-sidebar { position: static; height: auto; } .v-app-shell__status { grid-area: status; } @media (max-width: 768px) { .v-app-shell--with-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main" "status"; } .v-app-shell__sidebar { display: none; } } /* Workspace toolbar (slim chrome strip — Linear / Vercel feel) */ .v-workspace-bar { display: flex; align-items: center; gap: var(--v-space-4); padding: var(--v-space-3) var(--v-space-6); border-bottom: 1px solid var(--v-border-4); background: var(--v-surface-section); min-height: 48px; font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); } /* Status bar (footer) */ .v-status-bar { display: flex; align-items: center; gap: var(--v-space-5); padding: var(--v-space-2) var(--v-space-5); border-top: 1px solid var(--v-border-4); background: var(--v-surface-section); font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); height: 32px; } /* ========================================================================= AUTH SHELL ========================================================================= */ .v-auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--v-space-12) var(--v-space-6); position: relative; overflow: hidden; } .v-auth__card { width: min(420px, 100%); background: var(--v-surface-section); border: 1px solid var(--v-border-5); padding: var(--v-space-10) var(--v-space-8); position: relative; z-index: 1; border-radius: var(--v-radius-1); box-shadow: var(--v-shadow-3); } .v-auth__brand { text-align: center; margin-bottom: var(--v-space-8); } .v-auth__title { font-family: var(--v-font-display); font-weight: 200; font-size: 28px; color: var(--v-on-primary); margin-bottom: var(--v-space-3); } .v-auth__sub { font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-secondary); } .v-auth__divider { display: flex; align-items: center; gap: var(--v-space-3); margin: var(--v-space-6) 0; font-family: var(--v-font-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--v-on-tertiary); } .v-auth__divider::before, .v-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--v-border-5); } .v-auth__social { display: flex; flex-direction: column; gap: var(--v-space-3); } .v-auth__social .v-btn { width: 100%; justify-content: center; } .v-auth__legal { font-family: var(--v-font-body); font-size: 12px; color: var(--v-on-tertiary); text-align: center; margin-top: var(--v-space-6); line-height: 1.7; } /* ========================================================================= SETTINGS PAGE PATTERN ========================================================================= */ .v-settings { display: grid; grid-template-columns: 240px 1fr; gap: var(--v-space-12); max-width: 1100px; margin: 0 auto; padding: var(--v-space-8) 0; } @media (max-width: 768px) { .v-settings { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-6); } } .v-settings__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--v-space-8); align-self: start; } .v-settings__nav a { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-on-tertiary); padding: 10px 14px; text-decoration: none; border-inline-start: 2px solid transparent; transition: all var(--v-duration-fast); } .v-settings__nav a:hover { color: var(--v-on-primary); background: rgba(127,196,212,.04); } .v-settings__nav a[aria-current="page"] { color: var(--v-teal-light); border-inline-start-color: var(--v-teal-light); background: rgba(127,196,212,.06); } .v-settings__panel { display: flex; flex-direction: column; gap: var(--v-space-10); } .v-settings-save-bar { position: sticky; bottom: var(--v-space-6); align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-4); padding: var(--v-space-3) var(--v-space-5); background: var(--v-surface-frosted); backdrop-filter: blur(16px); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); box-shadow: var(--v-shadow-3); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all var(--v-duration-base) var(--v-spring-soft); } .v-settings-save-bar[data-dirty="true"] { transform: none; opacity: 1; pointer-events: auto; } /* ========================================================================= BILLING / PRICING TIERS ========================================================================= */ .v-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--v-space-3); } .v-price-card { background: var(--v-surface-section); border: 1px solid var(--v-border-5); padding: var(--v-space-8) var(--v-space-7); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--v-space-5); transition: all var(--v-duration-slow); border-radius: var(--v-radius-1); } .v-price-card:hover { border-color: var(--v-teal-light); } .v-price-card--featured { background: var(--v-surface-featured); border-color: var(--v-teal-light); } .v-price-card--featured::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, var(--v-grid-line) 79px, var(--v-grid-line) 80px); pointer-events: none; } .v-price-card > * { position: relative; z-index: 1; } .v-price-card__tier { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-teal-light); } .v-price-card__amount { font-family: var(--v-font-display); font-weight: 100; font-size: 48px; color: var(--v-on-primary); letter-spacing: 2px; line-height: 1; } .v-price-card__amount small { font-family: var(--v-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); font-weight: 400; display: inline-block; margin-inline-start: 8px; } .v-price-card__desc { font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-secondary); line-height: 1.7; } .v-price-card__list { display: flex; flex-direction: column; gap: var(--v-space-2); margin-top: var(--v-space-2); } .v-price-card__list li { font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-secondary); padding-inline-start: var(--v-space-5); position: relative; } .v-price-card__list li::before { content: '✓'; position: absolute; inset-inline-start: 0; top: 0; color: var(--v-success); font-family: var(--v-font-mono); font-size: 12px; } /* ========================================================================= ONBOARDING CHECKLIST ========================================================================= */ .v-onboarding-checklist { background: var(--v-surface-section); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); overflow: hidden; } .v-onboarding-checklist__head { padding: var(--v-space-5) var(--v-space-6); border-bottom: 1px solid var(--v-border-4); display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-3); } .v-onboarding-checklist__progress { height: 4px; background: var(--v-border-4); border-radius: 999px; overflow: hidden; min-width: 100px; flex: 1; } .v-onboarding-checklist__progress > div { height: 100%; background: linear-gradient(90deg, var(--v-teal-light), var(--v-teal-core)); border-radius: 999px; transition: width var(--v-duration-slow) var(--v-ease-out); } .v-onboarding-step { display: flex; gap: var(--v-space-3); align-items: flex-start; padding: var(--v-space-4) var(--v-space-6); border-bottom: 1px solid var(--v-border-3); } .v-onboarding-step:last-child { border-bottom: 0; } .v-onboarding-step__check { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--v-border-7); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: transparent; margin-top: 2px; } .v-onboarding-step[data-done="true"] .v-onboarding-step__check { background: var(--v-success); border-color: var(--v-success); color: var(--v-deepest); } .v-onboarding-step[data-done="true"] .v-onboarding-step__check::after { content: '✓'; font-family: var(--v-font-mono); font-size: 12px; } .v-onboarding-step__body { flex: 1; } .v-onboarding-step__title { font-family: var(--v-font-body); font-weight: 500; font-size: 14px; color: var(--v-on-primary); } .v-onboarding-step[data-done="true"] .v-onboarding-step__title { color: var(--v-on-tertiary); text-decoration: line-through; } .v-onboarding-step__desc { font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-secondary); margin-top: 2px; } /* ========================================================================= KPI METRIC CARD (dashboard) ========================================================================= */ .v-kpi { background: var(--v-surface-section); border: 1px solid var(--v-border-4); padding: var(--v-space-5) var(--v-space-6); display: flex; flex-direction: column; gap: var(--v-space-2); position: relative; overflow: hidden; border-radius: var(--v-radius-1); transition: border-color var(--v-duration-base); } .v-kpi:hover { border-color: var(--v-teal-light); } .v-kpi__label { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: var(--v-tracking-mono); color: var(--v-on-tertiary); } .v-kpi__value { font-family: var(--v-font-display); font-weight: 100; font-size: 36px; color: var(--v-on-primary); line-height: 1; letter-spacing: 1px; } .v-kpi__delta { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; color: var(--v-success); } .v-kpi__delta--down { color: var(--v-danger); } .v-kpi__spark { margin-top: var(--v-space-2); } /* ========================================================================= CONTAINER QUERIES + scroll-driven entrance (modern progressive enhancement) ========================================================================= */ @container (max-width: 600px) { .v-form-row { grid-template-columns: minmax(0, 1fr); } .v-data-table thead th, .v-data-table tbody td { padding: var(--v-space-3); font-size: 13px; } } @supports (animation-timeline: view()) { .v-reveal { /* When supported, drive the reveal via scroll position — smoother than IO */ animation: v-reveal-driven both linear; animation-timeline: view(); animation-range: entry 10% cover 30%; } } @keyframes v-reveal-driven { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================= GLASS SURFACES (premium, frosted layers) ========================================================================= */ .v-glass { background: color-mix(in oklch, var(--v-surface-section) 70%, transparent); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--v-border-5); box-shadow: var(--v-shadow-2); border-radius: var(--v-radius-1); } /* ========================================================================= ICON BASE — used by for both inline SVG and sprite refs ========================================================================= */ .v-icon { display: inline-block; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; } .v-icon--sm { width: 14px; height: 14px; } .v-icon--lg { width: 22px; height: 22px; stroke-width: 1.5; } .v-icon--xl { width: 32px; height: 32px; stroke-width: 1.25; } /* ========================================================================= PLATFORM HINTS — apply tighter native-feeling defaults ========================================================================= */ [data-platform="ios"] { --v-font-body: -apple-system, 'SF Pro Text', system-ui, sans-serif; --v-radius-1: 8px; --v-radius-2: 12px; } [data-platform="ios"] .v-btn { border-radius: 12px; } [data-platform="ios"] .v-input, [data-platform="ios"] .v-textarea, [data-platform="ios"] .v-select { border-radius: 10px; } [data-platform="android"] { --v-radius-1: 4px; --v-radius-2: 8px; } [data-platform="android"] .v-btn { border-radius: 4px; text-transform: uppercase; } [data-platform="android"] .v-fab { box-shadow: var(--v-shadow-4); } /* ========================================================================= MOBILE RESPONSIVE OVERRIDES — minimum-44px touch + relaxed spacing ========================================================================= */ @media (max-width: 640px) { .v-btn { min-height: var(--v-touch-target); padding: 14px 28px; } .v-btn--sm { min-height: var(--v-touch-target); padding: 12px 20px; } .v-input, .v-textarea, .v-select { min-height: var(--v-touch-target); } .v-checkbox, .v-radio { min-height: var(--v-touch-target); } .v-toggle__track { width: 44px; height: 26px; } .v-toggle__track::after { width: 18px; height: 18px; } .v-toggle input:checked + .v-toggle__track::after { left: 22px; } .v-section { padding-inline: max(var(--v-section-px-sm), var(--v-safe-left)) max(var(--v-section-px-sm), var(--v-safe-right)); } .v-modal__body, .v-modal__header, .v-modal__footer { padding-inline: var(--v-space-5); } .v-data-table thead th, .v-data-table tbody td { padding: var(--v-space-3) var(--v-space-4); } } /* ========================================================================= WCAG AAA CONTRAST MODE Opt-in via . Lifts every text token to ≥ 7:1 on its intended surface so app surfaces (forms, dashboards, settings) can declare AAA compliance. Brand marketing surfaces stay on the default (AA-with-headroom) palette for visual hierarchy. ========================================================================= */ [data-contrast="aaa"] { /* Tertiary text bumped to 7.6:1 on Deepest, 6.6:1 on Gulf Dark */ --v-on-tertiary: #ACBFC5; --v-text-tertiary: #ACBFC5; /* Terracotta-text bumped — 7.3:1 on Deepest */ --v-terracotta-text: #E0A77F; /* Success / warning text variants */ --v-success-text: #A4D9C1; /* 7.4:1 on Deepest */ --v-warning-text: #EBD4A8; /* 7.5:1 on Deepest */ --v-info-text: var(--v-teal-light); /* 8.79:1 on Deepest — AAA */ --v-danger-text: #E0A77F; /* matches new terracotta-text */ /* Decorative dividers must still pass 3:1 for UI components — bump */ --v-border-4: rgba(127,196,212,.10); --v-border-5: rgba(127,196,212,.14); /* Focus ring thicker per WCAG 2.4.11 */ --v-focus-ring: 3px solid var(--v-teal-light); --v-focus-offset: 3px; } [data-contrast="aaa"][data-theme="light"] { /* #4A5C63 only reached 5.63:1 on Sandstone surface — fails AAA there. Darkened to #2D3A40 — 8.45:1 on Sandstone, 9.4:1 on Sand Pale. */ --v-on-tertiary: #2D3A40; --v-text-tertiary: #2D3A40; --v-terracotta-text:#7A3F1E; /* 8.4:1 on Sand Pale */ --v-success-text: #1F5240; /* 8.1:1 on Sand Pale */ --v-warning-text: #574215; /* 7.6:1 on Sand Pale (was #6B5520 = 6.49:1) */ --v-danger-text: #7A3F1E; --v-border-5: rgba(12,74,94,.18); } /* ========================================================================= ON-DARK / FEATURED-PANEL TEXT — theme-locked Elements that render on permanently dark surfaces (featured cards, sections, footer, tooltips, decorative swatches) must use light text in BOTH themes. Without this, light mode flips text to dark on dark = unreadable. ========================================================================= */ .v-card--featured, .v-card--featured .v-card__desc, .v-card--featured p, .v-card--featured li, .v-card--featured .v-overline, .v-card--featured .v-card__hl, .v-section--featured, .v-section--featured p, .v-section--featured li, .v-section--featured .v-overline, .v-pricing__panel--featured, .v-pricing__panel--featured p, .v-pricing__panel--featured li, .v-pricing__panel--featured .v-price-card__desc, .v-price-card--featured, .v-price-card--featured p, .v-price-card--featured li, .v-price-card--featured .v-price-card__desc, .v-price-card--featured small, .v-tooltip__bubble, [data-theme="light"] .v-card--featured .v-card__desc, [data-theme="light"] .v-card--featured p, [data-theme="light"] .v-card--featured li, [data-theme="light"] .v-card--featured .v-card__hl, [data-theme="light"] .v-section--featured p, [data-theme="light"] .v-section--featured li, [data-theme="light"] .v-tooltip__bubble, [data-theme="light"] .v-pricing__panel--featured .v-price-card__desc, [data-theme="light"] .v-pricing__panel--featured li, [data-theme="light"] .v-price-card--featured, [data-theme="light"] .v-price-card--featured p, [data-theme="light"] .v-price-card--featured li, [data-theme="light"] .v-price-card--featured .v-price-card__desc, [data-theme="light"] .v-price-card--featured .v-price-card__tier, [data-theme="light"] .v-price-card--featured small { color: var(--v-on-dark-secondary); } /* Tier label on featured pricing panel (dark teal) — use on-dark for AAA */ .v-price-card--featured .v-price-card__tier, .v-pricing__panel--featured .v-price-card__tier { color: var(--v-on-dark-primary); } /* Ghost / secondary buttons inside featured panels need on-dark text */ .v-price-card--featured .v-btn--secondary, .v-pricing__panel--featured .v-btn--secondary { color: var(--v-on-dark-primary); border-color: var(--v-on-dark-tertiary); } .v-price-card--featured .v-btn--secondary:hover, .v-pricing__panel--featured .v-btn--secondary:hover { border-color: var(--v-on-dark-primary); background: rgba(240,237,231,.06); } /* Footer-lockup gets on-dark text only when actually inside a dark surface */ footer.v-app-shell__status .v-footer-lockup, footer.v-app-shell__status .v-footer-lockup__logo, footer.v-app-shell__status .v-footer-lockup__tag, [data-theme="light"] footer.v-app-shell__status .v-footer-lockup, [data-theme="light"] footer.v-app-shell__status .v-footer-lockup__logo, [data-theme="light"] footer.v-app-shell__status .v-footer-lockup__tag { color: var(--v-on-dark-secondary); } .v-card--featured h1, .v-card--featured h2, .v-card--featured h3, .v-card--featured h4, .v-card--featured h5, .v-section--featured h1, .v-section--featured h2, .v-section--featured h3, .v-pricing__panel--featured h2, .v-pricing__panel--featured h3, [data-theme="light"] .v-card--featured h1, [data-theme="light"] .v-card--featured h2, [data-theme="light"] .v-card--featured h3, [data-theme="light"] .v-card--featured h4, [data-theme="light"] .v-card--featured h5, [data-theme="light"] .v-section--featured h1, [data-theme="light"] .v-section--featured h2, [data-theme="light"] .v-section--featured h3 { color: var(--v-on-dark-primary); } /* Color swatches in the instructions page have their own contextual coloring; leave .sw__name / .sw__hex to inherit theme text — they sit below the colored square, not on it. */ /* AAA mode — keep focus indicator visible without stacking on form controls. Inputs, textareas, selects, and search keep their own border-color + halo focus (defined globally above). Everything else gets the AAA outline. */ [data-contrast="aaa"] :focus-visible:not(.v-input):not(.v-textarea):not(.v-select):not(.v-search input):not(.v-search .v-input) { outline: var(--v-focus-ring); outline-offset: var(--v-focus-offset); } [data-contrast="aaa"] .v-input:focus-visible, [data-contrast="aaa"] .v-textarea:focus-visible, [data-contrast="aaa"] .v-select:focus-visible, [data-contrast="aaa"] .v-search input:focus-visible, [data-contrast="aaa"] .v-search .v-input:focus-visible { outline: none; border-color: var(--v-teal-light); box-shadow: 0 0 0 3px rgba(127,196,212,.35); } [data-contrast="aaa"] .v-btn--primary, [data-contrast="aaa"] .v-btn--danger, [data-contrast="aaa"] .v-fab, [data-contrast="aaa"] .v-fab--extended { /* AAA-strict requires white-on-Terracotta to clear 7:1. The base brand #A5603A is 4.85:1. Deepened to #7A4527 → 7.26:1, still Terracotta. */ background: #7A4527; font-weight: 500; letter-spacing: 4px; } [data-contrast="aaa"] .v-btn--primary:hover, [data-contrast="aaa"] .v-btn--danger:hover, [data-contrast="aaa"] .v-fab:hover { background: #8A4F2C; } /* ========================================================================= ADDITIONAL COMPONENTS (v1.1 — phase 2) ========================================================================= */ /* ---------- TAG INPUT (multi-value entry) ---------- */ .v-tag-input { display: flex; flex-wrap: wrap; gap: var(--v-space-2); align-items: center; padding: 8px 12px; background: rgba(127,196,212,.04); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); min-height: var(--v-control-h); transition: all var(--v-duration-base); } .v-tag-input:focus-within { border-color: var(--v-teal-core); background: rgba(127,196,212,.06); box-shadow: 0 0 0 2px rgba(127,196,212,.20); } .v-tag-input__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--v-font-body); font-size: 13px; background: rgba(127,196,212,.10); border: 1px solid var(--v-border-6); color: var(--v-on-primary); border-radius: var(--v-radius-pill); } .v-tag-input__tag button { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--v-on-tertiary); cursor: pointer; padding: 0; } .v-tag-input__tag button:hover { color: var(--v-danger-text); } .v-tag-input input { flex: 1; min-width: 80px; background: transparent; border: 0; outline: none; font-family: var(--v-font-body); font-size: 14px; color: var(--v-on-primary); } /* ---------- NUMBER STEPPER ---------- */ .v-number-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--v-border-5); background: rgba(127,196,212,.04); border-radius: var(--v-radius-1); overflow: hidden; } .v-number-stepper button { width: 40px; min-height: var(--v-touch-target); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--v-on-secondary); font-family: var(--v-font-mono); font-size: 18px; transition: all var(--v-duration-fast); } .v-number-stepper button:hover { background: rgba(127,196,212,.06); color: var(--v-on-primary); } .v-number-stepper input { width: 60px; text-align: center; background: transparent; border: 0; outline: none; font-family: var(--v-font-mono); font-size: 14px; color: var(--v-on-primary); border-inline: 1px solid var(--v-border-5); -moz-appearance: textfield; } .v-number-stepper input::-webkit-outer-spin-button, .v-number-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---------- RATING ---------- */ .v-rating { display: inline-flex; gap: 4px; } .v-rating__star { width: 22px; height: 22px; background: transparent; border: 0; cursor: pointer; color: var(--v-border-7); transition: color var(--v-duration-fast) var(--v-spring-soft), transform var(--v-duration-fast); padding: 0; } .v-rating__star:hover { transform: scale(1.15); } .v-rating__star[data-active="true"] { color: var(--v-warning); } /* ---------- COLOR PICKER ---------- */ .v-color-picker { display: inline-flex; align-items: center; gap: var(--v-space-3); padding: 6px 12px; border: 1px solid var(--v-border-5); background: rgba(127,196,212,.04); border-radius: var(--v-radius-1); } .v-color-picker__swatch { width: 24px; height: 24px; border-radius: var(--v-radius-1); border: 1px solid var(--v-border-6); cursor: pointer; } .v-color-picker input[type="color"] { width: 0; height: 0; opacity: 0; position: absolute; } .v-color-picker__hex { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-on-secondary); background: transparent; border: 0; outline: none; width: 80px; text-transform: uppercase; letter-spacing: 1px; } .v-swatch-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: var(--v-space-3); background: var(--v-surface-section); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); } .v-swatch-palette__cell { aspect-ratio: 1; border: 1px solid var(--v-border-5); cursor: pointer; border-radius: var(--v-radius-1); transition: transform var(--v-duration-fast) var(--v-spring-soft); } .v-swatch-palette__cell:hover { transform: scale(1.15); border-color: var(--v-teal-light); } .v-swatch-palette__cell[aria-selected="true"] { box-shadow: 0 0 0 2px var(--v-teal-light), 0 0 0 4px var(--v-deepest); } /* ---------- CODE BLOCK (themed) ---------- */ .v-code-block { background: rgba(8,47,60,.4); border: 1px solid var(--v-border-4); border-radius: var(--v-radius-1); overflow: hidden; direction: ltr; } .v-code-block__head { display: flex; align-items: center; justify-content: space-between; padding: var(--v-space-2) var(--v-space-5); border-bottom: 1px solid var(--v-border-4); font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); } .v-code-block__lang { color: var(--v-teal-light); } .v-code-block__body { padding: var(--v-space-5); font-family: var(--v-font-mono); font-size: 12px; line-height: 1.7; color: var(--v-on-secondary); overflow-x: auto; white-space: pre; } .v-code-block__body .tok-keyword { color: var(--v-terracotta-text); } .v-code-block__body .tok-string { color: var(--v-success-text); } .v-code-block__body .tok-number { color: var(--v-warning-text); } .v-code-block__body .tok-comment { color: var(--v-on-tertiary); font-style: italic; } .v-code-block__body .tok-prop { color: var(--v-teal-light); } .v-code-block__body .tok-fn { color: var(--v-chart-5); } /* ---------- TREE VIEW ---------- */ .v-tree { display: flex; flex-direction: column; font-family: var(--v-font-body); font-size: 14px; } .v-tree__item { display: flex; align-items: center; gap: var(--v-space-2); padding: 6px 8px; color: var(--v-on-secondary); cursor: pointer; border-radius: var(--v-radius-1); user-select: none; min-height: 32px; } .v-tree__item:hover { background: rgba(127,196,212,.04); color: var(--v-on-primary); } .v-tree__item[aria-selected="true"] { background: rgba(127,196,212,.08); color: var(--v-on-primary); } .v-tree__caret { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--v-duration-fast); color: var(--v-on-tertiary); } .v-tree__item[aria-expanded="true"] .v-tree__caret { transform: rotate(90deg); } [dir="rtl"] .v-tree__item[aria-expanded="true"] .v-tree__caret { transform: rotate(-90deg); } .v-tree__icon { width: 14px; height: 14px; color: var(--v-on-tertiary); flex-shrink: 0; } .v-tree__children { display: none; padding-inline-start: var(--v-space-5); border-inline-start: 1px dashed var(--v-border-4); margin-inline-start: 10px; } .v-tree__item[aria-expanded="true"] + .v-tree__children { display: block; } /* ---------- DATE RANGE PICKER ---------- */ .v-daterange { position: relative; display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--v-border-5); background: rgba(127,196,212,.04); border-radius: var(--v-radius-1); overflow: visible; font-family: var(--v-font-mono); font-size: 11px; letter-spacing: 1.5px; transition: border-color var(--v-duration-fast) var(--v-ease-out); } .v-daterange:hover { border-color: var(--v-border-6); } .v-daterange[data-open="true"] { border-color: var(--v-teal-core); } .v-daterange__field { padding: 10px 12px; background: transparent; border: 0; outline: none; color: var(--v-on-primary); font-family: inherit; font-size: inherit; /* Drop the parent's letter-spacing on numeric date values — 1.5px × 9 gaps adds 13.5px of width per field, overflowing a 10-char date. Keep the wider tracking on the divider where it reads as label-like. */ letter-spacing: 0.5px; min-height: var(--v-touch-target); cursor: pointer; /* Sized for a 10-char date in DM Mono at 11px with 0.5px letter-spacing. */ min-width: 124px; text-align: center; } .v-daterange__field::placeholder { color: var(--v-on-tertiary); opacity: .7; } .v-daterange__field:focus-visible { outline: 2px solid var(--v-teal-core); outline-offset: -2px; border-radius: var(--v-radius-1); } .v-daterange__divider { font-family: var(--v-font-mono); font-size: 12px; color: var(--v-on-tertiary); padding: 0 8px; user-select: none; } .v-daterange__pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: var(--v-z-raised); display: none; } .v-daterange[data-open="true"] .v-daterange__pop { display: block; animation: v-popover-in var(--v-duration-base) var(--v-spring-soft); } .v-daterange__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--v-space-3) var(--v-space-4); border-top: 1px solid var(--v-border-4); gap: var(--v-space-3); } .v-daterange__hint { font-family: var(--v-font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-on-tertiary); } .v-daterange__clear { background: transparent; border: 0; cursor: pointer; font-family: var(--v-font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-on-secondary); padding: 4px 6px; } .v-daterange__clear:hover { color: var(--v-teal-light); } .v-daterange__clear:focus-visible { outline: 2px solid var(--v-teal-core); outline-offset: 2px; } /* Range highlight inside the calendar grid */ .v-calendar__day[data-in-range="true"] { background: rgba(127,196,212,.12); color: var(--v-on-primary); border-radius: 0; } .v-calendar__day[data-range-start="true"], .v-calendar__day[data-range-end="true"] { background: var(--v-teal-core); color: var(--v-on-tertiary-inverse, #fff); border-radius: var(--v-radius-1); font-weight: 500; } .v-calendar__day[data-range-start="true"][data-range-end="true"] { border-radius: var(--v-radius-1); } .v-calendar__day[data-in-range="true"][data-range-start="true"] { border-start-end-radius: 0; border-end-end-radius: 0; } .v-calendar__day[data-in-range="true"][data-range-end="true"] { border-start-start-radius: 0; border-end-start-radius: 0; } [data-theme="light"] .v-calendar__day[data-in-range="true"] { background: rgba(26,122,143,.10); color: var(--v-ink-1); } [data-theme="light"] .v-calendar__day[data-range-start="true"], [data-theme="light"] .v-calendar__day[data-range-end="true"] { background: var(--v-teal-core); color: #fff; } /* ---------- TIME PICKER ---------- */ .v-timepicker { display: inline-flex; align-items: center; gap: 2px; font-family: var(--v-font-mono); font-size: 16px; color: var(--v-on-primary); border: 1px solid var(--v-border-5); background: rgba(127,196,212,.04); border-radius: var(--v-radius-1); padding: 4px 8px; } .v-timepicker select { background: transparent; border: 0; color: inherit; font-family: inherit; font-size: inherit; outline: none; -webkit-appearance: none; appearance: none; padding: 6px 4px; cursor: pointer; } /* ---------- IMAGE GALLERY / LIGHTBOX TRIGGER ---------- */ .v-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--v-space-2); } .v-gallery__item { position: relative; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; border-radius: var(--v-radius-1); } .v-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--v-duration-slow) var(--v-ease-out); } .v-gallery__item:hover img { transform: scale(1.06); } .v-gallery__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,30,40,.6)); opacity: 0; transition: opacity var(--v-duration-base); pointer-events: none; } .v-gallery__item:hover::after { opacity: 1; } .v-lightbox { position: fixed; inset: 0; background: rgba(5,30,40,.94); backdrop-filter: blur(12px); z-index: var(--v-z-modal); display: none; align-items: center; justify-content: center; padding: var(--v-space-12); } .v-lightbox[data-open="true"] { display: flex; animation: v-popover-in var(--v-duration-slow) var(--v-spring-soft); } .v-lightbox__img { max-width: 100%; max-height: 100%; } /* ---------- CAROUSEL (touch-friendly) ---------- */ .v-carousel { display: flex; gap: var(--v-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--v-space-3); scroll-padding-inline-start: var(--v-space-6); } .v-carousel::-webkit-scrollbar { display: none; } .v-carousel__slide { flex: 0 0 min(420px, 80vw); scroll-snap-align: start; } .v-carousel__dots { display: inline-flex; gap: 6px; justify-content: center; margin-top: var(--v-space-3); } .v-carousel__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v-border-6); border: 0; transition: all var(--v-duration-base); cursor: pointer; padding: 0; } .v-carousel__dot[aria-current="true"] { background: var(--v-teal-light); width: 18px; border-radius: 999px; } /* ---------- BANNER / ANNOUNCEMENT ---------- */ .v-banner { display: flex; align-items: center; gap: var(--v-space-4); padding: var(--v-space-3) var(--v-space-6); background: var(--v-info-bg); border-bottom: 1px solid var(--v-info-border); color: var(--v-on-primary); font-family: var(--v-font-body); font-size: 14px; } .v-banner--warning { background: var(--v-warning-bg); border-bottom-color: var(--v-warning-border); } .v-banner--danger { background: var(--v-danger-bg); border-bottom-color: var(--v-danger-border); } .v-banner__icon { color: var(--v-info); flex-shrink: 0; } .v-banner--warning .v-banner__icon { color: var(--v-warning); } .v-banner--danger .v-banner__icon { color: var(--v-danger); } .v-banner__close { margin-inline-start: auto; background: transparent; border: 0; color: var(--v-on-tertiary); cursor: pointer; } /* ---------- COOKIE BANNER ---------- */ .v-cookie-banner { position: fixed; bottom: var(--v-space-5); inset-inline: var(--v-space-5); max-width: 540px; margin-inline: auto; background: var(--v-charcoal); border: 1px solid var(--v-border-5); padding: var(--v-space-5) var(--v-space-6); box-shadow: var(--v-shadow-4); border-radius: var(--v-radius-1); z-index: var(--v-z-modal); display: grid; gap: var(--v-space-3); font-family: var(--v-font-body); padding-bottom: calc(var(--v-space-5) + var(--v-safe-bottom)); } .v-cookie-banner__title { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-teal-light); } .v-cookie-banner__desc { font-size: 13px; color: var(--v-on-secondary); line-height: 1.7; } .v-cookie-banner__actions { display: flex; gap: var(--v-space-2); flex-wrap: wrap; } /* ---------- WIZARD / LINEAR STEPPER ---------- */ .v-wizard { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-4) 0; } .v-wizard__step { display: flex; align-items: center; gap: var(--v-space-2); font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); } .v-wizard__step-num { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--v-border-6); font-size: 10px; background: var(--v-surface-page); } .v-wizard__step[data-state="done"] { color: var(--v-success-text); } .v-wizard__step[data-state="done"] .v-wizard__step-num { background: var(--v-success); border-color: var(--v-success); color: var(--v-deepest); } .v-wizard__step[data-state="current"] { color: var(--v-teal-light); } .v-wizard__step[data-state="current"] .v-wizard__step-num { border-color: var(--v-teal-light); color: var(--v-teal-light); box-shadow: var(--v-shadow-glow-sm); } .v-wizard__connector { flex: 1; height: 1px; background: var(--v-border-5); position: relative; } .v-wizard__connector[data-state="done"]::after { content: ''; position: absolute; inset: 0; background: var(--v-success); } /* ---------- TOP LOADING BAR (route change) ---------- */ .v-loading-bar { position: fixed; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, var(--v-teal-light), var(--v-teal-core), var(--v-teal-light)); background-size: 200% 100%; z-index: var(--v-z-toast); transform-origin: left; transform: scaleX(0); transition: transform var(--v-duration-slow) var(--v-ease-out); animation: v-loading-shine 2s linear infinite; } .v-loading-bar[data-progress="true"] { transform: scaleX(.6); } .v-loading-bar[data-done="true"] { transform: scaleX(1); transition: transform 300ms, opacity 600ms 200ms; opacity: 0; } @keyframes v-loading-shine { from { background-position: 0 0; } to { background-position: 200% 0; } } /* ---------- WORKSPACE / TENANT SWITCHER ---------- */ .v-workspace-switcher { display: inline-flex; align-items: center; gap: var(--v-space-3); padding: 8px 14px; background: transparent; border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); cursor: pointer; font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-primary); transition: all var(--v-duration-fast); } .v-workspace-switcher:hover { border-color: var(--v-teal-light); background: rgba(127,196,212,.04); } .v-workspace-switcher__avatar { width: 22px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .v-workspace-switcher__avatar img { width: 100%; height: 100%; object-fit: contain; display: block; } .v-workspace-switcher__name { font-weight: 500; } .v-workspace-switcher__role { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); margin-inline-start: 6px; } /* ---------- SEARCH OVERLAY (mobile full-screen) ---------- */ .v-search-overlay { position: fixed; inset: 0; background: var(--v-surface-frosted); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); z-index: var(--v-z-modal); display: none; flex-direction: column; padding-top: var(--v-safe-top); } .v-search-overlay[data-open="true"] { display: flex; animation: v-popover-in var(--v-duration-base) var(--v-spring-soft); } .v-search-overlay__bar { display: flex; align-items: center; gap: var(--v-space-3); padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-5); } .v-search-overlay input { flex: 1; background: transparent; border: 0; outline: none; font-family: var(--v-font-body); font-size: 18px; color: var(--v-on-primary); } /* ---------- COMPARISON TABLE ---------- */ .v-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--v-font-body); font-size: 14px; } .v-compare-table thead th, .v-compare-table tbody td { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-4); text-align: start; vertical-align: middle; } .v-compare-table thead th { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-on-tertiary); background: var(--v-surface-section); } .v-compare-table thead th[data-featured="true"] { color: var(--v-teal-light); } .v-compare-table tbody td { color: var(--v-on-secondary); } .v-compare-table tbody td[data-featured="true"] { background: rgba(127,196,212,.04); } .v-compare-table .v-yes { color: var(--v-success); } .v-compare-table .v-no { color: var(--v-on-tertiary); opacity: .5; } /* ---------- LOGO CLOUD ---------- */ .v-logo-cloud { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--v-space-8); align-items: center; padding: var(--v-space-10) 0; opacity: .7; } .v-logo-cloud > * { font-family: var(--v-font-mono); font-size: 14px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-on-secondary); text-align: center; } /* ---------- HERO VARIANTS (web app + product) ---------- */ .v-hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-space-12); align-items: center; padding: var(--v-space-20) var(--v-section-px); } @media (max-width: 1024px) { .v-hero-split { grid-template-columns: minmax(0, 1fr); } } .v-hero-split__art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--v-radius-1); overflow: hidden; background: linear-gradient(135deg, var(--v-gulf-teal), var(--v-deepest)); border: 1px solid var(--v-border-5); } /* ---------- MARQUEE / TICKER ---------- */ .v-marquee { display: flex; gap: var(--v-space-12); white-space: nowrap; overflow: hidden; padding: var(--v-space-3) 0; border-block: 1px solid var(--v-border-4); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .v-marquee__track { display: flex; gap: var(--v-space-12); animation: v-marquee 30s linear infinite; } @keyframes v-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .v-marquee__item { font-family: var(--v-font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-on-secondary); display: inline-flex; align-items: center; gap: var(--v-space-3); } /* ---------- INTEGRATION CARD ---------- */ .v-integration { display: flex; gap: var(--v-space-4); align-items: flex-start; padding: var(--v-space-5); background: var(--v-surface-section); border: 1px solid var(--v-border-5); border-radius: var(--v-radius-1); transition: border-color var(--v-duration-base); } .v-integration:hover { border-color: var(--v-teal-light); } .v-integration__logo { width: 48px; height: 48px; border-radius: var(--v-radius-1); background: var(--v-gulf-teal); display: inline-flex; align-items: center; justify-content: center; color: var(--v-on-dark-primary); flex-shrink: 0; } /* min-width:0 is required so the flex item can shrink below its intrinsic content width — without it long URLs/tokens push the toggle out of the card. */ .v-integration__body { flex: 1; min-width: 0; overflow-wrap: anywhere; } .v-integration__title { font-family: var(--v-font-display); font-weight: 300; font-size: 16px; color: var(--v-on-primary); } .v-integration__desc { font-family: var(--v-font-body); font-size: 13px; color: var(--v-on-secondary); margin-top: 4px; line-height: 1.6; } .v-integration__status { display: flex; align-items: center; gap: 6px; margin-top: var(--v-space-2); flex-wrap: wrap; } .v-integration > v-toggle, .v-integration > .v-toggle { flex-shrink: 0; align-self: center; } /* ---------- API KEY / SECRET FIELD ---------- */ .v-secret-field { display: flex; align-items: stretch; border: 1px solid var(--v-border-5); background: rgba(127,196,212,.04); border-radius: var(--v-radius-1); overflow: hidden; font-family: var(--v-font-mono); } .v-secret-field input { flex: 1; background: transparent; border: 0; outline: none; padding: 10px 14px; font-family: inherit; font-size: 13px; letter-spacing: 1px; color: var(--v-on-primary); -webkit-text-security: disc; } .v-secret-field[data-revealed="true"] input { -webkit-text-security: none; } .v-secret-field button { background: transparent; border: 0; cursor: pointer; padding: 0 var(--v-space-4); color: var(--v-on-tertiary); border-inline-start: 1px solid var(--v-border-5); font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; transition: color var(--v-duration-fast); } .v-secret-field button:hover { color: var(--v-teal-light); } /* ---------- KANBAN BOARD ---------- */ .v-kanban { display: flex; gap: var(--v-space-4); overflow-x: auto; padding-bottom: var(--v-space-4); scrollbar-width: thin; } .v-kanban__column { flex: 0 0 300px; display: flex; flex-direction: column; background: var(--v-surface-section); border: 1px solid var(--v-border-4); border-radius: var(--v-radius-1); max-height: 600px; } .v-kanban__col-head { padding: var(--v-space-4) var(--v-space-5); border-bottom: 1px solid var(--v-border-4); display: flex; align-items: center; justify-content: space-between; gap: var(--v-space-3); } .v-kanban__col-title { font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: var(--v-on-tertiary); } .v-kanban__col-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; font-family: var(--v-font-mono); font-size: 10px; background: var(--v-border-3); color: var(--v-on-secondary); border-radius: 999px; } .v-kanban__col-body { flex: 1; overflow-y: auto; padding: var(--v-space-3); display: flex; flex-direction: column; gap: var(--v-space-3); } .v-kanban__card { background: var(--v-surface-page); border: 1px solid var(--v-border-4); border-radius: var(--v-radius-1); padding: var(--v-space-4); display: flex; flex-direction: column; gap: var(--v-space-2); cursor: grab; transition: border-color var(--v-duration-fast), transform var(--v-duration-fast); } .v-kanban__card:hover { border-color: var(--v-teal-light); } .v-kanban__card:active { cursor: grabbing; } .v-kanban__card-title { font-family: var(--v-font-body); font-size: 14px; font-weight: 500; color: var(--v-on-primary); } .v-kanban__card-meta { font-family: var(--v-font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); display: flex; align-items: center; gap: var(--v-space-2); } /* ---------- AUDIT LOG ---------- */ .v-audit-list { display: flex; flex-direction: column; } .v-audit-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--v-space-4); padding: var(--v-space-3) var(--v-space-5); border-bottom: 1px solid var(--v-border-3); font-family: var(--v-font-mono); font-size: 12px; color: var(--v-on-secondary); align-items: center; } .v-audit-row__time { color: var(--v-on-tertiary); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; } .v-audit-row__msg em { color: var(--v-teal-light); font-style: normal; } .v-audit-row__user { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--v-on-primary); } /* ---------- PERMISSION MATRIX ---------- */ .v-perm-matrix { width: 100%; border-collapse: separate; border-spacing: 0; } .v-perm-matrix thead th, .v-perm-matrix tbody th { padding: var(--v-space-3) var(--v-space-4); font-family: var(--v-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--v-on-tertiary); font-weight: 400; text-align: start; border-bottom: 1px solid var(--v-border-4); } .v-perm-matrix tbody td { padding: var(--v-space-3) var(--v-space-4); text-align: center; border-bottom: 1px solid var(--v-border-3); } .v-perm-matrix tbody tr:hover { background: rgba(127,196,212,.03); } /* ---------- AVATAR WITH STATUS DOT ---------- */ .v-avatar { position: relative; } .v-avatar__status { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--v-success); border: 2px solid var(--v-surface-page); } .v-avatar__status--idle { background: var(--v-on-tertiary); } .v-avatar__status--busy { background: var(--v-warning); } .v-avatar__status--offline { background: var(--v-on-tertiary); opacity: .4; } /* ---------- BADGE COUNTER ON ICON BUTTON ---------- */ .v-icon-btn-badge { position: relative; display: inline-flex; } .v-icon-btn-badge__count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--v-terracotta); color: #fff; font-family: var(--v-font-mono); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; padding: 0 4px; } /* ---------- TOOLTIP WITH ARROW (light + popover variant) ---------- */ .v-tooltip__bubble--arrow::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--v-charcoal); } /* ---------- METRIC GRID ---------- */ .v-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: var(--v-border-3); } .v-metric-grid > .v-kpi { border: 0; border-radius: 0; } /* ---------- ROADMAP / CHANGELOG ---------- */ .v-changelog { display: flex; flex-direction: column; gap: var(--v-space-10); } .v-changelog__entry { display: grid; grid-template-columns: 160px 1fr; gap: var(--v-space-5); } @media (max-width: 768px) { .v-changelog__entry { grid-template-columns: minmax(0, 1fr); } } .v-changelog__head { display: flex; flex-direction: column; gap: var(--v-space-1); position: sticky; top: 24px; align-self: start; } .v-changelog__version { font-family: var(--v-font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-teal-light); } .v-changelog__date { font-family: var(--v-font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--v-on-tertiary); } .v-changelog__body { display: flex; flex-direction: column; gap: var(--v-space-4); } /* ========================================================================= ACCESSIBILITY UTILITIES ========================================================================= */ .v-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [aria-live] { /* style as needed; reserved namespace */ } .v-required::after { content: ' *'; color: var(--v-danger); } /* ========================================================================= PRINT IMPROVEMENTS (proposals + invoices print-ready) ========================================================================= */ @media print { .v-app-shell, .v-app-shell__sidebar, .v-app-shell__topbar { display: block; } .v-app-shell__sidebar { display: none; } .v-fab, .v-bottom-nav, .v-drawer, .v-sheet, .v-toast-region, .v-banner { display: none; } } /* ========================================================================= MOBILE AUDIT FIXES — 2026-05-26 Appended overrides — last in cascade, lowest disruption to existing rules. Goal: make every "mobile pattern" actually mobile-friendly at viewports ≤ 640px, while preserving desktop behavior. Touch targets, safe-area, sheet/drawer escape, horizontal-scroll containers, popover clamping. ========================================================================= */ /* ------------------------------------------------------------------------- A. SHEET / DRAWER ESCAPE FROM CONTAINING-BLOCK When .v-sheet/.v-drawer is rendered inside a .mobile-frame preview (which uses `contain: paint` or `transform`), `position: fixed` is captured by that ancestor and the sheet stays inside the frame — which is the *intended* demo behavior. But when the sheet is used in a real app inside any ancestor with `transform`/`filter`/`backdrop-filter`/`contain`, the same trap occurs. We cannot fix the containing-block at runtime via CSS alone, but we can: 1) Inside `.mobile-frame`, *keep* the sheet/drawer trapped to the frame (this matches the demo intent — sheet should slide up within the phone shell, not escape to the document viewport). 2) Outside `.mobile-frame`, the existing `position: fixed` rule works correctly. No override needed there. The rule below ensures `.mobile-frame > .v-sheet` and `.mobile-frame .v-drawer` stay aware of the frame's geometry and respect safe-area padding even when constrained. ------------------------------------------------------------------------- */ .mobile-frame .v-sheet, .mobile-frame v-sheet { position: absolute; /* `fixed` is already trapped; make it explicit */ bottom: 0; left: 0; right: 0; max-height: 80%; padding-bottom: max(var(--v-space-4), var(--v-safe-bottom)); } .mobile-frame .v-drawer, .mobile-frame v-drawer { position: absolute; top: 0; bottom: 0; width: min(85%, 320px); } /* ------------------------------------------------------------------------- B. DRAWER ON SMALL SCREENS — at ≤ 480px slide up from bottom as a sheet. Preserves > 480px desktop/tablet side-drawer behavior unchanged. ------------------------------------------------------------------------- */ @media (max-width: 480px) { .v-drawer { /* convert from side-drawer to bottom sheet */ inset-inline-end: 0; inset-inline-start: 0; top: auto; bottom: 0; width: 100%; max-height: 90dvh; border-inline-start: 0; border-top: 1px solid var(--v-border-5); border-top-left-radius: 16px; border-top-right-radius: 16px; transform: translateY(100%); padding-bottom: var(--v-safe-bottom); } [dir="rtl"] .v-drawer { transform: translateY(100%); } .v-drawer[data-open="true"] { transform: translateY(0); } .v-drawer__header, .v-drawer__body, .v-drawer__footer { padding-inline: var(--v-space-5); } } /* ------------------------------------------------------------------------- C. SAFE-AREA INSETS — components missing safe-area-aware insets ------------------------------------------------------------------------- */ .v-sheet { /* already had padding-bottom: var(--v-safe-bottom); reinforce + add inline padding to respect notch on landscape iOS */ padding-inline-start: var(--v-safe-left); padding-inline-end: var(--v-safe-right); } .v-bottom-nav { /* existing height already adds safe-bottom; add side insets for landscape */ padding-inline-start: var(--v-safe-left); padding-inline-end: var(--v-safe-right); } .v-fab { /* prevent overlap with iOS home indicator + landscape side notch */ inset-inline-end: max(var(--v-space-6), calc(var(--v-space-6) + var(--v-safe-right))); } .v-mobile-nav { /* respect landscape side notch in addition to the existing top padding */ padding-inline-start: max(var(--v-space-4), var(--v-safe-left)); padding-inline-end: max(var(--v-space-4), var(--v-safe-right)); } .v-cookie-banner { /* respect side safe-area on landscape iOS */ inset-inline-start: max(var(--v-space-5), var(--v-safe-left)); inset-inline-end: max(var(--v-space-5), var(--v-safe-right)); bottom: max(var(--v-space-5), var(--v-safe-bottom)); } .v-toast-region { /* keep toasts above home indicator + away from landscape notch */ bottom: max(var(--v-space-6), var(--v-safe-bottom)); right: max(var(--v-space-6), var(--v-safe-right)); } [dir="rtl"] .v-toast-region { right: auto; left: max(var(--v-space-6), var(--v-safe-left)); } /* ------------------------------------------------------------------------- D. TOUCH TARGETS at ≤ 640px — ensure ≥ 44×44px hit area on every interactive control. The base @media (max-width: 640px) block already covers .v-btn / .v-input / .v-toggle / .v-checkbox / .v-radio. Augment. ------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Tabs — wider tap target + horizontal scroll */ .v-tabs__list { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .v-tabs__list::-webkit-scrollbar { display: none; } .v-tabs__tab { min-height: var(--v-touch-target); padding: var(--v-space-3) var(--v-space-5); display: inline-flex; align-items: center; } /* Pagination */ .v-pagination__btn { width: var(--v-touch-target); height: var(--v-touch-target); } /* Bottom nav — already has min-height but ensure adequate hit area */ .v-bottom-nav__item { min-height: max(var(--v-touch-target), 56px); padding: 8px 4px; } /* FAB — already 56px (above 44px), keep */ /* Nav links (when visible on small) */ .v-nav__link { min-height: var(--v-touch-target); padding-inline: var(--v-space-4); display: inline-flex; align-items: center; } /* Stepper nodes — tap to navigate */ .v-stepper__node { min-height: var(--v-touch-target); padding: var(--v-space-2); } /* Rating stars — grow hit area, keep visual */ .v-rating { gap: var(--v-space-2); } .v-rating__star { width: var(--v-touch-target); height: var(--v-touch-target); padding: 11px; /* visual 22px star stays centered */ } /* Tag input close button — grow hit area */ .v-tag-input__tag { padding: 6px 10px; } .v-tag-input__tag button { width: 24px; height: 24px; margin: -6px -6px -6px 0; } /* Number stepper buttons */ .v-number-stepper button { width: var(--v-touch-target); min-height: var(--v-touch-target); } /* Toggle-group buttons (icon segmented) */ .v-toggle-group__btn { width: var(--v-touch-target); height: var(--v-touch-target); } /* Chip-toggle — keep visual height (~32px) but expand hit area via padding */ .v-chip-toggle { padding: 8px 16px; min-height: 36px; } /* Action-sheet items — already 52px; keep, just confirm padding */ .v-action-sheet__item { padding-inline: var(--v-space-5); } /* Combobox option / command-palette item rows */ .v-combobox__option { padding: 14px var(--v-space-4); min-height: var(--v-touch-target); } .v-command__item { padding: 12px var(--v-space-4); min-height: var(--v-touch-target); } /* Calendar day cells */ .v-calendar__day { height: var(--v-touch-target); } .v-calendar__nav button { width: var(--v-touch-target); height: var(--v-touch-target); } /* Modal close button */ .v-modal__close { min-width: var(--v-touch-target); min-height: var(--v-touch-target); padding: 0 var(--v-space-3); } /* Carousel dots — grow hit area, keep dot visual */ .v-carousel__dot { width: var(--v-touch-target); height: var(--v-touch-target); background: transparent; position: relative; } .v-carousel__dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--v-border-6); transform: translate(-50%, -50%); transition: all var(--v-duration-base); } .v-carousel__dot[aria-current="true"]::before { background: var(--v-teal-light); width: 18px; border-radius: 999px; } .v-carousel__dot[aria-current="true"] { width: var(--v-touch-target); } } /* ------------------------------------------------------------------------- E. MOBILE MODAL FULL-SCREEN — verify existing rule survives the modal-centering fix at line 1600. The existing @media (max-width:640px) at 4063 sets max-width:100% + width:100% + height:100dvh + margin:0, which DOES correctly override the desktop `margin:auto; inset:0`. But the `dialog.v-modal` selector specificity (1 element + 1 class = 11) matches the override (1 element + 1 class = 11), so source order wins — and the @media is later in source → it wins. Verified. No change needed to centering, but reinforce here for clarity. ------------------------------------------------------------------------- */ @media (max-width: 640px) { dialog.v-modal, .v-modal { /* Reinforce: full-screen on phones; respect safe areas */ inset: 0; margin: 0; padding-top: var(--v-safe-top); padding-bottom: var(--v-safe-bottom); padding-left: var(--v-safe-left); padding-right: var(--v-safe-right); } .v-modal--sheet { /* Sheet-style modal: bottom-anchored, not full-screen */ inset: auto 0 0 0; margin-top: auto; padding-top: 0; padding-bottom: var(--v-safe-bottom); } } /* ------------------------------------------------------------------------- F. POPOVER / HOVER-CARD / CONTEXT-MENU / COMBOBOX-LIST / DATEPICKER-POP On mobile they can render off-screen because their containers (a button, an inline input) sit near a viewport edge. Clamp width and add edge padding so they never exceed the viewport. ------------------------------------------------------------------------- */ @media (max-width: 640px) { .v-popover, [popover].v-popover { max-width: calc(100vw - var(--v-space-6)); min-width: 0; } .v-hover-card__panel { width: min(320px, calc(100vw - var(--v-space-6))); /* clamp to viewport — replace left:50% transform with viewport-safe positioning */ left: 50%; transform: translateX(-50%) translateY(4px); max-width: calc(100vw - var(--v-space-6)); } .v-context-menu { min-width: 0; max-width: calc(100vw - var(--v-space-4)); } .v-combobox__list { /* allow the list to expand to the available space, not just the combobox width — useful for long option text on phones */ inset-inline-start: 0; inset-inline-end: 0; max-width: 100vw; max-height: 50dvh; } .v-datepicker { max-width: 100%; } .v-datepicker__pop { /* clamp calendar popover to viewport; on phones prefer centered */ position: fixed; top: auto; bottom: 0; inset-inline: 0; background: var(--v-surface-section); border-top: 1px solid var(--v-border-5); border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: var(--v-shadow-4); padding-bottom: var(--v-safe-bottom); z-index: var(--v-z-modal); } .v-datepicker__pop .v-calendar { width: 100%; border: 0; border-radius: 0; } .v-command { /* Already responsive-width via min(640px,92vw). Ensure list height fits. */ max-height: 80dvh; } .v-command__list { max-height: 60dvh; } } /* ------------------------------------------------------------------------- G. HORIZONTAL-SCROLL CONTAINERS — touch-momentum + hidden scrollbars + edge fade where missing. Carousel + Stepper already have momentum; add the rest. ------------------------------------------------------------------------- */ .v-carousel, .v-kanban, .v-tabs__list, .v-stepper, .v-cap-strip__grid { -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; } .v-kanban { scrollbar-width: none; } .v-kanban::-webkit-scrollbar { display: none; } /* Data table — make horizontally scrollable on small screens. The .v-data-table itself is a
; wrap its scroll on a parent utility .v-data-table-scroll if present. Otherwise set min-width:0 and let it overflow its parent. */ @media (max-width: 640px) { .v-data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; white-space: nowrap; } .v-data-table thead, .v-data-table tbody { display: table; width: 100%; min-width: 560px; } .v-data-table__toolbar { flex-direction: column; align-items: stretch; } .v-data-table__toolbar > .v-search { width: 100%; } } /* Kanban: on phones, columns become full-width snap-scroll lanes */ @media (max-width: 640px) { .v-kanban { scroll-snap-type: x mandatory; padding-inline: var(--v-space-4); gap: var(--v-space-3); } .v-kanban__column { flex: 0 0 88%; scroll-snap-align: start; max-height: 70dvh; } } /* Carousel: keep current behavior but make sure scrollbar is hidden on webkit at all sizes (existing rule covered this — reinforce). */ .v-carousel { scrollbar-width: none; } .v-carousel::-webkit-scrollbar { display: none; } /* ------------------------------------------------------------------------- H. MOBILE-NAV / BOTTOM-NAV / FAB / SWIPE-ROW — small misc fixes ------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Mobile nav: clamp large title so it doesn't overflow on narrow phones */ .v-mobile-nav__large { font-size: clamp(24px, 7vw, 34px); word-break: keep-all; } .v-mobile-nav__title { font-size: clamp(15px, 4vw, 17px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Swipe row: tighten on small screens */ .v-swipe-row__content { padding: var(--v-space-3) var(--v-space-4); } .v-swipe-row__action { min-width: 72px; padding: 0 var(--v-space-4); } /* Action sheet: stretch to viewport on narrow */ .v-action-sheet__group { margin: 0 var(--v-space-3) var(--v-space-3); } /* Cookie banner: stack actions */ .v-cookie-banner__actions .v-btn { flex: 1; min-width: 0; } /* Cap-strip grid: keep 2-col but allow horizontal scroll fallback if items > 4 */ .v-cap-strip__grid { grid-auto-flow: row; } } /* ------------------------------------------------------------------------- I. CHIP / TAG — chip-set wraps but each chip stays tappable (visual ≥ 32px; hit-area via padding ≥ 36px tall on mobile — see D). No structural change beyond what D already adds. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- J. SIDEBAR — at ≤ 768px existing app-shell hides sidebar. On phones, ensure the drawer mode (above, ≤ 480px) is the primary nav surface and sidebar is fully hidden, never partially visible. ------------------------------------------------------------------------- */ @media (max-width: 640px) { .v-sidebar { display: none; } } /* ------------------------------------------------------------------------- K. PREVENT iOS auto-zoom on input focus — inputs must be ≥ 16px font on mobile, or iOS Safari will zoom the viewport in. ------------------------------------------------------------------------- */ @media (max-width: 640px) { .v-input, .v-textarea, .v-select, .v-combobox__input, .v-datepicker__input, .v-command__search input, .v-tag-input input, .v-number-stepper input, .v-color-picker__hex { font-size: 16px; } } /* ------------------------------------------------------------------------- L. SCROLL-PADDING for sticky bottom nav — when a page uses .v-bottom-nav and an in-page anchor is scrolled to, ensure the anchor isn't hidden behind the nav. ------------------------------------------------------------------------- */ @media (max-width: 640px) { :root:has(.v-bottom-nav) { scroll-padding-bottom: calc(var(--v-mobile-bottom-nav-h) + var(--v-safe-bottom) + var(--v-space-4)); } :root:has(.v-mobile-nav) { scroll-padding-top: calc(var(--v-mobile-nav-h) + var(--v-safe-top) + var(--v-space-4)); } } /* ------------------------------------------------------------------------- M. PULL-INDICATOR — make sure it sits inside the safe-area, not under the notch. ------------------------------------------------------------------------- */ .v-pull-indicator { padding-top: max(var(--v-space-3), var(--v-safe-top)); } /* End of MOBILE AUDIT FIXES — 2026-05-26 */ /* ------------------------------------------------------------------------- v1.2.2 — Back-to-top control ------------------------------------------------------------------------- */ .v-back-to-top { position: fixed; bottom: calc(var(--v-space-6) + var(--v-safe-bottom)); inset-inline-end: var(--v-space-6); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(5, 30, 40, .92); color: var(--v-on-primary); border: 1px solid var(--v-border-4); box-shadow: var(--v-shadow-3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.92); transition: opacity var(--v-duration-base) var(--v-ease-out), transform var(--v-duration-base) var(--v-spring-soft), background var(--v-duration-fast) var(--v-ease-out), border-color var(--v-duration-fast) var(--v-ease-out); z-index: calc(var(--v-z-nav) - 1); } .v-back-to-top[data-visible="true"] { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .v-back-to-top:hover { background: rgba(26, 122, 143, .92); border-color: var(--v-teal-core); transform: translateY(-2px) scale(1.04); } .v-back-to-top:active { transform: translateY(0) scale(.96); } .v-back-to-top:focus-visible { outline: 2px solid var(--v-teal-core); outline-offset: 3px; } [data-theme="light"] .v-back-to-top { background: rgba(255, 253, 247, .92); color: var(--v-ink-1); border-color: var(--v-border-4); } [data-theme="light"] .v-back-to-top:hover { background: rgba(26, 122, 143, .12); border-color: var(--v-teal-core); color: var(--v-teal-core); } .v-back-to-top svg { width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { .v-back-to-top { transition: opacity var(--v-duration-fast) linear; transform: none; } .v-back-to-top[data-visible="true"] { transform: none; } .v-back-to-top:hover { transform: none; } } /* When a bottom-nav or FAB is present, lift the back-to-top above them */ .v-bottom-nav ~ .v-back-to-top, .v-fab ~ .v-back-to-top { bottom: calc(var(--v-space-6) + var(--v-fab-size) + var(--v-space-3) + var(--v-safe-bottom)); } /* End of veilance.css v1.1 phase 2 */