/* ========================================================== TheW5HGuru, Stylesheet Design: minimalist, privacy-first (Proton-inspired) Fonts: system stack only, no external font requests Themes: dark (default) / light / warm (reading comfort) Applied via [data-theme] on , set by js/main.js. Nothing about the theme choice is ever stored anywhere. ========================================================== */ :root, [data-theme="dark"] { --bg: #0B0C10; --bg-elevated: #14161C; --border: #24262E; --text: #F2F2F5; --text-muted: #9A9CA6; --accent: #8B7CF6; --accent-strong: #6D5AF0; --accent-soft: rgba(139, 124, 246, 0.12); --success: #3ECF8E; --header-bg-rgb: 11, 12, 16; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --max-width: 1120px; --radius: 10px; } [data-theme="light"] { --bg: #FFFFFF; --bg-elevated: #F5F5F7; --border: #E2E2E7; --text: #16171B; --text-muted: #5A5C66; --accent: #6D5AF0; --accent-strong: #5843E0; --accent-soft: rgba(109, 90, 240, 0.10); --success: #1E9E68; --header-bg-rgb: 255, 255, 255; } /* Warm reading-comfort mode: softer amber tones, no stark white or deep blue light, similar in spirit to warm e-reader lighting. This is a page-level tint only; it cannot change the device's actual display output the way OS-level Night Shift can. */ [data-theme="warm"] { --bg: #1C1712; --bg-elevated: #26201A; --border: #3A3226; --text: #F1E4D0; --text-muted: #B9A788; --accent: #E0A96D; --accent-strong: #C98F4E; --accent-soft: rgba(224, 169, 109, 0.14); --success: #9BBE7A; --header-bg-rgb: 28, 23, 18; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; transition: background-color 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-weight: 650; letter-spacing: -0.02em; margin: 0; } a { color: inherit; text-decoration: none; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #0B0C10; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(var(--header-bg-rgb), 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; gap: 16px; } .header-inner .brand { justify-self: start; } .header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; } .brand { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } .brand img { height: 32px; width: auto; display: block; } .site-nav { display: flex; gap: 28px; justify-self: center; } .site-nav a { font-size: 0.95rem; color: var(--text-muted); transition: color 0.15s ease; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--text); } .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); cursor: pointer; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; position: absolute; } .theme-toggle .icon-sun { opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; } .theme-toggle .icon-moon { opacity: 1; transform: scale(1); transition: opacity 0.15s ease, transform 0.15s ease; } .theme-toggle[data-mode="light"] .icon-sun { opacity: 1; transform: scale(1); } .theme-toggle[data-mode="light"] .icon-moon { opacity: 0; transform: scale(0.6); } .theme-toggle[data-mode="warm"] { color: var(--accent); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; } .nav-toggle span { width: 100%; height: 2px; background: var(--text); border-radius: 2px; } /* ---------- Social links (Contact section) ---------- */ .social-links { list-style: none; display: flex; gap: 12px; padding: 0; margin: 24px 0 0; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); transition: border-color 0.15s ease, transform 0.15s ease; } .social-links a:hover { border-color: var(--accent); transform: translateY(-1px); } .social-links svg { width: 22px; height: 22px; border-radius: 4px; } .social-links img { width: 22px; height: auto; display: block; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 0 0 88px; } .hero-banner { width: 100%; height: clamp(180px, 32vw, 340px); background-size: cover; background-position: center; border-bottom: 1px solid var(--border); } .hero-inner { max-width: 640px; padding-top: 64px; } .eyebrow { display: inline-block; font-size: 0.85rem; color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: 999px; margin: 0 0 20px; font-weight: 600; } .hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); line-height: 1.15; margin-bottom: 20px; } .hero .subhead { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 32px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-block; padding: 13px 24px; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .btn-primary { background: var(--accent-strong); color: #0B0C10; } .btn-primary:hover { background: var(--accent); transform: translateY(-1px); } .btn-ghost { border: 1px solid var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); transform: translateY(-1px); } /* ---------- Section shared ---------- */ section h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 12px; } .section-intro { color: var(--text-muted); max-width: 560px; margin: 0 0 40px; font-size: 1.02rem; } .about, .services, .learning, .privacy, .faq, .contact { padding: 80px 0; border-top: 1px solid var(--border); } /* ---------- W5H grid ---------- */ .w5h-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .w5h-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .w5h-letter { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: 14px; } .w5h-card h3 { font-size: 1.05rem; margin-bottom: 8px; } .w5h-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } /* ---------- Services grid ---------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .service-card { padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-elevated), rgba(20,22,28,0.4)); } .service-card h3 { font-size: 1.05rem; margin-bottom: 10px; } .service-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } /* ---------- Privacy list ---------- */ .privacy-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .privacy-list li { position: relative; padding-left: 28px; color: var(--text-muted); } .privacy-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--success); mask: none; } /* ---------- Contact ---------- */ .contact-details { display: flex; flex-direction: column; gap: 14px; font-size: 1.05rem; } .contact-details a { color: var(--accent); } .contact-details a:hover { text-decoration: underline; } .email-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; } /* Visually hidden, still announced by screen readers. The icon alone isn't enough context for assistive tech, and "Reveal email" already says "email" for sighted users, so this exists for accessibility only, never as visible text. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .email-icon { display: inline-flex; width: 1.1em; height: 1.1em; color: var(--accent); flex-shrink: 0; } .email-icon svg { width: 100%; height: 100%; } .email-content { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5em; } .email-challenge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5em; } .email-challenge-label { font: inherit; } .email-challenge-input { width: 3.5em; font: inherit; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; color: inherit; padding: 0.15em 0.4em; } .email-challenge-input::placeholder { color: inherit; opacity: 0.5; } .email-challenge-status { font-size: 0.85em; opacity: 0.8; } /* Honeypots (text and checkbox): invisible and unreachable for sighted keyboard/mouse users and screen readers, but still present in the DOM/markup for simple bots that auto-fill every input they find. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } button.email-reveal { font: inherit; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 4px; padding: 0.15em 0.7em; cursor: pointer; } button.email-reveal:hover { opacity: 0.85; } .email-address { font: inherit; color: var(--accent); user-select: all; } button.email-copy { font-size: 0.85em; color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 4px; padding: 0.15em 0.6em; cursor: pointer; } button.email-copy:hover { opacity: 0.85; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 32px 0; } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 0.9rem; } /* ---------- Shared list helpers ---------- */ .dot-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; } .dot-list li { position: relative; padding-left: 16px; color: var(--text-muted); font-size: 0.9rem; } .dot-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .check-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; } .check-list li { position: relative; padding-left: 26px; color: var(--text-muted); } .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; } .chip-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 10px; } .chip-list li { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font-size: 0.88rem; color: var(--text); } .about-note { color: var(--text-muted); font-size: 0.9rem; font-style: italic; margin: 14px 0 0; } .audience-groups { display: flex; flex-direction: column; gap: 18px; } .audience-group-title { font-size: 0.85rem; font-weight: 700; color: var(--accent); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em; } .audience-group .chip-list { margin: 0; } .section-intro.small { margin-bottom: 20px; font-size: 0.95rem; } /* ---------- About ---------- */ .about-paragraphs p { color: var(--text-muted); max-width: 700px; margin: 0 0 14px; } .about-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 36px; } .about-col h3 { font-size: 1.1rem; margin-bottom: 4px; } /* ---------- Learning & Growth ---------- */ .learning-block { margin-bottom: 32px; } .learning-block:last-child { margin-bottom: 0; } .learning-block h3 { font-size: 1.05rem; margin-bottom: 14px; } .panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; margin-bottom: 28px; } .learning-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .learning-columns .panel { margin-bottom: 0; } /* Career roadmap, numbered step grid */ .timeline-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .timeline-step { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 0.9rem; } .timeline-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 700; } .timeline-label { color: var(--text); } /* ---------- FAQ ---------- */ .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); padding: 4px 20px; } .faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; position: relative; padding-right: 28px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 14px; color: var(--accent); font-size: 1.2rem; } .faq-item[open] summary::after { content: "–"; } .faq-item p { color: var(--text-muted); margin: 0 0 18px; } /* ---------- Footer ---------- */ .site-footer { padding: 48px 0 32px; text-align: center; } .footer-top { margin-bottom: 20px; } .footer-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; } .footer-tagline { color: var(--accent); margin: 0 0 4px; font-size: 0.95rem; } .footer-motto { color: var(--text-muted); font-style: italic; margin: 0; font-size: 0.9rem; } .footer-values { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; } .footer-values li { color: var(--text-muted); font-size: 0.85rem; } .footer-bottom { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; } .footer-bottom p { margin: 0; } /* ---------- Tablet adjustments ---------- */ @media (max-width: 1024px) and (min-width: 721px) { .wrap { padding: 0 20px; } .about-columns, .learning-columns, .services-grid { gap: 20px; } .hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); } } /* ---------- Mobile nav ---------- */ @media (max-width: 720px) { .nav-toggle { display: flex; } .header-inner { gap: 10px; } .site-nav { position: absolute; top: 68px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; padding: 16px 24px; gap: 16px; margin: 0; display: none; } .site-nav.open { display: flex; } } /* ---------- Small phone fine-tuning ---------- */ @media (max-width: 380px) { .hero-ctas { flex-direction: column; align-items: stretch; } .btn { text-align: center; } .footer-bottom { flex-direction: column; align-items: center; } }