/* ============================================================ Internet Industries — shared stylesheet Every page below links this file directly (absolute path) and sets a body class identifying itself, e.g. . Rules are grouped by how widely they're shared; where two pages used the same selector with different values, the differing declarations are scoped under the relevant page-* class instead of being merged, so no page's appearance changes. ============================================================ */ /* ---------- design tokens & base reset (all pages) ---------- */ :root { --ink: #111; --sub: #555; --mut: #888; --line: #e6e6e6; --hover-bg: #f6f6f4; } body { background: #EEEFE9; color: var(--ink); font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; margin: 0; } * { box-sizing: border-box; } /* Positioned + stacked above the decorative ASCII bands (.town-wrap etc.), which pull up with negative margins and would otherwise paint over the content and swallow clicks on buttons and links. */ .container { width: 100%; margin: 0 auto; padding: 0 12px; position: relative; z-index: 2; } .wrap { max-width: 980px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- focus-visible (combined across every page) ---------- */ .nav-home:focus-visible, .nav-contact:focus-visible, .nav-account a:focus-visible, .nav-right a:focus-visible, .footer-links a:focus-visible, .link-ii:focus-visible, .auth-links a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } /* ---------- nav: shared skeleton (all pages) ---------- */ .nav-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; padding: 28px 0; } .nav-logo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1; text-decoration: none; } .nav-name { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); } @media (max-width: 640px) { body.page-index .nav-name { letter-spacing: .1em; } } /* ---------- nav: single home-link pattern (about, login, register, forgot-password, reset-password) ---------- */ .nav-home { justify-self: end; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid #aaa; } .nav-home:hover { border-color: var(--ink); } /* ---------- nav: right-aligned account pattern (index, dashboard) ---------- */ .nav-right { justify-self: end; display: flex; align-items: baseline; gap: 20px; } .nav-right a { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid #aaa; background: none; cursor: pointer; } .nav-right a:hover { border-color: var(--ink); } .nav-contact { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid #aaa; } .nav-contact:hover { border-color: var(--ink); } .nav-account { display: flex; align-items: baseline; gap: 20px; } .nav-account a { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid #aaa; background: none; cursor: pointer; } .nav-account a:hover { border-color: var(--ink); } /* ---------- structure: eyebrow / h2 / section ---------- */ .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); margin-bottom: 32px; } body.page-index .eyebrow { margin-bottom: 24px; } /* .h2 is not used on index.html - no scoping needed there. */ .h2 { font-size: clamp(30px, 4.5vw, 32px); font-weight: 500; color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 32px; max-width: 640px; } /* Two section-padding rhythms: about + the four auth pages use a wider one; index and dashboard use a tighter one. */ section { padding: 56px 0; } @media (max-width: 640px) { section { padding: 40px 0; } } body.page-about section, body.page-login section, body.page-register section, body.page-forgot-password section, body.page-reset-password section { padding: 72px 0; } @media (max-width: 640px) { body.page-about section, body.page-login section, body.page-register section, body.page-forgot-password section, body.page-reset-password section { padding: 56px 0; } } /* ---------- body-copy: base is the auth-page/dashboard single-line variant; about.html repurposes it as a multi-paragraph container. ---------- */ .body-copy { color: var(--sub); max-width: 480px; margin: 0 0 40px; } .body-copy p { margin: 0; } .body-copy p + p { margin-top: 16px; } .body-copy .em { color: var(--ink); } body.page-about .body-copy { max-width: 580px; margin: 0; } /* ---------- terminal (about.html + index.html, one unused rule) ---------- */ .terminal { background: var(--ink); border: 1px solid var(--ink); padding: 40px; white-space: pre; overflow-x: auto; color: #bbb; line-height: 1.9; margin: 0; font-family: inherit; font-size: 13px; } .terminal .dim { color: #555; } .terminal .on { color: #fff; } @media (max-width: 640px) { .terminal { padding: 28px 20px; font-size: 12px; } } body.page-index .terminal { white-space: pre-wrap; } /* ---------- button (.btn-ii): about.html vs the four auth pages ---------- */ .btn-ii { display: inline-block; font-family: inherit; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink); color: #fff; border: 1px solid var(--ink); text-decoration: none; padding: 14px 40px; transition: background 120ms ease, color 120ms ease; } .btn-ii:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } body.page-about .btn-ii { margin-top: 32px; } body.page-about .btn-ii:hover { background: #fff; color: var(--ink); } body.page-index .btn-ii, body.page-login .btn-ii, body.page-register .btn-ii, body.page-forgot-password .btn-ii, body.page-reset-password .btn-ii { margin-top: 28px; cursor: pointer; } body.page-index .btn-ii:hover, body.page-login .btn-ii:hover, body.page-register .btn-ii:hover, body.page-forgot-password .btn-ii:hover, body.page-reset-password .btn-ii:hover { background: #333; } body.page-index .btn-ii[disabled], body.page-login .btn-ii[disabled], body.page-register .btn-ii[disabled], body.page-forgot-password .btn-ii[disabled], body.page-reset-password .btn-ii[disabled] { opacity: .55; cursor: wait; } /* ---------- footer (shared; index.html omits the top border since its footer-works band already has one) ---------- */ .footer { border-top: 1px solid var(--line); padding: 64px 0 80px; color: var(--mut); } body.page-index .footer { border-top: none; } .footer-logo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; color: var(--ink); line-height: 1; margin-bottom: 20px; } .footer-line { font-size: 12px; letter-spacing: 0.06em; } .footer-links { display: flex; gap: 24px; flex-wrap: wrap; margin: 28px 0 18px; } .footer-links a { color: var(--sub); font-size: 12px; text-decoration: none; border-bottom: 1px solid #bbb; } .footer-copy { font-size: 11px; } /* ============================================================ Auth pages: login, register, forgot-password, reset-password ============================================================ */ .auth-form { max-width: 420px; } .auth-label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); margin: 20px 0 8px; } .auth-label:first-child { margin-top: 0; } .auth-input { display: block; width: 100%; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--ink); padding: 14px 16px; } .auth-input:focus { outline: none; } .auth-message { color: var(--sub); font-size: 13px; margin-top: 24px; display: none; } .auth-message.show { display: block; } .auth-message.error { border-left: 2px solid var(--ink); padding-left: 14px; } .auth-hint { color: var(--mut); font-size: 12px; margin: 8px 0 0; } .auth-links { margin-top: 24px; font-size: 13px; color: var(--sub); } .auth-links a { color: var(--sub); border-bottom: 1px solid #ccc; text-decoration: none; } .auth-links a:hover { color: var(--ink); border-color: var(--ink); } /* Per-page auth-links spacing/behavior - these genuinely differ. */ body.page-login .auth-links { margin-top: 20px; } body.page-login .auth-links + .auth-links { margin-top: 8px; } body.page-register .auth-links { margin-top: 32px; } body.page-reset-password .auth-links { display: none; } body.page-reset-password .auth-links.show { display: block; } /* ============================================================ About page only ============================================================ */ .mid-works-wrap { width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); background: #EEEFE9; } .mid-works { width: 100vw; max-width: none; margin: 0; overflow: hidden; color: var(--ink); background: #EEEFE9; font-family: 'IBM Plex Mono', Menlo, monospace; font-size: calc(100vw / 132); line-height: 1.04; letter-spacing: 0; white-space: pre; user-select: none; } .link-ii { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub); text-decoration: none; border-bottom: 1px solid #ccc; padding-bottom: 3px; transition: color 120ms ease, border-color 120ms ease; } .link-ii:hover { color: var(--ink); border-color: var(--ink); } .operator-link { display: inline-block; margin-top: 24px; } /* ============================================================ Homepage (index.html) only ============================================================ */ .town-wrap { overflow: hidden; width: 100%; background: #EEEFE9; margin-top:-80px; } .town { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: calc(100vw / 132); line-height: 1.04; letter-spacing: 0; color: var(--ink); white-space: pre; user-select: none; margin: 0; overflow: hidden; max-width: none; background: #EEEFE9; } .hero { padding: 50px 0 56px; } .hero h1 { font-size: clamp(38px, 5.5vw, 44px); font-weight: 500; color: var(--ink); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 20px; max-width: 720px; } .hero-copy { color: var(--sub); max-width: 580px; margin: 0 0 40px; } /* ---------- homepage gap-report request form (reuses the .auth-* field styles and .btn-ii from the auth pages) ---------- */ .request-section { padding: 8px 0 72px; } .request-form { max-width: 560px; } .label-opt { letter-spacing: 0.04em; text-transform: none; color: var(--mut); opacity: .75; } .request-notes { line-height: 1.6; resize: vertical; } .request-notes::placeholder { color: var(--mut); } /* Honeypot: off-screen for people, still fillable by bots. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .request-success { display: none; border-left: 2px solid var(--ink); padding-left: 18px; max-width: 560px; } .request-success.show { display: block; } .request-success-head { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; } .request-success-copy { color: var(--sub); font-size: 14px; margin: 0; } .ascii-divider { color: #ccc; white-space: nowrap; overflow: hidden; padding: 8px 0; user-select: none; } .method-copy { color: var(--sub); font-size: 13px; max-width: 620px; } .method-copy .em { color: var(--ink); } .footer-works-wrap { width: 100%; overflow: hidden; border-bottom: 1px solid var(--line); background: #EEEFE9; } .footer-works { width: 100vw; max-width: none; margin: 0; overflow: hidden; color: var(--ink); background: #EEEFE9; font-family: 'IBM Plex Mono', Menlo, monospace; font-size: calc(100vw / 132); line-height: 1.04; letter-spacing: 0; white-space: pre; user-select: none; } @media (max-width: 640px) { body.page-index .hero { padding: 48px 0 40px; } body.page-index .btn-ii { width: 100%; padding: 14px 24px; } } /* ============================================================ Radar evidence components: shared by index.html and dashboard (report body, evidence panels, trend chart) ============================================================ */ .panel-error { border-left: 2px solid var(--ink); padding-left: 14px; color: var(--sub); font-size: 13px; } .panel-empty { color: var(--mut); font-size: 13px; } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); background: #fff; } .panel { padding: 40px 32px; min-width: 0; } .panel + .panel { border-left: 1px solid var(--ink); } .panel-head { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; } .panel-title { font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.1; margin: 0 0 8px; } .panel-count { font-size: 12px; color: var(--mut); margin-bottom: 28px; } .card { border-top: 1px solid var(--line); padding: 20px 0; } .card-title { font-size: 14px; font-weight: 500; margin: 0 0 6px; line-height: 1.45; } .card-title a { color: var(--ink); text-decoration: none; border-bottom: 1px solid #ccc; transition: border-color 120ms ease; overflow-wrap: anywhere; } .card-title a:hover { border-color: var(--ink); } .card-desc { color: var(--sub); font-size: 13px; margin: 0 0 10px; } .card-meta { color: var(--mut); font-size: 11px; letter-spacing: 0.04em; overflow-wrap: anywhere; } .card-meta .sep { color: #ccc; padding: 0 6px; } .trend-panel { border: 1px solid var(--ink); background: #fff; padding: 40px 32px; } body.page-dashboard .trend-panel { margin-bottom: 40px; } .trend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .trend-badge { font-size: 12px; letter-spacing: 0.03em; color: var(--ink); border: 1px solid var(--ink); padding: 4px 10px; white-space: nowrap; } .trend-chart { margin: 24px 0 16px; } .trend-chart svg { width: 100%; height: auto; display: block; overflow: visible; } .trend-bar { fill: var(--ink); } .trend-bar.partial { fill: #ccc; } .trend-baseline { stroke: var(--line); stroke-width: 1; } .trend-label { fill: var(--mut); font-size: 10px; font-family: 'IBM Plex Mono', monospace; } .trend-caption { color: var(--sub); font-size: 13px; margin: 0; max-width: 620px; } @media (max-width: 640px) { .trend-panel { padding: 28px 20px; } } /* Search demand panel (Keywords Everywhere data; index + dashboard) */ .demand-stats { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 24px 0 4px; } .demand-stat-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); margin-bottom: 2px; } .demand-stat-value { font-size: 20px; font-weight: 500; color: var(--ink); } @media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; } .panel + .panel { border-left: none; border-top: 1px solid var(--ink); } body.page-index .panel { padding: 32px 20px; } } .report-body { border: 1px solid var(--ink); background: #fff; padding: 40px; } .report-body h1 { font-size: 34px; font-weight: 500; line-height: 1.1; margin: 0 0 24px; } .report-body h2 { font-size: 24px; font-weight: 500; line-height: 1.2; border-top: 1px solid var(--line); padding-top: 28px; margin: 32px 0 12px; } .report-body h3 { font-size: 14px; font-weight: 500; margin: 20px 0 8px; } .report-body p { color: var(--sub); font-size: 13px; margin: 0 0 14px; } .report-body ul, .report-body ol { color: var(--sub); font-size: 13px; margin: 0 0 14px; padding-left: 22px; } .report-body li { margin: 0 0 8px; } .report-body strong { color: var(--ink); font-weight: 500; } .report-body code { background: var(--hover-bg); padding: 1px 5px; font-size: 12px; } .report-body hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; } .report-table { overflow-x: auto; margin: 0 0 14px; } .report-body table { border-collapse: collapse; width: 100%; font-size: 12px; } .report-body th, .report-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; color: var(--sub); } .report-body th { color: var(--ink); font-weight: 500; } @media (max-width: 640px) { .report-body { padding: 28px 20px; } .trend-panel, .panel { padding: 28px 20px; } } /* ============================================================ Dashboard only ============================================================ */ .dash-status { color: var(--sub); font-size: 13px; } .dash-status.error { border-left: 2px solid var(--ink); padding-left: 14px; } .plan-line { color: var(--sub); font-size: 13px; margin: 0 0 40px; } .plan-line a { color: #FE4401; text-decoration: none; border-bottom: 1px solid #aaa; } .plan-line a:hover { border-color: var(--ink); } .plan-line a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; } .plan-line.limit { border-left: 2px solid var(--ink); padding-left: 14px; color: var(--ink); } .report-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; text-align: left; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 18px 20px; cursor: pointer; } .report-row + .report-row { border-top: none; } .report-row:hover { border-color: var(--ink); } .report-row-query { flex: 1; } .report-row-date { font-size: 11px; letter-spacing: 0.06em; color: var(--mut); white-space: nowrap; } #report-detail { display: none; } #report-detail.show { display: block; } .back-link { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub); text-decoration: none; border-bottom: 1px solid #ccc; margin-bottom: 28px; cursor: pointer; } .back-link:hover { color: var(--ink); border-color: var(--ink); } .evidence-block { margin-top: 40px; } @media (max-width: 640px) { body.page-dashboard .report-row { flex-direction: column; gap: 4px; } } /* ============================================================ Legal pages: privacy, terms (identical minimal layout, deliberately self-contained and scoped so its plain-tag selectors never leak onto other pages) ============================================================ */ body.page-legal { margin: 0; background: #EEEFE9; color: #111; font: 14px/1.7 'IBM Plex Mono', monospace; } body.page-legal main { max-width: 820px; margin: auto; padding: 64px 24px 96px; box-sizing: content-box; } body.page-legal a { color: #111; } body.page-legal h1 { font-size: 36px; line-height: 1.1; margin: 56px 0 32px; } body.page-legal h2 { font-size: 16px; margin: 40px 0 12px; } body.page-legal p { max-width: 680px; color: #555; } body.page-legal .label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } body.page-legal .back { display: inline-block; border-bottom: 1px solid #999; text-decoration: none; }