/* * UoA DESIGN SYSTEM v2 — MASTER CONTROLS * This is the single intended control area for site-wide visual changes. * Change values here; V2 Pages, Posts, Search, Archive, Category and 404 consume the same variables. */ @layer uoa.tokens, uoa.base, uoa.layout, uoa.typography, uoa.controls, uoa.components, uoa.specialized, uoa.responsive; @layer uoa.tokens { :root{ /* 1. SITE WIDTH + SPACING */ --uoa-site-max-width:1180px; --uoa-site-gutter:clamp(20px, 4vw, 40px); --uoa-site-section-gap:clamp(3.5rem, 7vw, 6.5rem); --uoa-site-card-gap:clamp(1rem, 2.2vw, 1.6rem); /* 2. GLOBAL BACKGROUND */ --uoa-site-background-image:url("https://universityofawakening.com/wp-content/uploads/2025/08/Earth-intro.jpg"); --uoa-site-background-image-tablet:url("https://universityofawakening.com/wp-content/uploads/2026/06/uao-bg-tablet.webp"); --uoa-site-background-position:top center; --uoa-site-background-size:cover; --uoa-site-background-repeat:no-repeat; --uoa-site-background-attachment:fixed; --uoa-rgb-background-overlay:3,6,20; --uoa-background-overlay-opacity:0; /* 3. MAIN COLOR THEME — SINGLE-SOURCE COLOR CONTROLS * Edit these RGB triplets to retheme the site. Solid colors and transparent * effects below both derive from these same values. Hex equivalents are noted. */ --uoa-rgb-site-background:3,6,20; /* #030614 */ --uoa-rgb-ink:51,51,51; /* #333333 */ --uoa-rgb-panel:220,220,222; /* #dcdcde */ --uoa-rgb-panel-deep:126,126,126; /* #7e7e7e */ --uoa-rgb-accent:49,134,255; /* #3186ff */ --uoa-rgb-accent-mid:52,107,241; /* #346bf1 */ --uoa-rgb-accent-light:79,160,255; /* #4fa0ff */ --uoa-rgb-accent-deep:26,49,94; /* #1a315e */ --uoa-rgb-white:255,255,255; /* #ffffff */ --uoa-rgb-text-dark:27,29,36; /* #1b1d24 */ --uoa-rgb-on-light:11,17,43; /* #0b112b */ --uoa-rgb-black:0,0,0; /* #000000 */ /* Derived solid / alpha colors — normally do not edit these. */ --uoa-site-background-color:rgb(var(--uoa-rgb-site-background)); --uoa-color-ink:rgb(var(--uoa-rgb-ink)); --uoa-color-panel:rgb(var(--uoa-rgb-panel)); --uoa-color-panel-deep:rgb(var(--uoa-rgb-panel-deep)); --uoa-color-accent:rgb(var(--uoa-rgb-accent)); --uoa-color-accent-mid:rgb(var(--uoa-rgb-accent-mid)); --uoa-color-accent-light:rgb(var(--uoa-rgb-accent-light)); --uoa-color-accent-deep:rgb(var(--uoa-rgb-accent-deep)); --uoa-color-white:rgb(var(--uoa-rgb-white)); --uoa-color-text:rgba(var(--uoa-rgb-white),0.94); --uoa-color-text-soft:rgba(var(--uoa-rgb-white),0.76); --uoa-color-text-dark:rgb(var(--uoa-rgb-text-dark)); --uoa-color-nav-dark:var(--uoa-color-ink); --uoa-color-on-light:rgb(var(--uoa-rgb-on-light)); --uoa-color-border:rgba(var(--uoa-rgb-white),0.16); --uoa-color-border-strong:rgba(var(--uoa-rgb-white),0.24); --uoa-rgb-dark:var(--uoa-rgb-site-background); /* 4. MAIN FONT FAMILIES */ --uoa-font-display:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --uoa-font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* 5. GLOBAL TYPE SCALE */ /* Change this one value (for example 100% -> 110%) to scale rem-based V2 typography globally. */ --uoa-root-font-size:100%; /* Tune the hierarchy here only when individual levels need adjustment. */ --uoa-type-xs:0.82rem; --uoa-type-sm:0.92rem; --uoa-type-button:0.92rem; --uoa-type-label:0.82rem; --uoa-type-body:clamp(1.25rem, 1.35vw, 1.38rem); --uoa-type-md:clamp(1.25rem, 1.7vw, 1.8rem); --uoa-type-lg:clamp(1.55rem, 2.35vw, 2.5rem); --uoa-type-display:clamp(2.1875rem, 5.5vw, 4.6875rem); --uoa-type-page-pill:clamp(2rem, 4.4vw, 4.15rem); --uoa-type-subtitle:clamp(1.85rem, 3.8vw, 4rem); --uoa-type-section-label:1.6875rem; --uoa-type-lead:var(--uoa-type-body); /* Shared large content typography: consumed by Pages, Posts and templates. */ --uoa-type-content-display:clamp(2rem, 4vw, 3.75rem); --uoa-type-content-subtitle:clamp(1.25rem, 2.2vw, 2rem); --uoa-font-size-content-display:var(--uoa-type-content-display); --uoa-font-size-content-subtitle:var(--uoa-type-content-subtitle); /* 6. GLOBAL GLASS SYSTEM */ /* Change these values to alter all V2 glass boxes together. */ --uoa-glass-unified-opacity:0.1; --uoa-glass-background:rgba(var(--uoa-rgb-white),var(--uoa-glass-unified-opacity)); --uoa-rgb-glass-dark:3,6,20; --uoa-rgb-glass-clear:255,255,255; --uoa-rgb-glass-blue:37,71,116; --uoa-rgb-glass-support:255,255,255; --uoa-glass-dark-opacity:0.54; --uoa-glass-dark-strong-opacity:0.84; --uoa-glass-clear-opacity:0.085; --uoa-glass-blue-opacity:0.53; --uoa-glass-support-opacity:0.1; --uoa-glass-border-opacity:0.16; --uoa-glass-shadow-opacity:0.56; --uoa-glass-clear-background:rgba(var(--uoa-rgb-glass-clear),var(--uoa-glass-clear-opacity)); --uoa-glass-blue-background:rgba(var(--uoa-rgb-glass-blue),var(--uoa-glass-blue-opacity)); --uoa-glass-dark-background:rgba(var(--uoa-rgb-glass-dark),var(--uoa-glass-dark-opacity)); --uoa-glass-dark-strong-background:rgba(var(--uoa-rgb-glass-dark),var(--uoa-glass-dark-strong-opacity)); --uoa-glass-support-background:rgba(var(--uoa-rgb-glass-support),var(--uoa-glass-support-opacity)); --uoa-glass-blur:blur(8px); --uoa-glass-blur-strong:blur(12px); --uoa-glass-border:1px solid rgba(var(--uoa-rgb-white),var(--uoa-glass-border-opacity)); --uoa-glass-shadow:0 28px 70px rgba(var(--uoa-rgb-black),var(--uoa-glass-shadow-opacity)), inset 0 1px 28px rgba(var(--uoa-rgb-white),0.075); --uoa-glass-radius:24px; --uoa-glass-padding:clamp(1.35rem, 2.7vw, 2rem); /* 7. SHAPE */ --uoa-radius-sm:12px; --uoa-radius-md:18px; --uoa-radius-lg:24px; --uoa-radius-xl:30px; --uoa-radius-pill:999px; /* 8. SHARED EFFECTS */ --uoa-shadow-soft:0 16px 34px rgba(var(--uoa-rgb-black),0.34); --uoa-accent-gradient:linear-gradient(90.8deg, var(--uoa-color-accent) -1.06%, var(--uoa-color-accent-mid) 45.45%, var(--uoa-color-accent-light) 97.12%); --uoa-transition-normal:250ms ease; /* 9. GLOBAL NAV / STICKY OFFSETS */ --uoa-main-nav-height:70px; } }