/** * Treasora Academy — STANDARD sizing (phone + laptop) * Loads LAST in . Overrides all inline page styles. * Tokens: css/tokens.css (via site.css) */ /* ══════════════════════════════════════ PAGE — prevent horizontal overflow strip ══════════════════════════════════════ */ html, body { width: 100% !important; overflow-x: hidden !important; } /* ══════════════════════════════════════ NAV — active/current page state (every page) Ensures only the actual current page (marked with the .current class by js/nav.js) gets the gold/active treatment. Sign In previously had its own permanent gold styling via a page-local .signin class that applied regardless of which page was active, creating a "double active" look. That permanent treatment has been removed from the pages that had it; this single shared rule now provides the correct, consistent active-state highlight everywhere. Does not touch nav size, spacing, height, font-size, or the Join Academy Pro .pro CTA styling (untouched, separate selector). ══════════════════════════════════════ */ nav a.current { color: var(--gold2); border-color: var(--line); background: rgba(212, 175, 55, .08); } /* ══════════════════════════════════════ HEADER & LOGO — every page ══════════════════════════════════════ */ header { width: 100% !important; } .logo img { width: var(--treasora-logo) !important; max-width: 72vw !important; height: auto !important; display: block !important; margin: 0 auto !important; object-fit: contain !important; } .header-inner { width: 100% !important; padding: var(--treasora-header-pad-y) 0 !important; gap: var(--treasora-header-gap) !important; } nav, nav.site-nav { gap: 10px !important; } nav a, .nav-profile-btn { font-size: var(--treasora-nav); padding: var(--treasora-nav-pad-y) var(--treasora-nav-pad-x); min-height: var(--treasora-nav-height); } @media (max-width: 560px) { nav, nav.site-nav { gap: 11px !important; } } @media (min-width: 561px) { nav, nav.site-nav { gap: 12px !important; } } /* ══════════════════════════════════════ MOBILE HAMBURGER MENU (≤560px only) ══════════════════════════════════════ */ .nav-toggle { display: none; } @media (max-width: 560px) { .header-inner { position: relative !important; } .nav-toggle { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 5px !important; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 4px auto 2px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; cursor: pointer !important; } .nav-toggle-bar { display: block !important; width: 20px !important; height: 2px !important; background: var(--gold2, #ffe37a) !important; border-radius: 2px !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0 !important; } .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } nav#site-nav, nav.site-nav { display: none !important; width: 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } nav#site-nav.nav-open, nav.site-nav.nav-open { display: flex !important; } nav#site-nav a, nav.site-nav a { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } } /* ══════════════════════════════════════ FOOTER LANGUAGE SELECTOR ══════════════════════════════════════ */ .footer-lang-bar { display: block !important; border-top: 1px solid rgba(212, 175, 55, 0.28) !important; background: #040404 !important; padding: 28px 16px 24px !important; text-align: center !important; } .footer-lang-label { display: block !important; color: rgba(245, 241, 232, 0.72) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; margin-bottom: 12px !important; } .footer-lang-options { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } .footer-lang-btn { border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--muted) !important; font-size: 14px !important; font-family: inherit !important; cursor: pointer !important; padding: 8px 14px !important; min-height: 36px !important; width: 140px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .footer-lang-btn:hover, .footer-lang-btn.active { color: var(--gold2) !important; border-color: var(--line) !important; background: rgba(212, 175, 55, 0.08) !important; } .footer-lang-sep { color: rgba(255, 255, 255, 0.22) !important; font-size: 13px !important; user-select: none !important; } /* ══════════════════════════════════════ HEADLINES ══════════════════════════════════════ */ .hero h1, section.hero h1, .celebrate h1, .lesson-hero h1, .signup-wrap h1, .page-auth h1, .passport .hero h1 { font-size: var(--treasora-hero) !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; } .section-title, h2.section-title, .upsell h2, .cta h2, .section h2, .memory-grid + h2, .section > h2 { font-size: var(--treasora-section) !important; line-height: 1.1 !important; letter-spacing: -0.04em !important; } .newsletter .section-title, .pro-box .section-title { font-size: var(--treasora-section-sm) !important; } .legal-card h2, .dominar-intro h2 { font-size: var(--treasora-card-title) !important; } /* ══════════════════════════════════════ BODY TEXT ══════════════════════════════════════ */ .lead, .hero .lead, .hero p, .section-lead, .celebrate p, .lesson-hero p, .empty-state p, .legal-card p, .legal-card li, .dominar-intro p, .card p, .step p, .field .help, label { font-size: var(--treasora-body-sm) !important; line-height: 1.55 !important; } /* CONFIRMED STANDARDIZATION (audit-verified): these four properties were measured as byte-identical across all 14 pages with a page-local .kicker rule, at every breakpoint, with zero exceptions. Centralizing them here removes duplication without any rendered change. background, padding, gap, font-size, and margin-bottom are NOT included — those have confirmed real per-page differences and remain page-local by design. */ .kicker, .lesson-hero .kicker { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-size: var(--treasora-kicker) !important; } /* CONFIRMED STANDARDIZATION (audit-verified): .status-pill and .status-block-label are byte-identical across all 20 lesson pages with zero exceptions found. font-weight:800 was live and unmasked everywhere; simulation confirmed zero dimension/wrapping impact from correcting to the native 700. Only font-weight is centralized here — font-size, line-height, letter-spacing, color, padding, border, background, and .active-state styling all remain page-local and untouched. */ .status-pill, .status-block-label { font-weight: 700; } /* SITE-WIDE GOLD TYPOGRAPHY STANDARDIZATION (desktop only, ≥921px). Every kicker pill across the site (Home, Passport, Sign In/Up, Contact, Dashboard, lessons, etc.) now uses the same small-gold token + native weight instead of the brighter/heavier phone-era treatment, so no page reads crisper or blurrier than another. Some pages already carried an identical page-local override from earlier targeted passes (harmless duplication, same computed result — not a conflict). Phone/iPad are untouched; each page's own font-size, padding, and spacing are untouched. */ @media (min-width: 921px) { .kicker, .lesson-hero .kicker { font-weight: 700 !important; color: var(--gold2-sm) !important; } } /* ══════════════════════════════════════ CARDS, ICONS, STEPS ══════════════════════════════════════ */ .icon, .dominar-orb { width: var(--treasora-icon) !important; height: var(--treasora-icon) !important; font-size: var(--treasora-icon-glyph) !important; } .trophy { width: calc(var(--treasora-icon) + 16px) !important; height: calc(var(--treasora-icon) + 16px) !important; font-size: calc(var(--treasora-icon-glyph) + 4px) !important; } .avatar { width: var(--treasora-icon) !important; height: var(--treasora-icon) !important; font-size: var(--treasora-icon-glyph) !important; } .card h3, .card-head h3, .step h3, .memory-head h3, .price-card h3, .module-name { font-size: var(--treasora-card-title) !important; } .card a, .lesson-title, .lesson-row { font-size: var(--treasora-body-sm) !important; } .step strong { font-size: var(--treasora-step-num) !important; } .panel h2 { font-size: var(--treasora-panel-title) !important; } .panel p, .chat, .lock, .q-bubble, .dominar-bubble { font-size: var(--treasora-body-sm) !important; } .card, .step, .passport-card, .lesson-hero, .signup-card { padding: var(--treasora-card-pad) !important; min-height: 0 !important; } /* ══════════════════════════════════════ FEATURE CARDS (homepage .cards grids) ══════════════════════════════════════ */ .cards .card { padding: 15px 18px !important; } .cards .card-head { gap: 7px !important; margin-bottom: 7px !important; } .cards .icon { width: 74px !important; height: 74px !important; font-size: 35px !important; border-radius: 24px !important; } .cards .card h3, .cards .card-head h3 { font-size: 24px !important; line-height: 1.16 !important; } .cards .card p { font-size: 17px !important; line-height: 1.5 !important; } @media (max-width: 560px) { .cards .card { padding: 13px 16px !important; } .cards .icon { width: 86px !important; height: 86px !important; font-size: 41px !important; } .cards .card h3, .cards .card-head h3 { font-size: 25px !important; line-height: 1.16 !important; } .cards .card p { font-size: 18px !important; line-height: 1.62 !important; } } /* ══════════════════════════════════════ BUTTONS ══════════════════════════════════════ */ .btn, a.btn, button.btn, .btn-secondary, button.btn-secondary, a.btn-secondary { min-height: var(--treasora-btn-height) !important; font-size: var(--treasora-btn-text) !important; } /* Phone/iPad premium weight normalization (≤920px only), matching the same 800 weight already approved for laptop below. Not !important, by the same design as the laptop rule, so any higher-specificity page-local override (e.g. Home's href-scoped 4-button laptop rule) is unaffected — that rule only applies at ≥921px anyway. Does not touch min-height, font-size, padding, radius, colors, or borders. */ @media (max-width: 920px) { .btn, a.btn, button.btn, .btn-secondary, button.btn-secondary, a.btn-secondary { font-weight: 700; } } /* ══════════════════════════════════════ BUTTONS — LARGE FORM-SUBMIT VARIANT (.btn-lg) A distinct, intentional component: the single large, full-width, gold-gradient primary action used on auth/form pages (Sign In, Signup, Reset Password, Update Password, Contact, Settings). Each of those pages had defined this exact same visual pattern page-locally (56-58px height, 16px text, full-width) but the shared .btn rule above — which every page also loads — was silently forcing it down to the small 44px nav-style button at every breakpoint, including phone, since nothing on those pages' own rules used !important to hold their ground. This was a real rendered bug, not just an architecture cleanliness issue: these primary conversion buttons were rendering roughly 25% smaller and with notably smaller text than their own page's CSS intended. Giving this variant its own explicit, protected class (rather than relying on page-local rules to out-specificity the shared .btn forever) fixes that and makes it an intentional, documented, reusable variant instead of six independent page-local copies each one accident away from the same silent-shrink bug. Applies at every width by design — this is a full-width form-action button, not a desktop-only refinement. */ .btn-lg, a.btn-lg, button.btn-lg, .btn.btn-lg, a.btn.btn-lg, button.btn.btn-lg, .btn-secondary.btn-lg, a.btn-secondary.btn-lg, button.btn-secondary.btn-lg { width: 100% !important; min-height: 56px !important; padding: 15px 22px !important; font-size: 16px !important; font-weight: 700 !important; border-radius: 18px !important; } /* ══════════════════════════════════════ PRICING ══════════════════════════════════════ */ .price, .price-card .price, .price-tag { font-size: var(--treasora-price) !important; } .price-card .plan-price-box .pa { font-size: calc(var(--treasora-price) - 6px) !important; } li, .price-card li, .check-list .check, .learned-item, .feature-item { font-size: var(--treasora-body-sm) !important; } /* ══════════════════════════════════════ SPACING ══════════════════════════════════════ */ .hero, section.hero { padding-top: var(--treasora-hero-pad-y) !important; } main > section:not(.hero), section:not(.hero) { padding-top: var(--treasora-section-pad-y) !important; padding-bottom: var(--treasora-section-pad-y) !important; } /* ══════════════════════════════════════ PHONE — kill all old enlargement overrides ══════════════════════════════════════ */ @media (max-width: 560px) { .section-title, h2.section-title, .upsell h2, .cta h2 { font-size: var(--treasora-section) !important; } .icon, .dominar-orb { width: var(--treasora-icon) !important; height: var(--treasora-icon) !important; font-size: var(--treasora-icon-glyph) !important; } .logo img { width: var(--treasora-logo) !important; } .btn, a.btn, button.btn { min-height: var(--treasora-btn-height) !important; font-size: var(--treasora-btn-text) !important; } .card h2, .card h3 { font-size: var(--treasora-card-title) !important; } } @media (max-width: 640px) { .lesson-hero h1 { font-size: var(--treasora-hero) !important; } } /* ══════════════════════════════════════ IPAD PREMIUM WEIGHT NORMALIZATION (561px–920px only) Closes the gap where iPad inherited the large/tight H1 treatment from the unconditional HEADLINES rule above but not the laptop weight refinement below. Uses the exact same H1 selector list as the laptop block. Weight-only: font-size/line-height/letter-spacing are untouched here (they already resolve correctly at this width via the unconditional rule above). Does not affect phone (≤560px) or laptop (≥921px, which already had its own weight fix). ══════════════════════════════════════ */ @media (min-width: 561px) and (max-width: 920px) { .hero h1, section.hero h1, .celebrate h1, .lesson-hero h1, .signup-wrap h1, .page-auth h1, .passport .hero h1 { font-weight: 700 !important; } } /* ══════════════════════════════════════ LAPTOP/DESKTOP PREMIUM SCALE REFINEMENT (≥921px only) Approved site-wide follow-up to the Home-page button refinement. Uses the exact same H1 selector list already defined above in the HEADLINES section, so pages not in that list (Ask Dominar's .empty-state h1, the Toolkit calculator sub-pages) are correctly left untouched. Button rule uses the same selector family as the base .btn override above. min-height/font-size use !important to beat the token-driven base rule above; font-weight/padding are deliberately NOT !important so the already-approved, higher- specificity Home-page button overrides (scoped by href in index.html) continue to win unchanged for those four buttons. Does not touch tokens.css, phone/iPad sizing, radius, colors, gradients, or any other property. ══════════════════════════════════════ */ @media (min-width: 921px) { .hero h1, section.hero h1, .celebrate h1, .lesson-hero h1, .signup-wrap h1, .page-auth h1, .passport .hero h1 { font-size: 40px !important; font-weight: 700 !important; } .btn, a.btn, button.btn, .btn-secondary, a.btn-secondary, button.btn-secondary { min-height: 44px !important; font-size: 14px !important; font-weight: 700; padding: 10px 16px; } } /* ══════════════════════════════════════ LESSON "LEARN WITH DOMINAR" NOTE-BOX — ICON + TEXT LAYOUT ══════════════════════════════════════ The .icon span inside .note-box (used only on the 20 lesson pages' "Learn With Dominar" panel) was inheriting the shared .icon sizing rule above (38x38px, !important) meant for unrelated, larger card icons elsewhere on the site. The actual glyph is a fixed 16x16 SVG, so ~22px of that 38px box was invisible dead space sitting between the note-box's left padding and the paragraph text -- pushing the text further right than the visible icon+gap alone would justify, and reading as a left-heavy, unbalanced composition, especially on phone where the paragraph wraps to several lines against a narrower box. Overriding the icon's own box to match its glyph (16x16, same !important weight needed to beat the shared rule above) removes that dead space at the source. Icon+text are then a single flex row (already true via .note-box's own display:flex) with a compact, intentional 11px gap between them -- so they read as one visual group rather than an icon floating apart from its text. Horizontal padding is trimmed slightly (18px -> 16px) so that group sits centered in the box with even margins rather than the text crowding the right edge. display:block removes the SVG's default inline baseline offset so its top sits flush with the box top, matching .note-box's existing align-items:flex-start -- aligning the glyph with the paragraph's first line, not the vertical center of the whole multi-line block. Scoped to .note-box only, so no other icon or component on the site is affected. Since css/standard.css is shared by all 20 lesson pages and EN/ES render from the same markup, this single change stays in sync across all 40 page/language views. */ .note-box { gap: 11px; padding: 16px; } .note-box .icon { width: 16px !important; height: 16px !important; color: var(--muted); margin-top: 3px; } .note-box .icon svg { display: block; } /* ══════════════════════════════════════ LESSON TITLE SIZING — UNIFIED ACROSS LESSONS 1–20 (desktop only, ≥921px) ══════════════════════════════════════ Lesson 1 previously carried an approved page-local ~9% reduction on its H1 and section headings (36.4px / 29.12px vs the 40px / 32px used by Lessons 2-20's shared rules above). Per decision, Lesson 1's exact sizes are now the standard for all 20 lessons. These rules are placed after (and are therefore later in source order than) the general .lesson-hero h1 rule and the general .section h2 rule above, so with equal specificity/!important-on-!important they win for lesson pages specifically -- without editing those shared rules, which also apply to Home, Passport, Signup, and other non-lesson pages and must not change. Selectors: - .lesson-hero h1 also matches Home/Passport/Signup etc. in the general rule above, but IS the correct, page-scoped selector to re-target here since .lesson-hero only exists on lesson pages. - h2[data-i18n="lesson.whatYoullLearn"] and h2[data-i18n="lesson.learnWithDominar"] are used ONLY on the 20 lesson pages (verified), so this cannot affect any other page's section headings, which also use the shared .section h2 rule. Module/subtitle (17px), body text, buttons, spacing, icons, progress bar, status pills, and all tablet/phone sizing are untouched -- this block only sets font-size at ≥921px for these two selector groups. Lesson 1's own page-local override (#lesson-title, html body .section h2) still exists and still produces the identical 36.4px / 29.12px values, so it was left in place rather than edited -- redundant, not conflicting, and editing it was not necessary to match the approved size. Since css/standard.css is shared by all 20 lesson pages and EN/ES render from the same markup, this single change keeps all 40 page/language views in sync. */ @media (min-width: 921px) { .lesson-hero h1 { font-size: 36.4px !important; } h2[data-i18n="lesson.whatYoullLearn"], h2[data-i18n="lesson.learnWithDominar"] { font-size: 29.12px !important; } }