/* F12 Design System - Components PHILOSOPHY: Composition over specialization - Components handle ONLY their core concern (typography, appearance, interaction) - Spacing is controlled by PARENT CONTAINERS (f12-stack) - Layout is controlled by UTILITIES (u-f12-text-center, etc.) - No magic margins - explicit composition everywhere PATTERN:

Label

Title

Description

All component selectors use :where(.f12) for zero specificity, allowing easy overrides without !important. The .f12 wrapper on or a container scopes the design system. */ :where(.f12) .f12-section-header { margin: 0; color: var(--f12-color-text-muted); font-weight: var(--f12-font-weight-bold); display: flex; align-items: center; gap: var(--f12-space-4); padding-bottom: var(--f12-space-4); border-bottom: 1px solid var(--f12-color-border-subtle); } /* When section headers opt into the eyebrow baseline, increase hierarchy slightly. */ :where(.f12) .f12-section-header.f12-eyebrow { font-size: var(--f12-font-size-sm); text-transform: uppercase; letter-spacing: var(--f12-letter-spacing-editorial); } /* Eyebrow / kicker label Guardrail: variants also include the base styles to prevent broken UI when the base class is missed. */ :where(.f12) :is(.f12-eyebrow, .f12-eyebrow--section, .f12-eyebrow--card, .f12-eyebrow--group) { display: block; font-size: var(--f12-font-size-xs); font-weight: var(--f12-font-weight-bold); text-transform: uppercase; letter-spacing: var(--f12-letter-spacing-caps); line-height: var(--f12-line-height-tight); color: var(--f12-color-text-muted); /* Base default */ } /* For sidebar/section headings */ :where(.f12) .f12-eyebrow--section { font-size: var(--f12-font-size-2xs); color: var(--f12-color-brand-editorial); letter-spacing: var(--f12-letter-spacing-editorial); } /* For item/card metadata */ :where(.f12) .f12-eyebrow--card { font-size: var(--f12-font-size-2xs); letter-spacing: var(--f12-letter-spacing-editorial); color: var(--f12-color-brand-editorial); /* Red is now the default for metadata */ } /* For subtle group labels (e.g. button group headings in the showcase) */ :where(.f12) .f12-eyebrow--group { font-family: var(--f12-font-family-sans); font-size: var(--f12-font-size-2xs); color: var(--f12-color-text-muted); margin: 0; } /* Color Overrides (when needed) */ :where(.f12) .f12-eyebrow--accent { color: var(--f12-color-brand-editorial); } :where(.f12) .f12-eyebrow--muted { color: var(--f12-color-text-muted); } :where(.f12) .f12-eyebrow--on-dark { color: var(--f12-text-style-hero-excerpt-color); } :where(.f12) .f12-on-dark { --f12-color-text-heading: var(--f12-color-text-on-dark); --f12-color-text-primary: var(--f12-color-text-on-dark); --f12-color-text-muted: var(--f12-color-text-on-dark); --f12-color-border-subtle: var(--f12-color-border-on-dark); } /* Context helper: wrap content on dark backgrounds in `.f12-on-dark`. This keeps typography + components consistent without one-off overrides (e.g. soft buttons become white). */ :where(.f12) .f12-on-dark .f12-btn--soft { --f12-btn-fg: var(--f12-color-surface-page); } :where(.f12) .f12-on-dark .f12-btn--soft::after { background: var(--f12-color-surface-page); } :where(.f12) .f12-on-dark .f12-title { color: var(--f12-color-text-heading); } :where(.f12) .f12-on-dark :is(.f12-eyebrow, .f12-eyebrow--section, .f12-eyebrow--card, .f12-eyebrow--group) { color: rgba(255, 255, 255, 0.85); } /* Shared media play action used across video/image overlays. Feature CSS can override the local custom properties at the section root. */ :where(.f12) .f12-media-play { --f12-media-play-duration: 1.8s; --f12-media-play-border-color: var(--f12-color-border-on-overlay); --f12-media-play-bg: var(--f12-color-surface-overlay); --f12-media-play-color: var(--f12-color-text-on-overlay); --f12-media-play-shadow: var(--f12-shadow-overlay-soft); --f12-media-play-shadow-active: var(--f12-shadow-overlay-strong); --f12-media-play-glow-color: rgba(255, 255, 255, 0.28); --f12-media-play-ring-color: var(--f12-color-border-on-overlay-strong); --f12-media-play-glow-inset: calc(-1 * (var(--f12-space-2) + var(--f12-space-0-5))); --f12-media-play-ring-inset: calc(var(--f12-space-3) * -0.5); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: var(--f12-space-3); padding: var(--f12-space-3) var(--f12-space-6); border-radius: var(--f12-radius-pill); border: 1px solid var(--f12-media-play-border-color); background: var(--f12-media-play-bg); color: var(--f12-media-play-color); font-size: var(--f12-font-size-sm); font-weight: var(--f12-font-weight-bold); letter-spacing: var(--f12-letter-spacing-caps); line-height: 1; text-transform: uppercase; box-shadow: var(--f12-media-play-shadow); pointer-events: none; z-index: 2; } :where(.f12) .f12-media-play svg { width: var(--f12-space-4); height: var(--f12-space-4); } :where(.f12) .f12-media-play--icon-only { --f12-media-play-icon-size: 0.88rem; width: 3.4rem; height: 3.4rem; padding: 0; gap: 0; border-radius: 50%; } :where(.f12) .f12-media-play--icon-only svg { width: var(--f12-media-play-icon-size); height: var(--f12-media-play-icon-size); margin-left: 0.1rem; fill: currentColor; stroke: none; } :where(.f12) .f12-media-play--icon-only svg * { fill: currentColor; stroke: none; } :where(.f12) .f12-media-play--pulse { animation: f12-media-play-pulse var(--f12-media-play-duration) ease-in-out 3; } :where(.f12) .f12-media-play--soft-idle { animation: f12-media-play-soft-idle 4.8s ease-in-out infinite; } :where(.f12) .f12-media-play--soft-idle::before { content: ""; position: absolute; inset: -0.35rem; border-radius: inherit; background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%); opacity: 0.22; animation: f12-media-play-soft-halo 4.8s ease-in-out infinite; } :where(.f12) .f12-media-play--soft-idle::after { content: ""; position: absolute; inset: -0.55rem; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.4); opacity: 0; animation: f12-media-play-soft-ring 4.8s ease-out infinite; } :where(.f12) .f12-media-play--pulse::before { content: ""; position: absolute; inset: var(--f12-media-play-glow-inset); border-radius: inherit; background: radial-gradient(circle, var(--f12-media-play-glow-color), transparent 60%); opacity: 0; animation: f12-media-play-glow var(--f12-media-play-duration) ease-out 3; } :where(.f12) .f12-media-play--pulse::after { content: ""; position: absolute; inset: var(--f12-media-play-ring-inset); border-radius: inherit; border: 1px solid var(--f12-media-play-ring-color); opacity: 0; animation: f12-media-play-ripple var(--f12-media-play-duration) ease-out 3; } @keyframes f12-media-play-pulse { 0% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--f12-media-play-shadow); } 50% { transform: translate(-50%, -50%) scale(1.045); box-shadow: var(--f12-media-play-shadow-active); } 100% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--f12-media-play-shadow); } } @keyframes f12-media-play-soft-idle { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--f12-media-play-shadow); } 50% { transform: translate(-50%, -50%) scale(1.03); box-shadow: var(--f12-media-play-shadow-active); } } @keyframes f12-media-play-soft-halo { 0%, 100% { opacity: 0.18; transform: scale(0.94); } 50% { opacity: 0.34; transform: scale(1.03); } } @keyframes f12-media-play-soft-ring { 0%, 12% { opacity: 0; transform: scale(0.92); } 45% { opacity: 0.48; } 100% { opacity: 0; transform: scale(1.28); } } @keyframes f12-media-play-glow { 0% { opacity: 0; transform: scale(0.85); } 40% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } } @keyframes f12-media-play-ripple { 0% { opacity: 0; transform: scale(0.8); } 30% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { :where(.f12) .f12-media-play--soft-idle, :where(.f12) .f12-media-play--soft-idle::before, :where(.f12) .f12-media-play--soft-idle::after { animation: none; } } .f12-video-lightbox-open { overflow: hidden; } :where(.f12) .f12-video-lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: var(--f12-space-6); background: rgba(15, 21, 30, 0.56); backdrop-filter: blur(2px); } :where(.f12) .f12-video-lightbox[hidden] { display: none !important; } :where(.f12) .f12-video-lightbox__backdrop { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; border: 0 !important; border-color: transparent !important; border-radius: 0; padding: 0; background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: transparent !important; cursor: pointer; } :where(.f12) .f12-video-lightbox__backdrop:hover, :where(.f12) .f12-video-lightbox__backdrop:focus, :where(.f12) .f12-video-lightbox__backdrop:focus-visible, :where(.f12) .f12-video-lightbox__backdrop:active { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: transparent !important; transform: none !important; outline: none; } :where(.f12) .f12-video-lightbox__dialog { position: relative; width: min(100%, 1040px); border-radius: var(--f12-radius-2); background: transparent; box-shadow: none; border: 0; padding: var(--f12-space-2); display: grid; gap: var(--f12-space-2); z-index: 1; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity var(--f12-duration-normal) var(--f12-ease-standard), transform var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-video-lightbox.is-open .f12-video-lightbox__dialog { opacity: 1; transform: translateY(0) scale(1); } :where(.f12) .f12-video-lightbox__close { position: absolute; top: -1.25rem; right: -1.25rem; z-index: 3; width: 2.5rem; height: 2.5rem; color: #fff; } :where(.f12) .f12-video-lightbox__close::after { content: none; } :where(.f12) .f12-video-lightbox__close .f12-icon-wrap { --f12-icon-wrap-bg: rgba(16, 21, 31, 0.74); --f12-icon-wrap-fg: #fff; --f12-icon-wrap-border-color: rgba(255, 255, 255, 0.34); --f12-icon-wrap-shadow: 0 10px 24px rgba(6, 10, 16, 0.34); } :where(.f12) .f12-video-lightbox__close:hover .f12-icon-wrap, :where(.f12) .f12-video-lightbox__close:focus-visible .f12-icon-wrap { --f12-icon-wrap-bg: rgba(20, 27, 39, 0.9); --f12-icon-wrap-border-color: rgba(255, 255, 255, 0.56); --f12-icon-wrap-shadow: 0 14px 30px rgba(6, 10, 16, 0.45); } :where(.f12) .f12-video-lightbox__close:hover, :where(.f12) .f12-video-lightbox__close:focus-visible { transform: none; } :where(.f12) .f12-video-lightbox__frame-wrap { position: relative; overflow: visible; } :where(.f12) .f12-video-lightbox__frame { aspect-ratio: 16 / 9; border-radius: var(--f12-radius-2); overflow: hidden; background: #000; border: 1px solid var(--f12-color-border-subtle); box-shadow: var(--f12-shadow-surface-raised); } :where(.f12) .f12-video-lightbox__frame iframe, :where(.f12) .f12-video-lightbox__frame video { width: 100%; height: 100%; display: block; } :where(.f12) .f12-video-lightbox__frame iframe { border: 0; background: #000; } :where(.f12) .f12-video-lightbox__frame video { object-fit: contain; background: #000; } :where(.f12) .f12-video-lightbox__fallback-shell { display: grid; justify-content: center; padding-top: var(--f12-space-4); } :where(.f12) .f12-video-lightbox__fallback-shell[hidden] { display: none; } :where(.f12) .f12-video-lightbox__fallback { justify-self: center; } @media (prefers-reduced-motion: reduce) { :where(.f12) .f12-video-lightbox, :where(.f12) .f12-video-lightbox__dialog { transition: none; } } .f12-share-dialog-open { overflow: hidden; } :where(.f12) .f12-share-dialog { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: var(--f12-space-6); background: rgba(11, 18, 28, 0.54); backdrop-filter: blur(4px); } :where(.f12) .f12-share-dialog[hidden] { display: none !important; } :where(.f12) .f12-share-dialog__backdrop { appearance: none; -webkit-appearance: none; position: absolute; inset: 0; border: 0 !important; border-color: transparent !important; border-radius: 0; padding: 0; background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: transparent !important; cursor: pointer; } :where(.f12) .f12-share-dialog__backdrop:hover, :where(.f12) .f12-share-dialog__backdrop:focus, :where(.f12) .f12-share-dialog__backdrop:focus-visible, :where(.f12) .f12-share-dialog__backdrop:active { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: transparent !important; transform: none !important; outline: none; } :where(.f12) .f12-share-dialog__dialog { position: relative; width: min(100%, 32.5rem); z-index: 1; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity var(--f12-duration-normal) var(--f12-ease-standard), transform var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-share-dialog.is-open .f12-share-dialog__dialog { opacity: 1; transform: translateY(0) scale(1); } :where(.f12) .f12-share-dialog__surface { position: relative; display: grid; gap: var(--f12-space-5); padding: var(--f12-space-6); border: 1px solid var(--f12-color-border-subtle); border-radius: var(--f12-radius-3); background: var(--f12-color-surface-card); box-shadow: var(--f12-shadow-overlay-strong); overflow: visible; } :where(.f12) .f12-share-dialog__close { position: absolute; top: 0; right: 0; transform: translate(40%, -40%); z-index: 3; width: 1.875rem; height: 1.875rem; border: 1px solid var(--f12-color-border-subtle); border-radius: var(--f12-radius-pill); background: var(--f12-color-surface-card); box-shadow: var(--f12-shadow-surface-subtle); color: var(--f12-color-text-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: box-shadow var(--f12-duration-fast) var(--f12-ease-standard), color var(--f12-duration-fast) var(--f12-ease-standard), background var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-share-dialog__close:hover, :where(.f12) .f12-share-dialog__close:focus-visible { background: var(--f12-color-surface-subtle); color: var(--f12-color-text-primary); box-shadow: var(--f12-shadow-surface-hover); outline: none; } :where(.f12) .f12-share-dialog__close svg { width: 0.75rem; height: 0.75rem; display: block; flex-shrink: 0; transform: translateZ(0); backface-visibility: hidden; will-change: transform; } :where(.f12) .f12-share-dialog__close svg line { stroke: currentColor; vector-effect: non-scaling-stroke; } :where(.f12) .f12-share-dialog__header { padding-right: var(--f12-space-6); padding-bottom: var(--f12-space-4); border-bottom: 1px solid var(--f12-color-border-subtle); text-align: center; } :where(.f12) .f12-share-dialog__title { margin: 0; color: var(--f12-color-text-heading); font-size: var(--f12-text-style-heading-sm-size); line-height: var(--f12-text-style-heading-sm-line-height); font-weight: var(--f12-text-style-heading-sm-font-weight); letter-spacing: var(--f12-text-style-heading-sm-letter-spacing); text-wrap: balance; } :where(.f12) .f12-share-dialog__media-shell[hidden] { display: none; } :where(.f12) .f12-share-dialog__media-shell:is(.is-pending, .is-image-loading) .f12-share-dialog__media { background: linear-gradient( 110deg, var(--f12-color-surface-subtle) 0%, rgba(255, 255, 255, 0.82) 45%, var(--f12-color-surface-subtle) 90% ); background-size: 220% 100%; background-position: 120% 0; animation: f12ShareMediaShimmer 1.8s var(--f12-ease-standard) infinite; } :where(.f12) .f12-share-dialog__media-shell:is(.is-pending, .is-image-loading) .f12-share-dialog__media--portrait { aspect-ratio: 3 / 4; } :where(.f12) .f12-share-dialog__media-shell:is(.is-pending, .is-image-loading) .f12-share-dialog__image { visibility: hidden; } :where(.f12) .f12-share-dialog__media-shell:is(.is-pending, .is-image-loading) .f12-share-dialog__media-link { pointer-events: none; } @keyframes f12ShareMediaShimmer { to { background-position: -20% 0; } } @media (prefers-reduced-motion: reduce) { :where(.f12) .f12-share-dialog__media-shell:is(.is-pending, .is-image-loading) .f12-share-dialog__media { animation: none; } } :where(.f12) .f12-share-dialog__media { overflow: hidden; border: 1px solid var(--f12-color-border-subtle); border-radius: var(--f12-radius-2); background: var(--f12-color-surface-card); box-shadow: var(--f12-shadow-surface-subtle); } :where(.f12) .f12-share-dialog__media-link { display: block; color: inherit; text-decoration: none; } :where(.f12) .f12-share-dialog__media-link:not(.is-disabled) { cursor: pointer; } :where(.f12) .f12-share-dialog__media-link:not(.is-disabled):hover .f12-share-dialog__media, :where(.f12) .f12-share-dialog__media-link:not(.is-disabled):focus-visible .f12-share-dialog__media { transform: translateY(-1px); box-shadow: var(--f12-shadow-surface-medium); } :where(.f12) .f12-share-dialog__media-link:not(.is-disabled):focus-visible { outline: none; } :where(.f12) .f12-share-dialog__media--wide { aspect-ratio: 16 / 9; } :where(.f12) .f12-share-dialog__media--portrait { width: min(100%, 8.75rem); margin-inline: auto; aspect-ratio: auto; } :where(.f12) .f12-share-dialog__image { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; } :where(.f12) .f12-share-dialog__media--wide .f12-share-dialog__image { height: 100%; } :where(.f12) .f12-share-dialog__channels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--f12-space-5); padding: var(--f12-space-2) 0 var(--f12-space-1); } :where(.f12) .f12-share-dialog__channel { width: 3.75rem; height: 3.75rem; border-radius: var(--f12-radius-pill); border: 1px solid var(--f12-color-border-subtle); background: var(--f12-color-surface-card); color: var(--f12-color-text-primary); box-shadow: var(--f12-shadow-surface-subtle); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform var(--f12-duration-fast) var(--f12-ease-standard), box-shadow var(--f12-duration-fast) var(--f12-ease-standard), border-color var(--f12-duration-fast) var(--f12-ease-standard), color var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-share-dialog__channel:hover, :where(.f12) .f12-share-dialog__channel:focus-visible { transform: translateY(-2px); box-shadow: var(--f12-shadow-surface-hover); outline: none; } :where(.f12) .f12-share-dialog__channel[hidden] { display: none; } :where(.f12) .f12-share-dialog__channel-icon { width: 2.125rem; height: 2.125rem; display: inline-flex; align-items: center; justify-content: center; } :where(.f12) .f12-share-dialog__channel-icon :is(svg, img) { width: 100%; height: 100%; display: block; object-fit: contain; transform: translateZ(0); backface-visibility: hidden; will-change: transform; } :where(.f12) .f12-share-dialog__channel--download .f12-share-dialog__channel-icon { width: 1.75rem; height: 1.75rem; } :where(.f12) .f12-share-dialog__url { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--f12-color-border-subtle); border-radius: var(--f12-radius-1); background: var(--f12-color-surface-subtle); } :where(.f12) .f12-share-dialog__url-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: var(--f12-space-3) var(--f12-space-4); font-family: var(--f12-font-family-sans); font-size: var(--f12-text-style-body-sm-size); line-height: var(--f12-text-style-body-sm-line-height); color: var(--f12-color-text-primary); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; outline: none; } :where(.f12) .f12-share-dialog__copy { flex-shrink: 0; border: 0; border-left: 1px solid var(--f12-color-border-subtle); background: transparent; color: var(--f12-color-text-muted); padding: 0 var(--f12-space-4); display: inline-flex; align-items: center; justify-content: center; transition: background var(--f12-duration-fast) var(--f12-ease-standard), color var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-share-dialog__copy:hover, :where(.f12) .f12-share-dialog__copy:focus-visible { background: rgba(0, 0, 0, 0.04); color: var(--f12-color-text-primary); outline: none; } :where(.f12) .f12-share-dialog__copy :is(svg, img) { width: 1.125rem; height: 1.125rem; display: block; flex-shrink: 0; object-fit: contain; opacity: 0.55; transform: translateZ(0); backface-visibility: hidden; will-change: transform, opacity; transition: transform var(--f12-duration-fast) var(--f12-ease-standard), opacity var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-share-dialog__copy:hover :is(svg, img), :where(.f12) .f12-share-dialog__copy:focus-visible :is(svg, img) { opacity: 0.85; transform: translateZ(0) scale(1.1); } .f12-share-toast { position: fixed; left: 50%; bottom: var(--f12-space-6); transform: translate(-50%, 0.5rem); z-index: 1300; max-width: min(90vw, 22rem); padding: var(--f12-space-3) var(--f12-space-5); border-radius: var(--f12-radius-pill); background: rgba(17, 24, 34, 0.92); color: #fff; font-family: var(--f12-font-family-sans); font-size: var(--f12-text-style-body-sm-size); line-height: var(--f12-text-style-body-sm-line-height); text-align: center; box-shadow: var(--f12-shadow-overlay-strong); opacity: 0; pointer-events: none; transition: opacity var(--f12-duration-normal) var(--f12-ease-standard), transform var(--f12-duration-normal) var(--f12-ease-standard); } .f12-share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 640px) { :where(.f12) .f12-share-dialog { padding: var(--f12-space-4); } :where(.f12) .f12-share-dialog__surface { gap: var(--f12-space-4); padding: var(--f12-space-5); } :where(.f12) .f12-share-dialog__close { transform: translate(20%, -20%); } :where(.f12) .f12-share-dialog__header { padding-right: var(--f12-space-7); } :where(.f12) .f12-share-dialog__channel { width: 3.4rem; height: 3.4rem; } } @media (prefers-reduced-motion: reduce) { :where(.f12) .f12-share-dialog, :where(.f12) .f12-share-dialog__dialog, :where(.f12) .f12-share-dialog__channel, :where(.f12) .f12-share-dialog__copy { transition: none; } } /* Resource media badges (used in Featured Resources cards). */ :where(.f12) .f12-resource-media { --f12-resource-media-ratio: 16 / 9; position: relative; aspect-ratio: var(--f12-resource-media-ratio); background: var(--f12-color-surface-subtle); border-radius: var(--f12-radius-2); overflow: hidden; display: block; } :where(.f12) .f12-resource-media img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } :where(.f12) .f12-resource-media .f12-content-type-badge { display: inline-flex; align-items: center; width: fit-content; padding: var(--f12-space-1) var(--f12-space-3); border-radius: var(--f12-radius-pill); font-size: var(--f12-font-size-2xs); font-weight: var(--f12-font-weight-bold); letter-spacing: var(--f12-letter-spacing-caps); line-height: 1; text-transform: uppercase; position: absolute; top: var(--f12-space-3); right: var(--f12-space-3); background: rgba(24, 28, 34, 0.42); color: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); backdrop-filter: blur(2px); z-index: 2; } /* Titles - Pure typography, no spacing. Use f12-stack containers for spacing control. */ :where(.f12) .f12-title { display: block; margin: 0; color: var(--f12-color-text-heading); font-weight: var(--f12-font-weight-bold); letter-spacing: var(--f12-letter-spacing-tight); line-height: var(--f12-line-height-tight); } /* Small titles (sidebars, metadata, small cards) */ :where(.f12) .f12-title--sm { font-size: var(--f12-text-style-heading-sm-size); line-height: var(--f12-text-style-heading-sm-line-height); font-weight: var(--f12-text-style-heading-sm-font-weight); letter-spacing: var(--f12-text-style-heading-sm-letter-spacing); } /* Medium titles (articles, general content) */ :where(.f12) .f12-title--md { font-size: var(--f12-text-style-heading-md-size); line-height: var(--f12-text-style-heading-md-line-height); font-weight: var(--f12-text-style-heading-md-font-weight); letter-spacing: var(--f12-text-style-heading-md-letter-spacing); } /* Large titles (heroes, featured content) */ :where(.f12) .f12-title--lg { font-size: var(--f12-text-style-heading-lg-size); line-height: var(--f12-text-style-heading-lg-line-height); font-weight: var(--f12-text-style-heading-lg-font-weight); letter-spacing: var(--f12-text-style-heading-lg-letter-spacing); } /* Extra large titles (special displays) */ :where(.f12) .f12-title--xl { font-size: var(--f12-text-style-heading-xl-size); line-height: var(--f12-text-style-heading-xl-line-height); font-weight: var(--f12-text-style-heading-xl-font-weight); letter-spacing: var(--f12-text-style-heading-xl-letter-spacing); } /* Body text */ :where(.f12) .f12-body { margin: 0; /* No inherent margins - containers control spacing */ font-size: var(--f12-text-style-body-md-size); font-weight: var(--f12-text-style-body-md-font-weight); line-height: var(--f12-text-style-body-md-line-height); color: var(--f12-color-text-primary); } /* Body spacing: Adjacent paragraphs get spacing */ :where(.f12) .f12-body+.f12-body { margin-top: var(--f12-space-4); /* 16px between paragraphs */ } /* In composed layouts, the wrapper owns rhythm. This prevents stack gap and paragraph margin from compounding when a text group uses f12-stack. */ :where(.f12) .f12-stack > .f12-body+.f12-body { margin-top: 0; } :where(.f12) .f12-body--sm { font-size: var(--f12-text-style-body-sm-size); font-weight: var(--f12-text-style-body-sm-font-weight); line-height: var(--f12-text-style-body-sm-line-height); } :where(.f12) .f12-body--muted { color: var(--f12-text-style-body-muted-color); } :where(.f12) .f12-meta { margin: 0; font-size: var(--f12-text-style-meta-sm-size); font-weight: var(--f12-text-style-meta-sm-font-weight); line-height: var(--f12-text-style-meta-sm-line-height); color: var(--f12-text-style-meta-sm-color); } :where(.f12) .f12-meta--xs { font-size: var(--f12-text-style-meta-xs-size); font-weight: var(--f12-text-style-meta-xs-font-weight); line-height: var(--f12-text-style-meta-xs-line-height); } :where(.f12) .f12-meta--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(.f12) .f12-body--hero { font-size: var(--f12-text-style-hero-excerpt-size); line-height: var(--f12-text-style-hero-excerpt-line-height); } /* On dark/imagery, hero excerpt uses the dedicated excerpt color token */ :where(.f12) .f12-on-dark .f12-body--hero { color: var(--f12-text-style-hero-excerpt-color); } /* Buttons */ :where(.f12) .f12-btn { --f12-btn-fg: var(--f12-color-text-heading); appearance: none; border: 1px solid transparent; border-radius: var(--f12-radius-pill); padding: 0.7rem 1.25rem; font-weight: var(--f12-font-weight-bold); font-size: var(--f12-font-size-sm); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--f12-space-2); cursor: pointer; text-decoration: none; color: var(--f12-btn-fg); transition: transform var(--f12-duration-normal) var(--f12-ease-standard), background var(--f12-duration-normal) var(--f12-ease-standard), border-color var(--f12-duration-normal) var(--f12-ease-standard), color var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) :is(a.f12-btn, a.f12-btn:link, a.f12-btn:visited, a.f12-btn:hover, a.f12-btn:focus, a.f12-btn:focus-visible, a.f12-btn:active) { color: var(--f12-btn-fg); text-decoration: none; } :where(.f12) .f12-btn:hover { transform: translateY(-1px); color: var(--f12-btn-fg); } :where(.f12) .f12-btn:is(:focus, :focus-visible, :active) { color: var(--f12-btn-fg); } :where(.f12) .f12-btn:disabled, :where(.f12) .f12-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } :where(.f12) .f12-input:disabled { opacity: 0.4; cursor: not-allowed; background: var(--f12-color-surface-subtle); } :where(.f12) .f12-btn--primary { --f12-btn-fg: var(--f12-color-text-primary); background: var(--f12-color-surface-card); border-color: var(--f12-color-border-subtle); box-shadow: var(--f12-shadow-1); } :where(.f12) .f12-btn--primary:hover { box-shadow: var(--f12-shadow-2); border-color: var(--f12-color-border-strong); } :where(.f12) .f12-btn--secondary { --f12-btn-fg: var(--f12-color-text-heading); background: transparent; border-color: var(--f12-color-border-subtle); } :where(.f12) .f12-btn--secondary:hover { background: var(--f12-color-surface-subtle); border-color: var(--f12-color-text-muted); } /* Legacy alias for --secondary (deprecated, use --secondary instead) */ :where(.f12) .f12-btn--outline { --f12-btn-fg: var(--f12-color-text-heading); background: transparent; border-color: var(--f12-color-border-subtle); } :where(.f12) .f12-btn--sm { padding: 0.55rem 1rem; font-size: var(--f12-font-size-sm); } /* Optional block variant for layouts that need full-width buttons */ :where(.f12) .f12-btn--block { display: flex; width: 100%; } :where(.f12) .f12-btn--icon-only { padding: 0.6rem; min-width: 2.5rem; min-height: 2.5rem; } :where(.f12) .f12-btn--icon-only.f12-btn--sm { padding: 0.4rem; min-width: 2rem; min-height: 2rem; } /* Quiet close action: keep the hit target comfortable while the visible shell stays minimal. */ :where(.f12) .f12-btn--close { --f12-close-icon-wrap-size: 1.6rem; --f12-close-icon-wrap-glyph-size: 0.45rem; padding: 0; min-width: 2.25rem; min-height: 2.25rem; border: none; background: transparent; box-shadow: none; line-height: 1; color: currentColor; } :where(.f12) .f12-btn--close > .f12-icon-wrap { --f12-icon-wrap-size: var(--f12-close-icon-wrap-size); --f12-icon-wrap-glyph-size: var(--f12-close-icon-wrap-glyph-size); } :where(.f12) .f12-btn--close:hover, :where(.f12) .f12-btn--close:focus-visible { transform: none; background: transparent; box-shadow: none; color: currentColor; } :where(.f12) .f12-btn--close:hover .f12-icon-wrap, :where(.f12) .f12-btn--close:focus-visible .f12-icon-wrap { border-color: var(--f12-color-text-muted); } :where(.f12) .f12-btn--loading { pointer-events: none; } :where(.f12) .f12-btn--loading::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: var(--f12-space-2); border: 2px solid var(--f12-color-text-muted); border-radius: 50%; border-top-color: transparent; animation: f12-btn-spin 0.6s linear infinite; vertical-align: middle; } :where(.f12) .f12-btn--primary.f12-btn--loading::before { border-color: var(--f12-color-text-muted); border-top-color: transparent; } @keyframes f12-btn-spin { to { transform: rotate(360deg); } } :where(.f12) .f12-btn--soft { --f12-btn-fg: var(--f12-color-text-heading); background: transparent; border: none; border-radius: 0; padding: 0 0 var(--f12-space-2) 0; /* Increased to 8px for elegance */ /* Dark grey text */ text-transform: uppercase; font-weight: var(--f12-font-weight-bold); font-size: var(--f12-font-size-xs); letter-spacing: var(--f12-letter-spacing-caps); position: relative; width: fit-content; align-self: baseline; } :where(.f12) .f12-btn--soft::after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--f12-color-brand-editorial); /* Red underline */ transition: width var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-btn--soft:hover::after { width: 100%; } /* Neutral text-only button. No border, no background, no editorial underline. Use when you need a low-weight action alongside heavier buttons (e.g. "Reject" beside "Save" and "Accept all") without adding visual clutter. */ :where(.f12) .f12-btn--text { --f12-btn-fg: var(--f12-color-text-muted); background: transparent; border: none; padding: 0.7rem 0.5rem; } :where(.f12) .f12-btn--text:hover { --f12-btn-fg: var(--f12-color-text-heading); transform: none; } /* Editorial List / Feed (Balanced Rhythm) */ :where(.f12) .f12-feed--editorial { display: flex; flex-direction: column; gap: var(--f12-space-5); /* 20px gap */ } :where(.f12) .f12-feed--editorial .f12-feed-item { padding-bottom: var(--f12-space-5); /* 20px padding */ border-bottom: 1px solid var(--f12-color-border-subtle); } :where(.f12) .f12-feed--editorial .f12-feed-item:last-child { border-bottom: none; padding-bottom: 0; } /* Tight rhythm removed to allow system default (8px) to take over */ /* Card Patterns (Layout Containers) */ :where(.f12) .f12-card { background: var(--f12-color-surface-card); border-radius: var(--f12-radius-3); box-shadow: var(--f12-shadow-2); padding: var(--f12-space-8); border: 1px solid var(--f12-color-border-subtle); } :where(.f12) .f12-card--bordered { border: 1px solid var(--f12-color-border-subtle); box-shadow: none; } :where(.f12) .f12-card--minimal { background: transparent; box-shadow: none; border: none; border-bottom: 1px solid var(--f12-color-border-subtle); border-radius: 0; padding: var(--f12-space-6) 0; } /* Featured / media card (full-bleed image with overlay + bottom content) */ :where(.f12) .f12-card--featured { --f12-card-featured-min-h: 360px; --f12-card-featured-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%); position: relative; overflow: hidden; padding: 0; border: none; background: #000; min-height: var(--f12-card-featured-min-h); } :where(.f12) a.f12-card--featured { display: block; text-decoration: none; color: inherit; } :where(.f12) .f12-card--featured .f12-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--f12-duration-normal) var(--f12-ease-standard); z-index: 1; } :where(.f12) .f12-card--featured .f12-card__overlay { position: absolute; inset: 0; background: var(--f12-card-featured-overlay); z-index: 2; } :where(.f12) .f12-card--featured .f12-card__content { position: absolute; inset-inline: 0; bottom: 0; padding: var(--f12-space-8); z-index: 3; } :where(.f12) .f12-card--featured:hover .f12-card__img, :where(.f12) .f12-card--featured:focus-visible .f12-card__img, :where(.f12) .f12-card--featured:focus-within .f12-card__img { transform: scale(1.05); } :where(.f12) a.f12-card--featured:focus-visible { outline: 2px solid var(--f12-color-focus-outline); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { :where(.f12) .f12-card--featured .f12-card__img { transition: none; } } /* Section Patterns - DEPRECATED (Use f12-stack instead) Kept for backward compatibility with existing demos. For new work: Use f12-stack f12-stack--xxl or f12-stack--xxxl */ :where(.f12) .f12-section { --f12-section-space: var(--f12-layout-section-gap); --f12-section-intro-space: var(--f12-layout-section-intro-gap); margin-bottom: var(--f12-section-space); } :where(.f12) .f12-section--tight { --f12-section-space: var(--f12-layout-section-gap-tight); --f12-section-intro-space: var(--f12-layout-section-intro-gap-tight); } :where(.f12) .f12-section--airy { --f12-section-space: var(--f12-layout-section-gap-airy); --f12-section-intro-space: var(--f12-layout-section-intro-gap-airy); } /* Stack (vertical rhythm) - Core composition primitive */ /* Spacing quick-reference: - Macro between sections: f12-container + f12-sections (default; use --tight/--grouped/--airy intentionally) - Internal section rhythm: f12-stack with explicit scale (typically --md/--lg) - Heading group rhythm: f12-section-intro (typically --tight) - Editorial two-column rhythm: f12-split-feature (default col-gap 12, row-gap 4; allow col-gap 16 for intentional wide layouts) */ :where(.f12) .f12-stack { display: flex; flex-direction: column; --f12-stack-gap: var(--f12-layout-stack-gap-md); gap: var(--f12-stack-gap); } :where(.f12) .f12-stack--2xs { --f12-stack-gap: var(--f12-space-2); /* 8px - extra tight grouping */ } :where(.f12) .f12-stack--xs { --f12-stack-gap: var(--f12-space-3); /* 12px - tight grouping */ } :where(.f12) .f12-stack--sm { --f12-stack-gap: var(--f12-layout-stack-gap-sm); } :where(.f12) .f12-stack--md { --f12-stack-gap: var(--f12-layout-stack-gap-md); } :where(.f12) .f12-stack--lg { --f12-stack-gap: var(--f12-layout-stack-gap-lg); } :where(.f12) .f12-stack--xl { --f12-stack-gap: var(--f12-space-10); /* 40px */ } :where(.f12) .f12-stack--xxl { --f12-stack-gap: var(--f12-space-16); /* 56px */ } :where(.f12) .f12-stack--xxxl { --f12-stack-gap: var(--f12-space-20); /* 72px */ } /* Keep buttons in stacks intrinsic-width by default. Without this, flex-column stacks stretch buttons full width on desktop. */ :where(.f12) .f12-stack > :is(.f12-btn, a.f12-btn, button.f12-btn):not(.f12-btn--block) { align-self: flex-start; } /* Container: constrained page width */ :where(.f12) .f12-container { max-width: var(--f12-layout-content-max); margin-left: auto; margin-right: auto; width: 100%; } /* Sections: default vertical rhythm between major page sections */ :where(.f12) .f12-sections { display: flex; flex-direction: column; gap: var(--f12-layout-section-gap); } :where(.f12) .f12-sections--tight { gap: var(--f12-layout-section-gap-tight); } :where(.f12) .f12-sections--grouped { gap: var(--f12-layout-section-gap-grouped); } :where(.f12) .f12-sections--airy { gap: var(--f12-layout-section-gap-airy); } @media (max-width: 768px) { :where(.f12) .f12-sections { gap: var(--f12-layout-section-gap-mobile); } :where(.f12) .f12-sections--tight { gap: var(--f12-layout-section-gap-tight-mobile); } :where(.f12) .f12-sections--grouped { gap: var(--f12-layout-section-gap-grouped-mobile); } :where(.f12) .f12-sections--airy { gap: var(--f12-layout-section-gap-airy-mobile); } } /* Section Intro: Semantic grouping for eyebrow + title + description. Internal spacing only - parent containers control external spacing. */ :where(.f12) .f12-section-intro { --f12-section-intro-gap: var(--f12-layout-section-intro-gap); display: flex; flex-direction: column; gap: var(--f12-section-intro-gap); } :where(.f12) .f12-section-intro--tight { --f12-section-intro-gap: var(--f12-layout-section-intro-gap-tight); } :where(.f12) .f12-section-intro--airy { --f12-section-intro-gap: var(--f12-layout-section-intro-gap-airy); } /* Split Feature: reusable two-column editorial section with manual media side. Desktop uses side modifiers; mobile/tablet stacks in reading order. */ :where(.f12) .f12-split-feature { --f12-split-col-gap: var(--f12-space-12); --f12-split-row-gap: var(--f12-space-4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) max-content max-content max-content minmax(0, 1fr); column-gap: var(--f12-split-col-gap); row-gap: var(--f12-split-row-gap); align-items: stretch; } :where(.f12) .f12-split-feature > * { min-width: 0; } :where(.f12) .f12-split-feature__intro { grid-area: intro; display: flex; flex-direction: column; gap: var(--f12-space-3); align-self: start; } :where(.f12) .f12-split-feature__media { grid-area: media; align-self: center; } :where(.f12) .f12-split-feature__body { grid-area: body; align-self: start; } :where(.f12) .f12-split-feature__cta { grid-area: cta; align-self: start; } :where(.f12) .f12-split-feature--media-left { grid-template-areas: "media ." "media intro" "media body" "media cta" "media ."; } :where(.f12) .f12-split-feature--media-right { grid-template-areas: ". media" "intro media" "body media" "cta media" ". media"; } @media (max-width: 1024px) { :where(.f12) .f12-split-feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "intro" "media" "body" "cta"; row-gap: var(--f12-split-row-gap); } :where(.f12) .f12-split-feature__intro, :where(.f12) .f12-split-feature__media, :where(.f12) .f12-split-feature__body, :where(.f12) .f12-split-feature__cta { align-self: start; } } /* Plain icon primitive — glyph only, no decorative container. Use this as the default icon contract in DS-enabled UI. */ :where(.f12) .f12-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: currentColor; } :where(.f12) .f12-icon--sm { width: 1rem; height: 1rem; } :where(.f12) .f12-icon--lg { width: 1.5rem; height: 1.5rem; } :where(.f12) .f12-icon > :is(svg, img) { width: 100%; height: 100%; display: block; } /* Decorative icon wrapper — centred circle with subtle bg and muted icon. Not the default icon primitive. Use only when the surface is intentional. */ :where(.f12) .f12-icon-wrap { --f12-icon-wrap-size: 2.5rem; --f12-icon-wrap-glyph-size: 1.25rem; --f12-icon-wrap-bg: var(--f12-color-surface-subtle); --f12-icon-wrap-fg: var(--f12-color-text-muted); --f12-icon-wrap-border-width: 0; --f12-icon-wrap-border-color: transparent; --f12-icon-wrap-shadow: none; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--f12-icon-wrap-size); height: var(--f12-icon-wrap-size); border: var(--f12-icon-wrap-border-width) solid var(--f12-icon-wrap-border-color); border-radius: var(--f12-radius-pill); background: var(--f12-icon-wrap-bg); box-shadow: var(--f12-icon-wrap-shadow); color: var(--f12-icon-wrap-fg); } :where(.f12) .f12-icon-wrap > .f12-icon { width: var(--f12-icon-wrap-glyph-size); height: var(--f12-icon-wrap-glyph-size); } :where(.f12) .f12-icon-wrap > :is(svg, img) { width: var(--f12-icon-wrap-glyph-size); height: var(--f12-icon-wrap-glyph-size); display: block; } :where(.f12) .f12-icon-wrap--sm { --f12-icon-wrap-size: 2rem; --f12-icon-wrap-glyph-size: 1rem; } :where(.f12) .f12-icon-wrap--lg { --f12-icon-wrap-size: 3rem; --f12-icon-wrap-glyph-size: 1.5rem; } :where(.f12) .f12-icon-wrap--floating { --f12-icon-wrap-bg: rgba(255, 255, 255, 0.92); --f12-icon-wrap-fg: currentColor; --f12-icon-wrap-border-width: 1px; --f12-icon-wrap-border-color: rgba(15, 23, 42, 0.08); --f12-icon-wrap-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } /* Chips & Tags */ :where(.f12) .f12-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 0.85rem; border-radius: var(--f12-radius-pill); font-size: var(--f12-font-size-2xs); font-weight: var(--f12-font-weight-bold); letter-spacing: 0.05rem; text-transform: uppercase; line-height: 1; transition: all var(--f12-duration-normal) var(--f12-ease-standard); background: transparent; color: var(--f12-color-text-muted); border: 1px solid var(--f12-color-border-subtle); cursor: default; white-space: nowrap; } :where(.f12) .f12-chip--standard { text-transform: none; letter-spacing: normal; font-size: var(--f12-font-size-xs); } /* Gray Accent (Filled Variant) */ :where(.f12) .f12-chip--accent { background: var(--f12-color-focus-ring); color: var(--f12-color-text-muted); border-color: transparent; } /* Red Editorial (Filled Rare Touch) */ :where(.f12) .f12-chip--editorial { background: rgba(166, 32, 26, 0.05); color: var(--f12-color-brand-editorial); border-color: transparent; } :where(.f12) .f12-chip--filter { padding: 0.65rem 1.25rem; font-size: var(--f12-font-size-sm); letter-spacing: normal; text-transform: none; cursor: pointer; background: var(--f12-color-surface-card); border-color: var(--f12-color-border-subtle); color: var(--f12-color-text-muted); box-shadow: var(--f12-shadow-surface-subtle); } :where(.f12) .f12-chip--filter:hover { border-color: var(--f12-color-text); color: var(--f12-color-text); box-shadow: var(--f12-shadow-1); } :where(.f12) .f12-chip--filter.is-active { background: var(--f12-color-text-muted); /* Using gray accent */ border-color: var(--f12-color-text-muted); color: #ffffff; box-shadow: var(--f12-shadow-1); } :where(.f12) .f12-filter-group { display: flex; flex-wrap: wrap; gap: var(--f12-space-3); align-items: center; } /* Slider primitive: native-scroll carousel with snap and pointer drag. */ :where(.f12) .f12-slider { position: relative; } :where(.f12) .f12-slider__frame { position: relative; } :where(.f12) .f12-slider__viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: auto; } :where(.f12) .f12-slider__viewport::-webkit-scrollbar { display: none; } :where(.f12) .f12-slider__viewport--draggable { touch-action: pan-y; user-select: none; } :where(.f12) .f12-slider__viewport.is-dragging { scroll-snap-type: none; } :where(.f12) .f12-slider__track { display: flex; } :where(.f12) .f12-slider__arrow { --f12-slider-arrow-transform: none; --f12-slider-arrow-transform-hover: translateY(-1px); appearance: none; border: 1px solid var(--f12-color-border-subtle); background: var(--f12-color-surface-card); color: var(--f12-color-text-muted); border-radius: var(--f12-radius-pill); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transform: var(--f12-slider-arrow-transform); transition: border-color var(--f12-duration-fast) var(--f12-ease-standard), color var(--f12-duration-fast) var(--f12-ease-standard), opacity var(--f12-duration-fast) var(--f12-ease-standard), visibility var(--f12-duration-fast) var(--f12-ease-standard), transform var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-slider__arrow--centered { position: absolute; top: 50%; --f12-slider-arrow-transform: translateY(-50%); --f12-slider-arrow-transform-hover: translateY(calc(-50% - 1px)); } :where(.f12) .f12-slider__arrow:hover:not(:disabled) { border-color: var(--f12-color-text-muted); color: var(--f12-color-text-heading); transform: var(--f12-slider-arrow-transform-hover); } :where(.f12) .f12-slider__arrow:disabled { opacity: 0; visibility: hidden; pointer-events: none; } /* Hide arrows on touch — native swipe takes over */ @media (hover: none) { :where(.f12) .f12-slider__arrow { display: none; } } /* Slider dot indicators */ :where(.f12) .f12-slider__dots { display: flex; justify-content: center; gap: var(--f12-space-2); padding-top: var(--f12-space-4); } :where(.f12) .f12-slider__dot { appearance: none; border: none; padding: 0; cursor: pointer; width: 6px; height: 6px; border-radius: 999px; background: var(--f12-color-border-subtle); transition: background var(--f12-duration-fast) var(--f12-ease-standard), width var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-slider__dot.is-active { background: var(--f12-color-text-muted); width: 18px; } /* Chip rail primitive: horizontal chip scroller with subtle edge hinting. */ :where(.f12) .f12-chip-rail { --f12-chip-rail-edge-fade: 0px; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; } :where(.f12) .f12-chip-rail::-webkit-scrollbar { display: none; } :where(.f12) .f12-chip-rail::before, :where(.f12) .f12-chip-rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--f12-chip-rail-edge-fade); pointer-events: none; z-index: 1; opacity: 0; transition: opacity var(--f12-duration-fast) var(--f12-ease-standard); } :where(.f12) .f12-chip-rail::before { left: 0; background: linear-gradient(to right, var(--f12-color-surface-page) 25%, rgba(255, 255, 255, 0)); } :where(.f12) .f12-chip-rail::after { right: 0; background: linear-gradient(to left, var(--f12-color-surface-page) 25%, rgba(255, 255, 255, 0)); } :where(.f12) .f12-chip-rail.is-overflowing:not(.is-at-start)::before { opacity: 1; } :where(.f12) .f12-chip-rail.is-overflowing:not(.is-at-end)::after { opacity: 1; } /* Form Labels */ :where(.f12) .f12-label { display: block; font-family: var(--f12-font-family-sans); font-size: var(--f12-font-size-2xs); font-weight: var(--f12-font-weight-bold); text-transform: uppercase; letter-spacing: var(--f12-letter-spacing-caps); line-height: var(--f12-line-height-tight); color: var(--f12-color-text-muted); cursor: default; } /* Inputs & Form Elements PHILOSOPHY: All inputs share the same aesthetic foundation. - Pill-shaped for modern, friendly feel (matches buttons) - Subtle surface background for gentle elevation - Smooth hover states for clear interactivity - Gray accent focus for accessible, calm interaction - Composition over customization (use wrappers for icons, etc.) */ :where(.f12) .f12-input, :where(.f12) .ep-search-input { appearance: none; -webkit-appearance: none; width: 100%; padding: 0.75rem 1.25rem; background: var(--f12-color-surface-card); border: 1px solid var(--f12-color-border-subtle); border-radius: var(--f12-radius-pill); font-family: var(--f12-font-family-sans); font-size: var(--f12-font-size-sm); font-weight: var(--f12-font-weight-medium); color: var(--f12-color-text-primary); line-height: 1.5; transition: all var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-input:hover, :where(.f12) .ep-search-input:hover { border-color: var(--f12-color-text-muted); } :where(.f12) .f12-input:focus, :where(.f12) .ep-search-input:focus { outline: none; border-color: var(--f12-color-text-muted); box-shadow: 0 0 0 4px var(--f12-color-focus-ring); } :where(.f12) .f12-input::placeholder, :where(.f12) .ep-search-input::placeholder { color: var(--f12-color-text-muted); opacity: 0.7; } /* Search Input Wrapper Pure composition pattern - wraps base input, adds icon positioning only. */ :where(.f12) .f12-search { position: relative; display: flex; align-items: center; } :where(.f12) .f12-search .f12-input { padding-left: 2.75rem; } :where(.f12) .f12-search__icon { position: absolute; left: 1.125rem; width: 1.125rem; height: 1.125rem; color: var(--f12-color-text-muted); pointer-events: none; transition: all var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-search .f12-input:hover ~ .f12-search__icon, :where(.f12) .f12-search:hover .f12-search__icon { color: var(--f12-color-text-muted); } :where(.f12) .f12-search .f12-input:focus ~ .f12-search__icon { color: var(--f12-color-brand-editorial); transform: scale(1.08); } /* Navigation System */ :where(.f12) .f12-nav-list { display: flex; flex-direction: column; gap: var(--f12-space-1); list-style: none; padding: 0; margin: 0; } :where(.f12) .f12-nav-list--horizontal { flex-direction: row; gap: var(--f12-space-6); } /* Base Nav Link (Pure Minimalist Standard) */ :where(.f12) .f12-nav-link { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem 0.5rem 0; /* Removed left padding to allow for shift */ text-decoration: none; color: var(--f12-color-text-muted); font-size: var(--f12-font-size-sm); font-weight: var(--f12-font-weight-medium); border-radius: 0; /* Sharp edges for sidebar */ border-left: 2px solid transparent; transition: all var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-nav-link:hover { color: var(--f12-color-text-heading); padding-left: var(--f12-space-2); } :where(.f12) .f12-nav-link.is-active { color: var(--f12-color-brand-editorial); font-weight: var(--f12-font-weight-bold); border-left-color: var(--f12-color-brand-editorial); padding-left: var(--f12-space-4); } /* Tab Style (Horizontal - Editorial Line) */ :where(.f12) .f12-nav-list--tabs .f12-nav-link { border-left: none; padding: 0.5rem 0 0.75rem 0; position: relative; background: transparent; } :where(.f12) .f12-nav-list--tabs .f12-nav-link:hover { padding-left: 0; /* No shift for tabs */ color: var(--f12-color-text-heading); } :where(.f12) .f12-nav-list--tabs .f12-nav-link.is-active { border-left: none; padding-left: 0; } :where(.f12) .f12-nav-list--tabs .f12-nav-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--f12-color-brand-editorial); transition: width var(--f12-duration-normal) var(--f12-ease-standard); } :where(.f12) .f12-nav-list--tabs .f12-nav-link:hover::after, :where(.f12) .f12-nav-list--tabs .f12-nav-link.is-active::after { width: 100%; }