/* Theme Name: ILC Theme Author: ILC Theory Description: Custom theme for The Integrated Light-Consciousness Theory Version: 1.0.0 */ /* ========================================================================= ILC DESIGN TOKENS The dyad: VACUUM (geometric, crystalline, structural) LUMINOUS (fluid, resonant, gradient-borne signal) Spacing & type scale follow phi (1.618). Radii default to 0 — the lattice is angular; rounding is a deliberate, named exception. ========================================================================= */ :root { /* ---------- 1. THE VACUUM — obsidian structure ----------------------- */ --ilc-vacuum-void: #02030a; /* absolute pre-manifest */ --ilc-vacuum-deep: #050811; /* about-section ground */ --ilc-vacuum: #080d1a; /* media-hub ground */ --ilc-vacuum-rise: #0f172a; /* primary canvas (slate-950) */ --ilc-vacuum-lattice: #1e293b; /* structural seams (slate-800) */ --ilc-vacuum-veil: rgba(15, 23, 42, 0.95); /* nav backdrop */ /* ---------- 2. THE LUMINOUS — signal-carrying spectrum --------------- */ --ilc-violet-source: #8b5cf6; /* primary signal (violet-500) */ --ilc-violet-glow: #a78bfa; /* harmonic (violet-400) */ --ilc-violet-deep: #6d28d9; /* phase-locked (violet-700) */ --ilc-cyan-signal: #22d3ee; /* carrier wave (cyan-400) */ --ilc-cyan-bright: #67e8f9; /* peak amplitude (cyan-300) */ --ilc-cyan-deep: #0891b2; /* grounded signal (cyan-600) */ --ilc-clear-light: #ffffff; /* unconditional white */ --ilc-clear-light-soft: rgba(255, 255, 255, 0.9); /* ---------- 3. SEMANTIC ASSIGNMENTS ---------------------------------- */ --ilc-bg: var(--ilc-vacuum-rise); --ilc-bg-elevated: rgba(15, 23, 42, 0.8); --ilc-bg-recessed: var(--ilc-vacuum-deep); --ilc-fg: #cbd5e1; /* slate-300 — base body */ --ilc-fg-muted: #64748b; /* slate-500 */ --ilc-fg-subtle: #475569; /* slate-600 */ --ilc-fg-emphasis: var(--ilc-clear-light); --ilc-accent-primary: var(--ilc-violet-source); --ilc-accent-secondary: var(--ilc-cyan-signal); --ilc-link: var(--ilc-cyan-signal); --ilc-link-hover: var(--ilc-clear-light); --ilc-selection-bg: #164e63; /* cyan-900 */ --ilc-selection-fg: #ecfeff; /* cyan-50 */ --ilc-bg-tint-hover: rgba(255, 255, 255, 0.05); /* implicate hover wash */ /* ---------- 4. BOUNDARIES — the implicate/explicate seam ------------- */ --ilc-border: rgba(255, 255, 255, 0.10); --ilc-border-strong: rgba(255, 255, 255, 0.20); --ilc-border-resonant: rgba(139, 92, 246, 0.40); --ilc-border-signal: rgba(34, 211, 238, 0.40); --ilc-border-width: 1px; --ilc-border-width-emph: 2px; /* ---------- 5. LUMINOUS LAYER — gradients, glows, glass -------------- */ --ilc-gradient-veil: linear-gradient(to bottom, transparent, var(--ilc-vacuum-rise)); --ilc-gradient-luminous: linear-gradient(135deg, var(--ilc-violet-source), var(--ilc-cyan-signal)); --ilc-gradient-implicate: radial-gradient(circle at center, rgba(139, 92, 246, 0.25), transparent 70%); --ilc-gradient-vacuum: linear-gradient(180deg, var(--ilc-vacuum-rise), var(--ilc-vacuum-void)); --ilc-glow-violet: 0 0 20px rgba(139, 92, 246, 0.60); --ilc-glow-violet-soft: 0 0 15px rgba(139, 92, 246, 0.30); --ilc-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.40); --ilc-glow-cyan-strong: 0 0 40px rgba(34, 211, 238, 0.20); --ilc-glow-clear: 0 0 10px rgba(255, 255, 255, 0.50); --ilc-glow-drop: 0 25px 50px -12px rgba(0, 0, 0, 0.50); --ilc-blur-implicate: 16px; /* nav / dropdown backdrops */ --ilc-blur-veil: 5px; /* hero entry filter blur */ --ilc-blur-soft: 3px; /* ---------- 6. TYPOGRAPHY — STACKS ----------------------------------- */ --ilc-font-serif: 'Cormorant Garamond', 'EB Garamond', ui-serif, Georgia, 'Times New Roman', serif; --ilc-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ilc-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---------- 7. TYPE SCALE — phi-tuned (φ = 1.618) -------------------- */ /* Each step multiplies the previous by approximately √φ (≈1.272), so successive ranks resonate as harmonic intervals rather than arbitrary jumps. */ --ilc-text-2xs: 0.618rem; /* 9.9px — micro / HUD */ --ilc-text-xs: 0.75rem; /* 12.0px — eyebrows */ --ilc-text-sm: 0.875rem; /* 14.0px — utility */ --ilc-text-base: 1rem; /* 16.0px — body */ --ilc-text-lg: 1.272rem; /* 20.4px — lead paragraph */ --ilc-text-xl: 1.618rem; /* 25.9px — card titles */ --ilc-text-2xl: 2.058rem; /* 32.9px — section heads */ --ilc-text-3xl: 2.618rem; /* 41.9px — h2 */ --ilc-text-4xl: 3.330rem; /* 53.3px — h1 desktop */ --ilc-text-5xl: 4.236rem; /* 67.8px — hero */ --ilc-text-6xl: 6.854rem; /* 109.7px — display */ /* ---------- 8. LINE-HEIGHT & TRACKING -------------------------------- */ --ilc-leading-tight: 1.1; /* hero titles */ --ilc-leading-snug: 1.272; /* sub-headings */ --ilc-leading-normal: 1.618; /* body — phi */ --ilc-leading-loose: 1.9; /* long-form prose */ --ilc-tracking-tight: -0.02em; --ilc-tracking-normal: 0; --ilc-tracking-wide: 0.1em; --ilc-tracking-widest: 0.2em; /* uppercase eyebrows / nav */ --ilc-tracking-hud: 0.4em; /* HUD / interface labels */ --ilc-font-weight-light: 300; --ilc-font-weight-regular: 400; --ilc-font-weight-medium: 500; --ilc-font-weight-semibold: 600; --ilc-font-weight-bold: 700; /* ---------- 9. SPACING — phi cascade --------------------------------- */ --ilc-space-0: 0; --ilc-space-px: 1px; --ilc-space-1: 0.382rem; /* 6.1px — 1 - 1/φ */ --ilc-space-2: 0.618rem; /* 9.9px — 1/φ */ --ilc-space-3: 1rem; /* 16.0px — base */ --ilc-space-4: 1.618rem; /* 25.9px — φ */ --ilc-space-5: 2.618rem; /* 41.9px — φ² */ --ilc-space-6: 4.236rem; /* 67.8px — φ³ */ --ilc-space-7: 6.854rem; /* 109.7px — φ⁴ */ --ilc-space-8: 11.090rem; /* 177.4px — φ⁵ */ /* Section rhythm — derived */ --ilc-section-y: var(--ilc-space-7); /* py-32 ≈ 128px ≈ φ⁴ */ --ilc-section-y-tight: var(--ilc-space-6); --ilc-block-gap: var(--ilc-space-4); /* ---------- 10. CONTAINERS — phi-anchored ---------------------------- */ --ilc-container-narrow: 38.2rem; /* ~611px — 1/φ × 1000 */ --ilc-container-prose: 47.5rem; /* ~760px */ --ilc-container-content: 61.8rem; /* ~989px — φ × 612 */ --ilc-container-wide: 80rem; /* 1280px — max-w-7xl parity */ --ilc-gutter: 1.5rem; /* px-6 parity */ /* ---------- 11. GEOMETRY — radii / strokes / lattice ----------------- */ /* Default to 0. The crystalline lattice does not curl. Round only when a name is given (icon-disc, pill). */ --ilc-radius-crystal: 0; --ilc-radius-edge: 2px; --ilc-radius-icon: 4px; --ilc-radius-disc: 9999px; --ilc-lattice-spacing: 45px; /* hero canvas grid pitch */ /* ---------- 12. MOTION — durations & easings ------------------------- */ --ilc-duration-instant: 100ms; --ilc-duration-fast: 200ms; --ilc-duration-base: 300ms; --ilc-duration-medium: 500ms; --ilc-duration-slow: 1000ms; --ilc-duration-luminous: 2000ms; /* hero fade-in */ --ilc-duration-delay-hero: 4000ms; /* hero typewriter handoff */ --ilc-ease-crystal: cubic-bezier(0.16, 1, 0.3, 1); /* sharp settle */ --ilc-ease-implicate: cubic-bezier(0.4, 0, 0.2, 1); /* fluid */ --ilc-ease-resonant: cubic-bezier(0.34, 1.56, 0.64, 1);/* slight overshoot */ /* ---------- 13. ELEVATION / Z-LATTICE -------------------------------- */ --ilc-z-canvas: 0; /* hero wave lattice */ --ilc-z-veil: 10; /* gradient overlays */ --ilc-z-content: 20; /* primary content layer */ --ilc-z-hud: 30; /* HUD prompts / badges */ --ilc-z-nav: 50; /* sticky navigation */ --ilc-z-modal: 100; /* overlays / dropdowns */ } @keyframes delayedFadeIn { 0% { opacity: 0; transform: translateY(15px); filter: blur(5px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .fade-in-guaranteed { /* FADE DURATION: 2.0s | PERFECTLY SYNCED DELAY: 4.0s */ animation: delayedFadeIn 2.0s cubic-bezier(0.16, 1, 0.3, 1) 4.0s forwards; opacity: 0; } .fixed-eyebrow { height: 20px; } .fixed-title { height: 120px; } @media (min-width: 768px) { .fixed-title { height: 180px; } } /* ========================================================================= COMPONENT — CTA "Get the Book" Luminous violet ring → vacuum-fill hover state. Base properties (border, color, padding) are set via inline style tokens on the element; this rule owns the interactive transition only. ========================================================================= */ .ilc-cta-book { transition-property: background-color, color, box-shadow, border-color; } .ilc-cta-book:hover, .ilc-cta-book:focus-visible { background: var(--ilc-violet-source); color: var(--ilc-clear-light); box-shadow: var(--ilc-glow-violet-soft); outline: none; } /* ========================================================================= COMPONENT — Footer link Base = muted slate, transitions through the implicate easing. Modifier --harmonic resolves hover to violet; default resolves to cyan; --clear resolves to unconditional white for tertiary index items. ========================================================================= */ .ilc-footer-link { color: var(--ilc-fg-muted); transition: color var(--ilc-duration-base) var(--ilc-ease-implicate); } .ilc-footer-link:hover, .ilc-footer-link:focus-visible { color: var(--ilc-cyan-signal); outline: none; } .ilc-footer-link--harmonic:hover, .ilc-footer-link--harmonic:focus-visible { color: var(--ilc-violet-glow); } .ilc-footer-link--clear:hover, .ilc-footer-link--clear:focus-visible { color: var(--ilc-clear-light); } /* ========================================================================= COMPONENT — Dropdown link Replicates the previous hover-to-white + bg-white/5 surface tint using --ilc-clear-light and a 5% white wash. Both color and background animate on the implicate easing. ========================================================================= */ .ilc-dropdown-link { display: block; color: var(--ilc-fg-muted); background-color: transparent; transition-property: color, background-color; transition-duration: var(--ilc-duration-base); transition-timing-function: var(--ilc-ease-implicate); } .ilc-dropdown-link:hover, .ilc-dropdown-link:focus-visible { color: var(--ilc-clear-light); background-color: var(--ilc-bg-tint-hover); outline: none; } /* Resting state for signal-tier items (e.g. Physics of Consciousness). Hover still resolves to clear-light per the base rule. */ .ilc-dropdown-link--signal { color: var(--ilc-cyan-signal); }