/* * ============================================================================ * home.css — patterns for the public landing page (GET /), GUI-V3 redesign #1 * ============================================================================ * WHAT: the surface-specific composition for the new public landing page — * topbar + hero + two equal "door" cards (operator / screen-installer) + a * 3-card feature grid. Everything visual (cards, buttons, muted/mono text) * comes from components.css; this file adds ONLY page-level layout, same * discipline as adgang.css. Per docs/blueprint/03-gui.md §1, surface * composition lives in the `patterns` layer, and every rule here is scoped * under `.home` to guarantee zero collision with app.css's own patterns. * * ROLE: loaded AFTER app.css by src/views/home.php: * (declares @layer order, * imports tokens+components) * app.css already establishes `@layer reset, tokens, base, components, * patterns, utilities;` for the document, so this slots into `patterns` * without re-declaring the order. Plain CSS, no build step. * * TOKENS ONLY: no new colors (§4 hard rule) — the one deliberate accent touch * is the hero eyebrow + the primary door's eyebrow/border, both var(--accent), * an EXISTING token used for emphasis exactly like .chip-live/.rl-tag already * do elsewhere; nothing here introduces a fifth hue. Text sizes: the hero h1 * is the ONE deliberate exception to the four-size budget besides the hero * clock (docs/blueprint/03-gui.md §5.6) — Jonas's decision, 2026-07-31, after * an A/B: --text-display (32px, the same size as every management page's h1) * read as less than half the mockup's intended weight; he picked the * mockup's proportion. That is now --text-hero in tokens.css (a real, * fluid scale step, not a hardcoded value here) — 03-gui.md's own "one hero * exception" line is consequently out of date and needs a signed amendment; * reported, not edited (it's a signed document, not this file's to change). * * NOT: no new component belongs here that should live in components.css (that * is the design-system owner's call) — only this page's composition. No * inline styles in the view (CSP style-src stays clean). No JS: every action * on this page is a plain navigation link. * * MEASURED FIXES (2026-07-31, width-matched pass against the mockup's own * source — GUI-V3/Count-In v3 - Flow og GUI.dc.html, the "isFront" block): * - .home no longer forces min-block-size:100dvh + the footer no longer * pins itself there with margin-block-start:auto. That combination grew * WITHOUT BOUND on a tall viewport (measured: 373.9px of dead black at * 1400px tall, against 1027px of actual content) — never re-add a * viewport-height-chasing footer; a short page is not a page that needs * a sticky footer, and the mockup's own footer is normal in-flow. * - wordmark, feature-card title, doors→features gap, and the door CTA * buttons were measurably under the mockup (16-38% off) using EXISTING * tokens that were simply the wrong ones, or missing — not a scale gap. * Fixed those. The hero h1 (#2) is settled — see --text-hero above. The * door h2 (#5, 22px vs the mockup's 26px, 84.6%) is now settled * too: --text-title (tokens.css, added 2026-07-31, team-lead decision) — * closes the same shortfall here and on org-overblik's .ss-n. * ============================================================================ */ @layer patterns{ .home{display:flex;flex-direction:column} /* ── Topbar — brand (logo + wordmark, same .row + .brand-logo idiom as login.php) left, Hjælp (plain link) + Log ind (.btn-primary) right. Wordmark recipe matches the mockup + this page's own eyebrows: condensed display font, uppercase, letter-spaced — was plain body text at 16px, 24% under the mockup's 20px and missing every qualitative property. ── */ .home-topbar{display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);padding:var(--space-4) var(--space-6); border-block-end:1px solid var(--edge)} .home-topbar strong{font-family:var(--font-display);font-weight:700; font-size:var(--text-heading);text-transform:uppercase; letter-spacing:.06em;color:var(--tx)} /* ── Hero — centered eyebrow + display headline + lede, the .page-head eyebrow/title RECIPE reused (mono uppercase eyebrow, Barlow Condensed 700 title) but centred for a marketing hero rather than left-aligned management-page chrome. h1 stays at var(--text-display) — no new size. ── */ .home-hero{max-inline-size:44rem;margin-inline:auto; padding:var(--space-9) var(--space-6) var(--space-7); text-align:center;display:flex;flex-direction:column;align-items:center; gap:var(--space-4)} .home-hero h1{font-family:var(--font-display);font-weight:700; font-size:var(--text-hero);line-height:1.08} .home-hero p{max-inline-size:34rem} /* Shared eyebrow recipe for every card/section label on this page (mono, uppercase, letter-spaced) — matches .page-head .eyebrow's visual language, scoped locally since this page is not a .page-head management header. */ .home .eyebrow{font-size:var(--text-caption);letter-spacing:.14em; text-transform:uppercase;color:var(--tx-mut)} /* Hero eyebrow is BESPOKE, not the shared recipe above (measured pass, 2026-07-31): the mockup gives only the hero eyebrow its own bolder/looser treatment (weight 700, letter-spacing .24em) — every other eyebrow on the page (doors, features) stays on the shared 400/.14em recipe above; do not change that one. */ .home-hero .eyebrow{color:var(--accent);font-weight:700;letter-spacing:.24em} /* ── Two equal doors — operator path vs. screen-installer path, same visual weight (§3 skærm 1: "begge skal være synlige på det første skærmbillede"). auto-fit avoids inventing a breakpoint: 2-up once there is room for two >=16rem columns, 1-up on a phone. ── */ .home-doors{max-inline-size:56rem;margin-inline:auto; padding:0 var(--space-6) var(--space-8);display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--space-4)} .home-doors .card{display:flex;flex-direction:column;gap:var(--space-3); align-items:flex-start} /* --text-title (26px), not --text-heading (22px, was 84.6% of the mockup) — tokens.css, added 2026-07-31, team-lead decision. */ .home-doors .card h2{font-size:var(--text-title)} /* Full-width CTA (matches the mockup): a primary call to action that only hugs its own text reads as tentative next to a card this size. padding-block:14px (measured pass, 2026-07-31) — the mockup's door button is 14px vertical; no spacing token sits between --space-3 (12px) and --space-4 (16px), so this is a small, PAGE-SCOPED literal (not the shared .btn recipe in components.css, which everywhere else stays on --space-3). */ .home-doors .card .btn{margin-block-start:var(--space-2);inline-size:100%; padding-block:14px} /* Door 1 (operator, the primary path) gets an accent-tinted border so the eye lands there first — hierarchy via an EXISTING token, never a new hue (§5.3). */ .home-doors .card.is-primary{border-color:var(--accent)} /* .home-doors .card.is-primary .eyebrow{color:var(--accent)} -- rule removed, task text-sweep 2026-08-02: the "Dør 1 · Operatør"/"Dør 2 · Skærm" eyebrows were internal team vocabulary, not how a person arriving thinks about the page, and were removed from home.php. Both card headings + lead text already explain themselves without it. */ /* ── Card primitive — same recipe as .adgang .card (background/edge/ radius-lg per the section-card convention), defined locally because no bare .card exists in components.css yet; both door cards and feature cards share it, matching README §3's "reuse .card (--radius-lg)". ── */ .home-doors .card,.home-features .card{background:var(--surface); border:1px solid var(--edge);border-radius:var(--radius-lg); padding:var(--space-6)} /* ── 3-card feature grid — quieter than the doors (smaller card padding, text-heading max), auto-fit for the same phone→desktop reflow. Top padding --space-10 (64px, unused elsewhere on this page) matches the mockup's doors→features gap exactly — was 40px (the doors section's own bottom padding, with nothing here), 38% under. ── */ .home-features{max-inline-size:64rem;margin-inline:auto; padding:var(--space-10) var(--space-6) var(--space-9);display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-4)} .home-features .card{padding:var(--space-5);display:flex; flex-direction:column;gap:var(--space-2)} /* --text-heading (22px, not --text-body/16px — measured 24% under the mockup's 21px) + --font-display/700 (not --font-ui/600 — this was the only heading on the whole page still on the wrong family/weight, measured pass 2026-07-31). min-block-size:3em reserves TWO lines' worth of height (measured: this size/ family's own line-height computes to 1.5em, so 2 lines = 3em) regardless of whether a given title actually wraps — otherwise a 2-line title (card 1) pushes its own body text down relative to the 1-line titles either side of it, and the three cards no longer share a baseline. Team-lead's call (not in the mockup's own source, which doesn't specify one either way). */ .home-features .card h3{font-size:var(--text-heading);font-weight:700; font-family:var(--font-display);line-height:1.5;min-block-size:3em} /* Target is the mockup's 15px; no token sits between --text-caption (13px) and --text-body (16px) either — --text-body is the closer existing step (7% over vs. 13% under), applied here rather than left at caption. Same missing-step pattern as --text-heading/--text-display; not inventing a new one. */ .home-features .card p{font-size:var(--text-body)} /* Card eyebrow icons (i-plus/i-clock, cards 1/2) — 1.1em, matching the eyebrow text's own size. The card-3 spacer (`.eyebrow-spacer`) is 1.5em, NOT the icon's own 1.1em: the icon spans are inline content, so their rendered height is the font's LINE BOX (measured: 13px × 1.5 line-height = 19.5px), not the icon's explicit size — matching that, not the icon, is what keeps card 3's own h3 starting at the same y as cards 1/2 (verified: 5.2px off before landing on 1.5em). Pulled out of the view's own inline `style=` attributes — home.php's docblock claims no inline styles on this page. */ .home-features .eyebrow-icon{inline-size:1.1em;block-size:1.1em} .home-features .eyebrow-spacer{display:block;block-size:1.5em} /* ── Footer — mirrors the two doors (Hjælp / Tilknyt skærm / Log ind), matching the mockup's own footer row exactly; every link points at a route that already exists (confirmed: /hjaelp, /tilknyt, /login), no new function per Rule 1. margin-block-start is now a FIXED token, not `auto` — see the file header for why `auto` + min-block-size:100dvh must never come back. ── */ .home-footer{margin-block-start:var(--space-10);padding:var(--space-6); border-block-start:1px solid var(--edge); display:flex;align-items:center;justify-content:space-between; gap:var(--space-5);flex-wrap:wrap; /* --text-caption (13px) — was inheriting the 16px body default (no rule set it at all); mockup's footer row is 13px throughout. Measured pass, 2026-07-31. */ font-size:var(--text-caption)} .home-footer nav{display:flex;gap:var(--space-5)} }