/* Theme Name: Cognito Base Theme URI: https://cognito.guru Author: Cognito Guru Description: Authoritative structural chassis for all restaurant and local business websites. Version: 1.0.0 License: GPL v2 or later Text Domain: cognito-base */ /* THEME DESIGN TOKEN MAP These are populated via PHP from the active Variant JSON. Variables below are placeholders/fallbacks. */ :root { /* Dynamics - Populated by Variant */ --cg-primary: #FF6B35; --cg-secondary: #004E89; --cg-accent: #FFD166; --cg-background: #FFFFFF; --cg-surface: #F8F9FA; --cg-text-primary: #1D3557; --cg-text-secondary: #457B9D; --cg-heading-font: 'Inter', sans-serif; --cg-body-font: 'Inter', sans-serif; --cg-border-radius: 8px; --cg-section-gap: 4rem; /* RGB component fallbacks (functions.php injects per-variant values at runtime; these keep rgba(var(--cg-*-rgb), a) valid before/without token injection). */ --cg-primary-rgb: 255, 107, 53; --cg-accent-rgb: 255, 209, 102; /* ======================================================== BL-145 — Canonical design scale (base defaults). Variants override individual steps via their JSON `scale` group (injected by functions.php). Blocks should consume these instead of ad-hoc sizes. ======================================================== */ /* Modular type scale (fluid). `display` is the hero tier — kept large/impactful (was drifting from text-7xl ~4.5rem up to text-[12rem] across heroes). */ --cg-text-display: clamp(2.75rem, 8vw, 7rem); --cg-text-h1: clamp(2.1rem, 4.5vw, 3.5rem); --cg-text-h2: clamp(1.6rem, 3.2vw, 2.25rem); --cg-text-h3: clamp(1.25rem, 2.2vw, 1.6rem); --cg-text-body: var(--cg-base-size, 16px); --cg-text-caption: 0.8125rem; --cg-weight-heading: var(--cg-heading-weight, 700); --cg-weight-body: 400; --cg-leading-tight: 1.1; --cg-leading-body: 1.6; /* 8px-based spacing scale (single vertical rhythm) */ --cg-space-1: 0.5rem; --cg-space-2: 1rem; --cg-space-3: 1.5rem; --cg-space-4: 2rem; --cg-space-6: 3rem; --cg-space-8: 4rem; --cg-space-12: 6rem; /* Canonical section rhythm — variants may override --cg-section-gap */ --cg-section-pad: clamp(var(--cg-space-8), 8vw, var(--cg-space-12)); /* Radius scale */ --cg-radius-sm: 4px; --cg-radius-md: 10px; --cg-radius-lg: 20px; } /* ============================================================ BL-147 — Global scroll-reveal Hidden state is gated behind `.cg-reveal-on` (added to by js/cg-reveal.js). Without JS, or with reduced motion, the class is never added, so every section is fully visible. ============================================================ */ .cg-reveal-on .cg-component { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .cg-reveal-on .cg-component.is-revealed { opacity: 1; transform: none; } /* ============================================================ BL-148 — Global prefers-reduced-motion guard Neutralises every animation/transition (Ken Burns, vanguard reveal, scroll-reveal, hovers) for users who opt out. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .cg-reveal-on .cg-component { opacity: 1 !important; transform: none !important; } } /* Global Grid & Spacing */ body { font-family: var(--cg-body-font); background-color: var(--cg-background); color: var(--cg-text-primary); line-height: 1.6; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--cg-heading-font); margin-top: 0; } /* BL-145 — base type scale per level. A consistency FLOOR only: blocks that set an explicit Tailwind size class (e.g. text-6xl) still win on specificity. This just stops un-sized headings from drifting between blocks. */ h1 { font-size: var(--cg-text-h1); line-height: var(--cg-leading-tight); font-weight: var(--cg-weight-heading); } h2 { font-size: var(--cg-text-h2); line-height: var(--cg-leading-tight); font-weight: var(--cg-weight-heading); } h3 { font-size: var(--cg-text-h3); line-height: var(--cg-leading-tight); font-weight: var(--cg-weight-heading); } .cg-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } .cg-section { padding-top: var(--cg-section-gap); padding-bottom: var(--cg-section-gap); } /* Global Components */ .cg-button { display: inline-block; padding: 12px 28px; font-weight: 700; text-align: center; text-decoration: none; border-radius: var(--cg-border-radius); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } /* Animations */ .cg-fade-in { animation: cgFadeIn 0.8s ease-out forwards; } /* Header & Navigation */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(var(--cg-background-rgb, 18, 18, 18), 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--cg-primary-rgb, 230, 57, 70), 0.1); transition: all 0.3s ease; } /* Luxe Specific Header */ .header-luxe { position: absolute; width: 100%; background: transparent !important; backdrop-filter: none; border-bottom: none; color: white; } .header-luxe .brand-logo { font-family: 'Cormorant Garamond', serif; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 300; } .header-luxe nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .header-luxe nav a { color: white; text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.7; transition: opacity 0.3s ease; } .header-luxe nav a:hover { opacity: 1; } .site-header.header-luxe .cg-container { max-width: 1400px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Vanguard Specific Header */ .header-vanguard { background-color: var(--cg-background) !important; border-bottom: 2px solid rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); } .vanguard-navigation ul { display: flex; gap: 3rem; list-style: none; margin: 0; padding: 0; } .vanguard-navigation ul a { text-decoration: none; font-weight: 900; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--cg-text-primary); transition: color 0.3s ease; } .vanguard-navigation ul a:hover { color: var(--cg-primary); } /* ACM / non-profit "cause" header — dark, sticky, sits over the hero scrim */ .header-acm { background: rgba(var(--cg-primary-rgb), 0.82) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .header-acm .acm-nav a:hover { color: #fff !important; } #primary-menu { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; } #primary-menu a { text-decoration: none; color: var(--cg-text-primary); font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; position: relative; } #primary-menu a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--cg-primary); transition: width 0.3s ease; } #primary-menu a:hover::after { width: 100%; } @keyframes cgFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Scroll Utilities */ .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ADMIN BAR FIX: Ensure header is not covered by WP Admin Bar */ body.admin-bar .site-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px !important; } } /* --- praxis (professional-services) header nav — run #3 --- */ .header-praxis { background: var(--cg-background); border-bottom: 1px solid var(--cg-border); } .header-praxis .praxis-nav-menu { display: flex; align-items: center; gap: 2.25rem; list-style: none; margin: 0; padding: 0; } .header-praxis .praxis-nav-menu li { margin: 0; } .header-praxis .praxis-nav-menu a { font-family: var(--cg-body-font); font-size: 15px; font-weight: 500; color: var(--cg-text-secondary); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .header-praxis .praxis-nav-menu a:hover { color: var(--cg-text-primary); } .header-praxis .praxis-nav-menu .current-menu-item > a, .header-praxis .praxis-nav-menu .current_page_item > a { color: var(--cg-text-primary); border-bottom-color: var(--cg-accent); } @media (max-width: 860px) { .header-praxis .praxis-nav-menu { gap: 1.25rem; font-size: 14px; } }