/* ========================================================================== DealYouLike — style.css Clean light with a warm coral accent. Dark mode via [data-theme="dark"] on , set before first paint by the inline script in each . All colour, spacing and radius values come from the tokens below. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand accent. --accent : brand coral, for marks, borders, badges, icons. --accent-strong : darker coral used behind white text so that button and link text clears WCAG AA (4.5:1). Never swap these two. */ --accent: #f2542d; --accent-strong: #d13f1b; --accent-hover: #b83615; --accent-soft: rgba(242, 84, 45, 0.1); --on-accent: #ffffff; /* Surfaces & text */ --bg: #fafaf8; --bg-subtle: #f3f2ee; --surface: #ffffff; --surface-2: #f7f6f3; --border: #e8e5df; --border-strong: #d7d3ca; --text-primary: #111827; --text-secondary: #5f6672; --text-muted: #656b76; /* AA (4.5:1+) on --surface and --bg-subtle at small sizes */ /* Category tints — the background of a product tile when we have no image. Soft enough that --text-secondary clears 4.5:1 on every one of them. */ --tint-electronics: #e7eef9; /* cool blue */ --tint-home: #fcede3; /* warm peach */ --tint-fitness: #e6f2e7; /* green */ --tint-beauty: #fbeaee; /* rose */ --tint-travel: #e2f0ef; /* teal */ --tint-office: #faf0dc; /* amber */ --tint-default: #f3f2ee; /* a category we do not have a tint for yet */ /* Elevation */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-md: 0 6px 16px -6px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.04); --shadow-lg: 0 14px 32px -12px rgba(17, 24, 39, 0.18), 0 4px 10px rgba(17, 24, 39, 0.05); --header-bg: rgba(250, 250, 248, 0.86); /* Spacing scale — the only spacing values used anywhere */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Radii */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-pill: 999px; /* Layout */ --container: 76rem; --prose: 45rem; /* ~720px */ --header-h: 3.75rem; /* Motion */ --t-fast: 150ms; --t-base: 200ms; --ease: cubic-bezier(0.3, 0.7, 0.4, 1); color-scheme: light; } [data-theme="dark"] { --accent: #ff7a54; --accent-strong: #ff6b43; --accent-hover: #ff8f6e; --accent-soft: rgba(255, 122, 84, 0.14); --on-accent: #14161a; --bg: #0e0f11; --bg-subtle: #141619; --surface: #17191d; --surface-2: #1d2024; --border: #292d33; --border-strong: #3a3f47; --text-primary: #f2f4f7; --text-secondary: #a6adb8; --text-muted: #99a1ac; --tint-electronics: #172231; --tint-home: #2b1e17; --tint-fitness: #16251b; --tint-beauty: #2a1a1f; --tint-travel: #13262a; --tint-office: #29210f; --tint-default: #1d2024; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 14px 32px -12px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.35); --header-bg: rgba(14, 15, 17, 0.86); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text-primary); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-strong); text-decoration-color: color-mix(in srgb, var(--accent-strong) 40%, transparent); text-underline-offset: 0.18em; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 700; line-height: 1.18; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.6rem); } h2 { font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem); } h3 { font-size: 1.0625rem; letter-spacing: -0.014em; } p { margin: 0 0 var(--space-4); } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } li + li { margin-top: var(--space-2); } hr { height: 1px; margin: var(--space-6) 0; border: 0; background: var(--border); } :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent-soft); color: var(--text-primary); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: max(var(--space-4), env(safe-area-inset-left)); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--accent-strong); color: var(--on-accent); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform var(--t-fast) var(--ease); } .skip-link:focus-visible { transform: translateY(0); color: var(--on-accent); outline-color: var(--text-primary); } /* -------------------------------------------------------------------------- 3. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.75rem; /* 44px touch target */ padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-strong); color: var(--on-accent); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--accent); color: var(--text-primary); } .btn-block { width: 100%; } .btn .icon { flex: none; width: 1rem; height: 1rem; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .icon-btn:hover { background: var(--surface-2); border-color: var(--border); } .icon-btn svg { width: 1.25rem; height: 1.25rem; } /* -------------------------------------------------------------------------- 4. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--border); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); padding-top: env(safe-area-inset-top); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm); } .brand:hover { color: var(--text-primary); } .brand .mark { width: 1.75rem; height: 1.75rem; flex: none; color: var(--accent); } .wordmark { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.035em; } .wordmark-accent { color: var(--accent); } .site-nav .nav-list { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .site-nav .nav-list li + li { margin-top: 0; } .nav-link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .nav-link:hover { background: var(--surface-2); color: var(--text-primary); } .nav-link[aria-current="page"] { color: var(--text-primary); font-weight: 600; } .header-actions { display: flex; align-items: center; gap: var(--space-1); } /* Theme toggle swaps the two glyphs; only one is ever visible. */ .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } .nav-toggle { display: none; } @media (max-width: 47.99em) { .nav-toggle { display: inline-flex; } .site-nav { position: absolute; inset-inline: 0; top: 100%; display: none; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); } .site-nav.is-open { display: block; animation: nav-in var(--t-base) var(--ease) both; } .site-nav .nav-list { flex-direction: column; align-items: stretch; gap: var(--space-1); } .nav-link { padding: var(--space-3) var(--space-3); font-size: 1rem; } } @keyframes nav-in { from { opacity: 0; transform: translateY(-0.5rem); } } /* -------------------------------------------------------------------------- 5. Hero -------------------------------------------------------------------------- */ .main { flex: 1 0 auto; } /* Deliberately short: on a phone the grid has to start near the fold. */ .hero { padding: var(--space-5) 0 var(--space-4); } .hero h1 { margin-bottom: var(--space-2); max-width: 20ch; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); } .hero-sub { max-width: 54ch; margin-bottom: var(--space-3); color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.55; } @media (min-width: 48em) { .hero { padding: var(--space-6) 0 var(--space-5); } .hero-sub { font-size: 1.0625rem; line-height: 1.6; } } .hero-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--text-secondary); font-size: 0.75rem; line-height: 1.5; } @media (min-width: 48em) { .hero-note { font-size: 0.8125rem; } } .hero-note .icon { width: 0.875rem; height: 0.875rem; flex: none; color: var(--accent); } /* -------------------------------------------------------------------------- 6. Filter chips -------------------------------------------------------------------------- */ .filters { padding-bottom: var(--space-3); } .chip-row { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-2); margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); } .chip-row::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; min-height: 2.5rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .chip:hover { border-color: var(--accent); color: var(--text-primary); } .chip[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); font-weight: 600; } .chip-count { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.75rem; } .chip[aria-pressed="true"] .chip-count { color: var(--on-accent); } .result-count { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: 0.875rem; } /* -------------------------------------------------------------------------- 7. Product grid & cards -------------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 30em) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 48em) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } } @media (min-width: 75em) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .grid > li { margin: 0; } .card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } @media (hover: hover) { .card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } } .card:focus-within { border-color: var(--accent); } .card-media { position: relative; flex: none; /* never let a tall card body shrink the square */ aspect-ratio: 4 / 3; /* shorter on single-column phones so a card fits a screen */ background: #ffffff; border-bottom: 1px solid var(--border); } @media (min-width: 30em) { .card-media { aspect-ratio: 1 / 1; } } /* Absolute so a portrait or landscape source can never stretch the square. */ .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--space-4); object-fit: contain; } /* -------------------------------------------------------------------------- 7b. Product tiles — what fills the media area when a product has no image (js/product-media.js renders these; see the note at the top of that file). -------------------------------------------------------------------------- */ .tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); background: var(--tint-default); text-align: center; } .tile-icon { width: 3rem; /* 48px */ height: 3rem; flex: none; margin-bottom: var(--space-1); color: var(--text-secondary); } .tile-brand { max-width: 100%; margin: 0; overflow: hidden; color: var(--text-primary); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .tile-category { margin: 0; color: var(--text-secondary); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } /* The same tints serve the review hero, the cards and the mini thumbnails. */ .tile-electronics, .mini-tile.tile-electronics { background: var(--tint-electronics); } .tile-home, .mini-tile.tile-home { background: var(--tint-home); } .tile-fitness, .mini-tile.tile-fitness { background: var(--tint-fitness); } .tile-beauty, .mini-tile.tile-beauty { background: var(--tint-beauty); } .tile-travel, .mini-tile.tile-travel { background: var(--tint-travel); } .tile-office, .mini-tile.tile-office { background: var(--tint-office); } .media-panel .tile-icon { width: 4rem; height: 4rem; } .media-panel .tile-brand { font-size: 1.125rem; } .mini-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--tint-default); } .mini-tile-icon { width: 1.5rem; height: 1.5rem; color: var(--text-secondary); } .badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; padding: 0.1875rem var(--space-3); border-radius: var(--radius-pill); background: var(--accent-strong); color: var(--on-accent); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.6; box-shadow: var(--shadow-sm); } .card-body { display: flex; flex-direction: column; flex: 1; gap: var(--space-2); padding: var(--space-4); } .card-category { margin: 0; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .card-title { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.012em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-desc { margin: 0; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The media and the title both link to the review page; the media link fills the media box, is kept out of the tab order and is hidden from assistive tech, so the card offers one keyboard stop and one announcement per destination. The badge sits above it (z-index) and stays announced. */ .card-media-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; } .card-title a { color: inherit; text-decoration: none; } .card-title a:hover { color: var(--accent-strong); text-decoration: underline; } .card-cta { display: flex; flex-direction: column; margin-top: auto; padding-top: var(--space-3); } .card-cta .btn { width: 100%; } .card-readmore { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.75rem; /* 44px touch target */ margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .card-readmore:hover { background: var(--accent-soft); color: var(--accent-hover); } .card-readmore .icon { width: 0.875rem; height: 0.875rem; flex: none; transition: transform var(--t-fast) var(--ease); } .card-readmore:hover .icon { transform: translateX(2px); } /* Disclosure sits with the button it belongs to, inside the card. */ .card-disclosure { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: 0.75rem; line-height: 1.4; text-align: center; text-wrap: balance; } /* Card entry animation — staggered, capped, disabled for reduced motion. */ .card-in { animation: card-in var(--t-base) var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); } @keyframes card-in { from { opacity: 0; transform: translateY(0.5rem); } } /* Loading skeletons */ .skeleton .card-media, .skeleton-line { background: var(--surface-2); position: relative; overflow: hidden; } .skeleton-line { height: 0.75rem; border-radius: var(--radius-sm); } .skeleton-line.is-short { width: 45%; } .skeleton-line.is-tall { height: 2.75rem; border-radius: var(--radius-md); margin-top: auto; } .skeleton .card-media::after, .skeleton-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Empty / error state */ .state { grid-column: 1 / -1; padding: var(--space-7) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); text-align: center; } .state .icon-lg { width: 2rem; height: 2rem; margin: 0 auto var(--space-3); color: var(--accent); } .state h2 { margin-bottom: var(--space-2); font-size: 1.125rem; } .state p { max-width: 42ch; margin: 0 auto var(--space-4); color: var(--text-secondary); font-size: 0.9375rem; } .state p:last-child { margin-bottom: 0; } .picks-section { padding-bottom: var(--space-6); } .reviewed { margin: var(--space-6) 0 0; color: var(--text-muted); font-size: 0.8125rem; text-align: center; } /* -------------------------------------------------------------------------- 8. Review pages (reviews/.html, generated by scripts/build-pages.js) -------------------------------------------------------------------------- */ .review-page { padding: var(--space-4) 0 var(--space-8); } .breadcrumb { margin-bottom: var(--space-5); font-size: 0.8125rem; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-width: 0; } .breadcrumb li + li::before { content: "›"; color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; } .breadcrumb a:hover { color: var(--accent-strong); text-decoration: underline; } /* The product title can be long; keep the trail to one line on a phone. */ .breadcrumb .is-current { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; } .review-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; } @media (min-width: 62em) { .review-layout { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: var(--space-7); } .review-media { position: sticky; top: calc(var(--header-h) + var(--space-4)); } } .media-panel { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #ffffff; box-shadow: var(--shadow-sm); } .media-panel img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--space-5); object-fit: contain; } .review-head { margin-bottom: var(--space-5); } .review-head h1 { margin-bottom: var(--space-3); font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem); } .review-head .card-category { margin-bottom: var(--space-2); } .review-section { margin-top: var(--space-6); } .review-section h2 { margin-bottom: var(--space-3); font-size: 1.125rem; } /* Cap the measure so the copy stays readable on a wide screen. */ .review-section p, .review-section li { max-width: 68ch; color: var(--text-secondary); line-height: 1.75; } .review-section p:last-child { margin-bottom: 0; } .highlight-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; } .highlight-row li { margin: 0; } .highlight { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; } .icon-list { margin: 0; padding: 0; list-style: none; } .icon-list li { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-3); color: var(--text-secondary); } .icon-list li:last-child { margin-bottom: 0; } .icon-list svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.3em; } .icon-list .icon-check { color: var(--accent); } .icon-list .icon-alert { color: var(--text-muted); } .review-cta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); } .review-cta .btn { width: 100%; font-size: 1rem; } @media (min-width: 30em) { .review-cta .btn { width: auto; min-width: 17rem; } } .review-disclosure { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; } .review-fineprint { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: 0.8125rem; font-style: italic; line-height: 1.5; } .more-section { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); } .more-section h2 { font-size: 1.125rem; } .mini-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 36em) { .mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } } .mini-grid li { margin: 0; } .mini-card { display: flex; align-items: center; gap: var(--space-3); height: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-primary); text-decoration: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-base) var(--ease); } @media (hover: hover) { .mini-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); color: var(--text-primary); } } .mini-thumb { position: relative; flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: #ffffff; } .mini-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--space-1); object-fit: contain; } .mini-text { min-width: 0; } .mini-title { display: -webkit-box; margin: 0; overflow: hidden; font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* -------------------------------------------------------------------------- 9. Article pages -------------------------------------------------------------------------- */ .prose { max-width: var(--prose); margin-inline: auto; padding: var(--space-6) 0 var(--space-8); } .prose header { margin-bottom: var(--space-6); } .prose .eyebrow { display: block; margin-bottom: var(--space-2); color: var(--accent-strong); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .prose .lede { color: var(--text-secondary); font-size: 1.0625rem; } .prose h2 { margin-top: var(--space-6); } .prose h3 { margin-top: var(--space-5); font-size: 1rem; } .prose p, .prose li { color: var(--text-secondary); font-size: 1rem; line-height: 1.75; } .prose strong { color: var(--text-primary); font-weight: 600; } .meta-date { margin-bottom: var(--space-6); color: var(--text-muted); font-size: 0.875rem; } .prose code { padding: 0.1em 0.4em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; } .callout { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); } .callout p:last-child { margin-bottom: 0; } .contact-cta { margin: var(--space-6) 0 var(--space-4); text-align: center; } .contact-cta .btn { font-size: 1.0625rem; padding: var(--space-4) var(--space-6); } .contact-note { color: var(--text-muted); font-size: 0.875rem; text-align: center; } /* 404 */ .notfound { max-width: var(--prose); margin-inline: auto; padding: var(--space-8) 0; text-align: center; } .notfound .code { display: block; margin-bottom: var(--space-3); color: var(--accent); font-size: 3.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .notfound p { max-width: 44ch; margin-inline: auto; color: var(--text-secondary); } .notfound .btn { margin-top: var(--space-3); } /* -------------------------------------------------------------------------- 10. Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: auto; padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg-subtle); } .footer-top { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-5); } .footer-brand .brand { margin-bottom: var(--space-2); } .footer-tagline { margin: 0; max-width: 34ch; color: var(--text-secondary); font-size: 0.875rem; } .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; } .footer-nav li + li { margin-top: 0; } .footer-nav a { display: inline-block; padding: var(--space-1) 0; color: var(--text-secondary); font-size: 0.875rem; text-decoration: none; } .footer-nav a:hover { color: var(--accent-strong); text-decoration: underline; } .footer-legal { padding-top: var(--space-5); border-top: 1px solid var(--border); } .footer-legal p { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: 0.8125rem; line-height: 1.6; } .footer-legal p:last-child { margin-bottom: 0; } .footer-legal .disclosure { color: var(--text-secondary); } @media (min-width: 48em) { .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-7); } } /* -------------------------------------------------------------------------- 11. Motion preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .card:hover { transform: none; } }