/* Landing pages. Method: portfolio-hq inputs/DESIGN-SYSTEM-WEBSITE.md sections 2-9. Brand accents live in theme-.css, generated by build.py from content/site.json. Two looks: data-look="modern" (default: motion, glow, bento) and data-look="classic" (calm, serif, still). */ @layer reset, tokens, base, layout, components, looks, motion; /* ------------------------------------------------------------------ reset */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } table { border-collapse: collapse; } [hidden] { display: none !important; } } /* ------------------------------------------------------------------ tokens */ @layer tokens { :root { color-scheme: light dark; --bg: light-dark(oklch(.972 .009 85), oklch(.148 .026 265)); --bg-sunk: light-dark(oklch(.94 .011 85), oklch(.115 .022 265)); --surface: light-dark(oklch(.995 .004 85), oklch(.205 .03 265)); --surface-2: light-dark(oklch(.955 .01 85), oklch(.245 .034 265)); --surface-3: light-dark(oklch(.92 .012 85), oklch(.29 .038 265)); --line: light-dark(oklch(.2 .03 265 / .12), oklch(1 0 0 / .1)); --line-strong: light-dark(oklch(.2 .03 265 / .24), oklch(1 0 0 / .2)); --line-control: light-dark(oklch(.52 .02 265), oklch(.62 .02 265)); /* 3:1+ boundary for inputs */ --ink: light-dark(oklch(.2 .03 265), oklch(.968 .01 85)); --ink-2: light-dark(oklch(.36 .03 265), oklch(.83 .015 265)); --muted: light-dark(oklch(.46 .03 265), oklch(.72 .02 265)); /* accent defaults = kit default; theme-.css overrides these */ --accent: light-dark(oklch(.88 .19 125), oklch(.88 .19 125)); --accent-strong: light-dark(oklch(.915 .19 125), oklch(.915 .19 125)); --accent-text: light-dark(oklch(.45 .13 130), oklch(.88 .19 125)); --accent-line: light-dark(oklch(.55 .15 130), oklch(.88 .19 125)); --on-accent: oklch(.2 .04 265); --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); --focus: var(--accent-text); /* status: semantic only, never brand */ --good: light-dark(oklch(.45 .11 165), oklch(.79 .14 165)); --good-bg: light-dark(oklch(.93 .05 165), oklch(.32 .06 165 / .55)); --warn: light-dark(oklch(.47 .11 70), oklch(.83 .14 80)); --warn-bg: light-dark(oklch(.94 .06 85), oklch(.36 .07 80 / .5)); --info: light-dark(oklch(.46 .12 250), oklch(.77 .11 250)); --info-bg: light-dark(oklch(.94 .03 250), oklch(.33 .06 250 / .55)); --glass: light-dark(oklch(.985 .006 85 / .72), oklch(.16 .026 265 / .66)); --shadow-1: 0 1px 1px light-dark(oklch(.2 .03 265 / .06), oklch(0 0 0 / .3)), 0 6px 16px -6px light-dark(oklch(.2 .03 265 / .1), oklch(0 0 0 / .4)); --shadow-2: 0 1px 1px light-dark(oklch(.2 .03 265 / .05), oklch(0 0 0 / .25)), 0 10px 20px -8px light-dark(oklch(.2 .03 265 / .14), oklch(0 0 0 / .45)), 0 34px 70px -24px light-dark(oklch(.2 .03 265 / .25), oklch(0 0 0 / .6)); /* system font stacks only (no web fonts) */ --f-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; --f-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", Roboto, sans-serif; --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --f-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --gutter: clamp(16px, 4vw, 44px); --max: 1280px; --max-wide: 1480px; --hdr: 68px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* browsers without light-dark(): the same palette as explicit blocks (DESIGN-SYSTEM-DASHBOARD.md 3.1), so Auto follows the system and the theme button still switches. Light first, then dark twice: system dark unless the visitor chose Light, and the manual Dark choice. Keep the two dark blocks identical, and keep all three in step with the light-dark() pairs above. Brand accents come from theme-.css: accent, accent-strong and on-accent are the same in both themes; the dark blocks derive accent-text and accent-line from the accent. */ @supports not (color: light-dark(#000, #fff)) { :root { --bg: oklch(.972 .009 85); --bg-sunk: oklch(.94 .011 85); --surface: oklch(.995 .004 85); --surface-2: oklch(.955 .01 85); --surface-3: oklch(.92 .012 85); --line: oklch(.2 .03 265 / .12); --line-strong: oklch(.2 .03 265 / .24); --line-control: oklch(.52 .02 265); --ink: oklch(.2 .03 265); --ink-2: oklch(.36 .03 265); --muted: oklch(.46 .03 265); --accent: oklch(.88 .19 125); --accent-strong: oklch(.915 .19 125); --accent-text: oklch(.45 .13 130); --accent-line: oklch(.55 .15 130); --good: oklch(.45 .11 165); --good-bg: oklch(.93 .05 165); --warn: oklch(.47 .11 70); --warn-bg: oklch(.94 .06 85); --info: oklch(.46 .12 250); --info-bg: oklch(.94 .03 250); --glass: oklch(.985 .006 85 / .9); --shadow-1: 0 1px 1px oklch(.2 .03 265 / .06), 0 6px 16px -6px oklch(.2 .03 265 / .1); --shadow-2: 0 10px 20px -8px oklch(.2 .03 265 / .14), 0 34px 70px -24px oklch(.2 .03 265 / .25); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(.148 .026 265); --bg-sunk: oklch(.115 .022 265); --surface: oklch(.205 .03 265); --surface-2: oklch(.245 .034 265); --surface-3: oklch(.29 .038 265); --line: oklch(1 0 0 / .1); --line-strong: oklch(1 0 0 / .2); --line-control: oklch(.62 .02 265); --ink: oklch(.968 .01 85); --ink-2: oklch(.83 .015 265); --muted: oklch(.72 .02 265); --accent-text: color-mix(in oklab, var(--accent) 70%, #fff); --accent-line: var(--accent); --good: oklch(.79 .14 165); --good-bg: oklch(.32 .06 165 / .55); --warn: oklch(.83 .14 80); --warn-bg: oklch(.36 .07 80 / .5); --info: oklch(.77 .11 250); --info-bg: oklch(.33 .06 250 / .55); --glass: oklch(.16 .026 265 / .9); --shadow-1: 0 1px 1px oklch(0 0 0 / .3), 0 6px 16px -6px oklch(0 0 0 / .4); --shadow-2: 0 10px 20px -8px oklch(0 0 0 / .45), 0 34px 70px -24px oklch(0 0 0 / .6); } } :root[data-theme="dark"] { --bg: oklch(.148 .026 265); --bg-sunk: oklch(.115 .022 265); --surface: oklch(.205 .03 265); --surface-2: oklch(.245 .034 265); --surface-3: oklch(.29 .038 265); --line: oklch(1 0 0 / .1); --line-strong: oklch(1 0 0 / .2); --line-control: oklch(.62 .02 265); --ink: oklch(.968 .01 85); --ink-2: oklch(.83 .015 265); --muted: oklch(.72 .02 265); --accent-text: color-mix(in oklab, var(--accent) 70%, #fff); --accent-line: var(--accent); --good: oklch(.79 .14 165); --good-bg: oklch(.32 .06 165 / .55); --warn: oklch(.83 .14 80); --warn-bg: oklch(.36 .07 80 / .5); --info: oklch(.77 .11 250); --info-bg: oklch(.33 .06 250 / .55); --glass: oklch(.16 .026 265 / .9); --shadow-1: 0 1px 1px oklch(0 0 0 / .3), 0 6px 16px -6px oklch(0 0 0 / .4); --shadow-2: 0 10px 20px -8px oklch(0 0 0 / .45), 0 34px 70px -24px oklch(0 0 0 / .6); } } @media (min-width: 1900px) { :root { --max: 1560px; --max-wide: 1760px; } } } /* ------------------------------------------------------------------ base */ @layer base { html { scroll-padding-top: calc(var(--hdr) + 16px); } @media (min-width: 1900px) { html { font-size: 112.5%; } } @media (min-width: 2300px) { html { font-size: 125%; } } body { background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; } h1, h2, h3 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: clamp(2.2rem, 1.2rem + 5.2vw, 5.6rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.02; } h2 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; } h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; } p, li, dd { text-wrap: pretty; } p { max-width: 70ch; } a { color: var(--accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--accent); color: var(--on-accent); } .skip { position: absolute; left: 12px; top: -100px; z-index: 200; padding: .7em 1em; border-radius: var(--r-s); background: var(--ink); color: var(--bg); font-weight: 650; text-decoration: none; } .skip:focus { top: 12px; } /* text for screen readers only (status context, change announcements) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .eyebrow { display: inline-flex; align-items: center; gap: .7em; margin-bottom: 1rem; font: 600 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; } .lede { font-size: clamp(1.1rem, .98rem + .5vw, 1.4rem); line-height: 1.45; color: var(--ink-2); max-width: 46ch; } } /* ------------------------------------------------------------------ layout */ @layer layout { .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } .wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; } .section { padding-block: clamp(64px, 9vw, 130px); position: relative; } .section-tight { padding-block: clamp(40px, 5vw, 80px); } .section-alt { background: color-mix(in oklab, var(--bg-sunk) 70%, var(--bg)); } .sec-head { margin-bottom: clamp(28px, 4vw, 56px); display: grid; gap: .4rem; } .sec-head .eyebrow { margin-bottom: .3rem; } .sec-note { color: var(--muted); font-size: .95rem; margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .45em; align-items: center; } .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; } @media (max-width: 980px) { .bento > * { grid-column: span 12; } .bento > .span-3, .bento > .span-4, .bento > .span-5, .bento > .span-7 { grid-column: span 6; } } @media (max-width: 620px) { .bento > *, .bento > [class*="span-"] { grid-column: 1 / -1; } } .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); } @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } } } /* ------------------------------------------------------------------ components */ @layer components { /* header */ .site-header { position: sticky; top: 0; z-index: 100; view-transition-name: site-header; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--line); } .hdr { display: flex; align-items: center; gap: 12px; min-height: var(--hdr); } .wordmark { display: inline-flex; align-items: baseline; gap: .45em; min-width: 0; margin-right: auto; font: 750 1.08rem/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .wordmark:hover { text-decoration: none; } .wm-brand { color: var(--accent-text); white-space: nowrap; } .wm-sep { color: var(--muted); font-weight: 400; } .wm-product { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hdr-panel { display: flex; align-items: center; gap: 14px; } .nav { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--surface) 60%, transparent); } .nav a { padding: .5em .95em; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 560; font-size: .92rem; line-height: 1.2; white-space: nowrap; } .nav a:hover { color: var(--ink); background: var(--surface-2); } .nav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); } .prefs { display: flex; align-items: center; gap: 8px; } .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; } .seg button, .theme-btn { min-height: 34px; padding: .4em .85em; border-radius: 999px; font: 600 .8rem/1 var(--f-text); color: var(--ink-2); } .seg button:hover, .theme-btn:hover { color: var(--ink); background: var(--surface-2); } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .theme-btn { display: inline-flex; align-items: center; gap: .5em; border: 1px solid var(--line-strong); } .theme-ic { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .menu-btn { display: none; align-items: center; gap: .55em; min-height: 40px; padding: .45em .9em; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .9rem; } .menu-ic { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; } .menu-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; } html:not(.js) .prefs { display: none; } /* Drawer at 70em (1120px at the default text size; in em so it follows the visitor's text size). Measured on the built pages: inline, the nav and the display options take 715px, so at 941px a product name after the longest brand prefix kept 21px, and it needs about 1075px to show 12 characters. 70em leaves room for a classic scrollbar and slightly wider system fonts. */ @media (max-width: 70em) { html.js .menu-btn { display: inline-flex; } html.js .hdr-panel { position: absolute; right: var(--gutter); top: calc(var(--hdr) + 8px); width: min(100% - 2 * var(--gutter), 26rem); /* never taller than the space under the sticky header: on a short or zoomed viewport the lower controls scroll inside the drawer, so a focused control is never left below the screen edge (WCAG 2.4.11) */ max-height: calc(100vh - var(--hdr) - 16px); max-height: calc(100dvh - var(--hdr) - 16px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .25s, transform .35s var(--ease), visibility 0s .3s; } html.js .hdr-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); } html.js .nav { flex-direction: column; flex: none; padding: 0; border: 0; border-radius: 0; background: none; } html.js .nav a { padding: .8em 1em; border-radius: var(--r-s); font-size: 1rem; } html.js .prefs { flex: none; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); } } /* without JS there is no drawer: the nav wraps under the wordmark (display options need JS and are hidden). The wrapped header is taller than --hdr, so it stops being sticky rather than cover focused content (WCAG 2.4.11). */ @media (max-width: 940px) { html:not(.js) .site-header { position: relative; } html:not(.js) .hdr { flex-wrap: wrap; padding-block: 10px; } html:not(.js) .hdr-panel, html:not(.js) .nav { flex-wrap: wrap; } } /* buttons */ .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; } .btn { --bx: 0px; --by: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; padding: .85em 1.4em; border-radius: 999px; border: 1px solid transparent; font-weight: 650; font-size: .98rem; line-height: 1.1; text-decoration: none; text-align: center; transform: translate(var(--bx), var(--by)); transition: transform .35s var(--ease), background .2s, box-shadow .3s, border-color .2s, color .2s; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 oklch(1 0 0 / .5) inset, 0 -2px 0 oklch(0 0 0 / .12) inset, 0 10px 24px -10px var(--accent), 0 2px 4px oklch(0 0 0 / .15); } .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 1px 0 oklch(1 0 0 / .5) inset, 0 -2px 0 oklch(0 0 0 / .12) inset, 0 14px 32px -10px var(--accent), 0 2px 4px oklch(0 0 0 / .15); } .btn-primary:active { transform: translate(var(--bx), calc(var(--by) + 1px)); } .btn-ghost { border-color: var(--line-control); background: color-mix(in oklab, var(--surface) 50%, transparent); color: var(--ink); } .btn-ghost:hover { background: var(--surface); border-color: var(--ink-2); } /* hero */ .hero { position: relative; isolation: isolate; padding-block: clamp(48px, 8vw, 120px) clamp(48px, 7vw, 100px); } .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 8% -10%, var(--accent-soft), transparent 70%), radial-gradient(45% 55% at 100% 0%, color-mix(in oklab, var(--info) 10%, transparent), transparent 70%); } /* start, not end: the live details make the card taller than the copy, which must stay at the top */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { margin-bottom: 1.1rem; } .summary { margin-top: 1.4rem; color: var(--ink-2); max-width: 62ch; } .hero-fine { margin-top: 1rem; font-size: .9rem; color: var(--muted); } .status-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.6rem; } .status-note { color: var(--ink-2); font-size: .95rem; max-width: 60ch; } /* status pill */ .status { display: inline-flex; align-items: center; gap: .55em; padding: .55em .9em; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: 650 .76rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; } .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } /* live data (assets/site.js): tones come from the status enum at run time (assets/portfolio.js STATUS_TONE), never from the HTML. The production-ready tone is "verified", so no file matches the host's deploy guard. */ .status[data-state="verified"] { color: var(--good); background: var(--good-bg); border-color: transparent; } .status[data-state="verified"] .dot { background: var(--good); } .status[data-state="demo"] { color: var(--info); background: var(--info-bg); border-color: transparent; } .status[data-state="demo"] .dot { background: var(--info); } .status[data-state="beta"] { color: var(--info); background: var(--info-bg); border-color: transparent; } .status[data-state="beta"] .dot { background: var(--info); } .status[data-state="building"] { color: var(--warn); background: var(--warn-bg); border-color: transparent; } .status[data-state="building"] .dot { background: var(--warn); } .status[data-state="landing"], .status[data-state="offline"], .status[data-state="unknown"] { border-style: dashed; } .status a { color: inherit; } .live-health { display: inline-flex; align-items: center; gap: .45em; font: 600 .76rem/1 var(--f-mono); color: var(--ink-2); } .live-health .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 2px solid var(--muted); } .live-health[data-h="up"] .dot { background: var(--good); border-color: var(--good); } .live-health[data-h="login"] .dot, .live-health[data-h="redirect"] .dot { background: var(--info); border-color: var(--info); } .live-health[data-h="degraded"] .dot, .live-health[data-h="down"] .dot { background: var(--warn); border-color: var(--warn); } .live-facts { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); } .live-src { margin-top: .8rem; font-size: .82rem; color: var(--muted); } .live-stale { color: var(--warn); font-weight: 650; } .unk { color: var(--muted); font-style: italic; } /* chips (feature and surface states) */ .chip { display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em; border-radius: 999px; width: fit-content; font: 650 .7rem/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; } .chip[data-chip="built"] { color: var(--good); background: var(--good-bg); } .chip[data-chip="partly"] { color: var(--warn); background: var(--warn-bg); } .chip[data-chip="planned"], .chip[data-chip="soon"], .chip[data-chip="internal"] { color: var(--muted); border: 1px dashed var(--line-control); } /* cards with cursor-following glow */ .card { --mx: 50%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); padding: clamp(20px, 2.4vw, 34px); transition: border-color .3s, box-shadow .4s; } .card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent) 18%, transparent), transparent 65%); opacity: 0; transition: opacity .4s; } @media (hover: hover) and (pointer: fine) { .card:hover::before { opacity: 1; } .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); } } .glance { padding: clamp(20px, 2.2vw, 30px); } .glance-h { font: 650 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; } .glance-list > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); } .glance-list dt { color: var(--muted); font-size: .9rem; } .glance-list dd { font-weight: 600; } @media (max-width: 420px) { .glance-list > div { grid-template-columns: 1fr; gap: .15rem; } } .statement { font: 650 clamp(1.45rem, 1rem + 2vw, 2.6rem)/1.2 var(--f-display); letter-spacing: -.025em; color: var(--ink); max-width: 32ch; text-wrap: balance; } .feat { display: flex; flex-direction: column; gap: .75rem; min-height: 200px; } .feat h3 { margin-top: auto; padding-top: 1.4rem; } .feat p { color: var(--ink-2); } .feat[data-state="planned"] { background: color-mix(in oklab, var(--surface) 55%, transparent); border-style: dashed; border-color: var(--line-strong); } /* steps */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: step; } .step { counter-increment: step; padding-top: 1.2rem; border-top: 2px solid var(--accent-line); } .step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: .9rem; font: 650 .8rem/1 var(--f-mono); letter-spacing: .1em; color: var(--accent-text); } .step h3 { margin-bottom: .5rem; } .step p { color: var(--ink-2); } /* audience and surfaces */ .audience { display: grid; gap: 10px; margin-top: 1.6rem; } .audience li { padding: .9rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); font-weight: 600; display: flex; gap: .7em; align-items: baseline; } .audience li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-line); flex: none; transform: translateY(-1px); } .surfaces { display: grid; gap: 10px; margin-top: 1.6rem; } .surfaces li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); } .surf-name { font-weight: 650; } .empty-note { margin-top: 1.6rem; padding: 1.2rem; border-radius: var(--r-m); border: 1.5px dashed var(--line-strong); color: var(--ink-2); } /* pricing */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(12px, 1.4vw, 20px); } .plan { display: flex; flex-direction: column; gap: .7rem; } .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .5em; } .price { font: 750 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.03em; color: var(--ink); } .plan-period { color: var(--muted); font-size: .92rem; } .plan-notes { color: var(--ink-2); font-size: .95rem; } .plan-tbd { border-style: dashed; border-color: var(--line-strong); box-shadow: none; } .plan-tbd p { color: var(--ink-2); } .price-note { margin-top: 1.4rem; color: var(--muted); font-size: .95rem; } /* FAQ */ .faq { border-top: 1px solid var(--line-strong); max-width: 900px; } .faq details { border-bottom: 1px solid var(--line-strong); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: 20px 0; font: 650 clamp(1.02rem, .98rem + .3vw, 1.2rem)/1.35 var(--f-display); color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; font: 500 1.5rem/1 var(--f-mono); color: var(--accent-text); transition: transform .35s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq-a { padding: 0 0 22px; color: var(--ink-2); } /* disclaimer */ .disclaimer { padding: clamp(18px, 2vw, 26px); border-radius: var(--r-m); border: 1px solid var(--line-strong); border-left: 4px solid var(--warn); background: var(--warn-bg); color: var(--ink); } /* related */ .related { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.4vw, 20px); } .rel { display: flex; flex-direction: column; gap: .5rem; height: 100%; text-decoration: none; color: var(--ink); } .rel:hover { text-decoration: none; } .rel-name { font: 700 1.2rem/1.2 var(--f-display); letter-spacing: -.02em; } .rel-name::after { content: " \2192"; color: var(--accent-text); } .rel-tag { color: var(--ink-2); font-size: .95rem; margin-bottom: .4rem; } /* directory (root index) */ .dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); } .dir-group h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin-bottom: 1rem; } .dir-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); } .dir-list a { font-weight: 650; } /* footer with watermark wordmark */ .site-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-sunk); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 88px) 0 clamp(96px, 18vw, 260px); } .foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); } @media (max-width: 760px) { .foot { grid-template-columns: 1fr; } } .foot-title { font: 750 1.3rem/1.2 var(--f-display); letter-spacing: -.02em; } .foot-meta { margin-top: .6rem; color: var(--muted); font-size: .92rem; } .foot-h { font: 650 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; } .foot-list { display: grid; gap: .45rem; } .foot-mega { position: absolute; right: -1vw; bottom: -.2em; z-index: 0; white-space: nowrap; font: 800 clamp(5rem, 22vw, 24rem)/.8 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--line-strong); opacity: .8; pointer-events: none; user-select: none; } @supports not (-webkit-text-stroke: 1px black) { .foot-mega { color: var(--line); } } } /* ------------------------------------------------------------------ looks */ @layer looks { :root[data-look="classic"] { --f-display: var(--f-serif); --r-s: 4px; --r-m: 4px; --r-l: 6px; --r-xl: 8px; --shadow-1: none; --shadow-2: none; } [data-look="classic"] :is(h1, h2, h3):not(.glance-h, .foot-h, .eyebrow), [data-look="classic"] .statement, [data-look="classic"] .price, [data-look="classic"] .foot-title, [data-look="classic"] .rel-name, [data-look="classic"] .wordmark, [data-look="classic"] .faq summary { letter-spacing: 0; font-weight: 600; } [data-look="classic"] h1 { font-size: clamp(2.1rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.08; } [data-look="classic"] h2:not(.glance-h, .foot-h, .eyebrow) { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); } [data-look="classic"] .dir-group h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); } [data-look="classic"] .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line-strong); } [data-look="classic"] .nav, [data-look="classic"] .seg { border-radius: 4px; } [data-look="classic"] .nav a, [data-look="classic"] .seg button, [data-look="classic"] .theme-btn, [data-look="classic"] .menu-btn, [data-look="classic"] .btn, [data-look="classic"] .status { border-radius: 3px; } [data-look="classic"] .btn-primary, [data-look="classic"] .btn-primary:hover { box-shadow: none; } [data-look="classic"] .hero::before, [data-look="classic"] .card::before { display: none; } [data-look="classic"] .section-alt { background: var(--bg); } [data-look="classic"] .section + .section, [data-look="classic"] .section-tight { border-top: 1px solid var(--line-strong); } [data-look="classic"] .section { padding-block: clamp(48px, 6vw, 88px); } [data-look="classic"] .bento { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } [data-look="classic"] .bento > * { grid-column: auto; } [data-look="classic"] .card { border-color: var(--line-strong); } [data-look="classic"] .feat { min-height: 0; } [data-look="classic"] .feat h3 { margin-top: 0; padding-top: .2rem; } [data-look="classic"] .eyebrow { font-family: var(--f-text); letter-spacing: .08em; } [data-look="classic"] .eyebrow::before { display: none; } [data-look="classic"] .chip { border-radius: 3px; } [data-look="classic"] .faq summary { font-family: var(--f-serif); } [data-look="classic"] .foot-mega { display: none; } [data-look="classic"] .site-footer { padding-bottom: clamp(48px, 6vw, 88px); } } /* ------------------------------------------------------------------ motion */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } @layer motion { .status[data-state="verified"] .dot { animation: ping 2.4s infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* scroll-driven reveals: CSS only; with no support (or no JS) the content is simply visible */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :root:not([data-look="classic"]) .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; } } } @keyframes rv-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } ::view-transition-old(root) { animation: 280ms var(--ease-io) both vt-out; } ::view-transition-new(root) { animation: 500ms var(--ease) both vt-in; } ::view-transition-group(site-header) { animation-duration: 0s; } @keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } } /* Classic look: no motion at all */ :root[data-look="classic"] *, :root[data-look="classic"] *::before, :root[data-look="classic"] *::after { animation: none !important; transition: none !important; } :root[data-look="classic"]::view-transition-old(root), :root[data-look="classic"]::view-transition-new(root) { animation: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } } /* Generator v2 page components (multi-page sites on their own domain). Method: portfolio-hq inputs/DESIGN-SYSTEM-WEBSITE.md; tokens and base components come from assets/site.css, which build.py puts first in the same file. Same cascade layers; the brand theme block is appended last. No colours are hand-written here: every colour is a token. */ @layer components { /* header extras */ .btn-sm { padding: .5em .95em; font-size: .9rem; min-height: 40px; } .btn-text { background: none; border: 0; color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; padding-inline: .2em; } .btn-text:hover { text-decoration-thickness: 2px; } .hdr-cta { flex: none; } @media (max-width: 560px) { .hdr-cta { display: none; } } .wm-mark { width: 1.15em; height: 1.15em; border-radius: .3em; background: var(--accent); flex: none; align-self: center; box-shadow: inset 0 0 0 .2em var(--accent), inset 0 0 0 .32em var(--on-accent); } .lang { display: flex; gap: .4rem; font-size: .9rem; } .lang a { padding: .35em .6em; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; } .lang a[aria-current="true"] { color: var(--ink); background: var(--surface-2); } /* breadcrumb */ .crumbs { padding-top: 1.1rem; font-size: .86rem; color: var(--muted); } .crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; } .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); } .crumbs a { color: var(--ink-2); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs [aria-current] { color: var(--ink); } /* hub product-section navigation */ .subnav ul { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); } .subnav a { display: inline-flex; padding: .45em .9em; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-size: .92rem; } .subnav a:hover { background: var(--surface-2); color: var(--ink); } .subnav a[aria-current="page"] { background: var(--ink); color: var(--bg); } /* heroes */ .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } .hero-v2 h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); } .section .wrap > h2:not(.eyebrow), .section-tight .wrap > h2, .two-col > div > h2 { margin-bottom: 1rem; } .who-grid { align-items: start; } .who-grid .sub-h { margin-top: 1.6rem; } .status-panel { display: grid; gap: .8rem; padding: clamp(1.4rem, 2.5vw, 2rem); align-content: start; } .status-panel h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); } @media (max-width: 900px) { .hero-v2 .hero-grid { grid-template-columns: 1fr; } } .hero-visual { position: relative; display: grid; gap: 1rem; justify-items: end; } .hero-visual > .frame { width: 100%; } .page-hero { position: relative; padding-block: clamp(28px, 5vw, 72px) clamp(24px, 4vw, 56px); } .page-hero h1 { font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); margin-bottom: .9rem; } .ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; } @media (max-width: 760px) { .ph-grid { grid-template-columns: 1fr; } } .ph-side { display: grid; gap: 1rem; justify-items: end; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.6rem; } .app-slot:empty { display: none; } .app-slot { display: contents; } /* the content frame (design system 7: one frame for every image) */ .frame { margin: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); box-shadow: var(--shadow-post, var(--shadow-2)); } .frame img, .frame video, .frame picture { display: block; width: 100%; height: auto; } .frame figcaption { padding: .7rem 1rem; font-size: .88rem; color: var(--muted); background: var(--surface); } .r-16x10 { aspect-ratio: 16 / 10; } .r-16x9 { aspect-ratio: 16 / 9; } .r-4x5 { aspect-ratio: 4 / 5; } .r-9x16 { aspect-ratio: 9 / 16; } .r-4x3 { aspect-ratio: 4 / 3; } .r-1x1 { aspect-ratio: 1 / 1; } .media:not(.slot) { aspect-ratio: auto; } /* reserved real-media slot (UNIVERSAL 30): designed, clearly pending, never a fake screenshot. The label is the element's data-media-label, drawn by CSS, so it is not page text. */ .slot { position: relative; display: grid; place-items: center; isolation: isolate; background: radial-gradient(120% 80% at 85% 0%, var(--accent-soft), transparent 60%), repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--line) 60%, transparent) 14px 15px), var(--surface-2); } .slot::after { content: attr(data-media-label); position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .55em .8em; border-radius: var(--r-s); background: var(--glass); border: 1px dashed var(--line-control); font: 600 .72rem/1.35 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); text-align: center; } .slot-ui { width: 62%; display: grid; gap: .55rem; opacity: .9; } .slot-ui span { display: block; height: .7rem; border-radius: 99px; background: color-mix(in oklab, var(--ink) 10%, transparent); } .slot-ui span:nth-child(1) { width: 46%; height: .95rem; background: color-mix(in oklab, var(--accent) 45%, transparent); } .slot-ui span:nth-child(2) { width: 88%; } .slot-ui span:nth-child(3) { width: 70%; } .slot-play { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); } .slot-play::before { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent var(--accent-text); } @media (max-width: 480px) { .slot::after { font-size: .62rem; left: .5rem; right: .5rem; bottom: .5rem; } } /* runtime status (space reserved: no layout shift when the data arrives) */ .site-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 34px; } .ss-health { font-size: .88rem; color: var(--ink-2); } .status-list { display: grid; gap: 1rem; } .status-card { display: grid; gap: .6rem; } .sc-h { font-size: 1.35rem; } /* sections */ .statement { font: 650 clamp(1.4rem, 1rem + 1.8vw, 2.4rem)/1.25 var(--f-display); letter-spacing: -.02em; max-width: 34ch; } .statement-sm { font: 600 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.35 var(--f-display); max-width: 48ch; } .muted { color: var(--muted); } .more { margin-top: 1.4rem; font-weight: 600; } .more a { text-decoration: none; } .more a:hover { text-decoration: underline; } .sub-h { font-size: 1.1rem; margin-bottom: .8rem; } .sub-h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 1rem; } .how-grid { align-items: start; } .teaser-col { display: grid; gap: .8rem; align-content: start; } .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.4vw, 20px); } .aud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; } .aud { padding: 1.2rem 1.3rem; } .aud h3 { font-size: 1.05rem; } .steps-page { gap: clamp(20px, 3vw, 36px); } .step-lg h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .5rem; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); } .table-wrap table { width: 100%; font-size: .95rem; } .table-wrap th, .table-wrap td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; } .table-wrap thead th { font: 600 .75rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .t-right { text-align: right !important; } .t-center { text-align: center !important; } .notes, .mod-list, .ask-list, .link-list { display: grid; gap: .6rem; } .notes li { padding-left: 1.2rem; position: relative; } .notes li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-line); } .mod-list li { display: flex; align-items: center; gap: .7rem; } .ask-list li { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); } .link-list { margin-top: 1.4rem; } .case-grid, .prod-grid, .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.6vw, 24px); } .case { display: grid; gap: .5rem; padding: 1.5rem; text-decoration: none; color: inherit; height: 100%; } .case-h { font-size: 1.35rem; } .prod-card { display: grid; gap: .6rem; align-content: start; padding: 1.5rem; } .pcard-h { font-size: 1.4rem; } .pcard-h a { color: var(--ink); text-decoration: none; } .pcard-h a:hover { color: var(--accent-text); } .pcard-out { font-weight: 600; margin-top: .2rem; } .pcard-out a { text-decoration: none; } .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 1rem; } .person { padding: 1.2rem 1.3rem; } .person h3 { font-size: 1.1rem; } /* contact (forms fallback, FRONTEND-MASTER 10) and brochure */ .contact-card { display: grid; gap: .8rem; padding: clamp(1.4rem, 2.5vw, 2rem); } .contact-card h2, .contact-card h3 { font-size: 1.4rem; } .contact-list { display: grid; gap: .45rem; font-size: 1.05rem; } .contact-list a { font-weight: 600; } .c-name { font-weight: 650; } .c-company { color: var(--muted); } .form-note { font-size: .92rem; color: var(--ink-2); padding: .7rem .9rem; border-left: 3px solid var(--accent-line); background: var(--surface-2); border-radius: 0 var(--r-s) var(--r-s) 0; } .brochure { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: 1.4rem; margin-top: 1.2rem; } .brochure:not(:has(.brochure-cover)) { grid-template-columns: 1fr; } .brochure h2, .brochure h3 { font-size: 1.25rem; margin-bottom: .4rem; } .brochure-cover { width: 120px; height: auto; border-radius: var(--r-s); box-shadow: var(--shadow-1); } .cta-band { background: color-mix(in oklab, var(--accent) 12%, var(--bg)); border-block: 1px solid var(--line); } .cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; } .cta-inner h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); } /* live form (previews only until D-T3) */ .lead-form { display: grid; gap: .5rem; padding: clamp(1.4rem, 2.5vw, 2rem); } .lead-form label { font-weight: 600; font-size: .95rem; margin-top: .4rem; } .lead-form input:not([type="checkbox"]), .lead-form textarea { width: 100%; min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--line-control); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: inherit; } .lead-form .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; } .lead-form .check input { width: 22px; height: 22px; margin-top: .15rem; flex: none; } .lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status:empty { display: none; } .form-status { padding: .7rem .9rem; border-radius: var(--r-s); background: var(--surface-2); } .form-status[data-tone="error"] { color: var(--warn); background: var(--warn-bg); } .form-status[data-tone="ok"] { color: var(--good); background: var(--good-bg); } /* prose (approved Markdown pages and posts) */ .prose { max-width: 72ch; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); margin-top: 2em; } .prose h3 { margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; } .prose blockquote { border-left: 3px solid var(--accent-line); padding: .2em 0 .2em 1.1em; color: var(--ink-2); } .prose code { font: .9em var(--f-mono); background: var(--surface-2); padding: .1em .35em; border-radius: 5px; } .prose pre { overflow-x: auto; padding: 1rem 1.2rem; border-radius: var(--r-m); background: var(--bg-sunk); border: 1px solid var(--line); } .prose pre code { background: none; padding: 0; } .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; } .md-fig { margin-block: 1.6em; } /* blog */ .post-card { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; height: 100%; } .pc-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); } .pc-img img { width: 100%; height: 100%; object-fit: cover; } .pc-body { display: grid; gap: .5rem; padding: 1.2rem 1.3rem 1.4rem; align-content: start; } .pc-meta { font-size: .82rem; color: var(--muted); } .pc-meta a { color: var(--accent-text); } .pc-title { font-size: 1.25rem; } .pc-title a { color: var(--ink); text-decoration: none; } .pc-title a:hover { color: var(--accent-text); } .cats ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; } .cats a { display: inline-flex; padding: .4em .85em; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; font-size: .9rem; } .cats a[aria-current="page"], .cats a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; } .post-head { padding-top: clamp(24px, 4vw, 56px); } .post-head h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); max-width: 22ch; margin-bottom: .9rem; } .byline { color: var(--muted); font-size: .95rem; } .post-hero { margin-block: clamp(20px, 3vw, 40px); } .post-layout { display: grid; gap: 1.6rem; max-width: 800px; padding-bottom: clamp(40px, 6vw, 80px); } .summary-box { padding: 1.1rem 1.3rem; font-size: 1.08rem; color: var(--ink-2); max-width: none; } .toc { padding: 1rem 1.3rem; } .toc-h { font: 600 .78rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; } .toc ol { padding-left: 1.2em; display: grid; gap: .3em; } .takeaways { padding: 1.2rem 1.4rem; border-left: 4px solid var(--accent-line); } .takeaways ul { padding-left: 1.2em; display: grid; gap: .4em; margin-top: .6rem; } .author { padding: 1rem 1.3rem; } .author-name { font-weight: 650; } .sources ul { padding-left: 1.2em; display: grid; gap: .3em; font-size: .92rem; word-break: break-word; } .post-products { font-weight: 600; } /* mascot box (sizes per tier come from sitegen/mascot.py; the element itself is styled by assets/mascot/mascot.css) */ .mk-slot { position: relative; width: var(--mk-w, 120px); flex: none; display: grid; justify-items: center; gap: .4rem; } .mk-slot site-mascot { display: block; width: 100%; } .mk-slot site-mascot img { width: 100%; height: auto; } .mk-at-hero { justify-self: start; margin-top: -1rem; } .mk-at-end { justify-self: end; } .mk-toggle { display: inline-flex; align-items: center; gap: .45em; min-height: 32px; padding: .3em .7em; border: 1px solid var(--line-strong); border-radius: 99px; font-size: .8rem; color: var(--ink-2); background: var(--surface); } .mk-toggle[aria-pressed="false"] { color: var(--muted); border-style: dashed; } .mk-toggle-ic { width: .7em; height: .7em; flex: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); } .mk-toggle[aria-pressed="false"] .mk-toggle-ic { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } .mk-toggle-local { font-size: .72rem; min-height: 28px; } .prefs .mk-toggle { min-height: 36px; } .foot-preview { margin-top: .8rem; padding: .5rem .7rem; border: 1px dashed var(--warn); border-radius: var(--r-s); color: var(--warn); font-size: .85rem; } .empty-note { color: var(--muted); } } @layer looks { [data-look="classic"] .frame { box-shadow: none; } [data-look="classic"] .slot { background: var(--surface-2); } [data-look="classic"] .cta-band { background: var(--bg); } [data-look="classic"] .page-hero h1, [data-look="classic"] .post-head h1 { font-family: var(--f-serif); letter-spacing: -.01em; font-weight: 600; } } @layer motion { @media (prefers-reduced-motion: no-preference) { :root:not([data-look="classic"]) .mk-at-hero { animation: mk-in .7s var(--ease) both .2s; } @keyframes mk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { .mk-slot, .mk-slot * { animation: none !important; transition: none !important; } } } /* Mascot boxes: generated by sitegen/mascot.py from TIER_MAX_360 / TIER_MAX_WIDE. Do not edit. */ @layer components { .mk-slot.mk-hero { --mk-w: 260px; } .mk-slot.mk-mid { --mk-w: 168px; } .mk-slot.mk-face { --mk-w: 96px; } .mk-slot.mk-peek { --mk-w: 84px; } @media (max-width: 480px) { .mk-slot.mk-hero { display: none; } .mk-slot.mk-mid { --mk-w: 88px; } .mk-slot.mk-face { --mk-w: 64px; } .mk-slot.mk-peek { --mk-w: 56px; } } } /* Generated by build.py from content/site.json brands.askshiva. Do not edit. */ @layer tokens { :root { --accent: light-dark(oklch(0.565 0.207 262), oklch(0.565 0.207 262)); --accent-strong: light-dark(oklch(0.53 0.207 262), oklch(0.53 0.207 262)); --on-accent: light-dark(oklch(1 0 0), oklch(1 0 0)); --accent-text: light-dark(oklch(0.465 0.15 262), oklch(0.70 0.156 262)); --accent-line: light-dark(oklch(0.565 0.207 262), oklch(0.565 0.207 262)); --info: light-dark(oklch(0.47 0.083 215), oklch(0.78 0.10 215)); --info-bg: light-dark(oklch(0.94 0.03 215), oklch(0.33 0.05 215 / 0.55)); } } @supports not (color: light-dark(#000, #fff)) { @layer tokens { :root { --accent: oklch(0.565 0.207 262); --accent-strong: oklch(0.53 0.207 262); --on-accent: oklch(1 0 0); --accent-text: oklch(0.465 0.15 262); --accent-line: oklch(0.565 0.207 262); --info: oklch(0.47 0.083 215); --info-bg: oklch(0.94 0.03 215); } } } /* Campus One skin (templates/skins/campusone.py). The school office as a visual language: the ruled register with its red margin, ink ticks, the carbon receipt book, the pinned notice, the staff ID card. Brand colour stays the AskShiva accent (hue 262); the extra tokens below are the paper, rule, margin and cork of that office, defined once here. Motion is transform and opacity only, never on small screens' fixed objects, never with reduced motion or the Classic look (site.css already stops all animation there). */ @layer tokens { :root { --c1-paper: oklch(.988 .012 92); --c1-rule: oklch(.6 .09 245 / .2); --c1-margin: oklch(.6 .16 25 / .5); --c1-ink: oklch(.42 .16 262); --c1-red: oklch(.55 .16 25); --c1-amber: oklch(.62 .13 70); --c1-cork: oklch(.74 .07 65); --c1-cork-2: oklch(.68 .08 60); --c1-pin: oklch(.6 .17 28); --c1-hol: oklch(.93 .025 85); --c1-shadow: 0 1px 0 oklch(.2 .03 265 / .06), 0 18px 40px -22px oklch(.2 .03 265 / .45); } @supports (color: light-dark(#000, #fff)) { :root { --c1-paper: light-dark(oklch(.988 .012 92), oklch(.215 .03 265)); --c1-rule: light-dark(oklch(.6 .09 245 / .2), oklch(.8 .06 245 / .1)); --c1-margin: light-dark(oklch(.6 .16 25 / .5), oklch(.68 .13 25 / .42)); --c1-ink: light-dark(oklch(.42 .16 262), oklch(.8 .11 262)); --c1-red: light-dark(oklch(.55 .16 25), oklch(.74 .13 25)); --c1-amber: light-dark(oklch(.6 .13 70), oklch(.8 .12 75)); --c1-cork: light-dark(oklch(.74 .07 65), oklch(.4 .05 60)); --c1-cork-2: light-dark(oklch(.68 .08 60), oklch(.35 .05 60)); --c1-hol: light-dark(oklch(.93 .025 85), oklch(.3 .025 85)); --c1-shadow: 0 1px 0 light-dark(oklch(.2 .03 265 / .06), oklch(0 0 0 / .3)), 0 18px 40px -22px light-dark(oklch(.2 .03 265 / .45), oklch(0 0 0 / .7)); } } } @layer components { /* ---------------------------------------------------------------- shared pieces */ .c1-ruled { background-color: var(--c1-paper); background-image: linear-gradient(to right, transparent calc(var(--gutter) + 18px), var(--c1-margin) calc(var(--gutter) + 18px), var(--c1-margin) calc(var(--gutter) + 20px), transparent calc(var(--gutter) + 20px)), repeating-linear-gradient(to bottom, transparent 0 31px, var(--c1-rule) 31px 32px); } .c1-photo { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--surface-2); box-shadow: var(--c1-shadow); } .c1-photo.r-16x9 { aspect-ratio: 16 / 9; } .c1-photo.r-4x5 { aspect-ratio: 4 / 5; } .c1-photo picture, .c1-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .c1-tag, .c1-real { display: inline-flex; align-items: center; gap: .35em; font: 600 .7rem/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; padding: .45em .7em; border-radius: 99px; } .c1-tag { position: absolute; left: .7rem; bottom: .7rem; color: var(--ink); background: var(--glass); backdrop-filter: blur(6px); border: 1px solid var(--line); } .c1-real { color: var(--on-accent); background: var(--accent); } .c1-sim-note { font-size: .84rem; color: var(--muted); border-left: 2px dotted var(--line-control); padding-left: .8rem; margin-top: 1rem; max-width: 60ch; } .c1-more { display: inline-flex; gap: .35em; margin-top: .6rem; font-weight: 600; color: var(--accent-text); text-decoration: none; } .c1-more:hover { text-decoration: underline; text-underline-offset: .2em; } .c1-screen { margin: 0; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-2); } .c1-screen img { display: block; width: 100%; height: auto; } .c1-screen figcaption { padding: .6rem .9rem; font-size: .84rem; color: var(--muted); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); } .c1-chrome { display: flex; gap: .4rem; padding: .55rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--line); } .c1-chrome span { width: .62rem; height: .62rem; border-radius: 50%; background: var(--line-strong); } .c1-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(16px, 2vw, 28px); } .c1-facts { display: grid; gap: .9rem; margin-block: 1.2rem; } .c1-facts li { position: relative; padding-left: 2rem; } .c1-facts li::before { content: ""; position: absolute; left: .25rem; top: .35em; width: .55rem; height: .95rem; border: solid var(--c1-ink); border-width: 0 .18rem .18rem 0; transform: rotate(40deg); } /* ---------------------------------------------------------------- hero */ .c1-hero { padding-block: clamp(32px, 6vw, 96px) clamp(40px, 6vw, 88px); overflow: clip; } .c1-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .c1-hero-copy { border-left: 2px solid var(--c1-margin); padding-left: clamp(16px, 2.6vw, 36px); } .c1-hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.7rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 1.1rem; text-wrap: balance; } .c1-hero .lede { max-width: 54ch; } .c1-hero .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; align-items: center; } .c1-hero-visual { position: relative; padding-bottom: clamp(72px, 9vw, 120px); } .c1-hero-photo { transform: rotate(.6deg); } .c1-sheet { position: absolute; left: clamp(-36px, -3vw, -12px); bottom: 0; width: min(330px, 74%); padding: 1rem 1.1rem .8rem 2.3rem; border-radius: var(--r-s); background-color: var(--c1-paper); background-image: linear-gradient(to right, transparent 1.55rem, var(--c1-margin) 1.55rem, var(--c1-margin) calc(1.55rem + 2px), transparent calc(1.55rem + 2px)), repeating-linear-gradient(to bottom, transparent 0 2.05rem, var(--c1-rule) 2.05rem calc(2.05rem + 1px)); box-shadow: var(--shadow-2); border: 1px solid var(--line); transform: rotate(-1.4deg); } .c1-sheet-h { font: 700 .78rem/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .c1-sheet ul { display: grid; } .c1-sheet li { display: flex; align-items: center; gap: .55rem; min-height: 2.05rem; font-weight: 600; } .c1-sheet-name { flex: 1; } .c1-sheet .chip { font-size: .7rem; } .c1-sheet-foot { font-size: .72rem; color: var(--muted); margin-top: .4rem; } .c1-tick { position: relative; width: 1rem; height: 1rem; flex: none; } .c1-tick::after { content: ""; position: absolute; left: .3rem; top: 0; width: .38rem; height: .75rem; border: solid var(--c1-ink); border-width: 0 .16rem .16rem 0; transform: rotate(40deg); transform-origin: 50% 80%; } .c1-hero-shot { position: absolute; right: -2%; top: 58%; width: 54%; transform: rotate(1.2deg); } .c1-hero-visual .mk-slot { position: absolute; right: 2%; top: -6%; z-index: 2; } /* a mascot hidden because it would cover a call to action takes its Pause control with it (no orphan button) */ .mk-slot:has(> site-mascot[data-overlap]) > .mk-toggle { visibility: hidden; } /* narrow two-column widths: the register sheet would cover the Pause control under the mascot, so it sits beside it */ @media (min-width: 961px) and (max-width: 1199.98px) { .c1-hero-visual .mk-slot { width: auto; grid-auto-flow: column; grid-template-columns: auto var(--mk-w); align-items: start; } .c1-hero-visual .mk-slot > .mk-toggle { order: -1; margin-top: 2.5rem; } } @media (max-width: 960px) { .c1-hero-grid { grid-template-columns: 1fr; } .c1-hero-visual { padding-bottom: 0; } /* one column: the copy and its buttons sit above the photo, so the mascot stays inside the photo's frame */ .c1-hero-visual .mk-slot { top: .75rem; right: .75rem; } .c1-sheet { position: relative; left: auto; width: auto; margin: -2.2rem 1rem 0; transform: rotate(-.8deg); } .c1-hero-shot { position: relative; right: auto; top: auto; width: auto; margin: 1rem 0 0; transform: none; } } /* ---------------------------------------------------------------- the problem: four registers */ .c1-problem { padding-left: clamp(24px, 4vw, 48px); } .c1-problem h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem); letter-spacing: -.025em; margin: .3rem 0 1rem; max-width: 22ch; } .c1-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); margin-top: 2rem; } .c1-four li { display: grid; gap: .5rem; align-content: start; padding: 1rem 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow-1); font-weight: 650; } .c1-four li:nth-child(odd) { transform: rotate(-1.2deg); } .c1-four li:nth-child(even) { transform: rotate(1deg) translateY(6px); } .c1-four-n { font: 700 1.6rem/1 var(--f-serif); color: var(--c1-red); } .c1-problem .statement { font: 500 clamp(1.1rem, .98rem + .7vw, 1.45rem)/1.5 var(--f-text); color: var(--ink-2); letter-spacing: 0; max-width: 58ch; } .c1-mini { display: block; height: 3.4rem; border-radius: 6px; border: 1px solid var(--line); background-color: var(--c1-paper); } .c1-mini[data-kind="register"] { background-image: linear-gradient(to right, var(--c1-rule) 1px, transparent 1px), linear-gradient(to bottom, var(--c1-rule) 1px, transparent 1px); background-size: 12px 12px; } .c1-mini[data-kind="receipt"] { background-image: radial-gradient(circle at 6px 4px, var(--bg) 3px, transparent 3.5px), repeating-linear-gradient(to bottom, transparent 0 13px, var(--c1-rule) 13px 14px); background-size: 12px 8px, 100% 100%; background-repeat: repeat-x, no-repeat; border-style: dashed; } .c1-mini[data-kind="marks"] { background-image: linear-gradient(to right, transparent 34%, var(--c1-rule) 34% calc(34% + 1px), transparent calc(34% + 1px)), repeating-linear-gradient(to right, transparent 0 22px, var(--c1-rule) 22px 23px), repeating-linear-gradient(to bottom, transparent 0 10px, var(--c1-rule) 10px 11px); } .c1-mini[data-kind="notice"] { position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0 9px, var(--c1-rule) 9px 10px); background-size: 70% 100%; background-position: 50% 14px; background-repeat: no-repeat; } .c1-mini[data-kind="notice"]::after { content: ""; position: absolute; top: 4px; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--c1-pin); } .c1-into { margin-top: 1.6rem; font: 600 clamp(1.05rem, .95rem + .5vw, 1.3rem)/1.45 var(--f-display); max-width: 52ch; padding: .9rem 1.1rem; border-radius: var(--r-s); background: var(--accent-soft); border: 1px solid var(--line); } @media (max-width: 720px) { .c1-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------------------------------------------------------------- the school day timeline */ .c1-day { position: relative; display: grid; gap: clamp(28px, 4vw, 56px); counter-reset: stop; } .c1-day::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(9rem + 14px); width: 2px; background: var(--c1-margin); } .c1-stop { position: relative; display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(220px, 38%); gap: clamp(16px, 3vw, 44px); align-items: center; } .c1-stop::before { content: ""; position: absolute; left: calc(9rem + 8px); top: .55rem; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c1-red); } .c1-when { font: 700 .82rem/1.3 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); align-self: start; padding-top: .3rem; } .c1-stop-body { padding-left: 1.4rem; } .c1-stop-body h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); margin-bottom: .4rem; } .c1-stop-body .chip { margin-bottom: .6rem; } .c1-stop-body p { color: var(--ink-2); max-width: 56ch; } .c1-stop.c1-r { grid-template-columns: 9rem minmax(220px, 38%) minmax(0, 1fr); } .c1-stop.c1-r .c1-stop-photo { grid-column: 2; grid-row: 1; margin-left: 1.4rem; transform: rotate(-.6deg); } .c1-stop.c1-r .c1-stop-body { grid-column: 3; grid-row: 1; padding-left: 0; } .c1-stop.c1-r .c1-when { grid-column: 1; grid-row: 1; } .c1-stop.c1-l .c1-stop-photo { transform: rotate(.6deg); } @media (max-width: 860px) { .c1-day::before { left: 6px; } .c1-stop { grid-template-columns: 1fr; padding-left: 1.8rem; gap: .8rem; } .c1-stop::before { left: 0; top: .2rem; } .c1-stop-body { padding-left: 0; } .c1-stop.c1-r { grid-template-columns: 1fr; } .c1-stop.c1-r .c1-stop-photo, .c1-stop.c1-r .c1-stop-body, .c1-stop.c1-r .c1-when { grid-column: auto; grid-row: auto; margin-left: 0; } .c1-stop .c1-stop-photo { max-width: 520px; } } /* ---------------------------------------------------------------- register simulation */ .c1-reg-grid { align-items: center; } .c1-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .45rem 1rem; margin: 1.2rem 0; font-size: .92rem; } .c1-legend li { display: flex; align-items: center; gap: .5rem; } .c1-code { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.7rem; padding-inline: .3rem; border-radius: 6px; font: 700 .78rem/1 var(--f-mono); background: var(--surface); border: 1px solid var(--line-strong); } .c1-reg-card { padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r-l); background-color: var(--c1-paper); background-image: repeating-linear-gradient(to bottom, transparent 0 39px, var(--c1-rule) 39px 40px); border: 1px solid var(--line); box-shadow: var(--shadow-2); } .c1-reg { width: 100%; border-collapse: separate; border-spacing: 6px; } .c1-reg th { font: 600 .78rem/1.2 var(--f-text); color: var(--muted); text-align: center; } .c1-reg tbody th { text-align: left; white-space: nowrap; } .c1-reg abbr { text-decoration: none; } .c1-cell { display: grid; place-items: center; width: 100%; min-width: 2.6rem; height: 2.75rem; border-radius: 8px; font: 700 .95rem/1 var(--f-mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; transition: transform .15s var(--ease), background-color .2s var(--ease); } button.c1-cell:hover { border-color: var(--c1-ink); } button.c1-cell:active { transform: scale(.94); } .c1-cell[data-c1-code="P"] { color: var(--c1-ink); } .c1-cell[data-c1-code="L"] { color: var(--c1-amber); } .c1-cell[data-c1-code="A"] { color: var(--c1-red); background: color-mix(in oklab, var(--c1-red) 9%, var(--surface)); } .c1-cell[data-c1-code="H"] { background: linear-gradient(135deg, color-mix(in oklab, var(--c1-ink) 14%, var(--surface)) 50%, var(--surface) 50%); color: var(--c1-ink); } .c1-cell[data-c1-code="CL"] { color: var(--muted); background: var(--surface-2); } .c1-cell[data-c1-code=""] { color: var(--muted); border-style: dashed; } .c1-hol { cursor: default; color: var(--muted); font: 600 .72rem/1 var(--f-text); background: repeating-linear-gradient(135deg, var(--c1-hol) 0 6px, transparent 6px 12px); border-style: dotted; } .c1-reg-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; } .c1-reg-out div { padding: .6rem .7rem; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); } .c1-reg-out dt { font-size: .74rem; color: var(--muted); } .c1-reg-out dd { margin: .2rem 0 0; font: 700 1.25rem/1.1 var(--f-display); } .c1-reg-pct dd { color: var(--c1-ink); } .c1-meter { position: relative; height: .7rem; margin-top: 1rem; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .c1-meter-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--pct, 0)); background: var(--c1-ink); border-radius: inherit; transition: transform .45s var(--ease); } .c1-meter-line { position: absolute; top: -2px; bottom: -2px; left: 75%; width: 2px; background: var(--c1-red); } .c1-reg-verdict { margin-top: .6rem; font-weight: 600; } @media (max-width: 560px) { .c1-reg-out { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c1-reg { border-spacing: 3px; } .c1-cell { min-width: 0; height: 2.6rem; font-size: .8rem; } } /* ---------------------------------------------------------------- how it works (home) */ .c1-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .c1-how h2 { margin: .3rem 0 1.4rem; max-width: 20ch; } .c1-steps { display: grid; gap: 1rem; counter-reset: s; } .c1-step { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 1rem; padding: 1rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); } .c1-step h3 { grid-column: 2; font-size: 1.12rem; } .c1-step p { grid-column: 2; color: var(--ink-2); } .c1-step-n { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font: 700 1.05rem/1 var(--f-serif); color: var(--c1-red); border: 2px solid var(--c1-margin); background: var(--c1-paper); } @media (max-width: 900px) { .c1-how { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- the video, pinned to the notice board */ .c1-pinned { position: relative; padding: clamp(14px, 2vw, 22px); border-radius: var(--r-m); background-color: var(--c1-cork); background-image: radial-gradient(circle at 20% 30%, var(--c1-cork-2) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, var(--c1-cork-2) 0 1px, transparent 1.5px); background-size: 9px 9px, 13px 13px; box-shadow: var(--shadow-2); transform: rotate(-.5deg); } .c1-pinned .frame { border-radius: 6px; border: 0; box-shadow: 0 8px 22px -12px oklch(0 0 0 / .6); } .c1-pin { position: absolute; top: .45rem; left: 1.2rem; width: 14px; height: 14px; border-radius: 50%; background: var(--c1-pin); box-shadow: 0 2px 3px oklch(0 0 0 / .35), inset -2px -2px 0 oklch(0 0 0 / .18); z-index: 2; } .c1-pin-r { left: auto; right: 1.2rem; } .c1-film video { background: oklch(.12 .02 265); } /* the poster and play control shown until a visitor starts the video (the