/* The Data Center Next Door Tile layout. Title case. Mobile first. Default theme: dark. Light theme via [data-theme="light"] on . */ :root { /* Dark theme is the default. */ --bg: #0f1012; --card: #1a1b1f; --fg: #ececec; --muted: #9a9a9a; --rule: #2b2c30; --rule-strong: #3d3e44; --link: #8fb8ff; --link-hover: #b8cfff; --visited: #c7a8ff; --flash: #ff5d6c; --accent: #4ecf8c; --primary-bg: #1f5a3a; --primary-fg: #ffffff; --documented-bg: #2a4e85; --documented-fg: #ffffff; --commentary-bg: #856930; --commentary-fg: #ffffff; --linkedin: #4d9ddb; --overlay: rgba(0, 0, 0, 0.72); --max: 1100px; --serif: Georgia, "Times New Roman", Times, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } html[data-theme="light"] { --bg: #f6f5f1; --card: #ffffff; --fg: #161616; --muted: #5a5a5a; --rule: #d8d6cf; --rule-strong: #b8b6ad; --link: #0a3d91; --link-hover: #08306b; --visited: #5a2a82; --flash: #b8000c; --accent: #053b22; --primary-bg: #053b22; --primary-fg: #ffffff; --documented-bg: #1c3a6e; --documented-fg: #ffffff; --commentary-bg: #6a5320; --commentary-fg: #ffffff; --linkedin: #0077b5; --overlay: rgba(20, 20, 20, 0.58); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--serif); font-size: 17px; line-height: 1.4; -webkit-text-size-adjust: 100%; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; } main { max-width: var(--max); margin: 0 auto; padding: 0 18px 60px; } /* Header */ .site-header { max-width: var(--max); margin: 0 auto; padding: 28px 18px 16px; text-align: center; position: relative; } .site-title { display: inline-block; font-family: var(--serif); font-weight: 900; font-size: clamp(28px, 5vw, 44px); letter-spacing: 0.2px; color: var(--fg); line-height: 1.05; } .site-title:hover { color: var(--fg); text-decoration: none; } .site-tagline { font-family: var(--sans); font-size: 12px; letter-spacing: 1px; color: var(--muted); margin-top: 6px; } .site-date { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 14px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 8px 0; } .theme-toggle { position: absolute; top: 22px; right: 18px; background: transparent; border: 1px solid var(--rule); color: var(--muted); font-family: var(--sans); font-size: 12px; padding: 6px 10px; border-radius: 4px; cursor: pointer; line-height: 1; } .theme-toggle:hover { color: var(--fg); border-color: var(--rule-strong); } /* Key */ .key { margin: 16px 0 22px; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; } .key-intro { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 8px; } .key-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; } .key-item { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--fg); background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .key-item:hover .key-desc { color: var(--fg); } .key-item .badge { margin: 0; } .key-desc { color: var(--muted); } /* Filter bar */ .filter-bar { margin: 16px 0 14px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; display: grid; grid-template-columns: 1fr; gap: 10px; font-family: var(--sans); font-size: 13px; } @media (min-width: 720px) { .filter-bar { grid-template-columns: 1.8fr 1fr 1fr 1fr; align-items: center; } } .filter-search { width: 100%; background: var(--bg); border: 1px solid var(--rule); color: var(--fg); font-family: var(--sans); font-size: 14px; padding: 8px 10px; border-radius: 4px; } .filter-search:focus { outline: none; border-color: var(--link); } .filter-select { width: 100%; background: var(--bg); border: 1px solid var(--rule); color: var(--fg); font-family: var(--sans); font-size: 13px; padding: 7px 8px; border-radius: 4px; } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chip { font-family: var(--sans); font-size: 12px; padding: 4px 9px; background: transparent; border: 1px solid var(--rule); color: var(--muted); border-radius: 999px; cursor: pointer; } .filter-chip:hover { color: var(--fg); border-color: var(--rule-strong); } .filter-chip.is-active { background: var(--link); border-color: var(--link); color: #fff; } .filter-reset { font-family: var(--sans); font-size: 12px; background: transparent; border: none; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 4px 0; justify-self: end; } .filter-reset:hover { color: var(--fg); } .filter-result-count { grid-column: 1 / -1; font-family: var(--sans); font-size: 12px; color: var(--muted); } /* Tag cloud */ .tag-cloud { margin: 8px 0 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .tag-cloud-label { font-family: var(--sans); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-right: 8px; text-transform: uppercase; } .tag-pill { font-family: var(--sans); background: transparent; border: none; color: var(--link); padding: 2px 4px; cursor: pointer; line-height: 1.4; font-weight: 500; } .tag-pill:hover { color: var(--link-hover); text-decoration: underline; } .tag-pill.is-active { color: var(--fg); text-decoration: underline; font-weight: 700; } /* Tile grid */ .tile-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0; } @media (min-width: 640px) { .tile-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .tile-grid { grid-template-columns: 1fr 1fr 1fr; } } .tile-grid-featured .tile { border-top: 3px solid var(--accent); } .tile { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 14px 12px; display: flex; flex-direction: column; min-height: 140px; transition: border-color 120ms ease, box-shadow 120ms ease; } .tile:hover { border-color: var(--rule-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .tile.is-hidden { display: none; } /* hidden attribute must win over display:grid on the toggled views */ [hidden] { display: none !important; } .tile-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .tile-header .badge { margin: 0; } .tile-header .tile-date { font-family: var(--sans); font-size: 11px; color: var(--muted); } .tile-flash .tile-headline { color: var(--flash); } .tile-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 4px; } .tile-link { color: var(--link); } .tile-link:hover { text-decoration: none; } .tile-link:hover .tile-headline { text-decoration: underline; text-underline-offset: 2px; } .tile-headline { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.28; margin: 0; color: var(--link); } .tile-grid-featured .tile-headline { font-size: 20px; line-height: 1.25; } .tile-meta { margin-top: auto; padding-top: 12px; font-family: var(--sans); font-size: 12px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .tile-sep { color: var(--rule-strong); } .tile-quickview { margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; background: transparent; border: 1px solid var(--rule); color: var(--link); padding: 3px 9px; border-radius: 999px; cursor: pointer; line-height: 1.2; } .tile-quickview:hover { background: var(--link); color: var(--bg); border-color: var(--link); } .tile-source-out, .tile-share { color: var(--muted); } .tile-source-out { font-family: var(--sans); font-size: 11px; } .tile-source-out:hover { color: var(--fg); } .tile-share { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 3px; color: var(--linkedin); } .tile-share:hover { background: var(--linkedin); color: #fff; text-decoration: none; } /* Badges */ .badge { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; padding: 2px 8px; border-radius: 3px; background: #888; color: #fff; vertical-align: middle; cursor: help; } .badge-primary { background: var(--primary-bg); color: var(--primary-fg); } .badge-documented { background: var(--documented-bg); color: var(--documented-fg); } .badge-commentary { background: var(--commentary-bg); color: var(--commentary-fg); } /* Credibility note — the AI's one-line "why this is credible" */ .tile-credibility { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--muted); margin: 6px 0 0; display: flex; gap: 6px; align-items: baseline; } .cred-check { color: var(--accent); font-weight: 700; flex: 0 0 auto; } .modal-credibility, .post-credibility { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--fg); margin: 10px 0 14px; padding: 10px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 4px 4px 0; } .cred-label { font-weight: 700; letter-spacing: 0.2px; margin-right: 4px; } .cred-label::after { content: ":"; } /* Beta banner — subtle site-wide feedback strip, dismissible */ .beta-banner { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--sans); font-size: 12.5px; line-height: 1.4; padding: 7px 40px 7px 14px; position: relative; text-align: center; color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-bottom: 1px solid var(--rule); } .beta-banner a { color: var(--link); font-weight: 600; text-underline-offset: 2px; } .beta-banner-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 6px; } .beta-banner-close:hover { color: var(--fg); } html[data-beta-hidden] .beta-banner { display: none; } /* More / nav */ .more { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 0; font-family: var(--sans); font-size: 13px; } /* Archive */ .archive-month { margin: 28px 0; } .archive-month h2 { font-family: var(--sans); font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin: 0 0 12px; } /* Post page */ .post { max-width: 720px; margin: 24px auto; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 28px; } .post-meta-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 12px; } .post-meta-top .badge { margin: 0; } .post-kicker { font-family: var(--sans); font-size: 12px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; } .post-headline { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 4vw, 32px); line-height: 1.2; margin: 4px 0 18px; color: var(--fg); } .post-brief { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--fg); margin: 0 0 18px; } .post-bullets { margin: 0 0 22px; padding-left: 22px; font-family: var(--serif); font-size: 16px; line-height: 1.5; } .post-bullets li { margin-bottom: 6px; color: var(--fg); } .post-source-link { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 10px 14px; border: 1px solid var(--link); border-radius: 4px; color: var(--link); } .post-source-link:hover { background: var(--link); color: var(--bg); text-decoration: none; } .post-share { margin: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; } .post-share-btn { display: inline-block; font-family: var(--sans); font-size: 13px; padding: 8px 12px; border-radius: 4px; background: var(--linkedin); color: #fff; } .post-share-btn.is-secondary { background: transparent; color: var(--muted); border: 1px solid var(--rule); } .post-share-btn:hover { background: var(--link-hover); color: #fff; text-decoration: none; } .post-share-btn.is-secondary:hover { background: transparent; color: var(--fg); border-color: var(--rule-strong); } .post-tags { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--sans); font-size: 12px; } .post-tag { background: transparent; border: 1px solid var(--rule); color: var(--muted); padding: 3px 9px; border-radius: 999px; } .post-tag:hover { color: var(--fg); border-color: var(--rule-strong); } .post-note { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 22px; } .post-back { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 13px; color: var(--muted); } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: flex-start; justify-content: center; z-index: 1000; padding: 40px 16px 16px; overflow-y: auto; } .modal-backdrop.is-open { display: flex; } .modal-dialog { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; max-width: 680px; width: 100%; padding: 24px 26px 22px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.45); } .modal-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; } .modal-close:hover { color: var(--fg); } .modal-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 10px; } .modal-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; } .modal-headline { font-family: var(--serif); font-weight: 800; font-size: 24px; line-height: 1.22; margin: 0 0 14px; padding-right: 30px; color: var(--fg); } .modal-brief { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--fg); margin: 0 0 14px; } .modal-bullets { margin: 0 0 18px; padding-left: 22px; font-family: var(--serif); font-size: 15px; line-height: 1.5; } .modal-bullets li { margin-bottom: 6px; color: var(--fg); } .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; } .modal-cta { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 4px; border: 1px solid var(--link); color: var(--link); } .modal-cta:hover { background: var(--link); color: var(--bg); text-decoration: none; } .modal-secondary { font-family: var(--sans); font-size: 13px; padding: 8px 10px; border-radius: 4px; background: transparent; border: 1px solid var(--rule); color: var(--muted); cursor: pointer; } .modal-secondary:hover { color: var(--fg); border-color: var(--rule-strong); } .modal-share-li { display: inline-block; background: var(--linkedin); color: #fff; font-family: var(--sans); font-size: 13px; padding: 8px 12px; border-radius: 4px; } .modal-share-li:hover { background: var(--link-hover); color: #fff; text-decoration: none; } .modal-empty { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 0 0 14px; } /* Footer */ .site-footer { max-width: var(--max); margin: 0 auto; padding: 30px 18px 60px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 12px; color: var(--muted); text-align: center; } .footer-nav a { margin: 0 10px; color: var(--muted); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }