/* ================================================================ Optimizely — Component Library & Theme System ================================================================ Usage: — 2026 light (default) — 2026 dark — 2024 dark (default for 2024) — 2024 light ================================================================ */ /* ================================================================ 0. FONT FACE DECLARATIONS ================================================================ */ @font-face { font-family: 'Die Grotesk B'; src: url('/fonts/DieGroteskB/die-grotesk-b-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Die Grotesk B'; src: url('/fonts/DieGroteskB/die-grotesk-b-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Die Grotesk B'; src: url('/fonts/DieGroteskB/die-grotesk-b-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Die Grotesk B'; src: url('/fonts/DieGroteskB/die-grotesk-b-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Die Grotesk B'; src: url('/fonts/DieGroteskB/die-grotesk-b-bold-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Nudge SemiNormal'; src: url('/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalRegular.woff2') format('woff2'), url('/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalRegular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Nudge SemiNormal'; src: url('/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalSemiBold.woff2') format('woff2'), url('/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalSemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Nudge SemiNormal'; src: url('/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalExtraBold.woff2') format('woff2'), url('/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } /* ================================================================ 1. THEME TOKENS ================================================================ */ /* —— 2026 Theme (Light) —— Leaf Green / Fir / Die Grotesk B + Nudge SemiNormal —— */ /* Source: nice-beach-0eb861603.2.azurestaticapps.net Storybook */ :root, [data-ods-theme="2026"], [data-theme="2026"] { /* Brand — from Storybook tokens */ --t-primary: #aaff42; /* LF Green — PANTONE 3529 C — CMYK 75,10,100,0 */ --t-primary-hover: #91ec41; /* --color-lfgreen-100 (border/active) */ --t-primary-text: #197151; /* readable brand green for text on light bg */ --t-on-primary: #08251a; /* Dark Fir — PANTONE 627 C — CMYK 93,33,68,85 */ --t-secondary: #197151; /* --color-fir-lightfir */ --t-secondary-hover: #0d3a29; /* --color-fir-midfir */ /* Surfaces — from Storybook neutral scale */ --t-bg: #ffffff; /* --color-primary-1 / neutral-1 */ --t-surface: #eff6e9; /* --color-neutral-2 / tertiary-2 */ --t-surface-alt: #e4f0db; /* --color-neutral-3 / primary-3 */ --t-surface-raised: #d9e5cd; /* --color-neutral-4 / tertiary-4 */ --t-surface-inverted: #08251a; /* Dark Fir — PANTONE 627 C */ --t-surface-inverted-hover: #0d3a29; /* --color-fir-midfir */ --t-surface-deep: #061d15; /* --color-fir-800 */ /* Text */ --t-text: #08251a; /* Dark Fir — PANTONE 627 C */ --t-text-secondary: #114b36; /* --color-fir-600 */ --t-text-muted: #717963; /* --color-tertiary-7 */ --t-text-inverted: #eff6e9; /* --color-neutral-2 */ --t-text-inverted-muted: #a0ab8c; /* --color-tertiary-6 */ /* Borders */ --t-border: #d9e5cd; /* --color-neutral-4 */ --t-border-strong: #c4cfb0; /* --color-neutral-5 */ --t-border-focus: rgba(170, 255, 66, 0.35); /* Accent palette */ --t-accent-1: #aaff42; /* lfgreen */ --t-accent-1-bg: #e4f0db; /* neutral-3 */ --t-accent-2: #91dbda; /* Light Blue — PANTONE 629 C — CMYK 40,0,10,0 */ --t-accent-2-bg: #e0f5f5; --t-accent-3: #ff99b6; /* ltpink */ --t-accent-3-bg: #fde5ec; --t-accent-4: #7cdd3c; /* grass */ --t-accent-4-bg: #e4f0db; --t-accent-5: #904764; /* darkpink */ --t-accent-5-bg: #f5e0ea; --t-accent-6: #007a78; /* darkblue */ --t-accent-6-bg: #e0f0f0; /* Typography — actual Storybook fonts */ --t-font: 'Die Grotesk B', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t-font-headline: 'Nudge SemiNormal', 'Die Grotesk B', sans-serif; --t-font-headline-arch: 'Nudge SemiNormal', 'Die Grotesk B', sans-serif; --t-font-mono: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace; --t-font-size-xs: 10px; --t-font-size-sm: 12px; --t-font-size-base: 16px; --t-font-size-md: 18px; --t-font-size-lg: 20px; --t-font-size-xl: 24px; --t-font-size-2xl: 28px; --t-font-size-3xl: 36px; --t-font-size-4xl: 48px; --t-weight-regular: 400; --t-weight-medium: 500; --t-weight-semibold: 600; --t-weight-bold: 700; --t-weight-extrabold: 800; --t-weight-button: 500; --t-leading-tight: 1.25; --t-leading-snug: 1.3; --t-leading-normal: 1.5; /* Spacing */ --t-space-2xs: 4px; --t-space-xs: 8px; --t-space-sm: 12px; --t-space-md: 16px; --t-space-lg: 24px; --t-space-xl: 32px; --t-space-2xl: 48px; --t-space-3xl: 64px; --t-space-4xl: 96px; /* Radii — from Storybook */ --t-radius-sm: 12px; /* --radius-xs */ --t-radius-md: 16px; /* --radius-sm */ --t-radius-lg: 20px; /* button radius */ --t-radius-pill: 40px; /* --radius-lg */ /* Shadows */ --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --t-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07); --t-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10); /* Transitions */ --t-transition-fast: 0.12s ease; --t-transition: 0.2s ease; --t-transition-slow: 0.3s ease; } /* —— 2026 Theme (Dark) —— */ :root:not([data-ods-theme="2024"])[data-theme="dark"], [data-theme="2026-dark"] { --t-primary: #aaff42; /* LF Green — PANTONE 3529 C — CMYK 75,10,100,0 */ --t-primary-hover: #91ec41; --t-primary-text: #7cdd3c; /* readable brand green for text on dark bg */ --t-on-primary: #08251a; /* Dark Fir — PANTONE 627 C — CMYK 93,33,68,85 */ --t-secondary: #91dbda; /* Light Blue — PANTONE 629 C */ --t-secondary-hover: #007a78; --t-bg: #08251a; /* Dark Fir — PANTONE 627 C */ --t-surface: #0d3a29; /* midfir */ --t-surface-alt: #114b36; /* fir-600 */ --t-surface-raised: #197151; /* lightfir */ --t-surface-inverted: #eff6e9; --t-surface-inverted-hover: #d9e5cd; --t-surface-deep: #061d15; /* fir-800 */ --t-text: #eff6e9; /* neutral-2 */ --t-text-secondary: #c4cfb0; /* neutral-5 */ --t-text-muted: #a0ab8c; /* tertiary-6 */ --t-text-inverted: #08251a; /* Dark Fir — PANTONE 627 C */ --t-text-inverted-muted: #114b36; --t-border: #114b36; /* fir-600 */ --t-border-strong: #197151; /* lightfir */ --t-border-focus: rgba(170, 255, 66, 0.3); --t-accent-1: #aaff42; --t-accent-1-bg: rgba(170, 255, 66, 0.1); --t-accent-2: #91dbda; /* Light Blue — PANTONE 629 C — CMYK 40,0,10,0 */ --t-accent-2-bg: rgba(145, 219, 218, 0.1); --t-accent-3: #ff99b6; --t-accent-3-bg: rgba(255, 153, 182, 0.1); --t-accent-4: #7cdd3c; --t-accent-4-bg: rgba(124, 221, 60, 0.1); --t-accent-5: #904764; --t-accent-5-bg: rgba(144, 71, 100, 0.15); --t-accent-6: #007a78; --t-accent-6-bg: rgba(0, 122, 120, 0.15); --t-font: 'Die Grotesk B', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t-font-headline: 'Nudge SemiNormal', 'Die Grotesk B', sans-serif; --t-font-headline-arch: 'Nudge SemiNormal', 'Die Grotesk B', sans-serif; --t-font-mono: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace; --t-radius-sm: 12px; --t-radius-md: 16px; --t-radius-lg: 20px; --t-radius-pill: 40px; --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --t-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25); --t-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3); } /* —— 2024 Theme (Dark — default) —— Blue / Tech / Figtree —— */ :root[data-ods-theme="2024"], :root[data-ods-theme="2024"][data-theme="dark"], [data-theme="2024"] { --t-primary: #194bff; --t-primary-hover: #5176fe; --t-primary-text: #5176fe; /* readable blue for text on dark bg */ --t-on-primary: #ffffff; --t-secondary: #861dff; --t-secondary-hover: #a254fe; --t-bg: #10141d; --t-surface: #191e28; --t-surface-alt: #232834; --t-surface-raised: #2c313f; --t-surface-inverted: #ffffff; --t-surface-inverted-hover: #e9ebf1; --t-surface-deep: #080736; --t-text: #e9ebf1; --t-text-secondary: #ced2dc; --t-text-muted: #969cac; --t-text-inverted: #10141d; --t-text-inverted-muted: #484f61; --t-border: #2c313f; --t-border-strong: #484f61; --t-border-focus: rgba(25, 75, 255, 0.3); --t-accent-1: #3be081; --t-accent-1-bg: rgba(59, 224, 129, 0.1); --t-accent-2: #00ccff; --t-accent-2-bg: rgba(0, 204, 255, 0.1); --t-accent-3: #f13030; --t-accent-3-bg: rgba(241, 48, 48, 0.1); --t-accent-4: #ff8110; --t-accent-4-bg: rgba(255, 129, 16, 0.1); --t-accent-5: #861dff; --t-accent-5-bg: rgba(134, 29, 255, 0.1); --t-accent-6: #ffce00; --t-accent-6-bg: rgba(255, 206, 0, 0.1); --t-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t-font-mono: 'NBI Pro Mono', 'Fira Code', 'Consolas', monospace; --t-radius-sm: 8px; --t-radius-md: 12px; --t-radius-lg: 24px; --t-radius-pill: 999px; --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15); --t-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15); --t-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2); } /* —— 2024 Theme (Light) —— */ :root[data-ods-theme="2024"][data-theme="light"], [data-theme="2024-light"] { --t-primary: #0037ff; --t-primary-hover: #002ccc; --t-primary-text: #0037ff; /* readable blue for text on light bg */ --t-on-primary: #ffffff; --t-secondary: #861dff; --t-secondary-hover: #6b17cc; --t-bg: #ffffff; --t-surface: #f8f8fc; --t-surface-alt: #f0f1f5; --t-surface-raised: #e9ebf1; --t-surface-inverted: #10141d; --t-surface-inverted-hover: #191e28; --t-surface-deep: #0e1122; --t-text: #10141d; --t-text-secondary: #484f61; --t-text-muted: #656c81; --t-text-inverted: #ffffff; --t-text-inverted-muted: #ced2dc; --t-border: #e9ebf1; --t-border-strong: #ced2dc; --t-border-focus: rgba(0, 55, 255, 0.2); --t-accent-1: #2fb367; --t-accent-1-bg: #d9f9e6; --t-accent-2: #0097bf; --t-accent-2-bg: #ccf5ff; --t-accent-3: #d42020; --t-accent-3-bg: #ffe5e5; --t-accent-4: #cc670d; --t-accent-4-bg: #ffe6cf; --t-accent-5: #6b17cc; --t-accent-5-bg: #e7d2ff; --t-accent-6: #cca500; --t-accent-6-bg: #fff5cc; --t-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --t-font-mono: 'NBI Pro Mono', 'Fira Code', 'Consolas', monospace; --t-radius-sm: 8px; --t-radius-md: 12px; --t-radius-lg: 24px; --t-radius-pill: 999px; --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --t-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --t-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* ================================================================ 2. RESET & BASE ================================================================ Disabled: Starlight provides its own reset. These global selectors conflict with the documentation portal layout. The component classes below are safe to use alongside Starlight. ================================================================ */ /* ================================================================ 3. TYPOGRAPHY ================================================================ */ .t-display-1 { font-family: var(--t-font-headline); font-size: clamp(48px, 4vw + 24px, 72px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); color: var(--t-text); letter-spacing: -0.02em; } .t-display-2 { font-family: var(--t-font-headline); font-size: clamp(36px, 3vw + 18px, 56px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); color: var(--t-text); letter-spacing: -0.01em; } .t-display-3 { font-family: var(--t-font-headline); font-size: clamp(28px, 2vw + 16px, 44px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); color: var(--t-text); } .t-h1 { font-family: var(--t-font-headline); font-size: var(--t-font-size-4xl); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); color: var(--t-text); } .t-h2 { font-family: var(--t-font-headline); font-size: var(--t-font-size-2xl); font-weight: var(--t-weight-semibold); line-height: var(--t-leading-snug); color: var(--t-text); } .t-h3 { font-family: var(--t-font-headline); font-size: var(--t-font-size-xl); font-weight: var(--t-weight-bold); line-height: var(--t-leading-snug); color: var(--t-text); } .t-h4 { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-bold); line-height: var(--t-leading-snug); color: var(--t-text); } .t-h5 { font-size: var(--t-font-size-md); font-weight: var(--t-weight-semibold); line-height: var(--t-leading-snug); color: var(--t-text); } .t-h6 { font-size: var(--t-font-size-base); font-weight: var(--t-weight-semibold); line-height: var(--t-leading-snug); color: var(--t-text); } .t-subtitle { font-size: var(--t-font-size-md); font-weight: var(--t-weight-medium); line-height: var(--t-leading-normal); color: var(--t-text-secondary); } .t-body { font-size: var(--t-font-size-base); line-height: var(--t-leading-normal); color: var(--t-text); } .t-body-sm { font-size: var(--t-font-size-sm); line-height: var(--t-leading-normal); color: var(--t-text-secondary); } .t-body-lg { font-size: var(--t-font-size-md); line-height: var(--t-leading-normal); color: var(--t-text); } .t-overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-text-muted); } .t-code { font-family: var(--t-font-mono); font-size: 0.9em; padding: 2px 6px; border-radius: 4px; background: var(--t-surface-raised); color: var(--t-accent-2); } .t-link { color: var(--t-primary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-transition-fast); } .t-link:hover { opacity: 0.8; } .t-link--arrow::after { content: ' →'; } .t-gradient { background: linear-gradient(135deg, var(--t-accent-1), var(--t-accent-6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .t-em { font-style: italic; color: var(--t-primary); } /* ================================================================ 4. LAYOUT ================================================================ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--t-space-xl); } .container--narrow { max-width: 800px; } .container--wide { max-width: 1400px; } .section { padding: var(--t-space-3xl) 0; } .section--sm { padding: var(--t-space-2xl) 0; } .section--lg { padding: var(--t-space-4xl) 0; } .grid { display: grid; gap: var(--t-space-md); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--auto-fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .flex { display: flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--gap-xs { gap: var(--t-space-xs); } .flex--gap-sm { gap: var(--t-space-sm); } .flex--gap-md { gap: var(--t-space-md); } .flex--gap-lg { gap: var(--t-space-lg); } .flex--wrap { flex-wrap: wrap; } @media (max-width: 900px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .container { padding: 0 var(--t-space-md); } } @media (max-width: 600px) { .section { padding: var(--t-space-2xl) 0; } } /* ================================================================ 5. HEADER / NAVBAR ================================================================ Prefixed with .ods- to avoid conflicts with Starlight's .header ================================================================ */ .ods-header { background: var(--t-bg); border-bottom: 1px solid var(--t-border); position: sticky; top: 0; z-index: 100; transition: background var(--t-transition-slow); } .ods-header__inner { max-width: 1200px; margin: 0 auto; padding: 14px var(--t-space-xl); display: flex; align-items: center; justify-content: space-between; } .ods-header__logo { font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); font-style: italic; text-decoration: none; color: var(--t-text); } .ods-header__logo-sub { font-weight: var(--t-weight-semibold); font-style: normal; font-size: var(--t-font-size-base); color: var(--t-text-muted); margin-left: 6px; } /* Nav items */ .ods-nav { display: flex; gap: var(--t-space-2xs); align-items: center; } .ods-nav__link, .ods-nav__trigger { padding: 8px 14px; border-radius: var(--t-radius-pill); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); color: var(--t-text-secondary); background: none; border: none; text-decoration: none; transition: all var(--t-transition-fast); cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: var(--t-font); } .ods-nav__link:hover, .ods-nav__trigger:hover { background: var(--t-surface); color: var(--t-text); } .ods-nav__link--active, .ods-nav__trigger--active { background: var(--t-surface-inverted); color: var(--t-text-inverted); } .ods-nav__arrow { font-size: 10px; transition: transform var(--t-transition); } .ods-nav__dropdown:hover .ods-nav__arrow { transform: rotate(180deg); } /* ================================================================ 6. MEGA MENU ================================================================ */ .ods-nav__dropdown { position: relative; } .mega { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-lg); padding: var(--t-space-lg); opacity: 0; visibility: hidden; transition: opacity var(--t-transition), visibility var(--t-transition), transform var(--t-transition); z-index: 200; min-width: 640px; } .mega::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .ods-nav__dropdown:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .mega--sm { min-width: 480px; } .mega--md { min-width: 560px; } .mega__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--t-space-md); padding-bottom: var(--t-space-sm); border-bottom: 1px solid var(--t-border); } .mega__title { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); color: var(--t-text); } .mega__view-all { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-secondary); text-decoration: none; } .mega__view-all:hover { color: var(--t-text); } .mega__grid { display: grid; gap: 6px; } .mega__grid--2 { grid-template-columns: repeat(2, 1fr); } .mega__grid--3 { grid-template-columns: repeat(3, 1fr); } .mega__grid--4 { grid-template-columns: repeat(4, 1fr); } .mega__item { display: flex; gap: var(--t-space-sm); align-items: flex-start; padding: var(--t-space-sm) 14px; border-radius: var(--t-radius-sm); text-decoration: none; color: var(--t-text); transition: background var(--t-transition-fast); } .mega__item:hover { background: var(--t-surface-alt); } .mega__item-icon { width: 36px; height: 36px; border-radius: var(--t-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .mega__item h4 { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); margin-bottom: 2px; } .mega__item p { font-size: var(--t-font-size-xs); color: var(--t-text-muted); line-height: 1.4; } .mega__col h5 { font-size: 10px; font-weight: var(--t-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-text-muted); margin-bottom: var(--t-space-xs); padding-left: 2px; } .mega__col a { display: block; padding: 6px 8px; border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); color: var(--t-text-secondary); text-decoration: none; transition: all var(--t-transition-fast); } .mega__col a:hover { background: var(--t-surface-alt); color: var(--t-text); } .mega__footer { display: flex; gap: var(--t-space-sm); margin-top: var(--t-space-sm); padding-top: var(--t-space-sm); border-top: 1px solid var(--t-border); } .mega__footer a { flex: 1; display: flex; align-items: center; gap: var(--t-space-xs); padding: 10px 14px; border-radius: var(--t-radius-sm); background: var(--t-surface-alt); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-text); text-decoration: none; transition: background var(--t-transition-fast); } .mega__footer a:hover { background: var(--t-surface-raised); } /* ================================================================ 7. SEARCH ================================================================ */ .search-input { padding: 9px 16px 9px 38px; border-radius: var(--t-radius-pill); border: 1px solid var(--t-border); background-color: var(--t-surface); font-size: var(--t-font-size-sm); color: var(--t-text); outline: none; width: 220px; transition: all var(--t-transition-fast); } .search-input:focus { border-color: var(--t-secondary); background-color: var(--t-bg); box-shadow: 0 0 0 3px var(--t-border-focus); } .search-input--lg { width: 100%; padding: 16px 24px 16px 50px; border-radius: var(--t-radius-lg); font-size: var(--t-font-size-base); border-width: 2px; border-color: var(--t-border); background-color: var(--t-surface); } .search-input--lg:focus { border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-border-focus); } .search-input--inverted { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--t-text-inverted); } .search-input--inverted:focus { border-color: var(--t-primary); background-color: rgba(255, 255, 255, 0.1); } .search-input--inverted::placeholder { color: var(--t-text-inverted-muted); } /* ================================================================ 8. HERO ================================================================ */ .ods-hero { background: var(--t-surface-deep); padding: 72px var(--t-space-xl); text-align: center; position: relative; overflow: hidden; } .ods-hero::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--t-primary) 8%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--t-secondary) 10%, transparent) 0%, transparent 50%); pointer-events: none; } [data-theme="2024"] .ods-hero::before, [data-theme="2024-light"] .ods-hero::before, [data-ods-theme="2024"] .ods-hero::before { background: radial-gradient(ellipse at 30% 50%, rgba(25, 75, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(134, 29, 255, 0.08) 0%, transparent 50%); } .ods-hero__title { font-family: var(--t-font-headline); font-size: var(--t-font-size-4xl); font-weight: var(--t-weight-extrabold); color: var(--t-text-inverted); margin-bottom: 14px; line-height: var(--t-leading-tight); position: relative; } .ods-hero__subtitle { font-size: var(--t-font-size-md); color: var(--t-text-inverted-muted); max-width: 520px; margin: 0 auto var(--t-space-xl); position: relative; } .ods-hero__search { max-width: 580px; margin: 0 auto; position: relative; z-index: 1; } .ods-hero--sm { padding: 48px var(--t-space-xl); } .ods-hero--lg { padding: 96px var(--t-space-xl); } @media (max-width: 600px) { .ods-hero__title { font-size: var(--t-font-size-3xl); } .ods-hero { padding: 48px var(--t-space-md); } } /* ================================================================ 9. BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--t-space-xs); padding: 11px 22px; border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-button); font-family: var(--t-font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--t-transition), box-shadow var(--t-transition); line-height: 1.4; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Primary — LF Green bg, dark text, accent-4 border */ .btn--primary { background: var(--t-primary); color: var(--t-on-primary); border-color: var(--t-accent-4); } .btn--primary:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-accent-4); } .btn--primary:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-accent-4); } /* Dark — dark bg, inverted text, dark border */ .btn--dark { background: var(--t-surface-inverted); color: var(--t-text-inverted); border-color: var(--t-on-primary); } .btn--dark:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 #000; } .btn--dark:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 #000; } /* White — white bg, neutral border */ .btn--white { background: var(--t-bg); color: var(--t-text); border-color: var(--t-surface-alt); } .btn--white:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-surface-alt); } .btn--white:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-surface-alt); } /* Neutral — surface bg, neutral border */ .btn--neutral { background: var(--t-surface); color: var(--t-text); border-color: var(--t-surface-alt); } .btn--neutral:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-surface-alt); } .btn--neutral:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-surface-alt); } /* Dark Stroke — transparent bg, border follows text color (dark in light themes, light in dark themes) so the outline stays visible everywhere. Was --t-on-primary, which is white in the 2024/dark themes and made the border disappear in light mode. */ .btn--dark-stroke { background: transparent; color: var(--t-text); border-color: var(--t-text); } .btn--dark-stroke:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 #000; } .btn--dark-stroke:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 #000; } /* White Stroke — transparent bg, white border (for dark backgrounds) */ .btn--white-stroke { background: transparent; color: var(--t-text-inverted); border-color: var(--t-text-inverted); } .btn--white-stroke:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 #fff; } .btn--white-stroke:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 #fff; } /* Opal Stroke — transparent bg, accent-2 border (for dark backgrounds) */ .btn--opal-stroke { background: transparent; color: var(--t-text-inverted); border-color: var(--t-accent-2); } .btn--opal-stroke:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-accent-2); } .btn--opal-stroke:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-accent-2); } /* Legacy compat — keep old names working */ .btn--secondary { background: var(--t-bg); color: var(--t-text); border-color: var(--t-border); } .btn--secondary:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-border); } .btn--secondary:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-border); } .btn--ghost { background: transparent; color: var(--t-text); border-color: transparent; } .btn--ghost:hover { background: var(--t-surface); transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-surface-alt); } .btn--ghost:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-surface-alt); } .btn--inverted { background: var(--t-surface-inverted); color: var(--t-text-inverted); border-color: var(--t-on-primary); } .btn--inverted:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 #000; } .btn--inverted:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 #000; } .btn--accent { background: var(--t-secondary); color: var(--t-text-inverted); border-color: var(--t-secondary-hover); } .btn--accent:hover { transform: translate(1px, -2px); box-shadow: -2px 2px 0 var(--t-secondary-hover); } .btn--accent:active { transform: translate(0px, -1px); box-shadow: -1px 1px 0 var(--t-secondary-hover); } .btn--sm { padding: 7px 14px; font-size: var(--t-font-size-xs); } .btn--lg { padding: 14px 28px; font-size: var(--t-font-size-base); } .btn--icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 16px; } .btn--icon-sm { width: 28px; height: 28px; font-size: 14px; } .btn-group { display: flex; gap: var(--t-space-xs); flex-wrap: wrap; } /* ================================================================ 10. CARDS ================================================================ */ /* Base card */ .card { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-lg) var(--t-space-lg); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); box-shadow: var(--t-shadow-sm); } .card:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-md); border-color: var(--t-border-strong); } .card--flat { box-shadow: none; } .card--flat:hover { box-shadow: var(--t-shadow-sm); } .card--raised { box-shadow: var(--t-shadow-md); } .card--raised:hover { box-shadow: var(--t-shadow-lg); } /* Feature card (icon + title + desc) */ .card-feature { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: 28px 24px; text-decoration: none; color: var(--t-text); transition: all var(--t-transition); box-shadow: var(--t-shadow-md); display: flex; gap: 18px; align-items: flex-start; } .card-feature:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lg); border-color: var(--t-secondary); } .card-feature__icon { width: 48px; height: 48px; border-radius: var(--t-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .card-feature__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: 4px; color: var(--t-text); } .card-feature__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: 1.5; margin-bottom: 10px; } /* Content-type card (centered icon layout) */ .card-content { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); padding: var(--t-space-lg); text-decoration: none; color: var(--t-text); transition: all var(--t-transition-fast); text-align: center; } .card-content:hover { border-color: var(--t-secondary); background: var(--t-surface-alt); } .card-content__icon { font-size: 28px; display: block; margin-bottom: 10px; } .card-content__title { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); margin-bottom: 4px; } .card-content__desc { font-size: var(--t-font-size-xs); color: var(--t-text-muted); line-height: 1.4; } .card-content__meta { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-secondary); margin-top: 8px; display: block; } /* Article / list card */ .card-article { display: flex; align-items: center; gap: 14px; padding: var(--t-space-md) var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); text-decoration: none; color: var(--t-text); transition: all var(--t-transition-fast); } .card-article:hover { border-color: var(--t-secondary); background: var(--t-surface-alt); } .card-article__indicator { width: 6px; height: 32px; border-radius: 3px; flex-shrink: 0; } .card-article__title { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); color: var(--t-text); } .card-article__meta { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* Stats card */ .card-stats { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-lg); text-align: center; } .card-stats__value { font-family: var(--t-font-headline); font-size: var(--t-font-size-3xl); font-weight: var(--t-weight-extrabold); color: var(--t-primary); line-height: 1; margin-bottom: var(--t-space-xs); } .card-stats__label { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } /* Profile card */ .card-profile { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-lg); text-align: center; } .card-profile__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--t-space-sm); } .card-profile__name { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: 2px; } .card-profile__role { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } /* ================================================================ 11. BADGES / TAGS / CHIPS ================================================================ */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--t-radius-pill); font-size: 10px; font-weight: var(--t-weight-semibold); background: var(--t-surface-raised); color: var(--t-text-secondary); line-height: 1.6; } .badge--primary { background: var(--t-primary); color: var(--t-on-primary); } .badge--accent-1 { background: var(--t-accent-1-bg); color: var(--t-accent-1); } .badge--accent-2 { background: var(--t-accent-2-bg); color: var(--t-accent-2); } .badge--accent-3 { background: var(--t-accent-3-bg); color: var(--t-accent-3); } .badge--accent-4 { background: var(--t-accent-4-bg); color: var(--t-accent-4); } .badge--accent-5 { background: var(--t-accent-5-bg); color: var(--t-accent-5); } .badge--accent-6 { background: var(--t-accent-6-bg); color: var(--t-accent-6); } .badge--sm { font-size: 9px; padding: 1px 6px; } .badge--lg { font-size: var(--t-font-size-xs); padding: 4px 12px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: var(--t-radius-pill); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-medium); border: 1px solid var(--t-border); color: var(--t-text-secondary); background: var(--t-bg); cursor: pointer; transition: all var(--t-transition-fast); } .chip:hover { border-color: var(--t-border-strong); background: var(--t-surface); } .chip--active { background: var(--t-primary); color: var(--t-on-primary); border-color: var(--t-primary); } .tag-group { display: flex; flex-wrap: wrap; gap: 4px; } /* ================================================================ 12. PLATFORM BANNER ================================================================ */ .banner { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-lg); overflow: hidden; } .banner__inner { padding: var(--t-space-lg) var(--t-space-xl); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--t-space-lg); } .banner__title { font-family: var(--t-font-headline); font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); color: var(--t-text); } .banner__title span { color: var(--t-secondary); font-weight: var(--t-weight-semibold); } .banner__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); margin-top: 4px; max-width: 480px; } /* ================================================================ 13. CTA ================================================================ */ .cta { background: var(--t-surface-alt); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--t-space-xl); } .cta--inverted { background: var(--t-surface-inverted); border-color: transparent; } .cta__title { font-family: var(--t-font-headline); font-size: var(--t-font-size-lg); font-weight: var(--t-weight-bold); color: var(--t-text); } .cta--inverted .cta__title { color: var(--t-text-inverted); } .cta__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); margin-top: 4px; } .cta--inverted .cta__desc { color: var(--t-text-inverted-muted); } .cta__actions { display: flex; gap: 10px; flex-shrink: 0; } @media (max-width: 600px) { .cta { flex-direction: column; text-align: center; padding: var(--t-space-lg); } } /* ================================================================ 14. ACCORDION ================================================================ */ .accordion { border: 1px solid var(--t-border); border-radius: var(--t-radius-md); overflow: hidden; } .accordion + .accordion { margin-top: -1px; } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--t-space-md) var(--t-space-lg); background: var(--t-bg); border: none; font-size: var(--t-font-size-base); font-weight: var(--t-weight-semibold); color: var(--t-text); cursor: pointer; transition: background var(--t-transition-fast); font-family: var(--t-font); text-align: left; } .accordion__trigger:hover { background: var(--t-surface); } .accordion__trigger::after { content: '+'; font-size: 18px; font-weight: var(--t-weight-regular); transition: transform var(--t-transition); } .accordion--open .accordion__trigger::after { content: '−'; } .accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--t-transition-slow); } .accordion--open .accordion__panel { max-height: 500px; } .accordion__content { padding: 0 var(--t-space-lg) var(--t-space-lg); font-size: var(--t-font-size-sm); color: var(--t-text-secondary); line-height: var(--t-leading-normal); } /* ================================================================ 15. TABS ================================================================ */ .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--t-border); } .tab { padding: var(--t-space-sm) var(--t-space-lg); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); color: var(--t-text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--t-transition-fast); font-family: var(--t-font); } .tab:hover { color: var(--t-text); } .tab--active { color: var(--t-text); border-bottom-color: var(--t-primary); } .tabs--pill { border-bottom: none; gap: var(--t-space-2xs); background: var(--t-surface); border-radius: var(--t-radius-pill); padding: 4px; } .tabs--pill .tab { border-bottom: none; border-radius: var(--t-radius-pill); margin-bottom: 0; } .tabs--pill .tab--active { background: var(--t-bg); box-shadow: var(--t-shadow-sm); } /* ================================================================ 16. BREADCRUMB ================================================================ */ .breadcrumb { display: flex; align-items: center; gap: var(--t-space-xs); font-size: var(--t-font-size-sm); color: var(--t-text-muted); } .breadcrumb a { color: var(--t-text-muted); text-decoration: none; transition: color var(--t-transition-fast); } .breadcrumb a:hover { color: var(--t-text); } .breadcrumb__sep { color: var(--t-border-strong); } .breadcrumb__current { font-weight: var(--t-weight-medium); color: var(--t-text); } /* ================================================================ 17. TABLE ================================================================ */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--t-font-size-sm); } .table th { padding: var(--t-space-sm) var(--t-space-md); text-align: left; font-weight: var(--t-weight-semibold); color: var(--t-text); background: var(--t-surface); border-bottom: 2px solid var(--t-border); white-space: nowrap; } .table td { padding: var(--t-space-sm) var(--t-space-md); border-bottom: 1px solid var(--t-border); color: var(--t-text-secondary); } .table tr:hover td { background: var(--t-surface); } .table--striped tr:nth-child(even) td { background: var(--t-surface); } /* ================================================================ 18. FORMS ================================================================ */ .form-group { margin-bottom: var(--t-space-md); } .form-label { display: block; font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); color: var(--t-text); margin-bottom: var(--t-space-2xs); } .form-hint { font-size: var(--t-font-size-xs); color: var(--t-text-muted); margin-top: var(--t-space-2xs); } .form-input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-bg); font-size: var(--t-font-size-sm); color: var(--t-text); outline: none; transition: all var(--t-transition-fast); font-family: var(--t-font); } .form-input:focus { border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-border-focus); } .form-input::placeholder { color: var(--t-text-muted); } .form-input--error { border-color: var(--t-accent-3); } .form-input--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent-3) 15%, transparent); } .form-select { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-bg); font-size: var(--t-font-size-sm); color: var(--t-text); outline: none; appearance: none; cursor: pointer; font-family: var(--t-font); } .form-textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); background: var(--t-bg); font-size: var(--t-font-size-sm); color: var(--t-text); outline: none; resize: vertical; min-height: 100px; font-family: var(--t-font); } .form-textarea:focus { border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-border-focus); } .form-checkbox { display: flex; align-items: center; gap: var(--t-space-xs); font-size: var(--t-font-size-sm); color: var(--t-text); cursor: pointer; } .form-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--t-primary); } /* ================================================================ 19. ALERTS / CALLOUTS ================================================================ */ .alert { padding: var(--t-space-md) var(--t-space-lg); border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); line-height: var(--t-leading-normal); border: 1px solid; } .alert--info { background: var(--t-accent-2-bg); border-color: var(--t-accent-2); color: var(--t-text); } .alert--success { background: var(--t-accent-1-bg); border-color: var(--t-accent-1); color: var(--t-text); } .alert--warning { background: var(--t-accent-4-bg); border-color: var(--t-accent-4); color: var(--t-text); } .alert--error { background: var(--t-accent-3-bg); border-color: var(--t-accent-3); color: var(--t-text); } .alert__title { font-weight: var(--t-weight-semibold); margin-bottom: var(--t-space-2xs); } /* ================================================================ 20. QUOTE ================================================================ */ .quote { padding: var(--t-space-lg); border-left: 4px solid var(--t-primary); background: var(--t-surface-alt); border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0; } .quote__text { font-size: var(--t-font-size-md); font-style: italic; color: var(--t-text); line-height: var(--t-leading-normal); margin-bottom: var(--t-space-sm); } .quote__attribution { font-size: var(--t-font-size-sm); color: var(--t-text-muted); font-style: normal; } .quote--large { border-left: none; background: transparent; padding: var(--t-space-2xl); text-align: center; } .quote--large .quote__text { font-size: var(--t-font-size-xl); font-weight: var(--t-weight-medium); } /* ================================================================ 21. SEPARATOR ================================================================ */ .separator { border: none; height: 1px; background: var(--t-border); margin: var(--t-space-xl) 0; } .separator--lg { margin: var(--t-space-2xl) 0; } .separator--dotted { background: none; border-bottom: 2px dotted var(--t-border); } /* ================================================================ 22. LOGO GRID ================================================================ */ .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--t-space-md); } .logo-grid__item { display: flex; align-items: center; justify-content: center; padding: var(--t-space-lg); background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); transition: border-color var(--t-transition-fast); } .logo-grid__item:hover { border-color: var(--t-border-strong); } .logo-grid__item img { max-height: 32px; opacity: 0.6; transition: opacity var(--t-transition); } .logo-grid__item:hover img { opacity: 1; } /* ================================================================ 23. FOOTER ================================================================ */ .footer { background: var(--t-surface-deep); color: var(--t-text-inverted-muted); padding: 48px var(--t-space-xl); } .footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; } .footer__brand-desc { font-size: var(--t-font-size-sm); margin-top: 10px; line-height: var(--t-leading-normal); } .footer__heading { color: var(--t-text-inverted); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-sm); } .footer a { color: var(--t-text-inverted-muted); text-decoration: none; font-size: var(--t-font-size-sm); display: block; padding: 3px 0; transition: color var(--t-transition-fast); } .footer a:hover { color: var(--t-primary); } .footer__bottom { max-width: 1200px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid var(--t-surface-inverted-hover); font-size: var(--t-font-size-xs); text-align: center; } @media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__inner { grid-template-columns: 1fr; gap: var(--t-space-lg); } } /* ================================================================ 24. THEME TOGGLE ================================================================ */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--t-border); background: var(--t-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all var(--t-transition); flex-shrink: 0; color: var(--t-text-muted); } .theme-toggle:hover { background: var(--t-surface-raised); border-color: var(--t-border-strong); } /* ================================================================ 25. ANNOUNCEMENT BAR ================================================================ */ .announcement-bar { background: var(--t-surface-deep); color: var(--t-text-inverted); text-align: center; padding: var(--t-space-xs) var(--t-space-lg); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); } .announcement-bar a { color: var(--t-primary); text-decoration: underline; text-underline-offset: 2px; margin-left: var(--t-space-xs); } /* ================================================================ 26. PAGINATION ================================================================ */ .pagination { display: flex; align-items: center; gap: var(--t-space-2xs); } .pagination__item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); color: var(--t-text-secondary); background: none; border: 1px solid transparent; cursor: pointer; transition: all var(--t-transition-fast); text-decoration: none; font-family: var(--t-font); } .pagination__item:hover { background: var(--t-surface); border-color: var(--t-border); } .pagination__item--active { background: var(--t-primary); color: var(--t-on-primary); font-weight: var(--t-weight-bold); } .pagination__item--disabled { opacity: 0.4; cursor: not-allowed; } /* ================================================================ 27. SIDEBAR NAV ================================================================ */ .sidenav { width: 260px; flex-shrink: 0; } .sidenav__section { margin-bottom: var(--t-space-lg); } .sidenav__heading { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-text-muted); padding: var(--t-space-xs) var(--t-space-sm); margin-bottom: var(--t-space-2xs); } .sidenav__link { display: block; padding: 6px var(--t-space-sm); border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); color: var(--t-text-secondary); text-decoration: none; transition: all var(--t-transition-fast); border-left: 2px solid transparent; } .sidenav__link:hover { background: var(--t-surface); color: var(--t-text); } .sidenav__link--active { background: var(--t-surface-alt); color: var(--t-text); font-weight: var(--t-weight-medium); border-left-color: var(--t-primary); } /* ================================================================ 28. TOOLTIP ================================================================ */ .tooltip { position: relative; display: inline-block; } .tooltip__content { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95); background: var(--t-surface-inverted); color: var(--t-text-inverted); padding: var(--t-space-xs) var(--t-space-sm); border-radius: var(--t-radius-sm); font-size: var(--t-font-size-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-transition), transform var(--t-transition); z-index: 300; } .tooltip:hover .tooltip__content { opacity: 1; transform: translateX(-50%) scale(1); } /* ================================================================ 29. SKELETON / LOADING ================================================================ */ .skeleton { background: linear-gradient(90deg, var(--t-surface) 25%, var(--t-surface-raised) 50%, var(--t-surface) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--t-radius-sm); } .skeleton--text { height: 16px; width: 80%; margin-bottom: 8px; } .skeleton--title { height: 24px; width: 60%; margin-bottom: 12px; } .skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; } .skeleton--card { height: 180px; } @keyframes skeleton-shimmer { to { background-position: -200% 0; } } /* ================================================================ 30. UTILITIES ================================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--t-primary); } .text-secondary { color: var(--t-text-secondary); } .text-muted { color: var(--t-text-muted); } .text-inverted { color: var(--t-text-inverted); } .bg-surface { background: var(--t-surface); } .bg-alt { background: var(--t-surface-alt); } .bg-inverted { background: var(--t-surface-inverted); } .mt-xs { margin-top: var(--t-space-xs); } .mt-sm { margin-top: var(--t-space-sm); } .mt-md { margin-top: var(--t-space-md); } .mt-lg { margin-top: var(--t-space-lg); } .mt-xl { margin-top: var(--t-space-xl); } .mt-2xl { margin-top: var(--t-space-2xl); } .mb-xs { margin-bottom: var(--t-space-xs); } .mb-sm { margin-bottom: var(--t-space-sm); } .mb-md { margin-bottom: var(--t-space-md); } .mb-lg { margin-bottom: var(--t-space-lg); } .mb-xl { margin-bottom: var(--t-space-xl); } .rounded-sm { border-radius: var(--t-radius-sm); } .rounded-md { border-radius: var(--t-radius-md); } .rounded-lg { border-radius: var(--t-radius-lg); } .rounded-pill { border-radius: var(--t-radius-pill); } .rounded-full { border-radius: 50%; } .shadow-sm { box-shadow: var(--t-shadow-sm); } .shadow-md { box-shadow: var(--t-shadow-md); } .shadow-lg { box-shadow: var(--t-shadow-lg); } .shadow-none { box-shadow: none; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ================================================================ 31. DIALOG / MODAL ================================================================ */ .dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 400; animation: dialog-fade-in 0.2s ease; } .dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 401; width: 100%; max-width: 425px; background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); padding: var(--t-space-xl); box-shadow: var(--t-shadow-lg); animation: dialog-zoom-in 0.2s ease; } .dialog--sm { max-width: 340px; } .dialog--lg { max-width: 560px; } .dialog--xl { max-width: 720px; } .dialog__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--t-space-md); } .dialog__title { font-family: var(--t-font-headline); font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); color: var(--t-text); } .dialog__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); margin-bottom: var(--t-space-lg); line-height: var(--t-leading-normal); } .dialog__close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--t-text-muted); cursor: pointer; border-radius: 50%; font-size: 18px; transition: all var(--t-transition-fast); flex-shrink: 0; } .dialog__close:hover { background: var(--t-surface); color: var(--t-text); } .dialog__body { display: grid; gap: var(--t-space-md); } .dialog__footer { display: flex; justify-content: flex-end; gap: var(--t-space-xs); margin-top: var(--t-space-lg); } @keyframes dialog-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes dialog-zoom-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ================================================================ 32. SWITCH / TOGGLE ================================================================ */ .switch { display: inline-flex; align-items: center; gap: var(--t-space-sm); cursor: pointer; } .switch__track { position: relative; width: 42px; height: 22px; background: var(--t-text-muted); border-radius: var(--t-radius-pill); border: none; cursor: pointer; transition: background var(--t-transition); flex-shrink: 0; padding: 0; } .switch__track[aria-checked="true"], .switch__track--checked { background: var(--t-primary); } .switch__thumb { display: block; width: 18px; height: 18px; background: var(--t-surface-inverted); border-radius: 50%; transition: transform 0.2s ease; transform: translateX(2px); } .switch__track[aria-checked="true"] .switch__thumb, .switch__track--checked .switch__thumb { transform: translateX(22px); } .switch__label { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); color: var(--t-text); } .switch--disabled { opacity: 0.5; cursor: not-allowed; } /* Switch inside a dark container (Storybook pattern) */ .switch-row { display: flex; align-items: center; justify-content: space-between; padding: var(--t-space-md) var(--t-space-lg); background: var(--t-surface-inverted); border-radius: var(--t-radius-md); color: var(--t-text-inverted); } .switch-row .switch__label { color: var(--t-text-inverted); } /* ================================================================ 33. SLIDER / RANGE ================================================================ */ .slider { display: flex; flex-direction: column; gap: var(--t-space-xs); width: 100%; } .slider__label { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-medium); color: var(--t-text); } .slider__track { position: relative; width: 100%; height: 8px; background: var(--t-surface-raised); border-radius: var(--t-radius-pill); cursor: pointer; } .slider__range { position: absolute; height: 100%; background: var(--t-secondary); border-radius: var(--t-radius-pill); } .slider__thumb { position: absolute; top: 50%; width: 20px; height: 20px; background: var(--t-bg); border: 2px solid var(--t-secondary); border-radius: 50%; transform: translateY(-50%); cursor: grab; box-shadow: var(--t-shadow-md); transition: box-shadow var(--t-transition-fast); } .slider__thumb:hover { box-shadow: var(--t-shadow-lg); } .slider__thumb:active { cursor: grabbing; } .slider__value { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-text-secondary); text-align: right; } /* Native range input styling */ input[type="range"].slider-input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--t-surface-raised); border-radius: var(--t-radius-pill); outline: none; } input[type="range"].slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--t-bg); border: 2px solid var(--t-secondary); border-radius: 50%; cursor: pointer; box-shadow: var(--t-shadow-md); } /* ================================================================ 34. STYLED CHECKBOX ================================================================ */ .checkbox { display: flex; align-items: center; gap: var(--t-space-sm); cursor: pointer; } .checkbox__input { position: relative; width: 20px; height: 20px; border: 2px solid var(--t-border-strong); border-radius: 6px; background: transparent; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-transition-fast); margin-top: 2px; } .checkbox__input[aria-checked="true"], .checkbox__input--checked { background: var(--t-primary); border-color: var(--t-primary); } .checkbox__input[aria-checked="true"]::after, .checkbox__input--checked::after { content: '✓'; color: var(--t-on-primary); font-size: 12px; font-weight: var(--t-weight-bold); } .checkbox__label { font-size: var(--t-font-size-base); color: var(--t-text); line-height: 1.4; } .checkbox__label--sm { font-size: var(--t-font-size-sm); } .checkbox--disabled { opacity: 0.5; cursor: not-allowed; } /* Dark variant (Storybook pattern) */ .checkbox-row { display: flex; align-items: center; gap: var(--t-space-sm); padding: var(--t-space-md) var(--t-space-lg); background: var(--t-surface-inverted); border-radius: var(--t-radius-md); } .checkbox-row .checkbox__input { border-color: var(--t-text-inverted); } .checkbox-row .checkbox__label { color: var(--t-text-inverted); } /* ================================================================ 35. STYLED RADIO ================================================================ */ .radio-group { display: flex; flex-direction: column; gap: var(--t-space-sm); } .radio-group--horizontal { flex-direction: row; gap: var(--t-space-lg); } .radio { display: flex; align-items: flex-start; gap: var(--t-space-sm); cursor: pointer; } .radio__input { position: relative; width: 20px; height: 20px; border: 2px solid var(--t-border-strong); border-radius: 50%; background: transparent; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-transition-fast); margin-top: 2px; } .radio__input[aria-checked="true"], .radio__input--checked { border-color: var(--t-primary); } .radio__input[aria-checked="true"]::after, .radio__input--checked::after { content: ''; width: 10px; height: 10px; background: var(--t-primary); border-radius: 50%; } .radio__label { font-size: var(--t-font-size-base); color: var(--t-text); line-height: 1.4; } .radio--disabled { opacity: 0.5; cursor: not-allowed; } /* Dark variant */ .radio-group--dark { padding: var(--t-space-md) var(--t-space-lg); background: var(--t-surface-inverted); border-radius: var(--t-radius-md); } .radio-group--dark .radio__input { border-color: var(--t-text-inverted); } .radio-group--dark .radio__label { color: var(--t-text-inverted); } /* ================================================================ 36. STYLED SELECT ================================================================ */ .select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 320px; height: 61px; padding: 13px 16px; border: 1px solid transparent; border-radius: var(--t-radius-sm); background: var(--t-bg); font-size: var(--t-font-size-base); font-weight: var(--t-weight-medium); color: var(--t-text); cursor: pointer; transition: all var(--t-transition-fast); font-family: var(--t-font); } .select-trigger:focus { outline: 1px dashed var(--t-secondary); outline-offset: 2px; } .select-trigger::after { content: '▾'; font-size: 14px; color: var(--t-text-muted); } .select-trigger--sm { height: 44px; padding: 8px 12px; font-size: var(--t-font-size-sm); } .select-content { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); box-shadow: var(--t-shadow-lg); padding: var(--t-space-2xs); max-height: 280px; overflow-y: auto; z-index: 300; } .select-item { padding: var(--t-space-xs) var(--t-space-sm); border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); color: var(--t-text); cursor: pointer; transition: background var(--t-transition-fast); } .select-item:hover { background: var(--t-surface-alt); } .select-item--selected { background: var(--t-surface-alt); font-weight: var(--t-weight-medium); } /* ================================================================ 37. COLLAPSIBLE ================================================================ */ .collapsible { } .collapsible__trigger { display: inline-flex; align-items: center; gap: var(--t-space-xs); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); color: var(--t-text); background: none; border: none; cursor: pointer; padding: 0; font-family: var(--t-font); } .collapsible__trigger-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); font-size: 14px; transition: transform var(--t-transition); } .collapsible--open .collapsible__trigger-icon { transform: rotate(180deg); } .collapsible__content { max-height: 0; overflow: hidden; transition: max-height var(--t-transition-slow); } .collapsible--open .collapsible__content { max-height: 500px; } .collapsible__inner { padding: var(--t-space-sm) 0; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); margin-top: var(--t-space-xs); } .collapsible__item { padding: var(--t-space-xs) var(--t-space-sm); font-size: var(--t-font-size-sm); color: var(--t-text); font-family: var(--t-font-mono); } /* ================================================================ 38. DROPDOWN MENU ================================================================ */ .dropdown { position: relative; display: inline-block; } .dropdown__content { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); box-shadow: var(--t-shadow-lg); padding: var(--t-space-2xs); z-index: 300; opacity: 0; visibility: hidden; transform: translateY(4px); transition: all var(--t-transition); } .dropdown--open .dropdown__content { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown__label { padding: var(--t-space-xs) var(--t-space-sm); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-text-muted); } .dropdown__item { display: block; width: 100%; padding: var(--t-space-xs) var(--t-space-sm); border-radius: var(--t-radius-sm); font-size: var(--t-font-size-sm); color: var(--t-text); background: none; border: none; cursor: pointer; text-align: left; transition: background var(--t-transition-fast); font-family: var(--t-font); text-decoration: none; } .dropdown__item:hover { background: var(--t-surface-alt); } .dropdown__item--danger { color: var(--t-accent-3); } .dropdown__item--danger:hover { background: var(--t-accent-3-bg); } .dropdown__separator { height: 1px; background: var(--t-border); margin: var(--t-space-2xs) 0; } /* ================================================================ 39. MATERIAL ICON ================================================================ */ .material-icon { display: inline-flex; align-items: center; justify-content: center; font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif; font-size: 24px; font-weight: normal; font-style: normal; line-height: 1; color: inherit; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .material-icon--sm { font-size: 18px; } .material-icon--lg { font-size: 32px; } .material-icon--xl { font-size: 48px; } /* ================================================================ 40. NAME TAG ================================================================ */ .name-tag { display: flex; align-items: center; gap: var(--t-space-sm); } .name-tag__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .name-tag__avatar--sm { width: 32px; height: 32px; } .name-tag__avatar--lg { width: 56px; height: 56px; } .name-tag__name { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); color: var(--t-text); } .name-tag__role { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* ================================================================ 41. OVERLINE ELEMENT ================================================================ */ .overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-text-muted); line-height: 1.4; } .overline--primary { color: var(--t-primary); } .overline--secondary { color: var(--t-secondary); } .overline--inverted { color: var(--t-text-inverted-muted); } /* ================================================================ 42. STACKED HEADING ================================================================ */ .stacked-heading { margin-bottom: var(--t-space-lg); } .stacked-heading .overline { margin-bottom: var(--t-space-xs); } .stacked-heading__title { font-family: var(--t-font-headline); font-size: clamp(28px, 3vw + 12px, 48px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); color: var(--t-text); } .stacked-heading__subtitle { font-size: var(--t-font-size-md); color: var(--t-text-secondary); margin-top: var(--t-space-xs); max-width: 640px; line-height: var(--t-leading-normal); } /* ================================================================ 43. TAG LIST ================================================================ */ .tag-list { display: flex; flex-wrap: wrap; gap: var(--t-space-2xs); } .tag-list__item { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--t-border); border-radius: var(--t-radius-sm); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-text-secondary); text-transform: uppercase; letter-spacing: 0.02em; background: var(--t-bg); text-decoration: none; transition: all var(--t-transition-fast); } .tag-list__item:hover { border-color: var(--t-border-strong); background: var(--t-surface); } /* ================================================================ 44. UI BADGE (Extended — Storybook variants) ================================================================ */ .badge--outline { background: transparent; border: 1px solid currentColor; } .badge--dark-green { background: var(--t-surface-inverted); color: var(--t-text-inverted); } .badge--neutral { background: var(--t-surface); color: var(--t-text-secondary); } .badge--with-icon { display: inline-flex; align-items: center; gap: 4px; } .badge__icon { font-size: 12px; line-height: 1; } /* ================================================================ 45. CARD BOTTOM BAR ================================================================ */ .card-bottom-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--t-space-sm) var(--t-space-md); border-top: 1px solid var(--t-border); font-size: var(--t-font-size-xs); color: var(--t-text-muted); } .card-bottom-bar--dark { background: var(--t-surface-inverted); border-color: var(--t-border); color: var(--t-text-inverted-muted); } .card-bottom-bar__logo { height: 20px; opacity: 0.7; } .card-bottom-bar__meta { display: flex; align-items: center; gap: var(--t-space-xs); } /* ================================================================ 46. CARD RESOURCE DETAILS ================================================================ */ .card-resource-details { display: flex; align-items: center; gap: var(--t-space-xs); font-size: var(--t-font-size-xs); color: var(--t-text-muted); } .card-resource-details__icon { width: 16px; height: 16px; flex-shrink: 0; } .card-resource-details__type { font-weight: var(--t-weight-semibold); color: var(--t-text-secondary); } .card-resource-details__date { color: var(--t-text-muted); } .card-resource-details__duration { color: var(--t-text-muted); } .card-resource-details__separator { width: 3px; height: 3px; background: var(--t-text-muted); border-radius: 50%; } /* ================================================================ 47. CARD STATUS TAG ================================================================ */ .card-status-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--t-radius-pill); font-size: 10px; font-weight: var(--t-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; } .card-status-tag--certified { background: var(--t-accent-1-bg); color: var(--t-accent-1); } .card-status-tag--beta { background: var(--t-accent-2-bg); color: var(--t-accent-2); } .card-status-tag--new { background: var(--t-accent-4-bg); color: var(--t-accent-4); } .card-status-tag--deprecated { background: var(--t-accent-3-bg); color: var(--t-accent-3); } .card-status-tag--coming-soon { background: var(--t-accent-5-bg); color: var(--t-accent-5); } .card-status-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ================================================================ 48. CARD — ARROW ================================================================ */ .card-arrow { display: flex; flex-direction: column; justify-content: space-between; padding: var(--t-space-lg); border-radius: var(--t-radius-lg); background: var(--t-surface-inverted); color: var(--t-text-inverted); text-decoration: none; min-height: 180px; transition: all var(--t-transition); } .card-arrow:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lg); } .card-arrow--surface { background: var(--t-surface); color: var(--t-text); } .card-arrow--primary { background: var(--t-primary); color: var(--t-on-primary); } .card-arrow--accent { background: var(--t-secondary); color: var(--t-text-inverted); } .card-arrow__title { font-family: var(--t-font-headline); font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-xs); } .card-arrow__desc { font-size: var(--t-font-size-sm); opacity: 0.85; line-height: var(--t-leading-normal); } .card-arrow__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); display: flex; align-items: center; justify-content: center; align-self: flex-end; font-size: 16px; transition: transform var(--t-transition); } .card-arrow:hover .card-arrow__icon { transform: translateX(4px); } .card-arrow--primary .card-arrow__icon { background: var(--t-on-primary); color: var(--t-primary); } /* ================================================================ 49. CARD — AGENT ================================================================ */ .card-agent { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-lg); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-agent:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-md); border-color: var(--t-primary); } .card-agent__header { display: flex; align-items: center; gap: var(--t-space-sm); margin-bottom: var(--t-space-md); } .card-agent__icon { width: 48px; height: 48px; border-radius: var(--t-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .card-agent__name { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); } .card-agent__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); margin-bottom: var(--t-space-md); } .card-agent__tags { display: flex; flex-wrap: wrap; gap: 4px; } /* ================================================================ 50. CARD — CONNECTOR ================================================================ */ .card-connector { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-lg); text-decoration: none; color: var(--t-text); text-align: center; transition: all var(--t-transition); } .card-connector:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-md); border-color: var(--t-border-strong); } .card-connector__logo { width: 48px; height: 48px; object-fit: contain; margin: 0 auto var(--t-space-sm); } .card-connector__name { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); margin-bottom: 2px; } .card-connector__category { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* ================================================================ 51. CARD — CUSTOMER ================================================================ */ .card-customer { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); overflow: hidden; text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-customer:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lg); } .card-customer__image { width: 100%; height: 200px; object-fit: cover; } .card-customer__body { padding: var(--t-space-lg); } .card-customer__logo { height: 24px; object-fit: contain; margin-bottom: var(--t-space-sm); opacity: 0.7; } .card-customer__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); line-height: var(--t-leading-snug); } .card-customer__excerpt { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* ================================================================ 52. CARD — CUSTOMER HIGHLIGHT ================================================================ */ .card-customer-highlight { background: var(--t-surface-alt); border-radius: var(--t-radius-lg); padding: var(--t-space-2xl); display: flex; gap: var(--t-space-xl); align-items: center; text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-customer-highlight:hover { box-shadow: var(--t-shadow-md); } .card-customer-highlight__image { width: 200px; height: 200px; object-fit: cover; border-radius: var(--t-radius-md); flex-shrink: 0; } .card-customer-highlight__stat { font-family: var(--t-font-headline); font-size: var(--t-font-size-3xl); font-weight: var(--t-weight-extrabold); color: var(--t-primary); margin-bottom: var(--t-space-xs); } .card-customer-highlight__title { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .card-customer-highlight__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } @media (max-width: 600px) { .card-customer-highlight { flex-direction: column; } .card-customer-highlight__image { width: 100%; height: 160px; } } /* ================================================================ 53. CARD — CUSTOMER QUOTE ================================================================ */ .card-customer-quote { background: var(--t-surface-inverted); border-radius: var(--t-radius-lg); padding: var(--t-space-xl); color: var(--t-text-inverted); } .card-customer-quote__text { font-size: var(--t-font-size-md); font-style: italic; line-height: var(--t-leading-normal); margin-bottom: var(--t-space-lg); } .card-customer-quote__author { display: flex; align-items: center; gap: var(--t-space-sm); } .card-customer-quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .card-customer-quote__name { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); } .card-customer-quote__role { font-size: var(--t-font-size-xs); opacity: 0.7; } /* ================================================================ 54. CARD — RESOURCE ================================================================ */ .card-resource { text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-resource:hover { transform: translateY(-2px); } .card-resource__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--t-radius-md); background: var(--t-surface-alt); margin-bottom: var(--t-space-sm); } .card-resource__meta { display: flex; align-items: center; gap: var(--t-space-xs); font-size: var(--t-font-size-xs); color: var(--t-text-muted); margin-bottom: var(--t-space-xs); } .card-resource__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-snug); margin-bottom: var(--t-space-xs); } .card-resource__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); margin-bottom: var(--t-space-sm); } .card-resource__tags { display: flex; flex-wrap: wrap; gap: 4px; } /* Inline variant */ .card-resource--inline { display: flex; gap: var(--t-space-md); align-items: flex-start; } .card-resource--inline .card-resource__image { width: 160px; flex-shrink: 0; margin-bottom: 0; } /* ================================================================ 55. CARD — AUTHOR ================================================================ */ .card-author { display: flex; align-items: center; gap: var(--t-space-md); padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-author:hover { border-color: var(--t-border-strong); box-shadow: var(--t-shadow-sm); } .card-author__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .card-author--sm .card-author__avatar { width: 40px; height: 40px; } .card-author--lg .card-author__avatar { width: 80px; height: 80px; } .card-author__name { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: 2px; } .card-author__bio { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* ================================================================ 56. CARD — GLOSSARY TERM ================================================================ */ .card-glossary { padding: var(--t-space-md) var(--t-space-lg); border-bottom: 1px solid var(--t-border); text-decoration: none; color: var(--t-text); transition: background var(--t-transition-fast); } .card-glossary:hover { background: var(--t-surface); } .card-glossary__term { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: 2px; } .card-glossary__definition { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* ================================================================ 57. CARD — PRESS / LOCATION / PARTNER / SESSION / ROADMAP ================================================================ */ /* Press card */ .card-press { padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-press:hover { box-shadow: var(--t-shadow-md); border-color: var(--t-border-strong); } .card-press__source { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-semibold); color: var(--t-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--t-space-xs); } .card-press__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .card-press__date { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* Location card */ .card-location { padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); text-align: center; } .card-location__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--t-radius-sm); margin-bottom: var(--t-space-sm); } .card-location__city { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: 2px; } .card-location__address { font-size: var(--t-font-size-xs); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* Partner card */ .card-partner { display: flex; align-items: center; gap: var(--t-space-md); padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); transition: all var(--t-transition); } .card-partner:hover { border-color: var(--t-border-strong); box-shadow: var(--t-shadow-sm); } .card-partner__logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .card-partner__name { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); } .card-partner__type { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* Session card */ .card-session { padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-session:hover { border-color: var(--t-secondary); box-shadow: var(--t-shadow-md); } .card-session__time { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-bold); color: var(--t-secondary); margin-bottom: var(--t-space-xs); } .card-session__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .card-session__speakers { display: flex; gap: var(--t-space-xs); flex-wrap: wrap; margin-top: var(--t-space-sm); } /* Roadmap card */ .card-roadmap { padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); } .card-roadmap__status { margin-bottom: var(--t-space-sm); } .card-roadmap__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .card-roadmap__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* Portrait text card */ .card-portrait { display: flex; flex-direction: column; border-radius: var(--t-radius-lg); overflow: hidden; background: var(--t-bg); border: 1px solid var(--t-border); transition: all var(--t-transition); } .card-portrait:hover { box-shadow: var(--t-shadow-md); } .card-portrait__image { width: 100%; height: 240px; object-fit: cover; } .card-portrait__body { padding: var(--t-space-lg); } .card-portrait__logo { height: 24px; object-fit: contain; margin-bottom: var(--t-space-sm); } .card-portrait__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .card-portrait__text { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } .card-portrait__quote { font-size: var(--t-font-size-sm); font-style: italic; color: var(--t-text-secondary); line-height: var(--t-leading-normal); border-left: 3px solid var(--t-primary); padding-left: var(--t-space-sm); } /* Image content card */ .card-image-content { display: flex; gap: var(--t-space-lg); border-radius: var(--t-radius-lg); overflow: hidden; background: var(--t-bg); border: 1px solid var(--t-border); transition: all var(--t-transition); } .card-image-content:hover { box-shadow: var(--t-shadow-md); } .card-image-content__image { width: 200px; object-fit: cover; flex-shrink: 0; } .card-image-content__body { padding: var(--t-space-lg); display: flex; flex-direction: column; justify-content: center; } .card-image-content__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .card-image-content__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* Highlight card */ .card-highlight { background: var(--t-surface-alt); border-radius: var(--t-radius-lg); padding: var(--t-space-xl); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-highlight:hover { box-shadow: var(--t-shadow-md); } .card-highlight__overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-secondary); margin-bottom: var(--t-space-sm); } .card-highlight__title { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-xs); } .card-highlight__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* ================================================================ 58. CALLOUT BLOCK ================================================================ */ .callout { padding: var(--t-space-md) var(--t-space-lg); border-radius: var(--t-radius-sm); border-left: 4px solid; font-size: var(--t-font-size-sm); line-height: var(--t-leading-normal); } .callout--info { border-color: var(--t-accent-2); background: var(--t-accent-2-bg); } .callout--warning { border-color: var(--t-accent-4); background: var(--t-accent-4-bg); } .callout--error { border-color: var(--t-accent-3); background: var(--t-accent-3-bg); } .callout--success { border-color: var(--t-accent-1); background: var(--t-accent-1-bg); } .callout--tip { border-color: var(--t-accent-6); background: var(--t-accent-6-bg); } .callout__icon { font-size: 20px; margin-bottom: var(--t-space-xs); } .callout__title { font-weight: var(--t-weight-semibold); color: var(--t-text); margin-bottom: var(--t-space-2xs); } .callout__text { color: var(--t-text-secondary); } /* ================================================================ 59. CALLOUT CTA BLOCK ================================================================ */ .callout-cta { border-radius: var(--t-radius-lg); padding: var(--t-space-xl); display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; } .callout-cta--sm { min-height: 200px; padding: var(--t-space-lg); } .callout-cta--lg { min-height: 320px; padding: var(--t-space-2xl); } /* Color variants */ .callout-cta--dark-green { background: var(--t-surface-inverted); color: var(--t-text-inverted); } .callout-cta--light-green { background: var(--t-primary); color: var(--t-on-primary); } .callout-cta--pink { background: var(--t-accent-3); color: var(--t-on-primary); } .callout-cta--blue { background: var(--t-accent-2); color: var(--t-on-primary); } .callout-cta--neutral { background: var(--t-surface-alt); color: var(--t-text); } .callout-cta__title { font-size: clamp(24px, 2vw + 12px, 36px); font-weight: var(--t-weight-extrabold); font-style: italic; line-height: var(--t-leading-tight); } .callout-cta__actions { margin-top: var(--t-space-xl); } /* ================================================================ 60. CALLOUT QUOTE BLOCK ================================================================ */ .callout-quote { border-radius: var(--t-radius-lg); padding: var(--t-space-xl); background: var(--t-surface-alt); } .callout-quote--inverted { background: var(--t-surface-inverted); color: var(--t-text-inverted); } .callout-quote__text { font-size: var(--t-font-size-lg); font-style: italic; line-height: var(--t-leading-normal); margin-bottom: var(--t-space-lg); } .callout-quote__mark { font-size: 48px; line-height: 1; color: var(--t-primary); margin-bottom: var(--t-space-sm); } .callout-quote__author { display: flex; align-items: center; gap: var(--t-space-sm); } /* ================================================================ 61. BLOCKQUOTE BLOCK ================================================================ */ .blockquote { border-radius: var(--t-radius-lg); padding: var(--t-space-2xl); background: var(--t-surface-inverted); color: var(--t-text-inverted); text-align: center; } .blockquote--light { background: var(--t-surface-alt); color: var(--t-text); } .blockquote__text { font-family: var(--t-font-headline); font-size: clamp(20px, 2vw + 10px, 32px); font-weight: var(--t-weight-bold); font-style: italic; line-height: var(--t-leading-snug); margin-bottom: var(--t-space-lg); } .blockquote__attribution { font-size: var(--t-font-size-sm); opacity: 0.75; } /* ================================================================ 62. CAROUSEL ================================================================ */ .carousel { position: relative; overflow: hidden; } .carousel__track { display: flex; gap: var(--t-space-md); transition: transform var(--t-transition-slow); scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 auto; scroll-snap-align: start; } .carousel__slide--third { width: calc(33.333% - var(--t-space-md) * 2 / 3); } .carousel__slide--half { width: calc(50% - var(--t-space-md) / 2); } .carousel__slide--full { width: 100%; } .carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--t-space-xs); margin-top: var(--t-space-lg); } .carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-border-strong); border: none; cursor: pointer; transition: all var(--t-transition-fast); padding: 0; } .carousel__dot--active { background: var(--t-primary); width: 24px; border-radius: var(--t-radius-pill); } .carousel__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--t-bg); border: 1px solid var(--t-border); cursor: pointer; font-size: 18px; color: var(--t-text); transition: all var(--t-transition-fast); box-shadow: var(--t-shadow-sm); } .carousel__btn:hover { background: var(--t-surface); box-shadow: var(--t-shadow-md); } .carousel__btn--prev { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; } .carousel__btn--next { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; } /* Logo carousel */ .carousel-logos .carousel__track { animation: carousel-scroll 20s linear infinite; } @keyframes carousel-scroll { to { transform: translateX(-50%); } } .carousel-logos__item { display: flex; align-items: center; justify-content: center; padding: 0 var(--t-space-xl); min-width: 160px; } .carousel-logos__item img { max-height: 32px; opacity: 0.5; transition: opacity var(--t-transition); } .carousel-logos__item:hover img { opacity: 1; } /* ================================================================ 63. ZIGZAG BLOCK ================================================================ */ .zigzag { display: flex; flex-direction: column; gap: var(--t-space-3xl); } .zigzag-entry { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-2xl); align-items: center; } .zigzag-entry:nth-child(even) { direction: rtl; } .zigzag-entry:nth-child(even) > * { direction: ltr; } .zigzag-entry__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--t-radius-lg); } .zigzag-entry__content { padding: var(--t-space-xl); background: var(--t-surface); border-radius: var(--t-radius-lg); } .zigzag-entry__title { font-family: var(--t-font-headline); font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-sm); color: var(--t-text); } .zigzag-entry__text { font-size: var(--t-font-size-base); color: var(--t-text-secondary); line-height: var(--t-leading-normal); } @media (max-width: 768px) { .zigzag-entry { grid-template-columns: 1fr; } .zigzag-entry:nth-child(even) { direction: ltr; } } /* ================================================================ 64. STAT BLOCK ================================================================ */ .stat-block { background: var(--t-surface); border-radius: var(--t-radius-lg); padding: var(--t-space-xl); text-align: left; } .stat-block--inverted { background: var(--t-surface-inverted); color: var(--t-text-inverted); } .stat-block__value { font-family: var(--t-font-headline); font-size: clamp(40px, 4vw + 16px, 72px); font-weight: var(--t-weight-extrabold); line-height: 1; color: var(--t-primary); margin-bottom: var(--t-space-md); } .stat-block__label { font-size: var(--t-font-size-base); font-weight: var(--t-weight-medium); color: var(--t-text); } .stat-block--inverted .stat-block__label { color: var(--t-text-inverted); } /* ================================================================ 65. VIDEO DISPLAY BLOCK ================================================================ */ .video-display { position: relative; border-radius: var(--t-radius-lg); overflow: hidden; background: var(--t-surface-deep); aspect-ratio: 16/9; } .video-display__poster { width: 100%; height: 100%; object-fit: cover; } .video-display__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; border: none; transition: transform var(--t-transition); box-shadow: var(--t-shadow-lg); } .video-display__play:hover { transform: translate(-50%, -50%) scale(1.1); } .video-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--t-space-sm); padding: var(--t-space-sm) var(--t-space-md); background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: var(--t-text-inverted); } .video-controls__btn { background: none; border: none; color: var(--t-text-inverted); cursor: pointer; font-size: 18px; padding: 4px; } .video-controls__progress { flex: 1; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; position: relative; } .video-controls__progress-fill { height: 100%; background: var(--t-primary); border-radius: 2px; } .video-controls__time { font-size: var(--t-font-size-xs); font-family: var(--t-font-mono); } /* ================================================================ 66. COUNTDOWN TICKER ================================================================ */ .countdown-ticker { display: flex; gap: var(--t-space-md); justify-content: center; } .countdown-ticker__unit { text-align: center; } .countdown-ticker__value { font-family: var(--t-font-headline); font-size: clamp(32px, 4vw, 64px); font-weight: var(--t-weight-extrabold); line-height: 1; color: var(--t-text); } .countdown-ticker__label { font-size: var(--t-font-size-xs); font-weight: var(--t-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-text-muted); margin-top: var(--t-space-2xs); } .countdown-ticker__separator { font-size: clamp(24px, 3vw, 48px); font-weight: var(--t-weight-bold); color: var(--t-text-muted); align-self: flex-start; } /* ================================================================ 67. FEATURE TICKER ================================================================ */ .feature-ticker { overflow: hidden; padding: var(--t-space-lg) 0; } .feature-ticker__track { display: flex; gap: var(--t-space-2xl); animation: ticker-scroll 30s linear infinite; width: max-content; } .feature-ticker__item { display: flex; align-items: center; gap: var(--t-space-sm); white-space: nowrap; font-size: var(--t-font-size-lg); font-weight: var(--t-weight-bold); color: var(--t-text); } .feature-ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-primary); flex-shrink: 0; } @keyframes ticker-scroll { to { transform: translateX(-50%); } } /* ================================================================ 68. HERO HOME BLOCK ================================================================ */ .hero-home { background: var(--t-surface-deep); padding: var(--t-space-4xl) var(--t-space-xl); text-align: center; position: relative; overflow: hidden; } .hero-home__title { font-family: var(--t-font-headline); font-size: clamp(40px, 5vw + 20px, 80px); font-weight: var(--t-weight-extrabold); color: var(--t-text-inverted); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-lg); position: relative; } .hero-home__subtitle { font-size: var(--t-font-size-md); color: var(--t-text-inverted-muted); max-width: 600px; margin: 0 auto var(--t-space-xl); position: relative; } .hero-home__actions { display: flex; gap: var(--t-space-sm); justify-content: center; position: relative; } /* ================================================================ 69. PRODUCT HERO ================================================================ */ .hero-product { border-radius: var(--t-radius-lg); padding: var(--t-space-3xl) var(--t-space-2xl); position: relative; overflow: hidden; } .hero-product--neutral { background: var(--t-surface); } .hero-product--dark { background: var(--t-surface-inverted); color: var(--t-text-inverted); } .hero-product--green { background: var(--t-secondary); color: var(--t-text-inverted); } .hero-product--blue { background: var(--t-accent-2); color: var(--t-on-primary); } .hero-product__title { font-family: var(--t-font-headline); font-size: clamp(36px, 4vw + 16px, 64px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-md); max-width: 600px; } .hero-product__desc { font-size: var(--t-font-size-base); max-width: 480px; margin-bottom: var(--t-space-xl); opacity: 0.85; line-height: var(--t-leading-normal); } .hero-product__actions { display: flex; gap: var(--t-space-sm); } .hero-product__image { position: absolute; right: 0; bottom: 0; max-width: 45%; max-height: 90%; object-fit: contain; } @media (max-width: 768px) { .hero-product { padding: var(--t-space-2xl) var(--t-space-lg); } .hero-product__image { position: static; max-width: 100%; margin-top: var(--t-space-xl); } } /* ================================================================ 70. PILLAR PRODUCT HERO ================================================================ */ .hero-pillar { border-radius: var(--t-radius-lg); padding: var(--t-space-3xl) var(--t-space-2xl); background: var(--t-surface-inverted); color: var(--t-text-inverted); display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-2xl); align-items: center; } .hero-pillar__overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-primary); margin-bottom: var(--t-space-sm); } .hero-pillar__title { font-family: var(--t-font-headline); font-size: clamp(28px, 3vw + 12px, 48px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-md); } .hero-pillar__desc { font-size: var(--t-font-size-base); opacity: 0.8; margin-bottom: var(--t-space-xl); line-height: var(--t-leading-normal); } .hero-pillar__image { width: 100%; border-radius: var(--t-radius-md); object-fit: cover; } @media (max-width: 768px) { .hero-pillar { grid-template-columns: 1fr; padding: var(--t-space-2xl) var(--t-space-lg); } } /* ================================================================ 71. BLOG POST HERO ================================================================ */ .hero-blog { padding: var(--t-space-2xl); } .hero-blog__category { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-secondary); margin-bottom: var(--t-space-sm); } .hero-blog__title { font-family: var(--t-font-headline); font-size: clamp(28px, 3vw + 12px, 48px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-md); max-width: 720px; } .hero-blog__meta { display: flex; align-items: center; gap: var(--t-space-md); font-size: var(--t-font-size-sm); color: var(--t-text-muted); } .hero-blog__author { display: flex; align-items: center; gap: var(--t-space-xs); } .hero-blog__author-image { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } /* ================================================================ 72. REPORT / GUIDE HERO ================================================================ */ .hero-report { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-2xl); align-items: center; padding: var(--t-space-2xl); background: var(--t-surface); border-radius: var(--t-radius-lg); } .hero-report__overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-secondary); margin-bottom: var(--t-space-sm); } .hero-report__title { font-family: var(--t-font-headline); font-size: clamp(24px, 2.5vw + 10px, 40px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-md); } .hero-report__desc { font-size: var(--t-font-size-base); color: var(--t-text-secondary); margin-bottom: var(--t-space-lg); line-height: var(--t-leading-normal); } .hero-report__image { width: 100%; border-radius: var(--t-radius-md); object-fit: contain; box-shadow: var(--t-shadow-lg); } @media (max-width: 768px) { .hero-report { grid-template-columns: 1fr; } } /* ================================================================ 73. SLIDER ZOOM ================================================================ */ .slider-zoom { position: relative; border-radius: var(--t-radius-lg); overflow: hidden; } .slider-zoom__track { display: flex; transition: transform 0.4s ease; } .slider-zoom__slide { min-width: 100%; position: relative; } .slider-zoom__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .slider-zoom__content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--t-space-xl); background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--t-text-inverted); } .slider-zoom__title { font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); } /* Logo variant */ .slider-zoom-logo { display: flex; align-items: center; gap: var(--t-space-xl); padding: var(--t-space-xl); } .slider-zoom-logo__logos { display: flex; flex-direction: column; gap: var(--t-space-sm); flex-shrink: 0; } .slider-zoom-logo__item { padding: var(--t-space-sm) var(--t-space-md); border-radius: var(--t-radius-sm); cursor: pointer; opacity: 0.5; transition: all var(--t-transition); } .slider-zoom-logo__item--active { opacity: 1; background: var(--t-surface-alt); } .slider-zoom-logo__display { flex: 1; border-radius: var(--t-radius-lg); overflow: hidden; } /* ================================================================ 74. COMPANY BLOCK ================================================================ */ .company-block { display: flex; align-items: center; gap: var(--t-space-lg); padding: var(--t-space-lg); } .company-block__logo { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; } .company-block__name { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); } .company-block__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } /* ================================================================ 75. SUMMARY BLOCK ================================================================ */ .summary-block { background: var(--t-surface); border-radius: var(--t-radius-lg); padding: var(--t-space-xl); } .summary-block__title { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-md); } .summary-block__list { list-style: none; display: flex; flex-direction: column; gap: var(--t-space-sm); } .summary-block__item { display: flex; align-items: flex-start; gap: var(--t-space-xs); font-size: var(--t-font-size-sm); color: var(--t-text-secondary); line-height: var(--t-leading-normal); } .summary-block__item::before { content: '•'; color: var(--t-primary); font-weight: var(--t-weight-bold); flex-shrink: 0; } /* ================================================================ 76. HTML LIST BLOCK ================================================================ */ .html-list { list-style: none; display: flex; flex-direction: column; gap: var(--t-space-sm); } .html-list--ordered { counter-reset: html-list; } .html-list--ordered .html-list__item::before { counter-increment: html-list; content: counter(html-list) '.'; font-weight: var(--t-weight-bold); color: var(--t-primary); } .html-list__item { display: flex; gap: var(--t-space-xs); font-size: var(--t-font-size-base); line-height: var(--t-leading-normal); } .html-list:not(.html-list--ordered) .html-list__item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--t-primary); flex-shrink: 0; margin-top: 9px; } /* ================================================================ 77. IMAGE TEXT CONTAINER ================================================================ */ .image-text-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-2xl); align-items: center; } .image-text-container--reverse { direction: rtl; } .image-text-container--reverse > * { direction: ltr; } .image-text-container__image { width: 100%; border-radius: var(--t-radius-lg); object-fit: cover; } .image-text-container__content { } .image-text-container__title { font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-sm); } .image-text-container__text { font-size: var(--t-font-size-base); color: var(--t-text-secondary); line-height: var(--t-leading-normal); } @media (max-width: 768px) { .image-text-container { grid-template-columns: 1fr; } } /* ================================================================ 78. AGENDA ITEM / SECTION ================================================================ */ .agenda-item { display: grid; grid-template-columns: 120px 1fr; gap: var(--t-space-lg); padding: var(--t-space-lg) 0; border-bottom: 1px solid var(--t-border); } .agenda-item__time { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); color: var(--t-secondary); } .agenda-item__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-2xs); } .agenda-item__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } .agenda-item__speakers { display: flex; gap: var(--t-space-xs); margin-top: var(--t-space-sm); } .agenda-section { margin-bottom: var(--t-space-2xl); } .agenda-section__title { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-md); padding-bottom: var(--t-space-sm); border-bottom: 2px solid var(--t-primary); } /* ================================================================ 79. SECTION VARIANTS ================================================================ */ /* Blank section (container only) */ .section-blank { padding: var(--t-space-3xl) 0; } .section-blank--surface { background: var(--t-surface); } .section-blank--inverted { background: var(--t-surface-inverted); color: var(--t-text-inverted); } /* Tabbed section */ .tabbed-section { } .tabbed-section__tabs { display: flex; gap: 0; border-bottom: 2px solid var(--t-border); margin-bottom: var(--t-space-xl); } .tabbed-section__panel { } /* Table of contents section */ .toc-section { display: grid; grid-template-columns: 220px 1fr; gap: var(--t-space-2xl); } .toc-section__nav { position: sticky; top: 80px; align-self: start; } .toc-section__nav-item { display: block; padding: var(--t-space-xs) var(--t-space-sm); font-size: var(--t-font-size-sm); color: var(--t-text-muted); text-decoration: none; border-left: 2px solid transparent; transition: all var(--t-transition-fast); } .toc-section__nav-item:hover { color: var(--t-text); } .toc-section__nav-item--active { color: var(--t-text); font-weight: var(--t-weight-medium); border-left-color: var(--t-primary); } .toc-section__content { } @media (max-width: 768px) { .toc-section { grid-template-columns: 1fr; } .toc-section__nav { position: static; display: flex; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--t-border); } .toc-section__nav-item { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; } } /* Visual comparison section */ .visual-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-md); } .visual-comparison__item { border-radius: var(--t-radius-lg); overflow: hidden; border: 1px solid var(--t-border); } .visual-comparison__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .visual-comparison__label { padding: var(--t-space-sm) var(--t-space-md); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); text-align: center; background: var(--t-surface); } /* ================================================================ 80. FORM SECTIONS (Checkbox Card, Radio Card, etc.) ================================================================ */ /* Checkbox card */ .checkbox-card { display: flex; align-items: flex-start; gap: var(--t-space-sm); padding: var(--t-space-md) var(--t-space-lg); border: 2px solid var(--t-border); border-radius: var(--t-radius-md); cursor: pointer; transition: all var(--t-transition-fast); } .checkbox-card:hover { border-color: var(--t-border-strong); } .checkbox-card--selected { border-color: var(--t-primary); background: var(--t-surface); } .checkbox-card__title { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); } .checkbox-card__desc { font-size: var(--t-font-size-xs); color: var(--t-text-muted); margin-top: 2px; } /* Checkbox group */ .checkbox-group { display: flex; flex-direction: column; gap: var(--t-space-sm); } .checkbox-group__label { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); color: var(--t-text); margin-bottom: var(--t-space-xs); } /* Radio card group */ .radio-card-group { display: grid; gap: var(--t-space-sm); } .radio-card-group--2 { grid-template-columns: repeat(2, 1fr); } .radio-card-group--3 { grid-template-columns: repeat(3, 1fr); } .radio-card { display: flex; align-items: flex-start; gap: var(--t-space-sm); padding: var(--t-space-md) var(--t-space-lg); border: 2px solid var(--t-border); border-radius: var(--t-radius-md); cursor: pointer; transition: all var(--t-transition-fast); } .radio-card:hover { border-color: var(--t-border-strong); } .radio-card--selected { border-color: var(--t-primary); background: var(--t-surface); } .radio-card__title { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); } .radio-card__desc { font-size: var(--t-font-size-xs); color: var(--t-text-muted); margin-top: 2px; } /* Selection section */ .selection-section { } .selection-section__label { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-xs); } .selection-section__options { display: flex; flex-wrap: wrap; gap: var(--t-space-xs); } /* ================================================================ 81. LAYOUT — COLUMN / ROW / TIMELINE ================================================================ */ .layout-row { display: flex; gap: var(--t-space-lg); } .layout-row--wrap { flex-wrap: wrap; } .layout-row--center { align-items: center; } .layout-row--between { justify-content: space-between; } .layout-column { flex: 1; min-width: 0; } .layout-column--auto { flex: 0 0 auto; } .layout-column--2 { flex: 2; } .layout-column--3 { flex: 3; } /* Timeline row */ .timeline-row { display: flex; gap: var(--t-space-lg); position: relative; } .timeline-row::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--t-border); } .timeline-row__marker { width: 32px; height: 32px; border-radius: 50%; background: var(--t-primary); display: flex; align-items: center; justify-content: center; color: var(--t-on-primary); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-bold); flex-shrink: 0; position: relative; z-index: 1; } .timeline-row__content { padding-bottom: var(--t-space-xl); flex: 1; } .timeline-row__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-2xs); } .timeline-row__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } .timeline-row__date { font-size: var(--t-font-size-xs); color: var(--t-text-muted); margin-bottom: var(--t-space-2xs); } /* ================================================================ 82. CAROUSEL — PORTRAIT TEXT SECTION ================================================================ */ .carousel-portrait { position: relative; } .carousel-portrait .carousel__track { gap: var(--t-space-lg); } .carousel-portrait .carousel__slide { width: calc(33.333% - var(--t-space-lg) * 2 / 3); } @media (max-width: 900px) { .carousel-portrait .carousel__slide { width: calc(50% - var(--t-space-lg) / 2); } } @media (max-width: 600px) { .carousel-portrait .carousel__slide { width: 85%; } } /* ================================================================ 83. AGENT DIRECTORY PREVIEW ================================================================ */ .agent-directory-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--t-space-md); } /* ================================================================ 84. CUSTOMER STORY BLOCK ================================================================ */ .card-customer-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-xl); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); overflow: hidden; text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .card-customer-story:hover { box-shadow: var(--t-shadow-lg); } .card-customer-story__image { width: 100%; height: 100%; min-height: 240px; object-fit: cover; } .card-customer-story__body { padding: var(--t-space-xl); display: flex; flex-direction: column; justify-content: center; } .card-customer-story__logo { height: 24px; object-fit: contain; margin-bottom: var(--t-space-sm); } .card-customer-story__title { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-sm); } .card-customer-story__excerpt { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } @media (max-width: 600px) { .card-customer-story { grid-template-columns: 1fr; } } /* ================================================================ 85. SEPARATOR BLOCK (Extended) ================================================================ */ .separator-block { border: none; margin: var(--t-space-3xl) 0; } .separator-block--line { height: 1px; background: var(--t-border); } .separator-block--thick { height: 3px; background: var(--t-primary); max-width: 80px; } .separator-block--gradient { height: 2px; background: linear-gradient(90deg, var(--t-primary), var(--t-accent-2), var(--t-accent-3)); } /* ================================================================ 86. VISUALLY HIDDEN (Accessibility) ================================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ================================================================ 87. HERO GRADIENT (2024) ================================================================ */ .hero-gradient { position: relative; padding: var(--t-space-4xl) var(--t-space-xl); overflow: hidden; text-align: center; color: var(--t-text-inverted); } .hero-gradient::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--t-primary) 0%, var(--t-secondary) 50%, var(--t-accent-2) 100%); opacity: 0.95; z-index: 0; } .hero-gradient > * { position: relative; z-index: 1; } .hero-gradient__overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin-bottom: var(--t-space-sm); } .hero-gradient__title { font-size: clamp(36px, 4vw + 16px, 64px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-md); max-width: 720px; margin-left: auto; margin-right: auto; } .hero-gradient__desc { font-size: var(--t-font-size-md); opacity: 0.85; max-width: 560px; margin: 0 auto var(--t-space-xl); line-height: var(--t-leading-normal); } .hero-gradient__actions { display: flex; gap: var(--t-space-sm); justify-content: center; } /* ================================================================ 88. HERO RESOURCES (2024) ================================================================ */ .hero-resources { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t-space-2xl); align-items: center; padding: var(--t-space-3xl) var(--t-space-xl); background: var(--t-surface); border-radius: var(--t-radius-lg); } .hero-resources__overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t-secondary); margin-bottom: var(--t-space-sm); } .hero-resources__title { font-size: clamp(28px, 3vw + 12px, 48px); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-tight); margin-bottom: var(--t-space-md); } .hero-resources__desc { font-size: var(--t-font-size-base); color: var(--t-text-secondary); margin-bottom: var(--t-space-lg); line-height: var(--t-leading-normal); } .hero-resources__image { width: 100%; border-radius: var(--t-radius-md); object-fit: cover; aspect-ratio: 4/3; } @media (max-width: 768px) { .hero-resources { grid-template-columns: 1fr; } } /* ================================================================ 89. PROMO BLOCK (2024) ================================================================ */ .promo { border-radius: var(--t-radius-lg); overflow: hidden; position: relative; } /* Banner style — full-width, image bg */ .promo--banner { display: flex; align-items: center; justify-content: space-between; padding: var(--t-space-2xl) var(--t-space-xl); background: var(--t-surface-inverted); color: var(--t-text-inverted); min-height: 200px; } .promo--banner-accent { background: linear-gradient(135deg, var(--t-primary), var(--t-secondary)); color: var(--t-text-inverted); } .promo__content { max-width: 560px; } .promo__overline { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-bottom: var(--t-space-xs); } .promo__title { font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-xs); line-height: var(--t-leading-tight); } .promo__desc { font-size: var(--t-font-size-sm); opacity: 0.8; line-height: var(--t-leading-normal); margin-bottom: var(--t-space-lg); } .promo__actions { display: flex; gap: var(--t-space-sm); } .promo__image { max-height: 200px; object-fit: contain; flex-shrink: 0; } /* Card style — smaller inline promo */ .promo--card { display: flex; gap: var(--t-space-lg); padding: var(--t-space-lg); background: var(--t-surface-alt); border: 1px solid var(--t-border); align-items: center; } @media (max-width: 600px) { .promo--banner { flex-direction: column; text-align: center; } .promo--card { flex-direction: column; } } /* ================================================================ 90. TEXT BLOCK (2024) ================================================================ */ .text-block { max-width: 720px; font-size: var(--t-font-size-base); line-height: var(--t-leading-normal); color: var(--t-text); } .text-block--centered { margin-left: auto; margin-right: auto; text-align: center; } .text-block--wide { max-width: 960px; } .text-block h2 { font-size: var(--t-font-size-2xl); font-weight: var(--t-weight-extrabold); line-height: var(--t-leading-snug); margin-bottom: var(--t-space-md); color: var(--t-text); } .text-block h3 { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-sm); color: var(--t-text); } .text-block p { margin-bottom: var(--t-space-md); color: var(--t-text-secondary); } .text-block ul, .text-block ol { margin-bottom: var(--t-space-md); padding-left: var(--t-space-lg); } .text-block li { margin-bottom: var(--t-space-xs); color: var(--t-text-secondary); } .text-block a { color: var(--t-primary); text-decoration: underline; text-underline-offset: 2px; } .text-block blockquote { border-left: 3px solid var(--t-primary); padding-left: var(--t-space-md); margin: var(--t-space-lg) 0; font-style: italic; color: var(--t-text-muted); } .text-block code { font-family: var(--t-font-mono); font-size: 0.9em; padding: 2px 6px; border-radius: 4px; background: var(--t-surface-raised); } .text-block pre { background: var(--t-surface-inverted); color: var(--t-text-inverted); padding: var(--t-space-md); border-radius: var(--t-radius-sm); overflow-x: auto; margin-bottom: var(--t-space-md); font-family: var(--t-font-mono); font-size: var(--t-font-size-sm); } .text-block img { max-width: 100%; border-radius: var(--t-radius-sm); margin: var(--t-space-md) 0; } /* ================================================================ 91. CHART (2024) ================================================================ */ .chart { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); padding: var(--t-space-lg); } .chart__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--t-space-md); } .chart__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); } .chart__legend { display: flex; gap: var(--t-space-md); font-size: var(--t-font-size-xs); color: var(--t-text-muted); } .chart__legend-item { display: flex; align-items: center; gap: 4px; } .chart__legend-dot { width: 8px; height: 8px; border-radius: 50%; } .chart__body { position: relative; min-height: 200px; } /* Simple bar chart */ .chart-bars { display: flex; align-items: flex-end; gap: var(--t-space-xs); height: 200px; } .chart-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--t-primary); min-width: 24px; transition: opacity var(--t-transition-fast); } .chart-bar:hover { opacity: 0.8; } .chart-bar--secondary { background: var(--t-secondary); } .chart-bar--accent { background: var(--t-accent-2); } .chart__x-axis { display: flex; justify-content: space-between; margin-top: var(--t-space-xs); font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* ================================================================ 92. DATE TIME BLOCK (2024) ================================================================ */ .datetime-block { display: flex; align-items: center; gap: var(--t-space-sm); } .datetime-block__icon { width: 40px; height: 40px; border-radius: var(--t-radius-sm); background: var(--t-surface-alt); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .datetime-block__date { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); color: var(--t-text); } .datetime-block__time { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } .datetime-block__timezone { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* Calendar date badge style */ .datetime-badge { display: flex; flex-direction: column; align-items: center; width: 56px; border-radius: var(--t-radius-sm); overflow: hidden; border: 1px solid var(--t-border); text-align: center; } .datetime-badge__month { background: var(--t-primary); color: var(--t-on-primary); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-bold); text-transform: uppercase; padding: 2px 0; width: 100%; } .datetime-badge__day { font-size: var(--t-font-size-xl); font-weight: var(--t-weight-extrabold); padding: var(--t-space-xs) 0; } /* ================================================================ 93. FILTERABLE LIST (2024) ================================================================ */ .filterable-list { } .filterable-list__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--t-space-md); margin-bottom: var(--t-space-lg); } .filterable-list__count { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } .filterable-list__filters { display: flex; gap: var(--t-space-xs); flex-wrap: wrap; } .filterable-list__search { padding: 8px 14px; border: 1px solid var(--t-border); border-radius: var(--t-radius-pill); background: var(--t-bg); font-size: var(--t-font-size-sm); color: var(--t-text); outline: none; min-width: 200px; font-family: var(--t-font); } .filterable-list__search:focus { border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-border-focus); } .filterable-list__grid { display: grid; gap: var(--t-space-md); } .filterable-list__grid--2 { grid-template-columns: repeat(2, 1fr); } .filterable-list__grid--3 { grid-template-columns: repeat(3, 1fr); } .filterable-list__grid--4 { grid-template-columns: repeat(4, 1fr); } .filterable-list__empty { text-align: center; padding: var(--t-space-3xl); color: var(--t-text-muted); font-size: var(--t-font-size-sm); } @media (max-width: 768px) { .filterable-list__grid--3, .filterable-list__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .filterable-list__grid--2, .filterable-list__grid--3, .filterable-list__grid--4 { grid-template-columns: 1fr; } } /* ================================================================ 94. INTEGRATIONS BLOCK (2024) ================================================================ */ .integrations-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--t-space-md); } .integrations-block__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--t-space-sm); padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .integrations-block__item:hover { border-color: var(--t-border-strong); box-shadow: var(--t-shadow-md); transform: translateY(-2px); } .integrations-block__icon { width: 48px; height: 48px; object-fit: contain; } .integrations-block__name { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); } .integrations-block__category { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* ================================================================ 95. MAP VIEWER (2024) ================================================================ */ .map-viewer { position: relative; border-radius: var(--t-radius-lg); overflow: hidden; background: var(--t-surface); min-height: 400px; } .map-viewer__map { width: 100%; height: 100%; min-height: 400px; } .map-viewer__overlay { position: absolute; bottom: var(--t-space-md); left: var(--t-space-md); right: var(--t-space-md); display: flex; gap: var(--t-space-sm); overflow-x: auto; } .map-viewer__pin { flex-shrink: 0; padding: var(--t-space-sm) var(--t-space-md); background: var(--t-bg); border-radius: var(--t-radius-sm); box-shadow: var(--t-shadow-md); font-size: var(--t-font-size-sm); min-width: 160px; } .map-viewer__pin-city { font-weight: var(--t-weight-bold); margin-bottom: 2px; } .map-viewer__pin-address { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* ================================================================ 96. MEDIA BLOCK (2024) ================================================================ */ .media-block { border-radius: var(--t-radius-lg); overflow: hidden; position: relative; } .media-block__image { width: 100%; display: block; object-fit: cover; } .media-block__video { width: 100%; display: block; aspect-ratio: 16/9; } .media-block__caption { padding: var(--t-space-sm) var(--t-space-md); font-size: var(--t-font-size-xs); color: var(--t-text-muted); font-style: italic; background: var(--t-surface); } .media-block--rounded { border-radius: var(--t-radius-lg); } .media-block--shadow { box-shadow: var(--t-shadow-lg); } .media-block--bordered { border: 1px solid var(--t-border); } /* ================================================================ 97. QUOTE LIST (2024) ================================================================ */ .quote-list { display: grid; gap: var(--t-space-lg); } .quote-list--2 { grid-template-columns: repeat(2, 1fr); } .quote-list--3 { grid-template-columns: repeat(3, 1fr); } .quote-list__item { background: var(--t-surface); border-radius: var(--t-radius-md); padding: var(--t-space-xl); display: flex; flex-direction: column; } .quote-list__text { font-size: var(--t-font-size-base); font-style: italic; line-height: var(--t-leading-normal); color: var(--t-text); flex: 1; margin-bottom: var(--t-space-lg); } .quote-list__text::before { content: '"'; font-size: 36px; line-height: 1; color: var(--t-primary); display: block; margin-bottom: var(--t-space-xs); } .quote-list__author { display: flex; align-items: center; gap: var(--t-space-sm); } .quote-list__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .quote-list__name { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); } .quote-list__role { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } @media (max-width: 768px) { .quote-list--2, .quote-list--3 { grid-template-columns: 1fr; } } /* ================================================================ 98. ROADSHOW BLOCK (2024) ================================================================ */ .roadshow-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--t-space-md); } .roadshow-block__item { padding: var(--t-space-lg); background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-md); text-decoration: none; color: var(--t-text); transition: all var(--t-transition); } .roadshow-block__item:hover { border-color: var(--t-primary); box-shadow: var(--t-shadow-md); } .roadshow-block__date { font-family: var(--t-font-mono); font-size: var(--t-font-size-xs); font-weight: var(--t-weight-bold); color: var(--t-secondary); text-transform: uppercase; margin-bottom: var(--t-space-xs); } .roadshow-block__city { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-2xs); } .roadshow-block__venue { font-size: var(--t-font-size-sm); color: var(--t-text-muted); margin-bottom: var(--t-space-md); } .roadshow-block__cta { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); color: var(--t-primary); } /* ================================================================ 99. SAMPLE SIZE CALCULATOR (2024) ================================================================ */ .calculator { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); padding: var(--t-space-xl); } .calculator__header { margin-bottom: var(--t-space-lg); } .calculator__title { font-size: var(--t-font-size-lg); font-weight: var(--t-weight-extrabold); margin-bottom: var(--t-space-2xs); } .calculator__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } .calculator__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--t-space-md); margin-bottom: var(--t-space-lg); } .calculator__result { padding: var(--t-space-lg); background: var(--t-surface-alt); border-radius: var(--t-radius-md); text-align: center; } .calculator__result-value { font-size: var(--t-font-size-3xl); font-weight: var(--t-weight-extrabold); color: var(--t-primary); margin-bottom: var(--t-space-2xs); } .calculator__result-label { font-size: var(--t-font-size-sm); color: var(--t-text-muted); } @media (max-width: 600px) { .calculator__fields { grid-template-columns: 1fr; } } /* ================================================================ 100. SPONSOR LIST TABS (2024) ================================================================ */ .sponsor-list { } .sponsor-list__tabs { display: flex; gap: 0; border-bottom: 2px solid var(--t-border); margin-bottom: var(--t-space-xl); } .sponsor-list__tab { padding: var(--t-space-sm) var(--t-space-lg); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-semibold); color: var(--t-text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--t-transition-fast); font-family: var(--t-font); } .sponsor-list__tab:hover { color: var(--t-text); } .sponsor-list__tab--active { color: var(--t-text); border-bottom-color: var(--t-primary); } .sponsor-list__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--t-space-lg); } .sponsor-list__item { display: flex; align-items: center; justify-content: center; padding: var(--t-space-lg); background: var(--t-surface); border-radius: var(--t-radius-sm); transition: all var(--t-transition-fast); } .sponsor-list__item:hover { background: var(--t-surface-alt); } .sponsor-list__item img { max-height: 40px; max-width: 120px; object-fit: contain; opacity: 0.7; transition: opacity var(--t-transition); } .sponsor-list__item:hover img { opacity: 1; } /* ================================================================ 101. STICKY PANELS (2024) ================================================================ */ .sticky-panels { display: flex; gap: var(--t-space-2xl); } .sticky-panels__nav { width: 280px; flex-shrink: 0; position: sticky; top: 80px; align-self: flex-start; } .sticky-panels__nav-item { display: block; padding: var(--t-space-sm) var(--t-space-md); font-size: var(--t-font-size-sm); font-weight: var(--t-weight-medium); color: var(--t-text-muted); text-decoration: none; border-left: 3px solid transparent; transition: all var(--t-transition-fast); } .sticky-panels__nav-item:hover { color: var(--t-text); } .sticky-panels__nav-item--active { color: var(--t-text); font-weight: var(--t-weight-semibold); border-left-color: var(--t-primary); } .sticky-panels__content { flex: 1; min-width: 0; } .sticky-panels__panel { min-height: 50vh; padding: var(--t-space-2xl) 0; border-bottom: 1px solid var(--t-border); } .sticky-panels__panel:last-child { border-bottom: none; } @media (max-width: 768px) { .sticky-panels { flex-direction: column; } .sticky-panels__nav { width: 100%; position: static; display: flex; overflow-x: auto; border-bottom: 1px solid var(--t-border); } .sticky-panels__nav-item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; } } /* ================================================================ 102. VIDEO LISTING (2024) ================================================================ */ .video-listing { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--t-space-lg); } .video-listing__item { text-decoration: none; color: var(--t-text); transition: transform var(--t-transition); } .video-listing__item:hover { transform: translateY(-2px); } .video-listing__thumbnail { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--t-radius-md); overflow: hidden; background: var(--t-surface-inverted); margin-bottom: var(--t-space-sm); } .video-listing__thumbnail img { width: 100%; height: 100%; object-fit: cover; } .video-listing__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--t-text); } .video-listing__duration { position: absolute; bottom: var(--t-space-xs); right: var(--t-space-xs); padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.75); color: var(--t-text-inverted); font-size: var(--t-font-size-xs); font-family: var(--t-font-mono); } .video-listing__title { font-size: var(--t-font-size-sm); font-weight: var(--t-weight-bold); margin-bottom: 2px; line-height: var(--t-leading-snug); } .video-listing__meta { font-size: var(--t-font-size-xs); color: var(--t-text-muted); } /* ================================================================ 103. CARD LIST (2024) ================================================================ */ .card-list { display: grid; gap: var(--t-space-md); } .card-list--2 { grid-template-columns: repeat(2, 1fr); } .card-list--3 { grid-template-columns: repeat(3, 1fr); } .card-list--4 { grid-template-columns: repeat(4, 1fr); } .card-list--horizontal { grid-template-columns: 1fr; } .card-list--horizontal .card, .card-list--horizontal .card-feature, .card-list--horizontal .card-resource { display: flex; gap: var(--t-space-md); align-items: flex-start; } @media (max-width: 768px) { .card-list--3, .card-list--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .card-list--2, .card-list--3, .card-list--4 { grid-template-columns: 1fr; } } /* ================================================================ 104. BLOB TEXT (2024) ================================================================ */ .blob-text { display: inline; padding: 4px 0; background-image: linear-gradient(120deg, var(--t-accent-1-bg) 0%, var(--t-accent-1-bg) 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 88%; } .blob-text--primary { background-image: linear-gradient(120deg, var(--t-primary) 0%, var(--t-primary) 100%); background-size: 100% 30%; } .blob-text--secondary { background-image: linear-gradient(120deg, var(--t-accent-2-bg) 0%, var(--t-accent-2-bg) 100%); } .blob-text--accent { background-image: linear-gradient(120deg, var(--t-accent-3-bg) 0%, var(--t-accent-3-bg) 100%); } /* ================================================================ 105. STEPPED ILLUSTRATION (2024) ================================================================ */ .stepped-illustration { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--t-space-lg); counter-reset: step; } .stepped-illustration__step { text-align: center; position: relative; } .stepped-illustration__step::before { counter-increment: step; content: counter(step); display: flex; width: 40px; height: 40px; border-radius: 50%; background: var(--t-primary); color: var(--t-on-primary); font-weight: var(--t-weight-bold); font-size: var(--t-font-size-base); align-items: center; justify-content: center; margin: 0 auto var(--t-space-md); } .stepped-illustration__image { width: 100%; max-width: 180px; margin: 0 auto var(--t-space-sm); aspect-ratio: 1; object-fit: contain; } .stepped-illustration__title { font-size: var(--t-font-size-base); font-weight: var(--t-weight-bold); margin-bottom: var(--t-space-2xs); } .stepped-illustration__desc { font-size: var(--t-font-size-sm); color: var(--t-text-muted); line-height: var(--t-leading-normal); } /* Connector line between steps */ .stepped-illustration--connected .stepped-illustration__step:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: calc(50% + 28px); width: calc(100% - 56px); height: 2px; background: var(--t-border); }