/* Theme Name: OlegKovalov Child Template: astra Description: Dark cinematic creator hub for OlegKovalov.com Version: 2.0 */ /* Inter is enqueued as a proper in functions.php (ok-google-fonts) instead of a render-blocking @import chain here. */ /* ============================================================ THEME SYSTEM v2.0 — Single source of truth. Dark mode is default. All colors use var() only. JS sets data-theme on . CSS does the rest. NO !important anywhere on element rules. ============================================================ */ :root, html[data-theme="dark"] { --ok-bg: #0D0D0D; --ok-surface: #1A1A2E; --ok-surface-alt: #12122A; --ok-text: #F0F0F0; --ok-text-muted: #A0A0B0; --ok-accent: var(--ok-accent); --ok-accent-hover: #9DB08F; --ok-link: #2B6CB0; --ok-border: #2A2A4A; --ok-card: #1E1E38; --ok-proof-strip: #1A1A2E; --ok-hero-overlay: rgba(0,0,0,0.65); --ok-input-bg: #12122A; --ok-input-border: #3A3A5A; --ok-footer-bg: #0D0D0D; --ok-footer-text: rgba(255,255,255,0.7); --ok-footer-border: rgba(255,255,255,0.06); --ok-footer-muted: rgba(255,255,255,0.5); --ok-sun-display: none; --ok-moon-display: block; } html[data-theme="light"] { --ok-bg: #FAFAFA; --ok-surface: #FFFFFF; --ok-surface-alt: #F2F2F2; --ok-text: #1A1A1A; --ok-text-muted: #555566; --ok-accent: var(--ok-accent); --ok-accent-hover: #3B3B41; --ok-link: #2B6CB0; --ok-border: #DDDDEE; --ok-card: #FFFFFF; --ok-proof-strip: #F0F0F0; --ok-hero-overlay: rgba(0,0,0,0.35); --ok-input-bg: #FFFFFF; --ok-input-border: #CCCCDD; --ok-footer-bg: #E8E8EC; --ok-footer-text: rgba(30,30,50,0.7); --ok-footer-border: rgba(0,0,0,0.08); --ok-footer-muted: rgba(30,30,50,0.5); --ok-sun-display: block; --ok-moon-display: none; } /* Base elements — use variables, never hardcoded hex */ body { background-color: var(--ok-bg); color: var(--ok-text); transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { color: var(--ok-text); } p { color: var(--ok-text-muted); } a { color: var(--ok-link); } /* Sections — layered gradients give each block depth and melt the boundaries between adjacent sections (flat color on flat color reads bland). A faint warm glow bleeds from the top, a cool falloff closes the bottom; the alt sections mirror the direction so the rhythm alternates as you scroll. rgba overlays ride on the theme variable background-color, so dark/light toggle keeps working. */ .ok-section { background-color: var(--ok-surface); background-image: radial-gradient(1100px 480px at 50% -8%, rgba(230,57,70,0.07), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.22) 100%); } .ok-section-dark { background-color: var(--ok-surface-alt); background-image: radial-gradient(1100px 480px at 50% -8%, rgba(230,57,70,0.07), transparent 62%), linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.22) 100%); } .ok-section-alt { background-color: var(--ok-surface-alt); background-image: radial-gradient(1000px 460px at 18% 110%, rgba(43,108,176,0.10), transparent 60%), radial-gradient(900px 420px at 85% -6%, rgba(230,57,70,0.06), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 22%, transparent 80%, rgba(0,0,0,0.20) 100%); } .ok-proof-strip { background-color: var(--ok-proof-strip); background-image: linear-gradient(90deg, transparent, rgba(230,57,70,0.07) 50%, transparent); } html[data-theme="light"] .ok-section, html[data-theme="light"] .ok-section-dark, html[data-theme="light"] .ok-section-alt { background-image: radial-gradient(1100px 480px at 50% -8%, rgba(230,57,70,0.05), transparent 62%), linear-gradient(180deg, rgba(26,26,46,0.04) 0%, transparent 20%, transparent 80%, rgba(26,26,46,0.05) 100%); } /* Hero */ .ok-hero { background-color: var(--ok-surface-alt); } .ok-hero-overlay { background: var(--ok-hero-overlay); } /* Hero background image (optional, ok_hero_bg_id option) with slow drift */ .ok-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .ok-hero-bg .ok-hero-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; animation: ok-hero-drift 36s ease-in-out infinite alternate; will-change: transform; } @keyframes ok-hero-drift { from { transform: scale(1.0) translateX(0); } to { transform: scale(1.09) translateX(-1.5%); } } @media (prefers-reduced-motion: reduce) { .ok-hero-bg .ok-hero-bg-img { animation: none; } } /* When a hero background image exists, ease the overlay so the image reads */ .ok-hero.has-bg .ok-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%); } /* Category card cinematic backgrounds (ok_home_category_images option) */ .ok-category-card { position: relative; overflow: hidden; } .ok-category-card .ok-category-bg { position: absolute; inset: 0; z-index: 0; } .ok-category-card .ok-category-bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.30; transition: opacity 0.3s, transform 0.4s; } .ok-category-card:hover .ok-category-bg img { opacity: 0.45; transform: scale(1.04); } .ok-category-card h3, .ok-category-card p { position: relative; z-index: 1; } /* Cards */ .ok-product-card, .ok-blog-card, .ok-category-card { background-color: var(--ok-card); border-color: var(--ok-border); } /* Email / Lead magnet — warm focal glow behind the form */ .ok-email-section { background-color: var(--ok-surface-alt); background-image: radial-gradient(820px 420px at 50% 18%, rgba(230,57,70,0.12), transparent 65%), linear-gradient(180deg, rgba(0,0,0,0.20), transparent 30%); } .ok-email-form input, .ok-email-form textarea { background-color: var(--ok-input-bg); border-color: var(--ok-input-border); color: var(--ok-text); } /* Footer */ .ok-footer { background-color: var(--ok-footer-bg); } /* About section */ .ok-about { background-color: var(--ok-surface); } /* Sun/moon icons — controlled by CSS variable, not JS visibility tricks */ .ok-icon-sun { display: var(--ok-sun-display); } .ok-icon-moon { display: var(--ok-moon-display); } /* Smooth theme transition on all themed elements */ .ok-section, .ok-section-dark, .ok-section-alt, .ok-proof-strip, .ok-hero, .ok-product-card, .ok-blog-card, .ok-category-card, .ok-email-section, .ok-footer, .ok-about { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* ============================================ BASE STYLES ============================================ */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--ok-font); font-weight: 300; background: var(--ok-bg); color: var(--ok-text); line-height: 1.7; overflow-x: hidden; transition: background 0.35s ease, color 0.35s ease; } h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; margin-bottom: 0.5em; color: var(--ok-text); } a { color: var(--ok-red); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--ok-blue); } img { max-width:100%; height:auto; } .ok-container { max-width:1200px; margin:0 auto; padding:0 24px; } /* ============================================ BUTTONS ============================================ */ .ok-btn { display: inline-block; padding: 14px 36px; background: var(--ok-red); color: var(--ok-accent-ink); font-family: var(--ok-font); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; border: none; border-radius: 4px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; } .ok-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(230,57,70,0.3); color: #FFFFFF; } .ok-btn-outline { background: transparent; border: 2px solid var(--ok-red); color: var(--ok-red); } .ok-btn-outline:hover { background: var(--ok-red); color: var(--ok-accent-ink); } /* ============================================ HEADER ============================================ */ .ok-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: background 0.3s, padding 0.3s; background: transparent; } .ok-header.scrolled { background: var(--ok-header-bg); padding: 12px 0; backdrop-filter: var(--ok-header-blur); box-shadow: 0 2px 20px var(--ok-shadow); } .ok-header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .ok-logo { font-size: 1.4rem; font-weight: 700; color: var(--ok-text); letter-spacing: -0.5px; } .ok-logo span { color: var(--ok-red); } .ok-nav { display: flex; gap: 28px; align-items: center; } .ok-nav a { color: var(--ok-text); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; } .ok-nav a:hover { color: var(--ok-red); } /* Header Actions (toggle + hamburger) */ .ok-header-actions { display: flex; align-items: center; gap: 16px; } /* ============================================ DARK/LIGHT TOGGLE BUTTON ============================================ */ .ok-theme-toggle { background: none; border: 2px solid var(--ok-card-border); border-radius: 50%; width: 42px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ok-text); transition: border-color 0.3s, color 0.3s, transform 0.3s, background 0.3s; padding: 0; } .ok-theme-toggle:hover { border-color: var(--ok-red); color: var(--ok-red); transform: rotate(15deg); background: var(--ok-card-bg); } /* Hamburger */ .ok-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 0; border: 0; background: transparent; } .ok-hamburger span { width: 28px; height: 2px; background: var(--ok-text); transition: 0.3s; } /* ============================================ HERO ============================================ */ .ok-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--ok-bg); overflow: hidden; } .ok-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 100%); } .ok-hero-content { position: relative; z-index: 2; padding: 0 24px; } .ok-hero h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 0.3em; color: #FFFFFF; } .ok-hero h1 span { color: var(--ok-red); } .ok-hero p { font-size: 1.2rem; font-weight: 300; margin-bottom: 0.5rem; opacity: 0.9; color: #FFFFFF; } .ok-hero .ok-subtitle { font-size: 1rem; opacity: 0.7; margin-bottom: 2rem; color: #FFFFFF; } .ok-hero .ok-btn { margin: 0 8px; } /* ============================================ SECTIONS ============================================ */ .ok-section { padding: 100px 0; } .ok-section-dark { background: var(--ok-bg); } .ok-section-alt { background: var(--ok-bg-alt); } .ok-section-accent { background: var(--ok-bg-accent); } .ok-section-title { font-size: 2.2rem; text-align: center; margin-bottom: 1rem; color: var(--ok-text); } .ok-section-subtitle { text-align: center; font-weight: 300; color: var(--ok-text-muted); max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem; } /* ============================================ SOCIAL PROOF STRIP ============================================ */ .ok-proof-strip { background: var(--ok-bg-alt); padding: 20px 0; text-align: center; } .ok-proof-strip .ok-stats-inline { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .ok-proof-strip .ok-stat-item { font-size: 0.9rem; font-weight: 600; color: var(--ok-text); } .ok-proof-strip .ok-stat-item span { color: var(--ok-red); font-size: 1.1rem; } /* ============================================ PRODUCT CARDS ============================================ */ .ok-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ok-product-card { background: var(--ok-card-bg); border: 1px solid var(--ok-card-border); border-radius: 8px; overflow: hidden; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .ok-product-card:hover { transform: translateY(-4px); border-color: var(--ok-red); box-shadow: 0 8px 30px var(--ok-shadow); } .ok-product-thumb { width: 100%; aspect-ratio: 16/10; background: var(--ok-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--ok-text-faint); font-size: 0.8rem; } .ok-product-info { padding: 20px; } .ok-product-info h3 { font-size: 1rem; margin-bottom: 8px; color: var(--ok-text); } .ok-product-price { font-size: 1.3rem; font-weight: 700; color: var(--ok-red); } /* ============================================ CATEGORY CARDS ============================================ */ .ok-categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .ok-category-card { background: var(--ok-card-bg); border: 1px solid var(--ok-card-border); border-radius: 8px; padding: 40px 20px; text-align: center; transition: transform 0.3s, border-color 0.3s; cursor: pointer; } .ok-category-card:hover { transform: translateY(-4px); border-color: var(--ok-red); } .ok-category-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--ok-text); } .ok-category-card p { font-size: 0.85rem; color: var(--ok-text-faint); } /* ============================================ YOUTUBE SECTION ============================================ */ .ok-youtube-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ok-youtube-placeholder { aspect-ratio: 16/9; background: var(--ok-bg-alt); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--ok-text-faint); } /* ============================================ EMAIL CAPTURE ============================================ */ .ok-email-section { background: linear-gradient(135deg, var(--ok-bg-accent), var(--ok-bg)); text-align: center; padding: 80px 24px; } .ok-email-form { display: flex; gap: 12px; max-width: 500px; margin: 2rem auto 0; } .ok-email-form input { flex: 1; padding: 14px 16px; background: var(--ok-input-bg); border: 1px solid var(--ok-input-border); border-radius: 4px; color: var(--ok-text); font-family: var(--ok-font); font-size: 1rem; } .ok-email-form input::placeholder { color: var(--ok-text-faint); } .ok-email-form input:focus { outline: none; border-color: var(--ok-red); } .ok-email-form button { padding: 14px 24px; } /* ============================================ BLOG CARDS ============================================ */ .ok-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ok-blog-card { background: var(--ok-card-bg); border: 1px solid var(--ok-card-border); border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .ok-blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px var(--ok-shadow); } .ok-blog-thumb { width: 100%; aspect-ratio: 16/9; background: var(--ok-bg-alt); } .ok-blog-content { padding: 20px; } .ok-blog-content h3 { font-size: 1rem; margin-bottom: 8px; color: var(--ok-text); } .ok-blog-content p { font-size: 0.85rem; color: var(--ok-text-faint); line-height: 1.6; } /* ============================================ ABOUT TEASER ============================================ */ .ok-about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .ok-about-photo { width: 100%; aspect-ratio: 1; background: var(--ok-bg-alt); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ok-text-faint); font-size: 1rem; } /* ============================================ FOOTER (theme-aware) ============================================ */ .ok-footer { background: var(--ok-footer-bg); padding: 60px 0 30px; border-top: 1px solid var(--ok-footer-border); } .ok-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .ok-footer h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; color: var(--ok-red); } .ok-footer a { color: var(--ok-footer-text); font-size: 0.9rem; } .ok-footer a:hover { color: var(--ok-red); } .ok-footer ul { list-style: none; } .ok-footer li { margin-bottom: 10px; } .ok-footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid var(--ok-footer-border); font-size: 0.8rem; color: var(--ok-footer-muted); } /* ============================================ GEAR REVIEW CARDS ============================================ */ .ok-gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ok-gear-card { background: var(--ok-card-bg); border: 1px solid var(--ok-card-border); border-radius: 8px; padding: 24px; text-align: center; transition: transform 0.3s; display: flex; flex-direction: column; position: relative; overflow: hidden; } .ok-gear-card:hover { transform: translateY(-4px); } /* Optional cinematic backdrop inside a card (shop "What is coming" etc.) */ .ok-gear-card .ok-card-bg { position: absolute; inset: 0; z-index: 0; } .ok-gear-card .ok-card-bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.22; transition: opacity 0.3s, transform 0.4s; } .ok-gear-card:hover .ok-card-bg img { opacity: 0.34; transform: scale(1.04); } .ok-gear-card > h3, .ok-gear-card > p, .ok-gear-card > a, .ok-gear-card > div:not(.ok-card-bg) { position: relative; z-index: 1; } /* Affiliate button row: buttons pinned to an even bottom edge across the grid, vertically centered labels, identical metrics for every button. */ .ok-gear-card .ok-affiliate-btns { margin-top: auto; padding-top: 16px; } .ok-affiliate-btns { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; } .ok-affiliate-btns a { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1.2 !important; min-height: 38px; padding: 8px 16px !important; border-radius: 4px; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; } .ok-gear-review-link { margin: 0 0 14px; font-family: Inter, sans-serif; font-size: 0.85rem; font-weight: 600; } .ok-gear-review-link a { color: var(--ok-text, #fff); opacity: 0.78; border-bottom: 1px solid rgba(230,57,70,0.5); padding-bottom: 1px; } .ok-gear-review-link a:hover { opacity: 1; color: var(--ok-accent, var(--ok-accent)); } .ok-affiliate-btns .ok-video-btn { background: var(--ok-accent, var(--ok-accent)); color: #fff; } .ok-affiliate-btns .ok-video-btn:hover { background: var(--ok-accent-hover, var(--ok-accent)); color: #fff; } /* The Amazon/B&H shortcode buttons inherit centering anywhere they appear */ .ok-amazon-btn, .ok-bh-btn { line-height: 1.2 !important; } .ok-gear-card h3 { font-size: 1rem; margin: 12px 0 8px; color: var(--ok-text); } .ok-gear-card p { font-size: 0.85rem; color: var(--ok-text-faint); margin-bottom: 16px; } .ok-affiliate-btns { display: flex; gap: 8px; justify-content: center; } .ok-affiliate-btns a { padding: 8px 16px; font-size: 0.75rem; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .ok-amazon-btn { background: #FF9900; color: #000; } .ok-bh-btn { background: var(--ok-blue); color: #FFFFFF; } /* ============================================ CONTACT FORM ============================================ */ .ok-form-group { margin-bottom: 20px; } .ok-form-group label { display: block; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; color: var(--ok-blue); } .ok-form-group input, .ok-form-group textarea { width: 100%; padding: 14px 16px; background: var(--ok-input-bg); border: 1px solid var(--ok-input-border); border-radius: 4px; color: var(--ok-text); font-family: var(--ok-font); font-size: 1rem; } .ok-form-group input:focus, .ok-form-group textarea:focus { outline: none; border-color: var(--ok-red); } .ok-form-group textarea { min-height: 140px; resize: vertical; } /* ============================================ SCROLL ANIMATIONS ============================================ */ /* Progressive enhancement: content is visible by default. The ok-js class is added by a tiny head script in functions.php ONLY when IntersectionObserver exists, so no-JS visitors and old browsers always see everything. */ .ok-reveal { opacity: 1; transform: none; } html.ok-js .ok-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } html.ok-js .ok-reveal.revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.ok-js .ok-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 968px) { .ok-nav { display: none; } .ok-hamburger { display: flex; } .ok-nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--ok-header-bg); backdrop-filter: var(--ok-header-blur); padding: 24px; gap: 16px; } .ok-hero h1 { font-size: 2.2rem; } .ok-products-grid, .ok-blog-grid, .ok-youtube-grid, .ok-gear-grid { grid-template-columns: repeat(2, 1fr); } .ok-categories-grid { grid-template-columns: repeat(2, 1fr); } .ok-about-split { grid-template-columns: 1fr; } .ok-footer-grid { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 600px) { .ok-section { padding: 60px 0; } .ok-products-grid, .ok-blog-grid, .ok-youtube-grid, .ok-gear-grid, .ok-categories-grid { grid-template-columns: 1fr; } .ok-hero h1 { font-size: 1.8rem; } .ok-email-form { flex-direction: column; } .ok-hero .ok-btn { display: block; margin: 8px auto; max-width: 260px; } } /* ============================================ ASTRA OVERRIDES ============================================ */ .ast-container { max-width: 100%; padding: 0; } .site-content .ast-container { padding: 0; } #page { background: var(--ok-bg); transition: background 0.35s ease; } .entry-content { margin: 0; padding: 0; } .ast-separate-container .ast-article-single { background: transparent; padding: 0; } #primary { margin: 0; padding: 0; }