/* ============================================================ Upwarden — shared design system Single source of truth for every page. The homepage (site/index.html) is the reference implementation; all pages link this file so the look & feel stays consistent. Responsive model: a two-breakpoint system. • >960px — full desktop layout • ≤960px — tablet / stacked: multi-col grids drop to 2, hero/aside/enterprise stack, nav becomes a drawer • ≤600px — phone: everything single-column All responsive rules live in the "Responsive" block at the bottom — components above are authored desktop-first. ============================================================ */ /* ============================================================ Self-hosted webfonts (OFL — Inter & JetBrains Mono). Served from /fonts/ so no request ever leaves the perimeter to Google Fonts (no IP transfer). woff2, latin + latin-ext. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/inter-800.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-500.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/jetbrains-mono-700.woff2') format('woff2'); } /* ------------------------------------------------------------ THEME MODEL Dark is the DEFAULT theme (tokens on :root below). Light is an opt-in: a no-FOUC head script sets and the ":root[data-theme='light']" block further down remaps the tokens (plus a few re-tuned literals). A header sun/moon button flips + persists the choice to localStorage. --accent-text / --accent-text-hover are a semantic layer for "brand green used as TEXT/ICONS": on dark they alias the bright brand green (identical to the original design); on light they become a deeper emerald so the same elements clear AA contrast on the pale ground. Code/terminal surfaces stay dark under BOTH themes (see the ".terminal, .codeblock, .install" block below). ------------------------------------------------------------ */ :root { --bg: #0B0F14; --bg-elevated: #11161D; --bg-code: #0D1117; --border: #1E2630; --text: #E6EDF3; --text-muted: #8B97A5; --accent: #3DDC97; --accent-hover: #34c486; --accent-text: var(--accent); /* dark: brand green reads on the dark ground */ --accent-text-hover: var(--accent-hover); --danger: #F0644B; --accent-deep: #1B6FA8; --max: 1200px; --radius: 12px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ============================================================ LIGHT THEME (opt-in) — considered cool off-white ground, white surfaces, near-black text; a deeper emerald for green text/icons. Only the tokens + a handful of re-tuned literals change; every component styles through the tokens, so this one block re-themes the whole marketing site. Code/terminal surfaces stay dark. ============================================================ */ :root[data-theme="light"] { --bg: #F7F9FB; /* cool off-white page ground (never pure white) */ --bg-elevated: #FFFFFF; /* cards/surfaces pop against the off-white */ --border: #E3E8EF; --text: #10161D; /* near-black, strong contrast */ --text-muted: #55636F; --accent-text: #047857; /* emerald for TEXT/ICONS on light (AA; #3DDC97 is not) */ --accent-text-hover: #065F46; --danger: #D9432B; /* deepened for AA text contrast on light (was #F0644B) */ /* --accent, --accent-hover, --accent-deep, --bg-code stay as the dark-theme values: brand-green fills + dark code blocks read on light. */ } /* Light-theme re-tuned literals. These component rules use hard-coded values (glows, shadows, gradients, dark surfaces) that can't be a single token, so the base rule keeps the ORIGINAL dark value and light overrides it here — keeping the default (dark) byte-for-byte unchanged. */ :root[data-theme="light"] header { background: rgba(247,249,251,.82); } :root[data-theme="light"] .hero::before { width:820px; height:520px; background: radial-gradient(ellipse at center, rgba(61,220,151,.16), transparent 68%); } :root[data-theme="light"] .page-head::before { width:720px; height:420px; background: radial-gradient(ellipse at center, rgba(61,220,151,.13), transparent 68%); } :root[data-theme="light"] .terminal { box-shadow: 0 18px 44px -20px rgba(16,22,29,.30), 0 2px 8px -2px rgba(16,22,29,.12); } :root[data-theme="light"] .card:hover, :root[data-theme="light"] .postcard:hover { border-color:#C7D2DE; box-shadow: 0 12px 28px -18px rgba(16,22,29,.20); } :root[data-theme="light"] .flow .node.mid, :root[data-theme="light"] .tier.featured { box-shadow: 0 0 0 3px rgba(61,220,151,.18); } :root[data-theme="light"] .enterprise { background: linear-gradient(180deg, #FFFFFF, #EDF3F8); } :root[data-theme="light"] .prose code { background: #ECF1F6; color: #10161D; } :root[data-theme="light"] .pill.safe { border-color: rgba(4,120,87,.30); background: rgba(61,220,151,.10); } :root[data-theme="light"] .vform input, :root[data-theme="light"] .vform select, :root[data-theme="light"] .vform textarea { background: var(--bg); } :root[data-theme="light"] .vform input:focus, :root[data-theme="light"] .vform select:focus, :root[data-theme="light"] .vform textarea:focus { box-shadow: 0 0 0 3px rgba(61,220,151,.22); } :root[data-theme="light"] .cookie-consent { background: rgba(255,255,255,.97); box-shadow: 0 12px 34px -8px rgba(16,22,29,.20); } :root[data-theme="light"] .nav-drawer { box-shadow: 0 18px 40px -16px rgba(16,22,29,.22); } /* Theme-switch cross-fade (only when the user hasn't asked for reduced motion). */ @media (prefers-reduced-motion: no-preference) { body, header { transition: background-color .25s ease, color .25s ease; } } /* ============================================================ Theme toggle button (header sun/moon). Matches .gh-badge / .menu-toggle affordance: bordered, focus-visible, hover-accent. The two glyphs are stacked; CSS shows the icon for the theme you would switch TO — a sun under dark (tap to go light), a moon under light (tap to go dark). ============================================================ */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid var(--border); border-radius:9px; color:var(--text-muted); cursor:pointer; padding:7px; line-height:0; transition:border-color .15s, color .15s; } .theme-toggle:hover { border-color:var(--accent); color:var(--accent-text); } .theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .theme-toggle svg { width:18px; height:18px; } .theme-toggle .i-moon { display:none; } /* dark (default): offer the sun */ .theme-toggle .i-sun { display:inline; } :root[data-theme="light"] .theme-toggle .i-sun { display:none; } :root[data-theme="light"] .theme-toggle .i-moon { display:inline; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } section { padding: 112px 0; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; } h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 16px; } h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; } .lead { color: var(--text-muted); font-size: 1.15rem; max-width: 640px; } .eyebrow { color: var(--accent-text); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; } .mono { font-family: var(--font-mono); } .center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: 1px solid transparent; transition: all .18s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #06241A; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); } /* Nav */ header { position: sticky; top: 0; z-index: 50; background: rgba(11,15,20,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } nav { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; } .logo svg { width: 26px; height: 26px; } /* .nav-drawer is a transparent wrapper on desktop (display:contents) so the layout is identical to before the rewrite; on mobile it becomes the drawer. */ .nav-drawer { display: contents; } .nav-links { display: flex; align-items: center; gap: 24px; } .nav-links a.navlink { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color .15s; white-space: nowrap; } .nav-links a.navlink:hover { color: var(--text); } .nav-links a.navlink.active { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 12px; } .gh-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); border: 1px solid var(--border); padding: 7px 12px; border-radius: 8px; transition: border-color .15s; } .gh-badge:hover { border-color: var(--accent); } .menu-toggle { display: none; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 9px; color: var(--text); cursor: pointer; padding: 7px; line-height: 0; } .menu-toggle:hover { border-color: var(--accent); color: var(--accent-text); } .menu-toggle .i-close { display: none; } /* Hero */ .hero { padding-top: 80px; padding-bottom: 96px; position: relative; } .hero::before { content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:780px; height:560px; max-width:100%; background: radial-gradient(ellipse at center, rgba(61,220,151,.10), transparent 65%); pointer-events:none; z-index:0; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; } .hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); margin-bottom: 22px; } .hero h1 .hl { color: var(--accent-text); } .hero .lead { font-size: 1.22rem; margin-bottom: 32px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .hero-sub { color: var(--text-muted); font-size: 0.88rem; font-family: var(--font-mono); } .hero-sub span { color: var(--accent-text); } /* ============================================================ Dark code/terminal surfaces on the light site. These stay dark by design (conventional + sharp on a light page). We locally re-scope the tokens so descendants that read var(--text)/--text-muted/--border/--bg-elevated get their DARK values back — and bright var(--accent) green keeps reading on the dark ground (prompts, ok-lines, copy-btn hover). ============================================================ */ .terminal, .codeblock, .install { --text: #E6EDF3; --text-muted: #8B97A5; --border: #212A35; --bg-elevated: #161B22; } /* Terminal */ .terminal { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); font-family: var(--font-mono); font-size: 0.86rem; } .term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: #0a0e13; } .dot { width: 11px; height: 11px; border-radius: 50%; } .dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; } .term-title { margin-left: 8px; color: var(--text-muted); font-size: 0.78rem; } .term-body { padding: 18px 18px 22px; min-height: 268px; line-height: 1.75; } .term-body .line { white-space: pre-wrap; word-break: break-word; } .prompt { color: var(--accent); } .cmd { color: var(--text); } .out { color: var(--text-muted); } .ok { color: var(--accent); } .blocked { color: var(--danger); } .cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--accent); vertical-align: text-bottom; animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* Trust strip */ .trust { padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .trust p { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 22px; } .eco { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; } .eco span { font-family: var(--font-mono); font-weight: 500; color: var(--text); font-size: 0.98rem; opacity: .82; display:inline-flex; align-items:center; gap:8px; } .eco span::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--accent); opacity:.7; } /* Problem */ .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color .2s, transform .2s; } .card:hover { border-color: #2c3a48; transform: translateY(-2px); } .card .ico { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 16px; background: rgba(240,100,75,.12); } .card .ico svg { width: 20px; height: 20px; stroke: var(--danger); } .card p { color: var(--text-muted); font-size: 0.95rem; } /* How it works */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; } .step { position: relative; padding: 28px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); } .step .num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-text); border: 1px solid var(--border); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 16px; } .step p { color: var(--text-muted); font-size: 0.95rem; } .flow { margin-top: 48px; display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; } .flow .node { font-family: var(--font-mono); font-size:.82rem; padding:12px 16px; border:1px solid var(--border); border-radius:10px; background:var(--bg-elevated); } .flow .node.mid { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px rgba(61,220,151,.08); } .flow .arrow { color: var(--text-muted); padding: 0 14px; font-family: var(--font-mono); } /* Pillars / features */ .pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; } .pillar .ico { background: rgba(61,220,151,.10); } .pillar .ico svg { stroke: var(--accent-text); } .featrow { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:20px; } .feat { display:flex; gap:12px; align-items:flex-start; padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--bg-elevated); } .feat svg { width:18px; height:18px; stroke: var(--accent-text); flex-shrink:0; margin-top:3px; } .feat b { font-size:.95rem; } .feat p { color:var(--text-muted); font-size:.86rem; margin-top:2px; } /* Icon hover micro-interactions — opt-in per icon via pathLength="1". The card keeps its existing lift + border shift; the icon adds one small gesture: a stroke "draw" plus a subtle spring-scale. Prepared icons only (the [pathLength="1"] selector) so the shared rule can't touch unprepared icons on other pages. All motion is disabled under reduced-motion. */ .ico svg [pathLength="1"], .feat svg [pathLength="1"] { stroke-dasharray: 1; } /* harmless at rest: offset 0 = fully drawn */ @keyframes uw-icon-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: no-preference) { .card .ico svg, .pillar .ico svg { transition: transform .28s cubic-bezier(.34,1.3,.6,1); transform-origin: center; } .card:hover .ico svg, .pillar:hover .ico svg { transform: scale(1.12); } .card:hover .ico svg [pathLength="1"], .pillar:hover .ico svg [pathLength="1"], .feat:hover svg [pathLength="1"] { animation: uw-icon-draw .55s ease; } } /* Stats */ .stats { background: var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .stat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; } .stat .n { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 700; color: var(--accent-text); } .stat .l { color: var(--text-muted); font-size: 0.86rem; margin-top: 6px; } /* Comparison */ table.cmp { width:100%; border-collapse: collapse; margin-top: 40px; background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; } table.cmp th, table.cmp td { padding: 16px 18px; text-align:left; border-bottom:1px solid var(--border); font-size: 0.92rem; } table.cmp th { font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-muted); } table.cmp th.v { color: var(--accent-text); } table.cmp td.v { color: var(--text); font-weight:500; } table.cmp td:first-child { color: var(--text-muted); } table.cmp tr:last-child td { border-bottom:none; } .yes { color: var(--accent-text); font-weight:600; } .no { color: var(--danger); } .cmp-note { color: var(--text-muted); font-size:.8rem; margin-top:14px; } /* Enterprise band */ .enterprise { background: linear-gradient(180deg, #0c1219, #0a1015); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .ent-grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; } .ent-list { list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:14px; } .ent-list li { display:flex; gap:12px; align-items:flex-start; color: var(--text-muted); font-size:.98rem; } .ent-list svg { width:20px; height:20px; stroke: var(--accent-text); flex-shrink:0; margin-top:2px; } .ent-list b { color: var(--text); } /* Pricing */ .tiers { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:20px; margin-top:48px; } /* Pricing controls: currency + billing-period pickers */ .pricing-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; } .ccy-picker { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:999px; background:var(--bg-elevated); } .ccy-picker button { font-family:var(--font-mono); font-size:.82rem; padding:6px 16px; border:0; border-radius:999px; background:transparent; color:var(--text-muted); cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; } .ccy-picker button:hover { color:var(--text); } .ccy-picker button[aria-pressed="true"] { background:var(--accent); color:#04130d; font-weight:700; } .ccy-picker .save { font-size:.72rem; opacity:.85; } .ccy-note { font-size:.8rem; color:var(--text-muted); margin-top:10px; text-align:center; } .tier { background: var(--bg-elevated); border:1px solid var(--border); border-radius: var(--radius); padding:30px; display:flex; flex-direction:column; } .tier.featured { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,220,151,.08); } .tier h3 { margin-bottom: 4px; } .tier .price { font-family: var(--font-mono); font-size: 1.6rem; font-weight:700; margin:12px 0 4px; } .tier .price small { font-size:.8rem; color:var(--text-muted); font-weight:400; } .tier .desc { color: var(--text-muted); font-size:.9rem; margin-bottom: 20px; min-height: 40px; } .tier ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; flex:1; } .tier li { font-size:.9rem; color: var(--text-muted); display:flex; gap:9px; align-items:flex-start; } .tier li svg { width:16px; height:16px; stroke: var(--accent-text); flex-shrink:0; margin-top:3px; } .tier .btn { width:100%; justify-content:center; } /* Install snippet */ .install { display:flex; align-items:center; gap:0; max-width: 560px; margin: 28px auto 0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background: var(--bg-code); } .install code { font-family: var(--font-mono); font-size:.9rem; padding: 14px 16px; flex:1; min-width:0; color: var(--text); overflow-x:auto; white-space:nowrap; } .install code .prompt { color: var(--accent); } .copy-btn { background: var(--bg-elevated); border:none; border-left:1px solid var(--border); color: var(--text-muted); padding: 0 16px; align-self:stretch; cursor:pointer; font-size:.82rem; font-family:var(--font-mono); transition: color .15s; } .copy-btn:hover { color: var(--accent); } /* install bar is dark-scoped — bright green reads here */ /* Final CTA */ .final { text-align:center; } .final .hero-cta { justify-content:center; } /* Footer */ footer { border-top:1px solid var(--border); padding: 56px 0 40px; } .foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; } .foot-col h2 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:14px; } .foot-col a { display:block; color: var(--text-muted); font-size:.9rem; margin-bottom:10px; transition: color .15s; } .foot-col a:hover { color: var(--text); } .foot-brand p { color: var(--text-muted); font-size:.9rem; margin-top:12px; max-width: 280px; } .foot-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color: var(--text-muted); font-size:.82rem; } .foot-bottom a { color: var(--text-muted); text-decoration:none; } .foot-bottom a:hover { color: var(--accent-text); } .foot-legal { display:flex; flex-wrap:wrap; gap:6px 8px; } /* "Manage cookies" reads as a plain text link in the legal row, but is a