/* Alpha Drive AI — Brand Guidelines site Static stylesheet. Dark Ink theme by default; the top switcher flips [data-theme] on to "light". All colors are driven by the custom properties below so the two themes share one layout. */ :root, [data-theme="dark"] { --bg: #0A0A0C; /* Ink Black — default surface */ --text: #FFFFFF; /* Paper — headings / primary text on dark */ --body: #D7D7D2; /* Smoke-ish — body copy on dark */ --muted: #9A9A93; --faint: #6F6F68; --surface: #141417; /* cards */ --surface-2: #1A1A1E; /* subtle inset panels */ --border: #2A2A2E; --divider: #232327; --accent: #E30613; /* Alpha Red — the single accent */ --accent-soft: #FF5B62; /* brighter red for small labels on dark */ --header-bg: #0C0C0E; --contrast-bg: #1B1B20; /* the "what it's for" panel */ --contrast-text: #FFFFFF; --do: #46c46a; } [data-theme="light"] { --bg: #F2F2F0; /* Smoke */ --text: #0A0A0C; /* Ink */ --body: #3A3A36; --muted: #666666; --faint: #A8A49A; --surface: #FFFFFF; /* Paper */ --surface-2: #FAFAF8; --border: #E3E3E1; --divider: #EEEAE0; --accent: #E30613; --accent-soft: #E30613; --header-bg: #F2F2F0; --contrast-bg: #0A0A0C; /* original dark contrast panel */ --contrast-text: #FFFFFF; --do: #2A7A3B; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } .mono { font-family: "Courier New", monospace; } /* ── header ──────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 10; background: var(--header-bg); border-bottom: 1px solid var(--border); padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .header-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); } .header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .divider-v { width: 1px; height: 24px; background: var(--border); } /* background switcher — the only interactive control on the page */ .switcher { display: flex; gap: 6px; background: var(--surface); padding: 4px; border: 1px solid var(--border); } .switcher button { padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: 1px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-family: "Courier New", monospace; } .switcher button[aria-pressed="true"] { background: var(--accent); color: #fff; } .nav-link { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: 1px; font-weight: 700; text-decoration: none; color: var(--accent); border: 1px solid var(--border); padding: 8px 12px; } .nav-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── intro ───────────────────────────────────────────────────── */ .intro { padding: 28px 48px 8px; } .intro p { font-size: 13px; line-height: 1.55; color: var(--body); margin: 0; max-width: 820px; } /* ── asset gallery ───────────────────────────────────────────── */ /* Centered, capped to the same width as the brand-standards content below (both use .container, max-width 1280, inside 48px section padding), laid out as two rows of three. */ .gallery { padding: 20px 48px 48px; } .grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); } .card { background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .card-preview { height: 240px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: 28px; } .card-preview .mark { max-width: 100%; max-height: 100%; display: block; } .card-meta { padding: 14px 16px; border-top: 1px solid var(--divider); } .card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .card-name { font-size: 13px; font-weight: 700; color: var(--text); } .card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* download link rows (one per background variant) */ .dl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .dl-bg { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 1px; color: var(--faint); width: 92px; flex-shrink: 0; } .dl-row a { background: var(--accent); color: #fff; text-decoration: none; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; font-family: "Courier New", monospace; } .dl-row a.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .dl-row a:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── brand standards ─────────────────────────────────────────── */ .standards { background: var(--surface); border-top: 1px solid var(--border); padding: 64px 48px 80px; } .container { max-width: 1280px; margin: 0 auto; } .kicker { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 3px; color: var(--accent-soft); margin-bottom: 8px; text-transform: uppercase; } .section-title { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); margin: 0 0 28px; } .standards-intro { margin-bottom: 40px; max-width: 820px; } .standards-intro .big { font-size: 40px; font-weight: 800; letter-spacing: -0.8px; color: var(--text); line-height: 1.05; margin: 0 0 16px; } .standards-intro .lead { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 720px; } .panels-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 30px; } .panel { background: var(--surface-2); border: 1px solid var(--border); padding: 28px; } .panel.tight { padding: 26px; } .panel-contrast { background: var(--contrast-bg); color: var(--contrast-text); padding: 28px; border-radius: 2px; } .panel-contrast .kicker { color: var(--accent-soft); } .panel-contrast .body { font-size: 15px; line-height: 1.6; color: #DCDCD8; } .panel-contrast .body b { color: #fff; } .panel .body { font-size: 13px; line-height: 1.6; color: var(--body); } .panel .body.lg { font-size: 15px; } .panel .body b { color: var(--text); } .job-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); } .job-row:last-child { border-bottom: none; } .job-row .t { font-size: 12.5px; font-weight: 700; color: var(--text); width: 130px; flex-shrink: 0; } .job-row .d { font-size: 12px; color: var(--muted); line-height: 1.45; } /* colors */ .colors-grid { display: grid; gap: 16px; margin-bottom: 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .color-card { background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; } .color-swatch { height: 140px; display: flex; align-items: flex-end; padding: 14px; } .color-swatch .role { font-family: "Courier New", monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } .color-body { padding: 14px 16px 16px; } .color-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .color-specs { display: grid; grid-template-columns: 60px 1fr; row-gap: 5px; font-family: "Courier New", monospace; font-size: 11px; color: var(--body); } .color-specs .k { color: var(--faint); } .usage-note { font-size: 12px; line-height: 1.6; color: var(--muted); margin-bottom: 28px; max-width: 680px; } .usage-note b { color: var(--text); } /* typography */ .specimen-display { font-family: "Arial Black", "Helvetica Neue", Impact, sans-serif; font-size: 68px; font-weight: 900; letter-spacing: -2px; color: var(--text); transform: skewX(-14deg); transform-origin: left bottom; margin-bottom: 20px; line-height: 1; } .specimen-headline { font-size: 36px; font-weight: 700; letter-spacing: -0.4px; color: var(--text); margin-bottom: 8px; line-height: 1.1; } .specimen-sub { font-size: 14px; color: var(--body); line-height: 1.55; margin-bottom: 20px; } .spec-meta { margin-top: 14px; font-family: "Courier New", monospace; font-size: 11px; color: var(--muted); line-height: 1.8; } .license { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 18px 22px; margin-bottom: 64px; } .license .body { font-size: 13px; line-height: 1.6; color: var(--body); } .license .body b { color: var(--text); } /* clear space + min size */ .clear-box { position: relative; padding: 60px; background: var(--surface); border: 1px dashed var(--border); } .clear-box .mark { display: block; width: 100%; height: 70px; object-fit: contain; } .clear-x { position: absolute; font-family: "Courier New", monospace; font-size: 10px; color: var(--accent); letter-spacing: 2px; } .minsize-row { padding: 14px 0; border-bottom: 1px solid var(--divider); display: flex; justify-content: space-between; gap: 16px; } .minsize-row .label { font-size: 13px; font-weight: 700; color: var(--text); } .minsize-row .note { font-size: 12px; color: var(--muted); margin-top: 2px; } .minsize-row .px { font-family: "Courier New", monospace; font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; } /* do / don't */ .dodont-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 48px; } .item { background: var(--surface-2); border: 1px solid var(--border); padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--body); } .item.do { border-left: 4px solid var(--do); } .item.dont { border-left: 4px solid var(--accent); } .item .tag { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; font-weight: 700; } .item.do .tag { color: var(--do); } .item.dont .tag { color: var(--accent); } /* footer */ .brand-footer { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: baseline; font-family: "Courier New", monospace; font-size: 11px; color: var(--muted); letter-spacing: 1px; flex-wrap: wrap; gap: 8px; } /* generic spacing helpers used between standards sections */ .mb-64 { margin-bottom: 64px; } .mb-30 { margin-bottom: 30px; } /* ── responsive ──────────────────────────────────────────────── */ @media (max-width: 1040px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .header, .intro, .gallery, .standards { padding-left: 20px; padding-right: 20px; } .panels-2 { grid-template-columns: 1fr; } .type-grid { grid-template-columns: 1fr; } .clear-grid { grid-template-columns: 1fr; } .standards-intro .big { font-size: 30px; } } @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } } .type-grid, .clear-grid { display: grid; gap: 24px; margin-bottom: 64px; } .type-grid { grid-template-columns: 1fr 1fr; } .clear-grid { grid-template-columns: 1.4fr 1fr; }