/* ============================================================================================= * The Component Club — global theme * One stylesheet for public pages, utility pages and administration interfaces. * ============================================================================================= */ :root { --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --green-950: #062b17; --green-900: #083d20; --green-850: #0a4c27; --green-800: #0c5d2e; --green-700: #0b7a3b; --green-600: #16864a; --green-500: #22a04f; --green-400: #49bd6d; --green-300: #70d68d; --green-200: #b4ecc3; --green-100: #dcf6e4; --green-050: #effbf3; --lime-500: #83c73f; --lime-300: #b9e477; --ink-950: #101813; --ink-900: #17221c; --ink-800: #27362e; --ink-700: #3d4c44; --ink-600: #56655c; --ink-500: #728078; --ink-300: #b6c0ba; --ink-200: #d7ded9; --ink-100: #e9eeeb; --ink-050: #f6f8f7; --white: #ffffff; --cream: #fbfdf9; --surface: var(--white); --surface-soft: #f2f8f4; --surface-green: var(--green-050); --surface-dark: var(--green-950); --surface-dark-soft: var(--green-900); --text: var(--ink-900); --text-strong: var(--ink-950); --text-medium: var(--ink-700); --muted: var(--ink-600); --line: var(--ink-200); --line-strong: color-mix(in srgb, var(--ink-300) 72%, var(--ink-200)); --border-color: var(--line); --line-soft: var(--ink-100); --line-dark: color-mix(in srgb, var(--white) 16%, transparent); --accent: var(--green-700); --accent-strong: var(--green-900); --accent-bright: var(--lime-500); --accent-soft: var(--green-100); --danger: #a63d3d; --danger-soft: #fff2f1; --danger-border: #c87575; --success: var(--green-700); --success-soft: var(--green-050); --good: var(--success); --good-soft: var(--success-soft); --good-border: var(--green-500); --muted-inverse: color-mix(in srgb, var(--white) 72%, transparent); --content: 86rem; --content-wide: 96rem; --prose: 56rem; --page-gutter: clamp(1rem, 3vw, 2rem); --section-gap: clamp(3.5rem, 8vw, 7rem); --section-gap-small: clamp(2.5rem, 5vw, 4rem); --grid-gap: clamp(1rem, 2vw, 1.6rem); --technical-grid: 1.5rem; --technical-grid-fine: 0.375rem; --technical-line: color-mix(in srgb, var(--green-600) 18%, transparent); --technical-line-strong: color-mix(in srgb, var(--green-600) 42%, transparent); --technical-surface: color-mix(in srgb, var(--green-050) 76%, var(--white)); --technical-accent: var(--green-700); --econ-min-height: clamp(5.5rem, 9vw, 7.25rem); --border-width: 0.0625rem; --radius-small: 0.18rem; --radius-control: 0.28rem; --radius-card: 0.38rem; --radius-large: 0.5rem; --radius-pill: 0.32rem; --shadow-small: 0 0.5rem 1.5rem color-mix(in srgb, var(--green-950) 7%, transparent); --shadow-card: 0 1rem 2.8rem color-mix(in srgb, var(--green-950) 8%, transparent); --shadow-focus: 0 0 0 0.2rem color-mix(in srgb, var(--green-600) 20%, transparent); --transition-fast: 140ms ease; --transition: 190ms ease; --marketing-transition: var(--transition-fast); --admin-bg: #f4f6f8; --admin-surface: #ffffff; --admin-surface-soft: #f8fafb; --admin-surface-hover: #f2fbf3; --admin-row-hover: #f6faf6; --admin-text: #182026; --admin-muted: #66727c; --admin-border: #dce2e7; --admin-accent: var(--green-700); --admin-accent-strong: var(--green-900); --admin-danger: #a93232; --admin-danger-strong: #832323; --admin-null: #9b7b55; --admin-json: #4b5f74; --admin-disabled-bg: #eef1f3; --admin-disabled-text: #7d878f; --admin-sidebar: var(--green-950); --admin-sidebar-line: color-mix(in srgb, var(--white) 12%, transparent); --admin-sidebar-text: color-mix(in srgb, var(--white) 78%, transparent); --admin-sidebar-muted: color-mix(in srgb, var(--white) 62%, transparent); --admin-sidebar-faint: color-mix(in srgb, var(--white) 62%, transparent); --admin-sidebar-hover: color-mix(in srgb, var(--white) 9%, transparent); --admin-accent-border: color-mix(in srgb, var(--admin-accent) 45%, transparent); --admin-success-border: color-mix(in srgb, var(--admin-accent) 32%, transparent); --admin-danger-border: color-mix(in srgb, var(--admin-danger) 35%, transparent); --admin-modal-backdrop: color-mix(in srgb, var(--green-950) 72%, transparent); --admin-shadow: 0 0.8rem 2.4rem color-mix(in srgb, var(--ink-950) 12%, transparent); --login-bg: var(--green-050); --login-surface: var(--white); --login-text: var(--text); --login-muted: var(--muted); --login-border: var(--line); --login-accent: var(--accent); --login-accent-strong: var(--accent-strong); --login-danger: var(--danger); --login-shadow: var(--shadow-card); font-family: var(--font-sans); font-size: 100%; color: var(--text); background: var(--surface-soft); } * { box-sizing: border-box; } html { scroll-behavior: smooth; text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } body, button, input, textarea, select { font: inherit; } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-underline-offset: 0.16em; } a:hover { color: var(--accent-strong); } button, a, input, textarea, select { transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } :focus-visible { outline: none; box-shadow: var(--shadow-focus); } ::selection { background: var(--green-200); color: var(--green-950); } h1, h2, h3, h4 { margin-block: 0; color: var(--text-strong); font-weight: 760; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; } h1 { font-size: clamp(2.55rem, 6vw, 5.7rem); } h2 { font-size: clamp(2rem, 4vw, 3.45rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); } p { margin-block: 0; } code, pre { font-family: var(--font-mono); } [hidden] { display: none !important; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .site-shell { min-height: 100dvh; display: flex; flex-direction: column; } #viewport { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content)); margin-inline: auto; flex: 1 0 auto; } .site-page { padding-block: clamp(1.8rem, 2rem, 3rem); } .site-kicker { margin: 0 0 0.7rem; color: var(--accent); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; } .site-kicker--light { color: var(--lime-300); } .site-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45em; min-height: 2.85rem; padding: 0.7rem 1.05rem; border: var(--border-width) solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--white); font-weight: 760; line-height: 1.1; text-decoration: none; cursor: pointer; } .button:hover { transform: translateY(-0.08rem); border-color: var(--accent-strong); background: var(--accent-strong); color: var(--white); } .button--secondary, .button.secondary { border-color: var(--line); background: var(--white); color: var(--text-strong); } .button--secondary:hover, .button.secondary:hover { border-color: var(--green-300); background: var(--green-050); color: var(--green-900); } .button--ghost { border-color: color-mix(in srgb, var(--white) 22%, transparent); background: color-mix(in srgb, var(--green-950) 18%, transparent); color: var(--white); } .button--ghost:hover { border-color: color-mix(in srgb, var(--white) 38%, transparent); background: color-mix(in srgb, var(--white) 14%, transparent); } .button--compact { min-height: 2.45rem; padding: 0.55rem 0.85rem; font-size: 0.86rem; } .site-panel { border: var(--border-width) solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-small); } .site-section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); } .site-section-heading > p { color: var(--text-medium); font-size: 1.02rem; } /* ============================================================================================= * Header and navigation * ============================================================================================= */ .site-header { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.2rem; } .site-brand { display: inline-flex; align-items: center; gap: 0.85rem; color: var(--text-strong); text-decoration: none; } .site-brand:hover { color: var(--text-strong); } .site-brand__mark { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); width: 3.05rem; height: 3.05rem; overflow: hidden; border-radius: 0.75rem; background: var(--green-700); color: var(--white); box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, var(--white) 18%, transparent); } .site-brand__mark::before, .site-brand__mark::after { content: ""; position: absolute; background: var(--lime-500); opacity: 0.95; } .site-brand__mark::before { left: 50%; top: 0; width: 0.12rem; height: 100%; transform: translateX(-50%); } .site-brand__mark::after { left: 0; top: 50%; width: 100%; height: 0.12rem; transform: translateY(-50%); } .site-brand__mark span { position: relative; z-index: 1; display: grid; place-items: center; font-size: 0.76rem; font-weight: 900; line-height: 1; } .site-brand__copy strong, .site-brand__copy span { display: block; } .site-brand__copy strong { font-size: 1.08rem; letter-spacing: -0.02em; } .site-brand__copy span { margin-top: 0.08rem; color: var(--muted); font-size: 0.76rem; } .site-header__actions { display: flex; align-items: center; gap: 1rem; } .site-header__strapline { color: var(--muted); font-size: 0.82rem; } .site-header .button--ghost { border-color: var(--green-700); background: var(--green-700); color: var(--white); } .site-nav-wrap { position: sticky; top: 0; z-index: 30; border-bottom: calc(var(--border-width) * 2) solid var(--lime-500); background: var(--green-700); box-shadow: 0 0.35rem 1.4rem color-mix(in srgb, var(--green-950) 16%, transparent); backdrop-filter: blur(0.8rem); } .site-nav { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content)); min-height: 3.45rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-nav__links, .site-nav__utility { display: flex; align-items: center; gap: 0.12rem; } .site-nav a { display: inline-flex; align-items: center; min-height: 3.45rem; padding-inline: 0.78rem; color: color-mix(in srgb, var(--white) 94%, transparent); font-size: 0.88rem; font-weight: 700; text-decoration: none; } .site-nav a:hover { background: color-mix(in srgb, var(--green-950) 18%, transparent); color: var(--white); } .site-nav__dropdown { position: relative; align-self: stretch; display: flex; align-items: stretch; } .site-nav__dropdown-toggle { display: inline-flex; align-items: center; gap: 0.42rem; min-height: 3.45rem; padding: 0 0.78rem; border: 0; background: transparent; color: color-mix(in srgb, var(--white) 94%, transparent); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; } .site-nav__dropdown-toggle i { font-size: 0.62rem; transition: transform var(--transition-fast); } .site-nav__dropdown:hover > .site-nav__dropdown-toggle, .site-nav__dropdown:focus-within > .site-nav__dropdown-toggle, .site-nav__dropdown[data-dropdown-open="true"] > .site-nav__dropdown-toggle { background: color-mix(in srgb, var(--green-950) 18%, transparent); color: var(--white); } .site-nav__dropdown:hover > .site-nav__dropdown-toggle i, .site-nav__dropdown:focus-within > .site-nav__dropdown-toggle i, .site-nav__dropdown[data-dropdown-open="true"] > .site-nav__dropdown-toggle i { transform: rotate(180deg); } .site-nav__submenu { position: absolute; top: 100%; left: 0; z-index: 40; display: none; min-width: 18rem; overflow: hidden; border: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent); border-top: calc(var(--border-width) * 2) solid var(--lime-500); border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--green-950); box-shadow: var(--shadow-card); } .site-nav__dropdown:hover > .site-nav__submenu, .site-nav__dropdown:focus-within > .site-nav__submenu, .site-nav__dropdown[data-dropdown-open="true"] > .site-nav__submenu { display: grid; } .site-nav__submenu a { display: grid; gap: 0.08rem; min-height: 0; padding: 0.78rem 0.9rem; border-bottom: var(--border-width) solid var(--line-dark); } .site-nav__submenu a:last-child { border-bottom: 0; } .site-nav__submenu a span { font-size: 0.84rem; line-height: 1.2; } .site-nav__submenu a small { color: color-mix(in srgb, var(--white) 62%, transparent); font-size: 0.68rem; font-weight: 520; line-height: 1.35; } .site-nav__submenu a:hover small, .site-nav__submenu a:focus-visible small { color: color-mix(in srgb, var(--white) 82%, transparent); } .site-nav__utility a { color: var(--white); font-size: 0.8rem; } .site-nav__toggle { display: none; align-items: center; gap: 0.6rem; min-height: 2.6rem; padding: 0.55rem 0.75rem; border: var(--border-width) solid color-mix(in srgb, var(--white) 18%, transparent); border-radius: var(--radius-control); background: transparent; color: var(--white); font-weight: 760; cursor: pointer; } .site-nav__toggle-icon { display: grid; gap: 0.25rem; width: 1.15rem; } .site-nav__toggle-icon span { display: block; height: 0.1rem; border-radius: var(--radius-pill); background: currentColor; } .breadcrumb-container { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content)); margin-inline: auto; } .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0.7rem 0 0; list-style: none; } .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.35rem; } .breadcrumb-link, .breadcrumb-current, .breadcrumb-separator { color: var(--muted); font-size: 0.76rem; text-decoration: none; } .breadcrumb-link:hover { color: var(--accent); } .breadcrumb-separator { opacity: 0.55; } /* ============================================================================================= * Shared page heroes * ============================================================================================= */ .page-hero { position: relative; overflow: hidden; padding: clamp(2.2rem, 6vw, 5rem); border: var(--border-width) solid var(--green-200); border-radius: var(--radius-large); background: linear-gradient(135deg, color-mix(in srgb, var(--white) 92%, transparent), color-mix(in srgb, var(--green-100) 70%, var(--white))), var(--green-050); } .page-hero::after { content: ""; position: absolute; right: -7rem; bottom: -8rem; width: 24rem; aspect-ratio: 1; border: 0.11rem solid color-mix(in srgb, var(--green-700) 20%, transparent); border-radius: 50%; box-shadow: 0 0 0 3rem color-mix(in srgb, var(--green-500) 5%, transparent), 0 0 0 6rem color-mix(in srgb, var(--green-500) 4%, transparent); } .page-hero > * { position: relative; z-index: 1; } .page-hero--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.65fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .page-hero--compact { max-width: 68rem; } .page-hero__lead { max-width: 53rem; margin-top: 1.25rem; color: var(--text-medium); font-size: clamp(1.03rem, 1.8vw, 1.25rem); line-height: 1.7; } .page-hero__panel { padding: 1.4rem; border: var(--border-width) solid color-mix(in srgb, var(--green-700) 24%, transparent); border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 78%, transparent); backdrop-filter: blur(0.45rem); } .page-hero__panel strong, .page-hero__panel p { display: block; } .page-hero__panel strong { margin-top: 0.55rem; font-size: 1.15rem; line-height: 1.35; } .page-hero__panel p { margin-top: 0.75rem; color: var(--text-medium); font-size: 0.9rem; } .panel-index { color: var(--accent); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; } /* ============================================================================================= * Home * ============================================================================================= */ .home-page { display: grid; gap: clamp(2.8rem, 3rem, 5rem); } .home-page--feed { padding-top: clamp(1.8rem, 2rem, 3rem); } .home-quick-search { display: grid; gap: 1rem; } .home-section-bar { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding-bottom: 0.9rem; border-bottom: var(--border-width) solid var(--line); } .home-section-bar--compact h1 { font-size: clamp(1.65rem, 3vw, 2.6rem); letter-spacing: -0.025em; } .home-section-bar h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); } .home-section-bar .site-kicker { margin-bottom: 0.35rem; } .home-section-link, .story-link { flex: 0 0 auto; color: var(--accent); font-size: 0.82rem; font-weight: 800; text-decoration: none; } .home-section-link:hover, .story-link:hover { color: var(--accent-strong); } /* Reusable technical / draftsman panel */ .technical-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.25rem, 3vw, 2rem); border: calc(var(--border-width) * 2) solid var(--green-600); border-radius: var(--radius-card); background-color: var(--technical-surface); box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, var(--white) 70%, transparent); } .technical-panel--pcb { background-image: linear-gradient(color-mix(in srgb, var(--technical-line) 20%, transparent) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, color-mix(in srgb, var(--technical-line) 20%, transparent) var(--border-width), transparent var(--border-width)), linear-gradient(color-mix(in srgb, var(--green-700) 1.5%, transparent) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, color-mix(in srgb, var(--green-700) 1.5%, transparent) var(--border-width), transparent var(--border-width)); background-size: var(--technical-grid) var(--technical-grid), var(--technical-grid) var(--technical-grid), var(--technical-grid-fine) var(--technical-grid-fine), var(--technical-grid-fine) var(--technical-grid-fine); } .technical-panel::before, .technical-panel::after { content: ""; position: absolute; z-index: -1; width: 4.5rem; aspect-ratio: 1; border-color: var(--technical-accent); opacity: 0.55; pointer-events: none; } .technical-panel::before { top: 0.55rem; left: 0.55rem; border-top: calc(var(--border-width) * 2) solid; border-left: calc(var(--border-width) * 2) solid; } .technical-panel::after { right: 0.55rem; bottom: 0.55rem; border-right: calc(var(--border-width) * 2) solid; border-bottom: calc(var(--border-width) * 2) solid; } .technical-panel__heading { border-bottom-color: var(--technical-line-strong); } .section-intro { max-width: 46rem; margin-top: 0.55rem; color: var(--text-medium); font-size: 0.86rem; } /* Reusable icon-led option / category grids */ .icon-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.7rem; } .icon-option-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .icon-option-card { position: relative; display: flex; min-width: 0; min-height: 11rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: 1.2rem 1rem; border: var(--border-width) solid color-mix(in srgb, var(--green-600) 48%, transparent); border-radius: var(--radius-control); background: color-mix(in srgb, var(--green-050) 62%, var(--white)); color: var(--text); text-align: center; text-decoration: none; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .icon-option-card::before, .icon-option-card::after { content: ""; position: absolute; width: 0.7rem; height: 0.7rem; border-color: color-mix(in srgb, var(--green-700) 45%, transparent); pointer-events: none; } .icon-option-card::before { top: 0.32rem; left: 0.32rem; border-top: var(--border-width) solid; border-left: var(--border-width) solid; } .icon-option-card::after { right: 0.32rem; bottom: 0.32rem; border-right: var(--border-width) solid; border-bottom: var(--border-width) solid; } .icon-option-card:hover { border-color: var(--green-600); background: var(--white); color: var(--text); transform: translateY(-0.08rem); box-shadow: 0 0.4rem 1.2rem color-mix(in srgb, var(--green-950) 6%, transparent); } .icon-option-card__icon { display: grid; width: 3.1rem; aspect-ratio: 1; place-items: center; color: var(--green-600); font-size: 2rem; line-height: 1; } .icon-option-card strong { color: var(--text-strong); font-size: 0.92rem; line-height: 1.2; } .icon-option-card > span:last-child:not(.icon-option-card__icon) { max-width: 16rem; color: var(--muted); font-size: 0.72rem; line-height: 1.45; } .icon-option-card--accent { border-color: var(--green-700); background: var(--green-700); } .icon-option-card--accent .icon-option-card__icon, .icon-option-card--accent strong { color: var(--white); } .icon-option-card--accent > span:last-child:not(.icon-option-card__icon) { /* color: color-mix(in srgb, var(--white) 72%, transparent); */ color:white; } .icon-option-card--accent:hover { border-color: var(--green-800); background: var(--green-800); } /* Reusable fixed-ratio economics creatives --------------------------------------------------- * Source artwork should be supplied at the master dimensions below. The browser scales the * creative down with its aspect ratio locked, so the same high-resolution file remains crisp in * every responsive placement. * * Banner: 3000 x 500 (6:1) * Box: 1400 x 800 (7:4) * Skyscraper: 800 x 1786 (400:893) * * These wrapper classes accept the economics shortcode output. The rendering engine emits * .e-link > .economics.e.e-type-{type} > .e-image, so live creatives inherit the same geometry. */ .econ-object { position: relative; width: 100%; min-width: 0; overflow: hidden; border: var(--border-width) solid color-mix(in srgb, var(--green-700) 58%, var(--line)); border-radius: var(--radius-small); background: linear-gradient(color-mix(in srgb, var(--green-700) 5%, transparent) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, color-mix(in srgb, var(--green-700) 5%, transparent) var(--border-width), transparent var(--border-width)), color-mix(in srgb, var(--technical-surface) 72%, var(--surface)); background-size: 1.4rem 1.4rem; } .econ-object--banner { aspect-ratio: 3000 / 500; } .econ-object--box { aspect-ratio: 1400 / 800; } .econ-object--skyscraper { aspect-ratio: 800 / 1786; } .econ-object__placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.34rem; padding: 0.7rem; color: var(--green-800); text-align: center; } .econ-object__placeholder::before, .econ-object__placeholder::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-color: color-mix(in srgb, var(--green-700) 52%, transparent); } .econ-object__placeholder::before { top: 0.45rem; left: 0.45rem; border-top: var(--border-width) solid; border-left: var(--border-width) solid; } .econ-object__placeholder::after { right: 0.45rem; bottom: 0.45rem; border-right: var(--border-width) solid; border-bottom: var(--border-width) solid; } .econ-object__placeholder > svg, .econ-object__placeholder > i { justify-self: center; font-size: clamp(1rem, 2.2vw, 1.8rem); opacity: 0.72; } .econ-object__placeholder strong { color: var(--text-strong); font-size: clamp(0.68rem, 1vw, 0.82rem); letter-spacing: 0.02em; } .econ-object__placeholder > span:last-child { color: var(--muted); font-family: var(--font-mono); font-size: clamp(0.52rem, 0.75vw, 0.64rem); letter-spacing: 0.07em; } .econ-object__eyebrow { color: var(--green-700); font-family: var(--font-mono); font-size: clamp(0.48rem, 0.7vw, 0.58rem); font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } /* Remove placeholder framing as soon as the economics engine emits a live creative. */ .econ-object:has(> .e-link) { border: 0; background: transparent; box-shadow: none; } .econ-object:has(> .e-link) .econ-object__placeholder { display: none; } .econ-object > .e-link { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; } .e-link { display: block; width: 100%; color: inherit; text-decoration: none; } .economics.e { width: 100%; overflow: hidden; background: var(--surface); } .economics.e.e-type-banner { aspect-ratio: 3000 / 500; } .economics.e.e-type-box { aspect-ratio: 1400 / 800; } .economics.e.e-type-skyscraper { aspect-ratio: 800 / 1786; } .econ-object .economics.e { height: 100%; aspect-ratio: auto; } .e-image { display: block; width: 100%; height: 100%; object-fit: contain; } .home-top-stories { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.75fr); gap: var(--grid-gap); } .lead-story, .secondary-story { border: var(--border-width) solid var(--line); border-radius: var(--radius-card); background: var(--surface); } .lead-story { overflow: hidden; display: grid; grid-template-columns: minmax(17rem, 0.95fr) minmax(0, 1.05fr); min-height: 27rem; } .lead-story__media { position: relative; display: flex; min-height: 22rem; flex-direction: column; justify-content: space-between; padding: 1.25rem; overflow: hidden; background: var(--green-950); color: var(--white); text-decoration: none; } .lead-story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lead-story__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--green-950) 8%, transparent), color-mix(in srgb, var(--green-950) 38%, transparent)); pointer-events: none; } .lead-story__media-label { position: relative; z-index: 1; align-self: flex-start; padding: 0.35rem 0.5rem; border: var(--border-width) solid color-mix(in srgb, var(--white) 28%, transparent); border-radius: var(--radius-small); background: color-mix(in srgb, var(--green-950) 58%, transparent); color: var(--green-100); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .lead-story__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 3vw, 2.6rem); } .story-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; color: var(--muted); font-size: 0.7rem; font-weight: 650; } .story-meta span + span { position: relative; padding-left: 0.85rem; } .story-meta span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.2rem; aspect-ratio: 1; border-radius: 50%; background: var(--green-500); transform: translateY(-50%); } .lead-story h2 { margin-top: 1rem; font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.03; } .lead-story h2 a, .secondary-story h3 a { color: var(--text-strong); text-decoration: none; } .lead-story h2 a:hover, .secondary-story h3 a:hover { color: var(--accent); } .lead-story__body > p { margin-top: 1rem; color: var(--text-medium); font-size: 0.93rem; } .lead-story .story-link { margin-top: 1.25rem; } .secondary-stories { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } .secondary-story { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.75rem); } .secondary-story h3 { margin-top: 0.8rem; font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.15; } .secondary-story p { margin-top: 0.75rem; color: var(--text-medium); font-size: 0.84rem; } .secondary-story .story-link { margin-top: auto; padding-top: 1rem; } .home-news-section, .home-products-section { display: grid; gap: 1.25rem; } .latest-news-list { border-top: var(--border-width) solid var(--line); } .latest-news-item__category { color: var(--accent); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; } .latest-news-item__date, .latest-news-item__source { color: var(--muted); font-size: 0.74rem; } /* Homepage economics/content compositions ---------------------------------------------------- */ .home-news-econ-layout { display: grid; grid-template-columns: clamp(17rem, 30vw, 25em) minmax(0, 1fr); gap: var(--grid-gap); align-items: stretch; } .home-news-econ-stack { display: grid; gap: var(--grid-gap); align-content: start; } .home-news-econ-stack .econ-object { width: 100%; } .latest-news-tile { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 0.62rem; padding: 0.9rem; border: var(--border-width) solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: inset 0 0.2rem 0 color-mix(in srgb, var(--green-600) 74%, transparent); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .latest-news-tile:hover { border-color: var(--green-600); background: var(--green-050); color: var(--text); box-shadow: inset 0 0.3rem 0 var(--green-600); transform: translateY(-0.08rem); } .latest-news-tile__topline { display: flex; min-width: 0; justify-content: space-between; gap: 0.6rem; align-items: baseline; padding-bottom: 0.55rem; border-bottom: var(--border-width) solid var(--line-soft); } .latest-news-tile .latest-news-item__category { min-width: 0; font-size: 0.65rem; line-height: 1.25; } .latest-news-tile .latest-news-item__date { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.61rem; } .latest-news-tile .latest-news-item__source { font-size: 0.67rem; font-weight: 760; } .latest-news-tile > strong { color: var(--text-strong); font-size: clamp(0.82rem, 1vw, 0.94rem); line-height: 1.36; } .latest-news-tile__link { margin-top: auto; padding-top: 0.45rem; color: var(--accent); font-size: 0.69rem; font-weight: 850; } .home-products-econ-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(18rem, 27vw, 23rem); gap: var(--grid-gap); align-items: start; } .home-products-section--stack { min-width: 0; } .featured-product-stack { display: grid; gap: 0.65rem; } .component-feed-entry { display: grid; min-width: 0; min-height: 6.35rem; grid-template-columns: 4.35rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.8rem 0.9rem; border: var(--border-width) solid var(--line); border-left: calc(var(--border-width) * 3) solid var(--green-600); background: var(--surface); transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); } .component-feed-entry:hover { border-color: var(--green-600); background: color-mix(in srgb, var(--green-050) 62%, var(--surface)); transform: translateX(0.08rem); } .component-feed-entry__media { display: grid; width: 4.35rem; aspect-ratio: 1; overflow: hidden; place-items: center; border: var(--border-width) solid color-mix(in srgb, var(--green-600) 28%, var(--line)); background: var(--surface); text-decoration: none; } .component-feed-entry__image { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; } .component-feed-entry__media--empty { background: linear-gradient(color-mix(in srgb, var(--green-700) 4%, transparent) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, color-mix(in srgb, var(--green-700) 4%, transparent) var(--border-width), transparent var(--border-width)), var(--technical-surface); background-size: 0.7rem 0.7rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.5rem; font-weight: 750; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; } .component-feed-entry__body { min-width: 0; } .component-feed-entry__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 750; letter-spacing: 0.025em; } .component-feed-entry__meta span + span::before { content: "//"; margin-right: 0.7rem; color: var(--green-500); } .component-feed-entry h3 { margin-top: 0.32rem; color: var(--text-strong); font-size: 0.94rem; line-height: 1.24; } .component-feed-entry p { margin-top: 0.3rem; color: var(--text-medium); font-size: 0.72rem; line-height: 1.4; } .component-feed-entry__action { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.35rem; padding: 0.45rem 0.65rem; border: var(--border-width) solid var(--green-600); background: var(--surface); color: var(--accent); font-size: 0.68rem; font-weight: 850; text-decoration: none; } .component-feed-entry__action:hover { background: var(--green-700); color: var(--white); } .home-products-skyscraper { min-width: 0; } .home-products-skyscraper .econ-object--skyscraper { width: 100%; } .featured-product-stack .econ-object--banner { width: 100%; } .home-utility-section { display: grid; gap: 1.25rem; } /* ============================================================================================= * Reusable editorial section regions * A clear, repeatable site-wide content shell with a strong section title band. * ============================================================================================= */ .section-region { --region-accent: var(--green-800); position: relative; min-width: 0; overflow: hidden; border: var(--border-width) solid var(--ink-200); border-radius: var(--radius-small); background: var(--surface); box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--green-950) 4%, transparent); } .section-region__header { display: flex; min-height: 4.65rem; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0.9rem 1.2rem; border-bottom: 0; background: var(--region-accent); color: var(--white); } .section-region__heading { min-width: 0; } .section-region__heading h2 { margin: 0; color: var(--white); font-size: clamp(1.6rem, 2.65vw, 2.25rem); font-weight: 820; letter-spacing: -0.03em; line-height: 1; } .section-region__action { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.65rem; min-height: 2.4rem; padding: 0.45rem 0.75rem; border: var(--border-width) solid color-mix(in srgb, var(--white) 46%, transparent); border-radius: var(--radius-small); background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); font-size: 0.8rem; font-weight: 800; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .section-region__action span { font-size: 1rem; transition: transform var(--transition-fast); } .section-region__action:hover { border-color: color-mix(in srgb, var(--white) 76%, transparent); background: color-mix(in srgb, var(--white) 15%, transparent); color: var(--white); } .section-region__action:hover span { transform: translateX(0.16rem); } .section-region__body { padding: 1rem; } .section-region__body--flush { padding: 0; } /* Featured stories are grouped by the section shell, not by decorative micro-details. */ .section-region--stories .home-top-stories { gap: 0; } .section-region--stories .lead-story, .section-region--stories .secondary-story { border: 0; border-radius: 0; background: var(--surface); } .section-region--stories .lead-story { min-height: 25rem; } .section-region--stories .secondary-stories { gap: 0; border-left: var(--border-width) solid var(--line); background: color-mix(in srgb, var(--ink-050) 56%, var(--surface)); } .section-region--stories .secondary-story { background: transparent; transition: background-color var(--transition-fast); } .section-region--stories .secondary-story + .secondary-story { border-top: var(--border-width) solid var(--line); } .section-region--stories .secondary-story:hover { background: var(--green-050); } /* Latest news: four clean editorial columns inside one clearly titled region. */ .home-news-econ-layout .home-news-section.section-region { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; } .home-news-section.section-region .latest-news-list--tiles { display: grid; height: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; padding: 0; border-top: 0; background: var(--surface); } .home-news-section.section-region .latest-news-tile { position: relative; min-height: 11.5rem; gap: 0.58rem; padding: 1.05rem 1rem 0.95rem; border: 0; border-right: var(--border-width) solid var(--line); background: var(--surface); box-shadow: none; transform: none; } .home-news-section.section-region .latest-news-tile:last-child { border-right: 0; } .home-news-section.section-region .latest-news-tile:hover { border-color: var(--line); background: var(--green-050); box-shadow: none; transform: none; } .home-news-section.section-region .latest-news-tile__topline { padding-bottom: 0.35rem; border-bottom: 0; } .home-news-section.section-region .latest-news-tile .latest-news-item__category { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 800; letter-spacing: 0; text-transform: none; } .home-news-section.section-region .latest-news-tile .latest-news-item__date, .home-news-section.section-region .latest-news-tile .latest-news-item__source { font-size: 0.72rem; } .home-news-section.section-region .latest-news-tile > strong { font-size: clamp(0.92rem, 1.05vw, 1.03rem); line-height: 1.32; } .home-news-section.section-region .latest-news-tile__link { padding-top: 0.55rem; border-top: var(--border-width) solid var(--line-soft); } /* Product feed uses the same shell and a clean list rhythm. */ .home-products-section.section-region { gap: 0; } .home-products-section.section-region .featured-product-stack { gap: 0; } .home-products-section.section-region .component-feed-entry { min-height: 6.35rem; border: 0; border-bottom: var(--border-width) solid var(--line); background: var(--surface); transform: none; } .home-products-section.section-region .component-feed-entry:last-child { border-bottom: 0; } .home-products-section.section-region .component-feed-entry:hover { border-color: var(--line); background: var(--green-050); transform: none; } .home-products-section.section-region .component-feed-entry__media { border-color: var(--line); background-color: var(--surface); } .home-products-section.section-region .component-feed-entry__meta { font-size: 0.73rem; } .home-products-section.section-region .component-feed-entry__action { border: 0; border-left: var(--border-width) solid var(--line); background: transparent; } .home-products-section.section-region .component-feed-entry__action:hover { border-left-color: var(--green-600); background: transparent; color: var(--accent-strong); } .home-products-section.section-region .econ-object--banner { border-left: 0; border-right: 0; } /* Resource tiles retain their icon-led identity inside the common outer region. */ .home-utility-section.section-region { display: block; } .home-utility-section.section-region .icon-option-card { box-shadow: none; } @media (max-width: 64rem) { .home-news-section.section-region .latest-news-list--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-news-section.section-region .latest-news-tile:nth-child(2) { border-right: 0; } .home-news-section.section-region .latest-news-tile:nth-child(-n + 2) { border-bottom: var(--border-width) solid var(--line); } .section-region--stories .secondary-stories { border-top: var(--border-width) solid var(--line); border-left: 0; } .section-region--stories .secondary-story + .secondary-story { border-top: 0; border-left: var(--border-width) solid var(--line); } } @media (max-width: 42rem) { .section-region__header { min-height: 4.1rem; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; } .section-region__heading h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); } .section-region__action { min-height: 2.15rem; padding: 0.35rem 0.55rem; font-size: 0.72rem; } .home-news-section.section-region .latest-news-list--tiles { grid-template-columns: 1fr; } .home-news-section.section-region .latest-news-tile, .home-news-section.section-region .latest-news-tile:nth-child(2) { min-height: 0; border-right: 0; border-bottom: var(--border-width) solid var(--line); } .home-news-section.section-region .latest-news-tile:last-child { border-bottom: 0; } .section-region--stories .secondary-stories { grid-template-columns: 1fr; } .section-region--stories .secondary-story + .secondary-story { border-top: var(--border-width) solid var(--line); border-left: 0; } .home-products-section.section-region .component-feed-entry__action { border-left: 0; padding-left: 0; } } /* ============================================================================================= * About * ============================================================================================= */ .about-page { display: grid; gap: var(--section-gap); } .principle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); } .principle-grid article, .audience-grid article { padding: 1.4rem; border-top: 0.2rem solid var(--green-700); background: var(--white); box-shadow: var(--shadow-small); } .principle-grid article > span { color: var(--accent); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 850; } .principle-grid h3 { margin-top: 2.4rem; } .principle-grid p { margin-top: 0.7rem; color: var(--text-medium); font-size: 0.88rem; } .about-story { display: grid; grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .about-story__marker { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--green-950); color: var(--lime-300); font-family: var(--font-mono); font-size: clamp(3.5rem, 10vw, 8rem); font-weight: 900; letter-spacing: -0.08em; } .about-story__copy { max-width: var(--prose); } .about-story__copy p:not(.site-kicker) { margin-top: 1.1rem; color: var(--text-medium); font-size: 1.02rem; } .about-audience { display: grid; grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 5rem); } .audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } .audience-grid article { border-top-width: var(--border-width); border: var(--border-width) solid var(--line); border-left: 0.2rem solid var(--green-700); } .audience-grid strong, .audience-grid span { display: block; } .audience-grid span { margin-top: 0.45rem; color: var(--text-medium); font-size: 0.86rem; } /* ============================================================================================= * Contact * ============================================================================================= */ .contact-page { display: grid; gap: var(--section-gap-small); } .contact-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); gap: var(--grid-gap); align-items: start; } .contact-form-panel { padding: clamp(1.4rem, 4vw, 2.4rem); } .contact-section-heading { margin-bottom: 1.5rem; } .contact-form { display: grid; gap: 1.1rem; } .contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .contact-field { display: grid; gap: 0.38rem; } .contact-field > span, .newsletter-unsubscribe-field > span { color: var(--text-strong); font-size: 0.82rem; font-weight: 760; } .contact-field em { color: var(--accent); font-style: normal; } .contact-field input, .contact-field textarea, .newsletter-unsubscribe-field input, .newsletter-signup input { width: 100%; min-height: 3rem; padding: 0.72rem 0.82rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--white); color: var(--text); outline: none; } .contact-field textarea { min-height: 12rem; resize: vertical; } .contact-field input:focus, .contact-field textarea:focus, .newsletter-unsubscribe-field input:focus, .newsletter-signup input:focus { border-color: var(--green-500); box-shadow: var(--shadow-focus); } .contact-field small { justify-self: end; color: var(--muted); font-size: 0.72rem; } .contact-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.4rem; } .contact-form__footer p { max-width: 34rem; color: var(--muted); font-size: 0.78rem; } .contact-honeypot, .newsletter-unsubscribe-honeypot, .newsletter-signup__honeypot { position: absolute !important; width: 0.0625rem !important; height: 0.0625rem !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .contact-status, .newsletter-unsubscribe-status, .newsletter-signup__status { display: none; padding: 0.8rem 0.9rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); font-size: 0.84rem; } .contact-status.is-visible, .newsletter-unsubscribe-status.is-visible, .newsletter-signup__status.is-visible { display: block; } .contact-status.is-success, .newsletter-unsubscribe-status.is-success, .newsletter-signup__status.is-success { border-color: var(--green-300); background: var(--success-soft); color: var(--green-900); } .contact-status.is-error, .newsletter-unsubscribe-status.is-error, .newsletter-signup__status.is-error { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); color: var(--danger); } .contact-sidebar { display: grid; gap: 1rem; } .contact-card, .newsletter-unsubscribe-note { padding: 1.4rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-card); background: var(--white); } .contact-card--dark { border-color: var(--green-900); background: var(--green-950); color: color-mix(in srgb, var(--white) 72%, transparent); } .contact-card--dark h2 { color: var(--white); } .contact-card--dark > p:not(.site-kicker) { margin-top: 0.8rem; } .contact-card h3 { margin-top: 0.5rem; } .contact-card > p:not(.site-kicker) { margin-top: 0.6rem; color: var(--text-medium); font-size: 0.88rem; } .contact-card a { display: inline-block; margin-top: 1rem; font-size: 0.82rem; font-weight: 760; text-decoration: none; } .contact-card--dark a { color: var(--lime-300); } .contact-card__number { color: var(--accent); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800; } /* ============================================================================================= * Privacy / legal * ============================================================================================= */ .legal-page { display: grid; gap: var(--section-gap-small); } .legal-layout { display: grid; grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1.55fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .legal-index { position: sticky; top: 5rem; display: grid; gap: 0.28rem; padding: 1.1rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-card); background: var(--white); } .legal-index strong { margin-bottom: 0.45rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .legal-index a { padding: 0.45rem 0.5rem; border-radius: var(--radius-small); color: var(--text-medium); font-size: 0.8rem; text-decoration: none; } .legal-index a:hover { background: var(--green-050); color: var(--green-900); } .legal-content { min-width: 0; max-width: var(--prose); } .legal-section { padding-block: 0 2.7rem; border-bottom: var(--border-width) solid var(--line); scroll-margin-top: 5rem; } .legal-section + .legal-section { padding-top: 2.7rem; } .legal-section > p:not(.site-kicker) { margin-top: 1rem; color: var(--text-medium); } .legal-section--final { border-bottom: 0; } .legal-section--final .button { margin-top: 1.3rem; } .legal-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.4rem; } .legal-card-grid article { padding: 1rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface-soft); } .legal-card-grid strong, .legal-card-grid span { display: block; } .legal-card-grid span { margin-top: 0.35rem; color: var(--text-medium); font-size: 0.82rem; } /* ============================================================================================= * Newsletter unsubscribe and embedded newsletter forms * ============================================================================================= */ .newsletter-unsubscribe-page { display: grid; gap: var(--section-gap-small); } .newsletter-unsubscribe-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); gap: var(--grid-gap); align-items: start; } .newsletter-unsubscribe-panel { padding: clamp(1.4rem, 4vw, 2.4rem); } .newsletter-unsubscribe-panel > p:not(.site-kicker) { margin-top: 0.7rem; color: var(--text-medium); } .newsletter-unsubscribe-form { display: grid; gap: 1rem; margin-top: 1.3rem; } .newsletter-unsubscribe-field { display: grid; gap: 0.38rem; } .newsletter-unsubscribe-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; } .newsletter-unsubscribe-note h3 { margin-top: 0.55rem; } .newsletter-unsubscribe-note p { margin-top: 0.6rem; color: var(--text-medium); font-size: 0.88rem; } .newsletter-signup { padding: clamp(1.4rem, 4vw, 2.4rem); border: var(--border-width) solid var(--green-200); border-radius: var(--radius-large); background: var(--green-050); } .newsletter-signup__copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } .newsletter-signup__copy > p:last-child { margin-top: 0.6rem; color: var(--text-medium); } .newsletter-signup__kicker { margin: 0 0 0.4rem; color: var(--accent); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .newsletter-signup__form { margin-top: 1rem; } .newsletter-signup__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; } .newsletter-signup__label { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 760; } .newsletter-signup__consent { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 0.8rem; color: var(--text-medium); font-size: 0.76rem; } .newsletter-signup__consent input { width: 1rem; min-height: 1rem; margin-top: 0.18rem; } .newsletter-signup__status { margin-top: 0.8rem; } .newsletter-signup__meta { margin-top: 0.65rem; color: var(--muted); font-size: 0.72rem; } /* ============================================================================================= * Login and error pages * ============================================================================================= */ body:has(.login-page) .site-header, body:has(.login-page) .site-nav-wrap, body:has(.login-page) .breadcrumb-container, body:has(.login-page) .site-footer { display: none !important; } body:has(.login-page) #viewport { width: 100%; max-width: none; } .login-page { display: grid; place-items: center; min-height: 100dvh; padding: 2rem var(--page-gutter); background: radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--lime-500) 16%, transparent), transparent 26rem), radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--green-500) 16%, transparent), transparent 24rem), var(--green-950); } .login-card { width: min(100%, 29rem); padding: clamp(1.6rem, 4vw, 2.2rem); border: var(--border-width) solid color-mix(in srgb, var(--white) 16%, transparent); border-radius: var(--radius-large); background: var(--white); box-shadow: 0 1.6rem 5rem color-mix(in srgb, var(--green-950) 38%, transparent); } .login-header { display: flex; gap: 1rem; align-items: flex-start; } .login-brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 3.2rem; aspect-ratio: 1; border-radius: 0.8rem; background: var(--green-900); color: var(--lime-300); font-family: var(--font-mono); font-weight: 900; } .login-eyebrow { margin: 0; color: var(--accent); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .login-header h1 { margin-top: 0.1rem; font-size: 2rem; } .login-introduction { margin-top: 0.4rem; color: var(--muted); font-size: 0.88rem; } .login-status { min-height: 0; margin-top: 1rem; } .login-status:not(:empty) { padding: 0.75rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface-soft); font-size: 0.82rem; } .login-form { display: grid; gap: 0.9rem; margin-top: 1.25rem; } .login-field { display: grid; gap: 0.35rem; } .login-field > span { font-size: 0.8rem; font-weight: 760; } .login-field input { min-height: 3rem; padding: 0.7rem 0.8rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--white); outline: none; } .login-field input:focus { border-color: var(--green-500); box-shadow: var(--shadow-focus); } .login-submit { min-height: 3rem; margin-top: 0.25rem; border: 0; border-radius: var(--radius-control); background: var(--accent); color: var(--white); font-weight: 800; cursor: pointer; } .login-submit:hover { background: var(--accent-strong); } .login-return { display: inline-block; margin-top: 1rem; color: var(--muted); font-size: 0.78rem; text-decoration: none; } .error-page { display: grid; grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 56dvh; } .error-page__code { color: var(--green-100); font-family: var(--font-mono); font-size: clamp(6rem, 18vw, 14rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.1em; } .error-page__copy p:not(.site-kicker) { max-width: 42rem; margin-top: 1rem; color: var(--text-medium); } /* ============================================================================================= * Generic editorial/content patterns for database-backed pages * ============================================================================================= */ /* ============================================================================================= * Cookie preferences — CSS is global here rather than a plugin-specific stylesheet. * ============================================================================================= */ .cookie-consent { position: fixed; z-index: 80; inset-inline: var(--page-gutter); bottom: 1rem; } .cookie-consent__panel { width: min(100%, 68rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1rem 1.1rem; border: var(--border-width) solid color-mix(in srgb, var(--white) 16%, transparent); border-radius: var(--radius-card); background: var(--green-950); color: var(--white); box-shadow: 0 1rem 4rem color-mix(in srgb, var(--green-950) 32%, transparent); } .cookie-consent__copy strong { display: block; } .cookie-consent__copy p { margin-top: 0.2rem; color: color-mix(in srgb, var(--white) 68%, transparent); font-size: 0.78rem; } .cookie-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } .cookie-consent .button.secondary { border-color: color-mix(in srgb, var(--white) 24%, transparent); background: transparent; color: var(--white); } .cookie-preferences { width: min(calc(100% - (var(--page-gutter) * 2)), 42rem); padding: 0; border: 0; border-radius: var(--radius-large); background: transparent; color: var(--text); } .cookie-preferences::backdrop { background: color-mix(in srgb, var(--green-950) 68%, transparent); backdrop-filter: blur(0.2rem); } .cookie-preferences__panel { overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-large); background: var(--white); box-shadow: var(--shadow-card); } .cookie-preferences__header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem; border-bottom: var(--border-width) solid var(--line); } .cookie-preferences__header h2 { font-size: 1.7rem; } .cookie-preferences__header p:last-child { margin-top: 0.5rem; color: var(--text-medium); font-size: 0.82rem; } .cookie-preferences__kicker { margin: 0 0 0.25rem; color: var(--accent); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .cookie-preferences__close { width: 2.4rem; height: 2.4rem; border: var(--border-width) solid var(--line); border-radius: 50%; background: var(--white); color: var(--text); cursor: pointer; } .cookie-preferences__list { display: grid; } .cookie-preferences__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-bottom: var(--border-width) solid var(--line); } .cookie-preferences__item strong, .cookie-preferences__item span { display: block; } .cookie-preferences__item span { margin-top: 0.2rem; color: var(--muted); font-size: 0.78rem; } .cookie-switch { display: flex; align-items: center; gap: 0.6rem; } .cookie-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); } .cookie-switch__control { display: none !important; } .cookie-switch__label { color: var(--text-medium) !important; font-size: 0.72rem !important; } .cookie-preferences__footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.3rem; background: var(--surface-soft); } /* ============================================================================================= * Footer * ============================================================================================= */ .site-footer { position: relative; margin-top: auto; background: var(--green-900); color: color-mix(in srgb, var(--white) 72%, transparent); } .site-footer__accent { height: 0.3rem; background: linear-gradient(90deg, var(--lime-500), var(--green-500) 42%, var(--green-700)); } .site-footer-inner, .site-footer-bottom { width: min(calc(100% - (var(--page-gutter) * 2)), var(--content)); margin-inline: auto; } .site-footer-inner { display: grid; grid-template-columns: minmax(16rem, 1.7fr) repeat(3, minmax(9rem, 0.7fr)); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(3rem, 7vw, 5.5rem); } .site-footer__brand { max-width: 30rem; } .site-footer__logo { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--white); font-size: 1.15rem; text-decoration: none; } .site-brand__mark--footer { width: 2.7rem; height: 2.7rem; background: var(--green-700); } .site-footer__brand > p { margin-top: 1rem; color: color-mix(in srgb, var(--white) 62%, transparent); font-size: 0.86rem; } .site-footer__tagline { display: block; margin-top: 1rem; color: var(--lime-300); font-size: 0.78rem; font-weight: 760; } .site-footer__column { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .site-footer__column > strong { margin-bottom: 0.35rem; color: var(--white); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .site-footer__column a, .footer-cookie-button { padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--white) 62%, transparent); font-size: 0.82rem; text-align: left; text-decoration: none; cursor: pointer; } .site-footer__column a:hover, .footer-cookie-button:hover { color: var(--lime-300); } .site-footer-bottom { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem 1.6rem; border-top: var(--border-width) solid var(--line-dark); color: color-mix(in srgb, var(--white) 62%, transparent); font-size: 0.72rem; } /* ============================================================================================= * Responsive layout * ============================================================================================= */ @media (max-width: 72rem) { .home-top-stories { grid-template-columns: 1fr; } .secondary-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; max-width: 42rem; } } @media (max-width: 56rem) { .site-header__strapline { display: none; } .page-hero--split, .contact-layout, .newsletter-unsubscribe-layout, .site-final-cta, .legal-layout, .about-story, .about-audience { grid-template-columns: 1fr; } .lead-story { grid-template-columns: 1fr; } .lead-story__media { min-height: 16rem; } .latest-news-item__date { display: none; } .site-section-heading { grid-template-columns: 1fr; align-items: start; } .legal-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-index strong { grid-column: 1 / -1; } .about-story__marker { width: min(16rem, 56vw); } .contact-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-card--dark { grid-column: 1 / -1; } .cookie-consent__panel { grid-template-columns: 1fr; } .cookie-consent__actions { justify-content: flex-start; } } @media (max-width: 64rem) { .home-news-econ-layout, .home-products-econ-layout { grid-template-columns: 1fr; } .home-news-econ-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-products-skyscraper { width: min(100%, 20rem); justify-self: center; } } @media (max-width: 42rem) { .home-products-skyscraper { width: 100%; max-width: none; justify-self: stretch; } .home-products-skyscraper .econ-object--skyscraper { width: 100%; max-width: none; } .site-header { padding-block: 0.85rem; } .site-brand__mark { width: 2.7rem; height: 2.7rem; } .site-brand__copy span, .site-header__actions .button { display: none; } .site-nav { position: relative; min-height: 3.3rem; padding-block: 0.4rem; } .site-nav__toggle { display: inline-flex; } .site-nav__links { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; overflow: hidden; border: var(--border-width) solid color-mix(in srgb, var(--white) 14%, transparent); border-radius: var(--radius-card); background: var(--green-950); box-shadow: var(--shadow-card); } .site-nav[data-open="true"] .site-nav__links { display: flex; } .site-nav__links > a { min-height: 3rem; border-bottom: var(--border-width) solid var(--line-dark); } .site-nav__dropdown { display: block; width: 100%; border-bottom: var(--border-width) solid var(--line-dark); } .site-nav__dropdown-toggle { width: 100%; min-height: 3rem; justify-content: space-between; padding-inline: 0.78rem; text-align: left; } .site-nav__dropdown:hover > .site-nav__submenu, .site-nav__dropdown:focus-within > .site-nav__submenu { display: none; } .site-nav__dropdown[data-dropdown-open="true"] > .site-nav__submenu { display: grid; } .site-nav__submenu { position: static; min-width: 0; border: 0; border-top: var(--border-width) solid var(--line-dark); border-radius: 0; background: color-mix(in srgb, var(--green-950) 78%, black); box-shadow: none; } .site-nav__submenu a { padding: 0.72rem 1.1rem 0.72rem 1.35rem; } .site-nav__links > a:last-child { border-bottom: 0; } .site-nav__utility { margin-left: auto; } .site-nav__utility a:first-child { display: none; } .site-nav__utility a { min-height: 2.5rem; padding-inline: 0.6rem; } .breadcrumb-container { display: none; } .home-page, .about-page, .legal-page { gap: var(--section-gap-small); } .home-section-bar { align-items: flex-start; flex-direction: column; gap: 0.65rem; } .component-feed-entry { grid-template-columns: 3.3rem minmax(0, 1fr); gap: 0.8rem; } .component-feed-entry__media { width: 3.3rem; } .component-feed-entry__action { grid-column: 2; justify-self: start; } .component-feed-entry__meta span + span::before { margin-right: 0.45rem; } .technical-panel { padding: 1rem; } .icon-option-grid, .icon-option-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .icon-option-card { min-height: 9.5rem; padding: 1rem 0.75rem; } .secondary-stories, .principle-grid, .audience-grid, .contact-form__grid, .contact-sidebar, .legal-card-grid, .site-footer-inner { grid-template-columns: 1fr; } .contact-card--dark, .site-footer__brand { grid-column: auto; } .latest-news-item__category, .latest-news-item__source { grid-column: 1; } .latest-news-item__source { margin-top: 0.15rem; } .page-hero { padding: 1.5rem; } .contact-form__footer, .site-footer-bottom { align-items: flex-start; flex-direction: column; } .legal-index { grid-template-columns: 1fr; } .newsletter-signup__row { grid-template-columns: 1fr; } .newsletter-signup__label { grid-column: auto; } .cookie-preferences__item { grid-template-columns: 1fr; } .cookie-preferences__footer { flex-wrap: wrap; justify-content: stretch; } .cookie-preferences__footer .button { flex: 1 1 11rem; } .error-page { grid-template-columns: 1fr; gap: 1.5rem; } .error-page__code { font-size: 6rem; } } @media (max-width: 28rem) { .icon-option-grid, .icon-option-grid--three { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; } } /* ============================================================================================= * Administration-specific shared additions * ============================================================================================= */ /* ============================================================================================= * Purpose-built management links * ============================================================================================= */ .admin-management-panel { margin-bottom: 1rem; } .admin-management-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; padding: 1rem; } .admin-management-card { display: block; min-width: 0; border: 0.0625rem solid var(--admin-border); border-radius: 0.7rem; background: var(--admin-surface-soft); color: var(--admin-text); padding: 1rem; text-decoration: none; } .admin-management-card:hover { border-color: rgba(33, 95, 74, 0.45); background: #f2fbf3; } .admin-management-card__tag, .admin-management-card strong, .admin-management-card__action { display: block; } .admin-management-card__tag { color: var(--admin-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .admin-management-card strong { margin-top: 0.35rem; font-size: 1rem; } .admin-management-card p { min-height: 2.5rem; margin: 0.5rem 0 0; color: var(--admin-muted); font-size: 0.8rem; line-height: 1.5; } .admin-management-card__action { margin-top: 0.8rem; color: var(--admin-accent); font-size: 0.76rem; font-weight: 800; } @media (max-width: 65rem) { .admin-management-grid { grid-template-columns: 1fr; } .admin-management-card p { min-height: 0; } } @media (max-width: 32rem) { .home-news-econ-stack { grid-template-columns: 1fr; } } /* --- Consolidated from private/pages/admin/news-manager/style.css --- */ body:has(.news-manager) .site-header, body:has(.news-manager) .site-nav-wrap, body:has(.news-manager) .breadcrumb-container, body:has(.news-manager) .site-footer { display: none !important; } body:has(.news-manager) #viewport { max-width: none; width: 100%; padding: 0; margin: 0; } body:has(.news-manager) { background: var(--admin-bg); } .news-manager { min-height: 100vh; display: grid; grid-template-columns: 17rem minmax(0, 1fr); background: var(--admin-bg); color: var(--admin-text); } .news-manager__sidebar { min-height: 100vh; padding: 1.25rem 1rem; background: var(--admin-sidebar); border-right: 1px solid var(--admin-sidebar-line); color: #fff; } .news-manager__workspace { min-width: 0; } .news-manager__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 6.2rem; padding: 1.2rem 1.6rem; background: var(--admin-surface); border-bottom: 1px solid var(--admin-border); } .news-manager__toolbar h1 { margin: .12rem 0 0; font-size: clamp(1.45rem, 2vw, 2rem); } .news-manager__toolbar p:last-child { margin: .25rem 0 0; color: var(--admin-muted); } .news-manager__toolbar-actions, .nm-editor-actions > div, .nm-image-actions, .nm-modal footer { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; } .news-manager__eyebrow { margin: 0; color: var(--admin-accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .news-manager__content { padding: 1.5rem; } .news-manager__status { display: none; margin: .8rem 1.5rem 0; padding: .75rem 1rem; border: 1px solid var(--admin-border); background: var(--admin-surface); font-size: .9rem; } .news-manager__status.is-visible { display: block; } .news-manager__status.is-error { border-color: var(--admin-danger-border); color: var(--admin-danger); background: #fff7f7; } .news-manager__status.is-success { border-color: var(--admin-success-border); color: var(--admin-accent-strong); background: var(--success-soft); } .nm-button { appearance: none; border: 1px solid var(--admin-accent); border-radius: var(--radius-control); background: var(--admin-accent); color: #fff; padding: .62rem .85rem; font: inherit; font-size: .86rem; font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; transition: var(--transition-fast); } .nm-button:hover { background: var(--admin-accent-strong); border-color: var(--admin-accent-strong); color: #fff; } .nm-button--secondary { background: var(--admin-surface); color: var(--admin-text); border-color: var(--admin-border); } .nm-button--secondary:hover { background: var(--admin-surface-soft); color: var(--admin-text); border-color: var(--admin-accent-border); } .nm-button--danger { background: var(--admin-danger); border-color: var(--admin-danger); } .nm-button--danger:hover { background: var(--admin-danger-strong); border-color: var(--admin-danger-strong); } .nm-button:disabled { opacity: .5; cursor: not-allowed; } .nm-link-button { border: 0; background: transparent; color: var(--admin-danger); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; padding: .35rem .1rem; } .nm-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; } .nm-stats article, .nm-panel { background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--radius-card); box-shadow: 0 .35rem 1.3rem color-mix(in srgb, var(--ink-950) 4%, transparent); } .nm-stats article { padding: 1rem; } .nm-stats span { display: block; color: var(--admin-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } .nm-stats strong { display: block; margin-top: .35rem; font-size: 1.7rem; } .nm-panel { overflow: hidden; } .nm-panel__header { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding: 1rem 1.1rem; border-bottom: 1px solid var(--admin-border); } .nm-panel__header h2 { margin: .15rem 0 0; font-size: 1.05rem; } .nm-panel__header p:last-child { margin: .35rem 0 0; color: var(--admin-muted); font-size: .84rem; } .nm-panel__header--editor { align-items: flex-start; } .nm-filterbar { display: grid; grid-template-columns: minmax(14rem, 1.8fr) repeat(3, minmax(9rem, .7fr)); gap: .6rem; padding: .85rem 1rem; background: var(--admin-surface-soft); border-bottom: 1px solid var(--admin-border); } .nm-filterbar input, .nm-filterbar select, .nm-field input, .nm-field textarea, .nm-field select { width: 100%; border: 1px solid var(--admin-border); border-radius: var(--radius-control); background: #fff; color: var(--admin-text); font: inherit; font-size: .9rem; padding: .68rem .72rem; } .nm-field textarea { resize: vertical; line-height: 1.5; } .nm-field input:focus, .nm-field textarea:focus, .nm-field select:focus, .nm-filterbar input:focus, .nm-filterbar select:focus { outline: none; border-color: var(--admin-accent); box-shadow: var(--shadow-focus); } .nm-field { display: grid; gap: .38rem; } .nm-field label { font-size: .78rem; font-weight: 800; color: var(--admin-text); } .nm-field small, .nm-help { color: var(--admin-muted); font-size: .76rem; } .nm-code { font-family: var(--font-mono) !important; font-size: .8rem !important; } .nm-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .nm-form-panel { padding-bottom: 1rem; } .nm-form-panel > .nm-field, .nm-form-panel > .nm-form-grid, .nm-form-panel > .nm-check, .nm-form-panel > .nm-image-preview, .nm-form-panel > .nm-image-actions { margin: .9rem 1rem 0; } .nm-table-wrap { overflow-x: auto; } .nm-table { width: 100%; border-collapse: collapse; } .nm-table th, .nm-table td { padding: .82rem 1rem; border-bottom: 1px solid var(--admin-border); text-align: left; vertical-align: middle; font-size: .86rem; } .nm-table th { background: #fbfcfc; color: var(--admin-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .nm-table tbody tr:hover { background: var(--admin-row-hover); } .nm-article-cell { display: grid; grid-template-columns: 3.5rem minmax(12rem, 1fr); gap: .75rem; align-items: center; min-width: 18rem; } .nm-article-thumb { width: 3.5rem; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--admin-border); background: var(--admin-surface-soft); } .nm-article-thumb--empty { display: grid; place-items: center; color: var(--admin-muted); font-size: .7rem; } .nm-article-title { display: block; font-weight: 800; color: var(--admin-text); } .nm-article-meta { margin-top: .18rem; color: var(--admin-muted); font-family: var(--font-mono); font-size: .72rem; } .nm-row-actions { display: flex; gap: .4rem; justify-content: flex-end; white-space: nowrap; } .nm-badge { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.55rem; padding: .23rem .48rem; border: 1px solid var(--admin-border); border-radius: var(--radius-pill); background: var(--admin-surface-soft); color: var(--admin-muted); font-size: .72rem; font-weight: 800; text-transform: capitalize; } .nm-badge--published { color: var(--admin-accent-strong); background: var(--success-soft); border-color: var(--admin-success-border); } .nm-badge--scheduled { color: #705a14; background: #fff9dc; border-color: #ebd87c; } .nm-badge--draft { color: #59616a; } .nm-badge--gated { color: #5b477d; background: #f7f3ff; border-color: #cfbfed; margin-left: .25rem; } .nm-empty { display: none; padding: 2.2rem 1rem; text-align: center; color: var(--admin-muted); } .nm-empty.is-visible { display: block; } .nm-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem; } .nm-pagination span { color: var(--admin-muted); font-size: .82rem; } .nm-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; } .nm-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1rem; align-items: start; } .nm-editor-main, .nm-editor-side { display: grid; gap: 1rem; min-width: 0; } .nm-sticky { position: sticky; top: 1rem; z-index: 2; } .nm-check { display: flex !important; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 700; } .nm-check input { width: auto; accent-color: var(--admin-accent); } .nm-editor-mode-tabs { display: flex; gap: 0; padding: .7rem 1rem 0; background: var(--admin-surface); border-bottom: 1px solid var(--admin-border); } .nm-editor-mode { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: .5rem .8rem; border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--admin-muted); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800; } .nm-editor-mode span { padding: .1rem .3rem; border: 1px solid var(--admin-border); border-radius: var(--radius-pill); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .nm-editor-mode:hover { color: var(--admin-text); background: var(--admin-surface-soft); } .nm-editor-mode.is-active { position: relative; bottom: -1px; background: #fff; color: var(--admin-accent-strong); border-color: var(--admin-border); } .nm-editor-cleanup { margin-left: auto; align-self: center; margin-bottom: .55rem; white-space: nowrap; } #nm-toast-editor { min-height: 34rem; } #nm-toast-editor .toastui-editor-defaultUI { border: 0; border-radius: 0; } #nm-toast-editor .toastui-editor-toolbar { background: #f8faf9; } #nm-toast-editor .toastui-editor-main { min-height: 30rem; } .nm-youtube-toolbar-button { display: grid; place-items: center; width: 34px; height: 32px; margin: 3px 0; border: 0; background: transparent; color: #444; cursor: pointer; font-size: .73rem; font-weight: 900; } .nm-youtube-toolbar-button:hover { background: #e9efeb; } .nm-image-preview { min-height: 10rem; display: grid; place-items: center; border: 1px dashed var(--admin-border); background: var(--admin-surface-soft); overflow: hidden; color: var(--admin-muted); font-size: .8rem; } .nm-image-preview img { width: 100%; height: 100%; max-height: 14rem; object-fit: cover; display: block; } .nm-upload-label { cursor: pointer; } .nm-danger-zone { padding: 1rem; border-color: var(--admin-danger-border); } .nm-danger-zone p { margin: .25rem 0 .8rem; color: var(--admin-muted); font-size: .8rem; } .nm-details > summary { cursor: pointer; padding: 1rem 1.1rem; font-weight: 800; } .nm-details[open] > summary { border-bottom: 1px solid var(--admin-border); } .nm-details__body { display: grid; gap: .9rem; padding: 1rem; } .nm-seo-ai-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem; border: 1px solid var(--admin-accent-border); background: var(--success-soft); } .nm-seo-ai-toolbar > div { display: grid; gap: .2rem; } .nm-seo-ai-toolbar strong { font-size: .88rem; } .nm-seo-ai-toolbar span { color: var(--admin-muted); font-size: .78rem; line-height: 1.4; } .nm-ai-seo-result { display: grid; gap: .35rem; padding: .85rem; border: 1px solid var(--admin-border); background: var(--admin-surface-soft); } .nm-ai-seo-result > strong { font-size: .88rem; } .nm-ai-seo-result > span { color: var(--admin-muted); font-size: .74rem; } .nm-ai-seo-result p { margin: .15rem 0 0; font-size: .82rem; line-height: 1.5; } .nm-ai-seo-result ul { margin: .35rem 0 0 1.1rem; padding: 0; color: var(--admin-muted); font-size: .78rem; line-height: 1.5; } .nm-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; } .nm-modal__backdrop { position: absolute; inset: 0; background: var(--admin-modal-backdrop); } .nm-modal__card { position: relative; width: min(42rem, 100%); max-height: min(52rem, calc(100vh - 2rem)); overflow: auto; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--radius-large); box-shadow: var(--admin-shadow); } .nm-modal__card--wide { width: min(64rem, 100%); } .nm-modal__card > header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--admin-border); } .nm-modal__card h2 { margin: .1rem 0 0; font-size: 1.15rem; } .nm-modal__close { width: 2rem; height: 2rem; border: 0; background: transparent; font-size: 1.5rem; color: var(--admin-muted); cursor: pointer; } .nm-modal__body { display: grid; gap: .9rem; padding: 1rem 1.1rem; } .nm-modal footer { justify-content: flex-end; padding: .9rem 1.1rem; border-top: 1px solid var(--admin-border); } .nm-shortcode-preview { display: grid; gap: .35rem; padding: .8rem; border: 1px solid var(--admin-border); background: var(--admin-surface-soft); } .nm-shortcode-preview span { color: var(--admin-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .nm-shortcode-preview code { white-space: normal; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .78rem; color: var(--admin-accent-strong); } .nm-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; } .nm-media-card { border: 1px solid var(--admin-border); background: #fff; padding: 0; cursor: pointer; text-align: left; } .nm-media-card:hover { border-color: var(--admin-accent); box-shadow: var(--shadow-focus); } .nm-media-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--admin-surface-soft); } .nm-media-card span { display: block; padding: .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--admin-muted); } .nm-hidden { display: none !important; } @media (max-width: 78rem) { .news-manager { grid-template-columns: 13.5rem minmax(0, 1fr); } .nm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nm-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-editor-grid { grid-template-columns: minmax(0, 1fr); } .nm-sticky { position: static; } } @media (max-width: 54rem) { .news-manager { display: block; } .news-manager__sidebar { min-height: auto; padding: .7rem; } .news-manager__toolbar { align-items: flex-start; } .nm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .news-manager__content { padding: .8rem; } .news-manager__toolbar { padding: 1rem; flex-direction: column; } .news-manager__toolbar-actions { width: 100%; } .news-manager__toolbar-actions .nm-button { flex: 1; } .nm-stats, .nm-filterbar, .nm-form-grid { grid-template-columns: 1fr; } .nm-editor-mode-tabs { flex-wrap: wrap; } .nm-editor-cleanup { width: 100%; margin: .5rem 0 .7rem; } .nm-editor-actions { align-items: stretch; flex-direction: column; } .nm-editor-actions > div { width: 100%; } .nm-editor-actions .nm-button { flex: 1; text-align: center; } .nm-seo-ai-toolbar { align-items: stretch; flex-direction: column; } .nm-seo-ai-toolbar .nm-button { width: 100%; } .nm-table th:nth-child(3), .nm-table td:nth-child(3), .nm-table th:nth-child(5), .nm-table td:nth-child(5) { display: none; } .nm-article-cell { grid-template-columns: 2.8rem minmax(9rem, 1fr); min-width: 13rem; } .nm-article-thumb { width: 2.8rem; } } .nm-youtube-preview { aspect-ratio: 16 / 9; border: 1px solid var(--admin-border); background: var(--ink-950); overflow: hidden; } .nm-youtube-preview iframe { width: 100%; height: 100%; border: 0; display: block; } /* --- Author Manager / News author picker --- */ .nm-filterbar--authors { grid-template-columns: minmax(14rem, 1fr) auto; align-items: center; } .am-author-thumb { display: grid; place-items: center; overflow: hidden; font-weight: 800; font-size: .78rem; background: var(--admin-surface-soft); color: var(--admin-accent-strong); } .am-author-thumb img { width: 100%; height: 100%; object-fit: cover; } .nm-image-preview--author { aspect-ratio: 1; min-height: 0; width: min(15rem, 100%); margin-inline: auto; } .nm-image-preview--author img { max-height: none; aspect-ratio: 1; object-fit: cover; } .nm-author-picker { position: relative; } .nm-author-options { position: absolute; z-index: 40; top: calc(100% - .15rem); left: 0; right: 0; max-height: 21rem; overflow: auto; border: 1px solid var(--admin-border); background: var(--admin-surface); box-shadow: var(--admin-shadow); } .nm-author-option { width: 100%; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .65rem .7rem; border: 0; border-bottom: 1px solid var(--admin-border); background: transparent; text-align: left; cursor: pointer; } .nm-author-option:last-child { border-bottom: 0; } .nm-author-option:hover, .nm-author-option:focus-visible { background: var(--admin-surface-soft); outline: none; } .nm-author-option__avatar { width: 2.3rem; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--admin-border); background: var(--admin-surface-soft); color: var(--admin-accent-strong); font-size: .68rem; font-weight: 850; } .nm-author-option__avatar img { width: 100%; height: 100%; object-fit: cover; } .nm-author-option > span:last-child { min-width: 0; display: grid; gap: .1rem; } .nm-author-option strong, .nm-author-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nm-author-option strong { font-size: .84rem; } .nm-author-option small { color: var(--admin-muted); font-size: .72rem; } .nm-author-option-empty { padding: .8rem; color: var(--admin-muted); font-size: .78rem; } @media (max-width: 40rem) { .nm-filterbar--authors { grid-template-columns: 1fr; } } /* ============================================================================================= * Shared administration navigation * Central navigation emitted by SHORTCODE_ADMIN_NAV. Keep admin destinations here rather than * duplicating page-specific sidebar menus. * ============================================================================================= */ body:has(.admin-common-sidebar) .site-header, body:has(.admin-common-sidebar) .site-nav-wrap, body:has(.admin-common-sidebar) .breadcrumb-container, body:has(.admin-common-sidebar) .site-footer { display: none !important; } body:has(.admin-common-sidebar) #viewport { width: 100%; max-width: none; margin: 0; padding: 0; } .admin-common-sidebar { background: #17221e !important; color: #fff; padding: 1.25rem 1rem !important; } .admin-common-brand { display: flex; align-items: center; gap: .8rem; padding: .35rem .45rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.12); } .admin-common-brand__mark { display: grid; place-items: center; flex: 0 0 2.45rem; width: 2.45rem; height: 2.45rem; border: 1px solid rgba(255,255,255,.18); border-radius: .55rem; background: #215f4a; color: #fff; font-size: .78rem; font-weight: 850; letter-spacing: .05em; } .admin-common-brand strong, .admin-common-brand div > span { display: block; } .admin-common-brand strong { color: #fff; font-size: .94rem; line-height: 1.2; } .admin-common-brand div > span { margin-top: .15rem; color: rgba(255,255,255,.56); font-size: .75rem; } .admin-common-nav { display: grid; gap: .18rem; padding-top: .8rem; } .admin-common-nav__heading { margin: .85rem .65rem .28rem; color: rgba(255,255,255,.42); font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .admin-common-nav__item { display: block; width: 100%; margin: 0; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: rgba(255,255,255,.78); padding: .61rem .68rem; font: inherit; font-size: .86rem; font-weight: 680; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; } .admin-common-nav__item:hover, .admin-common-nav__item:focus-visible, .admin-common-nav__item.is-active { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.085); color: #fff; outline: none; } .admin-common-nav__item.is-active { box-shadow: inset .16rem 0 0 #60a887; } .admin-common-database { margin: 0; } .admin-common-database > summary { list-style: none; } .admin-common-database > summary::-webkit-details-marker { display: none; } .admin-common-database > summary::after { content: "+"; float: right; color: rgba(255,255,255,.5); font-weight: 850; } .admin-common-database[open] > summary::after { content: "−"; } .admin-common-database__tables { display: grid; gap: .12rem; margin: .18rem 0 .3rem .55rem; padding: .18rem 0 .15rem .5rem; border-left: 1px solid rgba(255,255,255,.12); } .admin-common-database__tables .admin-navigation-item { display: block; width: 100%; margin: 0; border: 0; border-radius: .42rem; background: transparent; color: rgba(255,255,255,.65); padding: .48rem .58rem; font: inherit; font-size: .76rem; text-align: left; cursor: pointer; } .admin-common-database__tables .admin-navigation-item:hover, .admin-common-database__tables .admin-navigation-item.is-active { background: rgba(255,255,255,.075); color: #fff; } .admin-common-nav__footer { margin-top: 1rem; padding: .85rem .65rem 0; border-top: 1px solid rgba(255,255,255,.1); } .admin-common-nav__footer a { color: rgba(255,255,255,.58); font-size: .75rem; text-decoration: none; } .admin-common-nav__footer a:hover { color: #fff; } .admin-common-local-nav { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.1); } .admin-common-local-nav__heading { margin: 0 .65rem .35rem; color: rgba(255,255,255,.42); font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .admin-common-local-nav .econ-manager-navigation { padding-top: 0; } /* Downloads previously used the public-page shell. Give it the same two-column admin frame. */ .dm-admin-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; background: #f4f6f8; } .dm-admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } .dm-admin-shell > .download-manager { width: min(100%, 92rem); min-width: 0; margin: 0 auto; } @media (max-width: 54rem) { .admin-common-sidebar, .dm-admin-sidebar { position: relative !important; top: auto; height: auto !important; min-height: auto !important; overflow: visible !important; } .admin-common-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; } .admin-common-nav__heading, .admin-common-database, .admin-common-nav__footer { grid-column: 1 / -1; } .admin-common-brand { padding-bottom: .8rem; } .dm-admin-shell { display: block; } } @media (max-width: 34rem) { .admin-common-nav { grid-template-columns: 1fr; } .admin-common-nav__heading, .admin-common-database, .admin-common-nav__footer { grid-column: auto; } } @media print { } /* ============================================================================================= * Account header / profile * ============================================================================================= */ .site-header__account { display: inline-flex; align-items: center; gap: 0.55rem; } .site-header__account--anonymous .button { min-height: 2.45rem; padding: 0.58rem 0.9rem; } .site-header__account-icon { width: 2.55rem; height: 2.55rem; display: inline-grid; place-items: center; border: var(--border-width) solid color-mix(in srgb, var(--green-700) 24%, var(--line)); border-radius: 0.55rem; background: var(--surface); color: var(--green-800); text-decoration: none; box-shadow: var(--shadow-small); transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } .site-header__account-icon svg { width: 1.05rem; height: 1.05rem; } .site-header__account-icon:hover, .site-header__account-icon:focus-visible { border-color: var(--green-700); background: var(--green-700); color: var(--white); transform: translateY(-1px); } .site-header__account-icon--workbench { background: var(--green-700); border-color: var(--green-700); color: var(--white); } .account-page { padding-block: clamp(2rem, 6vw, 5rem); } .account-profile { width: min(100%, 48rem); margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.5rem); border: var(--border-width) solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow-card); } .account-profile__header { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.4rem; border-bottom: var(--border-width) solid var(--line); } .account-profile__header h1 { margin: 0.15rem 0 0.25rem; } .account-profile__header p:last-child { color: var(--muted); } .account-profile__avatar { flex: 0 0 auto; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 0.75rem; background: var(--green-700); color: var(--white); font-size: 1.45rem; } .account-profile__details { display: grid; gap: 0; margin: 1.5rem 0; border-top: var(--border-width) solid var(--line); } .account-profile__details > div { display: grid; grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: var(--border-width) solid var(--line); } .account-profile__details dt { color: var(--muted); font-weight: 700; } .account-profile__details dd { margin: 0; color: var(--text-strong); } .account-profile__actions { margin-top: 1.25rem; } .account-profile__actions .button { display: inline-flex; align-items: center; gap: 0.5rem; } .account-profile__status { min-height: 1.4rem; margin-top: 0.9rem; color: var(--muted); } .account-profile--signed-out > p:not(.section-kicker) { color: var(--text-medium); } @media (max-width: 42rem) { .site-header__actions { gap: 0.55rem; } .site-header__account--anonymous .button { display: inline-flex; min-height: 2.2rem; padding: 0.46rem 0.62rem; font-size: 0.75rem; } .site-header__account-icon { width: 2.3rem; height: 2.3rem; } .account-profile__details > div { grid-template-columns: 1fr; gap: 0.2rem; } } /* ============================================================================================= * News article template * ============================================================================================= */ .news-article-page { padding-block: clamp(1.8rem, 4vw, 3.5rem) var(--section-gap); } .news-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(17rem, 24vw, 22rem); gap: clamp(1.5rem, 3vw, 2.7rem); align-items: stretch; } .news-article-main { min-width: 0; } .news-article-heading { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: var(--border-width) solid var(--line); } .news-article-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; } .news-article-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.25rem 0.55rem; border: var(--border-width) solid var(--green-700); border-radius: var(--radius-small); background: var(--green-700); color: var(--white); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.075em; text-transform: uppercase; } .news-article-badge--muted { border-color: var(--line); background: var(--surface-soft); color: var(--text-medium); } .news-article-heading h1 { max-width: none; font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: 0.98; } .news-article-standfirst { max-width: 52rem; margin-top: 1.15rem; color: var(--text-medium); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; } .news-article-byline { display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; margin-top: 1.1rem; color: var(--muted); font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; } .news-article-byline span, .news-article-byline time { display: inline-flex; gap: 0.38rem; align-items: center; } .news-article-byline a { color: var(--accent); text-decoration: none; } .news-article-byline a:hover { text-decoration: underline; } .news-article-hero { margin: clamp(1.4rem, 3vw, 2rem) 0 0; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); } .news-article-hero img { display: block; width: 100%; max-height: 38rem; object-fit: cover; } .news-article-prose { max-width: 100%; padding-right: 3rem; padding-block: clamp(1.6rem, 3vw, 2.6rem); color: #20231f; font-family: "Times New Roman", Times, Georgia, serif; font-size: clamp(1.08rem, 1.25vw, 1.2rem); line-height: 1.78; } .news-article-prose > * + * { margin-top: 1.15em; } .news-article-prose h2, .news-article-prose h3, .news-article-prose h4, .news-article-prose h5, .news-article-prose h6 { margin-top: 1.7em; color: var(--text-strong); font-family: var(--font-sans); line-height: 1.15; letter-spacing: -0.025em; } .news-article-prose h2 { font-size: clamp(1.65rem, 2.4vw, 2.25rem); } .news-article-prose h3 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); } .news-article-prose a { color: var(--accent-strong); text-decoration-thickness: 0.08em; text-underline-offset: 0.14em; } .news-article-prose ul, .news-article-prose ol { padding-left: 1.5em; } .news-article-prose li + li { margin-top: 0.42em; } .news-article-prose blockquote { margin-inline: 0; padding: 0.25rem 0 0.25rem 1.2rem; border-left: 0.22rem solid var(--green-600); color: var(--text-medium); font-size: 1.08em; font-style: italic; } .news-article-prose img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-small); } .news-article-prose figure { margin-inline: 0; } .news-article-prose figcaption { margin-top: 0.5rem; color: var(--muted); font-family: var(--font-sans); font-size: 0.72rem; line-height: 1.45; } .news-article-prose pre { max-width: 100%; overflow-x: auto; padding: 1rem; border: var(--border-width) solid var(--line); background: var(--ink-950); color: var(--ink-050); font-size: 0.82rem; line-height: 1.55; } .news-article-prose code { font-size: 0.88em; } .news-article-prose table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.86rem; } .news-article-prose th, .news-article-prose td { padding: 0.65rem 0.75rem; border: var(--border-width) solid var(--line); text-align: left; vertical-align: top; } .news-article-prose th { background: var(--surface-soft); color: var(--text-strong); } .news-youtube-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: #000; } .news-youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .news-article-econ-rail { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: var(--grid-gap); } .news-article-econ-rail .econ-object { width: 100%; } /* * The top box remains in normal document flow. Once the reader scrolls beyond it, * the skyscraper reaches this offset and becomes sticky. The sticky zone occupies * the remaining article height, so the creative is naturally bounded by the article * body and stops before the lower box / post-article content. */ .news-article-sticky-zone { flex: 1 1 auto; min-height: 0; } .news-article-sticky-econ { position: sticky; top: 4.45rem; } .news-author-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 0.5rem; padding: clamp(1.1rem, 2vw, 1.5rem); border: var(--border-width) solid var(--line); border-top: 0.22rem solid var(--green-600); background: var(--surface-soft); } .news-author-card__image { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface); } .news-author-card__image--placeholder { display: grid; place-items: center; color: var(--green-700); font-size: 2rem; } .news-author-card__body h2 { margin-top: 0.25rem; font-size: clamp(1.35rem, 2vw, 1.8rem); } .news-author-card__body > p { margin-top: 0.65rem; color: var(--text-medium); font-size: 0.88rem; line-height: 1.6; } .news-author-card__eyebrow, .news-article-section-heading span, .news-club-cta__copy > span { color: var(--green-700); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; } .news-author-card__role { font-weight: 800; } .news-author-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; margin-top: 0.85rem; } .news-author-card__links a { color: var(--accent); font-size: 0.75rem; font-weight: 800; text-decoration: none; } .news-article-more { margin-top: clamp(2rem, 4vw, 3.2rem); padding-top: clamp(1.3rem, 2.4vw, 1.8rem); border-top: var(--border-width) solid var(--line); } .news-article-section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; } .news-article-section-heading h2 { margin-top: 0.2rem; font-size: clamp(1.55rem, 2.3vw, 2.15rem); } .news-article-section-heading > a { color: var(--accent); font-size: 0.76rem; font-weight: 800; text-decoration: none; } .news-article-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; } .news-club-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem 1.4rem; align-items: center; margin-top: clamp(2.4rem, 5vw, 4rem); padding: clamp(1.25rem, 2.5vw, 1.8rem); border: var(--border-width) solid var(--green-700); background: var(--green-950); color: var(--white); } .news-club-cta__icon { display: grid; width: 3.4rem; aspect-ratio: 1; place-items: center; border: var(--border-width) solid color-mix(in srgb, var(--white) 18%, transparent); color: var(--lime-300); font-size: 1.4rem; } .news-club-cta__copy h2 { margin-top: 0.28rem; color: var(--white); font-size: clamp(1.25rem, 2vw, 1.7rem); } .news-club-cta__copy p { margin-top: 0.45rem; color: color-mix(in srgb, var(--white) 76%, transparent); font-size: 0.82rem; line-height: 1.55; } .news-club-cta__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; } .news-club-cta .button.secondary { border-color: color-mix(in srgb, var(--white) 35%, transparent); background: transparent; color: var(--white); } @media (max-width: 70rem) { .news-article-grid { grid-template-columns: minmax(0, 1fr) 16rem; } .news-article-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-article-card-grid .latest-news-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } .news-club-cta { grid-template-columns: auto minmax(0, 1fr); } .news-club-cta__actions { grid-column: 2; justify-content: flex-start; } } @media (max-width: 52rem) { .news-article-grid { grid-template-columns: 1fr; } .news-article-econ-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; } .news-article-sticky-zone { display: none; } .news-article-heading h1 { max-width: none; } } @media (max-width: 38rem) { .news-article-prose { font-size: 1.07rem; line-height: 1.72; } .news-author-card { grid-template-columns: 4.8rem minmax(0, 1fr); } .news-article-card-grid, .news-article-econ-rail { grid-template-columns: 1fr; } .news-article-card-grid .latest-news-tile:last-child:nth-child(odd) { grid-column: auto; } .news-club-cta { grid-template-columns: 1fr; } .news-club-cta__icon { width: 2.8rem; } .news-club-cta__actions { grid-column: auto; } } /* ============================================================================================= * ComponentEngine * ============================================================================================= */ .component-page { width: 100%; padding-block: clamp(1.8rem, 2rem, 3rem) clamp(1.8rem, 2rem, 3rem);; } .component-page__hero-wrap { position: relative; } .component-page__hero-wrap .component-hero { border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; } .component-page__hero-wrap::after { content: "COMPONENT REFERENCE"; position: absolute; right: 1rem; bottom: -0.62rem; z-index: 3; padding: 0.22rem 0.5rem; border: var(--border-width) solid var(--technical-line-strong); background: var(--cream); color: var(--green-800); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; } .component-hero { position: relative; display: grid; grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.8fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; overflow: hidden; border: calc(var(--border-width) * 2) solid var(--green-700); border-radius: var(--radius-card); background: var(--technical-surface); padding: clamp(1.35rem, 3vw, 2.5rem); box-shadow: var(--shadow-small); } .component-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.34; background-image: linear-gradient(var(--technical-line) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, var(--technical-line) var(--border-width), transparent var(--border-width)); background-size: var(--technical-grid) var(--technical-grid); } .component-hero::after { content: ""; position: absolute; inset: 0.7rem; pointer-events: none; border-top: var(--border-width) solid color-mix(in srgb, var(--green-700) 28%, transparent); border-left: var(--border-width) solid color-mix(in srgb, var(--green-700) 28%, transparent); opacity: 0.65; } .component-hero > * { position: relative; z-index: 1; } .component-hero__media { display: grid; min-height: 17rem; place-items: center; border: var(--border-width) solid var(--technical-line-strong); border-radius: var(--radius-small); background: linear-gradient(45deg, color-mix(in srgb, var(--green-050) 65%, transparent), transparent 45%), color-mix(in srgb, var(--white) 94%, var(--green-050)); padding: clamp(1rem, 3vw, 1.75rem); box-shadow: inset 0 0 0 0.35rem color-mix(in srgb, var(--white) 55%, transparent); } .component-hero__image { width: 100%; max-height: 20rem; object-fit: contain; filter: drop-shadow(0 0.8rem 1.2rem color-mix(in srgb, var(--green-950) 12%, transparent)); } .component-hero__copy { max-width: 58rem; } .component-hero__eyebrow, .component-card__category, .component-section__heading > span, .component-price__label, .component-aside-card__eyebrow { color: var(--accent); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.095em; text-transform: uppercase; } .component-hero h1 { max-width: 15ch; margin-top: 0.45rem; font-size: clamp(2.25rem, 5vw, 4.9rem); line-height: 0.98; } .component-hero__mpn { display: flex; flex-wrap: wrap; gap: 0.55rem 0.95rem; align-items: center; margin-top: 1rem; color: var(--text-medium); font-weight: 650; } .component-hero__mpn code { padding: 0.28rem 0.52rem; border: var(--border-width) solid var(--technical-line-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--green-900); font-family: var(--font-mono); font-size: 0.88em; } .component-hero__summary { max-width: 47rem; margin-top: 1.15rem; color: var(--text-medium); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.72; } .component-hero__footer { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; padding: 0.85rem 1rem; border: calc(var(--border-width) * 2) solid var(--green-700); border-top: var(--border-width) solid var(--technical-line-strong); border-radius: 0 0 var(--radius-card) var(--radius-card); background: linear-gradient(90deg, color-mix(in srgb, var(--green-050) 70%, var(--white)), var(--surface) 38%), var(--surface); box-shadow: var(--shadow-small); } .component-hero__footer::before { content: "COMPONENT CONTROLS"; position: absolute; left: 1rem; top: -0.62rem; padding: 0.18rem 0.42rem; border: var(--border-width) solid var(--technical-line-strong); background: var(--cream); color: var(--green-800); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; } .component-hero__footer-actions, .component-hero__footer-status { min-width: 0; } .component-hero__footer-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem; align-items: center; } .component-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; } .component-action { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.55rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--text-strong); padding: 0.58rem 0.82rem; font: inherit; font-size: 0.88rem; font-weight: 740; text-decoration: none; cursor: pointer; } .component-action i, .component-action svg { color: var(--green-700); } .component-action-icon-stack { display: inline-grid; place-items: center; width: 1em; height: 1em; flex: 0 0 1em; color: var(--ink-500); } .component-action-icon-stack > .component-action-icon { grid-area: 1 / 1; color: currentColor; transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast); } .component-action-icon--outline { opacity: 1; transform: scale(1); } .component-action-icon--solid { opacity: 0; transform: scale(0.72); } .component-action:hover { border-color: var(--accent); background: var(--surface-green); color: var(--accent-strong); } .component-action.is-active { border-color: var(--line); background: var(--surface); color: var(--text-strong); } .component-action[data-component-like].is-active .component-action-icon-stack, .component-action[data-component-bookmark].is-active .component-action-icon-stack { color: var(--accent); } .component-action.is-active .component-action-icon--outline { opacity: 0; transform: scale(0.72); } .component-action.is-active .component-action-icon--solid { opacity: 1; transform: scale(1); } .component-action[data-component-like], .component-action[data-component-bookmark] { position: relative; overflow: visible; } .component-action.is-popping > .component-action-icon-stack { animation: component-action-icon-pop 360ms cubic-bezier(0.2, 0.9, 0.25, 1.35); } .component-action-pop { position: absolute; left: 0.82rem; top: 50%; z-index: 5; display: grid; place-items: center; width: 1rem; height: 1rem; color: var(--accent); font-size: 0.82rem; line-height: 1; pointer-events: none; animation: component-action-float 650ms cubic-bezier(0.16, 0.8, 0.25, 1) forwards; } .component-action-pop i { color: inherit !important; } @keyframes component-action-icon-pop { 0% { transform: scale(1); } 42% { transform: scale(1.42) rotate(-7deg); } 70% { transform: scale(0.9) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } @keyframes component-action-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.55) rotate(-8deg); } 18% { opacity: 1; transform: translate(-48%, -70%) scale(1.1) rotate(4deg); } 100% { opacity: 0; transform: translate(-36%, -3.2rem) scale(1.28) rotate(10deg); } } @media (prefers-reduced-motion: reduce) { .component-action.is-popping > .component-action-icon-stack { animation: none; } .component-action-pop { display: none; } } .component-action--primary { border-color: var(--accent); background: var(--accent); color: var(--white); } .component-action--primary i, .component-action--primary svg, .component-action--primary:hover { color: var(--white); } .component-action--primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); } .component-price { display: inline-grid; grid-template-columns: auto auto; gap: 0.05rem 0.7rem; align-items: baseline; margin: 0; padding: 0.48rem 0.72rem; border: var(--border-width) solid var(--green-200); border-radius: var(--radius-small); background: var(--surface-green); } .component-price strong { color: var(--text-strong); font-size: 1.25rem; line-height: 1; } .component-price small { grid-column: 1 / -1; color: var(--muted); font-size: 0.68rem; } .component-compliance { display: flex; flex-wrap: wrap; gap: 0.42rem; padding: 0; border: 0; color: var(--text-medium); font-size: 0.78rem; } .component-compliance span { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.36rem 0.55rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); } .component-compliance i, .component-compliance svg { color: var(--accent); } .component-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); gap: clamp(1.7rem, 4vw, 3.4rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.2rem); } .component-page__main { min-width: 0; } .component-page__block { scroll-margin-top: 6rem; } .component-section { margin-bottom: clamp(2.4rem, 5vw, 4rem); } .component-section__heading { display: grid; gap: 0.18rem; margin-bottom: 1.15rem; padding-bottom: 0.8rem; border-bottom: var(--border-width) solid var(--line); } .component-section__heading h2 { margin-top: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); } .component-section:not(.component-section--editorial) > p { max-width: 58rem; color: var(--text-medium); font-size: 1rem; line-height: 1.82; } .component-section--editorial { position: relative; max-width: none; scroll-margin-top: 6rem; padding: clamp(1.3rem, 3.5vw, 2.25rem); border: var(--border-width) solid var(--line); border-top: 0.22rem solid var(--green-700); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-small); } .component-section--editorial:empty { display: none; } .component-section--editorial::before { content: "EDITORIAL / APPLICATION NOTES"; display: block; margin-bottom: 1.2rem; color: var(--green-700); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; } .component-prose { color: var(--text); font-size: 1.02rem; line-height: 1.82; } .component-prose p { /* max-width: 70ch; */ margin: 0; color: var(--text-medium); } .component-prose p + p { margin-top: 1.05em; } .component-prose h1, .component-prose h2, .component-prose h3, .component-prose h4 { max-width: 32ch; margin-top: 2em; margin-bottom: 0.7em; letter-spacing: -0.025em; } .component-prose h1:first-child, .component-prose h2:first-child, .component-prose h3:first-child, .component-prose h4:first-child { margin-top: 0; } .component-prose h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); } .component-prose h2 { padding-bottom: 0.48rem; border-bottom: var(--border-width) solid var(--line); font-size: clamp(1.55rem, 3vw, 2.15rem); } .component-prose h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); } .component-prose h4 { font-size: 1.05rem; } .component-prose ul, .component-prose ol { max-width: 70ch; margin: 1rem 0 1.35rem; padding-left: 1.45rem; } .component-prose li { padding-left: 0.2rem; color: var(--text-medium); } .component-prose li + li { margin-top: 0.4rem; } .component-prose li::marker { color: var(--green-700); font-weight: 800; } .component-prose strong { color: var(--text-strong); } .component-prose a { font-weight: 650; text-decoration-thickness: 0.08em; } .component-prose blockquote { max-width: 70ch; margin: 1.4rem 0; padding: 0.9rem 1.1rem; border-left: 0.22rem solid var(--green-600); background: var(--surface-green); color: var(--text-medium); } .component-prose blockquote > * + * { margin-top: 0.65rem; } .component-prose code { padding: 0.12rem 0.3rem; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); color: var(--green-900); font-family: var(--font-mono); font-size: 0.88em; } .component-prose pre { overflow: auto; margin: 1.4rem 0; padding: 1rem 1.1rem; border: var(--border-width) solid var(--green-900); border-radius: var(--radius-small); background: var(--green-950); color: var(--green-100); line-height: 1.62; } .component-prose pre code { padding: 0; border: 0; background: transparent; color: inherit; font-size: 0.86rem; } .component-prose hr { height: var(--border-width); margin: 2rem 0; border: 0; background: var(--line); } .component-prose img { width: auto; max-width: 100%; margin: 1.5rem auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); padding: 0.45rem; } .component-prose table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; border: var(--border-width) solid var(--line); background: var(--surface); font-size: 0.9rem; } .component-prose th, .component-prose td { padding: 0.68rem 0.8rem; border-bottom: var(--border-width) solid var(--line-soft); text-align: left; vertical-align: top; } .component-prose th { background: var(--surface-soft); color: var(--text-strong); font-weight: 760; } .component-prose tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-soft) 55%, transparent); } /* Live OEMsecrets distributor availability ---------------------------------------------------- */ .component-offers { position: relative; overflow: hidden; margin-bottom: clamp(2rem, 4vw, 3rem); padding: clamp(1.15rem, 2.8vw, 1.75rem); border: var(--border-width) solid var(--line); border-top: 0.24rem solid var(--green-700); border-radius: var(--radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--green-700) 4%, transparent), transparent 42%), var(--surface); box-shadow: var(--shadow-small); scroll-margin-top: 6rem; } .component-offers::after { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: linear-gradient(var(--technical-line) var(--border-width), transparent var(--border-width)), linear-gradient(90deg, var(--technical-line) var(--border-width), transparent var(--border-width)); background-size: 1rem 1rem; content: ""; opacity: 0.32; pointer-events: none; mask-image: linear-gradient(225deg, #000, transparent 72%); } .component-offers__heading { position: relative; z-index: 1; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.05rem; } .component-offers__heading > div { min-width: 0; } .component-offers__heading p { max-width: 54rem; margin-top: 0.35rem; color: var(--text-medium); font-size: 0.84rem; line-height: 1.55; } .component-offers__live-badge { display: inline-flex; flex: 0 0 auto; gap: 0.42rem; align-items: center; min-height: 1.9rem; padding: 0.3rem 0.55rem; border: var(--border-width) solid var(--green-200); border-radius: 999px; background: var(--surface-green); color: var(--green-800); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.045em; text-transform: uppercase; } .component-offers__live-badge svg, .component-offers__live-badge i { font-size: 0.68rem; } .component-offers__status, .component-offers__message { position: relative; z-index: 1; margin: 0; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); color: var(--text-medium); } .component-offers__status { overflow: hidden; padding: 0; } .component-offers__status-main { display: flex; gap: 0.85rem; align-items: center; min-height: 4.3rem; padding: 0.9rem 1rem; } .component-offers__status-icon { display: inline-flex; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; align-items: center; justify-content: center; border: var(--border-width) solid var(--green-200); border-radius: 50%; background: var(--surface-green); color: var(--green-800); font-size: 1rem; } .component-offers__status-copy { display: flex; min-width: 0; flex-direction: column; gap: 0.14rem; line-height: 1.45; } .component-offers__status-copy strong { color: var(--text-strong); font-size: 0.94rem; font-weight: 800; } .component-offers__status-copy > span { color: var(--text-medium); font-size: 0.78rem; } .component-offers__status.is-loading { border-color: color-mix(in srgb, var(--green-700) 22%, var(--line)); background: color-mix(in srgb, var(--surface-green) 34%, var(--surface)); } .component-offers__status.is-success { margin-bottom: 0.8rem; border-color: color-mix(in srgb, var(--green-700) 28%, var(--line)); background: color-mix(in srgb, var(--surface-green) 58%, var(--surface)); } .component-offers__status.is-success .component-offers__status-icon { border-color: color-mix(in srgb, var(--green-700) 34%, var(--green-200)); background: var(--green-700); color: var(--white); } .component-offers__status.is-empty, .component-offers__status.is-error { min-height: 7rem; } .component-offers__status.is-empty .component-offers__status-main, .component-offers__status.is-error .component-offers__status-main { min-height: 7rem; justify-content: center; padding: 1.25rem; } .component-offers__status.is-empty { border-style: dashed; background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface)); } .component-offers__status.is-empty .component-offers__status-icon { width: 3.15rem; height: 3.15rem; flex-basis: 3.15rem; border-color: var(--line); background: var(--surface); color: var(--muted); font-size: 1.25rem; } .component-offers__status.is-error { border-color: color-mix(in srgb, #a33 34%, var(--line)); background: color-mix(in srgb, #fff3f3 70%, var(--surface)); } .component-offers__status.is-error .component-offers__status-icon { border-color: color-mix(in srgb, #a33 28%, var(--line)); background: color-mix(in srgb, #fff 55%, #ffe9e9); color: #8f2c2c; } .component-offers__message { display: flex; gap: 0.65rem; align-items: center; min-height: 3.1rem; padding: 0.75rem 0.85rem; font-size: 0.84rem; } .component-offers__spinner { width: 1.18rem; height: 1.18rem; flex: 0 0 1.18rem; border: 0.14rem solid color-mix(in srgb, var(--green-700) 20%, transparent); border-top-color: var(--green-700); border-radius: 50%; animation: component-offers-spin 700ms linear infinite; } @keyframes component-offers-spin { to { transform: rotate(360deg); } } .component-offers__skeleton { display: grid; gap: 0; border-top: var(--border-width) solid color-mix(in srgb, var(--green-700) 14%, var(--line)); background: var(--surface); } .component-offers__skeleton-row { display: grid; grid-template-columns: minmax(10rem, 1.6fr) minmax(5rem, 0.65fr) minmax(6rem, 0.75fr) 4.3rem; gap: 1rem; align-items: center; min-height: 3.1rem; padding: 0.72rem 0.9rem; border-bottom: var(--border-width) solid var(--line-soft); } .component-offers__skeleton-row:last-child { border-bottom: 0; } .component-offers__skeleton-cell { position: relative; display: block; overflow: hidden; height: 0.58rem; border-radius: 999px; background: color-mix(in srgb, var(--line) 58%, var(--surface-soft)); } .component-offers__skeleton-cell::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 48%, transparent 100%); content: ""; transform: translateX(-100%); animation: component-offers-shimmer 1.35s ease-in-out infinite; } .component-offers__skeleton-cell.is-wide { width: min(14rem, 88%); } .component-offers__skeleton-cell.is-short { width: min(4.4rem, 78%); } .component-offers__skeleton-cell.is-medium { width: min(5.7rem, 84%); } .component-offers__skeleton-cell.is-button { width: 3.7rem; height: 1.55rem; justify-self: end; border-radius: var(--radius-control); } @keyframes component-offers-shimmer { 100% { transform: translateX(100%); } } .component-offers__table-wrap { position: relative; z-index: 1; overflow-x: auto; border: var(--border-width) solid var(--line); border-radius: var(--radius-small); background: var(--surface); } .component-offers-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 0.86rem; } .component-offers-table th, .component-offers-table td { padding: 0.78rem 0.88rem; border-bottom: var(--border-width) solid var(--line-soft); text-align: left; vertical-align: middle; } .component-offers-table tr:last-child td { border-bottom: 0; } .component-offers-table th { background: var(--surface-soft); color: var(--text-medium); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .component-offers-table tbody tr { transition: background-color 140ms ease; } .component-offers-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-green) 62%, var(--surface)); } .component-offers-table__distributor strong, .component-offers-table__stock, .component-offers-table__price { color: var(--text-strong); font-weight: 760; } .component-offers-table__distributor { min-width: 13rem; } .component-offers-table__distributor strong { display: inline-block; margin-right: 0.45rem; } .component-offers-table__distributor small, .component-offers-table__stock small, .component-offers-table__price small { display: block; margin-top: 0.18rem; color: var(--muted); font-size: 0.68rem; font-weight: 560; } .component-offers-table__preferred { display: inline-flex; align-items: center; min-height: 1.25rem; padding: 0.08rem 0.35rem; border: var(--border-width) solid var(--green-200); border-radius: 999px; background: var(--surface-green); color: var(--green-800); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; } .component-offers-table__stock { position: relative; padding-left: 1.48rem !important; font-family: var(--font-mono); } .component-offers-table__stock::before { position: absolute; top: 50%; left: 0.78rem; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--green-600); box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--green-600) 12%, transparent); content: ""; transform: translateY(-50%); } .component-offers-table__price { white-space: nowrap; } .component-offers-table__action { width: 1%; white-space: nowrap; text-align: right !important; } .component-offers-table__buy { display: inline-flex; gap: 0.42rem; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0.5rem 0.72rem; border: var(--border-width) solid var(--green-700); border-radius: var(--radius-control); background: var(--green-700); color: var(--white); font-size: 0.78rem; font-weight: 780; text-decoration: none; } .component-offers-table__buy:hover { border-color: var(--green-900); background: var(--green-900); color: var(--white); } .component-offers__meta { position: relative; z-index: 1; margin: 0.65rem 0 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.45; } @media (max-width: 720px) { .component-offers__heading { display: block; } .component-offers__live-badge { margin-top: 0.7rem; } .component-offers__status-main { align-items: flex-start; } .component-offers__skeleton-row { grid-template-columns: 1fr 0.65fr 0.75fr; } .component-offers__skeleton-cell.is-button { display: none; } } @media (max-width: 520px) { .component-offers { padding: 1rem; } .component-offers__status-main { gap: 0.68rem; padding: 0.85rem; } .component-offers__status-icon { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; } .component-offers__status.is-empty .component-offers__status-main, .component-offers__status.is-error .component-offers__status-main { justify-content: flex-start; } .component-offers__skeleton-row { grid-template-columns: 1.45fr 0.65fr; } .component-offers__skeleton-cell.is-medium, .component-offers__skeleton-cell.is-button { display: none; } } @media (prefers-reduced-motion: reduce) { .component-offers__spinner, .component-offers__skeleton-cell::after { animation: none; } .component-offers-table tbody tr { transition: none; } } .component-article-banner { margin: 0 0 clamp(2rem, 4vw, 3rem); } @media (prefers-reduced-motion: reduce) { .component-offers__spinner { animation: none; } } .component-spec-table-wrap { overflow: auto; border: var(--border-width) solid var(--line); border-top: 0.2rem solid var(--green-700); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-small); } .component-spec-table { width: 100%; border-collapse: collapse; } .component-spec-table th, .component-spec-table td { padding: 0.78rem 0.95rem; border-bottom: var(--border-width) solid var(--line-soft); text-align: left; vertical-align: top; } .component-spec-table tr:last-child th, .component-spec-table tr:last-child td { border-bottom: 0; } .component-spec-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-soft) 50%, transparent); } .component-spec-table th { width: 32%; background: var(--surface-soft); color: var(--text-medium); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 750; letter-spacing: 0.025em; } .component-spec-table td { color: var(--text-strong); font-weight: 580; } .component-page__aside { position: sticky; top: 5.3rem; display: grid; gap: 1rem; } .component-aside-card { border-radius: var(--radius-card); } .component-aside-card--index { padding: 1.15rem; border: var(--border-width) solid var(--line); border-top: 0.2rem solid var(--green-700); background: var(--surface); box-shadow: var(--shadow-small); } .component-aside-card h2 { margin-top: 0.35rem; font-size: 1.35rem; } .component-aside-card__intro, .component-aside-card--club p { margin-top: 0.65rem; color: var(--text-medium); font-size: 0.84rem; line-height: 1.62; } .component-aside-card--club strong { display: block; margin-top: 0.4rem; color: var(--green-950); font-size: 1rem; line-height: 1.35; } .component-aside-nav { display: grid; gap: 0.35rem; margin-top: 1rem; padding-top: 0.8rem; border-top: var(--border-width) solid var(--line); } .component-aside-nav a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.55rem; align-items: center; min-height: 2.4rem; padding: 0.35rem 0.45rem; border-radius: var(--radius-small); color: var(--text-medium); font-size: 0.84rem; font-weight: 720; text-decoration: none; } .component-aside-nav a span { color: var(--green-700); font-family: var(--font-mono); font-size: 0.68rem; } .component-aside-nav a:hover { background: var(--surface-green); color: var(--green-900); } .component-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--grid-gap); } .component-card { position: relative; display: flex; min-height: 13rem; flex-direction: column; border: var(--border-width) solid var(--line); background: var(--surface); padding: 1.1rem; } .component-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 0.18rem; background: var(--accent); } .component-card h3 { margin-top: 0.35rem; } .component-card h3 a { color: var(--text-strong); text-decoration: none; } .component-card p { margin-top: 0.7rem; color: var(--text-medium); } .component-card__action { margin-top: auto; padding-top: 1rem; font-size: 0.86rem; font-weight: 760; text-decoration: none; } .component-empty { padding: 1rem; border: var(--border-width) solid var(--line); background: var(--surface); color: var(--muted); } @media (max-width: 64rem) { .component-hero__footer { grid-template-columns: 1fr; } .component-hero__footer-status { justify-content: flex-start; } .component-page__layout { grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem); } } @media (max-width: 52rem) { .component-hero, .component-page__layout { grid-template-columns: 1fr; } .component-hero__media { min-height: 11rem; } .component-hero__image { max-height: 15rem; } .component-hero h1 { max-width: none; } .component-page__aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 36rem) { .component-page__hero-wrap::after { display: none; } .component-hero { padding: 1rem; } .component-hero__footer { padding: 0.8rem; } .component-hero__footer::before { display: none; } .component-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .component-action { justify-content: center; } .component-action--primary { grid-column: 1 / -1; } .component-hero__footer-status, .component-compliance { align-items: stretch; flex-direction: column; } .component-price { width: 100%; } .component-section--editorial { padding: 1rem; } .component-prose { font-size: 0.98rem; } .component-spec-table th { width: 42%; } .component-page__aside { grid-template-columns: 1fr; } } /* ============================================================================================= * Account header controls * ============================================================================================= */ .site-header__account-icon--logout { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; } .site-header__account-icon--logout:disabled { opacity: .55; cursor: wait; } .login-account-links { display: flex; justify-content: space-between; gap: 18px; align-items: center; } /* --- Public author profiles --- */ .author-page{display:grid;gap:1.5rem;margin:0 auto 2.5rem;max-width:78rem} .author-page__hero{display:grid;grid-template-columns:9rem minmax(0,1fr) minmax(13rem,18rem);gap:1.5rem;align-items:start;padding:1.6rem} .author-page__avatar{width:9rem;aspect-ratio:1;border:1px solid var(--line-soft);background:var(--surface-100);overflow:hidden} .author-page__avatar-image{width:100%;height:100%;object-fit:cover;display:block} .author-page__avatar-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:2.4rem;color:var(--green-700)} .author-page__identity{min-width:0}.author-page__identity h1{margin:.2rem 0 .25rem;font-size:clamp(2rem,5vw,3.4rem);line-height:1}.author-page__eyebrow,.author-page__username{font-family:var(--font-mono,monospace);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700)} .author-page__role{margin:.55rem 0 0;font-weight:750}.author-page__bio{max-width:52rem;margin:.8rem 0 0;line-height:1.75;color:var(--ink-700)} .author-page__links{display:grid;gap:.5rem}.author-page__links a{display:grid;grid-template-columns:1rem minmax(0,1fr) auto;gap:.55rem;align-items:center;padding:.65rem .7rem;border:1px solid var(--line-soft);background:var(--surface-050);font-size:.78rem;text-decoration:none} .author-page__section{padding:1.5rem;border:1px solid var(--line-soft);background:var(--surface-000,#fff)}.author-page__section>header h2{margin:.15rem 0 .7rem}.author-page__about>div{max-width:68rem;line-height:1.85;color:var(--ink-800)} .author-page__section-heading{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1rem}.author-page__section-heading h2{margin:.1rem 0 0}.author-page__section-heading>a{font-size:.78rem;font-weight:800;text-decoration:none} .author-page__articles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.author-article{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.9rem;border:1px solid var(--line-soft);background:var(--surface-050);text-decoration:none;color:inherit;overflow:hidden}.author-article__image{min-height:8rem;background:var(--surface-100);display:grid;place-items:center;overflow:hidden}.author-article__image img{width:100%;height:100%;object-fit:cover}.author-article__image--empty{color:var(--green-700);font-size:1.6rem}.author-article__body{padding:.8rem .8rem .8rem 0;min-width:0}.author-article__meta{display:flex;gap:.55rem;align-items:center;font-size:.68rem;color:var(--ink-600)}.author-article__body h3{margin:.25rem 0;font-size:1rem}.author-article__body p{margin:.35rem 0;color:var(--ink-700);font-size:.78rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.author-article__read{font-size:.72rem;font-weight:800;color:var(--green-800)} .author-page__empty{display:grid;place-items:center;gap:.45rem;min-height:11rem;border:1px dashed var(--line-soft);color:var(--ink-600);text-align:center}.author-page__empty i{font-size:1.5rem;color:var(--green-700)} .news-article-byline a,.news-author-card h2 a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em} @media(max-width:850px){.author-page__hero{grid-template-columns:6rem minmax(0,1fr)}.author-page__avatar{width:6rem}.author-page__links{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.author-page__articles{grid-template-columns:1fr}} @media(max-width:560px){.author-page__hero{grid-template-columns:1fr}.author-page__avatar{width:5rem}.author-page__links{grid-template-columns:1fr}.author-page__section-heading{align-items:flex-start;flex-direction:column}.author-article{grid-template-columns:6rem minmax(0,1fr)}}