/*! * dotHello v2.5.0 — CSS * Lightweight, beautiful microsite & landing page framework * MIT License — https://github.com/yourusername/dothello * WCAG 2.1 AA compliant */ /* ============================================ dotHello — Design Tokens The single source of truth for all visual decisions. Override these to brand your microsite instantly. ============================================ */ :root { /* --- Colors --- */ --dh-color-primary: #00e5a0; --dh-color-primary-light: #33ffbb; --dh-color-primary-dark: #00b37d; --dh-color-accent: #ff6b6b; --dh-color-accent-light: #ff9494; --dh-color-accent-dark: #e63e3e; --dh-color-dark: #080a0f; --dh-color-dark-soft: #0e1118; --dh-color-dark-mid: #141720; --dh-color-light: #f2f4f8; --dh-color-white: #ffffff; --dh-color-surface-alt: #f0f0f5; /* alternate surface; dark-mode override below */ --dh-color-nav-link: rgba(255,255,255,0.9); /* nav link colour — override to adapt light navbars */ --dh-color-text-adaptive: var(--dh-color-white); /* blend-mode text; override in light theme if needed */ --dh-color-on-primary: var(--dh-color-dark); /* text on primary-bg elements (buttons, badges) */ --dh-color-on-accent: var(--dh-color-white); /* text on accent-bg elements */ --dh-color-bg: var(--dh-color-white); /* page / body background */ --dh-color-surface: var(--dh-color-light); /* card, panel, sidebar background */ --dh-color-surface-raised: var(--dh-color-white); /* dropdowns, modals, tooltips */ --dh-color-surface-overlay:rgba(0, 0, 0, 0.55); /* modal backdrop / scrim */ --dh-color-hover: rgba(0, 0, 0, 0.04); /* hover bg on light surfaces */ --dh-color-active: rgba(0, 0, 0, 0.08); /* active/pressed state */ --dh-color-success: #10b981; --dh-color-success-bg: rgba(16, 185, 129, 0.10); --dh-color-warning: #f59e0b; --dh-color-warning-bg: rgba(245, 158, 11, 0.10); --dh-color-error: #ef4444; --dh-color-error-bg: rgba(239, 68, 68, 0.10); --dh-color-info: #3b82f6; --dh-color-info-bg: rgba(59, 130, 246, 0.10); --dh-color-link: var(--dh-color-primary); --dh-color-link-hover: var(--dh-color-primary-dark); --dh-focus-ring-color: var(--dh-color-primary); --dh-focus-ring-width: 3px; --dh-focus-ring-offset: 2px; --dh-nav-bg: transparent; --dh-nav-bg-scrolled: rgba(8, 10, 15, 0.92); --dh-nav-blur: 16px; --dh-color-text: #1a1a2e; --dh-color-text-muted: #4b5563; --dh-color-text-inverse: #f2f4f8; --dh-color-border: rgba(0, 0, 0, 0.1); --dh-color-border-input: rgba(0, 0, 0, 0.45); --dh-color-border-light: rgba(255, 255, 255, 0.07); --dh-color-border-mid: rgba(255, 255, 255, 0.12); /* --- Gradients --- */ --dh-gradient-primary: linear-gradient(135deg, #00e5a0, #4d9fff); --dh-gradient-dark: linear-gradient(135deg, #080a0f, #141720); --dh-gradient-subtle: linear-gradient(180deg, var(--dh-color-light), var(--dh-color-white)); /* --- Typography --- */ --dh-font-display: 'Syne', 'Helvetica Neue', sans-serif; --dh-font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --dh-font-mono: 'JetBrains Mono', 'Courier New', monospace; --dh-text-xs: 0.75rem; --dh-text-sm: 0.875rem; --dh-text-base: 1rem; --dh-text-lg: 1.125rem; --dh-text-xl: 1.25rem; --dh-text-2xl: 1.5rem; --dh-text-3xl: 1.875rem; --dh-text-4xl: 2.25rem; --dh-text-5xl: 3rem; --dh-text-6xl: 3.75rem; --dh-text-7xl: 4.5rem; --dh-text-hero: clamp(3rem, 8vw, 6rem); --dh-leading-tight: 1.15; --dh-leading-snug: 1.375; --dh-leading-normal: 1.6; --dh-leading-loose: 1.8; --dh-weight-normal: 400; --dh-weight-medium: 500; --dh-weight-semibold: 600; --dh-weight-bold: 700; --dh-weight-black: 900; /* --- Spacing --- */ --dh-space-1: 0.25rem; --dh-space-2: 0.5rem; --dh-space-3: 0.75rem; --dh-space-4: 1rem; --dh-space-5: 1.25rem; --dh-space-6: 1.5rem; --dh-space-8: 2rem; --dh-space-10: 2.5rem; --dh-space-12: 3rem; --dh-space-16: 4rem; --dh-space-20: 5rem; --dh-space-24: 6rem; --dh-space-32: 8rem; /* --- Layout --- */ --dh-nav-height: 64px; /* global nav height for offset calculations */ --dh-container-sm: 640px; --dh-container-md: 768px; --dh-container-lg: 1024px; --dh-container-xl: 1280px; --dh-container-2xl: 1440px; /* --- App Shell — v2.2.0 --- */ --dh-shell-sidebar-w: 260px; --dh-shell-aside-w: 320px; --dh-shell-main-max: 600px; --dh-shell-sidebar-rail-w: 64px; /* --- Borders & Radius --- */ --dh-radius-sm: 4px; --dh-radius-md: 8px; --dh-radius-lg: 16px; --dh-radius-xl: 24px; --dh-radius-full: 9999px; /* --- Shape Tokens — v2.5.0 --- Per-component shape overrides. Override these to change the border-radius of specific component families globally. Example: set --dh-btn-radius to 8px for rectangular buttons. ----------------------------------------------------------- */ --dh-btn-radius: var(--dh-radius-full); /* button shape — default: pill */ --dh-card-radius: var(--dh-radius-lg); /* card / panel corners */ --dh-input-radius: var(--dh-radius-md); /* form inputs, selects, textareas */ --dh-modal-radius: var(--dh-radius-xl); /* modal box corners */ --dh-drawer-width: 320px; /* nav drawer panel width */ /* --- Shadows --- */ --dh-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); --dh-shadow-md: 0 4px 16px rgba(0,0,0,0.12); --dh-shadow-lg: 0 10px 40px rgba(0,0,0,0.16); --dh-shadow-xl: 0 24px 64px rgba(0,0,0,0.2); --dh-shadow-glow: 0 0 40px rgba(0, 229, 160, 0.3); /* --- Transitions --- */ --dh-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dh-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dh-ease-inout: cubic-bezier(0.87, 0, 0.13, 1); --dh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dh-duration-fast: 150ms; --dh-duration-base: 250ms; --dh-duration-slow: 400ms; --dh-duration-slower: 700ms; /* --- Animations (v1.8) --- */ --dh-anim-duration: 600ms; --dh-anim-duration-fast: 350ms; --dh-anim-duration-slow: 900ms; --dh-anim-distance: 32px; --dh-anim-distance-lg: 64px; --dh-anim-stagger: 80ms; --dh-anim-parallax-speed: 0.4; /* --- Z-index --- */ --dh-z-base: 0; --dh-z-raised: 10; --dh-z-dropdown: 100; --dh-z-sticky: 200; --dh-z-overlay: 300; --dh-z-modal: 400; --dh-z-toast: 500; /* --- Brand Tokens (v1.9.0) --- User override layer — set these in your :root to brand any template. All framework components that need a "brand color" reference --dh-brand-*. ============================================================ */ --dh-brand-primary: var(--dh-color-primary); --dh-brand-secondary: var(--dh-color-primary-dark); --dh-brand-accent: var(--dh-color-accent); --dh-brand-dark: var(--dh-color-dark); --dh-brand-gradient: var(--dh-gradient-primary); } /* ============================================ ICON SYSTEM ============================================ */ .dh-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1; flex-shrink: 0; vertical-align: middle; } .dh-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; } .dh-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } [data-dh-icon-slot]:empty { display: none; } [data-dh-icon-slot] { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dh-icon--sm { width: 1rem; height: 1rem; font-size: 1rem; } .dh-icon--md { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; } .dh-icon--lg { width: 2rem; height: 2rem; font-size: 2rem; } .dh-icon--xl { width: 3rem; height: 3rem; font-size: 3rem; } .dh-icon--left { margin-right: 0.5em; } .dh-icon--right { margin-left: 0.5em; } /* ============================================ MICROFRAME — Base & Reset ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--dh-font-body); font-size: var(--dh-text-base); line-height: var(--dh-leading-normal); color: var(--dh-color-text); background: var(--dh-color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; } a { color: var(--dh-color-primary); text-decoration: none; transition: color var(--dh-duration-fast) var(--dh-ease-out); } a:hover { color: var(--dh-color-primary-dark); } button, input, select, textarea { font: inherit; } /* --- Typography Scale --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--dh-font-display); line-height: var(--dh-leading-tight); font-weight: var(--dh-weight-bold); letter-spacing: -0.02em; } h1 { font-size: var(--dh-text-5xl); } h2 { font-size: var(--dh-text-4xl); } h3 { font-size: var(--dh-text-3xl); } h4 { font-size: var(--dh-text-2xl); } h5 { font-size: var(--dh-text-xl); } h6 { font-size: var(--dh-text-lg); } p { margin-bottom: var(--dh-space-4); } p:last-child { margin-bottom: 0; } .dh-lead { font-size: var(--dh-text-xl); line-height: var(--dh-leading-snug); color: var(--dh-color-text-muted); } .dh-small { font-size: var(--dh-text-sm); } .dh-eyebrow { font-family: var(--dh-font-body); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dh-color-primary); } /* --- Container --- */ .dh-container { width: 100%; max-width: var(--dh-container-xl); margin-inline: auto; padding-inline: var(--dh-space-6); } .dh-container-sm { max-width: var(--dh-container-sm); } .dh-container-md { max-width: var(--dh-container-md); } .dh-container-lg { max-width: var(--dh-container-lg); } .dh-container-2xl { max-width: var(--dh-container-2xl); } /* --- Section Spacing --- */ .dh-section { padding-block: var(--dh-space-24); } .dh-section-sm { padding-block: var(--dh-space-16); } .dh-section-lg { padding-block: var(--dh-space-32); } /* --- Utilities --- */ .dh-text-center { text-align: center; } .dh-text-left { text-align: left; } .dh-text-right { text-align: right; } .dh-text-gradient { background: var(--dh-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dh-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* --- Grid --- */ .dh-grid { display: grid; gap: var(--dh-space-6); } .dh-grid-2 { grid-template-columns: repeat(2, 1fr); } .dh-grid-3 { grid-template-columns: repeat(3, 1fr); } .dh-grid-4 { grid-template-columns: repeat(4, 1fr); } .dh-grid-auto { display: grid; gap: var(--dh-space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .dh-grid-auto-sm { display: grid; gap: var(--dh-space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .dh-grid-auto-lg { display: grid; gap: var(--dh-space-6); grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } .dh-flex { display: flex; } .dh-flex-center { display: flex; align-items: center; justify-content: center; } .dh-flex-between { display: flex; align-items: center; justify-content: space-between; } .dh-flex-col { flex-direction: column; } .dh-flex-wrap { flex-wrap: wrap; } .dh-gap-2 { gap: var(--dh-space-2); } .dh-gap-3 { gap: var(--dh-space-3); } .dh-gap-4 { gap: var(--dh-space-4); } .dh-gap-6 { gap: var(--dh-space-6); } .dh-gap-8 { gap: var(--dh-space-8); } .dh-gap-12 { gap: var(--dh-space-12); } /* --- Layout utilities (v1.9.0) --- */ .dh-relative { position: relative; } .dh-z-1 { z-index: 1; } .dh-mx-auto { margin-inline: auto; } .dh-aspect-video { aspect-ratio: 16 / 9; } .dh-aspect-square { aspect-ratio: 1 / 1; } .dh-aspect-4-3 { aspect-ratio: 4 / 3; } .dh-rounded-full { border-radius: 50%; } .dh-font-medium { font-weight: var(--dh-weight-medium); } .dh-font-bold { font-weight: var(--dh-weight-bold); } .dh-font-black { font-weight: var(--dh-weight-black); } /* --- Text utilities (v1.9.0) --- */ .dh-text--muted { color: rgba(255, 255, 255, 0.6); } .dh-text--subtle { color: rgba(255, 255, 255, 0.45); } .dh-text--uppercase { text-transform: uppercase; letter-spacing: 0.1em; } .dh-text--italic { font-style: italic; } /* --- Animation utilities (v1.9.0) --- */ .dh-animate-pulse { animation: dh-pulse 8s ease-in-out infinite; } .dh-animate-float { animation: dh-float 6s ease-in-out infinite; } .dh-transition { transition: all var(--dh-duration-base) var(--dh-ease-out); } .dh-scale-hover:hover { transform: scale(1.02); } .dh-lift-hover:hover { transform: translateY(-8px); } /* --- Contrast utilities (v1.9.0) --- */ .dh-text--blend { color: var(--dh-color-text-adaptive); mix-blend-mode: difference; position: relative; z-index: 1; } .dh-text--adaptive { color: var(--dh-color-text-adaptive); mix-blend-mode: difference; position: relative; z-index: 1; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); font-weight: var(--dh-weight-bold); } .dh-scrim { backdrop-filter: blur(10px) brightness(0.7); -webkit-backdrop-filter: blur(10px) brightness(0.7); } .dh-hero--gradient { isolation: isolate; } @media (prefers-reduced-motion: reduce) { .dh-text--blend, .dh-text--adaptive { mix-blend-mode: normal; } } /* --- Responsive --- */ @media (max-width: 1024px) { .dh-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { h1 { font-size: var(--dh-text-4xl); } h2 { font-size: var(--dh-text-3xl); } h3 { font-size: var(--dh-text-2xl); } .dh-grid-2, .dh-grid-3, .dh-grid-4 { grid-template-columns: 1fr; } .dh-section { padding-block: var(--dh-space-16); } .dh-section-lg{ padding-block: var(--dh-space-20); } .dh-container { padding-inline: var(--dh-space-4); } } /* ============================================ DH App Shell — v2.2.0 Three-column sticky layout for app-style UIs. Sidebar | Main | Aside Collapses: aside hidden ≤1024px, sidebar → rail ≤640px, sidebar hidden + mobile nav shown ≤400px. ============================================ */ .dh-app-shell { display: grid; grid-template-columns: var(--dh-shell-sidebar-w) minmax(0, var(--dh-shell-main-max)) var(--dh-shell-aside-w); width: 100%; max-width: calc(var(--dh-shell-sidebar-w) + var(--dh-shell-main-max) + var(--dh-shell-aside-w)); margin-inline: auto; min-height: 100vh; } .dh-app-shell--fluid { max-width: 100%; grid-template-columns: var(--dh-shell-sidebar-w) minmax(0, 1fr) var(--dh-shell-aside-w); } .dh-app-shell--no-aside { grid-template-columns: var(--dh-shell-sidebar-w) minmax(0, 1fr); max-width: calc(var(--dh-shell-sidebar-w) + var(--dh-shell-main-max)); } .dh-app-shell__sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; } .dh-app-shell__sidebar::-webkit-scrollbar { width: 0; } .dh-app-shell__main { min-height: 100vh; display: flex; flex-direction: column; } .dh-app-shell__aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; } .dh-app-shell__aside::-webkit-scrollbar { width: 0; } .dh-app-shell__mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--dh-z-sticky); background: var(--dh-surface); border-top: 1px solid var(--dh-border); padding-block: var(--dh-space-2); padding-bottom: calc(var(--dh-space-2) + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; } /* --- Responsive breakpoints --- */ @media (max-width: 1024px) { .dh-app-shell { grid-template-columns: var(--dh-shell-sidebar-w) minmax(0, 1fr); max-width: calc(var(--dh-shell-sidebar-w) + var(--dh-shell-main-max)); } .dh-app-shell--fluid { grid-template-columns: var(--dh-shell-sidebar-w) minmax(0, 1fr); } .dh-app-shell__aside { display: none; } } @media (max-width: 640px) { .dh-app-shell { grid-template-columns: var(--dh-shell-sidebar-rail-w) minmax(0, 1fr); max-width: 100%; } .dh-app-shell--fluid { grid-template-columns: var(--dh-shell-sidebar-rail-w) minmax(0, 1fr); } .dh-app-shell--no-aside { grid-template-columns: var(--dh-shell-sidebar-rail-w) minmax(0, 1fr); } } @media (max-width: 400px) { .dh-app-shell, .dh-app-shell--fluid, .dh-app-shell--no-aside { grid-template-columns: 1fr; } .dh-app-shell__sidebar { display: none; } .dh-app-shell__mobile-nav { display: flex; } .dh-app-shell__main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } } /* --- Dark mode --- */ @media (prefers-color-scheme: dark) { .dh-app-shell__mobile-nav { background: var(--dh-color-surface); border-top-color: var(--dh-color-border); } } .dh-dark .dh-app-shell__mobile-nav { background: var(--dh-surface); border-top-color: var(--dh-border); } /* --- RTL --- */ [dir="rtl"] .dh-app-shell { } /* --- Reduced motion: no changes needed (layout-only component) --- */ /* ============================================ MICROFRAME — Hero & Layout Components ============================================ */ /* --- Hero Base --- */ .dh-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--dh-color-dark); color: var(--dh-color-text-inverse); } .dh-hero__content { position: relative; z-index: var(--dh-z-raised); width: 100%; } .dh-hero__title { font-size: var(--dh-text-hero); font-weight: var(--dh-weight-black); line-height: var(--dh-leading-tight); letter-spacing: -0.03em; margin-bottom: var(--dh-space-6); } .dh-hero__subtitle { font-size: var(--dh-text-xl); line-height: var(--dh-leading-snug); color: rgba(255,255,255,0.9); /* WCAG 1.4.3: raised from 0.7 (~3:1 fail) to 0.9 (~7.5:1) */ max-width: 56ch; margin-bottom: var(--dh-space-10); } .dh-hero__actions { display: flex; gap: var(--dh-space-4); flex-wrap: wrap; } .dh-hero--center { text-align: center; } .dh-hero--center .dh-hero__subtitle { margin-inline: auto; } .dh-hero--center .dh-hero__actions { justify-content: center; } .dh-hero--gradient { background: var(--dh-gradient-dark); } .dh-hero--glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(108,71,255,0.45), transparent), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255,77,109,0.3), transparent); pointer-events: none; } .dh-hero--animated-radial { min-height: 100vh; position: relative; overflow: hidden; } .dh-hero--animated-radial::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--dh-brand-primary) 0%, transparent 70%); opacity: 0.4; animation: dh-pulse 8s ease-in-out infinite; pointer-events: none; } .dh-hero--split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; align-items: stretch; } .dh-hero--split .dh-hero__content { display: flex; align-items: center; padding: var(--dh-space-20) var(--dh-space-12); } .dh-hero--split .dh-hero__media { position: relative; overflow: hidden; } .dh-hero--split .dh-hero__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .dh-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.4; z-index: 0; } .dh-hero__overlay { position: absolute; inset: 0; background: rgba(13, 13, 13, 0.6); z-index: 1; } /* --- Scroll Indicator --- */ .dh-scroll-indicator { position: absolute; bottom: var(--dh-space-8); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--dh-space-2); color: rgba(255,255,255,0.85); /* WCAG 1.4.3: raised from 0.5 (critical fail) to 0.85 (~6.5:1) */ } .dh-scroll-indicator::after { content: ''; width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); } /* --- Navbar --- */ .dh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--dh-z-sticky); padding: var(--dh-space-5) 0; transition: background var(--dh-duration-slow) var(--dh-ease-out), padding var(--dh-duration-slow) var(--dh-ease-out), box-shadow var(--dh-duration-slow) var(--dh-ease-out); } .dh-nav.is-scrolled { background: var(--dh-nav-bg-scrolled); backdrop-filter: blur(var(--dh-nav-blur)); -webkit-backdrop-filter: blur(var(--dh-nav-blur)); padding: var(--dh-space-3) 0; box-shadow: 0 1px 0 rgba(255,255,255,0.06); } .dh-nav__inner, .dh-nav__content { display: flex; align-items: center; justify-content: space-between; } .dh-nav__logo, .dh-nav__brand { font-family: var(--dh-font-display); font-weight: var(--dh-weight-black); font-size: var(--dh-text-xl); color: var(--dh-color-white); letter-spacing: -0.02em; } .dh-nav__actions { display: flex; align-items: center; gap: var(--dh-space-3); } /* --- Nav Auth Layer (v2.3.0) --- Classes for authenticated-state UI in the navbar: hamburger, action icons, user avatar trigger, logout. --------------------------------------------------- */ .dh-nav__hamburger-btn, .dh-nav__action-btn, .dh-nav__user-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; border-radius: var(--dh-radius-md); color: var(--dh-color-nav-link); cursor: pointer; transition: background var(--dh-duration-fast) var(--dh-ease-out), color var(--dh-duration-fast) var(--dh-ease-out); flex-shrink: 0; padding: 0; } .dh-nav__hamburger-btn:hover, .dh-nav__action-btn:hover, .dh-nav__user-btn:hover { background: rgba(255,255,255,0.08); color: var(--dh-color-white); } .dh-nav__user-btn { width: 32px; height: 32px; border-radius: var(--dh-radius-full); overflow: hidden; padding: 0; } .dh-nav__user-btn img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .dh-nav__username { font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); color: var(--dh-color-nav-link); white-space: nowrap; } .dh-nav__register-link { font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); color: var(--dh-color-nav-link); text-decoration: none; transition: color var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__register-link:hover { color: var(--dh-color-white); } .dh-nav__logout-btn { display: block; width: 100%; padding: var(--dh-space-2) var(--dh-space-4); background: none; border: none; border-radius: var(--dh-radius-md); font-size: var(--dh-text-sm); font-family: var(--dh-font-body); font-weight: var(--dh-weight-medium); color: var(--dh-color-accent); text-align: left; cursor: pointer; transition: background var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__logout-btn:hover { background: rgba(255,255,255,0.06); } .dh-nav__logout-form, .dh-nav__inline-form { margin: 0; padding: 0; } .dh-nav__inline-form { display: inline; } .dh-nav__links { display: flex; align-items: center; gap: var(--dh-space-8); list-style: none; } .dh-nav__links a { color: var(--dh-color-nav-link); /* override --dh-color-nav-link to adapt light navbars */ font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); transition: color var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__links a:hover { color: var(--dh-color-white); } /* --- Section Dividers --- */ .dh-wave { display: block; width: 100%; overflow: hidden; line-height: 0; } .dh-wave svg { display: block; width: 100%; } .dh-nav__toggle { display: none; } @media (max-width: 768px) { .dh-hero--split { grid-template-columns: 1fr; } .dh-hero--split .dh-hero__media { min-height: 40vh; } .dh-nav__links, .dh-nav__actions { display: none; } .dh-nav__toggle { display: flex; } } /* --- Mobile Nav Toggle + Drawer (v1.9.0) --- */ .dh-nav__toggle { align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--dh-radius-md); cursor: pointer; color: var(--dh-color-white); flex-shrink: 0; transition: background var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__toggle:hover { background: rgba(255,255,255,0.12); } .dh-nav__toggle-icon, .dh-nav__toggle-close { pointer-events: none; } .dh-nav--open .dh-nav__toggle-icon { display: none; } .dh-nav__toggle-close { display: none; } .dh-nav--open .dh-nav__toggle-close { display: block; } .dh-nav__drawer { position: fixed; inset: 0; z-index: calc(var(--dh-z-sticky) - 1); pointer-events: none; } .dh-nav__drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity var(--dh-duration-base) var(--dh-ease-out); } .dh-nav__drawer-panel { position: absolute; top: 0; right: 0; width: min(var(--dh-drawer-width), 85vw); height: 100%; background: var(--dh-color-dark-soft); border-left: 1px solid var(--dh-color-border-light); padding: var(--dh-space-8) var(--dh-space-6); display: flex; flex-direction: column; gap: var(--dh-space-2); transform: translateX(100%); transition: transform var(--dh-duration-slow) var(--dh-ease-out); overflow-y: auto; } .dh-nav__drawer-panel a { display: block; padding: var(--dh-space-3) var(--dh-space-4); color: rgba(255,255,255,0.85); font-size: var(--dh-text-base); font-weight: var(--dh-weight-medium); border-radius: var(--dh-radius-md); transition: background var(--dh-duration-fast) var(--dh-ease-out), color var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__drawer-panel a:hover { background: rgba(255,255,255,0.06); color: var(--dh-color-white); } .dh-nav__drawer-actions { margin-top: var(--dh-space-6); padding-top: var(--dh-space-6); border-top: 1px solid var(--dh-color-border-light); display: flex; flex-direction: column; gap: var(--dh-space-3); } .dh-nav__drawer-actions .dh-btn { width: 100%; justify-content: center; } /* --- Drawer Header (v2.3.0) --- */ .dh-nav__drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--dh-space-4) var(--dh-space-6); background: var(--dh-color-primary); color: var(--dh-color-white); border-radius: var(--dh-radius-md) var(--dh-radius-md) 0 0; margin: calc(-1 * var(--dh-space-8)) calc(-1 * var(--dh-space-6)) var(--dh-space-4); flex-shrink: 0; } .dh-nav__drawer-title { font-size: var(--dh-text-base); font-weight: var(--dh-weight-semibold); display: flex; align-items: center; gap: var(--dh-space-2); } .dh-nav__drawer-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: var(--dh-radius-md); color: var(--dh-color-white); cursor: pointer; font-size: var(--dh-text-lg); opacity: 0.8; transition: opacity var(--dh-duration-fast) var(--dh-ease-out), background var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__drawer-close:hover { opacity: 1; background: rgba(255,255,255,0.15); } .dh-nav__divider { border: none; border-top: 1px solid var(--dh-color-border-light); margin: var(--dh-space-2) 0; } .dh-nav--open ~ .dh-nav__drawer, .dh-nav__drawer.is-open { pointer-events: auto; } .dh-nav__drawer.is-open .dh-nav__drawer-backdrop { opacity: 1; } .dh-nav__drawer.is-open .dh-nav__drawer-panel { transform: translateX(0); } /* --- Sidebar Nav (v1.9.0) --- */ .dh-sidebar { display: flex; flex-direction: column; width: 240px; min-height: 100vh; background: var(--dh-color-dark-soft); border-right: 1px solid var(--dh-color-border-light); padding: var(--dh-space-6) var(--dh-space-4); transition: width var(--dh-duration-base) var(--dh-ease-out); overflow: hidden; } .dh-sidebar--collapsed { width: 64px; } .dh-sidebar__brand { display: flex; align-items: center; gap: var(--dh-space-3); padding: var(--dh-space-3) var(--dh-space-2); margin-bottom: var(--dh-space-6); font-family: var(--dh-font-display); font-weight: var(--dh-weight-black); color: var(--dh-color-white); white-space: nowrap; overflow: hidden; } .dh-sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: var(--dh-space-1); } .dh-sidebar__group { font-size: var(--dh-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); padding: var(--dh-space-4) var(--dh-space-2) var(--dh-space-2); white-space: nowrap; overflow: hidden; } .dh-sidebar--collapsed .dh-sidebar__group { opacity: 0; } .dh-sidebar__item { display: flex; align-items: center; gap: var(--dh-space-3); padding: var(--dh-space-3) var(--dh-space-2); border-radius: var(--dh-radius-md); color: rgba(255,255,255,0.7); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); white-space: nowrap; overflow: hidden; transition: background var(--dh-duration-fast) var(--dh-ease-out), color var(--dh-duration-fast) var(--dh-ease-out); cursor: pointer; } .dh-sidebar__item:hover, .dh-sidebar__item.is-active { background: rgba(255,255,255,0.06); color: var(--dh-color-white); } .dh-sidebar__item.is-active { color: var(--dh-brand-primary); } .dh-sidebar__icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .dh-sidebar__label { overflow: hidden; } .dh-sidebar--collapsed .dh-sidebar__label { opacity: 0; width: 0; } /* --- Nav Dropdown (v1.9.0) --- */ .dh-nav__item { position: relative; } .dh-nav__dropdown { position: absolute; top: calc(100% + var(--dh-space-3)); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 200px; background: var(--dh-color-dark-soft); border: 1px solid var(--dh-color-border-light); border-radius: var(--dh-radius-lg); padding: var(--dh-space-2); box-shadow: var(--dh-shadow-xl); opacity: 0; pointer-events: none; transition: opacity var(--dh-duration-fast) var(--dh-ease-out), transform var(--dh-duration-fast) var(--dh-ease-out); z-index: var(--dh-z-dropdown); } .dh-nav__item.is-open > .dh-nav__dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dh-nav__dropdown a { display: block; padding: var(--dh-space-2) var(--dh-space-4); border-radius: var(--dh-radius-md); font-size: var(--dh-text-sm); color: rgba(255,255,255,0.8); transition: background var(--dh-duration-fast) var(--dh-ease-out), color var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav__dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--dh-color-white); } .dh-nav__dropdown--wide { min-width: 220px; } .dh-nav__dropdown-header { padding: var(--dh-space-2) var(--dh-space-4) var(--dh-space-3); font-size: var(--dh-text-xs); color: var(--dh-color-text-muted); border-bottom: 1px solid var(--dh-color-border-light); margin-bottom: var(--dh-space-2); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .dh-nav__mega { min-width: 480px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dh-space-2); } /* --- Animations --- */ @keyframes dh-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ============================================ MICROFRAME — Buttons & CTAs ============================================ */ /* --- Base Button --- */ .dh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dh-space-2); padding: var(--dh-space-3) var(--dh-space-6); font-family: var(--dh-font-body); font-size: var(--dh-text-base); font-weight: var(--dh-weight-semibold); line-height: 1; border-radius: var(--dh-btn-radius); border: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform var(--dh-duration-base) var(--dh-ease-out), box-shadow var(--dh-duration-base) var(--dh-ease-out), background var(--dh-duration-base) var(--dh-ease-out), color var(--dh-duration-base) var(--dh-ease-out); position: relative; overflow: hidden; } .dh-btn:active { transform: scale(0.97); } .dh-btn--primary { background: var(--dh-gradient-primary); color: var(--dh-color-on-primary); box-shadow: 0 4px 20px rgba(108, 71, 255, 0.35); } .dh-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(108, 71, 255, 0.5); color: var(--dh-color-on-primary); } .dh-btn--ghost { background: transparent; color: var(--dh-color-white); border-color: rgba(255,255,255,0.3); } .dh-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: var(--dh-color-white); transform: translateY(-2px); } .dh-btn--ghost-dark { background: transparent; color: var(--dh-color-text); border-color: var(--dh-color-border); } .dh-btn--ghost-dark:hover { background: var(--dh-color-light); border-color: var(--dh-color-primary); color: var(--dh-color-primary); } .dh-btn--ghost-nav { background: transparent; color: var(--dh-color-white); border-color: rgba(255,255,255,0.4); } .dh-btn--ghost-nav:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); color: var(--dh-color-white); transform: translateY(-1px); } .dh-btn--light { background: var(--dh-color-white); color: var(--dh-color-primary); } .dh-btn--light:hover { transform: translateY(-2px); box-shadow: var(--dh-shadow-lg); color: var(--dh-color-primary-dark); } .dh-btn--accent { background: var(--dh-color-accent); color: var(--dh-color-on-accent); box-shadow: 0 4px 20px rgba(255, 77, 109, 0.35); } .dh-btn--accent:hover { background: var(--dh-color-accent-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255, 77, 109, 0.5); color: var(--dh-color-on-accent); } .dh-btn--sm { padding: var(--dh-space-2) var(--dh-space-4); font-size: var(--dh-text-sm); } .dh-btn--lg { padding: var(--dh-space-4) var(--dh-space-8); font-size: var(--dh-text-lg); } .dh-btn--xl { padding: var(--dh-space-5) var(--dh-space-10); font-size: var(--dh-text-xl); } .dh-btn--outline { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--dh-color-white); } .dh-btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .dh-btn--block { width: 100%; } .dh-btn--shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left var(--dh-duration-slower) var(--dh-ease-out); } .dh-btn--shimmer:hover::after { left: 100%; } /* ============================================ Forms & Email Capture ============================================ */ .dh-form { display: flex; flex-direction: column; gap: var(--dh-space-4); } .dh-form__group { display: flex; flex-direction: column; gap: var(--dh-space-2); } .dh-form__label { font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); color: var(--dh-color-text); } .dh-form__label--inverse { color: rgba(255,255,255,0.8); } .dh-input, .dh-textarea, .dh-select { width: 100%; padding: var(--dh-space-3) var(--dh-space-4); font-family: var(--dh-font-body); font-size: var(--dh-text-base); color: var(--dh-color-text); background: var(--dh-color-white); border: 2px solid var(--dh-color-border-input); border-radius: var(--dh-input-radius); outline: none; transition: border-color var(--dh-duration-fast) var(--dh-ease-out), box-shadow var(--dh-duration-fast) var(--dh-ease-out); } .dh-input:focus-visible, .dh-textarea:focus-visible, .dh-select:focus-visible { border-color: var(--dh-focus-ring-color); box-shadow: 0 0 0 var(--dh-focus-ring-width) color-mix(in srgb, var(--dh-focus-ring-color) 20%, transparent); } .dh-input--dark { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: var(--dh-color-white); } .dh-input--dark::-moz-placeholder { color: rgba(255,255,255,0.65); } .dh-input--dark::placeholder { color: rgba(255,255,255,0.65); } .dh-input--dark:focus { border-color: var(--dh-color-primary-light); box-shadow: 0 0 0 3px rgba(108, 71, 255, 0.25); } .dh-capture { display: flex; gap: var(--dh-space-2); max-width: 480px; } .dh-capture .dh-input { flex: 1; border-radius: var(--dh-radius-full); } .dh-capture--centered { margin-inline: auto; } .dh-textarea { min-height: 120px; resize: vertical; } .dh-form__hint { font-size: var(--dh-text-xs); color: var(--dh-color-text-muted); } .dh-form__hint--inverse { color: rgba(255,255,255,0.85); } @media (max-width: 480px) { .dh-capture { flex-direction: column; } } /* ============================================ MICROFRAME — Cards & Conversion Components ============================================ */ /* --- Card --- */ .dh-card { background: var(--dh-color-white); border: 1px solid var(--dh-color-border); border-radius: var(--dh-card-radius); padding: var(--dh-space-8); transition: transform var(--dh-duration-base) var(--dh-ease-out), box-shadow var(--dh-duration-base) var(--dh-ease-out); } .dh-card:hover { transform: translateY(-4px); box-shadow: var(--dh-shadow-lg); } .dh-card--dark { background: var(--dh-color-dark-soft); border-color: rgba(255,255,255,0.08); color: var(--dh-color-text-inverse); } .dh-card--glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.1); color: var(--dh-color-text-inverse); } .dh-card--glow:hover { box-shadow: var(--dh-shadow-glow); } .dh-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--dh-radius-md); background: rgba(108, 71, 255, 0.1); color: var(--dh-color-primary); font-size: var(--dh-text-xl); margin-bottom: var(--dh-space-4); } .dh-card__title { font-size: var(--dh-text-xl); font-weight: var(--dh-weight-bold); margin-bottom: var(--dh-space-3); } .dh-card__body { color: var(--dh-color-text-muted); line-height: var(--dh-leading-normal); } .dh-card--dark .dh-card__body, .dh-card--glass .dh-card__body { color: rgba(255,255,255,0.87); /* WCAG 1.4.3: raised from 0.6 (~4.2:1 borderline) to 0.87 (~7:1) */ } /* --- Card variants (v1.9.0) --- */ .dh-card--media { padding: 0; overflow: hidden; } .dh-card--media .dh-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dh-color-dark-mid); } .dh-card--media .dh-card__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform var(--dh-duration-slow) var(--dh-ease-out); } .dh-card--media:hover .dh-card__media img { transform: scale(1.04); } .dh-card--media .dh-card__media::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity var(--dh-duration-base) var(--dh-ease-out); display: flex; align-items: center; justify-content: center; } .dh-card--media:hover .dh-card__media::after { opacity: 1; } .dh-card--media .dh-card__content { padding: var(--dh-space-5); } .dh-card--episode { display: flex; align-items: center; gap: var(--dh-space-4); padding: var(--dh-space-4); } .dh-card--episode .dh-card__thumb { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--dh-radius-md); -o-object-fit: cover; object-fit: cover; background: var(--dh-color-dark-mid); } .dh-card--episode .dh-card__content { flex: 1; min-width: 0; } .dh-card--episode .dh-card__action { flex-shrink: 0; } .dh-card--event { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; } .dh-card--event .dh-card__date { flex-shrink: 0; width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--dh-brand-primary); color: var(--dh-color-dark); padding: var(--dh-space-4) var(--dh-space-3); font-family: var(--dh-font-display); font-weight: var(--dh-weight-black); line-height: 1; gap: var(--dh-space-1); } .dh-card--event .dh-card__date-day { font-size: var(--dh-text-3xl); } .dh-card--event .dh-card__date-month { font-size: var(--dh-text-xs); text-transform: uppercase; letter-spacing: 0.1em; } .dh-card--event .dh-card__content { flex: 1; padding: var(--dh-space-4) var(--dh-space-5); min-width: 0; } .dh-testimonial { display: flex; flex-direction: column; gap: var(--dh-space-4); } .dh-testimonial__quote { font-size: var(--dh-text-lg); line-height: var(--dh-leading-snug); font-style: italic; font-family: var(--dh-font-display); } .dh-testimonial__quote::before { content: '\201C'; } .dh-testimonial__quote::after { content: '\201D'; } .dh-testimonial__author { display: flex; align-items: center; gap: var(--dh-space-3); } .dh-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; background: var(--dh-gradient-primary); } .dh-testimonial__name { font-weight: var(--dh-weight-semibold); font-size: var(--dh-text-sm); } .dh-testimonial__role { font-size: var(--dh-text-xs); color: var(--dh-color-text-muted); } /* --- Stars --- */ .dh-stars { display: flex; gap: 2px; color: #f59e0b; font-size: var(--dh-text-sm); } /* --- Pricing Card --- */ .dh-pricing { border-radius: var(--dh-radius-xl); padding: var(--dh-space-10); border: 2px solid var(--dh-color-border); background: var(--dh-color-white); position: relative; transition: transform var(--dh-duration-base) var(--dh-ease-out); } .dh-pricing:hover { transform: translateY(-4px); } .dh-pricing--featured { background: var(--dh-gradient-primary); border-color: transparent; color: var(--dh-color-white); transform: scale(1.03); } .dh-pricing--featured:hover { transform: scale(1.03) translateY(-4px); } .dh-pricing__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--dh-color-accent); color: var(--dh-color-white); font-size: var(--dh-text-xs); font-weight: var(--dh-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--dh-space-1) var(--dh-space-4); border-radius: var(--dh-radius-full); white-space: nowrap; } .dh-pricing__name { font-size: var(--dh-text-sm); font-weight: var(--dh-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--dh-space-4); opacity: 0.8; } .dh-pricing__price { display: flex; align-items: flex-start; gap: var(--dh-space-1); margin-bottom: var(--dh-space-6); } .dh-pricing__currency { font-size: var(--dh-text-xl); font-weight: var(--dh-weight-bold); padding-top: 6px; } .dh-pricing__amount { font-family: var(--dh-font-display); font-size: var(--dh-text-6xl); font-weight: var(--dh-weight-black); line-height: 1; } .dh-pricing__period { font-size: var(--dh-text-sm); opacity: 0.6; align-self: flex-end; padding-bottom: 8px; } .dh-pricing__features { list-style: none; display: flex; flex-direction: column; gap: var(--dh-space-3); margin-bottom: var(--dh-space-8); } .dh-pricing__features li { display: flex; align-items: center; gap: var(--dh-space-3); font-size: var(--dh-text-sm); } .dh-pricing__features li::before { content: '✓'; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.2); border-radius: 50%; font-size: 11px; flex-shrink: 0; } .dh-pricing:not(.dh-pricing--featured) .dh-pricing__features li::before { background: rgba(108, 71, 255, 0.1); color: var(--dh-color-primary); } /* --- Badge / Tag --- */ .dh-badge { display: inline-flex; align-items: center; padding: var(--dh-space-1) var(--dh-space-3); font-size: var(--dh-text-xs); font-weight: var(--dh-weight-semibold); border-radius: var(--dh-radius-full); background: rgba(108, 71, 255, 0.15); color: #3d1a8f; /* dark purple ~8:1 on light lavender bg */ } .dh-badge--accent { background: rgba(255,77,109,0.12); color: #8b1a2e; } .dh-badge--success { background: rgba(16,185,129,0.12); color: #065f46; } .dh-badge--warning { background: rgba(245,158,11,0.12); color: #78350f; } .dh-badge--dark { background: var(--dh-color-dark); color: var(--dh-color-white); } /* --- Stat / Metric --- */ .dh-stat { text-align: center; } .dh-stat__value { font-family: var(--dh-font-display); font-size: var(--dh-text-5xl); font-weight: var(--dh-weight-black); line-height: 1; background: var(--dh-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--dh-space-2); } .dh-stat__label { font-size: var(--dh-text-sm); color: var(--dh-color-text-muted); font-weight: var(--dh-weight-medium); } .dh-stat__change { font-size: var(--dh-text-xs); color: rgba(255,255,255,0.5); margin-top: var(--dh-space-1); } .dh-stat--primary { border: 1px solid rgba(0, 229, 160, 0.2); border-radius: var(--dh-radius-lg); padding: var(--dh-space-6); box-shadow: 0 0 24px rgba(0, 229, 160, 0.08); } /* --- Code components (v1.9.0) --- */ :root { --dh-code-bg: #1a1a2e; --dh-code-color: #86efac; --dh-code-color-block: #e2e8f0; --dh-code-border: rgba(255, 255, 255, 0.08); --dh-code-font: var(--dh-font-mono); } .dh-code { display: inline; background: var(--dh-code-bg); color: var(--dh-code-color); font-family: var(--dh-code-font); font-size: 0.85em; padding: 0.15em 0.45em; border-radius: 4px; border: 1px solid var(--dh-code-border); } .dh-code-block { position: relative; background: var(--dh-code-bg); color: var(--dh-code-color-block); font-family: var(--dh-code-font); font-size: var(--dh-text-sm); line-height: 1.75; padding: var(--dh-space-6); border-radius: var(--dh-radius-lg); border: 1px solid var(--dh-code-border); overflow-x: auto; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } .dh-code-block__header { display: flex; align-items: center; justify-content: space-between; font-size: var(--dh-text-xs); color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--dh-space-4); padding-bottom: var(--dh-space-3); border-bottom: 1px solid var(--dh-code-border); } .dh-code-block__copy { background: rgba(255,255,255,0.06); border: 1px solid var(--dh-code-border); color: rgba(255,255,255,0.6); font-size: var(--dh-text-xs); font-family: var(--dh-font-body); padding: var(--dh-space-1) var(--dh-space-3); border-radius: var(--dh-radius-sm); cursor: pointer; transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-code-block__copy:hover { background: rgba(255,255,255,0.12); color: var(--dh-color-white); } .dh-code-block__copy.is-copied { color: var(--dh-code-color); border-color: rgba(134, 239, 172, 0.3); } /* --- Video embed wrapper (v1.9.0) --- */ .dh-video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ overflow: hidden; border-radius: var(--dh-radius-lg); background: var(--dh-color-dark-mid); } .dh-video-wrapper iframe, .dh-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* ============================================ Scroll reveal, parallax, keyframes. All animations respect prefers-reduced-motion. ============================================ */ /* ============================================ Keyframes ============================================ */ @keyframes dh-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } @keyframes dh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes dh-fade-up { from { opacity: 0; transform: translateY(var(--dh-anim-distance)); } to { opacity: 1; transform: translateY(0); } } @keyframes dh-fade-down { from { opacity: 0; transform: translateY(calc(-1 * var(--dh-anim-distance))); } to { opacity: 1; transform: translateY(0); } } @keyframes dh-fade-left { from { opacity: 0; transform: translateX(var(--dh-anim-distance)); } to { opacity: 1; transform: translateX(0); } } @keyframes dh-fade-right { from { opacity: 0; transform: translateX(calc(-1 * var(--dh-anim-distance))); } to { opacity: 1; transform: translateX(0); } } @keyframes dh-zoom-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } @keyframes dh-flip-up { from { opacity: 0; transform: perspective(600px) rotateX(18deg) translateY(var(--dh-anim-distance)); } to { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0); } } @keyframes dh-bounce-in { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } 80% { transform: scale(0.97); } 100% { transform: scale(1); } } /* ============================================ Scroll Reveal System Usage: data-dh-reveal="[variant]" Variants: fade | slide-up | slide-down | slide-left | slide-right | zoom | flip Delay: data-dh-delay="200" (ms) Stagger: data-dh-stagger on container (auto-delays direct children) ============================================ */ [data-dh-reveal] { opacity: 0; transition: opacity var(--dh-anim-duration) var(--dh-ease-out), transform var(--dh-anim-duration) var(--dh-ease-out); will-change: opacity, transform; } [data-dh-reveal], [data-dh-reveal="slide-up"] { transform: translateY(var(--dh-anim-distance)); } [data-dh-reveal="fade"] { transform: none; } [data-dh-reveal="slide-down"] { transform: translateY(calc(-1 * var(--dh-anim-distance))); } [data-dh-reveal="slide-left"] { transform: translateX(var(--dh-anim-distance)); } [data-dh-reveal="slide-right"] { transform: translateX(calc(-1 * var(--dh-anim-distance))); } [data-dh-reveal="zoom"] { transform: scale(0.88); } [data-dh-reveal="flip"] { transform: perspective(600px) rotateX(18deg) translateY(var(--dh-anim-distance)); } [data-dh-reveal="left"] { transform: translateX(calc(-1 * var(--dh-anim-distance))); } [data-dh-reveal="right"] { transform: translateX(var(--dh-anim-distance)); } [data-dh-reveal="scale"] { transform: scale(0.92); } [data-dh-reveal].is-visible { opacity: 1; transform: none; } [data-dh-stagger] > [data-dh-reveal]:nth-child(1) { transition-delay: calc(var(--dh-anim-stagger) * 0); } [data-dh-stagger] > [data-dh-reveal]:nth-child(2) { transition-delay: calc(var(--dh-anim-stagger) * 1); } [data-dh-stagger] > [data-dh-reveal]:nth-child(3) { transition-delay: calc(var(--dh-anim-stagger) * 2); } [data-dh-stagger] > [data-dh-reveal]:nth-child(4) { transition-delay: calc(var(--dh-anim-stagger) * 3); } [data-dh-stagger] > [data-dh-reveal]:nth-child(5) { transition-delay: calc(var(--dh-anim-stagger) * 4); } [data-dh-stagger] > [data-dh-reveal]:nth-child(6) { transition-delay: calc(var(--dh-anim-stagger) * 5); } [data-dh-stagger] > [data-dh-reveal]:nth-child(7) { transition-delay: calc(var(--dh-anim-stagger) * 6); } [data-dh-stagger] > [data-dh-reveal]:nth-child(8) { transition-delay: calc(var(--dh-anim-stagger) * 7); } /* ============================================ Parallax Usage: data-dh-parallax on any element Speed: data-dh-parallax-speed="0.3" (0–1, default 0.4) Depth classes: .dh-parallax--slow | .dh-parallax--mid | .dh-parallax--fast CSS-native (Chrome 115+): scroll-driven animations JS fallback: DH.initParallax() handles everything else ============================================ */ [data-dh-parallax] { will-change: transform; } @supports (animation-timeline: scroll()) { [data-dh-parallax] { animation: dh-parallax-drift linear both; animation-timeline: scroll(root); animation-range: 0% 100%; } @keyframes dh-parallax-drift { from { transform: translateY(0); } to { transform: translateY(calc(var(--dh-parallax-offset, -80px))); } } [data-dh-parallax].dh-parallax--slow { --dh-parallax-offset: -40px; } [data-dh-parallax].dh-parallax--mid { --dh-parallax-offset: -80px; } [data-dh-parallax].dh-parallax--fast { --dh-parallax-offset: -140px; } } /* ============================================ Entrance animation utilities (class-based, no JS) Apply directly for immediate fire-on-load animations ============================================ */ .dh-animate-fade-up { animation: dh-fade-up var(--dh-anim-duration) var(--dh-ease-out) both; } .dh-animate-fade-down { animation: dh-fade-down var(--dh-anim-duration) var(--dh-ease-out) both; } .dh-animate-fade-left { animation: dh-fade-left var(--dh-anim-duration) var(--dh-ease-out) both; } .dh-animate-fade-right { animation: dh-fade-right var(--dh-anim-duration) var(--dh-ease-out) both; } .dh-animate-zoom-in { animation: dh-zoom-in var(--dh-anim-duration) var(--dh-ease-out) both; } .dh-animate-flip-up { animation: dh-flip-up var(--dh-anim-duration) var(--dh-ease-out) both; } .dh-animate-bounce-in { animation: dh-bounce-in var(--dh-anim-duration) var(--dh-ease-spring) both; } .dh-delay-100 { animation-delay: 100ms; } .dh-delay-200 { animation-delay: 200ms; } .dh-delay-300 { animation-delay: 300ms; } .dh-delay-400 { animation-delay: 400ms; } .dh-delay-500 { animation-delay: 500ms; } .dh-delay-600 { animation-delay: 600ms; } .dh-delay-800 { animation-delay: 800ms; } .dh-duration-fast { animation-duration: var(--dh-anim-duration-fast); } .dh-duration-slow { animation-duration: var(--dh-anim-duration-slow); } /* ============================================ Panel Swap — v1.8.1 Zoom-fade cross-dissolve between two content panels. Usage:
...
...
JS: DH.swapPanel(fromEl, toEl, onShown?) prefers-reduced-motion: instant swap, no animation. ============================================ */ .dh-swap { position: relative; } .dh-swap__panel { will-change: opacity, transform; } .dh-swap__panel:not(.is-active) { display: none; } /* --- Modal --- */ .dh-modal { position: fixed; inset: 0; z-index: var(--dh-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--dh-space-6); background: var(--dh-color-surface-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--dh-duration-base) var(--dh-ease-out); } .dh-modal.is-open { opacity: 1; pointer-events: auto; } .dh-modal__box { background: var(--dh-color-surface-raised); border-radius: var(--dh-modal-radius); padding: var(--dh-space-10); max-width: 560px; width: 100%; position: relative; transform: translateY(24px) scale(0.96); transition: transform var(--dh-duration-base) var(--dh-ease-out); box-shadow: var(--dh-shadow-xl); } .dh-modal.is-open .dh-modal__box { transform: none; } .dh-modal__close { position: absolute; top: var(--dh-space-4); right: var(--dh-space-4); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--dh-color-light); border: none; border-radius: 50%; cursor: pointer; font-size: var(--dh-text-lg); color: var(--dh-color-text-muted); transition: background var(--dh-duration-fast) var(--dh-ease-out); } .dh-modal__close:hover { background: var(--dh-color-border); } /* --- Modal Modifiers (v2.3.0) --- */ .dh-modal__box--sm { max-width: 400px; } .dh-modal__box--md { max-width: 560px; } .dh-modal__box--lg { max-width: 720px; } .dh-modal__box--xl { max-width: 960px; } .dh-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--dh-space-5) var(--dh-space-6); border-bottom: 1px solid var(--dh-color-border); gap: var(--dh-space-4); border-radius: var(--dh-modal-radius) var(--dh-modal-radius) 0 0; } .dh-modal__header--primary { background: var(--dh-color-primary); color: var(--dh-color-white); border-bottom-color: transparent; } .dh-modal__header--primary .dh-modal__close { background: rgba(255,255,255,0.15); color: var(--dh-color-white); } .dh-modal__header--primary .dh-modal__close:hover { background: rgba(255,255,255,0.25); } .dh-modal__body { padding: 0; } .dh-modal__body--padded { padding: var(--dh-space-6); } .dh-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--dh-space-3); padding: var(--dh-space-4) var(--dh-space-6); border-top: 1px solid var(--dh-color-border); background: var(--dh-color-light); border-radius: 0 0 var(--dh-modal-radius) var(--dh-modal-radius); } .dh-modal__footer--center { justify-content: center; } /* --- Countdown Timer --- */ .dh-countdown__inner { display: flex; align-items: center; gap: var(--dh-space-4); flex-wrap: wrap; justify-content: center; } .dh-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: var(--dh-space-1); min-width: 80px; } .dh-countdown__value { font-family: var(--dh-font-display); font-size: var(--dh-text-5xl); font-weight: var(--dh-weight-black); line-height: 1; background: var(--dh-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dh-countdown__label { font-size: var(--dh-text-xs); font-weight: var(--dh-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; } .dh-countdown__sep { font-size: var(--dh-text-3xl); font-weight: var(--dh-weight-black); opacity: 0.3; padding-bottom: var(--dh-space-4); color: var(--dh-color-primary); } .dh-countdown--inverse .dh-countdown__value { background: none; -webkit-text-fill-color: var(--dh-color-white); color: var(--dh-color-white); } .dh-countdown--inverse .dh-countdown__label, .dh-countdown--inverse .dh-countdown__sep { color: rgba(255,255,255,0.85); /* WCAG 1.4.3: raised from 0.5 (fail) to 0.85 */ } /* --- Tabs --- */ .dh-tabs__nav { display: flex; gap: var(--dh-space-2); border-bottom: 2px solid var(--dh-color-border); margin-bottom: var(--dh-space-8); overflow-x: auto; } .dh-tabs__nav button { padding: var(--dh-space-3) var(--dh-space-5); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-family: var(--dh-font-body); font-weight: var(--dh-weight-medium); font-size: var(--dh-text-sm); color: var(--dh-color-text-muted); cursor: pointer; white-space: nowrap; transition: color var(--dh-duration-fast) var(--dh-ease-out), border-color var(--dh-duration-fast) var(--dh-ease-out); } .dh-tabs__nav button.is-active { color: var(--dh-color-text); /* #1a1a2e = 9.24:1 on white — primary green (#00e5a0) was only 1.64:1 */ border-bottom-color: var(--dh-color-primary); /* green underline preserved for brand identity */ } [data-tab-panel] { display: none; } [data-tab-panel].is-active { display: block; animation: dh-fadein var(--dh-duration-base) var(--dh-ease-out); } /* --- Toast Notifications --- */ .dh-toast-container { position: fixed; bottom: var(--dh-space-6); right: var(--dh-space-6); z-index: var(--dh-z-toast); display: flex; flex-direction: column; gap: var(--dh-space-3); pointer-events: none; } .dh-toast { padding: var(--dh-space-3) var(--dh-space-5); background: var(--dh-color-dark); color: var(--dh-color-white); border-radius: var(--dh-radius-md); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); box-shadow: var(--dh-shadow-xl); opacity: 0; transform: translateX(20px); transition: opacity var(--dh-duration-base) var(--dh-ease-out), transform var(--dh-duration-base) var(--dh-ease-out); pointer-events: auto; max-width: 320px; } .dh-toast.is-visible { opacity: 1; transform: none; } .dh-toast--success { background: #059669; } .dh-toast--error { background: var(--dh-color-accent); } .dh-toast--warning { background: #d97706; } /* --- Keyframes --- */ @keyframes dh-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes dh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .dh-pulse { animation: dh-pulse 2s var(--dh-ease-inout) infinite; } /* --- Logo bar / Social proof strip --- */ .dh-logo-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--dh-space-8); opacity: 0.5; filter: grayscale(1); transition: opacity var(--dh-duration-base) var(--dh-ease-out); } .dh-logo-bar:hover { opacity: 0.7; } .dh-logo-bar img { height: 28px; width: auto; } /* ============================================ FAQ / ACCORDION COMPONENT ============================================ */ .dh-accordion { display: flex; flex-direction: column; gap: var(--dh-space-4); } .dh-accordion__item { border: 1px solid var(--dh-color-border); border-radius: var(--dh-radius-md); overflow: hidden; transition: box-shadow var(--dh-duration-base) var(--dh-ease-out); } .dh-accordion__item.is-open { box-shadow: var(--dh-shadow-md); } .dh-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--dh-space-5) var(--dh-space-6); background: transparent; border: none; font-size: var(--dh-text-lg); font-weight: var(--dh-weight-semibold); font-family: var(--dh-font-body); text-align: left; cursor: pointer; color: var(--dh-color-text); transition: background-color var(--dh-duration-fast) var(--dh-ease-out); } .dh-accordion__trigger:hover { background: var(--dh-color-light); } .dh-accordion__trigger:focus { outline: 2px solid var(--dh-color-primary); outline-offset: -2px; } .dh-accordion__icon { font-size: var(--dh-text-xl); transition: transform var(--dh-duration-base) var(--dh-ease-out); flex-shrink: 0; margin-left: var(--dh-space-4); } .dh-accordion__item.is-open .dh-accordion__icon { transform: rotate(180deg); } .dh-accordion__content { max-height: 0; overflow: hidden; transition: max-height var(--dh-duration-slow) var(--dh-ease-out); } .dh-accordion__item.is-open .dh-accordion__content { max-height: 2000px; } .dh-accordion__body { padding: 0 var(--dh-space-6) var(--dh-space-6); color: var(--dh-color-text-muted); line-height: var(--dh-leading-normal); } /* ============================================ VIDEO EMBED COMPONENT ============================================ */ .dh-video { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ background: var(--dh-color-dark); border-radius: var(--dh-radius-lg); overflow: hidden; cursor: pointer; } .dh-video--4-3 { padding-bottom: 75%; /* 4:3 aspect ratio */ } .dh-video--1-1 { padding-bottom: 100%; /* 1:1 square */ } .dh-video__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .dh-video__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); transition: background-color var(--dh-duration-base) var(--dh-ease-out); } .dh-video:hover .dh-video__overlay { background: rgba(0, 0, 0, 0.5); } .dh-video__play { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.95); border: none; border-radius: 50%; font-size: var(--dh-text-4xl); color: var(--dh-color-primary); cursor: pointer; transition: transform var(--dh-duration-base) var(--dh-ease-out); box-shadow: var(--dh-shadow-lg); } .dh-video:hover .dh-video__play { transform: scale(1.1); } .dh-video__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .dh-video.is-playing .dh-video__overlay { display: none; } /* ============================================ FORM VALIDATION ============================================ */ .dh-form--validated .dh-input, .dh-form--validated .dh-textarea { border-width: 2px; } .dh-form--validated .dh-input:valid, .dh-form--validated .dh-textarea:valid { border-color: #10b981; } .dh-form--validated .dh-input:invalid:not(:-moz-placeholder), .dh-form--validated .dh-textarea:invalid:not(:-moz-placeholder) { border-color: #ef4444; } .dh-form--validated .dh-input:invalid:not(:placeholder-shown), .dh-form--validated .dh-textarea:invalid:not(:placeholder-shown) { border-color: #ef4444; } .dh-form__error { display: none; font-size: var(--dh-text-sm); color: #ef4444; margin-top: var(--dh-space-2); } .dh-form__error.is-visible { display: block; } .dh-form__success { display: none; font-size: var(--dh-text-sm); color: #10b981; margin-top: var(--dh-space-2); } .dh-form__success.is-visible { display: block; } .dh-form--validated .dh-input:valid + .dh-form__success, .dh-form--validated .dh-textarea:valid + .dh-form__success { display: block; } .dh-form--validated .dh-input:invalid:not(:-moz-placeholder) + .dh-form__error, .dh-form--validated .dh-textarea:invalid:not(:-moz-placeholder) + .dh-form__error { display: block; } .dh-form--validated .dh-input:invalid:not(:placeholder-shown) + .dh-form__error, .dh-form--validated .dh-textarea:invalid:not(:placeholder-shown) + .dh-form__error { display: block; } /* ============================================ COMING SOON PAGE UTILITIES ============================================ */ .dh-coming-soon { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--dh-space-8); } .dh-coming-soon__content { max-width: 600px; } .dh-coming-soon__logo { max-width: 200px; margin-bottom: var(--dh-space-8); } .dh-coming-soon__title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: var(--dh-weight-black); margin-bottom: var(--dh-space-4); font-family: var(--dh-font-display); } .dh-coming-soon__subtitle { font-size: var(--dh-text-xl); color: var(--dh-color-text-muted); margin-bottom: var(--dh-space-12); } .dh-coming-soon__form { max-width: 400px; margin: 0 auto var(--dh-space-8); } .dh-coming-soon__social { display: flex; gap: var(--dh-space-4); justify-content: center; margin-top: var(--dh-space-8); } .dh-coming-soon__social a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dh-color-light); color: var(--dh-color-text); text-decoration: none; font-size: var(--dh-text-xl); transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-coming-soon__social a:hover { background: var(--dh-color-primary); color: white; transform: translateY(-2px); } /* ============================================ PHASE 1 COMPONENTS - DROPDOWNS ============================================ */ .dh-dropdown { position: relative; display: inline-block; } .dh-dropdown__trigger { cursor: pointer; } .dh-dropdown__content { position: absolute; top: 100%; left: 0; min-width: 200px; margin-top: var(--dh-space-2); padding: var(--dh-space-2) 0; background: white; border-radius: var(--dh-radius-md); box-shadow: var(--dh-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--dh-duration-fast) var(--dh-ease-out); z-index: 1000; } .dh-dropdown.is-open .dh-dropdown__content { opacity: 1; visibility: visible; transform: translateY(0); } .dh-dropdown__content a { display: block; padding: var(--dh-space-3) var(--dh-space-4); color: var(--dh-color-text); text-decoration: none; transition: background var(--dh-duration-fast); } .dh-dropdown__content a:hover { background: var(--dh-color-light); } /* ============================================ PHASE 1 COMPONENTS - LIGHTBOX ============================================ */ .dh-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity var(--dh-duration-normal) var(--dh-ease-out); } .dh-lightbox.is-open { opacity: 1; visibility: visible; } .dh-lightbox__content { max-width: 90vw; max-height: 90vh; position: relative; } .dh-lightbox__image { max-width: 100%; max-height: 85vh; display: block; border-radius: var(--dh-radius-md); } .dh-lightbox__caption { text-align: center; color: white; margin-top: var(--dh-space-4); font-size: var(--dh-text-base); } .dh-lightbox__close, .dh-lightbox__prev, .dh-lightbox__next { position: fixed; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3); color: white; font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all var(--dh-duration-fast); display: flex; align-items: center; justify-content: center; } .dh-lightbox__close:hover, .dh-lightbox__prev:hover, .dh-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .dh-lightbox__close { top: 20px; right: 20px; } .dh-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); } .dh-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); } .dh-lightbox__counter { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0, 0, 0, 0.5); padding: var(--dh-space-2) var(--dh-space-4); border-radius: var(--dh-radius-full); font-size: var(--dh-text-sm); } [data-dh-lightbox] { cursor: pointer; transition: opacity var(--dh-duration-fast); } [data-dh-lightbox]:hover { opacity: 0.9; } /* ============================================ PHASE 1 COMPONENTS - PROGRESS BARS ============================================ */ .dh-progress { position: relative; width: 100%; height: 8px; background: var(--dh-color-light); border-radius: var(--dh-radius-full); overflow: hidden; } .dh-progress__bar { height: 100%; width: 0; background: var(--dh-color-primary); border-radius: var(--dh-radius-full); transition: width var(--dh-duration-slow) var(--dh-ease-out); } .dh-progress__label { position: absolute; top: 50%; right: var(--dh-space-3); transform: translateY(-50%); font-size: var(--dh-text-xs); font-weight: var(--dh-weight-semibold); color: var(--dh-color-text); } .dh-progress--sm { height: 4px; } .dh-progress--lg { height: 16px; } .dh-progress--success .dh-progress__bar { background: var(--dh-color-success); } .dh-progress--warning .dh-progress__bar { background: var(--dh-color-warning); } .dh-progress--danger .dh-progress__bar { background: var(--dh-color-danger); } .dh-progress--striped .dh-progress__bar { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 1rem 1rem; } /* ============================================ PHASE 1 COMPONENTS - SKELETON LOADERS ============================================ */ .dh-skeleton { background: linear-gradient( 90deg, var(--dh-color-light) 25%, #f0f0f0 50%, var(--dh-color-light) 75% ); background-size: 200% 100%; animation: dh-skeleton-loading 1.5s ease-in-out infinite; border-radius: var(--dh-radius-sm); } @keyframes dh-skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .dh-skeleton--text { height: 1em; margin-bottom: 0.5em; } .dh-skeleton--text:last-child { width: 80%; } .dh-skeleton--title { height: 2em; margin-bottom: 1em; } .dh-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; } .dh-skeleton--avatar-lg { width: 80px; height: 80px; border-radius: 50%; } .dh-skeleton--card { height: 200px; width: 100%; } .dh-skeleton--button { height: 40px; width: 120px; } [data-dh-skeleton] { position: relative; overflow: hidden; } [data-dh-skeleton].dh-skeleton--loaded { opacity: 0; transition: opacity var(--dh-duration-normal); } [data-dh-skeleton].dh-skeleton--loaded * { animation: none; } /* ============================================ AUDIO PLAYER - SHARED STYLES ============================================ */ .dh-audio-player { position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .dh-audio-player audio { display: none; } /* ============================================ AUDIO PLAYER - CLASSIC (iPod Style) ============================================ */ .dh-audio-player--classic { width: 196px; background: linear-gradient(175deg, #1c1c1c 0%, #0d0d0d 40%, #1a1a1a 100%); border-radius: 22px; padding: 14px 14px 20px; box-shadow: 0 0 0 1px #3a3a3a, 0 0 0 2px #111, 0 2px 4px rgba(0,0,0,.6), 0 12px 40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5); } .dh-audio-player--classic::before { content: ''; position: absolute; inset: 2px; border-radius: 20px; background: repeating-linear-gradient( 90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px ); pointer-events: none; } .dh-ap-screen-shell { background: #000; border-radius: 10px; padding: 3px; margin-bottom: 14px; box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); } .dh-ap-screen { width: 100%; height: 130px; background: linear-gradient(180deg, #c4d4b4 0%, #b0c0a0 50%, #a8b898 100%); border-radius: 8px; position: relative; overflow: hidden; font-family: 'Courier New', monospace; } .dh-ap-screen::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 2px ); pointer-events: none; z-index: 10; } .dh-ap-screen-header { background: linear-gradient(180deg, #3a5f88 0%, #2d4a6b 100%); color: #c8dff0; font-size: 9px; font-weight: bold; letter-spacing: 0.5px; padding: 3px 6px; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; } .dh-ap-battery { display: flex; align-items: center; gap: 2px; } .dh-ap-battery-body { width: 16px; height: 7px; border: 1px solid #c8dff0; border-radius: 1px; position: relative; padding: 1px; } .dh-ap-battery-body::after { content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 2px; height: 3px; background: #c8dff0; border-radius: 0 1px 1px 0; } .dh-ap-battery-fill { height: 100%; width: 70%; background: #7fd87f; border-radius: 1px; } .dh-ap-now-playing { padding: 7px 8px 4px; } .dh-ap-label { font-size: 7px; color: #4a6040; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .dh-ap-marquee-wrap { overflow: hidden; width: 100%; } .dh-ap-track-title { font-size: 12px; color: #1a2a10; font-weight: bold; white-space: nowrap; display: inline-block; } .dh-ap-track-title.dh-ap-scrolling { animation: dh-ap-marquee 6s linear infinite; } @keyframes dh-ap-marquee { 0%, 30% { transform: translateX(0); } 70%, 100% { transform: translateX(var(--scroll-dist, -60px)); } } .dh-ap-track-artist { font-size: 9px; color: #3a5030; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-ap-track-album { font-size: 8px; color: #5a7050; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-ap-progress-area { padding: 5px 8px 2px; } .dh-ap-time-row { display: flex; justify-content: space-between; font-size: 8px; color: #3a5030; margin-bottom: 3px; } .dh-ap-progress-track { width: 100%; height: 5px; background: #8a9a78; border-radius: 3px; cursor: pointer; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); } .dh-ap-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #2d4a6b, #4a7aab); border-radius: 3px; transition: width 0.25s linear; position: relative; } .dh-ap-progress-fill::after { content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background: #2d4a6b; border: 1px solid #c8dff0; border-radius: 50%; } .dh-ap-status-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px 3px; } .dh-ap-track-num { font-size: 8px; color: #4a6040; } .dh-ap-play-icon { font-size: 9px; color: #2d4a6b; } .dh-ap-volume-row { display: flex; align-items: center; gap: 3px; padding: 0 8px 4px; } .dh-ap-vol-label { font-size: 7px; color: #4a6040; } .dh-ap-vol-track { flex: 1; height: 3px; background: #8a9a78; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,.3); } .dh-ap-vol-fill { height: 100%; width: 70%; background: #2d4a6b; border-radius: 2px; transition: width 0.15s; } .dh-ap-wheel-wrap { display: flex; justify-content: center; } .dh-ap-wheel { width: 138px; height: 138px; border-radius: 50%; background: linear-gradient(145deg, #2a2a2a 0%, #111 50%, #222 100%); box-shadow: 0 0 0 1px #444, 0 4px 16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.5); position: relative; cursor: pointer; } .dh-ap-wheel-label { position: absolute; color: #aaa; font-size: 7px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; font-family: var(--dh-font-body); cursor: pointer; transition: color 0.15s; } .dh-ap-wheel-label:hover { color: #fff; } .dh-ap-wheel-label--top { top: 9px; left: 50%; transform: translateX(-50%); } .dh-ap-wheel-label--bottom { bottom: 9px; left: 50%; transform: translateX(-50%); } .dh-ap-wheel-label--left { left: 9px; top: 50%; transform: translateY(-50%); } .dh-ap-wheel-label--right { right: 9px; top: 50%; transform: translateY(-50%); } .dh-ap-wheel-label--left span, .dh-ap-wheel-label--right span { font-size: 9px; } .dh-ap-center-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #2f2f2f, #111); box-shadow: 0 0 0 1px #444, inset 0 2px 4px rgba(255,255,255,.07), inset 0 -2px 4px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.7); cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; } .dh-ap-center-btn:active { transform: translate(-50%, -50%) scale(0.95); box-shadow: 0 0 0 1px #333, inset 0 2px 6px rgba(0,0,0,.8); } .dh-ap-wheel.dh-ap-flash::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,0.04); pointer-events: none; animation: dh-ap-flash 0.15s ease-out; } @keyframes dh-ap-flash { from { opacity: 1; } to { opacity: 0; } } .dh-ap-logo { text-align: center; margin-top: 10px; font-size: 9px; color: #444; letter-spacing: 2px; text-transform: uppercase; font-family: var(--dh-font-body); } .dh-ap-logo span { color: #666; } /* ============================================ AUDIO PLAYER - MODERN (Apple Music Style) ============================================ */ .dh-audio-player--modern { width: 320px; background: #1a1a1e; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06); animation: dh-ap-fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both; } @keyframes dh-ap-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .dh-ap-art-wrap { padding: 24px 28px 18px; } .dh-ap-art { width: 100%; aspect-ratio: 1; border-radius: 8px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08); transform: scale(1); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); } .dh-ap-art.dh-ap-playing { transform: scale(1.04); } .dh-ap-art-canvas { width: 100%; height: 100%; position: relative; overflow: hidden; } .dh-ap-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 30%, transparent 60%); pointer-events: none; } .dh-ap-art-theme-0 { background: linear-gradient(135deg, #1a0533 0%, #6b21a8 40%, #db2777 70%, #f97316 100%); } .dh-ap-art-theme-1 { background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } .dh-ap-art-theme-2 { background: linear-gradient(145deg, #0d1117 0%, #1e3a5f 45%, #0a84ff 100%); } .dh-ap-art-theme-3 { background: linear-gradient(130deg, #1a0a00 0%, #7c2d12 40%, #ea580c 75%, #fbbf24 100%); } .dh-ap-art-shape { position: absolute; border-radius: 50%; opacity: 0.25; background: rgba(255,255,255,0.08); } .dh-ap-trackinfo { padding: 0 28px 14px; } .dh-ap-track-name { font-size: 17px; font-weight: 600; color: #f5f5f7; letter-spacing: -0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-ap-track-sub { font-size: 14px; color: #ff6b35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-ap-scrubber-wrap { padding: 0 28px 10px; } .dh-ap-scrubber-track { width: 100%; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; cursor: pointer; position: relative; margin-bottom: 7px; } .dh-ap-scrubber-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff6b35, #ff9a5c); border-radius: 2px; position: relative; transition: width 0.25s linear; } .dh-ap-scrubber-thumb { position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: white; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.5); } .dh-ap-scrubber-times { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.2px; } .dh-ap-transport { padding: 4px 36px 14px; display: flex; align-items: center; justify-content: space-between; } .dh-ap-ctrl-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.12s, transform 0.1s; } .dh-ap-ctrl-btn:active { opacity: 0.4; transform: scale(0.88); } .dh-ap-ctrl-btn svg { width: 28px; height: 28px; fill: #f5f5f7; } .dh-ap-ctrl-btn--large svg { width: 54px; height: 54px; } .dh-ap-volume-wrap { padding: 0 28px 26px; display: flex; align-items: center; gap: 10px; } .dh-ap-vol-icon { font-size: 13px; color: rgba(255,255,255,0.55); flex-shrink: 0; width: 16px; text-align: center; line-height: 1; } .dh-ap-vol-slider { flex: 1; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; cursor: pointer; position: relative; } .dh-audio-player--modern .dh-ap-vol-fill { height: 100%; width: 70%; background: rgba(255,255,255,0.55); border-radius: 2px; transition: width 0.08s; position: relative; } .dh-audio-player--modern .dh-ap-vol-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } /* ============================================ ALERTS — v2.0.0 Persistent inline feedback. Replaces ephemeral toasts for in-page status messages (info / success / warning / error). ============================================ */ .dh-alert { display: flex; align-items: flex-start; gap: var(--dh-space-3); padding: var(--dh-space-4) var(--dh-space-5); border-radius: var(--dh-radius-md); border: 1px solid transparent; font-size: var(--dh-text-sm); line-height: var(--dh-leading-normal); position: relative; } .dh-alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.1em; } .dh-alert__body { flex: 1; } .dh-alert__title { font-weight: var(--dh-weight-semibold); margin-bottom: var(--dh-space-1); } .dh-alert__dismiss { flex-shrink: 0; background: none; border: none; cursor: pointer; opacity: 0.55; font-size: 1.125rem; line-height: 1; padding: 0; color: inherit; transition: opacity var(--dh-duration-fast) var(--dh-ease-out); } .dh-alert__dismiss:hover { opacity: 1; } .dh-alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } .dh-alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .dh-alert--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .dh-alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .dh-alert--accent { border-left-width: 4px; border-radius: 0 var(--dh-radius-md) var(--dh-radius-md) 0; } @keyframes dh-alert-out { to { opacity: 0; transform: translateY(-6px); max-height: 0; padding-block: 0; margin-bottom: 0; overflow: hidden; } } .dh-alert.is-dismissing { animation: dh-alert-out var(--dh-duration-slow) var(--dh-ease-in) forwards; } /* ============================================ TOOLTIPS — v2.0.0 Pure CSS. Add data-dh-tooltip="text" to any element. Position: data-dh-tooltip-pos="top|bottom|left|right" (default: top) ============================================ */ [data-dh-tooltip] { position: relative; } [data-dh-tooltip]::before, [data-dh-tooltip]::after { position: absolute; opacity: 0; pointer-events: none; transition: opacity var(--dh-duration-fast) var(--dh-ease-out), transform var(--dh-duration-fast) var(--dh-ease-out); z-index: var(--dh-z-toast); } [data-dh-tooltip]::before { content: attr(data-dh-tooltip); background: var(--dh-color-dark); color: var(--dh-color-white); font-size: var(--dh-text-xs); font-weight: var(--dh-weight-medium); white-space: nowrap; padding: var(--dh-space-1) var(--dh-space-3); border-radius: var(--dh-radius-sm); line-height: 1.5; } [data-dh-tooltip]::after { content: ''; border: 5px solid transparent; } [data-dh-tooltip]:not([data-dh-tooltip-pos])::before, [data-dh-tooltip][data-dh-tooltip-pos="top"]::before { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); } [data-dh-tooltip]:not([data-dh-tooltip-pos])::after, [data-dh-tooltip][data-dh-tooltip-pos="top"]::after { bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(4px); border-top-color: var(--dh-color-dark); } [data-dh-tooltip][data-dh-tooltip-pos="bottom"]::before { top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); } [data-dh-tooltip][data-dh-tooltip-pos="bottom"]::after { top: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(-4px); border-bottom-color: var(--dh-color-dark); } [data-dh-tooltip][data-dh-tooltip-pos="left"]::before { right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(4px); } [data-dh-tooltip][data-dh-tooltip-pos="left"]::after { right: calc(100% + 3px); top: 50%; transform: translateY(-50%) translateX(4px); border-left-color: var(--dh-color-dark); } [data-dh-tooltip][data-dh-tooltip-pos="right"]::before { left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-4px); } [data-dh-tooltip][data-dh-tooltip-pos="right"]::after { left: calc(100% + 3px); top: 50%; transform: translateY(-50%) translateX(-4px); border-right-color: var(--dh-color-dark); } [data-dh-tooltip]:hover::before, [data-dh-tooltip]:hover::after, [data-dh-tooltip]:focus-visible::before, [data-dh-tooltip]:focus-visible::after { opacity: 1; } [data-dh-tooltip]:not([data-dh-tooltip-pos]):hover::before, [data-dh-tooltip][data-dh-tooltip-pos="top"]:hover::before, [data-dh-tooltip]:not([data-dh-tooltip-pos]):focus-visible::before, [data-dh-tooltip][data-dh-tooltip-pos="top"]:focus-visible::before { transform: translateX(-50%) translateY(0); } [data-dh-tooltip]:not([data-dh-tooltip-pos]):hover::after, [data-dh-tooltip][data-dh-tooltip-pos="top"]:hover::after, [data-dh-tooltip]:not([data-dh-tooltip-pos]):focus-visible::after, [data-dh-tooltip][data-dh-tooltip-pos="top"]:focus-visible::after { transform: translateX(-50%) translateY(0); } [data-dh-tooltip][data-dh-tooltip-pos="bottom"]:hover::before, [data-dh-tooltip][data-dh-tooltip-pos="bottom"]:focus-visible::before { transform: translateX(-50%) translateY(0); } [data-dh-tooltip][data-dh-tooltip-pos="bottom"]:hover::after, [data-dh-tooltip][data-dh-tooltip-pos="bottom"]:focus-visible::after { transform: translateX(-50%) translateY(0); } [data-dh-tooltip][data-dh-tooltip-pos="left"]:hover::before, [data-dh-tooltip][data-dh-tooltip-pos="left"]:focus-visible::before { transform: translateY(-50%) translateX(0); } [data-dh-tooltip][data-dh-tooltip-pos="left"]:hover::after, [data-dh-tooltip][data-dh-tooltip-pos="left"]:focus-visible::after { transform: translateY(-50%) translateX(0); } [data-dh-tooltip][data-dh-tooltip-pos="right"]:hover::before, [data-dh-tooltip][data-dh-tooltip-pos="right"]:focus-visible::before { transform: translateY(-50%) translateX(0); } [data-dh-tooltip][data-dh-tooltip-pos="right"]:hover::after, [data-dh-tooltip][data-dh-tooltip-pos="right"]:focus-visible::after { transform: translateY(-50%) translateX(0); } /* ============================================ SPINNERS — v2.0.0 CSS-only ring spinners + button loading state. ============================================ */ @keyframes dh-spin { to { transform: rotate(360deg); } } .dh-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid var(--dh-color-border); border-top-color: var(--dh-color-primary); border-radius: 50%; animation: dh-spin 0.65s linear infinite; flex-shrink: 0; } .dh-spinner--sm { width: 1rem; height: 1rem; border-width: 2px; } .dh-spinner--lg { width: 2.25rem; height: 2.25rem; border-width: 3px; } .dh-spinner--xl { width: 3rem; height: 3rem; border-width: 3px; } .dh-spinner--accent { border-color: rgba(255,107,107,0.2); border-top-color: var(--dh-color-accent); } .dh-spinner--white { border-color: rgba(255,255,255,0.25); border-top-color: #fff; } .dh-spinner--dark { border-color: rgba(0,0,0,0.1); border-top-color: var(--dh-color-dark); } .dh-btn--loading { position: relative; color: transparent !important; pointer-events: none; } .dh-btn--loading::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: dh-spin 0.65s linear infinite; } /* ============================================ BREADCRUMBS — v2.0.0 Pure CSS nav trail. Separator via ::before. Override --dh-breadcrumb-sep for custom separator. ============================================ */ .dh-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; list-style: none; font-size: var(--dh-text-sm); color: var(--dh-color-text-muted); } .dh-breadcrumb__item { display: flex; align-items: center; } .dh-breadcrumb__item + .dh-breadcrumb__item::before { content: var(--dh-breadcrumb-sep, '/'); padding: 0 var(--dh-space-2); color: var(--dh-color-border-input); font-size: var(--dh-text-xs); } .dh-breadcrumb__link { color: var(--dh-color-text-muted); text-decoration: none; transition: color var(--dh-duration-fast) var(--dh-ease-out); } .dh-breadcrumb__link:hover { color: var(--dh-color-primary); } .dh-breadcrumb__item--active .dh-breadcrumb__link, .dh-breadcrumb__item--active span { color: var(--dh-color-text); font-weight: var(--dh-weight-medium); pointer-events: none; } .dh-breadcrumb--chevron .dh-breadcrumb__item + .dh-breadcrumb__item::before { content: '›'; font-size: var(--dh-text-base); padding: 0 var(--dh-space-1); } /* ============================================ PAGINATION — v2.0.0 Page navigation for lists, tables, search results. ============================================ */ .dh-pagination { display: flex; align-items: center; gap: var(--dh-space-1); list-style: none; } .dh-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--dh-space-2); border-radius: var(--dh-radius-md); border: 1px solid var(--dh-color-border); background: var(--dh-color-white); color: var(--dh-color-text); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); text-decoration: none; transition: all var(--dh-duration-fast) var(--dh-ease-out); cursor: pointer; } .dh-pagination__link:hover { background: var(--dh-color-light); border-color: var(--dh-color-primary); color: var(--dh-color-primary); } .dh-pagination__item--active .dh-pagination__link { background: var(--dh-color-primary); border-color: var(--dh-color-primary); color: var(--dh-color-dark); font-weight: var(--dh-weight-bold); pointer-events: none; } .dh-pagination__item--disabled .dh-pagination__link { opacity: 0.4; pointer-events: none; cursor: default; } .dh-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; color: var(--dh-color-text-muted); font-size: var(--dh-text-sm); } .dh-pagination--sm .dh-pagination__link { min-width: 1.75rem; height: 1.75rem; font-size: var(--dh-text-xs); } .dh-pagination--lg .dh-pagination__link { min-width: 2.75rem; height: 2.75rem; font-size: var(--dh-text-base); } /* ============================================ INPUT GROUPS — v2.0.0 Attach icons, text labels, or buttons to inputs. ============================================ */ .dh-input-group { display: flex; align-items: stretch; } .dh-input-group .dh-input, .dh-input-group .dh-select { flex: 1; border-radius: 0; min-width: 0; } .dh-input-group .dh-input:first-child, .dh-input-group .dh-select:first-child { border-radius: var(--dh-input-radius) 0 0 var(--dh-input-radius); } .dh-input-group .dh-input:last-child, .dh-input-group .dh-select:last-child { border-radius: 0 var(--dh-input-radius) var(--dh-input-radius) 0; } .dh-input-group__prepend, .dh-input-group__append { display: inline-flex; align-items: center; padding: 0 var(--dh-space-4); background: var(--dh-color-light); border: 1px solid var(--dh-color-border-input); color: var(--dh-color-text-muted); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); white-space: nowrap; line-height: 1; flex-shrink: 0; } .dh-input-group__prepend { border-right: none; border-radius: var(--dh-input-radius) 0 0 var(--dh-input-radius); } .dh-input-group__append { border-left: none; border-radius: 0 var(--dh-input-radius) var(--dh-input-radius) 0; } .dh-input-group > .dh-btn:first-child { border-radius: var(--dh-input-radius) 0 0 var(--dh-input-radius); border-right: none; } .dh-input-group > .dh-btn:last-child { border-radius: 0 var(--dh-input-radius) var(--dh-input-radius) 0; } /* ============================================ FLOATING LABELS — v2.0.0 Label slides up on focus or when input has content. Usage: add .dh-form__group--float to .dh-form__group ============================================ */ .dh-form__group--float { position: relative; } .dh-form__group--float .dh-input, .dh-form__group--float .dh-select, .dh-form__group--float .dh-textarea { padding-top: var(--dh-space-6); padding-bottom: var(--dh-space-2); } .dh-form__group--float .dh-form__label { position: absolute; top: 50%; left: var(--dh-space-4); transform: translateY(-50%); font-size: var(--dh-text-base); color: var(--dh-color-text-muted); pointer-events: none; transition: top var(--dh-duration-fast) var(--dh-ease-out), font-size var(--dh-duration-fast) var(--dh-ease-out), color var(--dh-duration-fast) var(--dh-ease-out); line-height: 1; margin: 0; } .dh-form__group--float:has(textarea) .dh-form__label { top: var(--dh-space-4); transform: none; } .dh-form__group--float .dh-input:not(:-moz-placeholder) ~ .dh-form__label, .dh-form__group--float .dh-textarea:not(:-moz-placeholder) ~ .dh-form__label { top: var(--dh-space-2); font-size: var(--dh-text-xs); color: var(--dh-color-primary); transform: none; font-weight: var(--dh-weight-semibold); } .dh-form__group--float .dh-input:focus ~ .dh-form__label, .dh-form__group--float .dh-input:not(:placeholder-shown) ~ .dh-form__label, .dh-form__group--float .dh-textarea:focus ~ .dh-form__label, .dh-form__group--float .dh-textarea:not(:placeholder-shown) ~ .dh-form__label, .dh-form__group--float .dh-select:focus ~ .dh-form__label { top: var(--dh-space-2); font-size: var(--dh-text-xs); color: var(--dh-color-primary); transform: none; font-weight: var(--dh-weight-semibold); } /* ============================================ CUSTOM CHECKBOX, RADIO & SWITCH — v2.0.0 Native hidden; custom indicator rendered via sibling CSS. Always place immediately before the indicator element. ============================================ */ .dh-check, .dh-radio, .dh-switch { display: inline-flex; align-items: center; gap: var(--dh-space-2); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: var(--dh-text-sm); color: var(--dh-color-text); } .dh-check__input, .dh-radio__input, .dh-switch__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .dh-check__box { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border: 2px solid var(--dh-color-border-input); border-radius: var(--dh-radius-sm); background: var(--dh-color-white); flex-shrink: 0; transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-check__box::after { content: ''; width: 0.3rem; height: 0.55rem; border: 2px solid transparent; border-top: none; border-left: none; transform: rotate(45deg) scale(0); transition: transform var(--dh-duration-fast) var(--dh-ease-spring); margin-top: -0.1rem; } .dh-check__input:checked ~ .dh-check__box, .dh-check:has(.dh-check__input:checked) .dh-check__box { background: var(--dh-color-primary); border-color: var(--dh-color-primary); } .dh-check__input:checked ~ .dh-check__box::after, .dh-check:has(.dh-check__input:checked) .dh-check__box::after { border-color: var(--dh-color-dark); transform: rotate(45deg) scale(1); } .dh-check__input:indeterminate ~ .dh-check__box { background: var(--dh-color-primary); border-color: var(--dh-color-primary); } .dh-check__input:indeterminate ~ .dh-check__box::after { width: 0.55rem; height: 0; border-right: none; border-color: var(--dh-color-dark); transform: rotate(0) scale(1); margin-top: 0; } .dh-radio__dot { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border: 2px solid var(--dh-color-border-input); border-radius: 50%; background: var(--dh-color-white); flex-shrink: 0; transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-radio__dot::after { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: transparent; transform: scale(0); transition: background var(--dh-duration-fast) var(--dh-ease-spring), transform var(--dh-duration-fast) var(--dh-ease-spring); } .dh-radio__input:checked ~ .dh-radio__dot, .dh-radio:has(.dh-radio__input:checked) .dh-radio__dot { border-color: var(--dh-color-primary); } .dh-radio__input:checked ~ .dh-radio__dot::after, .dh-radio:has(.dh-radio__input:checked) .dh-radio__dot::after { background: var(--dh-color-primary); transform: scale(1); } .dh-switch__track { display: inline-flex; align-items: center; width: 2.5rem; height: 1.375rem; border-radius: var(--dh-radius-full); background: var(--dh-color-border-input); padding: 2px; flex-shrink: 0; transition: background var(--dh-duration-fast) var(--dh-ease-out); } .dh-switch__track::after { content: ''; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: var(--dh-shadow-sm); transition: transform var(--dh-duration-fast) var(--dh-ease-spring); } .dh-switch__input:checked ~ .dh-switch__track, .dh-switch:has(.dh-switch__input:checked) .dh-switch__track { background: var(--dh-color-primary); } .dh-switch__input:checked ~ .dh-switch__track::after, .dh-switch:has(.dh-switch__input:checked) .dh-switch__track::after { transform: translateX(1.125rem); } .dh-check:has(.dh-check__input:disabled), .dh-radio:has(.dh-radio__input:disabled), .dh-switch:has(.dh-switch__input:disabled) { opacity: 0.45; cursor: not-allowed; } .dh-check__input:focus-visible ~ .dh-check__box, .dh-radio__input:focus-visible ~ .dh-radio__dot, .dh-switch__input:focus-visible ~ .dh-switch__track { outline: var(--dh-focus-ring-width) solid var(--dh-focus-ring-color); outline-offset: 2px; } /* ============================================ RANGE SLIDER — v2.0.0 Normalized cross-browser . ============================================ */ .dh-range { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--dh-radius-full); background: var(--dh-color-border); outline: none; cursor: pointer; accent-color: var(--dh-color-primary); } .dh-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--dh-radius-full); background: var(--dh-color-border); } .dh-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--dh-color-primary); border: none; box-shadow: var(--dh-shadow-sm); margin-top: -0.3rem; -webkit-transition: transform var(--dh-duration-fast) var(--dh-ease-spring), box-shadow var(--dh-duration-fast) var(--dh-ease-out); transition: transform var(--dh-duration-fast) var(--dh-ease-spring), box-shadow var(--dh-duration-fast) var(--dh-ease-out); } .dh-range::-webkit-slider-thumb:hover, .dh-range:focus::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(0, 229, 160, 0.25); } .dh-range::-moz-range-track { height: 6px; border-radius: var(--dh-radius-full); background: var(--dh-color-border); } .dh-range::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--dh-color-primary); border: none; box-shadow: var(--dh-shadow-sm); cursor: pointer; } .dh-range:focus-visible { outline: var(--dh-focus-ring-width) solid var(--dh-focus-ring-color); outline-offset: 3px; } .dh-range--sm { height: 3px; } .dh-range--lg { height: 10px; } .dh-range--accent { accent-color: var(--dh-color-accent); } .dh-range--accent::-webkit-slider-thumb { background: var(--dh-color-accent); } .dh-range--accent::-moz-range-thumb { background: var(--dh-color-accent); } /* ============================================ CAROUSEL — v2.0.0 Horizontal slide carousel with prev/next and dot indicators. JS: DH.initCarousel(). Supports data-dh-per-slide="2|3". ============================================ */ .dh-carousel { position: relative; overflow: hidden; border-radius: var(--dh-radius-lg); } .dh-carousel__track { display: flex; transition: transform var(--dh-duration-slow) var(--dh-ease-out); will-change: transform; } .dh-carousel__slide { flex: 0 0 100%; min-width: 0; } .dh-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--dh-z-raised); display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--dh-color-white); border: 1px solid var(--dh-color-border); color: var(--dh-color-text); font-size: 1rem; cursor: pointer; box-shadow: var(--dh-shadow-md); transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-carousel__btn:hover { background: var(--dh-color-primary); border-color: var(--dh-color-primary); color: var(--dh-color-dark); transform: translateY(-50%) scale(1.08); } .dh-carousel__btn--prev { left: var(--dh-space-4); } .dh-carousel__btn--next { right: var(--dh-space-4); } .dh-carousel__btn:disabled { opacity: 0.35; pointer-events: none; } .dh-carousel__dots { display: flex; justify-content: center; align-items: center; gap: var(--dh-space-2); padding: var(--dh-space-4) 0 0; } .dh-carousel__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: none; background: var(--dh-color-border); cursor: pointer; transition: all var(--dh-duration-fast) var(--dh-ease-out); padding: 0; } .dh-carousel__dot.is-active { background: var(--dh-color-primary); width: 1.25rem; border-radius: var(--dh-radius-full); } .dh-carousel--fade .dh-carousel__track { display: block; position: relative; } .dh-carousel--fade .dh-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dh-duration-slow) var(--dh-ease-out); pointer-events: none; } .dh-carousel--fade .dh-carousel__slide.is-active { position: relative; opacity: 1; pointer-events: auto; } .dh-carousel[data-dh-per-slide="2"] .dh-carousel__slide { flex: 0 0 50%; } .dh-carousel[data-dh-per-slide="3"] .dh-carousel__slide { flex: 0 0 33.333%; } @media (max-width: 768px) { .dh-carousel[data-dh-per-slide="2"] .dh-carousel__slide, .dh-carousel[data-dh-per-slide="3"] .dh-carousel__slide { flex: 0 0 100%; } } /* ============================================ BACK TO TOP — v2.1.0 Fixed button that appears after scrolling. DH.initBackToTop(). ============================================ */ .dh-back-to-top { position: fixed; bottom: var(--dh-space-6); right: var(--dh-space-6); z-index: var(--dh-z-toast); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--dh-color-primary); color: var(--dh-color-dark); border: none; cursor: pointer; box-shadow: var(--dh-shadow-lg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dh-duration-base) var(--dh-ease-out), transform var(--dh-duration-base) var(--dh-ease-out), background var(--dh-duration-fast) var(--dh-ease-out), box-shadow var(--dh-duration-fast) var(--dh-ease-out); } .dh-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .dh-back-to-top:hover { background: var(--dh-color-primary-dark); box-shadow: var(--dh-shadow-xl), var(--dh-shadow-glow); transform: translateY(-2px); } .dh-back-to-top:active { transform: translateY(0); } .dh-back-to-top svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .dh-back-to-top--pill { border-radius: var(--dh-radius-full); width: auto; padding: 0 var(--dh-space-4); gap: var(--dh-space-2); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-semibold); } /* ============================================ FLOATING PILL NAV — v2.1.0 Compact centred pill nav that appears after scrolling past hero. DH.initNavPill(). Works with data-dh-scrollspy. ============================================ */ .dh-nav-pill { position: fixed; top: var(--dh-space-5); left: 50%; transform: translateX(-50%) translateY(-120%); z-index: var(--dh-z-sticky); display: inline-flex; align-items: center; gap: var(--dh-space-1); padding: var(--dh-space-2) var(--dh-space-3); background: rgba(8, 10, 15, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--dh-color-border-light); border-radius: var(--dh-radius-full); box-shadow: var(--dh-shadow-lg); opacity: 0; pointer-events: none; transition: transform var(--dh-duration-slow) var(--dh-ease-spring), opacity var(--dh-duration-base) var(--dh-ease-out); white-space: nowrap; } .dh-nav-pill.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .dh-nav-pill__link { display: inline-flex; align-items: center; gap: var(--dh-space-2); padding: var(--dh-space-2) var(--dh-space-3); border-radius: var(--dh-radius-full); color: rgba(255, 255, 255, 0.7); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); text-decoration: none; transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav-pill__link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .dh-nav-pill__link.is-active { color: var(--dh-color-dark); background: var(--dh-color-primary); font-weight: var(--dh-weight-semibold); } .dh-nav-pill__brand { display: inline-flex; align-items: center; padding: 0 var(--dh-space-2) 0 var(--dh-space-1); margin-right: var(--dh-space-1); border-right: 1px solid var(--dh-color-border-light); color: #fff; font-size: var(--dh-text-sm); font-weight: var(--dh-weight-bold); text-decoration: none; gap: var(--dh-space-2); } .dh-nav-pill__cta { margin-left: var(--dh-space-1); } .dh-nav-pill__divider { width: 1px; height: 1.25rem; background: var(--dh-color-border-light); flex-shrink: 0; } /* ============================================ STEPPER / WIZARD NAV — v2.1.0 Multi-step navigation for forms, onboarding, checkout. DH.initStepper(). Horizontal + vertical variants. ============================================ */ .dh-stepper { display: flex; align-items: flex-start; gap: 0; counter-reset: dh-step; } .dh-stepper--horizontal { flex-direction: row; } .dh-stepper--vertical { flex-direction: column; align-items: stretch; } .dh-stepper__step { display: flex; flex: 1; align-items: center; position: relative; } .dh-stepper--vertical .dh-stepper__step { flex: none; flex-direction: column; align-items: flex-start; } .dh-stepper__step::after { content: ''; flex: 1; height: 2px; background: var(--dh-color-border); transition: background var(--dh-duration-slow) var(--dh-ease-out); } .dh-stepper__step:last-child::after { display: none; } .dh-stepper--vertical .dh-stepper__step::after { position: absolute; left: 1.125rem; top: 2.5rem; width: 2px; height: calc(100% - 2.5rem + var(--dh-space-4)); flex: none; } .dh-stepper__step--completed::after { background: var(--dh-color-primary); } .dh-stepper__inner { display: flex; flex-direction: column; align-items: center; gap: var(--dh-space-2); flex-shrink: 0; } .dh-stepper--vertical .dh-stepper__inner { flex-direction: row; align-items: center; padding-bottom: var(--dh-space-8); } .dh-stepper__indicator { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--dh-color-border); background: var(--dh-color-white); color: var(--dh-color-text-muted); font-size: var(--dh-text-sm); font-weight: var(--dh-weight-bold); font-family: var(--dh-font-display); flex-shrink: 0; transition: all var(--dh-duration-base) var(--dh-ease-out); position: relative; z-index: 1; } .dh-stepper__indicator[data-step]::before { content: attr(data-step); } .dh-stepper__step--active .dh-stepper__indicator { border-color: var(--dh-color-primary); background: var(--dh-color-primary); color: var(--dh-color-dark); box-shadow: 0 0 0 4px rgba(0, 229, 160, 0.2); } .dh-stepper__step--completed .dh-stepper__indicator { border-color: var(--dh-color-primary); background: var(--dh-color-primary); color: var(--dh-color-dark); } .dh-stepper__step--completed .dh-stepper__indicator::after { content: ''; width: 0.45rem; height: 0.75rem; border: 2px solid var(--dh-color-dark); border-top: none; border-left: none; transform: rotate(45deg); margin-top: -0.2rem; } .dh-stepper__step--error .dh-stepper__indicator { border-color: var(--dh-color-accent); background: var(--dh-color-accent); color: #fff; } .dh-stepper__label { font-size: var(--dh-text-xs); font-weight: var(--dh-weight-semibold); color: var(--dh-color-text-muted); text-align: center; white-space: nowrap; transition: color var(--dh-duration-base) var(--dh-ease-out); } .dh-stepper__step--active .dh-stepper__label { color: var(--dh-color-primary); } .dh-stepper__step--completed .dh-stepper__label { color: var(--dh-color-text); } .dh-stepper__step--error .dh-stepper__label { color: var(--dh-color-accent); } .dh-stepper__desc { font-size: var(--dh-text-xs); color: var(--dh-color-text-muted); text-align: center; margin-top: var(--dh-space-1); } .dh-stepper--vertical .dh-stepper__desc { text-align: left; } .dh-stepper--sm .dh-stepper__indicator { width: 1.75rem; height: 1.75rem; font-size: var(--dh-text-xs); } .dh-stepper--lg .dh-stepper__indicator { width: 3rem; height: 3rem; font-size: var(--dh-text-base); } .dh-stepper__panels { margin-top: var(--dh-space-8); } .dh-stepper__panel { display: none; } .dh-stepper__panel.is-active { display: block; } .dh-stepper__actions { display: flex; gap: var(--dh-space-3); margin-top: var(--dh-space-6); } /* ============================================ FULL-SCREEN OVERLAY NAV — v2.1.0 Full-viewport menu for creative / portfolio sites. DH.initNavOverlay(). Triggered via data-dh-nav-overlay-open. ============================================ */ .dh-nav-overlay { position: fixed; inset: 0; z-index: var(--dh-z-modal); background: var(--dh-color-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dh-duration-slow) var(--dh-ease-out), visibility var(--dh-duration-slow); } .dh-nav-overlay.is-open { opacity: 1; visibility: visible; } .dh-nav-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 229, 160, 0.08), transparent 70%); pointer-events: none; } .dh-nav-overlay__close { position: absolute; top: var(--dh-space-6); right: var(--dh-space-6); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--dh-color-border-light); background: transparent; color: var(--dh-color-white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; transition: all var(--dh-duration-fast) var(--dh-ease-out); opacity: 0; transform: rotate(-90deg); transition: opacity var(--dh-duration-slow) var(--dh-ease-out) 0.15s, transform var(--dh-duration-slow) var(--dh-ease-spring) 0.15s, background var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav-overlay.is-open .dh-nav-overlay__close { opacity: 1; transform: rotate(0deg); } .dh-nav-overlay__close:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--dh-color-primary); } .dh-nav-overlay__links { list-style: none; text-align: center; display: flex; flex-direction: column; gap: var(--dh-space-2); } .dh-nav-overlay__link { display: block; font-family: var(--dh-font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--dh-weight-bold); color: rgba(255, 255, 255, 0.6); text-decoration: none; letter-spacing: -0.02em; line-height: 1.15; transition: color var(--dh-duration-fast) var(--dh-ease-out); opacity: 0; transform: translateY(20px); transition: color var(--dh-duration-fast) var(--dh-ease-out), opacity var(--dh-duration-base) var(--dh-ease-out), transform var(--dh-duration-base) var(--dh-ease-spring); } .dh-nav-overlay.is-open .dh-nav-overlay__link { opacity: 1; transform: translateY(0); } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(1) .dh-nav-overlay__link { transition-delay: 0.08s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(2) .dh-nav-overlay__link { transition-delay: 0.13s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(3) .dh-nav-overlay__link { transition-delay: 0.18s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(4) .dh-nav-overlay__link { transition-delay: 0.23s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(5) .dh-nav-overlay__link { transition-delay: 0.28s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(6) .dh-nav-overlay__link { transition-delay: 0.33s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(7) .dh-nav-overlay__link { transition-delay: 0.38s; } .dh-nav-overlay.is-open .dh-nav-overlay__links li:nth-child(8) .dh-nav-overlay__link { transition-delay: 0.43s; } .dh-nav-overlay__link:hover { color: var(--dh-color-primary); } .dh-nav-overlay__link.is-active { color: var(--dh-color-primary); } .dh-nav-overlay__footer { position: absolute; bottom: var(--dh-space-8); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: var(--dh-space-6); flex-wrap: wrap; padding: 0 var(--dh-space-6); opacity: 0; transition: opacity var(--dh-duration-slow) var(--dh-ease-out) 0.35s; } .dh-nav-overlay.is-open .dh-nav-overlay__footer { opacity: 1; } .dh-nav-overlay__footer-link { color: rgba(255, 255, 255, 0.4); text-decoration: none; font-size: var(--dh-text-sm); transition: color var(--dh-duration-fast) var(--dh-ease-out); } .dh-nav-overlay__footer-link:hover { color: var(--dh-color-primary); } /* ============================================ STICKY TABLE OF CONTENTS — v2.1.0 Fixed side nav powered by data-dh-scrollspy. No extra JS — uses DH.initScrollspy(). ============================================ */ .dh-toc { position: sticky; top: var(--dh-space-24); max-height: calc(100vh - var(--dh-space-24) - var(--dh-space-8)); overflow-y: auto; font-size: var(--dh-text-sm); scrollbar-width: thin; scrollbar-color: var(--dh-color-border) transparent; } .dh-toc__title { font-size: var(--dh-text-xs); font-weight: var(--dh-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--dh-color-text-muted); margin-bottom: var(--dh-space-3); } .dh-toc__list { list-style: none; display: flex; flex-direction: column; gap: 0; border-left: 2px solid var(--dh-color-border); } .dh-toc__item { display: flex; } .dh-toc__list .dh-toc__list { border-left: none; padding-left: var(--dh-space-4); margin-top: 0; } .dh-toc__link { display: block; padding: var(--dh-space-2) var(--dh-space-4); color: var(--dh-color-text-muted); text-decoration: none; line-height: var(--dh-leading-snug); border-left: 2px solid transparent; margin-left: -2px; transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-toc__link:hover { color: var(--dh-color-primary); } .dh-toc__link.is-active, .dh-toc__item.is-active .dh-toc__link { color: var(--dh-color-primary); border-left-color: var(--dh-color-primary); font-weight: var(--dh-weight-semibold); } /* ============================================ BOTTOM TAB BAR — v2.1.0 Fixed mobile-only bottom navigation. Hidden on screens wider than 768px. ============================================ */ .dh-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--dh-z-sticky); display: flex; align-items: stretch; background: var(--dh-color-white); border-top: 1px solid var(--dh-color-border); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); } @media (min-width: 769px) { .dh-tab-bar { display: none; } } .dh-tab-bar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--dh-space-2) var(--dh-space-1); min-height: 3.5rem; text-decoration: none; color: var(--dh-color-text-muted); font-size: var(--dh-text-xs); font-weight: var(--dh-weight-medium); border: none; background: none; cursor: pointer; transition: color var(--dh-duration-fast) var(--dh-ease-out); position: relative; } .dh-tab-bar__item:hover { color: var(--dh-color-primary); } .dh-tab-bar__item.is-active { color: var(--dh-color-primary); font-weight: var(--dh-weight-semibold); } .dh-tab-bar__icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dh-tab-bar__label { line-height: 1; white-space: nowrap; } .dh-tab-bar__item.is-active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2.5rem; height: 3px; background: var(--dh-color-primary); border-radius: 0 0 var(--dh-radius-full) var(--dh-radius-full); } .dh-tab-bar__badge { position: absolute; top: var(--dh-space-2); left: calc(50% + 0.5rem); min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: var(--dh-radius-full); background: var(--dh-color-accent); color: #fff; font-size: 0.625rem; font-weight: var(--dh-weight-bold); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* ============================================ COMMAND PALETTE — v2.1.0 Cmd+K / Ctrl+K search/action overlay. DH.initCommandPalette(). Keyboard navigable. ============================================ */ .dh-cmd-backdrop { position: fixed; inset: 0; z-index: var(--dh-z-modal); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--dh-duration-base) var(--dh-ease-out), visibility var(--dh-duration-base); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .dh-cmd-backdrop.is-open { opacity: 1; visibility: visible; } .dh-cmd-palette { width: 100%; max-width: 600px; margin: 0 var(--dh-space-4); background: var(--dh-color-white); border-radius: var(--dh-radius-xl); box-shadow: var(--dh-shadow-xl); overflow: hidden; transform: scale(0.96) translateY(-8px); transition: transform var(--dh-duration-base) var(--dh-ease-spring); } .dh-cmd-backdrop.is-open .dh-cmd-palette { transform: scale(1) translateY(0); } .dh-cmd-palette__search { display: flex; align-items: center; gap: var(--dh-space-3); padding: var(--dh-space-4) var(--dh-space-5); border-bottom: 1px solid var(--dh-color-border); } .dh-cmd-palette__icon { width: 1.25rem; height: 1.25rem; color: var(--dh-color-text-muted); flex-shrink: 0; } .dh-cmd-palette__input { flex: 1; border: none; outline: none; font-size: var(--dh-text-base); font-family: var(--dh-font-body); color: var(--dh-color-text); background: transparent; caret-color: var(--dh-color-primary); } .dh-cmd-palette__input::-moz-placeholder { color: var(--dh-color-text-muted); } .dh-cmd-palette__input::placeholder { color: var(--dh-color-text-muted); } .dh-cmd-palette__kbd { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; } .dh-cmd-palette__kbd kbd { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: var(--dh-radius-sm); background: var(--dh-color-light); border: 1px solid var(--dh-color-border); font-size: var(--dh-text-xs); font-family: var(--dh-font-mono); color: var(--dh-color-text-muted); line-height: 1.4; } .dh-cmd-palette__results { max-height: 22rem; overflow-y: auto; padding: var(--dh-space-2) 0; scrollbar-width: thin; scrollbar-color: var(--dh-color-border) transparent; } .dh-cmd-palette__group { padding: var(--dh-space-2) var(--dh-space-5) var(--dh-space-1); font-size: var(--dh-text-xs); font-weight: var(--dh-weight-semibold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--dh-color-text-muted); } .dh-cmd-palette__item { display: flex; align-items: center; gap: var(--dh-space-3); padding: var(--dh-space-3) var(--dh-space-5); cursor: pointer; transition: background var(--dh-duration-fast) var(--dh-ease-out); text-decoration: none; color: var(--dh-color-text); } .dh-cmd-palette__item:hover, .dh-cmd-palette__item.is-focused { background: var(--dh-color-light); } .dh-cmd-palette__item.is-focused { background: rgba(0, 229, 160, 0.08); } .dh-cmd-palette__item-icon { width: 2rem; height: 2rem; border-radius: var(--dh-radius-md); background: var(--dh-color-light); border: 1px solid var(--dh-color-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.875rem; } .dh-cmd-palette__item-body { flex: 1; min-width: 0; } .dh-cmd-palette__item-title { font-size: var(--dh-text-sm); font-weight: var(--dh-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-cmd-palette__item-desc { font-size: var(--dh-text-xs); color: var(--dh-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-cmd-palette__item-shortcut { flex-shrink: 0; display: flex; gap: 2px; } .dh-cmd-palette__item-shortcut kbd { padding: 2px 5px; border-radius: var(--dh-radius-sm); background: var(--dh-color-light); border: 1px solid var(--dh-color-border); font-size: var(--dh-text-xs); font-family: var(--dh-font-mono); color: var(--dh-color-text-muted); line-height: 1.4; } .dh-cmd-palette__empty { padding: var(--dh-space-10) var(--dh-space-5); text-align: center; color: var(--dh-color-text-muted); font-size: var(--dh-text-sm); } .dh-cmd-palette__footer { display: flex; align-items: center; gap: var(--dh-space-4); padding: var(--dh-space-3) var(--dh-space-5); border-top: 1px solid var(--dh-color-border); background: var(--dh-color-light); font-size: var(--dh-text-xs); color: var(--dh-color-text-muted); } .dh-cmd-palette__hint { display: inline-flex; align-items: center; gap: var(--dh-space-1); } /* ============================================================ DARK MODE — v1.6.0 Activated by: 1. @media (prefers-color-scheme: dark) — automatic / system 2. .dh-dark on or — manual / JS toggle Both approaches set the same semantic token overrides. ============================================================ */ @mixin dark-tokens { --dh-color-bg: #080a0f; --dh-color-bg-soft: #0e1118; --dh-color-bg-mid: #141720; --dh-color-surface: #1a1d2e; --dh-color-surface-mid: #1f2335; --dh-color-text: #e8eaf0; --dh-color-text-muted: #9ba3bc; /* WCAG 1.4.3: ~6:1 on dark surface */ --dh-color-text-inverse: #1a1a2e; --dh-color-border: rgba(255, 255, 255, 0.08); --dh-color-border-light: rgba(255, 255, 255, 0.05); --dh-color-border-mid: rgba(255, 255, 255, 0.12); } /* --- System preference (automatic) --- */ @media (prefers-color-scheme: dark) { :root { --dh-color-bg: #080a0f; --dh-color-bg-soft: #0e1118; --dh-color-bg-mid: #141720; --dh-color-surface: #1a1d2e; --dh-color-surface-mid: #1f2335; --dh-color-text: #e8eaf0; --dh-color-text-muted: #9ba3bc; /* WCAG 1.4.3: ~6:1 on dark surface */ --dh-color-text-inverse: #1a1a2e; --dh-color-border: rgba(255, 255, 255, 0.08); --dh-color-border-light: rgba(255, 255, 255, 0.05); --dh-color-border-mid: rgba(255, 255, 255, 0.12); } body { background: var(--dh-color-bg); color: var(--dh-color-text); } .dh-card { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-input, .dh-textarea, .dh-select { background: var(--dh-color-surface); color: var(--dh-color-text); border-color: var(--dh-color-border-mid); } .dh-input::-moz-placeholder, .dh-textarea::-moz-placeholder { color: var(--dh-color-text-muted); } .dh-input::placeholder, .dh-textarea::placeholder { color: var(--dh-color-text-muted); } .dh-nav { background: rgba(8, 10, 15, 0.95); } .dh-nav.is-scrolled { background: rgba(8, 10, 15, 0.98); } .dh-pricing { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-testimonial { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-accordion__item { border-color: var(--dh-color-border); } .dh-accordion__trigger { color: var(--dh-color-text); } .dh-dropdown__content { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border-mid); } .dh-dropdown__content a { color: var(--dh-color-text); } .dh-dropdown__content a:hover { background: var(--dh-color-bg-mid); } .dh-tabs__nav { border-color: var(--dh-color-border); } .dh-tabs__nav button { color: var(--dh-color-text-muted); } .dh-tabs__nav button.is-active { color: var(--dh-color-primary); } .dh-progress { background: rgba(255, 255, 255, 0.08); } .dh-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75% ); } pre, code { background: var(--dh-color-surface); color: var(--dh-color-text); } .dh-alert--info { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: #93c5fd; } .dh-alert--success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #86efac; } .dh-alert--warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fcd34d; } .dh-alert--error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #fca5a5; } .dh-pagination__link { background: var(--dh-color-surface); border-color: var(--dh-color-border); color: var(--dh-color-text); } .dh-pagination__link:hover { background: var(--dh-color-surface-mid); } .dh-input-group__prepend, .dh-input-group__append { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border-mid); color: var(--dh-color-text-muted); } .dh-check__box, .dh-radio__dot { background: var(--dh-color-surface); border-color: var(--dh-color-border-mid); } .dh-switch__track { background: var(--dh-color-border-mid); } .dh-carousel__btn { background: var(--dh-color-surface); border-color: var(--dh-color-border); color: var(--dh-color-text); } .dh-carousel__dot { background: var(--dh-color-border); } .dh-stepper__indicator { background: var(--dh-color-surface); border-color: var(--dh-color-border-mid); color: var(--dh-color-text-muted); } .dh-stepper__step::after { background: var(--dh-color-border); } .dh-tab-bar { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-cmd-palette { background: var(--dh-color-surface); } .dh-cmd-palette__search { border-color: var(--dh-color-border); } .dh-cmd-palette__input { color: var(--dh-color-text); } .dh-cmd-palette__item:hover, .dh-cmd-palette__item.is-focused { background: var(--dh-color-surface-mid); } .dh-cmd-palette__item-icon { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border); } .dh-cmd-palette__item-shortcut kbd, .dh-cmd-palette__kbd kbd { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border-mid); color: var(--dh-color-text-muted); } .dh-cmd-palette__footer { background: var(--dh-color-bg-soft); border-color: var(--dh-color-border); } .dh-toc__list { border-color: var(--dh-color-border); } } /* --- Manual toggle (.dh-dark on or ) --- */ .dh-dark { --dh-color-bg: #080a0f; --dh-color-bg-soft: #0e1118; --dh-color-bg-mid: #141720; --dh-color-surface: #1a1d2e; --dh-color-surface-mid: #1f2335; --dh-color-text: #e8eaf0; --dh-color-text-muted: #9ba3bc; /* WCAG 1.4.3: ~6:1 on dark surface */ --dh-color-text-inverse: #1a1a2e; --dh-color-border: rgba(255, 255, 255, 0.08); --dh-color-border-light: rgba(255, 255, 255, 0.05); --dh-color-border-mid: rgba(255, 255, 255, 0.12); background: var(--dh-color-bg); color: var(--dh-color-text); color-scheme: dark; } .dh-dark .dh-card { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-dark .dh-input, .dh-dark .dh-textarea, .dh-dark .dh-select { background: var(--dh-color-surface); color: var(--dh-color-text); border-color: var(--dh-color-border-mid); } .dh-dark .dh-input::-moz-placeholder, .dh-dark .dh-textarea::-moz-placeholder { color: var(--dh-color-text-muted); } .dh-dark .dh-input::placeholder, .dh-dark .dh-textarea::placeholder { color: var(--dh-color-text-muted); } .dh-dark .dh-nav { background: rgba(8, 10, 15, 0.95); } .dh-dark .dh-nav.is-scrolled { background: rgba(8, 10, 15, 0.98); } .dh-dark .dh-pricing { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-dark .dh-testimonial { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-dark .dh-accordion__item { border-color: var(--dh-color-border); } .dh-dark .dh-accordion__trigger { color: var(--dh-color-text); } .dh-dark .dh-dropdown__content { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border-mid); } .dh-dark .dh-dropdown__content a { color: var(--dh-color-text); } .dh-dark .dh-dropdown__content a:hover { background: var(--dh-color-bg-mid); } .dh-dark .dh-tabs__nav { border-color: var(--dh-color-border); } .dh-dark .dh-tabs__nav button { color: var(--dh-color-text-muted); } .dh-dark .dh-tabs__nav button.is-active { color: var(--dh-color-primary); } .dh-dark .dh-progress { background: rgba(255, 255, 255, 0.08); } .dh-dark .dh-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75% ); } .dh-dark pre, .dh-dark code { background: var(--dh-color-surface); color: var(--dh-color-text); } .dh-dark .dh-alert--info { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: #93c5fd; } .dh-dark .dh-alert--success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #86efac; } .dh-dark .dh-alert--warning { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fcd34d; } .dh-dark .dh-alert--error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #fca5a5; } .dh-dark .dh-pagination__link { background: var(--dh-color-surface); border-color: var(--dh-color-border); color: var(--dh-color-text); } .dh-dark .dh-pagination__link:hover { background: var(--dh-color-surface-mid); } .dh-dark .dh-input-group__prepend, .dh-dark .dh-input-group__append { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border-mid); color: var(--dh-color-text-muted); } .dh-dark .dh-check__box, .dh-dark .dh-radio__dot { background: var(--dh-color-surface); border-color: var(--dh-color-border-mid); } .dh-dark .dh-switch__track { background: var(--dh-color-border-mid); } .dh-dark .dh-carousel__btn { background: var(--dh-color-surface); border-color: var(--dh-color-border); color: var(--dh-color-text); } .dh-dark .dh-carousel__dot { background: var(--dh-color-border); } .dh-dark .dh-stepper__indicator { background: var(--dh-color-surface); border-color: var(--dh-color-border-mid); color: var(--dh-color-text-muted); } .dh-dark .dh-stepper__step::after { background: var(--dh-color-border); } .dh-dark .dh-tab-bar { background: var(--dh-color-surface); border-color: var(--dh-color-border); } .dh-dark .dh-cmd-palette { background: var(--dh-color-surface); } .dh-dark .dh-cmd-palette__search { border-color: var(--dh-color-border); } .dh-dark .dh-cmd-palette__input { color: var(--dh-color-text); } .dh-dark .dh-cmd-palette__item:hover, .dh-dark .dh-cmd-palette__item.is-focused { background: var(--dh-color-surface-mid); } .dh-dark .dh-cmd-palette__item-icon { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border); } .dh-dark .dh-cmd-palette__item-shortcut kbd, .dh-dark .dh-cmd-palette__kbd kbd { background: var(--dh-color-surface-mid); border-color: var(--dh-color-border-mid); color: var(--dh-color-text-muted); } .dh-dark .dh-cmd-palette__footer { background: var(--dh-color-bg-soft); border-color: var(--dh-color-border); } .dh-dark .dh-toc__list { border-color: var(--dh-color-border); } .dh-dark-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border: 1px solid var(--dh-color-border-mid); border-radius: var(--dh-radius-full); background: transparent; color: var(--dh-color-text); font-size: var(--dh-text-sm); cursor: pointer; transition: all var(--dh-duration-fast) var(--dh-ease-out); } .dh-dark-toggle:hover { background: var(--dh-color-border); } .dh-dark-toggle__icon { font-size: 1rem; line-height: 1; } /* ============================================================ RTL SUPPORT — v1.6.0 Set dir="rtl" on to activate. Uses CSS logical properties where components use them, plus explicit [dir="rtl"] overrides for legacy rules. ============================================================ */ [dir="rtl"] { .dh-text-left { text-align: right; } .dh-text-right { text-align: left; } .dh-nav__inner, .dh-nav__content { flex-direction: row-reverse; } .dh-nav__links { flex-direction: row-reverse; } .dh-nav__actions { flex-direction: row-reverse; } .dh-hero__content { text-align: right; } .dh-hero__actions { flex-direction: row-reverse; justify-content: flex-end; } .dh-card { text-align: right; } .dh-card__icon { margin-right: 0; margin-left: auto; } .dh-btn .dh-icon--left { margin-right: 0; margin-left: 0.5em; order: 1; } .dh-btn .dh-icon--right { margin-left: 0; margin-right: 0.5em; order: -1; } .dh-form__label { text-align: right; } .dh-input, .dh-textarea, .dh-select { text-align: right; direction: rtl; } .dh-capture { flex-direction: row-reverse; } .dh-accordion__trigger { flex-direction: row-reverse; } .dh-accordion__icon { margin-right: 0; margin-left: 0; } .dh-dropdown__content { left: auto; right: 0; text-align: right; } .dh-tabs__nav { flex-direction: row-reverse; } .dh-pricing { text-align: right; } .dh-pricing__features li::before { margin-right: 0; margin-left: 0.5rem; float: right; } .dh-testimonial { text-align: right; } .dh-testimonial__author { flex-direction: row-reverse; } .dh-stat { text-align: right; } .dh-progress__fill { border-radius: 0 var(--dh-radius-full) var(--dh-radius-full) 0; } .dh-countdown__inner { flex-direction: row-reverse; } .dh-toast-container { right: auto; left: var(--dh-space-6); } .dh-grid { direction: rtl; } .dh-breadcrumb { flex-direction: row-reverse; } .dh-pagination { flex-direction: row-reverse; } .dh-input-group__prepend { border-right: 1px solid var(--dh-color-border-input); border-left: none; border-radius: 0 var(--dh-radius-md) var(--dh-radius-md) 0; } .dh-input-group__append { border-left: 1px solid var(--dh-color-border-input); border-right: none; border-radius: var(--dh-radius-md) 0 0 var(--dh-radius-md); } .dh-input-group .dh-input:first-child, .dh-input-group .dh-select:first-child { border-radius: 0 var(--dh-radius-md) var(--dh-radius-md) 0; } .dh-input-group .dh-input:last-child, .dh-input-group .dh-select:last-child { border-radius: var(--dh-radius-md) 0 0 var(--dh-radius-md); } .dh-alert { flex-direction: row-reverse; } .dh-alert--accent { border-left-width: 1px; border-right-width: 4px; border-radius: var(--dh-radius-md) 0 0 var(--dh-radius-md); } .dh-form__group--float .dh-form__label { left: auto; right: var(--dh-space-4); } [data-dh-tooltip][data-dh-tooltip-pos="left"]::before { right: auto; left: calc(100% + 8px); } [data-dh-tooltip][data-dh-tooltip-pos="left"]::after { right: auto; left: calc(100% + 3px); border-left-color: transparent; border-right-color: var(--dh-color-dark); } [data-dh-tooltip][data-dh-tooltip-pos="right"]::before { left: auto; right: calc(100% + 8px); } [data-dh-tooltip][data-dh-tooltip-pos="right"]::after { left: auto; right: calc(100% + 3px); border-right-color: transparent; border-left-color: var(--dh-color-dark); } .dh-carousel__btn--prev { left: auto; right: var(--dh-space-4); } .dh-carousel__btn--next { right: auto; left: var(--dh-space-4); } .dh-back-to-top { right: auto; left: var(--dh-space-6); } .dh-stepper--vertical .dh-stepper__step::after { left: auto; right: 1.125rem; } .dh-toc__list { border-left: none; border-right: 2px solid var(--dh-color-border); } .dh-toc__link { border-left: none; border-right: 2px solid transparent; margin-left: 0; margin-right: -2px; padding-left: 0; padding-right: var(--dh-space-4); } .dh-toc__link.is-active, .dh-toc__item.is-active .dh-toc__link { border-right-color: var(--dh-color-primary); } .dh-nav-overlay__close { right: auto; left: var(--dh-space-6); } } /* ============================================ WCAG 2.1 AA — Focus Visible (2.4.7) + Non-text Contrast (1.4.11) Focus indicators: 3px outline, 2px offset, primary color (high contrast) All interactive elements covered. ============================================ */ .dh-skip-link { position: absolute; top: -100%; left: var(--dh-space-4); z-index: 9999; padding: var(--dh-space-2) var(--dh-space-4); background: var(--dh-color-primary); color: var(--dh-color-dark); font-weight: var(--dh-weight-semibold); border-radius: var(--dh-radius-sm); text-decoration: none; transition: top 0.2s; } .dh-skip-link:focus { top: var(--dh-space-4); } .dh-btn:focus-visible { outline: var(--dh-focus-ring-width) solid var(--dh-focus-ring-color); outline-offset: var(--dh-focus-ring-offset); } .dh-input:focus-visible, .dh-textarea:focus-visible, .dh-select:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 0; } .dh-accordion__trigger:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-modal__close:focus-visible, [data-dh-modal-close]:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-dropdown__trigger:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-tabs__nav [data-tab]:focus-visible, [role="tab"]:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-lightbox__close:focus-visible, .dh-lightbox__prev:focus-visible, .dh-lightbox__next:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-ap-ctrl-btn:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-nav__links a:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; border-radius: var(--dh-radius-sm); } a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-pagination__link:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-breadcrumb__link:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; border-radius: var(--dh-radius-sm); } .dh-carousel__btn:focus-visible, .dh-carousel__dot:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-alert__dismiss:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; border-radius: var(--dh-radius-sm); } .dh-back-to-top:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-nav-pill__link:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; } .dh-nav-overlay__close:focus-visible, .dh-nav-overlay__link:focus-visible, .dh-nav-overlay__footer-link:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; border-radius: var(--dh-radius-sm); } .dh-toc__link:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: 2px; border-radius: var(--dh-radius-sm); } .dh-tab-bar__item:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: -3px; } .dh-cmd-palette__item:focus-visible { outline: 3px solid var(--dh-color-primary); outline-offset: -3px; } /* ============================================ WCAG 1.4.1 — Error/Success states: non-color indicator ============================================ */ .dh-input.was-validated:invalid, .dh-textarea.was-validated:invalid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--dh-space-3) center; background-size: 1.25rem; padding-right: calc(var(--dh-space-3) + 1.75rem); } .dh-input.was-validated:valid, .dh-textarea.was-validated:valid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--dh-space-3) center; background-size: 1.25rem; padding-right: calc(var(--dh-space-3) + 1.75rem); } /* ============================================ WCAG Audio player — make [data-action] divs keyboard accessible ============================================ */ .dh-ap-ctrl-btn[tabindex], [data-action][tabindex] { cursor: pointer; } /* ============================================ RTL — Animation directional overrides (v1.8) slide-left/right must flip in RTL context ============================================ */ [dir="rtl"] { [data-dh-reveal="slide-left"] { transform: translateX(calc(-1 * var(--dh-anim-distance))); } [data-dh-reveal="slide-right"] { transform: translateX(var(--dh-anim-distance)); } .dh-animate-fade-left { animation-name: dh-fade-right; } .dh-animate-fade-right { animation-name: dh-fade-left; } } /* ============================================ Dark mode — animation intensity reduction Bright glow-heavy animations are reduced at night ============================================ */ @media (prefers-color-scheme: dark) { :root { --dh-shadow-glow: 0 0 24px rgba(0, 229, 160, 0.18); } .dh-animate-bounce-in { animation-timing-function: var(--dh-ease-out); } } .dh-dark { --dh-shadow-glow: 0 0 24px rgba(0, 229, 160, 0.18); .dh-animate-bounce-in { animation-timing-function: var(--dh-ease-out); } } /* ============================================ WCAG 2.3.3 — prefers-reduced-motion ALL dotHello animations disabled / near-instant. Reveal elements are made immediately visible. Parallax transforms are zeroed. ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-dh-reveal] { opacity: 1; transform: none; transition: none; } [data-dh-stagger] > [data-dh-reveal] { transition-delay: 0ms; } [data-dh-parallax] { transform: none !important; animation: none !important; } .dh-swap__panel { transition: none !important; transform: none !important; } .dh-skeleton { animation: none; background: var(--dh-color-border); } .dh-scroll-indicator { animation: none; } .dh-carousel__track { transition: none; } .dh-carousel--fade .dh-carousel__slide { transition: none; } .dh-spinner, .dh-btn--loading::after { animation: none; } .dh-alert.is-dismissing { animation: none; opacity: 0; } .dh-nav-overlay, .dh-nav-overlay__close, .dh-nav-overlay__link, .dh-nav-overlay__footer { transition: none; } .dh-nav-pill { transition: none; } .dh-back-to-top { transition: none; } .dh-stepper__step::after { transition: none; } .dh-cmd-backdrop, .dh-cmd-palette { transition: none; } }