/* ============================================================================= El Solar Uruguay — Shared Stylesheet Single file: normalize, tokens, fonts, header themes, carousel, layout. No frameworks, no build step. ============================================================================= */ /* --------------------------------------------------------------------------- 1. SELF-HOSTED FONTS --------------------------------------------------------------------------- */ @font-face { font-family: Lato; src: url(/assets/fonts/lato-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Lato; src: url(/assets/fonts/lato-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Raleway; src: url(/assets/fonts/raleway-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Raleway; src: url(/assets/fonts/raleway-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- 2. MODERN NORMALIZE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; } body { margin: 0; font-family: Lato, system-ui, sans-serif; font-weight: 400; color: var(--color-text); background-color: var(--color-bg); } h1, h2, h3, h4, h5, h6 { font-family: Raleway, system-ui, sans-serif; font-weight: 700; line-height: 1.2; margin-block: 0 0.5em; } p { margin-block: 0 1em; } img, picture, video, canvas, svg { display: block; max-width: 100%; } ul, ol { padding-inline-start: 1.25rem; margin-block: 0 1em; } a { color: inherit; } button { cursor: pointer; font: inherit; } iframe { border: 0; } /* --------------------------------------------------------------------------- 3. DESIGN TOKENS — CSS CUSTOM PROPERTIES --------------------------------------------------------------------------- */ :root { /* Color palette */ --color-text: #1a1a1a; --color-text-muted: #555; --color-bg: #ffffff; --color-surface: #f5f5f5; --color-border: #e0e0e0; --color-white: #ffffff; /* Brand / theme accents (overridden per theme below) */ --header-accent: #cccccc; --header-bar: var(--header-accent); /* Logo (swap if a theme has its own logo variant) */ --header-logo: url(/assets/img/shared-logo.svg); /* Fluid type scale */ --fs-sm: clamp(0.8rem, 1.5vw, 0.9rem); --fs-base: clamp(1rem, 2vw, 1.125rem); --fs-md: clamp(1.125rem,2.5vw, 1.375rem); --fs-lg: clamp(1.375rem,3vw, 1.75rem); --fs-h2: clamp(1.5rem, 4vw, 2.25rem); --fs-h1: clamp(1.75rem, 5vw, 3rem); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; /* Layout */ --content-max: 1200px; --content-gutter: clamp(1rem, 5vw, 3rem); /* Header */ --header-height: 80px; --header-bar-height: 8px; /* Carousel */ --slide-gap: 0px; } /* --------------------------------------------------------------------------- 4. HEADER THEMES — data-theme on --------------------------------------------------------------------------- */ /* EPEI — yellow */ [data-theme="epei"] { --header-accent: #ffcc2a; --header-bar: var(--header-accent); } /* INSTITUTO / CET / CD — pink */ [data-theme="instituto"] { --header-accent: #fe4fac; --header-bar: var(--header-accent); } /* PUERTO SOFIA — turquoise */ [data-theme="sofia"] { --header-accent: #22dec6; --header-bar: var(--header-accent); } /* HOME — rainbow gradient bar (overrides --header-bar directly) */ [data-theme="home"] { --header-accent: #e94e77; /* fallback for anything reading --header-accent */ --header-bar: linear-gradient( to right, #e94e77, #f47b20, #f9df44, #56b146, #009bde, #7b4f9e ); } /* --------------------------------------------------------------------------- 5. SITE HEADER --------------------------------------------------------------------------- */ .site-header { position: relative; background-color: var(--color-white); box-shadow: 0 1px 4px rgb(0 0 0 / 0.1); } /* Coloured bar at the top of the header */ .site-header__bar { height: var(--header-bar-height); background: var(--header-bar); } /* Inner content row: logo + optional tagline */ .site-header__inner { display: flex; align-items: center; gap: var(--space-md); max-width: var(--content-max); margin-inline: auto; padding-block: var(--space-md); padding-inline: var(--content-gutter); min-height: var(--header-height); } .site-header__logo { display: block; width: auto; /* Hero-proportional logo, tuned down (hero is 16:9 full-bleed → height ≈ 56.25vw). */ height: clamp(52px, 13.5vw, 187px); object-fit: contain; } /* Interior pages use smaller source logos — reduce header height 20% to avoid upscaling/pixelation. */ body:not([data-theme="home"]) .site-header__logo { height: clamp(42px, 10.8vw, 150px); } .site-header__tagline { font-family: Raleway, system-ui, sans-serif; font-size: var(--fs-md); font-weight: 700; color: var(--color-text); margin: 0; } /* --------------------------------------------------------------------------- 6. LAYOUT UTILITIES --------------------------------------------------------------------------- */ .container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--content-gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 7. CAROUSEL / SCROLL-SNAP PATTERN Reusable across: home hero (3 slides + JS autoplay), instituto slider (6 slides), cet per-área galleries (3 each), cd gallery (8 slides). All CSS-only except home hero autoplay. --------------------------------------------------------------------------- */ .carousel { position: relative; overflow: hidden; } /* The scrollable track */ .carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; gap: var(--slide-gap); /* Hide scrollbar visually but keep it functional */ scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } /* Individual slide — full-width by default */ .carousel__slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; } .carousel__slide img { width: 100%; height: 100%; object-fit: cover; } /* figure/figcaption variant used by instituto, cet, cd */ .carousel__slide figure { margin: 0; position: relative; } /* Caption overlaid on the slide image (used by the CET slider). */ .carousel__slide figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + var(--space-md)); text-align: center; color: #fff; font-size: var(--fs-lg); font-weight: 600; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); background: linear-gradient(transparent, rgb(0 0 0 / 0.55)); } /* CET & CD: single-image sliders — give slides a defined height like the instituto slider. */ .carousel[data-carousel="cet"] .carousel__slide img, .carousel[data-carousel="cd"] .carousel__slide img { height: clamp(200px, 38vw, 460px); width: 100%; object-fit: cover; } /* Gallery modifier — shows ~1.2 slides to hint horizontal scrollability */ .carousel--gallery .carousel__slide { flex: 0 0 calc(100% / 1.2); } @media (min-width: 600px) { .carousel--gallery .carousel__slide { flex: 0 0 calc(100% / 2.2); } } @media (min-width: 1024px) { .carousel--gallery .carousel__slide { flex: 0 0 calc(100% / 3.2); } } /* CET per-área section: each área gets its own heading + carousel */ .area-section { margin-block: var(--space-xl); } .area-section__heading { font-size: var(--fs-h2); margin-block-end: var(--space-md); } /* --------------------------------------------------------------------------- 8. REDUCED-MOTION — disable smooth scroll on carousels Autoplay JS also checks this before starting. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } /* Any CSS transitions/animations used elsewhere */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- 9. MAIN CONTENT --------------------------------------------------------------------------- */ .site-main { padding-block: var(--space-xl); } .site-main .container { /* nothing special — let children control layout */ } /* --------------------------------------------------------------------------- 10. FOOTER Two-column layout on wide screens: left — contact blocks (5 items) stacked vertically right — Google Maps iframe Below the two columns: convenios strip + social icons + copyright. On narrow screens (< 768px) all sections stack vertically. --------------------------------------------------------------------------- */ .site-footer { background-color: #0a1a2b; /* navy blue, matching the original footer */ color: var(--color-white); padding-block: var(--space-xl); font-size: var(--fs-sm); } /* Constrained inner wrapper */ .footer-inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--content-gutter); } .site-footer a { color: inherit; text-decoration: underline; } .site-footer a:hover { opacity: 0.8; } .site-footer h3 { color: var(--color-white); } /* Two-column: contact blocks (left) + map (right) */ .footer-top { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-block-end: var(--space-xl); } @media (min-width: 768px) { .footer-top { grid-template-columns: 1fr 1fr; align-items: start; } } /* 5-block contact column */ .footer-contacts { display: flex; flex-direction: column; gap: var(--space-xl); } .footer-contact-block h3 { font-size: calc(var(--fs-sm) * 1.2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding-block-end: var(--space-sm); margin-block-end: var(--space-md); border-block-end: 1px solid rgb(255 255 255 / 0.25); } .footer-contact-block p { margin: 0; line-height: 1.6; } /* Maps iframe column */ .footer-map { position: relative; } .footer-map h3 { font-size: calc(var(--fs-sm) * 1.2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding-block-end: var(--space-sm); margin-block-end: var(--space-md); border-block-end: 1px solid rgb(255 255 255 / 0.25); } .footer-map iframe { width: 100%; height: 300px; border-radius: 4px; } @media (min-width: 768px) { .footer-map iframe { height: 380px; } } /* Convenios list — home body (light background), vertical stacked rows. */ .convenios-list { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; list-style: none; padding: 0; margin-block: 0; margin-inline: auto; max-width: 620px; } .convenios-list li { display: flex; align-items: center; gap: var(--space-md); } .convenios-list img { height: 40px; width: auto; object-fit: contain; } .convenios-list span { font-size: calc(var(--fs-md) * 0.729); color: var(--color-text); line-height: 1.3; text-align: left; } /* Copyright line */ .footer-copyright { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: 1px solid rgb(255 255 255 / 0.10); font-size: var(--fs-sm); color: var(--color-white); font-weight: 700; text-align: center; } .footer-copyright p { margin: 0; } /* --------------------------------------------------------------------------- 11. PAGE BANNER — breadcrumb title bar (interior pages) --------------------------------------------------------------------------- */ .page-banner { background-color: var(--header-accent); padding-block: var(--space-md); } .page-banner__title { color: var(--color-white); font-size: var(--fs-h1); margin: 0; } /* --------------------------------------------------------------------------- 12. HOME — hero section --------------------------------------------------------------------------- */ .hero-section { /* Hero takes full width; no extra padding */ } /* Match the slides' native 16:9 ratio so the whole image shows — no crop. */ .hero-section .carousel, .hero-section .carousel__slide { aspect-ratio: 16 / 9; } .hero-section .carousel__slide img { width: 100%; height: 100%; object-fit: cover; /* box ratio == image ratio → full image, no cropping */ } /* --------------------------------------------------------------------------- 13. HOME — about section --------------------------------------------------------------------------- */ .about-section { margin-block: var(--space-xl); } .about-section h2 { font-size: var(--fs-h2); margin-block-end: var(--space-lg); color: var(--color-text); text-align: center; } .about-section p { color: var(--color-text-muted); line-height: 1.7; font-size: 1.2rem; } /* --------------------------------------------------------------------------- 14. HOME — recuadros (3 contextual link cards) --------------------------------------------------------------------------- */ .recuadros-section { margin-block: var(--space-xl); } .recuadros-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); } .recuadro { text-align: center; } .recuadro__link { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); padding: var(--space-md); border-radius: 4px; transition: box-shadow 0.2s; } .recuadro__link:hover { box-shadow: 0 2px 12px rgb(0 0 0 / 0.12); } .recuadro__img { width: 160px; height: auto; object-fit: contain; } /* Titles hidden visually to match the logo-only design; kept in the DOM for a11y. */ .recuadro__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 15. HOME — convenios section (in-body, above footer) --------------------------------------------------------------------------- */ .convenios-section { margin-block: var(--space-xl); } .convenios-section h2 { font-size: var(--fs-h2); margin-block-end: var(--space-xl); text-align: center; } /* .convenios-list is styled in the section above (light-theme, vertical list) */ /* --------------------------------------------------------------------------- 16. INTERIOR PAGES — slider section --------------------------------------------------------------------------- */ .slider-section { /* Constrained to content width (not full-bleed), centered. */ max-width: var(--content-max); margin-inline: auto; margin-block: var(--space-xl); padding-inline: var(--content-gutter); } .slider-section .carousel__slide img { height: clamp(200px, 40vw, 500px); width: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- Carousel controls (arrows + dots) — injected by js/carousel.js. Without JS the carousel is a bare manual scroll-snap strip (no controls). --------------------------------------------------------------------------- */ .carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background-color: rgb(0 0 0 / 0.55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 2px; } .carousel__arrow:hover { background-color: rgb(0 0 0 / 0.8); } .carousel__arrow--prev { left: var(--space-sm); } .carousel__arrow--next { right: var(--space-sm); } .carousel__dots { position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: var(--space-sm); } .carousel__dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #fff; background-color: transparent; cursor: pointer; } .carousel__dot[aria-current="true"] { background-color: #fff; } /* --------------------------------------------------------------------------- 17. INSTITUTO — declaraciones (Misión / Visión / Valores) --------------------------------------------------------------------------- */ .declaraciones-section { background-color: #c8bad2; /* soft lilac, matching the original */ padding-block: var(--space-xl); } .declaraciones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); } .declaracion-card { background-color: var(--color-white); border-radius: 6px; border-left: 5px solid var(--header-accent); padding: var(--space-lg); box-shadow: 0 1px 4px rgb(0 0 0 / 0.07); text-align: center; } .declaracion-card h2 { font-size: var(--fs-lg); margin-block-end: var(--space-md); color: var(--color-text); } /* --------------------------------------------------------------------------- 18. INSTITUTO — habilitaciones / cobertura grid --------------------------------------------------------------------------- */ /* Single stacked gray box (Habilitaciones + Cobertura), subtle left accent. */ .cobhab-grid { display: flex; flex-direction: column; gap: var(--space-lg); margin-block: var(--space-lg); padding: var(--space-lg); background-color: var(--color-surface); border-left: 4px solid rgb(0 0 0 / 0.12); border-radius: 4px; } .cobhab-block h4 { font-size: var(--fs-md); margin-block-end: var(--space-sm); } /* --------------------------------------------------------------------------- 19. INSTITUTO — modalidad buttons (contextual nav: /cet/ + /cd/) --------------------------------------------------------------------------- */ .modalidades-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block: var(--space-lg); } .modalidad-btn { display: inline-block; padding: var(--space-sm) var(--space-lg); background-color: var(--header-accent); color: var(--color-white); border-radius: 4px; text-decoration: none; font-family: Raleway, system-ui, sans-serif; font-weight: 700; text-align: center; line-height: 1.4; transition: opacity 0.15s; } .modalidad-btn:hover { opacity: 0.85; } /* --------------------------------------------------------------------------- 20. INTERIOR PAGES — article figure --------------------------------------------------------------------------- */ .article-figure { margin-block: var(--space-xl); margin-inline: 0; } .article-figure img { width: 100%; height: auto; border-radius: 4px; } /* --------------------------------------------------------------------------- 21. INTERIOR PAGES — page-level social icons row --------------------------------------------------------------------------- */ .page-social { display: flex; gap: var(--space-md); align-items: center; justify-content: center; margin-block: var(--space-xl); } .page-social img { width: 65px; height: 65px; object-fit: contain; } /* --------------------------------------------------------------------------- 22. PAGE ARTICLE --------------------------------------------------------------------------- */ .page-article { max-width: 800px; margin-block: var(--space-xl); } /* CET body text: larger and more airy (per request). */ .page-article--comodo p { font-size: 1.2rem; line-height: 1.85; } .page-article h3 { font-size: var(--fs-h2); margin-block: var(--space-lg) var(--space-sm); } .page-article h4 { font-size: var(--fs-md); margin-block: var(--space-md) var(--space-xs); }