/* * Homepage journey preview (Local only): the hero's four doors (DESIGN-SPEC §5.1.3–5.1.6). * The approved hero keeps every rule of home.css; this layer only adds the doors, the note, the phone figure row, the * entrance delays of the new children and the hero's place above the thread layer. Owner refinements of 23 Oct (after * the visual approval): A1 the one primary door, A2 the "Need someone to talk to?" line. * Every selector starts with .shh.shj. No --sh-* is defined, no url(), no @import. Breakpoints: 360, 390 (the A1 cue), * 480, 768, 1280. */ /* stacking (§3.2): the hero's content sits above the thread layer (z 2); the section itself never stacks */ .shh.shj .shh-hero-inner { z-index: 3; } /* ---------- the doors: one list below 768 (§5.1.3) ---------- §5.1.6 fallback ladder, measured 23 Oct at 390 x 664 (the list must end at or above the pills' top, y 525): with the 46px rows each door is 47.6px (label 18.4 + 1 + line 16.25 + padding 10 + border 2) and the list ended at y 534.2. Step 1 (min-height 44px, padding-block 4px) and step 2 (nav margin-top 12px below 480) are applied; step 3 is not needed. */ .shh.shj .shj-doors-nav { margin-top: 12px; } .shh.shj .shj-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } .shh.shj .shj-door { --shj-door-fill: #246b5f; --shj-door-c: #246b5f; --shj-door-tint: #e7f2ef; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; column-gap: 10px; align-items: center; height: 100%; min-height: 44px; padding: 4px 12px 4px 10px; border: 1px solid var(--shh-line); border-radius: 16px; background: #fff; color: var(--shh-ink); white-space: normal; text-decoration: none; box-shadow: 0 12px 26px -20px rgba(18, 44, 58, .5); transition: transform .16s var(--shh-ease), border-color .16s ease, background-color .16s ease; } .shh.shj .shj-door--train { --shj-door-fill: #2b8fd6; --shj-door-c: #1b6fae; --shj-door-tint: #eaf4fd; } .shh.shj .shj-door--eat { --shj-door-fill: #3d9442; --shj-door-c: #2f7a34; --shj-door-tint: #eef7ec; } .shh.shj .shj-door--support { --shj-door-fill: #7b244b; --shj-door-c: #7b244b; --shj-door-tint: #fdf4f8; } .shh.shj .shj-door--helpers { --shj-door-fill: #d6336c; --shj-door-c: #b0285a; --shj-door-tint: #fdf0f5; } /* explicit cells, so the loader home.js inserts as the first child can never shift the badge, text or arrow */ .shh.shj .shj-door > .shh-badge { grid-area: 1 / 1; width: 30px; height: 30px; } .shh.shj .shj-door > .shh-badge .shh-i { width: 18px; height: 18px; } .shh.shj .shj-badge--support { background: var(--shh-plum); } .shh.shj .shj-door-text { grid-area: 1 / 2; display: grid; gap: 1px; min-width: 0; } .shh.shj .shj-door-label { font: 700 16px/1.15 var(--shh-display); letter-spacing: -.01em; color: var(--shh-ink); } /* balanced, so a two-line line (768 and up, and 320) breaks between phrases, never inside "about 2–10 min" */ .shh.shj .shj-door-line { font: 500 13px/1.25 var(--shh-text); color: var(--shh-muted); text-wrap: balance; } .shh.shj .shj-door-go { grid-area: 1 / 3; width: 16px; height: 16px; color: var(--shj-door-c); transition: transform .16s var(--shh-ease); } .shh.shj .shj-door > .shh-loader-wrap { grid-area: 1 / 1; place-self: center; width: 30px; height: 30px; color: var(--shj-door-c); } .shh.shj .shj-door.is-pending { pointer-events: none; } .shh.shj .shj-door.is-pending > .shh-badge { visibility: hidden; } /* hover and keyboard focus (the page's ink ring, home.css:71): lift, the door's own border and tint; every state restates background, colour and white-space. The line takes the copy colour on the tint (muted is 4.47:1 on #e7f2ef). */ .shh.shj .shj-door:hover, .shh.shj .shj-door:focus-visible { transform: translateY(-2px); border-color: var(--shj-door-fill); background: var(--shj-door-tint); color: var(--shh-ink); white-space: normal; } .shh.shj .shj-door:hover .shj-door-line, .shh.shj .shj-door:focus-visible .shj-door-line { color: var(--shh-copy); } .shh.shj .shj-door:hover .shj-door-go, .shh.shj .shj-door:focus-visible .shj-door-go { transform: translateX(2px); } /* A1 (owner, 23 Oct): "Check my health" is the one primary door, in the contract's primary language (§6): teal fill, white label and arrow, the soft teal shadow, #173d39 on hover and focus. It keeps the white doors' box, border, padding and grid, so the four stay one size and still read as a choice of four. The line (and the cue) take the Assess tint #e7f2ef (5.5:1 on #246b5f, 10.4:1 on #173d39; white is 6.3:1 and 11.9:1); the badge turns white with a teal glyph; the arrow and home.js's loader follow --shj-door-c, white here. */ .shh.shj .shj-door--primary { --shj-door-fill: var(--shh-teal-deep); --shj-door-c: #fff; border-color: var(--shh-teal); background: var(--shh-teal); color: #fff; white-space: normal; box-shadow: 0 14px 28px -16px rgba(36, 107, 95, .9), inset 0 1px 0 rgba(255, 255, 255, .18); } .shh.shj .shj-door--primary > .shh-badge { background: #fff; color: var(--shh-teal); } .shh.shj .shj-door--primary .shj-door-label { color: #fff; } .shh.shj .shj-door--primary .shj-door-line, .shh.shj .shj-door--primary:hover .shj-door-line, .shh.shj .shj-door--primary:focus-visible .shj-door-line { color: #e7f2ef; } .shh.shj .shj-door--primary:hover, .shh.shj .shj-door--primary:focus-visible { border-color: var(--shh-teal-deep); background: var(--shh-teal-deep); color: #fff; white-space: normal; } /* its cue ("Not sure? Start here") shows only where it fits on the label row (390 to 767, below) */ .shh.shj .shj-door-cue { display: none; } .shh.shj .shj-door.is-pending .shj-door-cue { visibility: hidden; } /* the note: any one, in any order. Copy colour, not muted: measured 23 Oct on the hero's sky and teal glows, muted 14px text fell to about 4.0:1 at 390 (right half) and 4.3:1 at 768; copy stays at 5.9:1 or more there. */ .shh.shj .shj-doors-note { margin-top: 12px; max-width: 600px; font: 400 14px/1.45 var(--shh-text); color: var(--shh-copy); } /* A2 (owner, 23 Oct): one gentle line to the Support page after the note, never above the doors (at 390 x 664 the list must still end above the pills, y 525). Support's glyph, small, in plum; the question in the note's colour; an in-sentence link in plum (the contract's text link, not a button and not the governed band, which stays Help's). One text line of height: below 480 the 4px gap keeps its words clear of the floating pills at 390 x 664 (their bottom, 577), 390 x 740 (their top, 601) and 375 x 667 (bottom 580); 8px from 480. The link's transparent ::after gives it a 44px tap height without adding height, and keeps the focus ring on the words. Where it wraps (320) the second line hangs under the words, not under the glyph. */ .shh.shj .shj-hero-talk { margin-top: 4px; max-width: 600px; padding-left: 22px; text-indent: -22px; font: 400 14px/1.45 var(--shh-text); color: var(--shh-copy); } .shh.shj .shj-hero-talk .shj-hero-talk-i { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--shh-plum); } .shh.shj .shj-hero-talk a { position: relative; background: transparent; color: var(--shh-plum); font-weight: 650; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(123, 36, 75, .4); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .16s ease, text-decoration-color .16s ease; } .shh.shj .shj-hero-talk a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -6px; bottom: -20px; } .shh.shj .shj-hero-talk a:hover, .shh.shj .shj-hero-talk a:focus-visible { background: transparent; color: var(--shh-plum-deep); white-space: nowrap; text-decoration-color: var(--shh-plum); } /* ---------- phones (§5.1.4): a closer lead, and the figures as one compact row from 360 to 479 (owner decision O4) ---------- */ @media (max-width: 479px) { .shh.shj .shh-hero-lead { margin-top: 18px; } } @media (min-width: 360px) and (max-width: 479px) { .shh.shj .shh-hero .shh-figs { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px 10px; margin-top: 22px; padding-top: 14px; } .shh.shj .shh-hero .shh-figs strong { font-size: 22px; } .shh.shj .shh-hero .shh-figs span { font-size: 12px; } .shh.shj .shh-hero .shh-figs .shh-dot { width: 7px; height: 7px; } } /* A1 cue on the primary door's label row, only where it costs no height. Measured 23 Oct: at 390 the text column is 260px and the label plus the cue need 249px; at 375 and 360 the label would wrap (+18px above doors 2 to 4), and the 2 x 2 doors from 768 have no room for it. The label never wraps here; the cue would give way with an ellipsis. */ @media (min-width: 390px) and (max-width: 767px) { .shh.shj .shj-door--primary .shj-door-text { grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; } .shh.shj .shj-door--primary .shj-door-label { grid-area: 1 / 1; white-space: nowrap; } .shh.shj .shj-door--primary .shj-door-line { grid-area: 2 / 1 / 3 / 3; } .shh.shj .shj-door--primary .shj-door-cue { display: block; grid-area: 1 / 2; align-self: center; justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 12px/1.15 var(--shh-text); color: #e7f2ef; } } /* ---------- 480 and up ---------- */ @media (min-width: 480px) { .shh.shj .shj-doors-nav { margin-top: 18px; } .shh.shj .shj-hero-talk { margin-top: 8px; } } /* ---------- 768 and up: 2 x 2, at most 600px wide below 1280 (keeps the 1024 launcher, x >= 683, clear) ---------- */ @media (min-width: 768px) { .shh.shj .shj-doors-nav { margin-top: 28px; max-width: 600px; } .shh.shj .shj-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .shh.shj .shj-door { grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: start; min-height: 92px; padding: 14px 12px 14px 14px; border-radius: 20px; } .shh.shj .shj-door > .shh-badge { width: 36px; height: 36px; } .shh.shj .shj-door > .shh-badge .shh-i { width: 20px; height: 20px; } .shh.shj .shj-door-label { font-size: 17px; line-height: 1.2; } .shh.shj .shj-door-line { font-size: 14px; line-height: 1.4; } .shh.shj .shj-door-go { width: 18px; height: 18px; margin-top: 9px; } /* the loader takes the badge's own 36px box at the top of the cell, where the badge was */ .shh.shj .shj-door > .shh-loader-wrap { align-self: start; width: 36px; height: 36px; } } @media (min-width: 1280px) { .shh.shj .shj-doors-nav { max-width: none; } /* A2 beside the ribbon: the copy column must stay no taller than the visual (715px at 1440), or the centred visual slides down and its workout card meets the floating "Ask a Helper" at 1440 x 900 (measured 23 Oct: +6.4px, 1px overlap). So the line's gap is 6px and the figures after it take 22px (the phones' step) instead of 36px: the copy is 712px and the visual keeps P1's position. Without the line (Support hidden) the figures keep 36px. */ .shh.shj .shj-hero-talk { margin-top: 6px; } .shh.shj .shh-hero .shj-hero-talk + .shh-figs { margin-top: 22px; } } /* ---------- entrance (§5.1.4): the approved rise of .shh-hero-copy > * also plays the new children, in order ---------- */ @media (prefers-reduced-motion: no-preference) { .shh.shj .shh-hero.is-playing .shj-doors-nav { animation-delay: .36s; } .shh.shj .shh-hero.is-playing .shj-doors-note { animation-delay: .4s; } .shh.shj .shh-hero.is-playing .shj-hero-talk { animation-delay: .42s; } }