/* ========================================================================== RootCoreX — components.css Reusable, page-agnostic components. Anything used on two or more pages lives here; single-use section layouts belong in sections.css. Load order: base.css → components.css → sections.css Everything is wrapped in @layer components, so utilities in base.css always win without needing !important. --------------------------------------------------------------------------- JS CONTRACT — main.js must honour exactly these hooks: set synchronously in .site-header.is-scrolled toggled past 24px scroll .site-header.is-hidden hidden on scroll-down, shown on up body.is-nav-open mobile drawer open (locks scroll) .nav-toggle[aria-expanded="true|false"] .nav-drawer[data-open="true|false"] .nav-link[aria-current="page"] current page .dropdown[data-open="true|false"] desktop menu .accordion__trigger[aria-expanded] + .accordion__panel[hidden] .tabs__tab[aria-selected] + .tabs__panel[hidden] .reveal.is-revealed IntersectionObserver (base.css) .copy-button[data-state="idle|copied|error"] .back-to-top.is-visible .form[data-state="idle|submitting|success|error"] .card--spotlight --pointer-x/--pointer-y set on pointermove (optional) ========================================================================== */ @layer components { /* ========================================================================== 1. BUTTONS ========================================================================== */ .btn { /* Per-instance knobs so variants stay declarative. */ --btn-bg: transparent; --btn-color: var(--color-text); --btn-border: var(--color-border-strong); --btn-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding-block: 0.75rem; padding-inline: 1.5rem; border: 1px solid var(--btn-border); border-radius: var(--radius-full); background-color: var(--btn-bg); box-shadow: var(--btn-shadow); color: var(--btn-color); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-none); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .btn:hover { color: var(--btn-color); } .btn:active { transform: translateY(1px); } .btn svg { inline-size: 1.05em; block-size: 1.05em; flex-shrink: 0; } /* --- Primary: the one full-strength accent element per viewport -------- */ .btn--primary { --btn-bg: var(--color-accent); --btn-color: var(--color-text-inverse); --btn-border: var(--color-accent); font-weight: var(--weight-semibold); } .btn--primary:hover { --btn-shadow: 0 0 28px -4px var(--color-accent-glow); filter: brightness(1.08); } /* --- Secondary: bordered, neutral ------------------------------------- */ .btn--secondary:hover { --btn-bg: rgb(255 255 255 / 0.05); --btn-border: var(--color-text-muted); } /* --- Ghost: text-only, for tertiary actions --------------------------- */ .btn--ghost { --btn-border: transparent; padding-inline: var(--space-sm); } .btn--ghost:hover { --btn-bg: rgb(255 255 255 / 0.05); } /* --- Outline accent: for dark cards ----------------------------------- */ .btn--accent-outline { --btn-color: var(--color-accent); --btn-border: var(--color-border-accent); } .btn--accent-outline:hover { --btn-bg: var(--color-accent-faint); --btn-border: var(--color-accent); } /* --- Sizes ------------------------------------------------------------ */ .btn--sm { padding-block: 0.5rem; padding-inline: 1rem; font-size: var(--text-xs); } .btn--lg { padding-block: 1rem; padding-inline: 2rem; font-size: var(--text-base); } .btn--block { display: flex; inline-size: 100%; } /* --- Icon-only -------------------------------------------------------- */ .btn--icon { padding: 0.625rem; border-radius: var(--radius-full); aspect-ratio: 1; } .btn--icon svg { inline-size: 1.25rem; block-size: 1.25rem; } /* --- States ----------------------------------------------------------- */ .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn[aria-busy="true"] { pointer-events: none; color: transparent; position: relative; } .btn[aria-busy="true"]::after { content: ""; position: absolute; inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-block-start-color: var(--color-text-inverse); border-radius: var(--radius-full); color: rgb(0 0 0 / 0.3); animation: rcx-spin 620ms linear infinite; } @keyframes rcx-spin { to { transform: rotate(1turn); } } /* --- Arrow link: inline CTA with a nudging chevron --------------------- */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-accent); text-decoration: none; } .link-arrow svg { inline-size: 1em; block-size: 1em; transition: transform var(--duration-base) var(--ease-out); } .link-arrow:hover svg { transform: translateX(3px); } /* ========================================================================== 2. BADGES, PILLS, FINGERPRINTS ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.7em; border: 1px solid var(--color-border); border-radius: var(--radius-full); background-color: var(--color-bg-surface); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); line-height: var(--leading-none); color: var(--color-text-muted); white-space: nowrap; } .badge--accent { border-color: var(--color-border-accent); background-color: var(--color-accent-faint); color: var(--color-accent); } .badge--live::before, .badge--beta::before, .badge--soon::before { content: ""; inline-size: 0.4em; block-size: 0.4em; border-radius: var(--radius-full); background-color: currentColor; } .badge--live { color: var(--color-success); border-color: rgb(74 222 128 / 0.3); } .badge--live::before { animation: rcx-pulse 2.4s var(--ease-in-out) infinite; } .badge--beta { color: var(--color-warning); border-color: rgb(251 191 36 / 0.3); } .badge--soon { color: var(--color-text-faint); } @keyframes rcx-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: 0.6; box-shadow: 0 0 0 3px rgb(74 222 128 / 0); } } /* --- Fingerprint ------------------------------------------------------ RootCoreX's structural marker. Certificate thumbprints are how this industry actually labels things, so sections and cards are keyed by a short hex fingerprint rather than generic 01 / 02 / 03 numbering. */ .fingerprint { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-wide); color: var(--color-text-faint); text-transform: uppercase; user-select: all; } .fingerprint::before { content: "0x"; opacity: 0.5; } /* ========================================================================== 3. CARDS ========================================================================== */ .card { position: relative; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--card-pad, var(--space-xl)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-card); overflow: hidden; isolation: isolate; } .card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); } .card__title { font-size: var(--text-lg); font-weight: var(--weight-medium); } .card__body { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); } .card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); /* Pins the CTA to the bottom so cards in a row align. */ margin-block-start: auto; padding-block-start: var(--space-sm); } .card__media { margin: calc(var(--card-pad, var(--space-xl)) * -1); margin-block-end: 0; aspect-ratio: 16 / 9; background-color: var(--color-bg-surface); } .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* --- Interactive: whole card is a link target -------------------------- */ .card--interactive { transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .card--interactive:hover { border-color: var(--color-border-strong); background-color: var(--color-bg-elevated); transform: translateY(-2px); } /* Stretched link — keeps one real for a11y while the card is clickable. */ .card__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); } .card:has(.card__link:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; } .card:has(.card__link:focus-visible) .card__link:focus-visible { outline: none; } /* --- Accent edge: hairline that ignites on hover ----------------------- */ .card--edge::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; background: linear-gradient( 90deg, transparent, var(--color-accent), transparent ); opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); } .card--edge:hover::before, .card--edge:focus-within::before { opacity: 1; } /* --- Spotlight: pointer-tracked bloom, set by JS ----------------------- */ .card--spotlight::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient( 22rem circle at var(--pointer-x, 50%) var(--pointer-y, 0%), var(--color-accent-faint), transparent 62% ); opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); } .card--spotlight:hover::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .card--interactive:hover { transform: none; } } /* --- Stat card --------------------------------------------------------- */ .stat { display: flex; flex-direction: column; gap: var(--space-2xs); } .stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tighter); line-height: var(--leading-none); font-variant-numeric: tabular-nums; } .stat__label { font-size: var(--text-sm); color: var(--color-text-muted); } /* --- Icon frame -------------------------------------------------------- */ .icon-frame { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-surface); color: var(--color-accent); } .icon-frame svg { inline-size: 1.25rem; block-size: 1.25rem; } /* ========================================================================== 4. SITE HEADER & NAVIGATION ========================================================================== */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); block-size: var(--header-height); border-block-end: 1px solid transparent; transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .site-header.is-scrolled { background-color: rgb(5 5 5 / 0.72); border-block-end-color: var(--color-border); } @supports (backdrop-filter: blur(1px)) { .site-header.is-scrolled { background-color: rgb(5 5 5 / 0.55); backdrop-filter: blur(16px) saturate(160%); } } .site-header.is-hidden { transform: translateY(-100%); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); block-size: 100%; } /* --- Wordmark ---------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--color-text); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--color-text); } .brand__mark { inline-size: 1.75rem; block-size: 1.75rem; color: var(--color-accent); } .brand__x { color: var(--color-accent); } /* --- Primary nav ------------------------------------------------------- */ .nav { display: none; } .nav__list { display: flex; align-items: center; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; } .nav-link { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .nav-link:hover { color: var(--color-text); background-color: rgb(255 255 255 / 0.05); } .nav-link[aria-current="page"] { color: var(--color-text); } .nav-link[aria-current="page"]::after { content: ""; inline-size: 0.3rem; block-size: 0.3rem; border-radius: var(--radius-full); background-color: var(--color-accent); } /* --- Desktop dropdown -------------------------------------------------- */ .dropdown { position: relative; } .dropdown__trigger svg { inline-size: 0.85em; block-size: 0.85em; transition: transform var(--duration-fast) var(--ease-out); } .dropdown[data-open="true"] .dropdown__trigger svg { transform: rotate(180deg); } .dropdown__panel { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; inline-size: min(22rem, 80vw); padding: var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-card); box-shadow: var(--shadow-lg); list-style: none; margin: 0; opacity: 0; transform: translate(-50%, -0.5rem); visibility: hidden; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); } @supports (backdrop-filter: blur(1px)) { .dropdown__panel { background-color: rgb(22 22 22 / 0.9); backdrop-filter: blur(20px); } } .dropdown[data-open="true"] .dropdown__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .dropdown__item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-sm); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); } .dropdown__item:hover { background-color: rgb(255 255 255 / 0.05); color: var(--color-text); } .dropdown__item-title { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } .dropdown__item-desc { display: block; font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); } /* --- Header actions ---------------------------------------------------- */ .site-header__actions { display: flex; align-items: center; gap: var(--space-xs); } /* --- Mobile toggle ----------------------------------------------------- */ .nav-toggle { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); } .nav-toggle__bars { display: block; inline-size: 1.05rem; block-size: 0.6rem; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; inset-inline: 0; block-size: 1.5px; background-color: currentColor; transition: transform var(--duration-base) var(--ease-out), inset-block var(--duration-base) var(--ease-out); } .nav-toggle__bars::before { inset-block-start: 0; } .nav-toggle__bars::after { inset-block-end: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { inset-block-start: 50%; transform: translateY(-50%) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { inset-block-end: 50%; transform: translateY(50%) rotate(-45deg); } /* --- Mobile drawer ----------------------------------------------------- */ .nav-drawer { position: fixed; inset: var(--header-height) 0 0; z-index: var(--z-overlay); display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl) var(--container-pad) var(--space-3xl); background-color: var(--color-bg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-0.75rem); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base); } .nav-drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; } .nav-drawer__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .nav-drawer__link { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-md); border-block-end: 1px solid var(--color-border); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text); text-decoration: none; } .nav-drawer__link[aria-current="page"] { color: var(--color-accent); } .nav-drawer__actions { display: flex; flex-direction: column; gap: var(--space-sm); } body.is-nav-open { overflow: hidden; } /* --- Desktop breakpoint ------------------------------------------------ */ @media (width >= 64rem) { .nav { display: block; } .nav-toggle, .nav-drawer { display: none; } } /* ========================================================================== 5. FORMS ========================================================================== */ .field { display: flex; flex-direction: column; gap: var(--space-2xs); } .field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } .field__label .required { color: var(--color-accent); } .field__hint { font-size: var(--text-xs); color: var(--color-text-muted); } .field__error { display: flex; align-items: center; gap: 0.35em; font-size: var(--text-xs); color: var(--color-danger); } .field__error:empty { display: none; } .input, .textarea, .select { inline-size: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-bg-surface); color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-snug); transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .input::placeholder, .textarea::placeholder { color: var(--color-text-faint); } .input:hover, .textarea:hover, .select:hover { border-color: var(--color-text-faint); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-accent); background-color: var(--color-bg-card); box-shadow: 0 0 0 3px var(--color-accent-faint); } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--color-danger); } .input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(248 113 113 / 0.16); } .textarea { min-block-size: 8rem; resize: vertical; } .select { appearance: none; padding-inline-end: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239b9b9b' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; cursor: pointer; } /* --- Checkbox ---------------------------------------------------------- */ .checkbox { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; } .checkbox input { appearance: none; inline-size: 1.15rem; block-size: 1.15rem; flex-shrink: 0; margin-block-start: 0.15rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); background-color: var(--color-bg-surface); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .checkbox input:checked { background-color: var(--color-accent); border-color: var(--color-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23050505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.8rem; } /* --- Form status ------------------------------------------------------- */ .form__status { display: none; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); } .form[data-state="success"] .form__status, .form[data-state="error"] .form__status { display: flex; } .form[data-state="success"] .form__status { border-color: rgb(74 222 128 / 0.3); color: var(--color-success); } .form[data-state="error"] .form__status { border-color: rgb(248 113 113 / 0.3); color: var(--color-danger); } /* --- Inline newsletter form -------------------------------------------- */ .form-inline { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .form-inline .input { flex: 1 1 14rem; border-radius: var(--radius-full); padding-inline: 1.25rem; } /* ========================================================================== 6. DISCLOSURE: ACCORDION & TABS ========================================================================== */ .accordion { border-block-start: 1px solid var(--color-border); } .accordion__item { border-block-end: 1px solid var(--color-border); } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); inline-size: 100%; padding-block: var(--space-lg); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-medium); text-align: start; color: var(--color-text); transition: color var(--duration-fast) var(--ease-out); } .accordion__trigger:hover { color: var(--color-accent); } .accordion__icon { position: relative; inline-size: 1rem; block-size: 1rem; flex-shrink: 0; } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 100%; block-size: 1.5px; background-color: currentColor; transition: transform var(--duration-base) var(--ease-out); } .accordion__icon::after { transform: rotate(90deg); } .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); } .accordion__panel { padding-block-end: var(--space-lg); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-inline-size: var(--measure); } /* --- Tabs -------------------------------------------------------------- */ .tabs__list { display: flex; gap: var(--space-2xs); overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--color-border); } .tabs__list::-webkit-scrollbar { display: none; } .tabs__tab { padding: var(--space-sm) var(--space-md); border-block-end: 1px solid transparent; margin-block-end: -1px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); white-space: nowrap; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .tabs__tab:hover { color: var(--color-text); } .tabs__tab[aria-selected="true"] { color: var(--color-accent); border-block-end-color: var(--color-accent); } .tabs__panel { padding-block-start: var(--space-xl); } /* ========================================================================== 7. CONTENT BLOCKS ========================================================================== */ /* --- Code block with copy control -------------------------------------- */ .code-block { position: relative; } .code-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-block-end: 0; border-start-start-radius: var(--radius-md); border-start-end-radius: var(--radius-md); background-color: var(--color-bg-card); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); } .code-block__head + pre { border-start-start-radius: 0; border-start-end-radius: 0; } .copy-button { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .copy-button:hover { color: var(--color-text); background-color: rgb(255 255 255 / 0.06); } .copy-button[data-state="copied"] { color: var(--color-accent); } .copy-button[data-state="error"] { color: var(--color-danger); } /* --- Callout ----------------------------------------------------------- */ .callout { display: flex; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border); border-inline-start: 2px solid var(--color-accent); border-radius: var(--radius-sm); background-color: var(--color-bg-surface); font-size: var(--text-sm); color: var(--color-text-muted); } .callout--warning { border-inline-start-color: var(--color-warning); } .callout--danger { border-inline-start-color: var(--color-danger); } .callout__title { display: block; font-weight: var(--weight-semibold); color: var(--color-text); margin-block-end: 0.15rem; } /* --- Data table -------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .table { inline-size: 100%; font-size: var(--text-sm); text-align: start; } .table :is(th, td) { padding: var(--space-sm) var(--space-md); border-block-end: 1px solid var(--color-border); text-align: start; vertical-align: top; } .table thead th { background-color: var(--color-bg-surface); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; } .table tbody td { color: var(--color-text-muted); } .table tbody tr:last-child :is(th, td) { border-block-end: 0; } .table tbody tr:hover td { background-color: rgb(255 255 255 / 0.02); } /* --- Meta row (author, date, read time) -------------------------------- */ .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); } .meta > * + *::before { content: ""; display: inline-block; inline-size: 3px; block-size: 3px; margin-inline-end: var(--space-sm); border-radius: var(--radius-full); background-color: currentColor; vertical-align: middle; opacity: 0.6; } .avatar { inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); object-fit: cover; } /* --- Breadcrumb -------------------------------------------------------- */ .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); color: var(--color-text-muted); } .breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-xs); color: var(--color-text-faint); } .breadcrumb a { text-decoration: none; } /* --- Pagination -------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); } .pagination__link { display: grid; place-items: center; min-inline-size: 2.25rem; block-size: 2.25rem; padding-inline: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .pagination__link:hover { border-color: var(--color-border-strong); color: var(--color-text); } .pagination__link[aria-current="page"] { border-color: var(--color-border-accent); background-color: var(--color-accent-faint); color: var(--color-accent); } /* ========================================================================== 8. LOGO STRIP ========================================================================== */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xl) var(--space-3xl); } .logo-strip__item { block-size: 1.5rem; color: var(--color-text-faint); opacity: 0.75; transition: color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .logo-strip__item:hover { color: var(--color-text-muted); opacity: 1; } .logo-strip__item svg, .logo-strip__item img { block-size: 100%; inline-size: auto; } /* ========================================================================== 9. SITE FOOTER ========================================================================== */ .site-footer { border-block-start: 1px solid var(--color-border); background-color: var(--color-bg); padding-block: var(--space-4xl) var(--space-xl); } .site-footer__grid { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; } .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-md); max-inline-size: 22rem; } .site-footer__tagline { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); } .footer-nav__title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-faint); margin-block-end: var(--space-md); } .footer-nav__list { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .footer-nav__list a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; } .footer-nav__list a:hover { color: var(--color-text); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-start: var(--space-3xl); padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-faint); } .social-list { display: flex; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; } .social-list a { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .social-list a:hover { color: var(--color-accent); border-color: var(--color-border-accent); } .social-list svg { inline-size: 1rem; block-size: 1rem; } @media (width >= 48rem) { .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-3xl); } } /* ========================================================================== 10. BACK TO TOP ========================================================================== */ .back-to-top { position: fixed; inset-block-end: var(--space-lg); inset-inline-end: var(--space-lg); z-index: var(--z-sticky); display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background-color: var(--color-bg-card); color: var(--color-text-muted); opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base), color var(--duration-fast) var(--ease-out); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { color: var(--color-accent); border-color: var(--color-border-accent); } .back-to-top svg { inline-size: 1rem; block-size: 1rem; } }