/* ===================================================================== HALDER DIGITAL ASSETS — Modern Premium Stylesheet - Plus Jakarta Sans (body) + Space Grotesk (display) - Light & dark theme via [data-theme] on - Cyan / Blue / Purple gradient identity ===================================================================== */ /* ---------- DESIGN TOKENS ---------- */ :root { /* Brand colors — same in both themes */ --brand-cyan: #13D0DE; --brand-blue: #0066FF; --brand-purple: #9D00FF; --gradient-brand: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 50%, var(--brand-purple) 100%); --gradient-soft: linear-gradient(135deg, rgba(19, 208, 222, 0.15), rgba(0, 102, 255, 0.15), rgba(157, 0, 255, 0.15)); /* Typography */ --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Transitions */ --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* Container */ --container-max: 1200px; /* Header height */ --header-h: 72px; } /* Light theme */ :root, [data-theme="light"] { --bg: #f7f8fb; --bg-elev: #ffffff; --bg-card: #ffffff; --bg-subtle: #f1f4f8; --header-bg: rgba(255, 255, 255, 0.85); --header-border: rgba(15, 23, 42, 0.06); --text: #0f172a; --text-soft: #475569; --text-muted: #64748b; --border: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.16); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 24px 56px rgba(15, 23, 42, 0.10); --shadow-glow: 0 0 0 1px rgba(0, 102, 255, 0.18), 0 12px 32px rgba(0, 102, 255, 0.16); } /* Dark theme */ [data-theme="dark"] { --bg: #05070a; --bg-elev: #0d111a; --bg-card: #0e121d; --bg-subtle: #11162280; --header-bg: rgba(5, 7, 10, 0.75); --header-border: rgba(255, 255, 255, 0.06); --text: #f1f5f9; --text-soft: #cbd5e1; --text-muted: #94a3b8; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 0 1px rgba(19, 208, 222, 0.3), 0 12px 40px rgba(19, 208, 222, 0.2); } /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--t-base), color var(--t-base); min-height: 100dvh; display: flex; flex-direction: column; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul, ol { list-style: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* Selection */ ::selection { background: var(--brand-blue); color: #fff; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-blue); color: #fff; padding: 8px 16px; z-index: 9999; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { left: 0; } /* Focus styles */ :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; } /* ---------- TYPOGRAPHY ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); } h1 { font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 800; letter-spacing: -0.035em; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); letter-spacing: -0.03em; } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } h4 { font-size: 1.125rem; } p { color: var(--text-soft); } .gradient-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .text-soft { color: var(--text-soft); } /* ---------- LAYOUT ---------- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } main { flex: 1; padding-top: var(--header-h); } .section { padding: var(--space-9) 0; } .section-tight { padding: var(--space-7) 0; } .section-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-7); } .section-header h2 { margin-bottom: var(--space-3); } .section-header p { font-size: 1.0625rem; color: var(--text-muted); } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 24px; border-radius: var(--r-pill); font-weight: 600; font-size: 0.9375rem; line-height: 1; transition: all var(--t-base); white-space: nowrap; border: 1px solid transparent; cursor: pointer; user-select: none; } .btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: 0 8px 24px rgba(0, 102, 255, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 102, 255, 0.35); color: #fff; } .btn-secondary { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-subtle); border-color: var(--brand-blue); color: var(--brand-blue); } .btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-outline:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: rgba(0, 102, 255, 0.05); } .btn-large { padding: 16px 32px; font-size: 1rem; } .btn-small { padding: 8px 16px; font-size: 0.8125rem; } .btn-block { display: flex; width: 100%; } /* ---------- HEADER ---------- */ #main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--header-border); transition: background var(--t-base), border-color var(--t-base); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .logo a { display: flex; align-items: center; gap: var(--space-3); color: var(--text); } .logo img { width: 36px; height: 36px; border-radius: var(--r-sm); } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; display: flex; gap: 6px; } .brand-accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .nav-links { display: flex; align-items: center; gap: var(--space-2); } .nav-links a { padding: 8px 14px; border-radius: var(--r-sm); font-size: 0.9375rem; font-weight: 500; color: var(--text-soft); transition: all var(--t-fast); position: relative; } .nav-links a:hover { color: var(--text); background: var(--bg-subtle); } .nav-links a.active { color: var(--text); background: var(--bg-subtle); } .nav-links a.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--gradient-brand); border-radius: 2px; } .nav-actions { display: flex; align-items: center; gap: var(--space-3); } .theme-btn, .mobile-menu-btn { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: all var(--t-fast); } .theme-btn:hover, .mobile-menu-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-1px); } .mobile-menu-btn { display: none; } .mobile-nav { background: var(--bg-elev); border-top: 1px solid var(--border); padding: var(--space-4) 0; } .mobile-nav ul { display: flex; flex-direction: column; } .mobile-nav a { display: block; padding: 12px var(--space-5); color: var(--text-soft); font-weight: 500; border-bottom: 1px solid var(--border); } .mobile-nav a:hover { background: var(--bg-subtle); color: var(--text); } .mobile-nav a.active { color: var(--brand-blue); } /* ---------- HERO ---------- */ .hero { position: relative; padding: var(--space-9) 0 var(--space-8); overflow: hidden; isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 10%, rgba(19, 208, 222, 0.18), transparent 60%), radial-gradient(60% 50% at 80% 20%, rgba(157, 0, 255, 0.18), transparent 60%), radial-gradient(80% 60% at 50% 100%, rgba(0, 102, 255, 0.15), transparent 60%); z-index: -1; pointer-events: none; } .hero-content { text-align: center; max-width: 880px; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-soft); font-size: 0.8125rem; font-weight: 500; margin-bottom: var(--space-5); } .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; } .hero h1 { margin-bottom: var(--space-4); } .hero p { font-size: 1.125rem; color: var(--text-muted); max-width: 640px; margin: 0 auto var(--space-6); } .hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .trust-badges { margin-top: var(--space-7); display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; color: var(--text-muted); font-size: 0.875rem; } .trust-badges span { display: inline-flex; align-items: center; gap: 6px; } .trust-badges i { color: var(--brand-cyan); } /* ---------- CARDS ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-6); transition: all var(--t-base); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .card::before { content: ''; position: absolute; inset: 0; background: var(--gradient-soft); opacity: 0; transition: opacity var(--t-base); pointer-events: none; } .card:hover { border-color: var(--brand-blue); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card:hover::before { opacity: 1; } .card > * { position: relative; z-index: 1; } .card-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(19, 208, 222, 0.15); display: flex; align-items: center; justify-content: center; font-size: 1.625rem; margin-bottom: var(--space-4); flex-shrink: 0; color: var(--brand-blue); } .card h3 { margin-bottom: var(--space-2); } .card p { color: var(--text-muted); flex: 1; margin-bottom: var(--space-4); } .card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* Centered card variant - for category cards, value-prop cards, etc. */ .card.card-centered { text-align: center; align-items: center; } .card.card-centered > *:not(.card-icon) { width: 100%; } .card.card-centered .card-icon { margin-left: auto; margin-right: auto; } .card.card-centered h3 { font-size: 1.125rem; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; } .card.card-centered p { font-size: 0.9375rem; } .card.card-centered .card-footer { justify-content: center; padding-top: var(--space-3); border-top: 1px solid var(--border); } .price-tag { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1.125rem; } .price-original { text-decoration: line-through; color: var(--text-muted); font-size: 0.875rem; margin-left: 6px; font-weight: 400; } /* ---------- GRID ---------- */ .grid { display: grid; gap: var(--space-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ---------- DOMAIN/PRODUCT CARD (with image) ---------- */ .item-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: all var(--t-base); display: flex; flex-direction: column; height: 100%; position: relative; } .item-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-blue); } .item-thumb { aspect-ratio: 16 / 9; background: var(--bg-subtle); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .item-card:hover .item-thumb img { transform: scale(1.05); } .item-thumb-fallback { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; padding: var(--space-5); word-break: break-word; } .item-badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: 4px 12px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .item-badge.featured { background: var(--gradient-brand); } .item-body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; } .item-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--text); margin-bottom: var(--space-2); word-break: break-word; } .item-desc { color: var(--text-muted); font-size: 0.9375rem; flex: 1; margin-bottom: var(--space-4); } .item-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); } .item-price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); } .item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); } .item-tag { padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-subtle); border: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted); text-transform: capitalize; } /* ---------- FILTERS / SEARCH ---------- */ .toolbar { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); } .search-box { position: relative; max-width: 500px; margin: 0 auto; width: 100%; } .search-box input { width: 100%; padding: 14px 20px 14px 48px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); font-size: 0.9375rem; transition: all var(--t-fast); } .search-box input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); } .search-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .filter-btn { padding: 8px 18px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-soft); font-size: 0.875rem; font-weight: 500; transition: all var(--t-fast); text-transform: capitalize; } .filter-btn:hover { color: var(--text); border-color: var(--border-strong); } .filter-btn.active { background: var(--gradient-brand); color: #fff; border-color: transparent; } /* ---------- DOMAIN CAROUSEL ---------- */ .carousel-section { padding: var(--space-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; } .carousel-track { display: flex; gap: var(--space-4); width: max-content; animation: slide-left 40s linear infinite; padding: var(--space-2) 0; } .carousel-track:hover { animation-play-state: paused; } .carousel-item { height: 110px; width: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-sm); transition: all var(--t-fast); } .carousel-item:hover { transform: translateY(-4px); border-color: var(--brand-cyan); box-shadow: var(--shadow-glow); } .carousel-item img { height: 100%; width: auto; object-fit: contain; } @keyframes slide-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - var(--space-2))); } } /* ---------- REVIEWS ---------- */ .review-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-6); transition: all var(--t-base); height: 100%; display: flex; flex-direction: column; } .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .review-stars { color: #fbbf24; font-size: 1rem; margin-bottom: var(--space-3); letter-spacing: 2px; } .review-text { color: var(--text-soft); font-style: italic; margin-bottom: var(--space-4); flex: 1; } .review-author h4 { margin-bottom: 2px; } .review-author small { color: var(--text-muted); } /* ---------- CTA SECTION ---------- */ .cta-band { background: var(--gradient-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; } .cta-band h2 { margin-bottom: var(--space-3); } .cta-band p { max-width: 560px; margin: 0 auto var(--space-5); color: var(--text-muted); } /* ---------- TRENDING TAG CLOUD ---------- */ .tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .tag-cloud a { padding: 6px 14px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-soft); transition: all var(--t-fast); } .tag-cloud a:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-1px); } /* ---------- FOOTER ---------- */ #main-footer { background: var(--bg-elev); border-top: 1px solid var(--border); padding: var(--space-8) 0 var(--space-5); margin-top: var(--space-8); } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-7); } .footer-logo { font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-3); letter-spacing: 0.02em; font-size: 1.125rem; } .footer-brand p { color: var(--text-muted); margin-bottom: var(--space-4); font-size: 0.9375rem; } .footer-links h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--space-3); } .footer-links ul { display: flex; flex-direction: column; gap: var(--space-2); } .footer-links a { color: var(--text-soft); font-size: 0.9375rem; transition: color var(--t-fast); } .footer-links a:hover { color: var(--brand-blue); } .social-icons { display: flex; gap: var(--space-2); } .social-icons a { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-soft); transition: all var(--t-fast); } .social-icons a:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); } .copyright { border-top: 1px solid var(--border); padding-top: var(--space-5); text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* ---------- DETAIL PAGE (single domain/product/code/app/ui) ---------- */ .detail-hero { padding: var(--space-7) 0 var(--space-6); background: var(--gradient-soft); border-bottom: 1px solid var(--border); } .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); font-size: 0.875rem; color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); transition: color var(--t-fast); } .breadcrumb a:hover { color: var(--brand-blue); } .breadcrumb .sep { opacity: 0.5; } .detail-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: start; } .detail-image { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; position: sticky; top: calc(var(--header-h) + var(--space-4)); } .detail-image img { width: 100%; height: 100%; object-fit: cover; } .detail-image-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 3rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: var(--space-5); text-align: center; } .detail-body h1 { margin-bottom: var(--space-3); font-size: clamp(1.75rem, 3.5vw, 2.5rem); } .detail-price-row { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); padding: var(--space-5); border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--border); } .detail-price { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .detail-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .detail-features { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); } .detail-features h3 { font-family: var(--font-display); margin-bottom: var(--space-3); font-size: 1.0625rem; } .detail-features ul { display: flex; flex-direction: column; gap: var(--space-2); } .detail-features li { display: flex; gap: var(--space-3); color: var(--text-soft); font-size: 0.9375rem; } .detail-features li i { color: var(--brand-cyan); margin-top: 4px; } .related-section { padding: var(--space-8) 0; } /* ---------- FORMS ---------- */ .form-group { margin-bottom: var(--space-4); } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 6px; } .form-group .hint { font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; } .form-control { width: 100%; padding: 12px 16px; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); border-radius: var(--r-sm); font-size: 0.9375rem; transition: all var(--t-fast); } .form-control:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); } textarea.form-control { resize: vertical; min-height: 120px; font-family: inherit; } .alert { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: var(--space-4); border: 1px solid; font-size: 0.9375rem; } .alert-success { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); color: #10b981; } .alert-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; } .alert-info { background: rgba(0, 102, 255, 0.1); border-color: rgba(0, 102, 255, 0.4); color: var(--brand-blue); } /* ---------- ABOUT / CV SECTION ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; } .skill-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .skill-tags span { padding: 6px 14px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-soft); font-weight: 500; } .about-visual { aspect-ratio: 1; background: var(--gradient-soft); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); position: relative; overflow: hidden; } .about-visual::before { content: ''; position: absolute; inset: 20%; background: var(--gradient-brand); border-radius: 50%; filter: blur(40px); opacity: 0.4; } .about-visual img { position: relative; z-index: 1; border-radius: 50%; width: 60%; height: auto; aspect-ratio: 1; object-fit: cover; border: 4px solid var(--bg-card); box-shadow: var(--shadow-lg); } /* ---------- FAQ ACCORDION ---------- */ .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-fast); } .faq-item[open] { border-color: var(--brand-blue); } .faq-item summary { list-style: none; padding: var(--space-4) var(--space-5); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--brand-blue); transition: transform var(--t-fast); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding: 0 var(--space-5) var(--space-4); color: var(--text-soft); } /* ---------- 404 ---------- */ .error-page { text-align: center; padding: var(--space-9) 0; } .error-page h1 { font-size: clamp(5rem, 15vw, 10rem); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } /* ---------- UTILITIES ---------- */ .mb-1 { margin-bottom: var(--space-1) !important; } .mb-2 { margin-bottom: var(--space-2) !important; } .mb-3 { margin-bottom: var(--space-3) !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-5 { margin-bottom: var(--space-5) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .mt-3 { margin-top: var(--space-3) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-5 { margin-top: var(--space-5) !important; } .mt-6 { margin-top: var(--space-6) !important; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } .detail-grid { grid-template-columns: 1fr; } .detail-image { position: static; max-width: 100%; aspect-ratio: 16 / 10; } .about-grid { grid-template-columns: 1fr; gap: var(--space-5); } } /* ---------- TABLET / SMALL DESKTOP ---------- */ @media (max-width: 900px) { .nav-links { display: none; } .mobile-menu-btn { display: inline-flex; } } /* ---------- MOBILE ---------- */ @media (max-width: 768px) { :root { --header-h: 60px; --space-9: 64px; --space-8: 48px; --space-7: 36px; } .container { padding: 0 18px; } /* Header / brand */ .header-inner { gap: var(--space-3); } .logo a { gap: 8px; } .logo img { width: 32px; height: 32px; } .brand-name { font-size: 0.6875rem; gap: 3px; letter-spacing: 0.03em; } .nav-actions { gap: 8px; } .theme-btn, .mobile-menu-btn { width: 38px; height: 38px; } /* Sections */ .section { padding: var(--space-7) 0; } .section-tight { padding: var(--space-6) 0; } .section-header { margin-bottom: var(--space-5); } .section-header p { font-size: 0.9375rem; } /* Hero */ .hero { padding: var(--space-7) 0 var(--space-6); } .hero h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.15; } .hero p { font-size: 0.9375rem; padding: 0; } .hero-eyebrow { font-size: 0.75rem; padding: 5px 12px; max-width: 100%; } .hero-cta { flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; } .hero-cta .btn { width: 100%; } .btn-large { padding: 14px 24px; font-size: 0.9375rem; } .trust-badges { gap: var(--space-3) var(--space-4); margin-top: var(--space-5); font-size: 0.8125rem; } /* Grids → single column */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--space-4); } .grid-auto { grid-template-columns: 1fr; gap: var(--space-4); } /* Card padding */ .card { padding: var(--space-5); } .card-icon { width: 56px; height: 56px; font-size: 1.375rem; } .card.card-centered h3 { min-height: 0; font-size: 1rem; } .card.card-centered p { font-size: 0.875rem; } /* Item cards */ .item-body { padding: var(--space-4); } .item-title { font-size: 1.0625rem; } .item-desc { font-size: 0.9rem; } /* Carousel — let it scroll naturally and shrink */ .carousel-item { height: 76px; padding: 6px; } .carousel-track { gap: var(--space-3); } /* Filters - allow horizontal scroll */ .filter-row { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: thin; } .filter-row::-webkit-scrollbar { height: 4px; } .filter-row::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; } .filter-btn { flex-shrink: 0; font-size: 0.8125rem; padding: 7px 14px; } .search-box input { font-size: 0.9375rem; padding: 12px 18px 12px 44px; } /* Detail page */ .detail-hero { padding: var(--space-5) 0 var(--space-4); } .breadcrumb { font-size: 0.8125rem; gap: 6px; } .breadcrumb a, .breadcrumb span { white-space: nowrap; } .detail-grid { gap: var(--space-5); } .detail-image { aspect-ratio: 4 / 3; border-radius: var(--r-lg); } .detail-image-fallback { font-size: 1.75rem; } .detail-body h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; } .detail-price-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-4); } .detail-price { font-size: 1.875rem; } .detail-actions { flex-direction: column; gap: 10px; width: 100%; } .detail-actions .btn { width: 100%; } .detail-features { padding: var(--space-4); } .detail-features li { font-size: 0.875rem; } /* Tables of cards / reviews */ .review-card { padding: var(--space-5); } .review-text { font-size: 0.9375rem; } /* CTA bands */ .cta-band h2 { font-size: 1.5rem; } .cta-band p { font-size: 0.9375rem; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); text-align: left; } .social-icons { justify-content: flex-start; } .footer-brand p { font-size: 0.875rem; } #main-footer { padding: var(--space-7) 0 var(--space-4); } /* Mobile drawer */ .mobile-nav { padding: var(--space-3) 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .mobile-nav a { padding: 14px var(--space-4); font-size: 0.9375rem; } /* Forms */ .form-control { padding: 12px 14px; font-size: 16px; /* prevent iOS zoom */ } textarea.form-control { font-size: 16px; } /* Contact page 2-col grid → single */ .container .grid.grid-2 { grid-template-columns: 1fr !important; gap: var(--space-4); } /* About visual */ .about-visual { aspect-ratio: 4 / 3; } .about-visual img { width: 50%; } /* Tag cloud */ .tag-cloud { gap: 6px; } .tag-cloud a { font-size: 0.75rem; padding: 5px 12px; } /* Headings inside long pages (terms, privacy) */ .card h2 { font-size: 1.0625rem !important; } /* Misc text */ .text-soft, .text-muted { font-size: 0.9375rem; } /* Skill tags on About */ .skill-tags span { font-size: 0.75rem; padding: 5px 12px; } } /* ---------- VERY SMALL / NARROW ---------- */ @media (max-width: 420px) { .container { padding: 0 14px; } /* Hide the wordmark on tiny screens, keep just the logo */ .brand-name { display: none; } /* Tighter hero */ .hero h1 { font-size: 1.625rem; } .hero-eyebrow { font-size: 0.6875rem; padding: 4px 10px; } .hero-eyebrow .dot { width: 5px; height: 5px; } /* Trust badges stack */ .trust-badges { gap: 8px 14px; font-size: 0.75rem; } /* Item card thumb a bit shorter for landscape feel */ .item-thumb { aspect-ratio: 16 / 10; } /* Detail page */ .detail-price { font-size: 1.625rem; } /* Smaller buttons in nav */ .theme-btn, .mobile-menu-btn { width: 36px; height: 36px; font-size: 0.875rem; } /* FAQ items tighter */ .faq-item summary { padding: 14px 16px; font-size: 0.9375rem; } .faq-item p { padding: 0 16px 14px; font-size: 0.9rem; } /* Filter row no negative margin overflow on tiny screens */ .filter-row { margin: 0 -14px; padding-left: 14px; padding-right: 14px; } /* Section header even smaller */ .section-header h2 { font-size: 1.5rem; } .section-header p { font-size: 0.875rem; } /* CTA band */ .cta-band h2 { font-size: 1.375rem; } } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .carousel-track { animation: none; } } /* ---------- PRINT ---------- */ @media print { #main-header, #main-footer, .mobile-nav, .btn { display: none !important; } body { background: #fff; color: #000; } main { padding-top: 0; } }