/* ============================================================================ Sprafo — Public Pages VISIBLE Design Upgrade ---------------------------------------------------------------------------- Concept: "Sprafo Premium Academic SaaS — Modern German Exam Platform" A confident, airy, layered design: deep indigo-blue brand, warm amber accent, soft slate canvas so white cards float, glowing CTAs, glassy hero, gradient- accented cards, refined navbar & footer, tasteful motion. SCOPE & SAFETY (unchanged from the safe foundation) - EVERY rule is scoped under `.sf-public`, added to only on public pages via $_seo_is_public. Student dashboard, Lernen/Prüfung and admin never carry this class, so they are 100% untouched — even shared classes like .section-title / .feature-icon. - Presentation only. No routes, forms, prices, payment/auth/DB logic touched. - Brand hues kept (blue #1d4ed8 / legacy #0056b3, amber #f59e0b) so the app stays on-brand while looking clearly more premium. - RTL-safe: logical properties; symmetric decorative glows. - Colors consume --sf-* tokens; a few vivid gradients use brand literals. ============================================================================ */ /* ── Page canvas: soft slate so white surfaces float ─────────────────────── */ .sf-public { background-color: var(--sf-bg); color: var(--sf-text); } /* ============================================================================ 1. PUBLIC HEADER / NAVIGATION ============================================================================ */ .sf-public .dl-navbar.bg-primary { background: linear-gradient(100deg, #0a3f8f 0%, var(--dl-primary, #0056b3) 45%, #1552a8 100%) !important; box-shadow: 0 6px 24px rgba(10, 35, 66, 0.20); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .sf-public .dl-navbar .navbar-brand { font-size: 1.35rem; letter-spacing: var(--sf-tracking-tight); } .sf-public .dl-navbar .navbar-nav .nav-link { font-weight: var(--sf-weight-medium); } /* Login (outline) — crisper */ .sf-public .dl-navbar .btn-outline-light { border-width: 1.5px; border-radius: var(--sf-radius-md); font-weight: var(--sf-weight-semibold); } /* Register (solid light) — make it the clear primary action */ .sf-public .dl-navbar .btn-light { border-radius: var(--sf-radius-md); font-weight: var(--sf-weight-bold); color: var(--dl-primary, #0056b3); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .sf-public .dl-navbar .btn-light:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24); } /* ============================================================================ 2. HERO ============================================================================ */ .sf-public .hero-section { background: radial-gradient(1100px 520px at 78% -10%, rgba(245, 158, 11, 0.20) 0%, transparent 55%), radial-gradient(900px 600px at 8% 12%, rgba(56, 130, 246, 0.35) 0%, transparent 55%), linear-gradient(135deg, #0a3f8f 0%, var(--dl-primary-dk, #003d80) 42%, #04294f 100%); padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 5.5rem); } /* Soft glow orb, RTL-symmetric */ .sf-public .hero-section::after { content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -10%; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, transparent 62%); pointer-events: none; z-index: 0; } .sf-public .hero-section > .container { z-index: 1; } .sf-public .hero-section h1 { font-size: clamp(2.35rem, 5.4vw, 3.85rem); font-weight: 800; letter-spacing: var(--sf-tracking-tight); line-height: 1.08; text-wrap: balance; } .sf-public .hero-section .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: var(--sf-leading-normal); opacity: 0.92; text-wrap: pretty; } /* Glassy premium badge with a live accent dot */ .sf-public .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--sf-radius-pill); padding: 0.5rem 1.1rem; font-weight: var(--sf-weight-semibold); letter-spacing: var(--sf-tracking-wide); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .sf-public .hero-badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sf-accent, #f59e0b); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); } /* Glassy exam card gets real depth */ .sf-public .hero-exam-card { border-radius: var(--sf-radius-xl) !important; box-shadow: 0 30px 60px rgba(3, 22, 46, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform var(--sf-duration-slow) var(--sf-ease-out); } .sf-public .hero-exam-card:hover { transform: translateY(-6px); } /* ============================================================================ 3. SECTION RHYTHM & HEADINGS ============================================================================ */ .sf-public main > section { position: relative; } /* Alternating section washes (Bootstrap utilities use !important, so match it) */ .sf-public .bg-light { background: linear-gradient(180deg, var(--sf-bg-subtle) 0%, var(--sf-surface) 100%) !important; } .sf-public .bg-primary-soft { background: linear-gradient(180deg, var(--sf-primary-tint) 0%, #e3edfb 100%) !important; } .sf-public .section-title { font-weight: 800; letter-spacing: var(--sf-tracking-tight); line-height: var(--sf-leading-tight); text-wrap: balance; } /* Accent underline under centered section headings */ .sf-public .text-center > .section-title::after { content: ""; display: block; width: 3.25rem; height: 4px; margin: 0.9rem auto 0; border-radius: var(--sf-radius-pill); background: linear-gradient(90deg, var(--dl-primary, #0056b3), var(--sf-accent, #f59e0b)); } .sf-public .section-subtitle { color: var(--sf-text-muted); font-size: var(--sf-text-lg); line-height: var(--sf-leading-snug); max-width: 60ch; margin-inline: auto; text-wrap: pretty; } .sf-public .text-lg-start > .section-subtitle { margin-inline: 0; } /* ============================================================================ 4. PREMIUM CARDS (value / feature / step / info / pricing teaser) ============================================================================ */ .sf-public .value-card, .sf-public .feature-card, .sf-public .step-card, .sf-public .info-card, .sf-public .pricing-teaser { position: relative; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-xl); box-shadow: var(--sf-shadow-sm); overflow: hidden; transition: transform var(--sf-duration-base) var(--sf-ease-out), box-shadow var(--sf-duration-base) var(--sf-ease-out), border-color var(--sf-duration-base) var(--sf-ease-out); } /* Gradient accent bar that grows on hover */ .sf-public .value-card::before, .sf-public .feature-card::before, .sf-public .step-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--dl-primary, #0056b3), var(--sf-accent, #f59e0b)); transform: scaleX(0); transform-origin: var(--sf-bar-origin, left); transition: transform var(--sf-duration-slow) var(--sf-ease-out); } .sf-public .value-card:hover::before, .sf-public .feature-card:hover::before, .sf-public .step-card:hover::before { transform: scaleX(1); } .sf-public .value-card:hover, .sf-public .feature-card:hover, .sf-public .step-card:hover, .sf-public .info-card:hover { transform: translateY(-6px); box-shadow: var(--sf-shadow-lg); border-color: var(--sf-border-strong); } .sf-public .info-card { background: var(--sf-surface); } /* Feature icon: bigger, softer, with a sheen */ .sf-public .feature-icon { width: 3.75rem; height: 3.75rem; border-radius: var(--sf-radius-lg); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16); position: relative; } .sf-public .feature-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 55%); pointer-events: none; } .sf-public .step-number { box-shadow: 0 10px 24px rgba(0, 61, 128, 0.30); } /* Pricing teaser: make it a hero-lite band */ .sf-public .pricing-teaser { background: linear-gradient(135deg, #ffffff 0%, var(--sf-primary-tint) 100%); border: 1px solid var(--sf-primary-soft); } /* ============================================================================ 5. TRUST RIBBON (value chips — replaces the old numeric stats band) ============================================================================ */ .sf-public .sf-trust-ribbon { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.75rem; } .sf-public .sf-trust-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.05rem; border-radius: var(--sf-radius-pill); background: var(--sf-surface); border: 1px solid var(--sf-border); box-shadow: var(--sf-shadow-xs); font-weight: var(--sf-weight-semibold); color: var(--sf-text); font-size: 0.95rem; } .sf-public .sf-trust-chip i { color: var(--dl-primary, #0056b3); font-size: 1.05rem; } /* ============================================================================ 6. BUTTONS — strong, glowing CTAs (brand hues kept) ============================================================================ */ .sf-public .btn { border-radius: var(--sf-radius-md); font-weight: var(--sf-weight-semibold); transition: transform var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-base) var(--sf-ease-out), filter var(--sf-duration-base) var(--sf-ease-standard); } .sf-public .btn-lg { border-radius: var(--sf-radius-lg); padding-inline: 1.6rem; } .sf-public .btn:hover { transform: translateY(-2px); } .sf-public .btn:active { transform: translateY(0); } .sf-public .btn:focus-visible { outline: none; box-shadow: var(--sf-shadow-focus); } /* Primary CTA — blue gradient + glow */ .sf-public .btn-primary { background: linear-gradient(135deg, var(--dl-primary, #0056b3), #0a3f8f); border: none; box-shadow: 0 10px 24px rgba(0, 61, 128, 0.32); } .sf-public .btn-primary:hover { box-shadow: 0 14px 30px rgba(0, 61, 128, 0.42); } /* Accent CTA — amber gradient + glow (hero / final CTA) */ .sf-public .btn-warning { background: linear-gradient(135deg, #ffc42e 0%, var(--sf-accent, #f59e0b) 100%); border: none; color: #3a2a06; box-shadow: 0 10px 26px rgba(245, 158, 11, 0.40); } .sf-public .btn-warning:hover { box-shadow: 0 14px 34px rgba(245, 158, 11, 0.52); } /* Outline buttons */ .sf-public .btn-outline-primary { border-width: 1.5px; } .sf-public .btn-outline-primary:hover { background: var(--dl-primary, #0056b3); box-shadow: 0 10px 24px rgba(0, 61, 128, 0.28); } .sf-public .btn-outline-light { border-width: 1.5px; backdrop-filter: blur(3px); } /* ============================================================================ 7. PRICING PAGE ============================================================================ */ /* ── Base card ───────────────────────────────────────────────────────────── Authoritative card rules for .sf-public scope. --bs-card-border-width is zeroed so Bootstrap's .card { border: var(...) } resolves to 0px and does not interfere with our explicit 2px border. */ .sf-public .pricing-card { position: relative; --bs-card-border-width: 0px; /* neutralise Bootstrap .card border */ border-radius: var(--sf-radius-xl); border: 2px solid var(--sf-border); /* Override .sf-plan-card--* { border-top: 3px !important } from sprafo-components.css. Our specificity (0,2,0) beats (0,1,0), so !important here wins. */ border-top-width: 2px !important; border-right-width: 2px !important; border-bottom-width: 2px !important; border-left-width: 2px !important; box-shadow: var(--sf-shadow-sm); overflow: visible; transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 220ms ease; } /* ── Permanent visible side accent (.pricing-card-accent real element) ────── A real child div instead of a ::before pseudo-element, so its background, width, and height are directly measurable by automated tests and DevTools. Subdued at rest; strengthens to full brand on hover. Covers full card height. RTL-correct: inset-inline-start places it on the right in Arabic. */ .sf-public .pricing-card-accent { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 3px 3px 0; background: rgba(0, 86, 179, 0.30); pointer-events: none; transition: background 220ms ease, width 220ms ease; z-index: 1; } /* ── Hover — fine pointer devices only ───────────────────────────────────── Standard card: 10 px lift + subtle scale. Featured card: 12 px lift + stronger scale. z-index ensures the hovering card floats above its neighbours. */ @media (hover: hover) and (pointer: fine) { /* Standard (non-featured) */ .sf-public .pricing-card:not(.featured):hover { transform: translateY(-10px) scale(1.015); z-index: 5; box-shadow: 0 28px 56px rgba(0, 61, 128, 0.26), 0 8px 16px rgba(0, 61, 128, 0.10); border-color: var(--dl-primary, #0056b3); } .sf-public .pricing-card:not(.featured):hover .pricing-card-accent { background: var(--dl-primary, #0056b3); width: 5px; } /* Featured */ .sf-public .pricing-card.featured:hover { transform: translateY(-12px) scale(1.03); z-index: 6; box-shadow: 0 40px 72px rgba(0, 61, 128, 0.38), 0 0 0 5px rgba(0, 86, 179, 0.16); border-color: var(--dl-primary, #0056b3); } .sf-public .pricing-card.featured:hover .pricing-card-accent { background: var(--dl-primary, #0056b3); width: 6px; opacity: 1; } } /* ── Focus-within: keyboard users see clear card elevation ───────────────── Moderate elevation without the large translateY. */ .sf-public .pricing-card:focus-within { box-shadow: 0 0 0 3px var(--dl-primary, #0056b3), 0 12px 32px rgba(0, 61, 128, 0.18); border-color: var(--dl-primary, #0056b3); } .sf-public .pricing-card:focus-within .pricing-card-accent { background: var(--dl-primary, #0056b3); } /* ── Touch and coarse-pointer: no sticky translated card ─────────────────── Explicit reset prevents legacy rules from leaving cards lifted after tap. */ @media (hover: none), (pointer: coarse) { .sf-public .pricing-card:hover, .sf-public .pricing-card.featured:hover { transform: none !important; z-index: auto !important; } } /* ── Featured / popular plan ─────────────────────────────────────────────── 2 px brand border, elevated resting shadow, tinted background. */ .sf-public .pricing-card.featured { border: 2px solid var(--dl-primary, #0056b3); box-shadow: 0 24px 50px rgba(0, 61, 128, 0.22), 0 0 0 4px rgba(0, 86, 179, 0.08); background: linear-gradient(180deg, #ffffff 0%, var(--sf-primary-tint) 100%); } /* Featured accent: full brand color at rest, 5px wide, full card height */ .sf-public .pricing-card.featured .pricing-card-accent { background: var(--dl-primary, #0056b3); width: 5px; opacity: 0.75; } /* Resting scale at ≥992 px so the featured card appears slightly elevated */ @media (min-width: 992px) { .sf-public .pricing-card.featured { transform: scale(1.02); } .sf-public .pricing-card.featured:focus-within { transform: scale(1.02) translateY(-4px); } } .sf-public .pricing-popular-ribbon { box-shadow: 0 8px 18px rgba(0, 61, 128, 0.28); letter-spacing: var(--sf-tracking-wide); } .sf-public .pricing-price-main { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: var(--sf-tracking-tight); } .sf-public .pricing-price-was { font-variant-numeric: tabular-nums; } .sf-public .pricing-savings-badge { font-weight: var(--sf-weight-bold); } /* Segmented duration/currency toggles */ .sf-public .pricing-duration-toggle, .sf-public .pricing-currency-toggle { border-radius: var(--sf-radius-pill); box-shadow: var(--sf-shadow-xs); } .sf-public .plan-cta { font-weight: var(--sf-weight-bold); } /* ============================================================================ 8. CHECKOUT ============================================================================ */ .sf-public .checkout-summary-card, .sf-public .checkout-payment-shell, .sf-public .checkout-reassure-card { border-radius: var(--sf-radius-lg); border: 1px solid var(--sf-border); box-shadow: var(--sf-shadow-sm); } .sf-public .checkout-summary-head { border-start-start-radius: var(--sf-radius-lg); border-start-end-radius: var(--sf-radius-lg); } .sf-public .checkout-reassure-card { background: linear-gradient(180deg, var(--sf-primary-tint), #ffffff); border-color: var(--sf-primary-soft); } .sf-public .checkout-method-card { border-radius: var(--sf-radius-md); border: 1.5px solid var(--sf-border); transition: border-color var(--sf-duration-base) var(--sf-ease-standard), box-shadow var(--sf-duration-base) var(--sf-ease-standard), background-color var(--sf-duration-base) var(--sf-ease-standard); } .sf-public .checkout-method-card:hover { border-color: var(--dl-primary, #0056b3); box-shadow: var(--sf-shadow-sm); } .sf-public .checkout-summary-total, .sf-public .checkout-mobile-summary-total { font-variant-numeric: tabular-nums; font-weight: 800; } /* ============================================================================ 9. AUTH PAGES (login / register / forgot / reset / verify) ============================================================================ */ .sf-public .auth-wrapper { min-height: calc(100dvh - var(--dl-navbar-h, 64px)); background: radial-gradient(700px 380px at 12% 8%, rgba(56, 130, 246, 0.14) 0%, transparent 60%), radial-gradient(620px 420px at 92% 100%, rgba(245, 158, 11, 0.12) 0%, transparent 60%), linear-gradient(160deg, #eef4ff 0%, var(--sf-bg) 65%); } .sf-public .auth-card { border-radius: var(--sf-radius-xl); box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06); } .sf-public .auth-card-header { background: linear-gradient(135deg, #0a3f8f 0%, var(--dl-primary, #0056b3) 55%, #1552a8 100%); } .sf-public .auth-logo-ring { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .sf-public .auth-label { color: var(--sf-text-muted); font-weight: var(--sf-weight-semibold); } .sf-public .auth-input { height: 2.9rem; border-radius: var(--sf-radius-md) !important; border-color: var(--sf-border-strong); transition: border-color var(--sf-duration-base) var(--sf-ease-standard), box-shadow var(--sf-duration-base) var(--sf-ease-standard); } .sf-public .auth-input:focus { border-color: var(--dl-primary, #0056b3); box-shadow: var(--sf-shadow-focus); } .sf-public .auth-submit-btn { height: 3rem; border-radius: var(--sf-radius-md); font-weight: var(--sf-weight-bold); background: linear-gradient(135deg, var(--dl-primary, #0056b3), #0a3f8f); border: none; box-shadow: 0 10px 24px rgba(0, 61, 128, 0.30); } .sf-public .auth-submit-btn:hover { box-shadow: 0 14px 30px rgba(0, 61, 128, 0.42); } .sf-public .auth-trust-item { color: var(--sf-text-subtle); } /* ============================================================================ 10. FAQ (home + contact/about) ============================================================================ */ .sf-public .home-faq .accordion-item { border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg) !important; margin-bottom: 0.85rem; box-shadow: var(--sf-shadow-xs); overflow: hidden; transition: box-shadow var(--sf-duration-base) var(--sf-ease-out); } .sf-public .home-faq .accordion-item:hover { box-shadow: var(--sf-shadow-sm); } .sf-public .home-faq .accordion-button { font-weight: var(--sf-weight-semibold); padding-block: 1.05rem; } .sf-public .home-faq .accordion-button:not(.collapsed) { background: var(--sf-primary-tint); color: var(--dl-primary-dk, #003d80); } .sf-public .home-faq .accordion-button:focus-visible { box-shadow: var(--sf-shadow-focus); } /* ============================================================================ 11. CTA SECTION & COMMUNITY ============================================================================ */ .sf-public .cta-section { position: relative; background: radial-gradient(800px 320px at 80% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 60%), linear-gradient(135deg, var(--dl-primary-dk, #003d80) 0%, var(--dl-primary, #0056b3) 100%); padding-block: clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; } .sf-public .cta-section h2 { font-weight: 800; letter-spacing: var(--sf-tracking-tight); } .sf-public .dl-community-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-xl); box-shadow: var(--sf-shadow-md); } /* ============================================================================ 12. FOOTER ============================================================================ */ .sf-public .dl-footer { border-top: 3px solid var(--sf-accent, #f59e0b); } .sf-public .dl-footer h6 { letter-spacing: var(--sf-tracking-wide); color: #fff; font-weight: var(--sf-weight-bold); } /* ============================================================================ 13. MOTION — tasteful hero entrance (one-time), reduced-motion safe ============================================================================ */ @keyframes sfRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .sf-public .hero-section .hero-badge, .sf-public .hero-section h1, .sf-public .hero-section .lead, .sf-public .hero-section .d-flex, .sf-public .hero-exam-card { animation: sfRise var(--sf-duration-slow) var(--sf-ease-out) both; } .sf-public .hero-section h1 { animation-delay: 60ms; } .sf-public .hero-section .lead { animation-delay: 120ms; } .sf-public .hero-section .d-flex { animation-delay: 180ms; } .sf-public .hero-exam-card { animation-delay: 160ms; } /* ============================================================================ 14. RTL — accent bar origin flips ============================================================================ */ body.rtl.sf-public .value-card::before, body.rtl.sf-public .feature-card::before, body.rtl.sf-public .step-card::before { --sf-bar-origin: right; } /* ============================================================================ 15. REDUCED MOTION ============================================================================ */ @media (prefers-reduced-motion: reduce) { .sf-public *, .sf-public *::before, .sf-public *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; } /* Strip transform; preserve shadow/border feedback so cards are not frozen */ .sf-public .value-card, .sf-public .feature-card, .sf-public .step-card, .sf-public .info-card, .sf-public .pricing-card, .sf-public .hero-exam-card, .sf-public .btn { transition: box-shadow var(--sf-duration-base) var(--sf-ease-standard), border-color var(--sf-duration-base) var(--sf-ease-standard); } .sf-public .value-card:hover, .sf-public .feature-card:hover, .sf-public .step-card:hover, .sf-public .info-card:hover, .sf-public .pricing-card:hover, .sf-public .pricing-card:not(.featured):hover, .sf-public .pricing-card.featured:hover, .sf-public .pricing-card:focus-within, .sf-public .hero-exam-card:hover, .sf-public .btn:hover { transform: none !important; } /* Featured card keeps its resting scale; no lift in reduced-motion mode */ @media (min-width: 992px) { .sf-public .pricing-card.featured, .sf-public .pricing-card.featured:hover, .sf-public .pricing-card.featured:focus-within { transform: scale(1.02) !important; } } @media (min-width: 992px) { .sf-public .pricing-card.featured:hover, .sf-public .pricing-card.featured:focus-within { transform: scale(1.02) !important; } } .sf-public .value-card:hover::before, .sf-public .feature-card:hover::before, .sf-public .step-card:hover::before { transform: scaleX(1); } }