/* Hand-written rules layered on top of the Framer export. * * The export is generated, so it is not a place to edit: a re-export from * Framer overwrites index.html and the vendor bundle wholesale. Anything we * decide here that Framer does not know about lives in this file instead, and * survives that by being linked last in — later sheet, same specificity, * so it wins on order without !important. * * The class names are Framer's own hashes. They are stable for as long as the * design is, and they change when the node is re-created in Framer, so a rule * here going dead is expected rather than alarming: re-check the class against * the live DOM before assuming anything else broke. */ /* --- ZONAS card --------------------------------------------------------- * * `framer-1skkpm8` is the third card of the features bento — the narrow one at * the top right. In Framer it is a flat #0f0f0f panel whose only artwork is a * numeral; here it gets the H3 safety grid over Barcelona as a full-bleed * background, which is what the card is now about. * * The gradient is the first layer, so it sits ON TOP of the photograph. It is * heaviest across the top quarter, where the eyebrow and the headline are, and * never fully clears: the grid is a saturated green at native brightness and * would otherwise be the loudest thing on a page that is black everywhere else. * The card's own #0f0f0f is the gradient's colour, so the scrim reads as the * card fading into the map rather than as a film over it. */ .framer-8Jmbi .framer-1skkpm8 { background-image: linear-gradient( 180deg, rgba(15, 15, 15, 0.95) 0%, rgba(15, 15, 15, 0.88) 22%, rgba(15, 15, 15, 0.55) 42%, rgba(15, 15, 15, 0.38) 100% ), url("../assets/images/echo_zones_grid.webp"); background-position: center; background-repeat: no-repeat; background-size: cover; } /* --- "Por qué Echo" carousel --------------------------------------------- * * `framer-iwb9va` is a card in the ticker. In the template it held a quote * PLUS an avatar and a name, and the 20px body preset was sized for sharing * the card with them. Ours holds the line and nothing else — Echo has no * users to quote, so the frases carry no attribution — which left a 500x320 * card three-quarters empty. * * So the line grows to fill the card it now has to itself. Only the card's * own text: the preset is the site's body style and is used everywhere. */ .framer-8Jmbi .framer-iwb9va .framer-text { --framer-font-size: 26px; --framer-line-height: 1.4em; } /* And the card loses the height the avatar row used to need. 320px around two * or three lines reads as a card with something missing from it, which is * exactly what it would be. The ticker's own container has to come down with * it — it sets the track height, so leaving it at 320 just moves the empty * space outside the cards. */ .framer-8Jmbi .framer-1q6zhf4-container, .framer-8Jmbi .framer-iwb9va { height: 240px; } /* Below 810px the Ticker stops sizing cards from their CSS and writes * `width: 100%` into each one's inline style — so the cards divide the track * between them. The template got away with it on two cards; on six they come * out 97px wide and the text breaks one letter per line. * * So the card takes a real width back. `!important` because the fight is with * an inline style, which nothing else can outrank, and the type comes down * with the card — 26px in a 300px card is four words a line. */ @media (max-width: 809px) { .framer-8Jmbi .framer-iwb9va { width: 300px !important; } .framer-8Jmbi .framer-1q6zhf4-container, .framer-8Jmbi .framer-iwb9va { height: 220px; } .framer-8Jmbi .framer-iwb9va .framer-text { --framer-font-size: 19px; } } /* The card's numeral. It read "1" against "UN TOQUE / Entras y ya estás * dentro" — one tap — and that copy is gone, so the number now counts nothing. * Hidden rather than deleted from index.html and the bundle: this is the whole * change in one line, and putting it back is deleting that line. * * The WRAPPER, not the numeral. Framer writes `display: flex` into the * numeral's own inline style attribute, which no stylesheet rule can outrank * without `!important`; its wrapper carries no inline style at all. */ .framer-8Jmbi .framer-1y2rf3w { display: none; }