/* HCS Computers — design tokens + base + shared components Light-first. Dark toggled via [data-theme="dark"] on . Three variations toggled via [data-variant="paper|grid|studio"] on . */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- Root tokens (default: paper / light) ---------- */ :root { --serif: "Instrument Serif", ui-serif, Georgia, serif; --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Warm paper base */ --bg: #f4f0e9; --bg-2: #ede7dc; --surface: #faf7f1; --ink: #161310; --ink-2: #2a241d; --muted: #6b5f50; --muted-2: #8a7d6c; --rule: #d9d0bf; --rule-2: #c4b79f; --accent: #c2441f; /* terracotta */ --accent-ink: #ffffff; --accent-soft: #e8cdbf; --selection: #f0d5b0; --fs-body: 17px; --lh-body: 1.55; --maxw: 1280px; --gutter: clamp(18px, 3vw, 40px); --shadow-1: 0 1px 0 rgba(22,19,16,0.04), 0 8px 24px -12px rgba(22,19,16,0.12); --shadow-2: 0 2px 0 rgba(22,19,16,0.05), 0 30px 60px -30px rgba(22,19,16,0.22); } /* ---------- Variant: GRID (technical) ---------- */ :root[data-variant="grid"] { --bg: #f4f4f1; --bg-2: #eaeae5; --surface: #ffffff; --ink: #0e0f10; --ink-2: #1b1d1f; --muted: #5a5e63; --muted-2: #7f848a; --rule: #d6d6d1; --rule-2: #bfbfb9; --accent: #1f4bff; /* electric blue */ --accent-soft: #d7dfff; --selection: #cddaff; } /* ---------- Variant: STUDIO (spacious) ---------- */ :root[data-variant="studio"] { --bg: #f7f5f2; --bg-2: #ecebe6; --surface: #ffffff; --ink: #10130f; --ink-2: #1c201a; --muted: #60665b; --muted-2: #858c7f; --rule: #d7d6d0; --rule-2: #c0bfb8; --accent: #1f6b4a; /* deep garden green */ --accent-soft: #cbe3d6; --selection: #c7e5d6; } /* ---------- Dark overrides (for each variant) ---------- */ :root[data-theme="dark"] { --bg: #13110e; --bg-2: #1a1713; --surface: #1e1a15; --ink: #f3ede0; --ink-2: #d8cfbd; --muted: #9a8e7a; --muted-2: #7a7062; --rule: #2d2721; --rule-2: #3d352c; --accent: #ef6a3d; --accent-soft: #3a1f12; --selection: #3a2514; } :root[data-theme="dark"][data-variant="grid"] { --bg: #0b0c0e; --bg-2: #111316; --surface: #14171a; --ink: #eef0f3; --ink-2: #cfd3d8; --muted: #8a9099; --muted-2: #6a7079; --rule: #22262b; --rule-2: #2d333a; --accent: #7aa0ff; --accent-soft: #1a2340; } :root[data-theme="dark"][data-variant="studio"] { --bg: #0d0f0c; --bg-2: #131611; --surface: #171a14; --ink: #eef0e8; --ink-2: #cfd3c9; --muted: #8a9184; --muted-2: #6a7065; --rule: #23261f; --rule-2: #2e3229; --accent: #6fc79a; --accent-soft: #1a2e23; } /* ---------- Reset-ish ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); } body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv01"; } ::selection { background: var(--selection); color: var(--ink); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } img, svg { display: block; max-width: 100%; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* ---------- Layout primitives ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Typographic scale ---------- */ .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .display-1 { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 8.5vw, 132px); line-height: 0.96; letter-spacing: -0.02em; color: var(--ink); } .display-2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.015em; } .headline { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; } .card-title { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.12; letter-spacing: -0.005em; } /* ---------- Navbar ---------- */ .nav { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 24px; } .brand { display: flex; align-items: baseline; gap: 10px; cursor: pointer; } .brand-mark { font-family: var(--serif); font-size: 26px; letter-spacing: -0.02em; line-height: 1; } .brand-mark em { font-style: italic; color: var(--accent); } .brand-sub { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } .nav-links { display: flex; gap: 4px; } .nav-link { position: relative; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background .15s ease, color .15s ease; } .nav-link:hover { background: var(--bg-2); } .nav-link[aria-current="page"] { color: var(--accent); } .nav-link[aria-current="page"]::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 2px; } .nav-actions { display: flex; gap: 6px; align-items: center; } .icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink-2); transition: background .15s ease, color .15s ease; } .icon-btn:hover { background: var(--bg-2); color: var(--ink); } .icon-btn svg { width: 17px; height: 17px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; border: 1px solid transparent; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { border-color: var(--rule-2); color: var(--ink-2); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } /* ---------- Footer ---------- */ .footer { margin-top: 120px; border-top: 1px solid var(--rule); background: var(--bg); } .footer-inner { padding: 56px 0 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer h5 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 14px; font-weight: 500; } .footer-links a { display: block; padding: 4px 0; color: var(--ink-2); font-size: 14px; transition: color .15s; } .footer-links a:hover { color: var(--accent); } .footer-bottom { padding: 22px 0; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; } /* ---------- Tags / chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--rule-2); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); background: var(--surface); } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ---------- Placeholder media (no fake imagery) ---------- */ .ph { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: repeating-linear-gradient( 45deg, color-mix(in oklab, var(--ink) 4%, transparent) 0 1px, transparent 1px 10px ), var(--bg-2); border: 1px solid var(--rule); color: var(--muted); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; } .ph::before { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--rule-2); border-radius: 2px; } .ph span { position: relative; padding: 4px 10px; background: var(--bg); border: 1px solid var(--rule-2); } /* ---------- Post card (default) ---------- */ .post-card { display: block; cursor: pointer; transition: transform .3s ease; } .post-card:hover { transform: translateY(-2px); } .post-card .ph { transition: filter .3s ease; } .post-card:hover .ph { filter: brightness(0.96); } .post-meta { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 14px; } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule-2); } .post-title { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.14; letter-spacing: -0.005em; margin: 10px 0 6px; color: var(--ink); } .post-dek { color: var(--muted); font-size: 14.5px; line-height: 1.5; } /* ---------- VARIANT: grid adjustments ---------- */ :root[data-variant="grid"] body { font-family: var(--sans); } :root[data-variant="grid"] .display-1, :root[data-variant="grid"] .display-2, :root[data-variant="grid"] .headline, :root[data-variant="grid"] .post-title, :root[data-variant="grid"] .card-title, :root[data-variant="grid"] .brand-mark { font-family: var(--sans); letter-spacing: -0.035em; font-weight: 600; } :root[data-variant="grid"] .display-1 { font-weight: 700; letter-spacing: -0.045em; } :root[data-variant="grid"] .brand-mark em { font-style: normal; } :root[data-variant="grid"] .post-title { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.18; } :root[data-variant="grid"] .nav { border-bottom-color: var(--ink); } /* ---------- VARIANT: studio — airier ---------- */ :root[data-variant="studio"] { --maxw: 1400px; } :root[data-variant="studio"] .post-title { font-size: 28px; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .nav-links { display: none; } .footer-inner { grid-template-columns: 1fr 1fr; } }