/* * Zafrag -- concept 2, "Vitrina de Noche". * * The idea: a perfume boutique after closing time. The room is dark and * blue-black; the only light comes from INSIDE things -- the photographs, the one amber word -- so every lit thing on the * page is a thing worth looking at. Nothing is decorated with gold lines; * things are lit or they are not. * * Shared by index.html and the generated content pages: tokens, reset, type, * wordmark, buttons, nav, footer, the content-page classes and the cookie * banner. Page-specific rules stay inline in the page that owns them. * * Contrast (measured, WCAG 2.x): * luna #EDEFF3 on noche #0A0E14 16.8:1 headings, primary text * niebla #A6AFBD on noche 8.7:1 body copy * niebla on vidrio #141B26 7.8:1 body copy in panels * tenue #8E98A8 on noche 6.6:1 small print, footer * ambar #F2A65A on noche 9.6:1 the lit word, lamps, links * noche on luna (primary button) 16.8:1 * noche on ambar (cookie Aceptar) 9.6:1 * field border #5F6C80 on noche 3.6:1 (UI boundary, needs 3:1) */ :root { /* The room, by day */ --dia: #f2f0ec; /* ground: warm limestone, not cream, not white */ --dia-2: #ebe8e2; /* the next room over: alternating sections */ --vidrio: #fbfaf8; /* glass panels -- brighter than the room: lit */ --campo: #ffffff; /* form fields */ --suelo: #e7e3dc; /* the footer, the floor */ /* Ink and light */ --tinta: #12161d; /* primary text: the night version's blue-black */ --grafito: #474e5a; /* body text */ --tenue: #5a616d; /* small print, a heading's second clause */ --ambar: #f2a65a; /* the liquid: one accent, used as LIGHT (fills, glows, lamps) */ --ambar-claro: #ffd29a; --ambar-hondo: #c0681a; /* deep amber for marks and large type (3.5:1) */ --ambar-tinta: #9a4f0c; /* amber you READ: links, labels, small amber words (5.3:1) */ /* Edges */ --hilo: rgba(18, 22, 29, 0.1); /* hairline: a glass edge */ --hilo-fuerte: rgba(18, 22, 29, 0.2); --borde-campo: #7c818b; /* Shadows are warm, never grey-black: daylight through amber glass. */ --sombra: 0 30px 70px -36px rgba(64, 42, 20, 0.32); --sombra-alta: 0 40px 100px -40px rgba(64, 42, 20, 0.42); --danger: #b3261e; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --logo: 'Cormorant Garamond', Georgia, serif; /* Legacy names, kept ONLY so privacidad.html's own inline rules (outside this brief) resolve to readable values on the light ground. */ --dark: var(--tinta); --gray: var(--grafito); --gold: var(--ambar-hondo); --gold-ink: var(--ambar-tinta); --gold-light: var(--ambar-claro); --light-gray: var(--hilo-fuerte); --serif: var(--sans); --radio: 18px; /* glass panels */ --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* The nav is fixed, so an anchor without this lands UNDER it. */ scroll-padding-top: calc(var(--nav-h) + 24px); background: var(--dia); color-scheme: light; } body { font-family: var(--sans); font-variation-settings: 'wdth' 100; background: var(--dia); color: var(--grafito); line-height: 1.7; font-weight: 380; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } ::selection { background: var(--ambar); color: var(--tinta); } :focus-visible { outline: 2px solid var(--ambar-tinta); outline-offset: 3px; border-radius: 4px; } /* --------------------------------------------------------------------- Type. One family, Archivo, used across its WIDTH axis: semi-expanded for anything that is display, normal for reading. The width is the cinematic part -- title-card proportions -- so no second display face is needed, and no serif carries the identity. --------------------------------------------------------------------- */ /* The label: a lamp, then the words, in sentence case. Not an uppercase gold eyebrow; a small lit dot that says "this is on". */ .section-label { display: inline-flex; align-items: flex-start; gap: 0.7em; font-size: 0.8rem; line-height: 1.6; font-weight: 520; letter-spacing: 0.04em; font-variation-settings: 'wdth' 108; color: var(--tinta); text-transform: none; } .section-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: calc(0.8em - 3.5px); background: var(--ambar); box-shadow: 0 0 0 1px rgba(192, 104, 26, 0.55), 0 0 0 4px rgba(242, 166, 90, 0.2), 0 0 14px 3px rgba(242, 166, 90, 0.55); } .section-title { font-family: var(--sans); font-size: clamp(2rem, 3.7vw, 3.1rem); font-weight: 340; font-variation-settings: 'wdth' 112; line-height: 1.08; letter-spacing: -0.022em; color: var(--tinta); text-wrap: balance; } /* The second clause FALLS OFF, like light leaving a lamp: upright, same face, simply less lit. Not an italic accent phrase. */ .section-title em { font-style: normal; color: var(--tenue); } .section-sub { color: var(--grafito); font-size: 1rem; line-height: 1.78; max-width: 54ch; } /* The 40px rule under every title was the reference's signature. Gone. */ .divider { display: none; } .section-label + .section-title { margin-top: 1.1rem; } .section-title + .section-sub, .section-title + .divider + .section-sub { margin-top: 1.5rem; } /* The wordmark keeps Cormorant and its construction. Moonlight, with the F lit amber. */ .wordmark { font-family: var(--logo); font-weight: 400; letter-spacing: 0.12em; white-space: nowrap; text-decoration: none; color: var(--tinta); } .wordmark span { color: var(--ambar-hondo); text-shadow: 0 0 16px rgba(242, 166, 90, 0.55); } .shell { max-width: 1240px; margin: 0 auto; padding-left: 5%; padding-right: 5%; } section { padding: 112px 0; } /* Glows are pseudo-elements that spill past their section on purpose; clip (not hidden) keeps them from widening the page without creating a scroll container, so sticky children still stick. */ section, header, footer, main, .notice { overflow-x: clip; } /* --------------------------------------------------------------------- Buttons: pills of light. The primary is a lit panel (moonlight, dark text) -- the brightest object on any screen it is on. The ghost is glass: an edge and nothing behind it. --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65em; min-height: 52px; padding: 0 30px; font-family: var(--sans); font-size: 0.92rem; font-weight: 560; font-variation-settings: 'wdth' 106; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1px solid var(--tinta); border-radius: 999px; background: var(--tinta); color: var(--vidrio); box-shadow: 0 14px 34px -16px rgba(18, 22, 29, 0.55), 0 10px 40px -14px rgba(242, 166, 90, 0); transition: background-color 0.25s, color 0.25s, box-shadow 0.35s, border-color 0.25s; } .btn:hover { background: #222833; box-shadow: 0 0 0 4px rgba(242, 166, 90, 0.22), 0 16px 44px -14px rgba(192, 104, 26, 0.45); } .btn:disabled { opacity: 0.6; cursor: progress; } .btn-ghost { background: rgba(255, 255, 255, 0.4); color: var(--tinta); border-color: rgba(18, 22, 29, 0.42); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-ghost:hover { background: var(--vidrio); border-color: var(--tinta); box-shadow: 0 12px 30px -14px rgba(64, 42, 20, 0.35); } .btn svg { width: 1.2em; height: 1.2em; flex: none; } /* --------------------------------------------------------------------- Nav. Smoked glass over the room. On a phone it becomes TWO bands -- the same shape the store's header has -- and the second band is the six links in a row that scrolls sideways inside itself, so the page never does and no menu button is needed. --------------------------------------------------------------------- */ nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 5%; background: rgba(242, 240, 236, 0.8); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--hilo); } nav .wordmark { font-size: 1.75rem; line-height: 1; } .nav-right { display: flex; align-items: center; gap: 2rem; } nav ul { list-style: none; display: flex; gap: 0.25rem; } nav ul a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.85rem; text-decoration: none; color: var(--grafito); font-size: 0.84rem; font-weight: 450; letter-spacing: 0.02em; font-variation-settings: 'wdth' 106; white-space: nowrap; border-radius: 999px; transition: color 0.2s, background-color 0.2s; } nav ul a:hover { color: var(--tinta); background: rgba(18, 22, 29, 0.05); } /* "You are here" is a lamp switched on under the word. */ nav ul a::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 1px rgba(192, 104, 26, 0.5), 0 0 10px 2px rgba(242, 166, 90, 0.7); opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.25s; } nav ul a[aria-current="true"], nav ul a[aria-current="page"] { color: var(--tinta); } nav ul a[aria-current="true"]::after, nav ul a[aria-current="page"]::after { opacity: 1; transform: none; } .nav-wa { display: inline-flex; align-items: center; gap: 0.55em; min-height: 44px; padding: 0 20px; border: 1px solid rgba(18, 22, 29, 0.4); border-radius: 999px; color: var(--tinta); text-decoration: none; font-size: 0.84rem; font-weight: 540; letter-spacing: 0.01em; font-variation-settings: 'wdth' 106; white-space: nowrap; transition: background-color 0.25s, color 0.25s, border-color 0.25s; background: rgba(255, 255, 255, 0.45); } .nav-wa:hover { background: var(--tinta); color: var(--vidrio); border-color: var(--tinta); } .nav-wa svg { width: 1.15em; height: 1.15em; flex: none; } /* --------------------------------------------------------------------- Footer: the floor of the room, a shade darker than the ground. --------------------------------------------------------------------- */ footer { position: relative; background: var(--suelo); color: var(--tenue); padding: 72px 0 40px; border-top: 1px solid var(--hilo); } footer::before { /* The light from the room above, falling onto the floor's edge. */ content: ''; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(224, 138, 58, 0.85), transparent); box-shadow: 0 0 14px 1px rgba(242, 166, 90, 0.45); } .footer-top { display: flex; flex-wrap: wrap; gap: 2.4rem; justify-content: space-between; align-items: flex-start; padding-bottom: 40px; border-bottom: 1px solid var(--hilo); } footer .wordmark { font-size: 2rem; } .footer-tag { margin-top: 0.8rem; font-size: 0.9rem; color: var(--grafito); } .footer-tag.footer-ship { margin-top: 0.25rem; color: var(--tenue); } .footer-links { display: grid; grid-template-columns: repeat(4, auto); gap: 0.2rem 2.4rem; list-style: none; } .footer-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--grafito); text-decoration: none; font-size: 0.88rem; font-variation-settings: 'wdth' 104; transition: color 0.2s; } .footer-links a:hover { color: var(--ambar-tinta); } .footer-bottom { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; font-size: 0.8rem; color: var(--tenue); letter-spacing: 0.02em; } .footer-legal { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; } .footer-legal a, .footer-cookies { color: inherit; text-decoration: none; transition: color 0.2s; } .footer-cookies { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .footer-cookies[hidden] { display: none; } .footer-legal a:hover, .footer-cookies:hover { color: var(--ambar-tinta); } /* --------------------------------------------------------------------- Chrome, narrow --------------------------------------------------------------------- */ /* The nav's two breakpoints are in EM, not px, so they move with the reader's text size: every length in the bar is in rem, and a px breakpoint would keep the one-line bar at a width its enlarged words no longer fit (with Chrome's font size at "Large", the WhatsApp pill ran off the right edge just above 1,060px). At the default 16px they are exactly 1,200 and 1,060. Note that a media query measures the viewport INCLUDING the scrollbar, while the bar lays out in the width without it -- the one-line bar keeps well over 150px of slack at the narrowest width it is used at, which is what absorbs that difference. */ @media (max-width: 75em) { .nav-right { gap: 1rem; } nav ul a { padding: 0 0.6rem; } } @media (max-width: 66.25em) { /* Two bands. The wordmark and WhatsApp keep the top one; the links drop into a second band that scrolls inside itself. */ nav { flex-wrap: wrap; padding: 0 0 0 0; gap: 0; } nav .wordmark { order: 1; padding: 18px 0 14px 5%; } .nav-right { display: contents; } .nav-wa { order: 2; margin: 12px 5% 8px auto; } nav ul { order: 3; flex-basis: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 calc(5% - 0.6rem) 6px; border-top: 1px solid var(--hilo); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } nav ul::-webkit-scrollbar { display: none; } nav ul a { min-height: 44px; } :root { --nav-h: 122px; } } @media (max-width: 820px) { nav .wordmark { font-size: 1.55rem; } section { padding: 80px 0; } } /* --------------------------------------------------------------------- Content pages: /perfumes-al-mayoreo, /preguntas-frecuentes, /marcas/* A dark head with an ambient glow behind it, then a reading column. The breadcrumb is an
    , not a