/* ---------------- Round 16: Home tab ("หน้าแรก") ---------------- Styles for js/home.js's markup only. Reuses existing shared classes wherever the same visual already exists elsewhere (.content-title/.setup-banner/.chip/.tag/.course-card/.card-name/ .exam-grid from components.css/exam.css/auth.css, .an-summary-row/.an-summary-box/ .an-topic-box/.an-topic-weak/.an-desc-toggle from analytics.css, .btn/.btn-black/.btn-outline from auth.css) — this file only adds what's genuinely new: the hero, the guest feature cards, and the bookmark-preview rows. */ .home-hero-title{font-size:var(--fs-2xl); font-weight:800; line-height:1.25;} .home-hero-sub{font-size:var(--fs-sm); color:var(--muted); margin-top:8px; max-width:480px; line-height:1.6;} .home-hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;} .home-hero-actions .btn{width:auto; padding:11px 20px;} /* Inline embed of presentation.html (js/home.js's presentationSectionHtml()) — a bordered, rounded frame matching the app's existing card language (--line/--card/border-radius). presentation.html is a fixed ~desktop-sized deck: pixel-sized cards (the 210x270 booklet, 320px id-card, 300px quiz-mock), vw-based paddings, and position:fixed top/bottom chrome, with its own <860px breakpoint that stacks text above the visual for narrow screens. Giving the iframe a *percentage* width (the old `width:100%`) meant its effective viewport could land anywhere, including just under that 860px breakpoint — where the deck switches to the taller stacked layout but the fixed chrome doesn't leave room for it, so headlines/chips end up rendered under the visual card (see rekon-marketplace-fixed_4.zip screenshots). Rather than patching the deck's internal responsive rules for every width it might get embedded at, the iframe below is kept at its real fixed 1440x900 design size (so it always uses its normal desktop 2-column layout) and CSS-scaled down as a whole to fit the wrap — the same idea as scaling a video into a smaller player, so nothing inside the deck ever reflows or overlaps. js/home.js's wirePresentationFrameScale() sets --pres-scale = wrap width / 1440 on render and on resize (via ResizeObserver); the wrap's aspect-ratio keeps its box exactly matching that scaled-down size so there's no leftover gap under/beside it. */ .home-presentation-frame-wrap{ width:100%; max-width:1320px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); margin-top:4px; position:relative; aspect-ratio: 1440 / 900; } .home-presentation-frame{ display:block; border:none; width:1440px; height:900px; transform-origin: top left; transform: scale(var(--pres-scale, 0.5)); } /* ---------- Round 17: reference-inspired hero card ---------- Dark rounded "hero card" sitting at the top of the tab (not a full-bleed dark page — the rest of the tab stays the app's usual paper background), oversized low-opacity type bleeding off the edge behind the real heading, an eyebrow meta row, and a small cluster of tilted floating stat pills on wide screens — the visual language from the reference clip (big cutout headline type + dark card + floating circular badges), translated into this app's existing black/yellow palette instead of copying the reference's own red movie-poster branding. Every number shown (exam count) is real, computed in js/home.js at render time — never a placeholder stat standing in for one that doesn't exist yet. */ .home-hero-card{ position:relative; overflow:hidden; isolation:isolate; background:var(--black); color:#fff; border-radius:26px; padding:30px 26px 28px; margin-top:2px; } .home-hero-bgtext{ position:absolute; z-index:0; top:-0.22em; left:-0.03em; font-size:clamp(64px,16vw,150px); font-weight:800; letter-spacing:-0.02em; line-height:1; color:rgba(245,217,73,0.07); white-space:nowrap; pointer-events:none; user-select:none; } .home-hero-inner{position:relative; z-index:1; max-width:78%;} .home-hero-eyebrow-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.06em; color:#C7C5BB; text-transform:uppercase; } .home-hero-eyebrow-row .dot{width:4px; height:4px; border-radius:50%; background:var(--yellow); flex:none;} .home-hero-eyebrow-stat{display:inline-flex; align-items:center;} .home-hero-card .home-hero-title{color:#fff; margin-top:14px; font-size:clamp(22px,5vw,30px);} .home-hero-card .home-hero-sub{color:#B9B7AE; max-width:440px;} .home-hero-card .btn-outline{border-color:rgba(255,255,255,0.35); color:#fff;} .home-hero-card .btn-outline:active{background:rgba(255,255,255,0.08);} .home-hero-badges{ position:absolute; z-index:1; top:26px; right:26px; display:flex; flex-direction:column; align-items:flex-end; gap:10px; } .home-hero-badge-pill{ background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); backdrop-filter:blur(2px); border-radius:999px; padding:8px 14px; font-size:var(--fs-2xs); font-weight:700; color:#fff; display:flex; align-items:center; white-space:nowrap; } .home-hero-badge-1{transform:rotate(-3deg);} .home-hero-badge-2{transform:rotate(2deg); margin-right:18px;} .home-hero-badge-3{transform:rotate(-2deg);} @media (max-width:680px){ .home-hero-badges{display:none;} .home-hero-inner{max-width:100%;} } /* Small "01" index chip in front of a section title (js/home.js's sectionTitle()) — a light nod to the reference's numbered section markers, without turning every other tab's shared .content-title into something that also expects one (this only applies inside #home-panel). */ .home-section-index{ display:inline-block; font-size:var(--fs-2xs); font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; margin-right:8px; letter-spacing:0.04em; } .home-feature-grid{margin-top:20px;} .home-feature-card{cursor:default;} .home-feature-card:active{transform:none;} /* .course-card's tap-scale is for clickable cards — these aren't */ .home-feature-icon{width:38px; height:38px; border-radius:11px; background:rgba(18,18,18,0.06); display:flex; align-items:center; justify-content:center; margin-bottom:2px;} .home-feature-desc{font-size:var(--fs-xs); color:var(--muted); line-height:1.55;} .home-bookmark-list{display:flex; flex-direction:column; gap:2px; margin-top:8px; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden;} .home-bookmark-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; cursor:pointer;} .home-bookmark-row + .home-bookmark-row{border-top:1px dashed var(--line);} .home-bookmark-title{font-size:var(--fs-sm); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* The .grid base rule (components.css) carries its own `padding:0 20px`, meant for a grid sitting directly at the top level of .z-results. Nested one level deeper inside #home-panel's own .account-wrap (which already strips its own left/right padding to line up with the rest of that panel's content — see components.css's `.z-results .account-wrap` rule), that same 20px would double up as an extra indent that nothing else on this tab has. Zero it out here instead of touching the shared .grid rule everyone else still relies on. */ #home-panel .grid{padding:0;} /* Mobile/topbar "go home" link (index.html's #brand-home-link, wired in js/ui.js's initTabNav()) — just resets it back to looking like the plain badge+label it always was before it became a