/* ── SpaceSquare Design System ── */ @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Dark theme (default) */ --bg: #080810; --bg2: #0f0f18; --bg3: #16161f; --surface: #1c1c27; --surface2: #22222f; --border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.10); --accent: #7c6eff; --accent-h: #9585ff; --accent2: #4fd1c5; --red: #ff5f6d; --text: #e4e4f0; --muted: #66667a; --dim: #36364a; --noise-opacity: 0.03; --ambient-glow: rgba(124,110,255,0.07); --nav-bg: rgba(8,8,16,0.75); --menu-bg: rgba(12,12,20,0.96); --font-h: 'Big Shoulders Display', 'Syne', sans-serif; --font-b: 'DM Sans', sans-serif; --transition: 0.2s ease; color-scheme: dark; /* ── GOLDEN-RATIO DESIGN TOKENS (φ = 1.618, √φ = 1.272) ── Anchored at base 1rem (root = 15px). Spacing steps multiply by φ; type steps multiply by √φ, so every TWO type steps equal one golden step (√φ × √φ = φ) — the whole scale is mathematically locked to 1.618. */ /* Type scale — ratio √φ (×1.272) */ --fs-1: 0.618rem; /* micro labels / dots */ --fs-2: 0.786rem; /* captions, small UI, nav links */ --fs-3: 1.000rem; /* body */ --fs-4: 1.272rem; /* lead text / card titles */ --fs-5: 1.618rem; /* h3 / modal title */ --fs-6: 2.058rem; /* h2 */ --fs-7: 2.618rem; /* section title / h1 */ --fs-8: 4.236rem; /* hero display (via clamp) */ /* Spacing scale — ratio φ (×1.618) */ --sp-1: 0.382rem; --sp-2: 0.618rem; --sp-3: 1.000rem; --sp-4: 1.618rem; --sp-5: 2.618rem; --sp-6: 4.236rem; --sp-7: 6.854rem; /* φ-derived geometry */ --radius: 0.618rem; /* ≈ 9.3px */ --radius-lg: 1.000rem; /* = 15px (ratio φ vs --radius) */ --lh-body: 1.618; /* golden body line-height */ --lh-tight: 1.05; /* display headings */ --nav-h: 4.236rem; /* = --sp-6 (≈ 63.5px) */ --max-w: 1080px; /* content column */ } /* Light theme — toggled via */ [data-theme="light"] { --bg: #fafbff; --bg2: #ffffff; --bg3: #eef0f8; --surface: #ffffff; --surface2: #f3f4fb; --border: rgba(15,15,30,0.10); --border2: rgba(15,15,30,0.22); --accent: #5a4ddb; --accent-h: #7c6eff; --accent2: #1aa79a; --red: #e23a4a; --text: #14142b; --muted: #424256; --dim: #b0b0c4; --noise-opacity: 0.018; --ambient-glow: rgba(90,77,219,0.10); --nav-bg: rgba(255,255,255,0.82); --menu-bg: rgba(255,255,255,0.96); color-scheme: light; } /* P0 fixes — light mode contrast on nav + ghost buttons */ [data-theme="light"] .nav-links a { color: #2e2e44; } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active { color: var(--accent); background: rgba(90,77,219,0.08); } [data-theme="light"] .btn-ghost { color: var(--text); border-color: rgba(15,15,30,0.32); } [data-theme="light"] .btn-ghost:hover { background: var(--surface2); border-color: rgba(15,15,30,0.55); } [data-theme="light"] .theme-toggle { color: #424256; } [data-theme="light"] .lang-btn { color: #424256; } /* ──────────────────────────────────────────────── GOLD & SILVER — Dark luxe () Warm near-black base · metallic gold accent · silver text ──────────────────────────────────────────────── */ [data-theme="gold-dark"] { --bg: #0c0b08; --bg2: #14110b; --bg3: #1b170f; --surface: #221d13; --surface2: #2a2417; --border: rgba(212,175,55,0.12); --border2: rgba(212,175,55,0.24); --accent: #d4af37; /* gold */ --accent-h: #e6c75a; /* lighter gold */ --accent2: #c5c6cc; /* silver */ --red: #e0768a; --text: #ece7da; /* warm silver-white */ --muted: #9c9484; --dim: #4a4434; --noise-opacity: 0.025; --ambient-glow: rgba(212,175,55,0.08); --nav-bg: rgba(12,11,8,0.78); --menu-bg: rgba(20,17,11,0.96); color-scheme: dark; } [data-theme="gold-dark"] .nav-links a { color: #b8b0a0; } [data-theme="gold-dark"] .nav-links a:hover, [data-theme="gold-dark"] .nav-links a.active { color: var(--accent); background: rgba(212,175,55,0.08); } [data-theme="gold-dark"] .btn-ghost { color: var(--text); border-color: rgba(212,175,55,0.30); } [data-theme="gold-dark"] .btn-ghost:hover { background: var(--surface); border-color: rgba(212,175,55,0.55); } [data-theme="gold-dark"] .btn-primary { color: #1a1509; } /* ──────────────────────────────────────────────── GOLD & SILVER — Light luxe () Ivory base · brushed silver surfaces · deep gold accent ──────────────────────────────────────────────── */ [data-theme="gold-light"] { --bg: #f7f5ef; --bg2: #ffffff; --bg3: #efebe0; --surface: #ffffff; --surface2: #f3efe4; --border: rgba(140,115,40,0.18); --border2: rgba(140,115,40,0.32); --accent: #9a7d1e; /* deep gold (contrast-safe on ivory) */ --accent-h: #b8962c; --accent2: #8a8a92; /* silver-gray */ --red: #c0392b; --text: #2a2418; /* warm near-black */ --muted: #6b6451; --dim: #c4bca6; --noise-opacity: 0.015; --ambient-glow: rgba(154,125,30,0.10); --nav-bg: rgba(247,245,239,0.82); --menu-bg: rgba(255,255,255,0.96); color-scheme: light; } [data-theme="gold-light"] .nav-links a { color: #4a4332; } [data-theme="gold-light"] .nav-links a:hover, [data-theme="gold-light"] .nav-links a.active { color: var(--accent); background: rgba(154,125,30,0.08); } [data-theme="gold-light"] .btn-ghost { color: var(--text); border-color: rgba(140,115,40,0.34); } [data-theme="gold-light"] .btn-ghost:hover { background: var(--surface2); border-color: rgba(140,115,40,0.58); } [data-theme="gold-light"] .btn-primary { color: #fff; } [data-theme="gold-light"] .theme-toggle, [data-theme="gold-light"] .lang-btn, [data-theme="gold-light"] .glass-toggle, [data-theme="gold-light"] .settings-toggle { color: #6b6451; } /* Gold themes — recolour the animated headline gradient to gold → silver → gold */ [data-theme="gold-dark"] .accent-gradient, [data-theme="gold-dark"] .hero h1 .accent, [data-theme="gold-light"] .accent-gradient, [data-theme="gold-light"] .hero h1 .accent { background: linear-gradient(110deg, var(--accent) 0%, var(--accent2) 38%, var(--accent-h) 62%, var(--accent) 100%); background-size: 250% 100%; filter: drop-shadow(0 0 26px rgba(212,175,55,0.30)); } /* P3 — light-mode hero polish: subtle purple spotlight + retuned drop-shadow */ [data-theme="light"] .hero { background: radial-gradient( ellipse 70% 50% at 50% 35%, rgba(90,77,219,0.09) 0%, rgba(26,167,154,0.05) 45%, transparent 75% ); } [data-theme="light"] .hero h1 .accent { filter: drop-shadow(0 4px 22px rgba(90,77,219,0.28)) drop-shadow(0 0 1px rgba(20,20,43,0.18)); } [data-theme="light"] .hero-greeting, [data-theme="light"] .hero-sub { color: #3a3a4e; } /* Smooth color transition when theme switches */ html, body, .nav, .card, .nav-card, .platform-card, .platform-header, .platform-body, .modal-box, .post-page, .sub-hero, .posts-body, .post-body, .code-card, .stat-card, .qr-img, .modal-input, .btn, .section, .comm-body, .comm-hero, .nav-menu, .lang-btn, .empty-state, .post-list, .post-item, .post-tag, .nav-links a { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } html { scroll-behavior: smooth; font-size: 15px; } body { background: var(--bg); color: var(--text); font-family: var(--font-b); font-weight: 400; line-height: var(--lh-body); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Gradient accent for display text — purple → teal, animated */ .accent-gradient, .hero h1 .accent { background: linear-gradient(110deg, var(--accent) 0%, var(--accent2) 35%, var(--accent-h) 65%, var(--accent) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 28px rgba(124,110,255,0.35)); animation: gradient-shift 8s ease-in-out infinite; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); z-index: 300; transition: width 0.08s linear; box-shadow: 0 0 12px rgba(124,110,255,0.55); } /* noise grain */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--noise-opacity); } /* ambient glow */ body::after { content: ''; position: fixed; z-index: 0; pointer-events: none; top: -40vh; left: 50%; transform: translateX(-50%); width: 90vw; height: 90vh; background: radial-gradient(ellipse, var(--ambient-glow) 0%, transparent 65%); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 99px; } /* ── NAV ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-5); background: var(--nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-h); font-weight: 900; font-size: 1.3rem; letter-spacing: -0.005em; text-transform: uppercase; color: var(--text); text-decoration: none; flex-shrink: 0; line-height: 1; } .nav-logo .accent { color: var(--accent); } .nav-links { display: flex; gap: 0.25rem; list-style: none; } .nav-links a { color: var(--muted); text-decoration: none; font-size: var(--fs-2); letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; transition: color var(--transition), background var(--transition); display: flex; align-items: center; gap: 5px; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface); } .nav-links a.active { color: var(--accent); } .nav-badge { font-size: 0.62rem; background: rgba(255,95,109,0.15); color: var(--red); border: 1px solid rgba(255,95,109,0.25); padding: 1px 6px; border-radius: 99px; letter-spacing: 0.03em; text-transform: none; font-weight: 400; } .nav-right { display: flex; align-items: center; gap: var(--sp-2); } .nav-menu { display: flex; align-items: center; gap: var(--sp-4); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 0; width: 32px; height: 32px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav.mobile-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.mobile-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.mobile-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .lang-switcher { display: flex; gap: 3px; } .lang-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: var(--font-b); font-size: 0.72rem; padding: 3px 8px; border-radius: 5px; cursor: pointer; transition: all var(--transition); letter-spacing: 0.02em; } .lang-btn:hover { border-color: var(--accent); color: var(--accent); } .lang-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(124,110,255,0.1); } .theme-toggle { background: none; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: all var(--transition); position: relative; overflow: hidden; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(20deg) scale(1.08); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; } .theme-toggle .icon-sun { transform: translateY(150%); opacity: 0; } .theme-toggle .icon-moon { transform: translateY(0); opacity: 1; } [data-theme="light"] .theme-toggle .icon-sun { transform: translateY(0); opacity: 1; } [data-theme="light"] .theme-toggle .icon-moon { transform: translateY(-150%); opacity: 0; } /* Liquid-glass toggle button — mirrors .theme-toggle */ .glass-toggle { background: none; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: all var(--transition); } .glass-toggle:hover { border-color: var(--accent2); color: var(--accent2); transform: scale(1.08); } .glass-toggle.active { border-color: var(--accent2); background: rgba(79,209,197,0.14); box-shadow: 0 0 0 1px rgba(79,209,197,0.25), 0 0 12px rgba(79,209,197,0.25); } [data-theme="light"] .glass-toggle { color: #424256; } /* Settings (⚙️) nav button — mirrors .theme-toggle */ .settings-toggle { background: none; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; transition: all var(--transition); } .settings-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(45deg) scale(1.08); } [data-theme="light"] .settings-toggle { color: #424256; } /* ── PAGE WRAPPER ── */ .page { position: relative; z-index: 1; padding-top: var(--nav-h); min-height: 100vh; } /* ── SECTION ── */ .section { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-6) var(--sp-4); } .section-label { font-size: var(--fs-2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); font-weight: 500; } .section-title { font-family: var(--font-h); font-weight: 900; font-size: clamp(var(--fs-6), 4vw, var(--fs-7)); letter-spacing: -0.015em; line-height: var(--lh-tight); margin-bottom: var(--sp-4); } .section-desc { color: var(--muted); font-size: var(--fs-3); max-width: 560px; margin-bottom: var(--sp-5); line-height: var(--lh-body); } /* ── DIVIDER ── */ hr.divider { border: none; border-top: 1px solid var(--border); margin: 0 var(--sp-4); } /* ── CARDS GRID ── */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; gap: 1px; background: var(--border); } .card { background: var(--bg2); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); transition: background var(--transition); cursor: pointer; text-decoration: none; color: inherit; } .card:hover { background: var(--bg3); } .card-icon { font-size: var(--fs-5); line-height: 1; } .card-title { font-family: var(--font-h); font-weight: 800; font-size: var(--fs-4); color: var(--text); letter-spacing: -0.005em; line-height: 1.1; } .card-desc { font-size: var(--fs-2); color: var(--muted); line-height: var(--lh-body); } .card-arrow { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-2); color: var(--accent); } /* ── BUTTON ── */ .btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-b); font-size: var(--fs-2); font-weight: 500; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all var(--transition); letter-spacing: 0.01em; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border2); } .btn-ghost:hover { background: var(--surface); border-color: var(--dim); } .btn-teal { background: rgba(79,209,197,0.12); color: var(--accent2); border-color: rgba(79,209,197,0.25); } .btn-teal:hover { background: rgba(79,209,197,0.2); } /* ── TAG / BADGE ── */ .tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border2); background: var(--surface); color: var(--muted); font-size: var(--fs-2); letter-spacing: 0.07em; text-transform: uppercase; padding: var(--sp-1) var(--sp-3); border-radius: 99px; } .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); animation: pulse 2.2s ease infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.35; transform:scale(0.65); } } /* ── ANIMATIONS ── */ .fade-up { opacity: 0; transform: translateY(16px); animation: fadeUp 0.55s ease forwards; } .fade-up-1 { animation-delay: 0.08s; } .fade-up-2 { animation-delay: 0.16s; } .fade-up-3 { animation-delay: 0.24s; } .fade-up-4 { animation-delay: 0.32s; } @keyframes fadeUp { to { opacity:1; transform:translateY(0); } } /* ── FOOTER ── */ footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--fs-2); flex-wrap: wrap; gap: var(--sp-2); } .footer-links { display: flex; gap: var(--sp-4); } .footer-links a { color: var(--muted); text-decoration: none; transition: color var(--transition); } .footer-links a:hover { color: var(--text); } /* ── GRID OVERLAY ── */ .grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black, transparent); } /* ── LOCK ICON (resume) ── */ .lock-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--red); background: rgba(255,95,109,0.1); border: 1px solid rgba(255,95,109,0.2); padding: 2px 8px; border-radius: 99px; } /* ── PASSWORD MODAL ── */ .modal-overlay { position: fixed; inset: 0; z-index: 500; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-box { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius-lg); padding: var(--sp-5); width: 360px; max-width: 90vw; display: flex; flex-direction: column; gap: var(--sp-3); transform: translateY(10px); transition: transform 0.2s; } .modal-overlay.open .modal-box { transform: translateY(0); } .modal-box h3 { font-family: var(--font-h); font-weight: 800; font-size: var(--fs-5); letter-spacing: -0.005em; } .modal-box p { color: var(--muted); font-size: var(--fs-2); } .modal-input { background: var(--surface); border: 1px solid var(--border2); color: var(--text); font-family: var(--font-b); font-size: var(--fs-3); padding: 10px 14px; border-radius: var(--radius); width: 100%; outline: none; transition: border-color var(--transition); } .modal-input:focus { border-color: var(--accent); } .modal-error { color: var(--red); font-size: 0.8rem; display: none; } .modal-error.show { display: block; } .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; } /* ─────────────────────────────────────────── MOTION — micro-interactions ─────────────────────────────────────────── */ /* Card hover lift + glow */ .card, .nav-card, .platform-card, .sub-page-card, .code-card, .stat-card, .post-item { transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease; will-change: transform; } .card:hover, .nav-card:hover, .platform-card:hover, .sub-page-card:hover, .post-item:hover, .code-card:hover, .stat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -18px rgba(124,110,255,0.45), 0 0 0 1px rgba(124,110,255,0.15); } /* Button hover sheen */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; } .btn:hover::after { transform: translateX(120%); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } /* Nav link underline grow on hover */ .nav-links a { position: relative; } .nav-links a::before { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1.5px; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-links a:hover::before, .nav-links a.active::before { transform: scaleX(1); } /* Tag dot pulse */ .tag-dot { animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,209,197,0.7); } 50% { box-shadow: 0 0 0 6px rgba(79,209,197,0); } } /* Reduced motion — respect OS setting */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .scroll-progress { transition: none; } } /* ─────────────────────────────────────────── RESPONSIVE — Mobile · Tablet · Desktop Breakpoints: ≤640 mobile · 641–1024 tablet · >1024 desktop ─────────────────────────────────────────── */ /* Tablet */ @media (max-width: 1024px) { .nav { padding: 0 1.5rem; } .nav-menu { gap: 1rem; } .nav-links { gap: 0.1rem; } .nav-links a { font-size: 0.74rem; padding: 6px 8px; letter-spacing: 0.04em; } .section { padding: 4rem 1.75rem; } } /* Mobile */ @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-menu { position: absolute; top: var(--nav-h); right: 1rem; background: var(--menu-bg); backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem; flex-direction: column; align-items: stretch; gap: 0.5rem; min-width: 220px; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 12px 36px rgba(0,0,0,0.35); } .nav.mobile-open .nav-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-links { flex-direction: column; gap: 2px; width: 100%; } .nav-links a { font-size: 0.85rem; padding: 9px 12px; width: 100%; border-radius: 8px; text-transform: none; letter-spacing: 0.01em; } .nav-right { border-top: 1px solid var(--border); padding-top: 0.65rem; margin-top: 0.25rem; justify-content: center; } .lang-switcher { width: 100%; justify-content: center; } } /* Small mobile */ @media (max-width: 640px) { .nav { padding: 0 1.1rem; } .nav-logo { font-size: 0.95rem; } .section { padding: 3.5rem 1.25rem; } .section-title { font-size: clamp(1.4rem, 6.5vw, 1.9rem); letter-spacing: -0.02em; overflow-wrap: break-word; word-break: break-word; } .section-desc { font-size: 0.9rem; } .btn { font-size: 0.82rem; padding: 8px 14px; } .modal-box { padding: 1.5rem; } .modal-box h3 { font-size: 1rem; } /* Catch-all page-wrapper padding shrink (overrides per-page CSS) */ body .sub-hero, body .comm-hero, body .post-page { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 4rem; } body .posts-body, body .comm-body, body .post-body { padding-left: 1.25rem; padding-right: 1.25rem; } body .post-page { padding-bottom: 4rem; } body .post-title { font-size: 1.4rem; line-height: 1.25; } } /* ────────────────────────────────────────────── LIQUID GLASS — opt-in effect () Off by default; activated only via the 🫧 nav toggle. Frosted translucent surfaces with a soft top sheen. ────────────────────────────────────────────── */ :root { --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); --glass-fill: rgba(28,28,39,0.45); --glass-border: rgba(255,255,255,0.16); --glass-blur: 16px; --glass-shadow: 0 8px 32px rgba(0,0,0,0.30); } [data-theme="light"] { --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18)); --glass-fill: rgba(255,255,255,0.42); --glass-border: rgba(15,15,30,0.12); --glass-shadow: 0 8px 32px rgba(60,60,110,0.14); } /* Surfaces that become frosted glass when the effect is on */ [data-glass="on"] .card, [data-glass="on"] .nav-card, [data-glass="on"] .platform-card, [data-glass="on"] .platform-header, [data-glass="on"] .platform-body, [data-glass="on"] .prog-card, [data-glass="on"] .product-card, [data-glass="on"] .modal-box, [data-glass="on"] .code-card, [data-glass="on"] .stat-card, [data-glass="on"] .qr-img, [data-glass="on"] .post-item, [data-glass="on"] .post-tag, [data-glass="on"] .sub-hero, [data-glass="on"] .posts-body, [data-glass="on"] .post-body { background: var(--glass-bg), var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* Nav bar gets a deeper frost */ [data-glass="on"] .nav { background: var(--glass-bg), var(--glass-fill); -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(180%); backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(180%); } /* Mobile dropdown menu also frosts so links stay readable */ @media (max-width: 768px) { [data-glass="on"] .nav.mobile-open .nav-menu { background: var(--glass-bg), var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); } } /* Graceful fallback: browsers without backdrop-filter get a solid-ish tint */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-glass="on"] .card, [data-glass="on"] .nav-card, [data-glass="on"] .platform-card, [data-glass="on"] .platform-header, [data-glass="on"] .platform-body, [data-glass="on"] .prog-card, [data-glass="on"] .product-card, [data-glass="on"] .modal-box, [data-glass="on"] .code-card, [data-glass="on"] .stat-card, [data-glass="on"] .post-item, [data-glass="on"] .sub-hero, [data-glass="on"] .posts-body, [data-glass="on"] .post-body, [data-glass="on"] .nav { background: var(--surface); } } /* ────────────────────────────────────────────── SETTINGS MODAL — controls (built in components.js) Reuses .modal-overlay / .modal-box; adds a wider box + control rows. ────────────────────────────────────────────── */ .settings-modal .modal-box { width: 420px; gap: var(--sp-4); text-align: left; } .settings-head { display: flex; flex-direction: column; gap: var(--sp-1); } .settings-sub { color: var(--muted); font-size: var(--fs-2); } .settings-group { display: flex; flex-direction: column; gap: var(--sp-2); } .settings-label { font-size: var(--fs-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; } /* Segmented control (theme + language pickers) */ .seg { display: flex; flex-wrap: wrap; gap: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-1); } .seg-btn { flex: 1 1 auto; min-width: 64px; background: none; border: 1px solid transparent; color: var(--muted); font-family: var(--font-b); font-size: var(--fs-2); padding: var(--sp-1) var(--sp-2); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: all var(--transition); white-space: nowrap; } .seg-btn:hover { color: var(--text); } .seg-btn.active { color: var(--accent); background: var(--bg2); border-color: var(--border2); } /* Switch rows (glass + reduce-motion) */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .settings-row .settings-row-text { display: flex; flex-direction: column; gap: 2px; } .settings-row .settings-row-title { font-size: var(--fs-3); color: var(--text); } .settings-row .settings-row-desc { font-size: var(--fs-1); color: var(--muted); } .switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border2); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform var(--transition), background var(--transition); } .switch.on { background: rgba(124,110,255,0.20); border-color: var(--accent); } .switch.on::after { transform: translateX(20px); background: var(--accent); } .settings-reset { align-self: flex-start; background: none; border: 1px solid var(--border2); color: var(--muted); font-family: var(--font-b); font-size: var(--fs-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); } .settings-reset:hover { color: var(--red); border-color: var(--red); } /* ────────────────────────────────────────────── REDUCE MOTION — opt-in UI parameter () Damps animations/transitions site-wide when the user enables it in Settings. Independent of the OS prefers-reduced-motion rule, which still applies. ────────────────────────────────────────────── */ [data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }