/* ================================================= */ /* === [V26] KINETIC GAUGE ENGINE: SYSTEM BRAIN == */ /* ================================================= */ /* 1. REGISTRATION (Browser API Setup) */ @property --sunX { syntax: ""; inherits: true; initial-value: 50%; } @property --sunY { syntax: ""; inherits: true; initial-value: 50%; } /* 2. THE DESIGN SYSTEM (The "Brain" / Source of Truth) */ :root { /* Increase this to push the sun center-point into the right margin */ --content-limit-percent: 37%; --content-limit: 600px; /* --- FLUID GRADIENT CONTROL --- */ --nav-gradient-stop: 45vw; --navbar-shelf-height: var(--sys-space-3); /* ================================================= */ /* === [A] THE INGREDIENTS (The Raw Physics) === */ /* ================================================= */ /* --- THE PIGMENTS (The DNA) --- */ --pigment-pine-rgb: 1, 98, 75; --pigment-violet-rgb: 156, 39, 176; --pigment-magenta-rgb: 255, 0, 255; --pigment-white-rgb: 255, 255, 255; --pigment-charcoal-rgb: 51, 51, 51; --pigment-black-rgb: 10, 10, 10; --pigment-crimson-rgb: 155, 30, 30; --pigment-amber-rgb: 255, 191, 0; --pigment-sky-rgb: 0, 122, 255; /* --- A.2 THE GAUGE (Physics) --- */ /* HARMONIC SCALE REFERENCE (8-Factor Multiplier) Gauge | Factor | Space (80px Base) | Phonic Label 1 | 0.08 | 6.4px | (Muted) 2 | 0.16 | 12.8px | (Whisper) 3 | 0.24 | 19.2px | (Standard) 4 | 0.32 | 25.6px | (Talk) 5 | 0.40 | 32.0px | 6 | 0.48 | 38.4px | 7 | 0.56 | 44.8px | 8 | 0.64 | 51.2px | (Shout) 9 | 0.72 | 57.6px | 10 | 0.84 | 67.2px | (Boost) 11 | 0.96 | 76.8px | (Redline) */ --gauge-1: 0.08; --gauge-2: 0.16; --gauge-3: 0.24; --gauge-4: 0.32; --gauge-5: 0.4; --gauge-6: 0.48; --gauge-7: 0.56; --gauge-8: 0.64; --gauge-9: 0.72; --gauge-10: 0.84; --gauge-11: 0.96; /* WORLD ANCHORS */ --sys-world-base-mobile: 3rem; /* 48px */ --sys-world-base-desktop: 5rem; /* 80px */ --sys-world-base-dynamic: var(--sys-world-base-mobile); } /* --- A.3 RECALIBRATION --- */ @media screen and (min-width: 810px) { :root { --sys-world-base-dynamic: var(--sys-world-base-desktop); } } :root { /* ================================================= */ /* === [B] THE SWITCHBOARDS (Semantic Roles) === */ /* ================================================= */ /* --- B.1 COLOR ROLES --- */ --sys-role-primary-rgb: var(--pigment-pine-rgb); --sys-role-accent-rgb: var(--pigment-violet-rgb); --sys-role-action-rgb: var(--pigment-magenta-rgb); --sys-role-canvas-rgb: var(--pigment-white-rgb); --sys-role-neutral-rgb: var(--pigment-charcoal-rgb); --sys-role-void-rgb: var(--pigment-black-rgb); --sys-role-error-rgb: var(--pigment-crimson-rgb); --sys-role-warning-rgb: var(--pigment-amber-rgb); --sys-role-info-rgb: var(--pigment-sky-rgb); --sys-role-success-rgb: var(--pigment-pine-rgb); /* --- B.2 DERIVED SOLIDS --- */ --sys-color-primary: rgb(var(--sys-role-primary-rgb)); --sys-color-accent: rgb(var(--sys-role-accent-rgb)); --sys-color-action: rgb(var(--sys-role-action-rgb)); --sys-color-canvas: rgb(var(--sys-role-canvas-rgb)); --sys-color-neutral: rgb(var(--sys-role-neutral-rgb)); --sys-color-void: rgb(var(--sys-role-void-rgb)); --sys-color-error: rgb(var(--sys-role-error-rgb)); --sys-color-warning: rgb(var(--sys-role-warning-rgb)); --sys-color-info: rgb(var(--sys-role-info-rgb)); --sys-color-success: rgb(var(--sys-role-success-rgb)); /* ================================================= */ /* === [E] THE ALPHA MATRIX (Unabridged 1-11) === */ /* ================================================= */ /* PRIMARY (PINE) 1-11 */ --sys-color-primary-alpha-1: rgba(var(--sys-role-primary-rgb), var(--gauge-1)); --sys-color-primary-alpha-2: rgba(var(--sys-role-primary-rgb), var(--gauge-2)); --sys-color-primary-alpha-3: rgba(var(--sys-role-primary-rgb), var(--gauge-3)); --sys-color-primary-alpha-4: rgba(var(--sys-role-primary-rgb), var(--gauge-4)); --sys-color-primary-alpha-5: rgba(var(--sys-role-primary-rgb), var(--gauge-5)); --sys-color-primary-alpha-6: rgba(var(--sys-role-primary-rgb), var(--gauge-6)); --sys-color-primary-alpha-7: rgba(var(--sys-role-primary-rgb), var(--gauge-7)); --sys-color-primary-alpha-8: rgba(var(--sys-role-primary-rgb), var(--gauge-8)); --sys-color-primary-alpha-9: rgba(var(--sys-role-primary-rgb), var(--gauge-9)); --sys-color-primary-alpha-10: rgba(var(--sys-role-primary-rgb), var(--gauge-10)); --sys-color-primary-alpha-11: rgba(var(--sys-role-primary-rgb), var(--gauge-11)); /* ACCENT (VIOLET) 1-11 */ --sys-color-accent-alpha-1: rgba(var(--sys-role-accent-rgb), var(--gauge-1)); --sys-color-accent-alpha-2: rgba(var(--sys-role-accent-rgb), var(--gauge-2)); --sys-color-accent-alpha-3: rgba(var(--sys-role-accent-rgb), var(--gauge-3)); --sys-color-accent-alpha-4: rgba(var(--sys-role-accent-rgb), var(--gauge-4)); --sys-color-accent-alpha-5: rgba(var(--sys-role-accent-rgb), var(--gauge-5)); --sys-color-accent-alpha-6: rgba(var(--sys-role-accent-rgb), var(--gauge-6)); --sys-color-accent-alpha-7: rgba(var(--sys-role-accent-rgb), var(--gauge-7)); --sys-color-accent-alpha-8: rgba(var(--sys-role-accent-rgb), var(--gauge-8)); --sys-color-accent-alpha-9: rgba(var(--sys-role-accent-rgb), var(--gauge-9)); --sys-color-accent-alpha-10: rgba(var(--sys-role-accent-rgb), var(--gauge-10)); --sys-color-accent-alpha-11: rgba(var(--sys-role-accent-rgb), var(--gauge-11)); /* ACTION (MAGENTA) 1-11 */ --sys-color-action-alpha-1: rgba(var(--sys-role-action-rgb), var(--gauge-1)); --sys-color-action-alpha-2: rgba(var(--sys-role-action-rgb), var(--gauge-2)); --sys-color-action-alpha-3: rgba(var(--sys-role-action-rgb), var(--gauge-3)); --sys-color-action-alpha-4: rgba(var(--sys-role-action-rgb), var(--gauge-4)); --sys-color-action-alpha-5: rgba(var(--sys-role-action-rgb), var(--gauge-5)); --sys-color-action-alpha-6: rgba(var(--sys-role-action-rgb), var(--gauge-6)); --sys-color-action-alpha-7: rgba(var(--sys-role-action-rgb), var(--gauge-7)); --sys-color-action-alpha-8: rgba(var(--sys-role-action-rgb), var(--gauge-8)); --sys-color-action-alpha-9: rgba(var(--sys-role-action-rgb), var(--gauge-9)); --sys-color-action-alpha-10: rgba(var(--sys-role-action-rgb), var(--gauge-10)); --sys-color-action-alpha-11: rgba(var(--sys-role-action-rgb), var(--gauge-11)); /* VOID (ATMOSPHERE) 1-11 */ --sys-color-void-alpha-1: rgba(var(--sys-role-void-rgb), var(--gauge-1)); --sys-color-void-alpha-2: rgba(var(--sys-role-void-rgb), var(--gauge-2)); --sys-color-void-alpha-3: rgba(var(--sys-role-void-rgb), var(--gauge-3)); --sys-color-void-alpha-4: rgba(var(--sys-role-void-rgb), var(--gauge-4)); --sys-color-void-alpha-5: rgba(var(--sys-role-void-rgb), var(--gauge-5)); --sys-color-void-alpha-6: rgba(var(--sys-role-void-rgb), var(--gauge-6)); --sys-color-void-alpha-7: rgba(var(--sys-role-void-rgb), var(--gauge-7)); --sys-color-void-alpha-8: rgba(var(--sys-role-void-rgb), var(--gauge-8)); --sys-color-void-alpha-9: rgba(var(--sys-role-void-rgb), var(--gauge-9)); --sys-color-void-alpha-10: rgba(var(--sys-role-void-rgb), var(--gauge-10)); --sys-color-void-alpha-11: rgba(var(--sys-role-void-rgb), var(--gauge-11)); /* CANVAS (LIFT) */ --sys-color-canvas-alpha-1: rgba(var(--sys-role-canvas-rgb), var(--gauge-1)); --sys-color-canvas-alpha-2: rgba(var(--sys-role-canvas-rgb), var(--gauge-2)); --sys-color-canvas-alpha-3: rgba(var(--sys-role-canvas-rgb), var(--gauge-3)); --sys-color-canvas-alpha-4: rgba(var(--sys-role-canvas-rgb), var(--gauge-4)); --sys-color-canvas-alpha-5: rgba(var(--sys-role-canvas-rgb), var(--gauge-5)); --sys-color-canvas-alpha-6: rgba(var(--sys-role-canvas-rgb), var(--gauge-6)); --sys-color-canvas-alpha-7: rgba(var(--sys-role-canvas-rgb), var(--gauge-7)); --sys-color-canvas-alpha-8: rgba(var(--sys-role-canvas-rgb), var(--gauge-8)); --sys-color-canvas-alpha-9: rgba(var(--sys-role-canvas-rgb), var(--gauge-9)); --sys-color-canvas-alpha-10: rgba(var(--sys-role-canvas-rgb), var(--gauge-10)); --sys-color-canvas-alpha-11: rgba(var(--sys-role-canvas-rgb), var(--gauge-11)); /* ================================================= */ /* === [V6] THE CREATOR: 1.414 HARMONIC SCALE === */ /* ================================================= */ /* ESTIMATED VALUES BASED ON THE 1.414 AUGMENTED FOURTH RATIO, CALIBRATED FOR A MOBILE-FIRST APPROACH WITH A 16px BASE. THESE VALUES SHOULD BE TESTED AND ADJUSTED BASED ON SPECIFIC DESIGN AND CONTENT NEEDS. */ /* 1. FONT DNA */ --font-heading: "Poppins", sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-story: "Playfair Display", serif; /* ========================================================================== RESONANT TYPOGRAPHY CONSTITUTION (v1.0) -------------------------------------------------------------------------- VOICE: Creator Archetype (High-tension, Engineered, Precise) SCALE: 1.414 Augmented Fourth (Non-melodic / Dramatic) FONTS: Poppins (Display/Lead) | Inter (Body/UI) STRATEGY: Fluid-Optical (No Media Queries) ========================================================================== */ /* 1. THE 11-TIER CLAMP MATRIX (1.414 Augmented Fourth) */ --fs-t1: clamp(2.5rem, 10vw, 6rem); /* Hero Display */ --fs-t2: clamp(1.75rem, 0.5rem + 7vw, 4.25rem); /* Page Title */ --fs-t3: clamp(1.25rem, 0.4rem + 5vw, 3rem); /* Section Head */ --fs-t4: clamp(1.15rem, 0.3rem + 3.5vw, 2.15rem); /* Sub-title */ --fs-t5: clamp(1.1rem, 0.2rem + 2.5vw, 1.5rem); /* Minor Head */ --fs-t6: clamp(1.05rem, 0.1rem + 2vw, 1.25rem); /* Lead / Intro (Poppins wt600) */ --fs-t7: clamp(1rem, 0.8rem + 0.5vw, 1.125rem); /* Body Main (Inter wt400) */ --fs-t8: clamp(0.875rem, 0.75rem + 0.3vw, 1rem); /* Body Small */ --fs-t9: clamp(0.8rem, 0.7rem + 0.2vw, 0.875rem); /* Caption */ --fs-t10: clamp(0.75rem, 0.68rem + 0.1vw, 0.8rem); /* Helper / Meta */ --fs-t11: clamp(0.7rem, 0.65rem + 0.1vw, 0.75rem); /* Legal / Fine */ /* 2. OPTICAL LINE HEIGHTS (Unitless Multipliers) */ /* TIGHTER RANGE: 1.15 on Mobile -> 1.05 on Desktop The 0.08 multiplier makes the "tightening" more aggressive as the screen grows. */ --lh-display-hero: clamp(1.05, 1.25 - 0.08 * 1vw, 1.15); /* Tightens dynamically from 1.2 to 1.1 as font scales up */ --lh-display: clamp(1.1, 1.3 - 0.05 * 1vw, 1.2); /* T1-T3 */ --lh-heading: 1.25; /* T4-T5 */ --lh-lead: 1.4; /* T6 (Poppins wt600) */ --lh-body: 1.6; /* T7-T8 (Inter wt400) */ --lh-small: 1.45; /* T9-T11 */ /* 3. PROPORTIONAL LETTER SPACING (Relative em units) */ --ls-display: -0.02em; /* T1-T3 (Poppins Tight) */ --ls-heading: -0.015em; /* T4-T6 (Poppins Subtle) */ --ls-normal: 0; /* T7-T8 (Inter Standard) */ --ls-wide: 0.025em; /* T9 (Breathing Room) */ --ls-micro: 0.05em; /* T10-T11 (Legibility) */ /* 4. STORY OVERRIDE (Playfair Display at T6 and WT400) */ --lh-story: 1.5; /* Elegant breathing room for high-contrast serifs */ --ls-story: 0.015em; /* Prevents italic serifs from "tangling" */ /* IMPLEMENTATION GUIDELINES: - T1-T6: Use Poppins. Weights 600-700. - T7-T11: Use Inter. Weights 400. - Avoid fixed pixel heights/spacings to preserve fluid resonance. */ /* --- B.3 PHONIC TYPE SYSTEM --- */ /* REDLINE: Maximum contrast for critical alerts. Black (10, 10, 10) */ --sys-color-type-redline: rgb(var(--sys-color-void)); /* SHOUT: High contrast for emphasis without the severity of redline. Charcoal (51, 51, 51*/ --sys-color-type-shout: rgb(var(--sys-color-neutral)); /* TALK: 90% Black (10, 10, 10) mixed with 10% White (255, 255, 255) */ --sys-color-type-talk: color-mix(in srgb, var(--sys-color-void), var(--sys-color-canvas) 10%); /* WHISPER: 85% Black (10, 10, 10) mixed with 15% White (255, 255, 255) */ --sys-color-type-whisper: color-mix(in srgb, var(--sys-color-void), var(--sys-color-canvas) 15%); /* Muted: 80% Black (10, 10, 10) mixed with 20% White (255, 255, 255) */ --sys-color-type-muted: color-mix(in srgb, var(--sys-color-void), var(--sys-color-canvas) 20%); /* ================================================= */ /* === [D] KINETIC GEOMETRY (Unabridged 1-11) === */ /* ================================================= */ /* --- D.1 SPACE (Dynamic Base Scaling) --- */ --sys-space-1: calc(var(--gauge-1) * var(--sys-world-base-dynamic)); /* 6.4px */ --sys-space-2: calc(var(--gauge-2) * var(--sys-world-base-dynamic)); /* 12.8px */ --sys-space-3: calc(var(--gauge-3) * var(--sys-world-base-dynamic)); /* 19.2px */ --sys-space-4: calc(var(--gauge-4) * var(--sys-world-base-dynamic)); /* 25.6px */ --sys-space-5: calc(var(--gauge-5) * var(--sys-world-base-dynamic)); /* 32.0px */ --sys-space-6: calc(var(--gauge-6) * var(--sys-world-base-dynamic)); /* 38.4px */ --sys-space-7: calc(var(--gauge-7) * var(--sys-world-base-dynamic)); /* 44.8px */ --sys-space-8: calc(var(--gauge-8) * var(--sys-world-base-dynamic)); /* 51.2px */ --sys-space-9: calc(var(--gauge-9) * var(--sys-world-base-dynamic)); /* 57.6px */ --sys-space-10: calc(var(--gauge-10) * var(--sys-world-base-dynamic)); /* 67.2px */ --sys-space-11: calc(var(--gauge-11) * var(--sys-world-base-dynamic)); /* 76.8px */ /* --- D.2 RADIUS (Static 32px Radius Base) --- */ --sys-radius-1: calc(var(--gauge-1) * 2rem); /* 2.5px */ --sys-radius-2: calc(var(--gauge-2) * 2rem); /* 5.1px */ --sys-radius-3: calc(var(--gauge-3) * 2rem); /* 7.6px */ --sys-radius-4: calc(var(--gauge-4) * 2rem); /* 10.2px */ --sys-radius-5: calc(var(--gauge-5) * 2rem); /* 12.8px */ --sys-radius-6: calc(var(--gauge-6) * 2rem); /* 15.3px */ --sys-radius-7: calc(var(--gauge-7) * 2rem); /* 17.9px */ --sys-radius-8: calc(var(--gauge-8) * 2rem); /* 20.4px */ --sys-radius-9: calc(var(--gauge-9) * 2rem); /* 23.0px */ --sys-radius-10: calc(var(--gauge-10) * 2rem); /* 26.8px */ --sys-radius-11: 100px; /* Pill */ /* ================================================= */ /* === [C] ATMOSPHERICS (Depth & Glow Rig) === */ /* ================================================= */ /* THE HALO: 1.5px separator + multi-layer violet bloom */ --sys-shadow-halo-standard: 0 0 0 1.5px var(--sys-color-canvas-alpha-10), 0 0.625rem 1.875rem rgba(0, 0, 0, 0.15), 0 0 0.9375rem var(--sys-color-accent-alpha-9), 0 0 3.125rem var(--sys-color-accent-alpha-3); /* THE MODAL: Depth layers using Void-4 and Void-8 */ --sys-shadow-depth-modal: 0 0.5rem 2rem var(--sys-color-void-alpha-4), /* Talk Shadow */ 0 1.25rem 5rem var(--sys-color-void-alpha-8); /* Shout Shadow */ /* THE FOCUS: Safety gap + Primary Kinetic glow */ --sys-shadow-focus-primary: 0 0 0 3px var(--sys-color-canvas), 0 0 0 6px var(--sys-color-primary-alpha-4); /* THE MUFFLER TOKENS: Refined containment for interactive elements */ --sys-shadow-muffler-action: 0 0 0.5rem var(--sys-color-action-alpha-4), 0 0 1rem var(--sys-color-action-alpha-2); --sys-shadow-muffler-void: 0 0 0.5rem var(--sys-color-void-alpha-4), 0 0 1rem var(--sys-color-void-alpha-2); /* BAKE: On-Canvas Solids (Opacity flattened against white) */ --sys-color-primary-on-canvas-1-bg: linear-gradient(var(--sys-color-primary-alpha-1), var(--sys-color-primary-alpha-1)), var(--sys-color-canvas); /* SEMANTIC FOCUS DEFINITION DX NOTE: We use a multi-layered shadow to create a 'Halo' effect. Layer 1: Canvas color (Space 1) creates a gap to prevent color bleeding. Layer 2: Primary color (Space 2) creates the high-visibility indicator. */ --sys-focus-ring-gap: var(--sys-space-1); --sys-focus-ring-thickness: var(--sys-space-2); --sys-shadow-focus-halo: 0 0 0 var(--sys-focus-ring-gap) var(--sys-color-canvas), 0 0 0 var(--sys-focus-ring-thickness) var(--sys-color-primary); /* ================================================= */ /* === [F] SEMANTIC ALIASES (The Handshake) === */ /* ================================================= */ --sys-space-body-base: var(--sys-space-2); --sys-spacing-cta-v: var(--sys-space-2); --sys-spacing-cta-h: var(--sys-space-4); --sys-radius-button: var(--sys-radius-3); --sys-radius-modal: var(--sys-radius-8); --sys-spacing-gutter: var(--sys-space-2); --sys-spacing-section-v: var(--sys-space-8); --sys-spacing-hero-v: var(--sys-space-10); /* --- 1. GLOBAL STACK (The Foundation) --- */ --layer-sink: -1; --layer-surface: 1; --layer-raised: 10; --layer-nav: 1000; --layer-overlay: 2000; --layer-topmost: 3000; /* --- 2. COMPONENT TOKENS (The Mapping) --- */ /* This is where the UX Engineering "magic" happens. You map specific component needs to the global stack. */ /* Navbar Group */ --z-nav-main: var(--layer-nav); --z-nav-accent: 1001; /* Explicitly defined */ --z-nav-toggle: 1002; /* Explicitly defined */ /* Interaction Group */ --z-interaction-focus: 11; /* For your Mirror Accents */ /* Modal Group */ --z-modal-backdrop: var(--layer-overlay); --z-modal-dialog: 2001; /* --- B.5 MOTION ENGINE (The Personality) --- */ /* DX NOTE: We use specific cubic-beziers to define 'The Creator' archetype. Standard: Balanced for UI (Buttons/Dots) Inertia: Heavy and smooth (Cards/Layout) Kinetic: Elastic and responsive (Modals/Popups) */ --sys-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --sys-ease-inertia: cubic-bezier(0.15, 1, 0.3, 1); --sys-ease-kinetic: cubic-bezier(0.34, 1.56, 0.64, 1); --sys-duration-fast: 0.2s; --sys-duration-mid: 0.3s; --sys-duration-slow: 0.4s; /* COMPOUND TOKENS (The "One-Stop" Transition) */ --sys-transition-standard: var(--sys-duration-mid) var(--sys-ease-standard); --sys-transition-snappy: var(--sys-duration-fast) var(--sys-ease-standard); --sys-transition-smooth: var(--sys-duration-slow) var(--sys-ease-inertia); --sys-transition-pop: var(--sys-duration-slow) var(--sys-ease-kinetic); /* Universal height for 'Mirror' accents and global navigation rails */ --accent-rail-height: 4px; } /* ================================================= */ /* == [V25] STEADY FLOOD & HIGH-FIDELITY RIG PART B == */ /* ================================================= */ /* 2. THE CHOREOGRAPHY (Keeps your perfected Desktop + Universal Pulse Mobile) */ @keyframes completePinball { /* Only X and Y are animated. Size is now a constant property of the background. */ 0% { --sunX: 10%; --sunY: 5%; } 24% { --sunX: calc(50% + var(--content-limit-percent)); --sunY: 68%; } 43% { --sunX: calc(50% - var(--content-limit-percent)); --sunY: 85%; } 61% { --sunX: calc(50% + var(--content-limit-percent)); --sunY: 92%; } 79% { --sunX: calc(50% - var(--content-limit-percent)); --sunY: 96%; } 100% { --sunX: calc(50% + var(--content-limit-percent)); --sunY: 91%; } } @media screen and (max-width: 809px) { @keyframes completePinball { /* START: Initial position at the very top */ 0% { --sunX: 15%; --sunY: 10%; } /* THE ACCELERATED ARCH: By moving this to 15%, the light reaches the center-line much faster as the user starts their first scroll. */ 15% { --sunX: 50%; --sunY: 35%; /* Mid-point of the swing */ } /* THE STAGE LIGHT (Extended): Now the light is centered from 25% scroll all the way to 85%. This covers the bulk of your feature cards. */ 25%, 85% { --sunX: 50%; --sunY: 50%; } /* LANDING: Quick drop to the bottom for the final contact CTAs */ 100% { --sunX: 50%; --sunY: 95%; } } } /* ================================================= */ /* == [V26] STEADY FLOOD & HIGH-FIDELITY RIG PART C == */ /* ================================================= */ /* 3. THE RENDERER: Stable & GPU Accelerated */ body::before { content: ""; position: fixed; inset: 0; /* GPU PROMOTION: Forces the background onto its own hardware layer */ will-change: transform; transform: translateZ(0); contain: strict; /* Tells the browser this element never affects the layout of others */ /* RE-SIMPLIFIED GRADIENT: Removed the Noise URL to prevent the 'Black Screen' error. */ background: radial-gradient( circle at var(--sunX) var(--sunY), rgba(1, 98, 75, 1) 0%, rgba(1, 98, 75, 0.9) 45%, rgba(1, 98, 75, 0.5) 75%, rgba(1, 98, 75, 0.1) 92%, transparent 400% ); /* NOTE: Using hex #010101 instead of --sys-color-void to prevent 8-bit color banding in the radial-gradient transition. */ background-color: #010101; z-index: var(--layer-sink); pointer-events: none; /* THE LIQUID DAMPENER */ transition: --sunX 2.5s var(--sys-ease-inertia), --sunY 2.5s var(--sys-ease-inertia); } /* The 'Spine' of the site */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sys-space-3); width: 100%; } /* ================================================= */ /* === 1. GLOBAL ENGINE: Reset & Variables === */ /* ================================================= */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; scrollbar-gutter: stable; /* THE INERTIA BRIDGE CONTROLLER: The html tag now drives the values, but doesn't render the gradient. */ animation: completePinball linear; animation-timeline: scroll(); } /* The "Stability" Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 5. GLOBAL TAG RE-CALIBRATION */ p { font-family: var(--font-body); font-size: var(--fs-t7) !important; line-height: var(--lh-body); max-width: 65ch; /* optimal line length research */ } /* 1.5 ACCESSIBILITY: Precision Focus Separation DX NOTE: This pattern ensures high-contrast visibility for keyboard users while adhering to the Kinetic Gauge spacing engine. */ .button:focus-visible { outline: none !important; /* The halo automatically scales with the world-base-dynamic */ box-shadow: var(--sys-shadow-focus-halo) !important; /* UX NOTE: Ensuring the focus ring hugs the specific geometry of buttons */ border-radius: var(--sys-radius-button) !important; position: relative; z-index: var(--layer-raised); } .navbar__link:focus-visible { outline: none !important; box-shadow: var(--sys-shadow-focus-halo) !important; /* UX NOTE: Sharp edges for nav items provide better alignment with the 'Shelf' */ border-radius: 0 !important; position: relative; z-index: var(--layer-topmost); } /* Global Fallback for Generic Interactive Elements (Inputs, Selects, etc.) */ :focus-visible:not(.button):not(.navbar__link) { outline: none !important; box-shadow: var(--sys-shadow-focus-halo) !important; } /* 1.6 FORM & INTERACTION RESET */ input, textarea, button { font-family: var(--font-body); font-size: 1rem; } /* 1.7 ACCESSIBILITY: Skip to Main Content DX NOTE: Essential for keyboard users to bypass nav menus. Visualized only on focus to maintain "The Creator" aesthetic. */ .skip-link { position: absolute; top: -100%; /* Deeply hidden off-screen */ left: var(--sys-space-3); background-color: var(--sys-color-action); /* High-visibility Magenta */ color: var(--sys-color-canvas); padding: var(--sys-space-2) var(--sys-space-4); font-family: var(--font-heading); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--sys-radius-3) var(--sys-radius-3); z-index: var(--layer-topmost); /* Stays above the Pinball and Nav */ transition: top var(--sys-transition-standard); } .skip-link:focus { top: 0; /* Drops into view on first TAB press */ outline: none; box-shadow: 0 0 0 0.125rem var(--sys-color-canvas), 0 0 0 0.3125rem var(--sys-color-primary) !important; } /* ================================================= */ /* === 2. NAVBAR: The "Chrome Tab" Architecture === */ /* ================================================= */ .navbar { background-color: var(--sys-color-neutral); /* CHARCOAL */ display: flex; align-items: stretch; justify-content: space-between; position: sticky; top: 0; z-index: var(--z-nav-main); border: none !important; overflow: visible; /* MOBILE LAYOUT BASE */ flex-flow: row wrap; align-items: center; position: relative; } /* THE ACCENT LINE (Top Nav) */ header > .navbar::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--accent-rail-height); background: linear-gradient( to right, transparent 5%, var(--sys-color-accent) 15%, var(--sys-color-accent) 85%, transparent 95% ); z-index: var(--z-nav-accent); } /* THE SAFETY SHELF (Fades Left to Blend) */ header > .navbar::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: var(--navbar-shelf-height); z-index: var(--layer-sink); display: none; /* Desktop Only via Media Query */ background: linear-gradient( to bottom, var(--sys-color-primary) 0%, var(--sys-color-primary) 0.75rem, transparent 100% ); -webkit-mask-image: linear-gradient(to right, transparent 0px, transparent 40px, black 150px); mask-image: linear-gradient(to right, transparent 0px, transparent 40px, black 150px); pointer-events: none; } /* 3. THE BRAND LOGO */ .navbar__logo { font-family: "Poppins", sans-serif; font-weight: 800; font-size: var(--fs-t5); line-height: 1; letter-spacing: var(--ls-wide); color: var(--sys-color-canvas); /* AUDIT: Synced to Canvas */ text-decoration: none; display: inline-flex; align-items: center; margin-right: auto; padding: var(--sys-space-1) var(--sys-space-3); /* AUDIT: Gauge 1 / Gauge 3 */ white-space: nowrap; flex-shrink: 0; transition: transform var(--sys-transition-snappy), color var(--sys-transition-snappy); order: 0; z-index: var(--z-nav-toggle); } .logo__suffix { color: var(--sys-color-action); /* AUDIT: Synced to Action (Magenta) */ transition: color var(--sys-transition-snappy), text-shadow var(--sys-transition-snappy); } .navbar__logo:hover { transform: translateY(-1px); } .navbar__logo:hover .logo__suffix { color: var(--sys-color-canvas); /* AUDIT: Using Role-RGB + Engine Gauges for Bloom */ text-shadow: 0 0 5px var(--sys-color-action-alpha-10), 0 0 15px var(--sys-color-action-alpha-5); } /* 1. THE TOGGLE (Now a Semantic Button) */ .navbar__toggle { display: flex; align-items: center; justify-content: center; /* Resetting Button Defaults */ background: none; border: none; font: inherit; color: var(--sys-color-action); padding: var(--sys-space-4) var(--sys-space-6); cursor: pointer; position: relative; /* Layout Logic */ margin-left: auto; order: 2; transition: background-color var(--sys-transition-snappy), color var(--sys-transition-snappy); } .navbar__toggle-icon { width: 1.5rem; height: 1.125rem; display: flex; flex-direction: column; justify-content: space-between; } .navbar__toggle-icon span { display: block; width: 100%; height: 2px; background-color: currentColor; transition: all var(--sys-transition-standard); border-radius: 0.125rem; } /* HAMBURGER ANIMATION (Triggered by .responsive class from JS) */ .navbar.responsive .navbar__toggle-icon span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); } .navbar.responsive .navbar__toggle-icon span:nth-child(2) { opacity: 0; transform: translateX(-1.25rem); } .navbar.responsive .navbar__toggle-icon span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); } /* THE HAMBURGER: Atmospheric Interaction */ .navbar__toggle:hover { /* Snapping 32% (Talk) for a clear 'Handshake' interaction */ background-color: var(--sys-color-void-alpha-4); /* Ensuring the icon remains high-contrast (Pigment: White) */ color: var(--sys-color-canvas); /* UX Tip: Ensure the transition feels 'Kinetic' */ transition: background-color var(--sys-transition-snappy); } /* 2. THE LINKS CONTAINER (Triggered by .responsive class) */ .navbar__links { display: flex; flex-direction: column; width: 100%; order: 3; max-height: 0; overflow: hidden; transition: max-height var(--sys-transition-smooth); } .navbar.responsive .navbar__links { max-height: 500px; /* Expands when JS toggles .responsive */ } .navbar__link { /* 1. TYPOGRAPHY */ font-family: var(--font-body); font-size: var(--fs-t7); color: var(--sys-color-canvas); /* 2. RESET & LAYOUT */ background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; line-height: 1; width: 100%; padding: var(--sys-space-4) var(--sys-space-6); /* 3. INTERACTION RIG */ transition: all var(--sys-transition-snappy); position: relative; text-decoration: none; white-space: nowrap; } /* THE HOVER: Fixed White Text */ .navbar__link:hover:not(.active) { background-color: var(--sys-color-canvas-alpha-1); color: var(--sys-color-canvas) !important; box-shadow: inset 0 0 0 2px var(--sys-color-canvas-alpha-2); } /* THE ACCENT RAIL ON HOVER */ .navbar__link:hover:not(.active)::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--accent-rail-height); background-color: var(--sys-color-action); /* AUDIT: Synced to Action */ z-index: var(--z-nav-toggle); } /* THE ACTIVE TAB: The 'Bridge' */ .navbar__link.active { background-color: var(--sys-color-primary); /* AUDIT: Solid Pine */ color: var(--sys-color-canvas); z-index: var(--z-nav-accent); margin-bottom: -3px; /* Pulls tab down to bridge the gap */ /* AUDIT: Dead Link Logic (JS-Safe) */ cursor: default !important; pointer-events: none; } /* THE BRACKETS (Desktop Only) */ .navbar__link.active::before, .navbar__link.active::after { content: ""; position: absolute; bottom: 0; width: 1.25rem; height: 1.25rem; background-color: transparent; box-shadow: 0 0.625rem 0 0 var(--sys-color-primary); display: none; } .navbar__link.active::before { left: -1.1875rem; border-bottom-right-radius: 1.1875rem; } .navbar__link.active::after { right: -1.1875rem; border-bottom-left-radius: 1.1875rem; } /* --- DESKTOP BREAKPOINT (810px+) --- */ @media screen and (min-width: 810px) { header > .navbar::after { display: block; } .navbar__toggle { display: none; /* Hamburger disappears on desktop */ } .navbar { flex-flow: row nowrap; align-items: stretch; } .navbar__links { flex-direction: row; justify-content: flex-end; width: auto; flex: 1 1 auto; min-width: 0; max-height: none; /* Always visible on desktop */ overflow: visible; } .navbar__link { width: auto; /* Fluid padding that 'tucks in' between 810px and 1100px */ padding: var(--sys-space-2) clamp(var(--sys-space-2), 1vw, var(--sys-space-4)); flex-shrink: 1; min-width: 0; white-space: nowrap; /* Keeps your 'Wedge Brackets' aligned */ display: flex; align-items: center; } .navbar__link.active::before, .navbar__link.active::after { display: block; } .navbar__link.active { /* Mapping 0.75rem (12px) to closest system token (12.8px) */ border-radius: var(--sys-radius-5) var(--sys-radius-5) 0 0; flex-shrink: 0; white-space: nowrap; /* Ensures the text never wraps */ min-width: fit-content; } } /* Optical Adjustment for intrinsic Font Awesome 4.7 LinkedIn glyph offset */ .navbar__link .fa-linkedin, .footer__link .fa-linkedin, .button-group .fa-linkedin { transform: translateY(-1px); } .button-group { flex-direction: row; /* Horizontal Buttons */ } /* ================================================= */ /* === [V27] REFACTORED: ATMOSPHERIC FEATURE BLOCK === */ /* ================================================= */ /* --- 1. THE BLOCK (Container) --- */ .feature-block { background-color: var(--sys-color-canvas); /* UPDATED: Vertical Gauge 8 (64px) / Horizontal Gauge 5 (40px) */ padding: var(--sys-spacing-section-v) var(--sys-space-5); margin-bottom: var(--sys-space-3); /* Clean 16px Gutter Splash */ width: 100%; display: block; z-index: var(--layer-surface); position: relative; /* PREMIUM BORDER: 2px wide to catch the Arched Drift light. Using Alpha-1 (8%) so it 'ignites' as the flood passes behind it. */ border: 2px solid var(--sys-color-primary-alpha-1); /* THE CLEAN EDGE TRICK: Forces the white canvas to stop at the inside edge of the border, preventing 'color-bleed' on high-res screens. */ background-clip: padding-box; /* ATMOSPHERIC DEPTH: Swapped Charcoal for Pine-pigmented shadows. This ensures the 'gutters' between cards feel like deep water rather than muddy ink, preserving the 'Light Gap' effect. */ box-shadow: 0 10px 30px -15px rgba(var(--pigment-pine-rgb), var(--gauge-3)), 0 5px 10px -5px rgba(var(--pigment-pine-rgb), var(--gauge-1)); /* KINETIC PHYSICS: Smooth transition for the 'Ignition' effect on hover */ transition: transform var(--sys-transition-smooth), border-color var(--sys-transition-smooth), box-shadow var(--sys-transition-smooth); } .project-archive .feature-block { margin-bottom: var(--sys-space-6); /* larger size to make project cards more distinct */ } /* THE HANDSHAKE: Transition from Hero to the first card */ .feature-block--first { margin-top: var(--sys-space-2); /* RATIO SYNC: Gauge 8 shoulders for balanced weight */ border-radius: var(--sys-radius-8) var(--sys-radius-8) 0 0; } /* --- THE ALT BLOCK (Pine Wash Integration) --- */ .feature-block--alt { /* This uses your 'Bake' logic (Pine flattened on white) */ background: var(--sys-color-primary-on-canvas-1-bg); background-clip: padding-box; /* ALT SHADOW: We push the Gauge to 6 (48%) and 3 (24%) here. Since the background is already Pine-tinted, we need a denser shadow DNA to create visible separation from the floodlight. */ box-shadow: 0 10px 30px -15px rgba(var(--pigment-pine-rgb), var(--gauge-6)), 0 5px 10px -5px rgba(var(--pigment-pine-rgb), var(--gauge-3)); /* Increased border-alpha for better definition on tinted background */ border-color: var(--sys-color-primary-alpha-2); } /* --- HOVER DYNAMICS (The Lift & Ignite) --- */ .feature-block:hover { z-index: var(--layer-raised); /* Ensures the shadow doesn't get 'swallowed' by neighbors */ transform: translateY(-4px); /* Subtle physics lift */ /* BORDER IGNITION: The edge glows brighter when the user engages */ border-color: var(--sys-color-primary-alpha-4); /* SHADOW EXPANSION: Bloom effect using Primary (Pine) DNA */ box-shadow: 0 20px 40px -20px rgba(var(--pigment-pine-rgb), var(--gauge-5)), 0 10px 15px -10px rgba(var(--pigment-pine-rgb), var(--gauge-2)); } /* --- 2. THE GRID (Flex Layout - Mobile First Stack) --- */ .feature-block__grid { display: flex; flex-direction: column; /* Mobile stack by default */ gap: var(--sys-space-5); max-width: 1200px; /* THE ANCHOR */ margin: 0 auto; align-items: flex-start; /* Standard: Left-Aligned */ } /* --- THE MEDIA CONTAINER (The 'Rail' Creator) --- */ .feature-block__media { display: flex; justify-content: center; /* Centers image horizontally in its 50% column */ align-items: center; /* Centers image vertically against the text */ width: 100%; padding: var(--sys-space-4); /* Your buffer/rail padding */ } /* --- THE IMAGE COMPONENT (The Precision Rig) --- */ .feature-block__image { width: 100%; /* 1. THE RAIL LIMITER: Ensures the image never exceeds your 500px design intent, creating that clean 'gutter' on larger screens. */ max-width: 500px; /* 2. THE STABILITY BOX: By forcing a 1:1 (square) or 4:5 (portrait) ratio, you stop the 'bouncing' layout. 1:1 is very clean for engineering portfolios. */ aspect-ratio: 1 / 1; /* 3. THE CLIPPING ENGINE: This acts like your slideshow fix. It fills the box without stretching the 375px or 541px images. */ object-fit: cover; object-position: center; border-radius: var(--sys-radius-4); box-shadow: var(--sys-shadow-halo-standard); height: auto; margin-inline: auto; /* Absolute centering backup */ transition: transform var(--sys-transition-smooth); } .feature-block:hover .feature-block__image { transform: scale(1.03); /* Subtle high-fidelity zoom */ } /* --- THE PORTRAIT SPECIALIST --- */ /* Apply this class ONLY to images that are naturally taller */ .feature-block__image--portrait { aspect-ratio: 4 / 5 !important; /* We use !important here because it is a specific override intended to beat the global 1/1 rule. */ } @media (min-width: 810px) { /* Ensure the grid doesn't force the columns to be equal height */ .feature-block--first .feature-block__grid { align-items: start; } .feature-block--first .feature-block__media { position: sticky; top: 4rem; /* Give it some breathing room from the top of the viewport */ z-index: 10; } } /* --- THE VERTICAL SHIFT (Under 809px) --- */ @media (max-width: 809px) { .feature-block__media { /* Ensures when they stack, the image has clear separation from the text above/below it. */ padding: var(--sys-space-6) 0; } .feature-block__image { /* On mobile, we can let it be slightly smaller (e.g., 85% of screen) to keep that 'High-Fidelity' card look. */ max-width: 400px; } } /* --- THE CLEAN 810px ZIGZAG LOGIC --- */ @media (min-width: 810px) { .feature-block__grid { flex-direction: row; align-items: center; /* Vertical alignment for the text/image pair */ gap: var(--sys-space-8); /* This creates your 'Center Gutter' */ } /* The Zig-Zag */ .feature-block:nth-child(odd) .feature-block__grid { flex-direction: row-reverse; } .feature-block__content, .feature-block__media { flex: 1; /* Gives both columns equal weight (50/50) */ width: 50%; } .feature-block__media { display: flex; justify-content: center; /* This is what creates the 'Visual Rail' */ } } /* --- 4. CONTENT (Text & Typography) --- */ /* MOBILE DEFAULT: 'display: contents' allows children to interleave with the image via order */ .feature-block__content { display: contents; } /* Modifiers for Content */ .feature-block--storyteller .feature-block__content { display: flex; flex-direction: column; align-items: center; } /* --- 4. CONTENT (RESONANT REFACTOR) --- */ /* 4a. SHARED STRUCTURAL LOGIC (The "Dry" Layout) */ .feature-block__intro-text, .feature-block__text { /* The Triple Lock: Constraint & Consistency */ max-width: min(100%, 65ch, 31.25rem); margin-bottom: var(--sys-space-4); /* Increased for 1.414 rhythm */ } /* 4b. PHONIC ROLES (The Individual "Voices") */ .feature-block__title--column { font-family: var(--font-heading); font-size: var(--fs-t3) !important; line-height: var(--lh-display); /* Using the Optical Gem 1.1-1.2 */ letter-spacing: var(--ls-display); /* -0.02em */ color: var(--sys-color-primary); margin-bottom: var(--sys-space-5); max-width: 26ch; } .feature-block__intro-text { /* THE HANDSHAKE: Poppins wt600 */ font-family: var(--font-heading); font-size: var(--fs-t6) !important; font-weight: 600; line-height: var(--lh-body); letter-spacing: var(--ls-heading); /* -0.015em Squeeze */ color: var(--sys-color-type-whisper); } .feature-block__intro-text strong { /* THE DIAGNOSIS (Highlight) */ color: var(--sys-color-type-talk); /* PINE: The Brand Signature */ } .feature-block__text { /* THE DATA: Inter wt400 */ font-family: var(--font-body); font-size: var(--fs-t7) !important; font-weight: 400; line-height: var(--lh-body); /* 1.6 Breathability */ letter-spacing: var(--ls-normal); /* 0 Neutral DNA */ color: var(--sys-color-type-shout); } .feature-block__jump-link { /* NAVIGATIONAL LABEL: Micro-Engineered */ font-family: var(--font-heading); font-size: var(--fs-t10); /* Smaller, more 'Meta' */ line-height: var(--lh-display-hero); letter-spacing: var(--ls-micro); /* 0.05em tracked out */ text-transform: uppercase; /* Engineering clarity */ color: var(--sys-color-primary); margin-bottom: var(--sys-space-4); margin-top: var(--sys-space-4); } .feature-block__note--column { /* THE FOOTNOTE */ font-family: var(--font-body); font-size: var(--fs-t8) !important; line-height: var(--lh-small); color: var(--sys-color-type-shout); border-top: 1px solid var(--sys-color-primary-alpha-2); padding-top: var(--sys-space-4); margin-top: var(--sys-space-5); } /* --- 5. QUOTES & AUTHORS --- */ .feature-block__quote-container { width: 500px; /* Increased for better visual gravity balance */ max-width: 100%; } .feature-block__quote-box { background-color: var(--sys-color-primary-alpha-1); color: var(--sys-color-type-shout); padding: var(--sys-space-5) var(--sys-space-6); /* Gauge 5x6 balance */ border-left: 0.25rem solid var(--sys-color-accent-alpha-10); border-right: none; border-radius: var(--sys-radius-4); font-family: var(--font-story); letter-spacing: var(--ls-story); line-height: var(--lh-story); font-size: var(--fs-t6); /* Balanced Quote Scale */ font-style: italic; font-weight: 400; width: 100%; text-align: left !important; } .feature-block__quote-box--on-alt { background-color: var(--sys-color-canvas) !important; } .feature-block__author { font-family: var(--font-body); text-align: right; /* Standard Signature Position */ font-size: var(--fs-t9); /* KINETIC TYPE SYNC */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sys-color-primary); width: 100%; margin-top: var(--sys-space-3); padding-right: var(--sys-space-2) !important; } /* ================================================= */ /* === [V3] GLOBAL LAYOUT & WRAPPERS === */ /* ================================================= */ /* ================================================= */ /* === [V26] CONSOLIDATED KINETIC HERO === */ /* ================================================= */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* Prevents jumping */ width: 100%; position: relative; text-align: center; /* THE HORIZON: Clear navbar + ~115px of breath */ padding-top: calc(var(--sys-space-11) + var(--sys-space-6)); /* THE STATURE: Gauge 11 * 3 (Approx 230px) This should give you about 8-10 fingers of space at the bottom. */ padding-bottom: calc(var(--sys-space-11) * 3); padding-left: var(--sys-space-5); padding-right: var(--sys-space-5); } /* CONTENT BOX: Keeps title/subtitle centered */ .hero__content { display: flex; flex-direction: column; align-items: center; max-width: 90rem; width: 100%; margin: 0 auto; } /* 1. THE STAGE: Fixes the uneven bottom gap */ .hero--slideshow { /* This '1px' padding-bottom prevents "Margin Collapse," ensuring the dots' margin doesn't blend into the next section. */ padding-bottom: 1px; justify-content: flex-start; } /* INTERNAL SPACING: Gap between Subtitle/Buttons and Slideshow */ .hero--slideshow .hero__subtitle, .hero--slideshow .button-group { margin-bottom: var(--sys-space-10); } /* 2. THE SLIDESHOW: Restoring the Glow */ .slideshow { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; /* THE GLOW FIX: Remove 'overflow: hidden' so shadows and buttons show */ overflow: visible; /* TOP GAP: Reset to Gauge 10 (2 Fingers) */ margin-top: var(--sys-space-11); /* BOTTOM GAP: Reset to Gauge 10 (2 Fingers) */ margin-bottom: var(--sys-space-11); } /* ================================================= */ /* === [V25] REFACTORED: HERO TYPOGRAPHY === */ /* ================================================= */ .hero__eyebrow { font-family: var(--font-body); font-size: var(--fs-t8) !important; /* DNA: 0.875rem (14px) to 1rem (16px) */ font-weight: 600; color: var(--sys-color-canvas-alpha-10); text-transform: uppercase; letter-spacing: var(--ls-micro); /* 0.05em tracked out for that 'Meta' feel */ margin-bottom: var(--sys-space-2); /* Tighter lockup to the H1 */ } .hero__title { font-family: var(--font-heading); font-size: var(--fs-t1); /* Tier 1: Hero Main */ font-weight: 900; color: var(--sys-color-canvas); text-align: center; /* UPDATED: Neutral spacing to stop overlap */ letter-spacing: var(--ls-wide); line-height: var(--lh-display-hero); text-transform: uppercase; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; /* KINETIC ALIGNMENT: Instead of nowrap, we use 'balance' to ensure that if it MUST wrap on tiny screens, it does so elegantly. */ text-wrap: balance; word-break: keep-all; /* Prevents "Port-folio" hyphenation breaks */ /* Tightening the 67px gap to 25px for better hierarchy */ margin-bottom: var(--sys-space-4); /* GLOW: Preserving your exact 'Unified Glow' */ text-shadow: 0 0 1.25rem rgba(var(--sys-role-accent-rgb), 0.6), 0 0 2.5rem rgba(var(--sys-role-action-rgb), 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5); } .hero__subtitle { font-family: var(--font-body); color: rgba(var(--sys-role-canvas-rgb), 0.9); max-width: 65ch; margin-left: auto; margin-right: auto; text-align: center; /* KINETIC: Using the Title Scale for the Subtitle */ font-size: var(--fs-t3) !important; /* DNA: 1.25rem (20px) to 2.25rem (36px) */ font-weight: 600; line-height: var(--lh-display); letter-spacing: -0.01em; /* Slight tightening for the large T3 scale */ /* Standardizing bottom exit-space */ margin-bottom: var(--sys-space-8); max-width: 35ch; /* Forces a cleaner 2 or 3 line "stack" on mobile */ margin-inline: auto; /* Centers the stack */ } .hero__subtitle strong { font-weight: 900; /* 900 to match the Hero Title's 'DNA' */ letter-spacing: var(--ls-display); /* Tighter tracking for heavier weights */ color: var(--sys-color-canvas); } /* 2. ACCESSIBILITY */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ================================================= */ /* === [V4] REFACTORED: SLIDESHOW SYSTEM (BEM) === */ /* ================================================= */ /* THE NEW ANCHOR */ .slideshow__positioner { position: relative; width: 100%; max-width: 500px; } /* 2. THE VIEWPORT: Forces the 500x500 standard */ .slideshow__viewport { position: relative; /* BECOMES THE ANCHOR for the controls */ width: 100%; aspect-ratio: 1 / 1; /* Keeps it square */ /* overflow: hidden; */ /* MOVED to the slide itself to unclip buttons */ border-radius: var(--sys-radius-4); /* AUDIT: Standardized Radius */ background-color: var(--sys-color-neutral); box-shadow: var(--sys-shadow-halo-standard); margin-bottom: var(--sys-space-4); /* AUDIT: Gauge 4 Sync (24px) */ } .slideshow__slide { width: 100%; height: 100%; display: none; overflow: hidden; /* CLIPS the image content, not the controls */ border-radius: var(--sys-radius-4); } .slideshow__slide--active { display: block; } .slideshow__image { width: 100%; height: 100%; object-fit: cover; /* Ensures 4:3 images fill 1:1 box */ display: block; } /* --- 3. THE CONTROLS: Muffled High-Fidelity Rig --- */ .slideshow__control { position: absolute; top: 50%; /* 3D Anchor: Keeps the circle and text character from vibrating */ transform: translateY(-50%) translateZ(0) scale(1); z-index: var(--z-interaction-focus); /* GEOMETRY: 54px Scale */ width: 3.375rem; height: 3.375rem; border-radius: var(--sys-radius-11); /* KINETIC BASE: Void HUD style */ /* Using Gauge 7 (56%) - This is the "Heavy" Atmospheric level */ background-color: var(--sys-color-void-alpha-7); /* Keeping Canvas (White) for the chevron icon */ color: var(--sys-color-canvas); /* BORDER: Already on-system using Canvas Alpha 2 (Whisper) */ border: 1px solid var(--sys-color-canvas-alpha-2); display: flex; align-items: center; justify-content: center; /* CRITICAL: Hide raw text to use the stable pseudo-element below */ font-size: 0; cursor: pointer; /* PERFORMANCE TRANSITION */ /* ENGINE SYNC: Snappier 0.2s to match Navbars */ transition: transform var(--sys-transition-snappy), background-color var(--sys-transition-snappy), box-shadow var(--sys-transition-snappy), border-color var(--sys-transition-snappy); /* Initial state: Clean and flat */ box-shadow: none; backface-visibility: hidden; will-change: transform, box-shadow, border-color; } /* THE STABILIZER: The Chevron character treated as a graphic */ .slideshow__control::before { content: "❯"; font-size: 1.5rem; line-height: 1; display: block; transform: translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* Specific adjustment for the 'prev' flip */ .slideshow__control--prev::before { content: "❮"; } /* POSITIONING: The Straddle Logic */ .slideshow__control--prev { left: -1.125rem; } .slideshow__control--next { right: -1.125rem; } @media screen and (min-width: 810px) { .slideshow__control--prev { left: -1.6875rem; } .slideshow__control--next { right: -1.6875rem; } } /* INTERACTION: The Muffled Power-Up */ .slideshow__control:hover { /* Action Role (72% pigment) */ background-color: var(--sys-color-action-alpha-9); color: var(--sys-color-canvas); /* THE SWAP: Solid Magenta Border */ border-color: var(--sys-color-action); /* THE MUFFLER: Tight, sophisticated Magenta glow */ box-shadow: var(--sys-shadow-muffler-action); /* PHYSICS: 5% expansion for tactile feedback */ transform: translateY(-50%) translateZ(0) scale(1.05); /* Sync with the base state */ transition: transform var(--sys-transition-snappy), background-color var(--sys-transition-snappy), border-color var(--sys-transition-snappy), box-shadow var(--sys-transition-snappy); } .slideshow__control:active { /* Redline state (96% pigment) */ background-color: var(--sys-color-action-alpha-11); border-color: var(--sys-color-action); /* Compression: Feels like a physical click */ transform: translateY(-50%) translateZ(0) scale(0.95); transition: transform var(--sys-duration-fast) var(--sys-ease-standard); } /* 3. THE PILL: Tightening the internal gap */ .slideshow__pill { /* Shrink this to Gauge 2 to keep it close to the gallery */ margin-bottom: var(--sys-space-2); z-index: var(--z-interaction-focus); } .slideshow__pill-link { display: inline-block; /* KINETIC BASE: Void Atmosphere (56%) + Glass HUD */ /* Using Gauge 7 (Shout/Heavy) for legibility over imagery */ background-color: var(--sys-color-void-alpha-7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* BORDER: Stays on-system with Canvas Alpha 2 */ border: 1px solid var(--sys-color-canvas-alpha-2); color: var(--sys-color-canvas); /* 0.8rem (12.8px) maps exactly to --sys-space-2 */ /* 1.6rem (25.6px) maps exactly to --sys-space-4 */ padding: var(--sys-space-2) var(--sys-space-4); border-radius: var(--sys-radius-11); text-decoration: none; font-family: var(--font-body); /* STABLE PHYSICS: Anchored without swelling */ transform: translateZ(0); /* Mapped to Standard (0.3s + Standard Easing) */ transition: background-color var(--sys-transition-standard), box-shadow var(--sys-transition-standard), border-color var(--sys-transition-standard); box-shadow: var(--sys-shadow-muffler-void); will-change: background-color, box-shadow; } .slideshow__pill-link:hover { /* BALANCED POWER-UP: Matches base opacity (56%) to prevent 'shouting' */ background-color: var(--sys-color-action-alpha-7); border-color: var(--sys-color-action); /* THE MUFFLER: We manually define a tighter shadow using the Action Alphas. This replaces the 'Shouting' global halo with a 'Whisper' glow. */ box-shadow: var(--sys-shadow-muffler-action); /* PHYSICS: Explicitly 'none' to stay grounded unlike the controls */ transform: translateZ(0); } /* 4. THE DOTS: Pulling them closer */ .slideshow__dots { display: flex; justify-content: center; gap: var(--sys-space-2); /* Pull the dots up closer to the image gallery */ margin-top: var(--sys-space-2); /* Zero this out so the .slideshow margin-bottom handles the '2-finger' gap */ margin-bottom: 0; list-style: none; padding: 0; } .slideshow__dot { position: relative; /* Anchors the hitbox */ width: 0.625rem; height: 0.625rem; background-color: var(--sys-color-canvas-alpha-4); border: 1px solid transparent; border-radius: var(--sys-radius-11); cursor: pointer; transition: all var(--sys-transition-snappy); } /* THE RIG: Forced 44px Hitbox */ .slideshow__dot::after { content: ""; position: absolute; /* Use fixed pixel values to bypass harmonic scaling for the auditor */ top: 50%; left: 50%; width: 44px; height: 44px; margin-top: -22px; /* (44 / 2) */ margin-left: -22px; /* (44 / 2) */ /* background: rgba(255, 0, 0, 0.2); */ /* Technical Audit: Uncomment to see the 44px zone */ } .slideshow__dot.active { width: 1.5rem; /* Restores the V26 Pill Shape */ background-color: var(--sys-color-action-alpha-9); border-color: var(--sys-color-action); box-shadow: var(--sys-shadow-muffler-action); } /* THE HOVER STATE: Inactive dots "Light Up" */ .slideshow__dot:hover:not(.active) { background-color: var(--sys-color-canvas-alpha-8); transform: scale(1.2); } @media screen and (max-width: 809px) { .slideshow__dots { /* CONTEXTUAL SPACING: Gauge 3 for Mobile Touch Targets */ gap: var(--sys-space-10); } } /* ================================================= */ /* === [V3.4] FINAL AUDITED: BUTTONS & LAYOUT === */ /* ================================================= */ /* 1. THE BLOCK (Base Physics) */ .button { display: inline-flex; align-items: center; justify-content: center; /* System Spacing Tokens */ padding: var(--sys-space-2) var(--sys-space-6); gap: var(--sys-space-1); /* System Typography Tokens */ font-family: var(--font-body); font-size: var(--fs-t6); font-weight: 600; line-height: var(--lh-lead); letter-spacing: var(--ls-wide); border-radius: var(--sys-radius-button); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; /* Performance-optimized transitions */ transition: transform var(--sys-transition-standard), background-color var(--sys-transition-standard), letter-spacing var(--sys-transition-standard); } /* 2. BASE HOVER LOGIC */ .button:hover:not(:disabled) { letter-spacing: var(--ls-micro); transform: translateY(-0.1875rem) translateZ(0); } /* 3. MODIFIER: PRIMARY (The Beacon) */ .button--primary { background-color: var(--sys-color-primary); color: var(--sys-color-canvas); } .button--primary:hover:not(:disabled) { background-color: var(--sys-color-action-alpha-10); border-color: var(--sys-color-action); box-shadow: var(--sys-shadow-muffler-action); } /* 4. MODIFIER: TONAL (Negative Space Path) */ .button--tonal { /* BACKGROUND: Stays Kinetic (Primary at 16%) */ background-color: var(--sys-color-primary-alpha-2); /* TYPE: Switching to the Phonic Solid for maximum legibility */ /* This uses your 'Baked' Redline/Black for peak authority */ color: var(--sys-color-type-shout); border: 1px solid var(--sys-color-primary-alpha-3); } .button--tonal:hover:not(:disabled) { background-color: var(--sys-color-primary-alpha-4); border-color: var(--sys-color-primary); /* SHADOW: Switching to Void for a 'cleaner' depth over color */ box-shadow: 0 0.25rem 0.625rem var(--sys-color-void-alpha-3); } /* 5. ACTIVE STATE (Mobile/Click Compression) */ .button:active:not(:disabled) { transform: translateY(0.0625rem) scale(0.98); filter: brightness(0.9); box-shadow: none; transition: transform var(--sys-duration-fast) var(--sys-ease-standard), filter var(--sys-duration-fast) var(--sys-ease-standard); } /* 6. STATE MODIFIERS (Persistence) */ .button.button--success { background-color: var(--sys-color-success) !important; color: var(--sys-color-canvas) !important; transform: none !important; cursor: default; } .button.button--error { background-color: var(--sys-color-error) !important; color: var(--sys-color-canvas) !important; transform: none !important; } /** DISABLED STATE */ .button--disabled { opacity: 0.6; filter: grayscale(1); pointer-events: none; cursor: default; text-decoration: none; } /* ================================================= */ /* === [V3.4] CTA & GROUP LAYOUTS (GAUGE SYNC) === */ /* ================================================= */ /* 7. THE BUTTON GROUP (Stacking Wrapper) */ .button-group { display: flex; flex-direction: column; } /* 8. CENTERED CONTAINER (Single CTA alignment) */ .cta-container--centered { display: flex; justify-content: center; width: 100%; margin-top: var(--sys-space-5); /* Engine-synced 32px */ } /* 9. CONTACT GROUP (Side-by-Side alignment) */ .cta-group--contact { display: flex; justify-content: center; gap: var(--sys-space-3); /* Engine-synced 19.2px gap */ width: 100%; margin-top: var(--sys-space-5); } /* ================================================= */ /* === [V20] MOBILE CALIBRATION & TOUCH SAFETY === */ /* ================================================= */ @media screen and (max-width: 810px) { /* 1. BUTTON SMASH PROTECTION (Mobile CTA Affordance) */ .button-group { flex-direction: column !important; /* RESTORED: Vertical Stack */ gap: var(--sys-space-4); align-items: center !important; width: 100% !important; } .button-group .button { min-width: 200px; /* RESTORED */ padding: 0.625rem 2.5rem; /* RESTORED SACRED: 2.5rem padding */ width: auto !important; text-align: center; } /* 2. VERTICAL STACK STABILITY: ALL Blocks Center */ .feature-block__content { display: flex !important; flex-direction: column; align-items: center !important; text-align: center !important; width: 100%; } /* Titles & Text align to center */ .feature-block__title--column, .feature-block__intro-text, .feature-block__jump-link { text-align: center !important; } /* 3. OVERFLOW & PILLAR PROTECTION */ .feature-block__quote-container, .feature-block__quote-box { max-width: 100% !important; width: auto !important; } /* 4. FOOTER ALIGNMENT PROTECTION */ footer .navbar__links, footer .navbar { align-items: center !important; text-align: center !important; } footer .navbar__link { justify-content: center; text-align: center; } /* Quote Scaling */ .feature-block__quote { font-size: 1.1rem; /* Exactly 20%+ smaller than H2 for clear hierarchy */ line-height: 1.4; } .feature-block__quote-container { margin: 1.5rem 0; /* Tightened margins for mobile density */ } /* Contact Page Mobile Signature */ .cta-group--contact { flex-direction: column !important; align-items: center !important; gap: 1.25rem; width: 100% !important; } .cta-group--contact .button { min-width: 200px; padding: 0.625rem 2.5rem; width: auto !important; /* DO NOT STRETCH */ } } /* RESPONSIVE: Stack buttons on small screens - KEEPING FROM BONES */ /* --- 6. RESPONSIVE ENGINE (DESKTOP ENHANCEMENT 810px+) --- */ @media screen and (min-width: 810px) { /* 1. RESTORE GRID */ .feature-block__grid { flex-direction: row; justify-content: center; align-items: stretch; /* Preserving your height-matching style */ /* UPDATED: From Space-8 (64px) down to Space-5 (40px) This keeps the "Tightened" feel while giving the edges room to breathe. */ gap: var(--sys-space-6); } .feature-block:nth-child(odd) .feature-block__grid { flex-direction: row-reverse; } .feature-block__content { display: flex; flex-direction: column; justify-content: center; width: 50%; /* Mandatory Split */ padding: 0 40px; /* Fixed Gutter */ align-items: flex-start; /* Standard: Strictly Left */ } /* Storyteller Center Override */ .feature-block--storyteller .feature-block__content { align-items: center; } /* HUGGING LOGIC: Standard Blocks are strictly left-aligned */ .feature-block .feature-block__content { align-items: flex-start; text-align: left; } .feature-block__title--column, .feature-block__intro-text, .feature-block__quote-container { max-width: 500px; /* Mandatory Readability Constraint */ width: 100%; margin-left: 0; margin-right: 0; } /* STORYTELLER COMPONENT: Center Pillars */ .feature-block--storyteller .feature-block__title--column, .feature-block--storyteller .feature-block__intro-text, .feature-block--storyteller .feature-block__quote-container { text-align: center; } .feature-block__note--column { /* We keep text left-aligned for Jakob's Law/readability, but we shift the block's physical 'anchor' to the right edge */ margin-left: auto; margin-right: 0; margin-top: var(--sys-space-3); text-align: left; /* Reading stays natural */ border-top: 1px solid var(--sys-color-primary-alpha-1); /* Subtle divider */ /* Optional: Change the border-top to a border-right to create a vertical 'Vector' */ border-top: 1px solid var(--sys-color-primary-alpha-2); /* Subtle divider */ padding-top: var(--sys-space-3); } /* ZIG-ZAG LOGIC (Desktop): Border always closest to image */ .feature-block:nth-of-type(odd) .feature-block__quote-box { border-left: none; border-right: 4px solid var(--sys-color-accent-alpha-10); } /* SUBTLE SEPARATOR: For 'Jump to' section on desktop */ .feature-block__jump-link { border-top: 0.0625rem solid var(--sys-color-primary-alpha-2); padding-top: 1rem; margin-top: 1rem; display: block; width: 100%; text-align: left; } /* ENSURE BUTTON ROW STABILITY (Action Islands) */ .button-group { flex-direction: row; justify-content: center !important; /* SACRED: Centered Action Islands */ gap: 1.25rem; /* Slightly more breathe room for islands */ flex-wrap: nowrap; width: 100%; } /* CHUBBY FIX: (951px - 1008px) */ @media screen and (min-width: 951px) and (max-width: 1008px) { .button-group .button { padding-left: 1.5rem; padding-right: 1.5rem; width: fit-content !important; flex: 0 1 auto; } } /* CHUBBY FIX: (810px - 950px) */ @media screen and (min-width: 810px) and (max-width: 950px) { .button-group { gap: 0.75rem; } .button-group .button { padding-left: 1rem; padding-right: 1rem; } } /* Reset Orders (Flex container ignores child order relative to separate flex items) */ /* But strictly, cleaner to reset if they leak? Flex items (Image vs Content) order matches source or row-reverse. */ } /* ================================================= */ /* === [V3] REFACTORED: CONTACT MODAL & FORM === */ /* ================================================= */ /* THE DIALOG (The container) */ .contact-modal { border: none; background: transparent; padding: 0; margin: auto; /* Browser handles centering if this is set */ overflow: visible; } /* THE CONTENT CARD (Outer Shell) */ .contact-modal__content { position: relative; background-color: var(--sys-color-canvas); padding: var(--sys-space-7) var(--sys-space-6); border-radius: var(--sys-radius-5); border: 1px solid var(--sys-color-void-alpha-3); /* MOBILITY FIX: Ensures centering on small screens */ width: 90vw; max-width: 500px; box-shadow: var(--shadow-modal); opacity: 0; transform: scale(0.95); transition: var(--sys-transition-pop); } /* ACTIVE STATE: The trigger */ .contact-modal.is-visible .contact-modal__content { opacity: 1; transform: scale(1); } dialog.contact-modal::backdrop { /* Using your specific Alpha-1 Canvas token for system consistency */ background: var(--sys-color-canvas-alpha-1); backdrop-filter: blur(4px); animation: fadeIn 0.4s ease forwards; } dialog.contact-modal[open] { display: flex; align-items: center; justify-content: center; border: none; background: transparent; } /* KINETIC STATE: OPEN */ .contact-modal.is-visible .contact-modal__content { opacity: 1; transform: scale(1); } /* KINETIC STATE: CLOSING */ .contact-modal.is-closing { opacity: 0; pointer-events: none; transition: opacity var(--sys-transition-smooth); } /* 3. THE INNER FORM (Atmospheric HUD 'Dithered Ink') */ .contact-modal__form { position: relative; /* ANCHOR CHECK: Locks HUD to bottom */ border-radius: var(--sys-radius-4); /* DITHERED RADIAL GRADIENT: Synced with Brand Rig */ background-image: radial-gradient( circle at 10% 10%, var(--sys-color-primary) 0%, var(--sys-color-primary-alpha-9) 25%, var(--sys-color-primary-alpha-4) 50%, var(--sys-color-primary-alpha-1) 80%, rgb(var(--pigment-black-rgb)) 115% ); background-color: #121212; border: 2px solid var(--sys-color-primary); /* Pine Accent Rim */ padding: var(--sys-space-6); /* BOOSTED VIOLET GLOW (Hero Sync) */ box-shadow: 0 0 10px rgba(var(--sys-color-accent), 0.8), 0 0 25px rgba(var(--sys-color-accent), 0.6), 0 0 50px rgba(var(--sys-color-accent), 0.3); font-family: var(--font-body); /* Force Sans-Serif */ transition: background-image var(--sys-transition-smooth); } .contact-modal__form h2 { max-width: 100%; text-align: center; margin-bottom: 0.5rem; /* Reduced for the rail */ color: var(--sys-color-canvas); /* White */ font-family: var(--font-heading); /* Poppins Sync */ position: relative; } /* THE FULL-WIDTH SYSTEM RAIL (Mirror Logic) */ .contact-modal__form h2::after { content: ""; display: block; margin: 0.75rem auto 1.5rem auto; width: 100%; height: 4px; background: linear-gradient( to right, transparent 5%, var(--sys-color-accent) 15%, var(--sys-color-accent) 85%, transparent 95% ); } .contact-modal__form label { text-align: left; display: block; margin-bottom: 0.25rem; margin-top: 0.5rem; font-family: var(--font-body); /* Inter Sync */ color: var(--sys-color-canvas); font-weight: 500; } /* 4. MODERN INPUTS (HUD Styling) */ .contact-modal__form input[type="text"], .contact-modal__form input[type="email"], .contact-modal__form textarea { width: 100%; padding: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.5rem; /* ROUNDED GEOMETRY */ margin-top: 0.375rem; margin-bottom: 1rem; font-family: var(--font-body); /* Inter Sync */ font-size: 1rem; background-color: rgba(255, 255, 255, 0.08); /* Transparent Ink */ color: var(--sys-color-canvas); /* White Text */ box-sizing: border-box; transition: all var(--sys-transition-standard); } /* FOCUS: CLEAN STATE (Removed focus line) */ .contact-modal__form input:focus, .contact-modal__form textarea:focus { outline: none; background-color: rgba(255, 255, 255, 0.12); border-color: var(--sys-color-primary); /* Subtle internal Pine sync */ box-shadow: none; } /* SUBMIT BUTTON: Sync with Interaction System */ .contact-modal__button--submit { width: 100%; margin-top: 1rem; border-radius: 0.5rem; font-family: var(--font-body); } .contact-modal__form .contact-modal__button--submit:hover:not(:disabled) { background-color: var(--sys-color-action); /* Sync to interaction system */ box-shadow: var(--glow-accent-strong-inset), var(--glow-accent-subtle); } /* THE PRO DISABLED STATE: Restored */ .contact-modal__button--submit:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; filter: grayscale(0.4); transform: none; } /* 6. FLOATING CLOSE TARGET (A11y Scale Optimized) */ .contact-modal__close-icon { position: absolute; top: 0.0625rem; /* 4px Adjustment inward */ right: 0.0625rem; /* 4px Adjustment inward */ width: 2.75rem; /* 44px Diameter Target */ height: 2.75rem; background: none; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--sys-transition-standard); z-index: var(--z-modal-dialog); color: var(--sys-color-type-talk); /* Charcoal 'X' */ } @media screen and (max-width: 809px) { .contact-modal__close-icon { top: -0.75rem; /* 8px for mobile */ right: -0.75rem; /* 8px for mobile */ width: 3.5rem; /* 56px for mobile */ height: 3.5rem; /* 56px for mobile */ } } .contact-modal__close-icon:hover { color: var(--sys-color-action); transform: rotate(90deg); } .contact-modal__close-icon-box { width: 1.75rem; height: 1.75rem; position: relative; display: flex; align-items: center; justify-content: center; } .contact-modal__close-icon-box span { position: absolute; display: block; width: 1.4rem; /* Scaled up by 25% */ height: 4px; /* Heavy 4px weight */ background-color: currentColor; border-radius: 0.125rem; } .contact-modal__close-icon-box span:nth-child(1) { transform: rotate(45deg); } .contact-modal__close-icon-box span:nth-child(2) { transform: rotate(-45deg); } /* 1. THE HUD STATUS BAR */ .contact-modal__status-bar { position: absolute; /* Use System Space instead of hardcoded 40px */ bottom: calc(var(--sys-space-5) * -1); left: 0; width: 100%; /* REMOVED: height: 20px (Let it grow if text wraps) */ min-height: var(--sys-space-3); font-family: "Courier New", Courier, monospace; font-weight: 600; font-size: var(--fs-t9); color: var(--sys-color-primary); text-transform: uppercase; padding-left: var(--sys-space-1); padding-right: var(--sys-space-1); display: none; pointer-events: none; } /* 1. THE TYPEWRITER: DEFAULT (Desktop/Large Screens) */ .typewriter-text { display: inline-block; /* Essential for width-based typing animation */ white-space: nowrap; /* Keep it on one line for the crawl effect */ overflow: hidden; letter-spacing: 0.1em; border-right: 0.2em solid var(--sys-color-primary); /* THE CRAWL: Restored as the primary behavior */ animation: typing 1.5s steps(40, end), blink-caret 0.75s step-end infinite; } /* 2. THE MOBILE ADAPTATION: (The Safety Net) */ @media screen and (max-width: 809px) { .typewriter-text { /* If the text is too long for the mobile screen, we kill the 'nowrap' to prevent overflow. */ display: inline; white-space: normal; overflow-wrap: break-word; /* We disable the 'typing' animation on mobile because it conflicts with wrapped text, but we KEEP the caret blink so it still feels 'alive'. */ animation: blink-caret 0.75s step-end infinite; } } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: var(--sys-color-primary-alpha-8); } } /* ================================================= */ /* === [V3] TABLET TRANSITION (1070px to 769px) === */ /* ================================================= */ @media screen and (max-width: 1070px) and (min-width: 810px) { .navbar__links { display: flex; justify-content: flex-end; /* Pushes links to the right again */ flex: 0 1 auto; /* Stops the container from hogging the whole bar */ margin-left: auto; /* Creates the 'migration' gap from the logo */ gap: var(--sys-space-1); /* Controls the 'squish' between links */ } } /* ================================================= */ /* === [V18] GRID ARCHITECTURAL RESET (809px) === */ /* ================================================= */ /* ================================================= */ /* === [V4.0] SEMANTIC FOOTER: MIRROR ARCHITECTURE === */ /* ================================================= */ .footer { background-color: var(--sys-color-neutral); /* CHARCOAL */ color: var(--sys-color-canvas); position: relative; overflow: visible; padding: 0; display: flex; flex-direction: column; align-items: center; width: 100%; } /* THE ACCENT LINE (Footer - Mirror of Top Nav) */ .footer::before { content: ""; position: absolute; top: 0; /* SACRED: Top for Footer */ left: 0; width: 100%; height: var(--accent-rail-height); background: linear-gradient( to right, transparent 5%, var(--sys-color-accent) 15%, var(--sys-color-accent) 85%, transparent 95% ); z-index: var(--layer-raised); /* Base level for the line */ } .footer__nav { background-color: transparent; display: flex; justify-content: center; align-items: stretch; gap: 0; width: auto; max-width: 100%; /* ENGINE SYNC: Using Gauge 5 for side breathability */ padding: 0 var(--sys-space-5) var(--sys-space-1) var(--sys-space-5); overflow: visible; } .footer__link { /* 1. TYPOGRAPHY */ font-family: var(--font-body); font-size: var(--fs-t7); color: var(--sys-color-canvas); /* 2. RESET & LAYOUT */ background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; width: 100%; padding: var(--sys-space-2) var(--sys-space-4); /* 3. INTERACTION RIG */ transition: all var(--sys-transition-snappy); position: relative; text-decoration: none; z-index: var(--layer-raised); white-space: nowrap; } /* THE HOVER: Fixed White Text & Tonal Glow */ .footer__link:hover { background-color: var(--sys-color-canvas-alpha-1) !important; color: var(--sys-color-canvas) !important; box-shadow: inset 0 0 0 2px var(--sys-color-canvas-alpha-2); } /* THE MIRROR ACCENT: Magenta Highlight (Covers the Accent Line) */ .footer__link:hover::after { content: ""; position: absolute; top: 0; /* Align to the very top edge */ left: 0; width: 100%; height: var(--accent-rail-height); background-color: var(--sys-color-action); /* Action Magenta */ display: block; /* Subtle rounding on the bottom to soften the "overlap" */ border-radius: 0 0 2px 2px; opacity: 0; transition: opacity var(--sys-transition-snappy); z-index: var(--z-interaction-focus); /* Sits on top of everything */ } .footer__link:hover::after { /* Trigger the fade */ opacity: 1; } /* --- MOBILE STACKING LOGIC --- */ @media screen and (max-width: 809px) { .footer__nav { flex-direction: column; width: 100%; padding: 0 0 var(--sys-space-3) 0; } .footer__link { width: 100%; justify-content: center; /* Maintain hit-box symmetry on mobile */ padding: var(--sys-space-2) var(--sys-space-4); } } /* ================================================= */ /* === STRESS TEST FIXES THAT NEED INTEGRATION AND REVIEW === */ /* ================================================= */ /* Add this to your CSS file */ .no-scroll { overflow: hidden !important; height: 100% !important; position: fixed; /* The ultimate 'kill-switch' for background scrolling */ width: 100%; } /* Explicit fallback: Resolves 'Ghost Contrast' by giving auditors a static hex anchor */ body, .main-container { background-color: var(--sys-color-primary); } /* --- THE ROUNDING LOOP KILL-SWITCH (810px - 1070px) --- */ @media screen and (min-width: 810px) and (max-width: 1070px) { .u-nav-text-long { display: none !important; } .navbar__link { display: flex !important; align-items: center !important; gap: 4px !important; /* FREEZE the box metrics to hard pixels to stop the jitter */ padding-top: 12px !important; padding-bottom: 12px !important; padding-left: 16px !important; padding-right: 16px !important; /* FREEZE the font-size so it stops growing/shrinking */ font-size: 18px !important; line-height: 1 !important; } .navbar__link i { /* Use a fixed margin for the optical nudge */ margin-top: -1px !important; margin-bottom: 0 !important; transform: none !important; /* Clear any previous transforms */ } .navbar__link .fa-linkedin { /* We apply a -2px or -3px lift here to counter-act the intrinsic flaw AND the rounding loop */ margin-top: -3px !important; } } /* --- THE EMERGENCY DENSITY (810px - 955px) --- */ @media screen and (min-width: 810px) and (max-width: 955px) { .navbar__link { /* Tighten ONLY the horizontal space in the squeeze zone */ padding-left: 8px !important; padding-right: 8px !important; letter-spacing: -0.01em !important; } } /* ================================================= */ /* === [V4.1] ACCESSIBILITY: SCREEN READER TEXT === */ /* ================================================= */ /* This class hides text visually but keeps it readable by screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); /* The old-school clipping mask */ white-space: nowrap; border: 0; }