/* ================================================================== ShipAI — shared stylesheet · Atlas design system One deep navy carries the site. A single sky accent points. Native system UI type. Light/dark via [data-theme] on . The original editorial token names are kept (--cream, --ink, --accent, --line …) and re-mapped to Atlas values, so every page's own styles re-theme automatically. Atlas-native names (--navy, --sky, --rule …) are also exposed for new work. ================================================================== */ :root { /* ---- Atlas-native (dark) ---- */ --navy: #0F2236; --navy-d: #081320; --slate: #16304A; --sky: #6BA6DD; --sky-d: #3C75AC; --rule: #28425E; --rule-soft: rgba(147,168,190,.16); /* ---- Legacy names re-mapped to Atlas (dark) ---- */ --cream: #0F2236; /* page background */ --paper: #16304A; /* raised surfaces / cards */ --ink: #E9EFF5; /* primary text */ --ink-2: #B7C6D6; /* secondary text */ --mute: #93A8BE; /* metadata / muted */ --mute-2: #647A90; /* faint labels */ --line: #28425E; /* lines / borders */ --line-2: #34516E; /* softer lines / shimmer */ --accent: #6BA6DD; /* action + accent (sky) */ --accent-soft: #12283F; /* tinted CTA band */ --tag: #16304A; --success: #5BB489; --violet: #8E91E6; /* ---- Type: native system UI stack ---- */ --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---- Light mode: same names, light values (the palette signed off on the homepage) ---- */ html[data-theme="light"] { --navy: #F4F6F9; --navy-d: #E8EDF3; --slate: #FFFFFF; --sky: #2D6FB0; --sky-d: #1F5485; --rule: #D2DAE4; --rule-soft: rgba(18,36,56,.10); --cream: #F4F6F9; --paper: #FFFFFF; --ink: #122438; --ink-2: #2D4156; --mute: #4F6378; --mute-2: #5E7388; --line: #D2DAE4; --line-2: #E2E8EF; --accent: #2D6FB0; --accent-soft: #EAF1F8; --tag: #EEF2F7; --success: #2B7A4E; --violet: #5B5ED6; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; } body { background: var(--navy); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .mono { font-family: var(--mono); } .serif { font-family: var(--display); } button { font-family: inherit; } a { color: inherit; text-decoration: none; } input, textarea, select { font-family: inherit; } /* ---------- Layout primitives ---------- */ .max { max-width: 1220px; margin: 0 auto; padding: 0 60px; } .max-narrow { max-width: 920px; margin: 0 auto; padding: 0 60px; } .caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600; } .rule { border-top: 1px solid var(--line); } .dash { border-top: 1px dashed var(--line); } /* dot-grid texture (Atlas) */ .dotted { background-image: radial-gradient(var(--rule-soft) 1px, transparent 1px); background-size: 30px 30px; } /* ---------- Tag pill (mono pill) ---------- */ .tag-pill { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; background: transparent; } .tag-pill.is-accent { color: var(--accent); border-color: var(--sky-d); } /* ---------- Avatars (sky initial on slate) ---------- */ .avatar { --size: 40px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: calc(var(--size) * 0.44); color: var(--sky); background: var(--slate); border: 1px solid var(--rule); flex-shrink: 0; user-select: none; letter-spacing: -0.01em; } /* ---------- Pills ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: var(--slate); } .pill.accent { background: var(--sky); color: var(--navy); border-color: var(--sky); } .pill.ghost { background: transparent; } .pill.ink { background: var(--navy-d); color: var(--ink); border-color: var(--rule); } /* ---------- Buttons (Atlas) ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 7px; font-family: var(--body); font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s, filter 0.15s; text-decoration: none; color: var(--ink); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--sky); color: var(--navy); } .btn-primary:hover { filter: brightness(1.08); } .btn-accent { background: var(--sky); color: var(--navy); } .btn-accent:hover { filter: brightness(1.08); } .btn-sky { background: var(--sky); color: #fff; } .btn-sky:hover { filter: brightness(1.08); } .btn-rec { gap: 8px; } .btn-rec .btn-rec-icon { display: inline-block; flex-shrink: 0; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-ghost:hover { border-color: var(--sky); color: var(--sky); } .btn-sm { padding: 9px 16px; font-size: 13px; } .btn-lg { padding: 14px 26px; font-size: 15px; } /* ---------- Card / thumb helpers ---------- */ .thumb { aspect-ratio: 4/3; background: var(--slate); border: 1px solid var(--line); border-radius: 10px; position: relative; overflow: hidden; } .thumb.dark { background: var(--navy-d); border-color: var(--rule); } .stripes { background-image: repeating-linear-gradient( 135deg, transparent 0 8px, var(--rule-soft) 8px 9px); } .stripes-dark { background-image: repeating-linear-gradient( 135deg, transparent 0 8px, rgba(255,255,255,0.04) 8px 9px); } .cropmarks { position: relative; } .cropmarks::before, .cropmarks::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--sky); } .cropmarks::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; } .cropmarks::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; } /* ---------- Forms ---------- */ .input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--slate); color: var(--ink); font-size: 15px; outline: none; transition: border 0.15s, background 0.15s; } .input:focus { border-color: var(--sky); } .input::placeholder { color: var(--mute-2); } /* ---------- Masthead / nav (Atlas) ---------- */ .mast { background: var(--navy); border-bottom: 1px solid var(--rule); position: relative; } .mast .max { display: flex; align-items: center; justify-content: space-between; padding: 20px 60px; gap: 32px; } .brand { display: flex; align-items: center; gap: 14px; } .brand .wm { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .brand .wm .ai { color: var(--sky); } .brand .by { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-2); padding-left: 13px; margin-left: 1px; border-left: 1px solid var(--rule); align-self: stretch; display: inline-flex; align-items: center; } .brand .by b { color: var(--mute); font-weight: 600; margin-left: 5px; } .brand .by-tds { font-family: var(--display); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; align-self: center; margin: 2px 0 0 2px; } .mast-nav, .nav { display: flex; gap: 30px; font-size: 14.5px; font-weight: 500; } .mast-nav a, .nav a { color: var(--mute); padding: 4px 0; position: relative; transition: color 0.15s; } .mast-nav a:hover, .nav a:hover { color: var(--ink); } .mast-nav a.active, .nav a.active { color: var(--ink); } .mast-cta { display: flex; align-items: center; gap: 16px; } .mast-burger, .burger { display: none; background: transparent; border: 1px solid var(--rule); width: 42px; height: 42px; border-radius: 8px; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; } .mast-burger svg, .burger svg { width: 18px; height: 18px; } #mobile-menu { display: none; position: fixed; inset: 0; background: var(--navy); z-index: 200; padding: 88px 32px 40px; flex-direction: column; gap: 22px; font-size: 22px; font-weight: 600; } #mobile-menu.open { display: flex; } #mobile-menu a { color: var(--ink); } #mobile-menu .close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font-size: 22px; } #mobile-menu .submit-btn { margin-top: 24px; padding: 14px 24px; background: var(--sky); color: #fff; border-radius: 7px; text-align: center; font-size: 16px; font-weight: 600; } /* ---------- Footer action buttons (theme toggle + social) ---------- */ .foot-actions { display: flex; align-items: center; gap: 10px; } /* ---------- Theme toggle (sun/moon icon button) ---------- */ .theme-toggle { background: transparent; border: 1px solid var(--rule); width: 42px; height: 42px; border-radius: 8px; color: var(--mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--sky); border-color: var(--sky); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .i-sun { display: none; } html[data-theme="light"] .theme-toggle .i-sun { display: block; } html[data-theme="light"] .theme-toggle .i-moon { display: none; } /* ---------- Footer (Atlas) ---------- */ .foot { margin-top: 0; background: var(--navy-d); color: var(--ink); padding: 64px 0 34px; border-top: 1px solid var(--rule); } .foot .max { padding: 0 60px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); } .foot-brand .brand { margin-bottom: 16px; } .foot-brand p { color: var(--mute); font-size: 15px; line-height: 1.6; max-width: 320px; margin: 0; } .foot-col h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); margin: 0 0 16px; font-weight: 600; } .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .foot-col a { color: var(--mute); font-size: 15px; transition: color 0.15s; } .foot-col a:hover { color: var(--sky); } .foot-base { padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute-2); gap: 18px; flex-wrap: wrap; } .foot-base a { color: var(--mute); } .foot-base a:hover { color: var(--sky); } .foot-legal { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .foot-legal .sep { color: var(--rule); } @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 40px; } .foot-base { flex-direction: row; } } /* ---------- Project meta helpers ---------- */ .meta-row { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--mute); font-family: var(--mono); } .meta-row .sep { color: var(--mute-2); } /* ---------- Sticky submit CTA (disabled) ---------- */ .sticky-submit { display: none !important; } /* ---------- Mobile breakpoints ---------- */ @media (max-width: 980px) { .max, .max-narrow { padding: 0 28px; } .mast .max { padding-left: 28px; padding-right: 28px; } .mast-nav, .nav { display: none; } .mast-cta .btn-ghost { display: none; } .mast-burger, .burger { display: inline-flex; } } @media (max-width: 600px) { /* Compact the masthead so brand + submit CTA + burger fit a 360px viewport without clipping the burger off the right edge. */ .mast .max { padding: 18px; gap: 12px; } .brand { gap: 10px; } .brand .wm { font-size: 24px; } .mast-cta { gap: 10px; } .mast-cta .btn { padding: 9px 13px; font-size: 13px; } .mast-burger, .burger { flex-shrink: 0; } } /* ---------- Print ---------- */ @media print { .sticky-submit, .mast-burger, .burger, #mobile-menu { display: none !important; } body { background: #fff; color: #000; } .foot { background: #fff; color: #000; border-top: 1px solid #000; } }