/* ========================================================================== CodeRealities — Shared Stylesheet ========================================================================== */ /* ── RESET ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── VARIABLES ──────────────────────────────────────── */ :root { --bg: #07070e; --surface: #0c0c18; --card: rgba(255,255,255,0.03); --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); --primary: #6366f1; --primary-light: #818cf8; --text: #f1f5f9; --text-muted: #94a3b8; --text-dim: #475569; --r: 16px; --r-sm: 10px; /* Per-page accent (override via style attr on ) */ --accent: #6366f1; --accent-rgb: 99,102,241; --accent-dim: rgba(99,102,241,0.14); } /* ── BASE ───────────────────────────────────────────── */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--primary-light); text-decoration: none; } /* ── LAYOUT ─────────────────────────────────────────── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ── NAVIGATION ─────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(20px, calc((100% - 1100px) / 2 + 20px)); background: rgba(7,7,14,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-logo { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .nav-logo span { color: var(--primary-light); } .nav-links { display: flex; gap: 28px; list-style: none; align-items: center; } .nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--text-muted); transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-back { font-size: 0.85rem; font-weight: 500; color: var(--text-dim); transition: color 0.2s; display: flex; align-items: center; gap: 5px; } .nav-back:hover { color: var(--text); } /* ── BUTTONS ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 100px; font-size: 0.88rem; font-weight: 600; transition: all 0.2s; cursor: pointer; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn-ios { background: rgba(10,132,255,0.14); border: 1px solid rgba(10,132,255,0.35); color: #60a5fa; } .btn-ios:hover { background: rgba(10,132,255,0.24); } .btn-android { background: rgba(61,220,132,0.1); border: 1px solid rgba(61,220,132,0.28); color: #4ade80; } .btn-android:hover { background: rgba(61,220,132,0.2); } .btn-accent { background: var(--accent); color: #fff; border: none; } .btn-accent:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 28px var(--accent-dim); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--border-hover); } .btn-ghost-primary { background: transparent; border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--primary-light); } .btn-ghost-primary:hover { background: var(--accent-dim); } .btn-lg { padding: 14px 28px; font-size: 0.95rem; } .btn-sm { padding: 8px 16px; font-size: 0.8rem; } .btn-details { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s, gap 0.2s; padding: 8px 0; } .btn-details:hover { color: var(--text); gap: 10px; } /* ── PHONE MOCKUP ────────────────────────────────────── */ .phone-frame { border-radius: 34px; background: #0a0a13; padding: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 30px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .phone-frame img { border-radius: 28px; width: 100%; display: block; } .wide-frame { border-radius: 16px; background: #0a0a13; padding: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 24px 64px rgba(0,0,0,0.7); } .wide-frame img { border-radius: 11px; width: 100%; display: block; } /* ── SCREENSHOTS GALLERY ─────────────────────────────── */ .screenshots-gallery { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 0 28px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; -webkit-overflow-scrolling: touch; } .screenshots-gallery::-webkit-scrollbar { height: 4px; } .screenshots-gallery::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } .gallery-phone { flex-shrink: 0; scroll-snap-align: start; width: 170px; } .gallery-phone .phone-frame { width: 100%; } .gallery-wide { flex-shrink: 0; scroll-snap-align: start; width: 340px; } .gallery-wide .wide-frame { width: 100%; } /* ── APP DETAIL PAGE ─────────────────────────────────── */ .app-hero { padding: 72px 0 56px; text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } .app-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% -10%, var(--accent-dim) 0%, transparent 65%); pointer-events: none; } .app-hero-icon { width: 108px; height: 108px; border-radius: 26px; margin: 0 auto 24px; box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1); position: relative; z-index: 1; object-fit: cover; } .app-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -0.035em; margin-bottom: 8px; position: relative; z-index: 1; } .app-hero-sub { font-size: 1rem; color: var(--text-muted); margin-bottom: 32px; position: relative; z-index: 1; } .app-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } .app-hero-cat { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-dim); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 100px; padding: 4px 14px; font-size: 0.74rem; font-weight: 600; color: var(--primary-light); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 20px; position: relative; z-index: 1; } .app-page-section { padding: 64px 0; border-bottom: 1px solid var(--border); } .app-page-section:last-child { border-bottom: none; } .section-heading { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; } .section-sub-text { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 36px; } /* Features grid */ .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; transition: border-color 0.2s, background 0.2s; } .feature-card:hover { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.04); } .feature-icon { font-size: 1.6rem; margin-bottom: 12px; } .feature-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; } .feature-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; } /* About text */ .about-text { font-size: 1rem; color: var(--text-muted); line-height: 1.8; max-width: 680px; } /* Download CTA */ .app-cta-section { padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .app-cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 50% 50%, var(--accent-dim) 0%, transparent 70%); pointer-events: none; } .app-cta-section h2 { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 10px; position: relative; z-index: 1; } .app-cta-section p { color: var(--text-muted); margin-bottom: 32px; position: relative; z-index: 1; } .app-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } .privacy-link { display: block; margin-top: 20px; font-size: 0.8rem; color: var(--text-dim); position: relative; z-index: 1; transition: color 0.2s; } .privacy-link:hover { color: var(--text-muted); } /* ── FOOTER ──────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 52px 0 40px; } .footer-row { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; } .footer-brand .nav-logo { margin-bottom: 8px; display: block; } .footer-copy { font-size: 0.8rem; color: var(--text-dim); line-height: 1.7; max-width: 220px; } .footer-col h5 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; margin-bottom: 14px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col a { font-size: 0.84rem; color: var(--text-dim); transition: color 0.2s; } .footer-col a:hover { color: var(--text); } .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ── LIGHT THEME ─────────────────────────────────────── */ html[data-theme="light"] { --bg: #f5f7fa; --surface: #ffffff; --card: rgba(15,23,42,0.03); --border: rgba(15,23,42,0.09); --border-hover: rgba(15,23,42,0.16); --primary: #4f46e5; --primary-light: #6366f1; --text: #0f172a; --text-muted: #334155; --text-dim: #64748b; } html[data-theme="light"] body { background: var(--bg); color: var(--text); } /* Nav */ html[data-theme="light"] .site-nav { background: rgba(245,247,250,0.94); border-bottom-color: var(--border); } html[data-theme="light"] .nav-logo { color: var(--text); } html[data-theme="light"] .nav-links a { color: var(--text-muted); } html[data-theme="light"] .nav-links a:hover { color: var(--text); } html[data-theme="light"] .nav-back { color: var(--text-dim); } html[data-theme="light"] .nav-back:hover { color: var(--text); } /* Buttons */ html[data-theme="light"] .btn-ios { background: rgba(0,112,243,0.07); border-color: rgba(0,112,243,0.22); color: #1d4ed8; } html[data-theme="light"] .btn-ios:hover { background: rgba(0,112,243,0.14); } html[data-theme="light"] .btn-android { background: rgba(22,163,74,0.07); border-color: rgba(22,163,74,0.22); color: #15803d; } html[data-theme="light"] .btn-android:hover { background: rgba(22,163,74,0.14); } html[data-theme="light"] .btn-ghost { border-color: var(--border); color: var(--text); } html[data-theme="light"] .btn-ghost:hover { background: rgba(15,23,42,0.05); border-color: var(--border-hover); } html[data-theme="light"] .btn-ghost-primary { color: var(--primary); } html[data-theme="light"] .btn-details { color: var(--text-muted); } html[data-theme="light"] .btn-details:hover { color: var(--text); } /* Phone / screenshot frames */ html[data-theme="light"] .phone-frame { background: #e2e8f0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.1); } html[data-theme="light"] .wide-frame { background: #e2e8f0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.1); } html[data-theme="light"] .screenshots-gallery { scrollbar-color: rgba(0,0,0,0.12) transparent; } html[data-theme="light"] .screenshots-gallery::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); } /* App hero & sections */ html[data-theme="light"] .app-hero-icon { box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06); } html[data-theme="light"] .feature-card { background: #fff; border-color: var(--border); } html[data-theme="light"] .feature-card:hover { background: rgba(var(--accent-rgb),0.04); } html[data-theme="light"] .feature-desc { color: var(--text-muted); } html[data-theme="light"] .about-text { color: var(--text-muted); } html[data-theme="light"] .privacy-link { color: var(--text-dim); } html[data-theme="light"] .privacy-link:hover { color: var(--text-muted); } /* Footer */ html[data-theme="light"] .site-footer { border-top-color: var(--border); } html[data-theme="light"] .footer-copy { color: var(--text-dim); } html[data-theme="light"] .footer-col h5 { color: var(--text-muted); } html[data-theme="light"] .footer-col a { color: var(--text-dim); } html[data-theme="light"] .footer-col a:hover { color: var(--text); } html[data-theme="light"] .footer-bottom { border-top-color: var(--border); color: var(--text-dim); } /* ── RESPONSIVE ──────────────────────────────────────── */ @media (max-width: 700px) { .nav-links { display: none; } .footer-row { flex-direction: column; } .footer-bottom { flex-direction: column; gap: 6px; } .app-hero { padding: 52px 0 40px; } .app-page-section { padding: 48px 0; } .features-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { .features-grid { grid-template-columns: 1fr; } .app-hero h1 { font-size: 1.8rem; } }