/* app/static/css/variants/hero.css */ /* * Hero Variant * * Purpose: * - Makes the .hero-section (defined in page templates like magazine/home.html) visible. * - On desktop (specifically for magazine layout home page), it hides the standard site header * and shows an alternative header (.hero__header-overlay) positioned over the hero content. * - Styles the hero content (often a carousel) with a specific look (e.g., full-width, * text overlays on images). * - By default, it HIDES the carousel navigation buttons. The 'hero-carousel' variant * can be used in conjunction to re-enable them. * - Includes complex rules to adjust the main content grid card styles when this hero * variant is active on the magazine layout, creating a distinct visual hierarchy. * * Activation: * - Add 'variant-hero' class to the tag. * - Ensure relevant HTML structure (e.g., .hero-section, .hero__header-overlay) exists in templates. * * Dependencies: * - Uses CSS variables from base/variables.css for colors, spacing, fonts. * - Interacts with layout-specific CSS, particularly layouts/magazine.css. * - Component CSS for .header, .carousel-component, .card provides base styling. */ /* --- Show Hero Section --- */ /* Applied when 'variant-hero' is on the body tag. */ .variant-hero .hero-section { display: block !important; /* Ensure hero section is visible, overriding layout defaults if necessary */ margin-bottom: var(--spacing-lg, 2rem); /* Space below the hero section */ position: relative; /* For positioning of overlay elements */ width: 100%; /* Full width */ } /* --- Default Header Behavior (Mobile-first) --- */ /* On mobile, the standard site header is always visible. */ .variant-hero .header { display: flex !important; } /* --- Desktop Styles (1024px and up) --- */ /* On homepage with hero variant, the real header becomes a transparent overlay positioned over the hero content — white text on a gradient backdrop. */ @media (min-width: 1024px) { .variant-hero.page-home .header { display: flex !important; position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-index-sticky, 1020); background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); border-bottom: none; box-shadow: none; margin-bottom: 0; } .variant-hero.page-home .header .header__brand, .variant-hero.page-home .header .header__title, .variant-hero.page-home .header .header__link { color: var(--color-white, #fff); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .variant-hero.page-home .header .header__title { font-size: var(--font-size-2xl, 1.5rem); } .variant-hero.page-home .header .header__link { font-size: var(--font-size-lg, 1.125rem); } .variant-hero.page-home .header .header__link:hover { color: var(--color-white, #fff); opacity: 0.8; } .variant-hero.page-home .header .header__toggle-line { background: var(--color-white, #fff); } .variant-hero.page-home .header .header__nav { background: transparent !important; border: none; box-shadow: none; } /* The absolute header is removed from document flow — add top padding so the first content section clears it instead of sitting behind it. */ .variant-hero.page-home main#main-content { padding-top: calc(var(--header-height, 60px) + var(--spacing-md, 1rem)); } } /* --- Hero Carousel / Static Hero Content Styling --- */ /* These styles apply to the carousel component when it's inside a .hero-section with .variant-hero */ .variant-hero .hero-section .carousel-component { max-height: 70vh; /* Limit height of the hero carousel */ width: 100%; overflow: hidden; position: relative; background-color: var( --color-border, #eee ); /* Fallback background if images fail */ border-radius: 0; /* Hero is typically full-bleed, no radius */ } /* Styling for individual slides and their content within the hero carousel */ .variant-hero .hero-section .carousel-component .carousel__slide { color: var(--color-white, #fff); /* Default text color for slides */ border: none; background-color: transparent; /* Slide itself is transparent, image is separate */ box-shadow: none; padding: 0; border-radius: 0 !important; /* Ensure no radius from card defaults */ } /* Image container within the hero slide */ .variant-hero .hero-section .carousel-component .carousel__slide .card__image-container { height: 100%; width: 100%; position: absolute; /* Image container is positioned to fill the slide */ top: 0; left: 0; z-index: 1; /* Behind content */ margin: 0; padding: 0; line-height: 0; /* Remove space below image */ background-color: transparent; } .variant-hero .hero-section .carousel-component .carousel__slide .card__image-container .card__image { width: 100%; height: 100%; object-fit: cover; /* Cover the area, may crop */ display: block; border-radius: 0 !important; /* Ensure no radius from card defaults */ } /* Darkening overlay for text readability on hero slides */ .variant-hero .hero-section .carousel-component .carousel__slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100% ); /* Gradient from transparent to dark */ z-index: 2; /* Above image, below text */ border-radius: 0; pointer-events: none; /* Allow clicks to pass through */ } /* Content block (text) within hero slides */ .variant-hero .hero-section .carousel-component .carousel__slide .card__content { position: relative; /* Ensure it's above the ::before pseudo-element */ z-index: 3; /* Above image and overlay */ background-color: transparent; /* Content background is transparent */ padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem) var(--spacing-md, 1rem); /* Use spacing variables */ height: 100%; /* Take full height to allow vertical alignment */ display: flex; flex-direction: column; justify-content: flex-end; /* Align text to the bottom */ margin: 0; color: var(--color-white, #fff); /* Ensure text is white */ flex-grow: 0 !important; /* Override card default flex-grow */ } /* Text styling within hero slide content */ .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__category, .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__title, .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__title a, .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__description, .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__meta { color: var(--color-white, #fff); /* Ensure all text is white */ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Add shadow for readability */ } .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__title { font-size: var(--font-size-2xl, 1.5rem); /* Use font size variables */ line-height: 1.1; /* Tighter line height for hero titles */ margin-bottom: var(--spacing-sm, 0.5rem); } .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__title a:hover { color: var(--color-white, #fff); /* Keep color, underline for hover */ text-decoration: underline; } .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__description { font-size: var(--font-size-md, 1rem); line-height: var(--line-height-base, 1.6); /* Standard line height */ margin-bottom: var(--spacing-sm, 0.5rem); flex-grow: 0 !important; /* Override card default */ } .variant-hero .hero-section .carousel-component .carousel__slide .card__content .card__meta { font-size: var(--font-size-sm, 0.875rem); margin-top: var( --spacing-xs, 0.25rem ) !important; /* Ensure small top margin */ padding-top: 0 !important; /* Reset padding */ } /* Hide carousel navigation buttons by default for this hero variant. The 'hero-carousel' variant can be used to show them. */ .variant-hero .hero-section .carousel__navigation { display: none; } /* --- Desktop Overrides for MAIN GRID BELOW HERO (1024px+) --- */ /* Active when variant-hero + layout-magazine. Adjusts card appearance in the grid. */ @media (min-width: 1024px) { /* Reset magazine.css grid placement — hero variant uses auto flow */ .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n) { grid-column: auto; grid-row: auto; } /* --- Cards 1-3: Background image mode --- */ .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) > .card { --card-min-height: 350px; --card-content-justify: flex-end; border: none; background-color: transparent; box-shadow: none; color: var(--color-white); border-radius: var(--border-radius-lg); overflow: hidden; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; aspect-ratio: unset; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) > .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); z-index: 2; pointer-events: none; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__content { position: relative; z-index: 3; background-color: transparent; height: 100%; color: var(--color-white); flex-grow: 0; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__category, .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__title, .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__title a, .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__description { color: var(--color-white); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); flex-grow: 0; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__title a:hover { color: var(--color-white); text-decoration: underline; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 1):nth-child(-n + 3) .card__meta { margin-top: var(--spacing-xs); padding-top: 0; } /* --- Cards 4-6: Horizontal mode --- */ .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 4):nth-child(-n + 6) > .card { --card-image-width: 35%; flex-direction: row; align-items: stretch; border-radius: var(--border-radius-lg); } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 4):nth-child(-n + 6) > .card::before { display: none; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 4):nth-child(-n + 6) .card__image-container { flex: 0 0 var(--card-image-width); aspect-ratio: unset; height: auto; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 4):nth-child(-n + 6) .card__content { flex: 1 1 auto; } .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 4):nth-child(-n + 6) .card__meta { margin-top: auto; padding-top: var(--spacing-xs); } /* --- Cards 7+: Default vertical (card.css defaults apply) --- */ .variant-hero.layout-magazine .card-grid--dynamic-layout > .slot:nth-child(n + 7) > .card::before { display: none; } } /* End Desktop Media Query for Magazine Grid Card Styling */