/* Tiltshift Theme System - Voor eenvoudige globale aanpassingen */ /* ============================================================================= THEME MODIFIERS - Voeg deze classes toe aan of ============================================================================= */ /* INTENSITEIT THEMES */ .ts-theme-subtle { --ts-spacing-multiplier: var(--ts-intensity-subtle); --ts-scale-multiplier: var(--ts-intensity-subtle); --ts-shadow-multiplier: var(--ts-intensity-subtle); } .ts-theme-bold { --ts-spacing-multiplier: var(--ts-intensity-bold); --ts-scale-multiplier: var(--ts-intensity-bold); --ts-shadow-multiplier: var(--ts-intensity-bold); } .ts-theme-daring { --ts-spacing-multiplier: var(--ts-intensity-daring); --ts-scale-multiplier: var(--ts-intensity-daring); --ts-shadow-multiplier: var(--ts-intensity-daring); } /* PERSOONLIJKHEID THEMES */ /* Conservative/Zakelijk - Minder contrast, meer rust */ .ts-theme-conservative { --ts-spacing-multiplier: 0.8; --ts-scale-multiplier: 0.9; --ts-shadow-multiplier: 0.6; /* Zachtere kleuren */ --ts-color-primary: #d63638; --ts-color-primary-dark: #2d6bb3; /* Kleinere border radius */ --ts-radius-sm: 0.15rem; --ts-radius-md: 0.3rem; --ts-radius-lg: 0.6rem; } /* Modern/Tech - Strakke lijnen, meer contrast */ .ts-theme-modern { --ts-spacing-multiplier: 1.1; --ts-scale-multiplier: 1.05; --ts-shadow-multiplier: 1.2; /* Fellere, digitale kleuren */ --ts-color-primary: #ff3333; --ts-color-primary-dark: #0066ff; /* Strakke borders */ --ts-radius-sm: 0.125rem; --ts-radius-md: 0.25rem; --ts-radius-lg: 0.5rem; } /* Creative/Gedurfd - Grote spacing, veel contrast */ .ts-theme-creative { --ts-spacing-multiplier: 1.4; --ts-scale-multiplier: 1.2; --ts-shadow-multiplier: 1.5; /* Levendige kleuren */ --ts-color-primary: #ff4757; --ts-color-primary-dark: #3742fa; /* Rondere vormen */ --ts-radius-sm: 0.4rem; --ts-radius-md: 0.8rem; --ts-radius-lg: 1.2rem; } /* Elegant/Minimaal - Verfijnde spacing, subtiele schaduwen */ .ts-theme-elegant { --ts-spacing-multiplier: 0.9; --ts-scale-multiplier: 0.95; --ts-shadow-multiplier: 0.4; /* Gedempte, elegante kleuren */ --ts-color-primary: #c0392b; --ts-color-primary-dark: #34495e; /* Subtiele afronding */ --ts-radius-sm: 0.2rem; --ts-radius-md: 0.35rem; --ts-radius-lg: 0.7rem; } /* ============================================================================= COMPONENT OVERRIDES - Gebruik computed values voor thema-bewustheid ============================================================================= */ /* Logo's gebruiken nu theme-aware sizes */ .ts-theme-subtle .ts-logo__image, .ts-theme-bold .ts-logo__image, .ts-theme-daring .ts-logo__image, .ts-theme-conservative .ts-logo__image, .ts-theme-modern .ts-logo__image, .ts-theme-creative .ts-logo__image, .ts-theme-elegant .ts-logo__image { height: var(--ts-computed-logo-md); width: var(--ts-computed-logo-md); } .ts-theme-subtle .ts-logo__image--small, .ts-theme-bold .ts-logo__image--small, .ts-theme-daring .ts-logo__image--small, .ts-theme-conservative .ts-logo__image--small, .ts-theme-modern .ts-logo__image--small, .ts-theme-creative .ts-logo__image--small, .ts-theme-elegant .ts-logo__image--small { height: var(--ts-computed-logo-sm); width: var(--ts-computed-logo-sm); } .ts-theme-subtle .ts-logo__image--medium, .ts-theme-bold .ts-logo__image--medium, .ts-theme-daring .ts-logo__image--medium, .ts-theme-conservative .ts-logo__image--medium, .ts-theme-modern .ts-logo__image--medium, .ts-theme-creative .ts-logo__image--medium, .ts-theme-elegant .ts-logo__image--medium { height: var(--ts-computed-logo-lg); width: var(--ts-computed-logo-lg); } .ts-theme-subtle .ts-logo__image--large, .ts-theme-bold .ts-logo__image--large, .ts-theme-daring .ts-logo__image--large, .ts-theme-conservative .ts-logo__image--large, .ts-theme-modern .ts-logo__image--large, .ts-theme-creative .ts-logo__image--large, .ts-theme-elegant .ts-logo__image--large { height: var(--ts-computed-logo-xl); width: var(--ts-computed-logo-xl); } /* Spacing gebruikt computed values */ .ts-theme-subtle .ts-button, .ts-theme-bold .ts-button, .ts-theme-daring .ts-button, .ts-theme-conservative .ts-button, .ts-theme-modern .ts-button, .ts-theme-creative .ts-button, .ts-theme-elegant .ts-button { padding: var(--ts-computed-space-2) var(--ts-computed-space-3); } .ts-theme-subtle .ts-header, .ts-theme-bold .ts-header, .ts-theme-daring .ts-header, .ts-theme-conservative .ts-header, .ts-theme-modern .ts-header, .ts-theme-creative .ts-header, .ts-theme-elegant .ts-header { padding: var(--ts-computed-space-4) 0; } /* Shadows gebruiken computed values */ .ts-theme-subtle .ts-card, .ts-theme-bold .ts-card, .ts-theme-daring .ts-card, .ts-theme-conservative .ts-card, .ts-theme-modern .ts-card, .ts-theme-creative .ts-card, .ts-theme-elegant .ts-card { box-shadow: var(--ts-computed-shadow-md); } .ts-theme-subtle .ts-project-preview, .ts-theme-bold .ts-project-preview, .ts-theme-daring .ts-project-preview, .ts-theme-conservative .ts-project-preview, .ts-theme-modern .ts-project-preview, .ts-theme-creative .ts-project-preview, .ts-theme-elegant .ts-project-preview { box-shadow: var(--ts-computed-shadow-sm); } .ts-theme-subtle .ts-project-preview:hover, .ts-theme-bold .ts-project-preview:hover, .ts-theme-daring .ts-project-preview:hover, .ts-theme-conservative .ts-project-preview:hover, .ts-theme-modern .ts-project-preview:hover, .ts-theme-creative .ts-project-preview:hover, .ts-theme-elegant .ts-project-preview:hover { box-shadow: var(--ts-computed-shadow-lg); } /* ============================================================================= QUICK MODIFIERS - Voor specifieke aanpassingen ============================================================================= */ /* Maak alles 20% groter */ .ts-scale-up { --ts-spacing-multiplier: 1.2; --ts-scale-multiplier: 1.2; } /* Maak alles 20% kleiner */ .ts-scale-down { --ts-spacing-multiplier: 0.8; --ts-scale-multiplier: 0.8; } /* Meer dramatische schaduwen */ .ts-dramatic-shadows { --ts-shadow-multiplier: 2; } /* Subtiele schaduwen */ .ts-subtle-shadows { --ts-shadow-multiplier: 0.3; } /* Geen schaduwen */ .ts-no-shadows { --ts-shadow-multiplier: 0; } /* Extra spacing */ .ts-spacious { --ts-spacing-multiplier: 1.5; } /* Compact spacing */ .ts-compact { --ts-spacing-multiplier: 0.7; } /* ============================================================================= SPECIAL EFFECTS - Voor extra dramatische transformaties ============================================================================= */ /* GEDURFDER - Zelfde kleuren, maar grotere fonts en meer contrast */ .ts-style-gedurfd { /* Behoud de originele Tiltshift kleuren */ --ts-color-primary: #d63638; --ts-color-primary-dark: #1e59a6; /* Dramatisch grotere font sizes */ --ts-text-xs: 0.875rem; /* was 0.75rem */ --ts-text-sm: 1rem; /* was 0.875rem */ --ts-text-md: 1.25rem; /* was 1rem */ --ts-text-lg: 1.75rem; /* was 1.25rem */ --ts-text-xl: 2.5rem; /* was 1.5rem */ --ts-text-2xl: 3.5rem; /* was 2rem */ /* Meer contrast tussen logo groottes */ --ts-logo-sm: 3rem; /* was 2rem */ --ts-logo-md: 4rem; /* was 2.5rem */ --ts-logo-lg: 6rem; /* was 4rem */ --ts-logo-xl: 8rem; /* was 6rem */ /* In-your-face spacing */ --ts-space-4: 3rem; /* was 1.5rem */ --ts-space-5: 4rem; /* was 2rem */ --ts-space-6: 5rem; /* was 3rem */ } /* SUBTIELER - Zelfde kleuren, maar kleinere fonts en minder contrast */ .ts-style-subtiel { /* Behoud de originele Tiltshift kleuren */ --ts-color-primary: #d63638; --ts-color-primary-dark: #1e59a6; /* Kleinere, rustiger font sizes */ --ts-text-xs: 0.6875rem; /* was 0.75rem */ --ts-text-sm: 0.75rem; /* was 0.875rem */ --ts-text-md: 0.875rem; /* was 1rem */ --ts-text-lg: 1rem; /* was 1.25rem */ --ts-text-xl: 1.25rem; /* was 1.5rem */ --ts-text-2xl: 1.5rem; /* was 2rem */ /* Minder contrast tussen logo groottes */ --ts-logo-sm: 1.5rem; /* was 2rem */ --ts-logo-md: 2rem; /* was 2.5rem */ --ts-logo-lg: 2.5rem; /* was 4rem */ --ts-logo-xl: 3rem; /* was 6rem */ /* Compactere spacing */ --ts-space-4: 1rem; /* was 1.5rem */ --ts-space-5: 1.25rem; /* was 2rem */ --ts-space-6: 1.5rem; /* was 3rem */ } /* MODERN - "HER" film esthetiek: warme, zachte futuristische tinten */ .ts-style-modern { /* HER-geïnspireerde kleurenpallet: warm oranje-rood spectrum */ --ts-color-primary: #f4511e; /* warm oranje (HER accent) */ --ts-color-primary-dark: #d84315; /* diep warm oranje */ --ts-color-primary-light: #ff8a65; /* licht perzik-oranje */ /* Extra warme tinten voor HER-gevoel */ --ts-color-accent-warm: #ff7043; /* warm koper */ --ts-color-accent-soft: #ffab91; /* zachte perzik */ --ts-color-text: #3e2723; /* warme donkerbruine tekst */ --ts-color-grey: #d7ccc8; /* warme beige */ --ts-color-off-white: #fff8e1; /* warme crème */ /* Zachte, futuristische font ratios */ --ts-text-xs: 0.75rem; --ts-text-sm: 0.875rem; --ts-text-md: 1rem; --ts-text-lg: 1.25rem; /* iets meer contrast voor leesbaarheid */ --ts-text-xl: 1.5rem; /* zachte stappen */ --ts-text-2xl: 2rem; /* elegante verhoudingen */ /* Harmonische logo groottes */ --ts-logo-sm: 2rem; --ts-logo-md: 2.75rem; --ts-logo-lg: 3.5rem; /* zachte progressie */ --ts-logo-xl: 4.5rem; /* warme aanwezigheid */ /* Warme, uitnodigende spacing */ --ts-space-4: 1.75rem; --ts-space-5: 2.25rem; --ts-space-6: 3rem; /* ruimere, zachte spacing */ } /* MODERN THEME - HER-geïnspireerde gradient effecten */ .ts-style-modern .ts-button--primary { background: linear-gradient(135deg, #f4511e 0%, #ff7043 100%); border: none; box-shadow: 0 4px 20px rgba(244, 81, 30, 0.25); border-radius: var(--ts-radius-lg); } .ts-style-modern .ts-button--primary:hover { background: linear-gradient(135deg, #d84315 0%, #f4511e 100%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(244, 81, 30, 0.35); } .ts-style-modern .ts-button--secondary { background: linear-gradient(135deg, #fff8e1 0%, #ffab91 100%); color: #3e2723; border: 2px solid #f4511e; border-radius: var(--ts-radius-lg); } .ts-style-modern .ts-label--primary { background: linear-gradient(135deg, #f4511e 0%, #ff7043 100%); } .ts-style-modern .ts-nav { background: linear-gradient(90deg, #3e2723 0%, #5d4037 100%); } .ts-style-modern .ts-footer__red-sheet { background: linear-gradient(45deg, #f4511e 0%, #ff7043 50%, #ffab91 100%); } .ts-style-modern .ts-footer__blue-sheet { background: linear-gradient(45deg, #6d4c41 0%, #8d6e63 50%, #a1887f 100%); } /* HER-stijl gradient effecten voor andere componenten */ .ts-style-modern .ts-project-preview:hover { border-image: linear-gradient(135deg, #f4511e, #ff7043) 1; box-shadow: 0 15px 40px rgba(244, 81, 30, 0.2); } .ts-style-modern .ts-project-preview__overlay { background: linear-gradient(135deg, rgba(244, 81, 30, 0.85) 0%, rgba(255, 112, 67, 0.85) 100%); backdrop-filter: blur(2px); } /* Auto-tint overlays ook theme-aware maken */ .ts-style-modern .ts-project-preview__image--auto-tint::before { background: linear-gradient(135deg, rgba(244, 81, 30, 1) 0%, rgba(255, 112, 67, 0.7) 100%); mix-blend-mode: plus-lighter; } .ts-style-modern .ts-project-preview__image--auto-tint::after { background: linear-gradient(135deg, rgba(244, 81, 30, 0.6) 0%, rgba(255, 112, 67, 0.3) 100%); mix-blend-mode: multiply; } .ts-style-modern .ts-project-preview__image--auto-tint .ts-project-preview__overlay { background: linear-gradient(135deg, rgba(244, 81, 30, 0.9) 0%, rgba(255, 112, 67, 0.9) 100%); } .ts-style-gedurfd .ts-project-preview__image--auto-tint::before { background: linear-gradient(135deg, rgba(214, 54, 56, 1) 0%, rgba(214, 54, 56, 0.8) 100%); mix-blend-mode: plus-lighter; } .ts-style-gedurfd .ts-project-preview__image--auto-tint::after { background: linear-gradient(135deg, rgba(214, 54, 56, 0.7) 0%, rgba(214, 54, 56, 0.4) 100%); mix-blend-mode: multiply; } .ts-style-gedurfd .ts-project-preview__image--auto-tint .ts-project-preview__overlay { background: rgba(214, 54, 56, 0.95); box-shadow: inset 0 0 20px rgba(214, 54, 56, 0.3); } .ts-style-subtiel .ts-project-preview__image--auto-tint::before { background: linear-gradient(135deg, rgba(30, 89, 166, 0.9) 0%, rgba(30, 89, 166, 0.6) 100%); mix-blend-mode: plus-lighter; } .ts-style-subtiel .ts-project-preview__image--auto-tint::after { background: linear-gradient(135deg, rgba(30, 89, 166, 0.5) 0%, rgba(30, 89, 166, 0.2) 100%); mix-blend-mode: multiply; } .ts-style-subtiel .ts-project-preview__image--auto-tint .ts-project-preview__overlay { background: rgba(30, 89, 166, 0.75); } .ts-style-elegant .ts-project-preview__image--auto-tint::before { background: linear-gradient(135deg, rgba(30, 89, 166, 0.9) 0%, rgba(30, 89, 166, 0.6) 100%); mix-blend-mode: plus-lighter; } .ts-style-elegant .ts-project-preview__image--auto-tint::after { background: linear-gradient(135deg, rgba(30, 89, 166, 0.5) 0%, rgba(30, 89, 166, 0.25) 100%); mix-blend-mode: multiply; } .ts-style-elegant .ts-project-preview__image--auto-tint .ts-project-preview__overlay { background: rgba(30, 89, 166, 0.8); backdrop-filter: blur(1px); } .ts-style-modern .ts-social-links__link { background: linear-gradient(135deg, #f4511e 0%, #ff7043 100%); border-radius: 50%; } .ts-style-modern .ts-social-links__link:hover { background: linear-gradient(135deg, #d84315 0%, #f4511e 100%); transform: scale(1.1); box-shadow: 0 8px 20px rgba(244, 81, 30, 0.3); } .ts-style-modern .ts-blockquote { border-left: 4px solid transparent; border-image: linear-gradient(180deg, #f4511e 0%, #ff7043 100%) 1; background: rgba(255, 248, 225, 0.3); border-radius: var(--ts-radius-md); } .ts-style-modern .ts-blockquote__text { background: linear-gradient(135deg, #f4511e 0%, #ff7043 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Logo styling voor Modern theme */ .ts-style-modern .ts-logo__image { filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 8px rgba(255, 71, 87, 0.4)); } .ts-style-modern .ts-nav__logo img { /* Terug naar origineel - geen speciale effecten voor nav logo */ filter: none; } /* ELEGANT - Zelfde kleuren, maar verfijnde verhoudingen */ .ts-style-elegant { /* Behoud de originele Tiltshift kleuren */ --ts-color-primary: #d63638; --ts-color-primary-dark: #1e59a6; /* Verfijnde font scale */ --ts-text-xs: 0.75rem; --ts-text-sm: 0.8125rem; /* subtiele stappen */ --ts-text-md: 0.9375rem; /* subtiele stappen */ --ts-text-lg: 1.125rem; /* subtiele stappen */ --ts-text-xl: 1.375rem; /* subtiele stappen */ --ts-text-2xl: 1.75rem; /* subtiele stappen */ /* Verfijnde logo groottes */ --ts-logo-sm: 1.75rem; --ts-logo-md: 2.25rem; --ts-logo-lg: 3rem; --ts-logo-xl: 4rem; /* Elegante spacing */ --ts-space-4: 1.25rem; --ts-space-5: 1.75rem; --ts-space-6: 2.5rem; } /* ============================================================================= LOGO THEMING - Theme-aware logo styling ============================================================================= */ /* GEDURFD - Dramatischer logo */ .ts-style-gedurfd .ts-logo__image { filter: contrast(1.2) saturate(1.1) drop-shadow(0 2px 8px rgba(214, 54, 56, 0.3)); transition: all 0.3s ease; } .ts-style-gedurfd .ts-logo__image:hover { filter: contrast(1.3) saturate(1.2) drop-shadow(0 4px 12px rgba(214, 54, 56, 0.4)) scale(1.05); } /* SUBTIEL - Zachtere logo */ .ts-style-subtiel .ts-logo__image { filter: opacity(0.85) saturate(0.8) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); } /* ELEGANT - Verfijnde logo */ .ts-style-elegant .ts-logo__image { filter: contrast(0.95) saturate(0.9) drop-shadow(0 1px 6px rgba(214, 54, 56, 0.15)); transition: all 0.2s ease; } .ts-style-elegant .ts-logo__image:hover { filter: contrast(1.05) saturate(1.0) drop-shadow(0 2px 8px rgba(214, 54, 56, 0.2)); } /* Logo variants voor alle nieuwe themes */ .ts-style-modern .ts-logo__image--small, .ts-style-modern .ts-logo__image--medium, .ts-style-modern .ts-logo__image--large { filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 8px rgba(255, 71, 87, 0.4)); } .ts-style-gedurfd .ts-logo__image--small, .ts-style-gedurfd .ts-logo__image--medium, .ts-style-gedurfd .ts-logo__image--large { filter: contrast(1.2) saturate(1.1) drop-shadow(0 2px 8px rgba(214, 54, 56, 0.3)); } .ts-style-subtiel .ts-logo__image--small, .ts-style-subtiel .ts-logo__image--medium, .ts-style-subtiel .ts-logo__image--large { filter: opacity(0.85) saturate(0.8) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); } .ts-style-elegant .ts-logo__image--small, .ts-style-elegant .ts-logo__image--medium, .ts-style-elegant .ts-logo__image--large { filter: contrast(0.95) saturate(0.9) drop-shadow(0 1px 6px rgba(214, 54, 56, 0.15)); } /* Navigatie logo's ook theme-aware maken */ .ts-style-gedurfd .ts-nav__logo img { filter: contrast(1.2) saturate(1.1) drop-shadow(0 2px 6px rgba(214, 54, 56, 0.3)); } .ts-style-subtiel .ts-nav__logo img { filter: opacity(0.85) saturate(0.8) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .ts-style-elegant .ts-nav__logo img { filter: contrast(0.95) saturate(0.9) drop-shadow(0 1px 4px rgba(214, 54, 56, 0.15)); } /* ============================================================================= MOBILE NAVIGATION THEMING ============================================================================= */ /* MODERN - Mobile navigatie met gradient effecten */ .ts-style-modern .mobile-menu-toggle { background: linear-gradient(135deg, #ff4757 0%, #ff6348 100%); box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3); } .ts-style-modern .mobile-menu-toggle:hover { background: linear-gradient(135deg, #ff3742 0%, #ff5533 100%); } .ts-style-modern .ts-mobile-menu-toggle { background: linear-gradient(135deg, #ff4757 0%, #ff6348 100%); border-radius: var(--ts-radius-sm); } .ts-style-modern .ts-mobile-menu-toggle:hover { background: linear-gradient(135deg, #ff3742 0%, #ff5533 100%); } /* GEDURFD - Mobile navigatie met dramatische effecten */ .ts-style-gedurfd .mobile-menu-toggle { background: var(--ts-color-primary); box-shadow: 0 3px 10px rgba(214, 54, 56, 0.4); transform: scale(1.1); } .ts-style-gedurfd .mobile-menu-toggle:hover { background: var(--ts-color-primary-dark); box-shadow: 0 4px 15px rgba(214, 54, 56, 0.5); } /* SUBTIEL - Mobile navigatie met zachte effecten */ .ts-style-subtiel .mobile-menu-toggle { background: var(--ts-color-primary); opacity: 0.8; box-shadow: 0 1px 3px rgba(214, 54, 56, 0.2); } .ts-style-subtiel .mobile-menu-toggle:hover { opacity: 1; background: var(--ts-color-primary-dark); } /* ELEGANT - Mobile navigatie met verfijnde effecten */ .ts-style-elegant .mobile-menu-toggle { background: var(--ts-color-primary); box-shadow: 0 2px 6px rgba(214, 54, 56, 0.15); border-radius: var(--ts-radius-md); } .ts-style-elegant .mobile-menu-toggle:hover { background: var(--ts-color-primary-dark); box-shadow: 0 3px 8px rgba(214, 54, 56, 0.25); } /* ============================================================================= MOBILE NAVIGATION PANEL THEMING ============================================================================= */ /* MODERN - Mobile panel met HER-stijl gradient effecten */ .ts-style-modern .ts-nav--mobile { background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%) !important; } .ts-style-modern .ts-nav__mobile-panel { background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%) !important; } /* GEDURFD - Mobile panel met intensere kleuren */ .ts-style-gedurfd .ts-nav--mobile { background-color: #1a1a1a; box-shadow: 0 0 20px rgba(214, 54, 56, 0.3); } .ts-style-gedurfd .ts-nav__mobile-panel { background-color: #1a1a1a; border-left: 3px solid var(--ts-color-primary); } /* SUBTIEL - Mobile panel met zachte achtergrond */ .ts-style-subtiel .ts-nav--mobile { background-color: rgba(0, 0, 0, 0.85); } .ts-style-subtiel .ts-nav__mobile-panel { background-color: rgba(0, 0, 0, 0.85); } /* ELEGANT - Mobile panel met verfijnde styling */ .ts-style-elegant .ts-nav--mobile { background-color: #2c3e50; } .ts-style-elegant .ts-nav__mobile-panel { background-color: #2c3e50; border-left: 1px solid rgba(214, 54, 56, 0.2); } /* ============================================================================= MOBILE MENU PAGE THEMING - For full-page mobile menus ============================================================================= */ /* MODERN - HER-stijl full page mobile menu */ body.ts-style-modern.ts-nav--mobile { background: linear-gradient(135deg, #3e2723 0%, #5d4037 30%, #f4511e 100%); backdrop-filter: blur(20px); } /* GEDURFD - Full page mobile menu with dramatic styling */ body.ts-style-gedurfd.ts-nav--mobile { background-color: #1a1a1a; border-left: 4px solid var(--ts-color-primary); box-shadow: inset 0 0 50px rgba(214, 54, 56, 0.1); } /* SUBTIEL - Full page mobile menu with soft styling */ body.ts-style-subtiel.ts-nav--mobile { background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); } /* ELEGANT - Full page mobile menu with refined styling */ body.ts-style-elegant.ts-nav--mobile { background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%); border-left: 2px solid rgba(214, 54, 56, 0.3); }