/* ═══════════════════════════════════════════════════════════════════ offdeskai.com — shared styles Two looks live here, chosen by . Every colour is a token; no component names a colour directly. ═══════════════════════════════════════════════════════════════════ */ /* ── LOOK: plane (Violet & Amber) — light, with a dark variant ── Rebuilt 2 Sep 2026 around the Cleave mark (colourway 05, original purple), so the logo is native to the site rather than imported into it. Deep violet ground, the mark's own #6A26D9 as the accent, and the mark's amber face #F2B33D as the highlight. Purple carries white text (--on-accent), unlike the gold it replaced. Green (--c-work) is reserved for money and hours won back. */ :root { color-scheme: light; --plane: #FBFAFE; --surface: #FFFFFF; --sunken: #F3F0FB; --ink: #150B2E; --ink-2: #565073; --muted: #8C85A3; --rule: rgba(21,11,46,0.11); --rule-soft: rgba(21,11,46,0.055); --night-0: #1E1040; --night-1: #2A1656; --night-2: #3B1F73; --predawn: #5A2AA8; --dawn: #6A26D9; --dawn-glow: rgba(106,38,217,0.60); --dawn-soft: rgba(106,38,217,0.30); --sun: #A879F7; --sun-soft: rgba(168,121,247,0.20); --sun-line: rgba(168,121,247,0.45); --on-accent: #FFFFFF; --amber: #F2B33D; --c-enq: #D9803F; --c-chase: #F2B33D; --c-admin: #B0648F; --c-report: #5B8DB8; --c-work: #4E9E7E; --on-night: #F2EFF9; --on-night-2: #B9AEDA; --on-night-3: #9A8EBC; --bar: rgba(30,16,64,0.90); --foot: #1E1040; --shadow-lg: 0 2px 4px rgba(21,11,46,0.05), 0 22px 52px -28px rgba(21,11,46,0.34); --hero-bg: radial-gradient(88% 68% at 82% 100%, rgba(242,179,61,0.30) 0%, rgba(242,179,61,0) 56%), radial-gradient(95% 76% at 62% 104%, rgba(158,112,255,0.52) 0%, rgba(158,112,255,0) 60%), radial-gradient(120% 96% at 40% 112%, var(--predawn) 0%, rgba(90,42,168,0) 66%), linear-gradient(168deg, var(--night-0) 0%, var(--night-1) 34%, var(--night-2) 76%, #4E2794 100%); --close-bg: linear-gradient(150deg, var(--night-0), var(--night-1) 38%, var(--night-2) 70%, #4E2794 92%, var(--dawn) 126%); --screen-bg: linear-gradient(162deg, var(--night-0), var(--night-1) 45%, var(--night-2)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --plane: #100A1C; --surface: #1B1230; --sunken: #150D26; --ink: #F2EFF9; --ink-2: #BDB2D4; --muted: #8B82A3; --rule: rgba(255,255,255,0.14); --rule-soft: rgba(255,255,255,0.07); --c-enq: #E8975A; --c-chase: #F7C766; --c-admin: #C88BAD; --c-report: #7BAAD4; --c-work: #6BBB99; --shadow-lg: 0 2px 4px rgba(0,0,0,0.4), 0 26px 60px -30px rgba(0,0,0,0.9); } } :root[data-theme="dark"] { color-scheme: dark; --plane: #100A1C; --surface: #1B1230; --sunken: #150D26; --ink: #F2EFF9; --ink-2: #BDB2D4; --muted: #8B82A3; --rule: rgba(255,255,255,0.14); --rule-soft: rgba(255,255,255,0.07); --c-enq: #E8975A; --c-chase: #F7C766; --c-admin: #C88BAD; --c-report: #7BAAD4; --c-work: #6BBB99; --shadow-lg: 0 2px 4px rgba(0,0,0,0.4), 0 26px 60px -30px rgba(0,0,0,0.9); } /* ── LOOK: night (wine-dark ground, gold accent) — single theme, from the 20 Aug canvas ── */ :root[data-look="night"] { color-scheme: dark; --plane: #12040B; --surface: #1C0710; --sunken: #0D0308; --ink: #FDF3F2; --ink-2: #C49BA0; --muted: #9C777C; --rule: rgba(253,243,242,0.14); --rule-soft: rgba(253,243,242,0.07); --night-0: #0C0207; --night-1: #1C0710; --night-2: #2C0B19; --predawn: #420D22; --dawn: #CF3F2B; --dawn-glow: rgba(207,63,43,0.62); --dawn-soft: rgba(242,165,44,0.30); --sun: #F2A52C; --sun-soft: rgba(242,165,44,0.20); --sun-line: rgba(242,165,44,0.45); --c-enq: #E4705A; --c-chase: #F2A52C; --c-admin: #B2705E; --c-report: #E0AA5A; --c-work: #4FB093; --on-night: #FDF3F2; --on-night-2: #C49BA0; --on-night-3: #9C777C; --bar: rgba(18,4,11,0.88); --foot: #0C0207; --shadow-lg: 0 2px 4px rgba(0,0,0,0.4), 0 26px 60px -30px rgba(0,0,0,0.9); --hero-bg: radial-gradient(95% 72% at 50% 118%, rgba(242,165,44,0.42), transparent 56%), radial-gradient(120% 96% at 50% 126%, #7D1B36, transparent 62%), linear-gradient(172deg, #12040B, #1C0710 36%, #420D22); --close-bg: linear-gradient(150deg, #0C0207, #1C0710 38%, #2C0B19 70%, #420D22 92%, var(--dawn) 126%); --screen-bg: linear-gradient(162deg, #0C0207, #1C0710 45%, #2C0B19); } /* ═══ base ═══ */ * { box-sizing: border-box; } body { margin: 0; background: var(--plane); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .mono, .m { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-variant-ligatures: none; } .shell { max-width: 1180px; margin: 0 auto; padding: 0 30px; } /* ═══ topbar ═══ */ .topbar { position: sticky; top: 0; z-index: 60; background: var(--bar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.09); } .topbar .shell { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 20px; } .wordmark { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 680; letter-spacing: -0.025em; color: var(--on-night); text-decoration: none; } .wordmark .lm { flex: none; width: 23px; height: 23px; display: block; } .wordmark .nm { font-weight: 680; letter-spacing: -0.025em; } .wordmark .place { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.19em; text-transform: uppercase; color: var(--on-night-2); font-weight: 500; } .navlinks { display: flex; gap: 28px; } .navlinks a { color: var(--on-night-2); text-decoration: none; font-size: 14.5px; transition: color .15s; } .navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--on-night); } @media (max-width: 830px) { .navlinks { display: none; } } .btn { display: inline-flex; align-items: center; gap: 9px; border-radius: 3px; padding: 12px 21px; font-size: 15px; font-weight: 580; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .13s ease, box-shadow .13s ease, background .13s; } .btn-sun { background: var(--dawn); color: var(--on-accent); box-shadow: 0 2px 0 rgba(0,0,0,0.22); } .btn-sun:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -4px var(--dawn-glow); } .btn-line { border-color: var(--rule); color: var(--ink); } .btn-line:hover { border-color: var(--ink-2); transform: translateY(-2px); } .btn-onnight { border-color: rgba(255,255,255,0.28); color: var(--on-night); } .btn-onnight:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); } .btn.sm { padding: 9px 16px; font-size: 14px; } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; } h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.0; letter-spacing: -0.043em; font-weight: 700; margin: 0 0 20px; text-wrap: balance; } h1 em { font-style: normal; color: var(--sun); } h2 { font-size: clamp(27px, 3.7vw, 42px); line-height: 1.08; letter-spacing: -0.033em; font-weight: 680; margin: 0 0 16px; text-wrap: balance; max-width: 20ch; } h3 { font-size: 17.5px; font-weight: 640; letter-spacing: -0.014em; margin: 0 0 6px; } p { margin: 0 0 16px; } .lede { font-size: 19px; line-height: 1.5; max-width: 48ch; } .body { color: var(--ink-2); max-width: 58ch; } .body strong { color: var(--ink); font-weight: 640; } .eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.19em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; color: var(--muted); } .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--sun); border-radius: 2px; flex: none; } .linkout { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 580; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sun-line); padding-bottom: 2px; } .linkout:hover { border-bottom-color: var(--sun); } .linkout::after { content: "→"; color: var(--sun); } section { border-bottom: 1px solid var(--rule-soft); } .band { padding: 96px 0; } @media (max-width: 760px) { .band { padding: 60px 0; } } .band.alt { background: var(--surface); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; gap: 32px; } } .head { margin-bottom: 34px; } .head .body { margin: 0; } /* ═══ page head (S1 P1 B1 A1) ═══ */ .pagehead { padding: 80px 0 56px; } .pagehead h1 { max-width: 16ch; } .pagehead .lede { color: var(--ink-2); } /* ═══ HERO (H1) ═══ */ .hero { position: relative; overflow: hidden; border-bottom: none; color: var(--on-night); background: var(--hero-bg); } .grain { position: absolute; inset: 0; z-index: 2; opacity: .26; pointer-events: none; mix-blend-mode: overlay; } .hero .shell { position: relative; z-index: 3; padding-top: 78px; padding-bottom: 84px; } .herogrid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 54px; align-items: center; } @media (max-width: 940px) { .herogrid { grid-template-columns: 1fr; gap: 46px; } } .hero .lede, .hero .eyebrow { color: var(--on-night-2); } .hero .lede b { color: var(--on-night); font-weight: 640; box-shadow: inset 0 -0.56em 0 var(--dawn-soft); } .hero-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 22px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--on-night-2); } .hero-stats .stat { display: inline-flex; align-items: center; gap: 9px; } .hero-stats .stat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); } .hero-cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; } .hero-note { font-size: 13.5px; color: var(--on-night-3); margin-top: 17px; } /* ═══ the overnight log (H2) ═══ */ .log { border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; background: rgba(8,9,10,0.55); backdrop-filter: blur(6px); padding: 18px 20px 16px; box-shadow: var(--shadow-lg); } .loglines { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; } .loglines li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.07); color: var(--on-night); } .loglines li:first-child { border-top: none; } .loglines .t { color: var(--sun); font-variant-numeric: tabular-nums; } .loglines .idle { color: var(--on-night-3); } .loglines .idle .t { color: var(--on-night-3); } .loglines .idle::after { content: ""; display: inline-block; width: 7px; height: 12px; background: var(--sun); margin-left: 6px; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .log .disclaim { margin-top: 12px; color: var(--on-night-3); } /* ═══ sysbar (shared by log + system screens) ═══ */ .sysbar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-3); } .sysbar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); flex: none; } .sysbar i:first-child { background: var(--sun); } .sysbar b { font-weight: 500; margin-left: 4px; } /* ═══ WEEK (H5) ═══ */ .weekcard { border: 1px solid var(--rule); border-radius: 10px; background: var(--sunken); overflow: hidden; box-shadow: var(--shadow-lg); } .wk-head { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--surface); border-bottom: 1px solid var(--rule); } .toggle { display: inline-flex; background: var(--sunken); border: 1px solid var(--rule); border-radius: 5px; padding: 3px; gap: 3px; } .toggle button { border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 570; padding: 8px 17px; border-radius: 3px; cursor: pointer; transition: background .16s, color .16s; } .toggle button[aria-pressed="true"] { background: var(--ink); color: var(--plane); } .wk-body { display: grid; grid-template-columns: 1fr 272px; } @media (max-width: 880px) { .wk-body { grid-template-columns: 1fr; } } .gridpad { padding: 26px 24px 28px; position: relative; } .daylabels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 9px; } .daylabels span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .daycol { display: grid; grid-template-rows: repeat(8, 1fr); gap: 5px; } .blk { height: 26px; border-radius: 2px; transition: background-color .5s cubic-bezier(.4,0,.2,1), transform .16s, box-shadow .16s; cursor: default; } .blk:hover { transform: scale(1.16); box-shadow: 0 3px 10px -2px rgba(0,0,0,0.35); z-index: 3; position: relative; } .blktip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--ink); color: var(--plane); font-size: 12px; padding: 5px 9px; border-radius: 4px; white-space: nowrap; z-index: 8; font-weight: 560; } .readout { border-left: 1px solid var(--rule); padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; background: var(--surface); } @media (max-width: 880px) { .readout { border-left: none; border-top: 1px solid var(--rule); } } .bigfig { font-size: 58px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--c-work); } .bigfig .u { font-size: 21px; font-weight: 560; letter-spacing: -0.01em; color: var(--ink-2); } .figlabel { font-size: 14px; color: var(--ink-2); margin-top: 5px; } .keyrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); } .keyrow + .keyrow { margin-top: 8px; } .sw { width: 12px; height: 12px; border-radius: 2px; flex: none; } .keyrow .n { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); } .disclaim { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; } /* ═══ worklist (H4, H7) ═══ */ .worklist { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .work { display: grid; grid-template-columns: 12px 1fr auto; gap: 18px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--rule-soft); transition: padding-left .2s; color: inherit; text-decoration: none; } .work:hover { padding-left: 9px; } .work .tag { width: 11px; height: 11px; border-radius: 2px; transform: translateY(2px); } .work .w-desc { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; max-width: 50ch; } .work .w-time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .work .w-go { color: var(--sun); font-size: 18px; } /* ═══ node rail (H6) ═══ */ .rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin: 8px 0 18px; } .rail::before { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 1px; background: var(--rule); } .node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; padding: 0 8px; } .node .dot { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); display: grid; place-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); transition: background .3s, color .3s, border-color .3s, box-shadow .3s; } .node.on .dot { background: var(--sun); color: #2B1405; border-color: var(--sun); box-shadow: 0 0 0 6px var(--sun-soft); } .node .nl { font-size: 15px; font-weight: 620; letter-spacing: -0.012em; } .node .ns { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: -6px; } @media (max-width: 720px) { .rail { grid-template-columns: 1fr; gap: 14px; } .rail::before { left: 21px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .node { flex-direction: row; text-align: left; gap: 16px; padding: 0; } .node .ns { margin-top: 0; } } /* ═══ card row (H8) ═══ */ .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .cards3 { grid-template-columns: 1fr; } } .card { border: 1px solid var(--rule); border-radius: 9px; padding: 26px 24px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; transition: transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card::before { content: ""; width: 24px; height: 2px; background: var(--sun); border-radius: 2px; margin-bottom: 8px; } .card p { font-size: 14.5px; color: var(--ink-2); margin: 0; } /* ═══ logo strip (H9) ═══ */ .logos { display: flex; flex-wrap: wrap; gap: 10px; } .logo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .06em; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink-2); background: var(--surface); } /* ═══ steps (H10, P2) ═══ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 940px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0 0 22px; display: flex; flex-direction: column; overflow: hidden; transition: transform .2s, box-shadow .2s; } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .step .cap { height: 4px; } .step .inner { padding: 22px 22px 0; display: flex; flex-direction: column; gap: 8px; } .step .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.15em; } .step p { font-size: 14.5px; color: var(--ink-2); margin: 0; } .step .meta { margin-top: auto; padding: 14px 22px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--muted); } .step .sub { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .step ul { margin: 6px 0 0; padding: 0 0 0 18px; font-size: 14px; color: var(--ink-2); } .step li + li { margin-top: 4px; } /* ═══ FAQ accordion (H11, A4) ═══ */ .faq { border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule-soft); } .faq summary { list-style: none; cursor: pointer; padding: 19px 0; display: grid; grid-template-columns: 1fr 24px; gap: 18px; align-items: center; font-size: 17px; font-weight: 620; letter-spacing: -0.012em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: ui-monospace, Menlo, monospace; color: var(--sun); font-size: 20px; text-align: right; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .a { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; } /* ═══ system panels (S3, and H7 links to them) ═══ */ .sysgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 900px) { .sysgrid { grid-template-columns: 1fr; } } .syscard { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .syscard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .sysscreen { background: var(--screen-bg); border-bottom: 1px solid var(--rule); padding: 16px; height: 226px; overflow: hidden; position: relative; } .sysinner { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .sysinner h3 { margin: 0; } .sysinner p { font-size: 14.5px; color: var(--ink-2); margin: 0; } .systag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } /* chat */ .schat { display: flex; flex-direction: column; gap: 6px; } .sbub { max-width: 84%; padding: 7px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.4; opacity: 0; transform: translateY(7px); transition: opacity .34s ease, transform .34s ease; } .sbub.in { opacity: 1; transform: none; } .sbub.them { align-self: flex-start; background: rgba(255,255,255,.10); color: var(--on-night); border-bottom-left-radius: 3px; } .sbub.us { align-self: flex-end; background: var(--sun-soft); border: 1px solid var(--sun-line); color: var(--on-night); border-bottom-right-radius: 3px; } .sbub.sys { align-self: center; background: transparent; border: 1px dashed rgba(255,255,255,.22); color: var(--on-night-3); font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; padding: 5px 9px; } /* signing */ .sdoc-t { color: var(--on-night); font-weight: 620; font-size: 13px; } .sdoc-s { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--on-night-3); margin-bottom: 10px; } .sdoc-r { height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); margin-bottom: 5px; } .spad { margin-top: 10px; border: 1px dashed rgba(255,255,255,.22); border-radius: 7px; height: 62px; display: grid; place-items: center; position: relative; transition: border-color .4s, background .4s; } .spad.on { border-color: var(--sun-line); background: rgba(255,255,255,.04); } .spad .ph { position: absolute; font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--on-night-3); transition: opacity .3s; } .spad.on .ph { opacity: 0; } .spad svg { width: 82%; height: 40px; overflow: visible; } .spath { fill: none; stroke: var(--sun); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.4s cubic-bezier(.5,.1,.3,1); } .spad.signed .spath { stroke-dashoffset: 0; } .sdone { margin-top: 9px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-night); background: rgba(15,125,99,.20); border: 1px solid rgba(27,168,136,.5); border-radius: 6px; padding: 8px 10px; opacity: 0; transform: translateY(6px); transition: opacity .42s, transform .42s; } .sdone.in { opacity: 1; transform: none; } .sdone .tk { width: 16px; height: 16px; border-radius: 50%; background: #1BA888; color: #06120E; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; } /* pipeline */ .sstages { display: flex; gap: 4px; margin-bottom: 12px; } .sst { flex: 1; text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--on-night-3); padding: 5px 2px; border-radius: 3px; background: rgba(255,255,255,.06); border: 1px solid transparent; transition: all .35s; } .sst.on { background: var(--sun); color: #2B1405; font-weight: 600; } .sst.done { color: var(--sun); border-color: var(--sun-line); background: var(--sun-soft); } .srec { border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 11px 12px; } .srec .nm { color: var(--on-night); font-weight: 620; font-size: 13px; } .srec .rf { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; color: var(--on-night-3); margin-bottom: 8px; } .sfield { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: 11px; } .sfield .k { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--on-night-3); } .sfield .v { color: var(--sun); opacity: 0; transition: opacity .4s; } .sfield.on .v { opacity: 1; } /* ledger */ .sled { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; } .slrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; } .slrow.in { opacity: 1; transform: none; } .slrow .a { color: var(--on-night); } .slrow .b { color: var(--on-night-3); } .slrow .c { color: var(--sun); } .sltot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.16); } .sltot .l { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-3); } .sltot .v { font-size: 24px; font-weight: 700; letter-spacing: -.035em; color: var(--on-night); font-variant-numeric: tabular-nums; } /* ═══ CTA band (H12 S4 P5 B8 A5) ═══ */ .close { position: relative; overflow: hidden; color: var(--on-night); background: var(--close-bg); } .close .shell { position: relative; z-index: 3; } .close h2 { max-width: 17ch; } .close .body { color: var(--on-night-2); } .close .body strong { color: var(--on-night); } .close .eyebrow { color: var(--on-night-2); } .close .btn-line { border-color: rgba(255,255,255,0.28); color: var(--on-night); } /* ═══ footer (G2) ═══ */ footer { background: var(--foot); color: var(--on-night-2); padding: 50px 0 58px; } .foot { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; } .foot-col { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; } .foot a { color: var(--on-night-2); text-decoration: none; } .foot a:hover { color: var(--on-night); text-decoration: underline; } .foot .small { font-size: 13px; color: var(--on-night-3); max-width: 34ch; } .foot .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-night-3); margin-bottom: 2px; } .copyright { margin-top: 34px; font-size: 12.5px; color: var(--on-night-3); } /* ═══ scroll reveal ═══ */ .rise { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.3,1), transform .7s cubic-bezier(.2,.6,.3,1); } .rise.in { opacity: 1; transform: none; } /* ═══ DRAFT MODE — shows the framework on the page ═══ Every slot is outlined and carries its ID. Remove data-draft when a page is full. */ html[data-draft] .slot { outline: 1px dashed var(--sun-line); outline-offset: 3px; border-radius: 2px; } html[data-draft] .slot::after { content: attr(data-slot); font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: var(--sun); margin-left: 7px; vertical-align: super; white-space: nowrap; opacity: .9; } html[data-draft] h1 .slot::after { font-size: 11px; vertical-align: 0.6em; } html[data-draft] [data-block] { position: relative; } html[data-draft] [data-block]::before { content: attr(data-block) " · " attr(data-name); position: absolute; z-index: 5; top: 12px; left: max(30px, calc((100% - 1180px) / 2 + 30px)); font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); background: rgba(0,0,0,0.55); border: 1px solid var(--sun-line); border-radius: 3px; padding: 6px 9px; pointer-events: none; } html[data-draft] .hero-right[data-block]::before, html[data-draft] .band [data-block]:not(section)::before { left: 0; top: -30px; } html[data-draft] .hero-right[data-block] { margin-top: 30px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rise { opacity: 1; transform: none; } .btn:hover, .step:hover, .card:hover, .blk:hover, .syscard:hover { transform: none; } .sbub, .sdone, .slrow { opacity: 1 !important; transform: none !important; } .spath { stroke-dashoffset: 0 !important; } .sfield .v { opacity: 1 !important; } }