/* ClearQueue Technologies - site stylesheet. Tokens, classes and responsive rules ported from the Claude Design prototype (design/*.dc.html). The prototype also inherited a handful of base rules from its design-system sheet (box-sizing, heading metrics, paragraph margins, focus handling); they are restated under "Base" so nothing depends on that sheet. Theme: night by default. Day when carries class "day", which assets/theme.js sets before first paint from localStorage or the OS setting. Page-specific values hang off the body class: p-home, p-how, p-about. */ /* ---- Fonts: self-hosted, latin subset, OFL licensed --------------------- */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: #060810; } html.day body { background: #eef3f9; } html.modal-open { overflow: hidden; } [hidden] { display: none !important; } .cq h1, .cq h2, .cq h3, .cq h4, .cq h5, .cq h6 { font-family: inherit; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8px; } .cq p { margin: 0 0 12px; } .cq a { color: inherit; text-decoration: none; } .cq img { display: block; max-width: 100%; } .cq svg { max-width: 100%; } .cq button { font-family: inherit; } .cq :focus { outline: none; } .cq :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ---- Tokens -------------------------------------------------------------- */ .cq { --bg: #060810; --panel: #0b1120; --panel-2: #0d1424; --line: rgba(84,132,214,0.30); --ink: #e9eefb; --muted: #9aabc6; --cyan: #22d3ee; --blue: #3b82f6; --violet: #a855f7; --grad: linear-gradient(90deg, #a855f7 0%, #3b82f6 45%, #22d3ee 100%); --on-grad: #05070f; --band-bg: #060810; --band-ink: #e9eefb; --band-muted: #a8b8d4; --band-kicker: #22d3ee; --band-scrim: radial-gradient(120% 95% at 50% 50%, rgba(6,8,16,0.34) 0%, rgba(6,8,16,0.76) 68%, rgba(6,8,16,0.94) 100%); --band-card: rgba(9,14,28,0.66); --band-card-2: rgba(6,10,22,0.72); --band-cardline: rgba(120,170,255,0.22); --hero-scrim: linear-gradient(100deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 46%, color-mix(in srgb, var(--bg) 72%, transparent) 100%); font-family: "Inter Tight", system-ui, sans-serif; } /* The homepage band is a touch lighter than the other two pages' bands. */ .p-home .cq { --band-scrim: radial-gradient(120% 95% at 50% 50%, rgba(6,8,16,0.30) 0%, rgba(6,8,16,0.74) 68%, rgba(6,8,16,0.94) 100%); --band-card: rgba(9,14,28,0.62); } html.day .cq { --bg: #eef3f9; --panel: #ffffff; --panel-2: #f7fafd; --line: rgba(28,74,140,0.18); --ink: #0c1526; --muted: #55688a; --cyan: #0891b2; --blue: #1d4ed8; --violet: #7c3aed; --grad: linear-gradient(90deg, #7c3aed 0%, #1d4ed8 45%, #0891b2 100%); --on-grad: #f4f8fd; --band-bg: #e7eef7; --band-ink: #0c1526; --band-muted: #3f5273; --band-kicker: #075985; --band-scrim: radial-gradient(120% 95% at 50% 50%, rgba(233,239,247,0.26) 0%, rgba(233,239,247,0.76) 68%, rgba(233,239,247,0.93) 100%); --band-card: rgba(255,255,255,0.74); --band-card-2: rgba(247,250,253,0.78); --band-cardline: rgba(28,74,140,0.20); --hero-scrim: linear-gradient(100deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 46%, color-mix(in srgb, var(--bg) 76%, transparent) 100%); } html.day .p-home .cq { --band-scrim: radial-gradient(120% 95% at 50% 50%, rgba(233,239,247,0.24) 0%, rgba(233,239,247,0.74) 68%, rgba(233,239,247,0.93) 100%); --band-card: rgba(255,255,255,0.70); } /* ---- Components ---------------------------------------------------------- */ .cq-nav:hover { color: var(--cyan); } .cq-btn-a:hover { filter: brightness(1.12); } .cq-btn-b:hover { border-color: var(--cyan); color: var(--cyan); } .cq-card { transition: border-color .18s ease, transform .18s ease; } .cq-card:hover { border-color: rgba(34,211,238,0.55); transform: translateY(-2px); } .cq-logo { transition: filter .3s ease; filter: invert(1) hue-rotate(180deg) brightness(1.12); } html.day .cq-logo { filter: none; } .cq-map { transition: filter .3s ease; } html.day .cq-map { filter: saturate(0.85) brightness(1.02); } .cq-x:hover { color: var(--cyan); border-color: var(--cyan); } .cq-input { font-family: inherit; } .cq-input:focus { outline: none; border-color: var(--cyan); } .cq-input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } @keyframes cq-in { from { opacity: 0; transform: translateY(14px) scale(.99) } to { opacity: 1; transform: none } } /* Theme toggle: the button names the theme it switches to, and both labels are real text, so the right one shows before any script runs. */ .cq-theme-day { display: none; } html.day .cq-theme-day { display: inline; } html.day .cq-theme-night { display: none; } /* "What we build" dialog: tabs and tech marks. */ .cq-tab { cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; padding: 11px 16px; border-radius: 9px 9px 0 0; border: 1px solid var(--line); border-bottom: none; background: transparent; color: var(--muted); } .cq-tab:hover { color: var(--ink); } .cq-tab.is-active { border-color: var(--cyan); background: var(--panel-2); color: var(--ink); } .cq-tech { position: relative; } .cq-tech .cq-tip { opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; } .cq-tech:hover .cq-tip, .cq-tech:focus-visible .cq-tip { opacity: 1; transform: translateY(0); } .cq-tech:hover { border-color: var(--cyan); color: var(--cyan); } /* Contact dialog: the copy-me box shown with the confirmation. */ .cq-mailcopy { width: 100%; max-height: 220px; resize: vertical; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.5; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 14px; } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 1180px) { .cq-g3, .cq-g4, .cq-g5 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 900px) { .cq-hero { grid-template-columns: 1fr !important; } .cq-hero > div:first-child { padding: 56px 20px 40px !important; } .p-home .cq-heromap { min-height: 320px !important; } .p-home .cq-heromap > div { background: linear-gradient(180deg, var(--bg) 0%, transparent 40%) !important; } .p-about .cq-heromap { min-height: 220px !important; } .cq-split { grid-template-columns: 1fr !important; gap: 28px !important; } .cq-split > div:last-child, .cq-tags { justify-content: flex-start !important; justify-self: start !important; } .cq-pad { padding: 48px 20px !important; } .cq-cta-inner { padding: 40px 24px !important; grid-template-columns: 1fr !important; } .cq-foot { grid-template-columns: 1fr !important; gap: 10px !important; } .cq-foot > div:last-child { justify-self: start !important; } .cq-nav-row { padding: 12px 20px !important; gap: 12px 18px !important; } .cq-nav-links { margin-left: 0 !important; order: 3; width: 100%; overflow-x: auto; gap: 22px !important; padding-bottom: 2px; } .cq-actions { margin-left: auto; } .cq h1 { font-size: 38px !important; } .p-home .cq h2 { font-size: 30px !important; } .p-how .cq h2, .p-about .cq h2 { font-size: 27px !important; } .p-home .cq h3 { font-size: 26px !important; } .cq-sub { font-size: 24px !important; } .cq-pull { font-size: 28px !important; } } @media (max-width: 620px) { .cq-g2, .cq-g3, .cq-g4, .cq-g5 { grid-template-columns: 1fr !important; } .cq-cta-inner a, .cq-hero a.cq-btn-a, .cq-hero a.cq-btn-b { width: 100%; justify-content: flex-start; } .cq-actions a.cq-btn-b { display: none; } .cq-step { grid-template-columns: 1fr !important; gap: 8px !important; } }