/* Kove Luxury brand layer, on top of Tailwind. Ports costaricarealtor's hardening (mobile overflow clip, 44px tap targets, line clamps) and replaces its gold-diamond divider with our own mark. */ html { scroll-behavior: smooth; overflow-x: clip; } body { -webkit-font-smoothing: antialiased; } ::selection { background: #8A5A3C; color: #F7F3EE; } .font-700{font-weight:700}.font-600{font-weight:600}.font-500{font-weight:500}.font-400{font-weight:400} /* ---- the wordmark ---- The whole visual signature is one move: the "y" is italic, everything else upright. Word spaces run wide so the y breathes. Never letterspace lowercase Garamond. The acute on Patina is always kept. */ .wordmark{font-family:"EB Garamond",Georgia,serif;font-weight:500;letter-spacing:0; word-spacing:.15em;color:#1C1A17;white-space:nowrap} .wordmark i{font-style:italic;font-weight:400} /* ---- the divider ---- CRR uses a gold diamond between two rules. Ours is the acute accent from "Patina" - the same mark that sits over the P in the monogram. It is the only ornament in the system. */ .rule-accent{display:flex;align-items:center;gap:14px;margin:2rem 0} .rule-accent::before,.rule-accent::after{content:"";height:1px;background:#C9C0B4;flex:1} .rule-accent .nd{font-family:"EB Garamond",Georgia,serif;font-size:22px;line-height:0; color:#8A5A3C;transform:translateY(-2px);flex:0 0 auto} .rule-hair{height:1px;background:#E4DDD3;border:0;margin:0} /* ---- availability is typographic, never coloured ---- A green "in stock" pill is the loud-marketplace pattern she has learned to distrust. State is said in words, in the ink scale. */ .state{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600} .state-av{color:#1C1A17} .state-cv{color:#8A5A3C} .state-so{color:#6B655E} /* ---- product photography frame ---- Source photos arrive as bedroom shots, mirror selfies and dark boutique tables. We standardise the FRAME, never the photo: fixed 4:5, contained, letterboxed. Never cropped, never stretched, never "enhanced". */ /* Typographic fallback card for when the shop's photo is unusable. */ .ficha{position:absolute;inset:0;display:grid;align-content:center;gap:4px;padding:1.4rem; background:#EFE9E1;text-align:left} .clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tnum{font-variant-numeric:tabular-nums} .wrap-any{overflow-wrap:anywhere;word-break:break-word} /* ---- mobile hardening, ported from CRR's July mobile audit ---- html-level clip because body-level overflow-x-hidden is ignored for scrolling by iOS Safari. clip creates no scroll container, so position:sticky survives. */ .mob-nav-scroll{max-height:calc(100dvh - 4rem);overflow-y:auto} /* 44px minimum touch target with no visual change (Apple HIG / WCAG 2.5.8). */ .tap{position:relative} .tap::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:max(100%,44px)} .tap44{min-width:44px;min-height:44px} /* ---- hero ---- */ .hero-band{position:relative;isolation:isolate;overflow:hidden;background:#EFE9E1} .hero-band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* Left-weighted scrim so the headline sits on paper while the texture stays visible. Deliberately not a full-width wash: the material has to read as material. */ .hero-band .scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(247,243,238,.96) 0%,rgba(247,243,238,.90) 38%,rgba(247,243,238,.35) 68%,rgba(247,243,238,0) 100%)} .hero-band .inner{position:relative;z-index:2} /* Focus is visible and uses the accent, never a browser default outline. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #8A5A3C;outline-offset:2px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ============================================================================ Component layer. The templates already use good semantic class names (wrap, piece-layout, attrs, price-line, prose). Rather than rewrite every template into utility soup, those names get real styles here. One file, and every page - piece, brand, model, catalogue, static - is styled at once. Same division CRR uses: Tailwind for the shell, brand.css for the components. ============================================================================ */ @media (min-width:640px){} h1{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:#1C1A17; font-size:clamp(28px,4vw,42px);line-height:1.14;margin:0;text-wrap:balance} h2{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:#1C1A17} .lede{font-family:"EB Garamond",Georgia,serif;font-size:clamp(17px,1.9vw,20px); line-height:1.55;color:#4A4642;max-width:46ch;margin:.9rem 0 0} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:#6B655E;margin:0 0 .5rem} .eyebrow a{color:#6B655E;text-decoration:none} .eyebrow a:hover{color:#8A5A3C} .empty{color:#6B655E;padding:2.5rem 0} .result-count{font-size:12.5px;color:#6B655E;margin:0 0 1.25rem;font-variant-numeric:tabular-nums} @media (min-width:768px){} @media (min-width:1024px){} /* ---- the piece page ---------------------------------------------------- */ .piece-layout{display:grid;gap:2.5rem;padding-top:2.25rem;align-items:start} @media (min-width:900px){.piece-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}} @media (min-width:900px){.piece-head{position:sticky;top:5.5rem}} /* The shop's photograph, contained in OUR frame. Never cropped, never stretched, never "enhanced" - a pre-owned buyer has to see the real object and its wear. */ .shots > img{display:block;width:100%;height:auto;background:#EFE9E1;border:1px solid #E4DDD3} .shots-rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.5rem} .shots-rest img{display:block;width:100%;aspect-ratio:1;object-fit:cover; background:#EFE9E1;border:1px solid #E4DDD3} .shot--empty{display:grid;place-items:center;aspect-ratio:4/5;background:#EFE9E1; font-family:"EB Garamond",Georgia,serif;font-size:20px;color:#6B655E} /* Illustrative (generated lifestyle) slide: a labelled second photo, never the primary and never mistaken for a real photograph of the piece. */ .shot-thumb{position:relative;display:block} .shot-thumb__badge{position:absolute;left:4px;bottom:4px;background:#FFFFFF; color:#6B655E;font-size:9.5px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;padding:2px 6px;border:1px solid #E4DDD3; border-radius:2px;pointer-events:none} .shots-note{font-size:11.5px;color:#6B655E;margin:.6rem 0 0;font-style:italic} .attrs{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid #E4DDD3} .attrs li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0; border-bottom:1px solid #E4DDD3;font-size:13.5px} .attrs .k{color:#6B655E} .attrs .v{color:#1C1A17;text-align:right;font-weight:500} .price-line{font-size:26px;font-weight:600;color:#1C1A17;margin:1.5rem 0 .3rem; font-variant-numeric:tabular-nums} .price-note{font-size:12.5px;color:#6B655E;margin:0} .shopline{font-size:13px;line-height:1.55;color:#4A4642;margin:.75rem 0 0} .cta{margin-top:1.75rem} .btn{display:inline-flex;align-items:center;justify-content:center;background:#1C1A17; color:#F7F3EE;font-size:14px;font-weight:600;padding:.85rem 1.6rem;border:0;cursor:pointer; text-decoration:none;transition:background .15s} .btn:hover{background:#6E4730} .btn--off{background:#EFE9E1;color:#6B655E;cursor:default} .btn--off:hover{background:#EFE9E1} .unique{font-size:12.5px;color:#6B655E;margin:.75rem 0 0} /* Says how we know, without naming the shop. Naming it hands the buyer to a storefront that never asked to be listed. */ .provenance{font-size:12px;line-height:1.6;color:#6B655E;margin:1.5rem 0 0; padding-top:.9rem;border-top:1px solid #E4DDD3} /* ---- filters ----------------------------------------------------------- */ .filters label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:#6B655E} .filters select,.filters input{font:inherit;font-size:13.5px;background:#FCFAF7;color:#1C1A17; border:1px solid #E4DDD3;padding:.5rem .7rem;border-radius:0} .filters select:focus,.filters input:focus{outline:2px solid #8A5A3C;outline-offset:1px} .filters button{font:inherit;font-size:13px;font-weight:600;background:#1C1A17;color:#F7F3EE; border:0;padding:.55rem 1.1rem;cursor:pointer} .filters a{font-size:13px;color:#8A5A3C;text-decoration:none} /* ---- brand tiles ------------------------------------------------------- */ @media (min-width:768px){} /* ---- long-form pages --------------------------------------------------- */ .prose{max-width:66ch;color:#4A4642;font-size:15.5px;line-height:1.7} .prose h2{font-size:24px;margin:2.25rem 0 .6rem} .prose h3{font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;font-weight:600; color:#1C1A17;margin:1.75rem 0 .4rem} .prose p{margin:0 0 1rem} .prose ul,.prose ol{margin:0 0 1rem;padding-left:1.25rem} .prose li{margin-bottom:.4rem} .prose a{color:#8A5A3C} .prose strong{color:#1C1A17;font-weight:600} .prose hr{border:0;border-top:1px solid #E4DDD3;margin:2rem 0} /* ---- model chips + filters -------------------------------------------- */ .chip[aria-current="true"],.chip.is-on{border-color:#1C1A17;color:#1C1A17;font-weight:600} .families{margin-top:1.5rem} .filter-group > strong,.filter-group > .filter-label{font-size:10.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:#6B655E;font-family:inherit} .filter-group a{font-size:13px;color:#4A4642;text-decoration:none;padding:.15rem 0} .filter-group a:hover{color:#8A5A3C} .filter-group a[aria-current="true"]{color:#1C1A17;font-weight:600} @media (min-width:640px){ .filter-group > strong,.filter-group > .filter-label{width:100%} } /* ============================================================================ FRAME + TILE — from a pixel analysis of all 617 real thumbnails. The corpus is not "wildly inconsistent". It is two problems: 33% true studio cutouts on pure white (edge 255, sd 0) 27% shop-platform letterboxed on cool grey 245 (irenebuffa, all exactly 4:5) 29% light wall / bedroom shots (edge 205-235, sd 5-10) 2% dark boutique tables Zero landscape files. Everything is portrait or square. So the old treatment produced a DOUBLE FRAME: a white rectangle inside a beige rectangle inside a bordered card. Three nested tints per tile. That was the single biggest reason it read cheap. Fix: 4:5 box whose ground IS the page colour, image contained, and mix-blend-mode:multiply. white (255) x papel = papel, so a studio cutout dissolves onto the paper exactly as SSENSE's do on white. every non-white pixel is scaled by papel/255 = (.969,.953,.933) - a uniform warm shift of at most 6.7% in blue, identical across the whole frame. It cannot hide a scuff, a crease or a colour, because it is uniform. It is a frame, not a filter: the file is untouched and the piece page links the raw original. 4:5 chosen because it is the minimum-band box for what we actually hold: 0% band on the 4:5 files, 8% sides on 2:3, 10% top/bottom on 1:1. Rejected: object-fit cover (crops - a silent breach of the no-alteration rule), blurred-duplicate backdrop (a filtered derivative of the shop's photo, and it reads like a video app), dominant-colour fill (rainbow grid), vignette and drop shadow (alteration), background removal (alteration, and the good weights carry commercial licences). ============================================================================ */ /* Colour tokens. brand.css referenced var(--line), var(--surface) and var(--ink*) from day one without defining them (they lived in site.css, which no page loads), so the search input had no border and no fill. Same palette as the hard-coded hexes below; both spellings because both are in use. */ :root{ --ink:#1C1A17; --ink2:#4A4642; --ink-2:#4A4642; --ink3:#6B655E; --ink-3:#6B655E; --line:#E4DDD3; --surface:#FCFAF7; --surface-2:#F7F3EE; --paper:#F7F3EE; --accent:#8A5A3C; } :root{ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --gutter:24px; --maxw:1280px; } @media (min-width:768px){ :root{--gutter:32px} } @media (min-width:1280px){ :root{--gutter:40px} } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .section{margin-top:var(--s6)} @media (min-width:768px){ .section{margin-top:var(--s7)} } .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding-bottom:0;border:0;margin-bottom:var(--s3)} .section-head h2{font:500 11px/1 "Instrument Sans",system-ui,sans-serif; letter-spacing:.12em;text-transform:uppercase;color:#6B655E;margin:0} .section-head a{font:500 13px/1 "Instrument Sans",system-ui,sans-serif; color:#8A5A3C;text-decoration:none} .section-head a:hover{text-decoration:underline;text-underline-offset:3px} /* ---- the frame ---- */ .ph{position:relative;aspect-ratio:4/5;background:#F7F3EE;isolation:isolate;overflow:hidden;display:block} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; object-position:50% 50%;display:block;mix-blend-mode:multiply} /* ---- the tile ---- No border, no fill, no caption box. Neither The Row nor Toteme puts any of those on a product card, and a box around an inconsistent photograph only frames the inconsistency. Price is the SAME weight as the name and smaller: at 16px/600 it was the heaviest thing on the card, which reads discount. */ .tile{display:block;text-decoration:none;color:inherit} .tile .ph-alt{opacity:0;transition:opacity .25s ease} @media (hover:hover){ .tile:hover .ph-alt{opacity:1} } .tile-cap{display:grid;gap:3px;padding-top:12px} .tile-house{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:#6B655E} .tile-name{font:400 17px/1.3 "EB Garamond",Georgia,serif;color:#1C1A17; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tile-line{margin-top:3px;font:500 13.5px/1.4 "Instrument Sans",system-ui,sans-serif; color:#1C1A17;font-variant-numeric:tabular-nums} .tile-cond{font-weight:400;color:#6B655E;margin-left:10px} .tile-state{font:500 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:#6B655E} .tile--off .ph img{opacity:.55} @media (hover:hover){ .tile:hover .tile-name{text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:#C9C0B4} } @media (max-width:767px){ .tile-name{font-size:16px} .tile-line{font-size:13px} } /* ---- the grid ---- */ .card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px} @media (min-width:768px){ .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px} } @media (min-width:1100px){ .card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px} } /* ---- the house line ---- Collector Square's model bar, in our type: a band of text links between two hairlines. Five bordered tiles became one line, which is the whole point - the references use at most one hairline per screen. */ .house-line{display:flex;align-items:baseline;justify-content:center;gap:40px; padding:24px 0;border-top:1px solid #E4DDD3;border-bottom:1px solid #E4DDD3; overflow-x:auto;scrollbar-width:none} .house-line::-webkit-scrollbar{display:none} .house-line a{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap; text-decoration:none;color:#1C1A17} .house-line .h{font:400 26px/1.2 "EB Garamond",Georgia,serif} .house-line .n{font:400 12.5px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E; font-variant-numeric:tabular-nums} .house-line a:hover .h{text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1px;text-decoration-color:#C9C0B4} @media (max-width:767px){ .house-line{gap:28px;justify-content:flex-start;padding:18px var(--gutter); margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)} .house-line .h{font-size:21px} } /* ---- model families as a text line, not chips ---- */ .model-line{display:flex;align-items:baseline;gap:32px;padding:14px 0; border-top:1px solid #E4DDD3;border-bottom:1px solid #E4DDD3; overflow-x:auto;scrollbar-width:none;margin-top:var(--s4)} .model-line::-webkit-scrollbar{display:none} .model-line a{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap; text-decoration:none;color:#1C1A17} .model-line .m{font:400 17px/1.3 "EB Garamond",Georgia,serif} .model-line .n{font:400 12px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E; font-variant-numeric:tabular-nums} .model-line a[aria-current="true"] .m{text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1px;text-decoration-color:#C9C0B4} /* ---- filter row: one 40px line, drawer closed by default ---- */ .filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:40px;margin:var(--s4) 0 var(--s3)} .filterbar .count{font:400 12.5px/1.5 "Instrument Sans",system-ui,sans-serif;color:#6B655E; font-variant-numeric:tabular-nums} .filterbar .tools{display:flex;align-items:center;gap:24px} .filterbar summary{font:500 13px/1 "Instrument Sans",system-ui,sans-serif;color:#4A4642; cursor:pointer;list-style:none} .filterbar summary::-webkit-details-marker{display:none} .filterbar details[open] summary,.filterbar summary.on{text-decoration:underline; text-underline-offset:4px;text-decoration-thickness:1px} .filter-panel{display:grid;gap:18px;padding:20px 0 4px;border-top:1px solid #E4DDD3; margin-top:14px} .filter-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px} .filter-row .lab{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:#6B655E;min-width:74px} .filter-row a{font:400 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:#4A4642; text-decoration:none} .filter-row a:hover{color:#8A5A3C} .filter-row a[aria-current="true"]{color:#1C1A17;font-weight:500;text-decoration:underline; text-underline-offset:4px;text-decoration-thickness:1px} /* One-line lede on hubs: the three-line SEO paragraph pushed product off screen. */ .lede-line{font:400 14px/1.6 "Instrument Sans",system-ui,sans-serif;color:#6B655E; margin:.6rem 0 0;max-width:64ch} h1{font-family:"EB Garamond",Georgia,serif;font-weight:500;color:#1C1A17; font-size:clamp(28px,2.6vw,34px);line-height:1.15;margin:0;text-wrap:balance} .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:#6B655E;margin:0 0 .7rem} .eyebrow a{color:inherit;text-decoration:none} .eyebrow a:hover{color:#8A5A3C} /* ============================================================================ HOMEPAGE PLATES The diagnosis was not "it looks cheap" any more - it was "every section is the same". One image scale (tile) and one section grammar (label, hairline, grid). So the fix is rhythm, not ornament: 01 hero FULL-BLEED image-led 02 certeza contained icons 03 directorio contained type, two tiers, double rule 04 reciente contained grid with one 2x2 feature 05 cita narrow type as image 06 proceso FULL-BLEED 5/7 split, image LEFT 07 hoy contained big numerals, vertical rules 08 cierre FULL-BLEED 7/5 split, image RIGHT (mirror of 06) Never two full-bleeds adjacent. Never two type-only contained blocks adjacent. The two splits mirror each other so they rhyme without repeating. ============================================================================ */ /* ---- icons ---- */ .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.25; stroke-linecap:butt;stroke-linejoin:miter;flex:0 0 auto} .ic-inline{width:14px;height:14px;margin-left:6px;vertical-align:-2px} .ic-btn{width:18px;height:18px;margin-right:9px;vertical-align:-3px} /* ---- D4: the folio rule. Replaces the old label-over-hairline section head. The numbers give the page a sequence a reader can feel. ---- */ .folio{display:flex;align-items:center;gap:16px;margin-bottom:32px} .folio .n{font:500 13px/1 "EB Garamond",Georgia,serif;color:#8A5A3C; font-variant-numeric:tabular-nums;flex:0 0 auto} .folio .l{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:#6B655E;flex:0 0 auto} .folio .bar{flex:1 1 auto;height:1px;background:#E4DDD3} .folio a{flex:0 0 auto;font:500 13px/1 "Instrument Sans",system-ui,sans-serif; color:#8A5A3C;text-decoration:none;display:inline-flex;align-items:center} .folio a:hover{text-decoration:underline;text-underline-offset:3px} /* ---- D3: double rule. Used exactly once, above the directory. The double rule is the classic index mark - it says "table of contents" without a label. ---- */ .rule-double{height:5px;border-top:1px solid #D5CCC0;border-bottom:1px solid #E4DDD3; margin:0 0 28px} /* ---- 01 hero ---- */ .hero{position:relative;isolation:isolate;overflow:hidden;background:#EFE9E1; height:clamp(560px,78vh,760px);display:grid;align-items:center} .hero picture,.hero img.bg{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero img.bg{object-fit:cover;object-position:70% 50%} .hero .scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(247,243,238,.55) 0%,rgba(247,243,238,.32) 42%,rgba(247,243,238,0) 66%)} .hero .inner{position:relative;z-index:2;width:100%;max-width:var(--maxw); margin:0 auto;padding:0 var(--gutter)} .hero h1{font:500 clamp(34px,4.2vw,60px)/1.08 "EB Garamond",Georgia,serif;color:#1C1A17; max-width:16ch;margin:0;text-wrap:balance} .hero .sub{font:400 20px/1.5 "EB Garamond",Georgia,serif;color:#4A4642;max-width:40ch; margin:20px 0 0} .hero .acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px} .hero .count{font:400 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:#4A4642; margin-top:20px;font-variant-numeric:tabular-nums} .btn{display:inline-flex;align-items:center;justify-content:center; font:600 14px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.02em; padding:14px 28px;text-decoration:none;border:1px solid #1C1A17; background:#1C1A17;color:#F7F3EE;transition:background .2s,color .2s} .btn:hover{background:#6E4730;border-color:#6E4730} .btn-ghost{background:transparent;color:#1C1A17} .btn-ghost:hover{background:#1C1A17;color:#F7F3EE;border-color:#1C1A17} @media (max-width:767px){ .hero{height:clamp(520px,72svh,680px);align-items:start} .hero img.bg{object-position:50% 100%} /* The 90deg scrim was the bug at 390px - half the headline sat on raw texture. On a portrait crop the clear space is at the TOP, so the scrim has to run top-down to match. */ .hero .scrim{background:linear-gradient(180deg,rgba(247,243,238,.78) 0%,rgba(247,243,238,.40) 48%,rgba(247,243,238,0) 72%)} .hero .inner{padding-top:56px} .hero .sub{font-size:17px} .hero .acts{flex-direction:column;gap:10px} .hero .btn{width:100%} } /* ---- 02 la certeza: the Luxora trust-strip placement, every line true ---- */ .certeza{border-bottom:1px solid #E4DDD3;padding:40px 0;margin-top:0} .certeza .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px} .certeza .ic{width:28px;height:28px;color:#6B655E} .certeza h3{font:400 17px/1.3 "EB Garamond",Georgia,serif;color:#1C1A17;margin:14px 0 6px} .certeza p{font:400 13.5px/1.55 "Instrument Sans",system-ui,sans-serif;color:#4A4642; margin:0;max-width:30ch} @media (max-width:767px){ .certeza .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px} .certeza .ic{width:24px;height:24px} } /* ---- 03 directorio ---- */ .houses{display:flex;align-items:baseline;justify-content:center;gap:56px;flex-wrap:wrap; padding-bottom:20px} .houses a{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:#1C1A17} .houses .h{font:400 34px/1.2 "EB Garamond",Georgia,serif} .houses .n{font:400 12.5px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E; font-variant-numeric:tabular-nums} .houses a:hover .h{text-decoration:underline;text-underline-offset:5px; text-decoration-thickness:1px;text-decoration-color:#C9C0B4} @media (max-width:767px){.houses{gap:24px}.houses .h{font-size:26px}} /* ---- 04 feature tile: breaks the six-row wall ---- */ .card-grid .tile--feature{grid-column:span 2;grid-row:span 2; display:grid;grid-template-rows:1fr auto} .tile--feature .ph{aspect-ratio:auto;height:100%} .tile--feature .tile-name{font-size:21px} .tile-cert{font:400 12.5px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6B655E; margin-top:3px;display:block} @media (max-width:767px){ .card-grid .tile--feature{grid-column:span 2;grid-row:auto;display:block} .tile--feature .ph{aspect-ratio:4/5;height:auto} .tile--feature .tile-name{font-size:19px} } .more-wrap{margin-top:48px;display:flex;justify-content:center} .more-wrap .btn{min-width:280px} @media (max-width:767px){.more-wrap .btn{width:100%}} /* ---- 05 pull-quote: type used as an image, surrounded by nothing ---- */ .quote{max-width:880px;margin-left:auto;margin-right:auto;padding:32px var(--gutter); text-align:center} .quote .mark{font:400 36px/1 "EB Garamond",Georgia,serif;color:#8A5A3C;display:block; margin-bottom:16px} .quote p{font:italic 400 clamp(26px,3vw,38px)/1.2 "EB Garamond",Georgia,serif; color:#1C1A17;margin:0 auto;max-width:24ch} @media (max-width:767px){.quote{padding:24px var(--gutter)}.quote .mark{font-size:28px}} /* ---- 06 + 08 the two split plates. Mirrored: image left, then image right. ---- */ .plate{display:grid;grid-template-columns:1fr} .plate .shot{position:relative;overflow:hidden;min-height:420px;background:#EFE9E1} .plate .shot img{width:100%;height:100%;object-fit:cover;display:block} .plate .panel{padding:64px var(--gutter);display:grid;align-content:center} .plate .panel .in{max-width:520px;margin:0 auto;width:100%} @media (min-width:1024px){ .plate{grid-template-columns:5fr 7fr} .plate .shot{min-height:640px} .plate .panel{padding:96px} .plate--mirror{grid-template-columns:7fr 5fr} .plate--mirror .shot{order:2;min-height:560px} .plate--mirror .panel{order:1} } /* The one material panel that is not the hero: a second texture on the page. */ .panel--plaster{background:#EFE9E1;position:relative;isolation:isolate} .panel--plaster::before{content:"";position:absolute;inset:0;z-index:0; background:url("../img/ground-plaster.981c3c481ed7.webp") center/cover;opacity:.35; mix-blend-mode:multiply;pointer-events:none} .panel--plaster .in{position:relative;z-index:1} .panel .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em; text-transform:uppercase;color:#6B655E;margin:0 0 14px} .panel h2{font:500 clamp(28px,2.6vw,34px)/1.15 "EB Garamond",Georgia,serif;color:#1C1A17; margin:0 0 24px;text-wrap:balance} .panel .lede{font:400 19px/1.5 "EB Garamond",Georgia,serif;color:#4A4642;margin:0 0 20px} .panel .fine{font:400 13px/1.6 "Instrument Sans",system-ui,sans-serif;color:#6B655E;margin:0} /* numbered process - the numerals are the only colour event below the hero */ .steps{list-style:none;margin:0 0 28px;padding:0} .steps li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline; padding:20px 0;border-top:1px solid #E4DDD3} .steps li:last-child{border-bottom:1px solid #E4DDD3} .steps .n{font:500 28px/1 "EB Garamond",Georgia,serif;color:#8A5A3C; font-variant-numeric:tabular-nums} .steps p{font:400 15px/1.6 "Instrument Sans",system-ui,sans-serif;color:#4A4642;margin:0} @media (max-width:767px){.steps .n{font-size:24px}} .panel .more{font:500 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:#8A5A3C; text-decoration:none;display:inline-flex;align-items:center} .panel .more:hover{text-decoration:underline;text-underline-offset:3px} /* ---- 07 hoy: big numerals, the only vertical rules on the page ---- */ .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .proof .cell{padding:0 28px} .proof .cell + .cell{border-left:1px solid #E4DDD3} .proof .cell:first-child{padding-left:0} .proof .num{font:500 56px/1 "EB Garamond",Georgia,serif;color:#1C1A17; font-variant-numeric:tabular-nums;display:block} .proof .lab{font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif;color:#6B655E; margin:12px 0 0;max-width:18ch} @media (max-width:767px){ .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0} .proof .num{font-size:40px} .proof .cell{padding:0 16px} .proof .cell:nth-child(odd){padding-left:0;border-left:0} .proof .cell:nth-child(3),.proof .cell:nth-child(4){padding-top:28px;border-top:1px solid #E4DDD3} } /* Full-bleed helper: escape the contained wrapper without a nested container. */ .bleed{width:auto;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)} /* On mobile the ghost button sits lower in the frame, where the scrim has already faded and the photograph is busy. Give it its own paper ground so it stays legible without turning it into a second solid button. */ @media (max-width:767px){ .hero .btn-ghost{background:rgba(247,243,238,.82);backdrop-filter:blur(3px)} } /* ---- the brand lockup ---- El Nudo beside the wordmark. The mark sits a shade above the optical centre because the wordmark's own weight hangs low; ink-to-ink gap is roughly half the cap height, which is the clear space the mark needs to stay a mark and not become a bullet. */ .brandlock{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit} .brandlock .mark{width:26px;height:26px;fill:currentColor;flex:0 0 auto; transform:translateY(-1px)} .brandlock .wordmark{white-space:nowrap} @media (max-width:640px){ .brandlock{gap:9px} .brandlock .mark{width:22px;height:22px} } /* ================= MOBILE EDGE SAFETY ================= Everything below exists because text was sitting on the edge of the screen. Read the header of deploy notes for why each one is here; the short version is that a gutter measured in px is not a gutter on a notched phone, and 100vw is not the width of the content area. */ /* A gutter that survives a notch. max() means the inset only ever ADDS space, so this is inert on a phone with square corners and on every desktop. */ .wrap, .hero .inner, .plate .panel, .quote{ padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); } /* The header was on Tailwind's px-4 while the body was on --gutter, so the logo sat 8px closer to the edge than every line beneath it. */ .hdr-wrap{ padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right)); } /* Backstop: if anything ever overflows again, clip it rather than let the whole page scroll sideways. clip and not hidden -- overflow:hidden on the root silently disables position:sticky, which the piece page relies on. */ html{overflow-x:clip} body{overflow-x:clip;max-width:100%} /* A long model name or a pasted URL had nothing to break on and ran under the edge. Headings get it too: "Louis Vuitton Multi Pochette Accessoires" is one unbreakable run at 390px. */ .prose,.prose p,.prose li,.hero h1,.hero .sub, .tile-name,.tile-line,.piece-head h1,.attrs li{ overflow-wrap:anywhere; } /* Images and media can never be the thing that widens the page. */ img,svg,video,table{max-width:100%} @media (max-width:767px){ /* 3 thumbnails across a 390px screen leaves ~110px each once gaps are taken; 2 is the honest number. */ .shots-rest{grid-template-columns:repeat(2,minmax(0,1fr))} /* The enquiry CTA is the whole point of the piece page on a phone. */ .cta .btn{width:100%} } /* Two CTAs side by side, the quieter one second: buying outright is the default and apartar is the alternative, not the other way round. */ .cta form{display:flex;gap:10px;flex-wrap:wrap} .cta-terms{margin:.6rem 0 0;font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif; color:var(--ink3);max-width:46ch} @media (max-width:767px){ .cta form{flex-direction:column} .cta form .btn{width:100%} } /* The dollar line sits under the peso price, quieter than it: one price binds and the other is a courtesy. */ .price-usd{margin:.3rem 0 0;font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif; color:var(--ink3)} /* ---- Search with voice ---- Ink on paper like everything else. The mic is hidden until the JS confirms a working tier, because a mic button that does nothing reads as a broken site. Sizing note: the input is 16px on purpose. Anything smaller makes iOS Safari zoom the whole page on focus, which on a phone looks like the layout breaking. */ .ksearch{margin:0 0 1.25rem;max-width:44rem} .ksearch-row{position:relative;display:flex;align-items:center} .ksearch input{width:100%;font:inherit;font-size:16px;line-height:1.4; padding:.85rem 5.2rem .85rem 1rem;border:1px solid var(--line);border-radius:2px; background:var(--surface);color:var(--ink); -webkit-appearance:none;appearance:none} .ksearch input::placeholder{color:var(--ink3);opacity:1} .ksearch input:focus-visible{outline:2px solid #8A5A3C;outline-offset:1px} .ksearch input::-webkit-search-cancel-button{-webkit-appearance:none} .ksearch-mic,.ksearch-go{position:absolute;top:50%;transform:translateY(-50%); display:grid;place-items:center;border:0;cursor:pointer;border-radius:2px} .ksearch-mic{right:3rem;width:2.3rem;height:2.3rem;background:transparent;color:var(--ink2)} .ksearch-mic:hover{color:var(--ink)} .ksearch-mic[hidden]{display:none} .ksearch-mic.kove-mic-on{background:#1C1A17;color:#F7F3EE} .ksearch-go{right:.45rem;width:2.4rem;height:2.4rem;background:#1C1A17;color:#F7F3EE} .ksearch-go:hover{background:#2A2622} .ksearch-mic:focus-visible,.ksearch-go:focus-visible{outline:2px solid #8A5A3C;outline-offset:2px} .ksearch-status{margin:.4rem 0 0;font-size:.75rem;font-weight:600;color:var(--ink2)} .ksearch-status:empty{display:none} /* In the hero the box sits on the photograph, so it needs its own ground. */ .hero .ksearch{margin:1.25rem 0 1rem} .hero .ksearch input{background:rgba(247,243,238,.96); box-shadow:0 8px 28px rgba(28,26,23,.18)} .hero .ksearch-status{color:#F7F3EE;text-shadow:0 1px 2px rgba(0,0,0,.4)} @media (max-width:767px){ .ksearch{max-width:none} } /* ---- third-party verification offer ---- Quiet. It is a service, not a sales pitch, and it sits under the piece's own authentication line so the two read as one thought. */ .verify{margin:1.4rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line)} .verify-has{margin:0;font:400 13.5px/1.55 "Instrument Sans",system-ui,sans-serif; color:var(--ink2)} .verify-offer{margin:.5rem 0 0;font:400 13.5px/1.55 "Instrument Sans",system-ui,sans-serif; color:var(--ink3);max-width:52ch} .verify-more{display:inline-block;margin-top:.5rem;font:500 13px/1.5 "Instrument Sans",system-ui,sans-serif} /* ---- the house's other categories ---- A row of quiet links under the heading. The count is shown because the number is the reason to click. */ .brand-cats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 1.25rem} .brand-cats a{font:500 13.5px/1.5 "Instrument Sans",system-ui,sans-serif;color:var(--ink2)} .brand-cats a:hover{color:var(--ink)} .brand-cats .n{color:var(--ink3);font-variant-numeric:tabular-nums;margin-left:.3em} /* Cifras de la casa: the house in numbers on the brand hub. A stat strip in the record's type, then the model lines with the most pieces as small photographed cards on the paper colour, then the category split as one line. */ .cifras{margin:var(--s4) 0 0;padding:var(--s3) 0 var(--s3);border-top:1px solid #E4DDD3} .cifras-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:var(--s3)} .cifras-head h2{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E;margin:0} .cifras-meta{font:400 12px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E} .cifras-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s4)} @media (min-width:640px){.cifras-strip{grid-template-columns:repeat(3,1fr)}} @media (min-width:1024px){.cifras-strip{grid-template-columns:repeat(6,auto);justify-content:start;gap:var(--s3) var(--s6)}} .cifras .stat{display:grid;gap:6px} .cifras .stat .v{font:500 26px/1.1 "EB Garamond",Georgia,serif;color:#1C1A17;font-variant-numeric:tabular-nums;white-space:nowrap} .cifras .stat .k{font:400 12.5px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E} .cifras-models{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)} @media (min-width:768px){.cifras-models{grid-template-columns:repeat(6,1fr);gap:var(--s3)}} .cm{display:grid;gap:4px;text-decoration:none;color:inherit} .cm-ph{display:block;aspect-ratio:1/1;background:#F7F3EE;overflow:hidden} .cm-ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .35s ease} .cm:hover .cm-ph img{transform:scale(1.03)} .cm-name{margin-top:6px;font:400 16px/1.25 "EB Garamond",Georgia,serif;color:#1C1A17} .cm-meta{font:400 12px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums} .cifras-line{display:flex;flex-wrap:wrap;gap:6px 18px;margin:var(--s3) 0 0;font:400 13px/1.5 "Instrument Sans",system-ui,sans-serif;color:#4A4642} .cifras-line .n{color:#6B655E;font-variant-numeric:tabular-nums} .cifras-line .links{margin-left:auto} .cifras-line a{color:#8A5A3C;text-decoration:none} .cifras-line a:hover{text-decoration:underline} /* The record table (/precios/, /precios/salida/). Lived only in site.css, which no page loads, so these tables rendered as browser defaults from the day they shipped. */ .record{width:100%;border-collapse:collapse;font-size:15px;margin:1rem 0 0} .record th,.record td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid #E4DDD3} .record th{font:500 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6B655E} .record td{font-variant-numeric:tabular-nums} .record td.num,.record th.num{text-align:right;padding-right:0} .record a{color:#1C1A17;text-decoration:none} .record a:hover{color:#8A5A3C} .record caption{text-align:left;color:#6B655E;font-size:13px;padding-bottom:.6rem} /* Blog: list cards on the tile frame, the post as a reading column. */ .post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3);margin-top:var(--s4)} @media (min-width:768px){.post-grid{grid-template-columns:repeat(3,1fr)}} .post-card{display:grid;gap:6px;text-decoration:none;color:inherit} .post-ph{display:block;aspect-ratio:4/3;background:#F7F3EE;overflow:hidden} .post-ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply} .post-meta{margin-top:8px;font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E} .post-title{font:400 20px/1.25 "EB Garamond",Georgia,serif;color:#1C1A17} .post-dek{font:400 14px/1.5 "Instrument Sans",system-ui,sans-serif;color:#4A4642} .post{padding-top:2rem;max-width:720px} .post-head h1{max-width:20ch} .post-lede{font:400 clamp(17px,1.9vw,20px)/1.5 "EB Garamond",Georgia,serif;color:#4A4642;margin:.75rem 0 0} .post-byline{font:400 12.5px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6B655E;margin:1rem 0 0} .post-hero{margin:var(--s4) 0 0;background:#F7F3EE} .post-hero img{display:block;width:100%;height:auto;mix-blend-mode:multiply} .post-hero figcaption{font:400 12px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6B655E;padding:.5rem 0} .post-body{margin-top:var(--s4);max-width:none} .post-body table{width:100%;border-collapse:collapse;font-size:15px;margin:1rem 0 1.5rem} .post-body th,.post-body td{text-align:left;padding:.5rem .75rem .5rem 0;border-bottom:1px solid #E4DDD3;font-variant-numeric:tabular-nums} .post-body th{font:500 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6B655E} .post-data{margin-top:var(--s4);padding:var(--s3) 0;border-top:1px solid #E4DDD3;border-bottom:1px solid #E4DDD3;font:400 14px/1.6 "Instrument Sans",system-ui,sans-serif;color:#4A4642} .post-data a{color:#8A5A3C} .post-related{margin:var(--s4) 0 var(--s6)} .post-related h2{font-size:20px;margin:0 0 .5rem} .post-related ul{list-style:none;padding:0;margin:0} .post-related li{padding:.4rem 0;border-bottom:1px solid #E4DDD3} .post-related a{color:#1C1A17;text-decoration:none} .post-related a:hover{color:#8A5A3C} /* The house essay under the figures on the brand hub. */ .house-essay{margin:var(--s4) 0 0;padding:var(--s3) 0;border-top:1px solid #E4DDD3} .house-essay-h{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E;margin:0 0 var(--s3)} .house-essay-body{columns:1} @media (min-width:900px){.house-essay-body{columns:2;column-gap:var(--s5);max-width:none}} .house-essay-body p:first-child{margin-top:0} /* ===== v2 brand system (deck, 22 Sep 2026). One accent per screen: vachetta on the action, brass on the ornament. No pure black anywhere. ===== */ :root{--brass:#B08D57;--glass:rgba(252,250,247,.62);--radius:8px} /* Buttons: vachetta primary, hairline secondary, glass on photographs. The black rectangle is retired everywhere, including the filter bar. */ .btn{background:#8A5A3C;color:#F7F3EE;border:1px solid #8A5A3C;border-radius:var(--radius); padding:15px 22px;font:500 14px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.02em; gap:10px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease} .btn:hover{background:#6E4730;border-color:#6E4730;transform:translateY(-1px);box-shadow:0 8px 24px rgba(110,71,48,.18)} .btn .ic-btn{width:16px;height:16px} .btn-ghost{background:transparent;color:#1C1A17;border-color:#1C1A17} .btn-ghost:hover{background:#1C1A17;color:#F7F3EE;border-color:#1C1A17;box-shadow:none;transform:none} .btn-glass{background:var(--glass);color:#1C1A17;border-color:rgba(28,26,23,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .btn-glass:hover{background:rgba(252,250,247,.86);color:#1C1A17;transform:none;box-shadow:none} .btn--off,.btn--off:hover{background:#EFE9E1;border-color:#EFE9E1;color:#6B655E;transform:none;box-shadow:none} .filters button{background:transparent;color:#1C1A17;border:1px solid #1C1A17;border-radius:var(--radius);font-weight:500} .filters button:hover{background:#1C1A17;color:#F7F3EE} .ksearch-go{background:#8A5A3C;border-radius:6px}.ksearch-go:hover{background:#6E4730} .ksearch-mic.kove-mic-on{background:#8A5A3C} /* Rules: a hairline with a brass diamond. */ .rule{display:flex;align-items:center;gap:14px;margin:6px 0} .rule::before,.rule::after{content:"";flex:1;height:1px;background:#E4DDD3} .rule i{width:7px;height:7px;background:var(--brass);transform:rotate(45deg);display:block} .rule--short::before,.rule--short::after{flex:0 0 56px} .folio .n{color:var(--brass)} .rule-double{border-top-color:#D9CBB4} /* Icons: thin line, brass, in a hairline circle. */ .ic-ring{width:34px;height:34px;border:1px solid rgba(28,26,23,.22);border-radius:50%;display:grid;place-items:center; color:var(--brass);background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex:0 0 auto} .ic-ring .ic{width:17px;height:17px} .certeza .ic{color:var(--brass);width:22px;height:22px} .certeza .row > div{padding-top:2px} .certeza .row > div::before{content:"";display:block;width:48px;height:48px;border:1px solid #E4DDD3;border-radius:50%; margin-bottom:-36px;background:#FCFAF7} .certeza .row > div .ic{position:relative;left:13px;top:-1px} /* Hero v2: text left over a paper fade, figure right, three glass parts. */ .hero--v2{background:#E9E0D3} .hero--v2 img.bg{object-position:72% 40%} .hero--v2 .scrim{display:none} .hero--v2 .fade{position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(247,243,238,.94) 0%,rgba(247,243,238,.74) 30%,rgba(247,243,238,0) 58%)} .hero--v2 .inner{position:relative;z-index:2;display:grid;gap:40px;padding:clamp(56px,8vw,120px) var(--gutter) clamp(28px,4vw,48px)} .hero--v2 .copy{display:grid;gap:16px;max-width:min(46%,560px)} .hero--v2 .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B655E;margin:0} .hero--v2 h1{font:500 clamp(40px,5.6vw,84px)/1.02 "EB Garamond",Georgia,serif;color:#1C1A17;letter-spacing:-.005em;margin:0;max-width:none} .hero--v2 h1 em{font-style:normal;color:#8A5A3C} .hero--v2 .sub{font:400 clamp(16px,1.4vw,19px)/1.45 "EB Garamond",Georgia,serif;color:#4A4642;max-width:36ch;margin:0} .hero--v2 .acts{margin-top:8px} .hero--v2 .parts{display:flex;flex-wrap:wrap;gap:12px 28px;max-width:46%} .hero--v2 .parts > div{display:flex;gap:10px;align-items:center} .hero--v2 .parts b{display:block;font:500 11px/1.2 "Instrument Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#1C1A17} .hero--v2 .parts small{color:#6B655E;font:400 12px/1.3 "Instrument Sans",system-ui,sans-serif} @media(max-width:767px){ .hero--v2 img.bg{object-position:50% 100%} .hero--v2 .fade{background:linear-gradient(180deg,rgba(247,243,238,.96) 0%,rgba(247,243,238,.8) 34%,rgba(247,243,238,0) 60%)} .hero--v2 .inner{min-height:640px;padding-top:40px;align-content:start} .hero--v2 .copy,.hero--v2 .parts{max-width:none} .hero--v2 .parts{flex-direction:column;gap:10px;margin-top:230px} } .search-band{border-bottom:1px solid #E4DDD3;background:#FCFAF7} .search-band .wrap{padding:22px var(--gutter);display:flex;align-items:center;gap:24px;flex-wrap:wrap} .search-band .ksearch{flex:1 1 420px;margin:0} .search-band .count{font:400 13px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;margin:0;white-space:nowrap} /* Category cards: 4:5, glass label bar, live counts. */ .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px)} @media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}} .cat{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#EFE9E1;text-decoration:none;color:#1C1A17;transition:transform .25s ease,box-shadow .25s ease} .cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .cat.head img{object-position:center top} .cat:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,26,23,.14)}.cat:hover img{transform:scale(1.04)} .cat .glass{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;padding:12px 14px; background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.55);border-radius:9px} .cat .glass b{display:block;font:500 17px/1.1 "EB Garamond",Georgia,serif}.cat .glass small{display:block;color:#6B655E;font:400 12px/1.3 "Instrument Sans",system-ui,sans-serif;margin-top:3px} .cat .glass .ic{width:18px;height:18px;color:#1C1A17} /* Bundles: look with hotspots, tiles, one house button. */ .bundles{display:grid;gap:clamp(20px,3vw,36px)} .bundle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,40px);align-items:start; padding:clamp(18px,2.5vw,32px);background:#FCFAF7;border:1px solid #E4DDD3;border-radius:14px} @media(max-width:820px){.bundle{grid-template-columns:1fr}} .look{position:relative;border-radius:10px;overflow:hidden;background:#EFE9E1;aspect-ratio:2/3} .look > img{width:100%;height:100%;object-fit:cover;display:block} .look .note{position:absolute;left:10px;bottom:10px;font:500 10.5px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4A4642; background:var(--glass);backdrop-filter:blur(8px);padding:7px 9px;border-radius:6px;transition:opacity .2s ease} .look-pending{display:grid;place-items:center;height:100%;color:#6B655E;font:500 12px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase} .hot{position:absolute;display:block;border-radius:10px;color:#1C1A17;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,opacity .25s ease} .hot i{position:absolute;right:-6px;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--brass); box-shadow:0 0 0 3px rgba(252,250,247,.9),0 0 0 8px rgba(176,141,87,.25);transition:transform .25s ease} .hot:hover,.hot.on{transform:translate(4px,-6px);box-shadow:0 0 0 1.5px var(--brass),0 18px 34px rgba(28,26,23,.22);background:rgba(252,250,247,.14);z-index:5} .hot:hover i,.hot.on i{transform:scale(1.25)} .hot .pop{position:absolute;left:0;bottom:calc(100% + 10px);width:150px;display:grid;gap:4px;padding:8px;background:var(--glass); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:10px;opacity:0;transform:translateY(6px); transition:opacity .25s ease,transform .25s ease;pointer-events:none} .hot.flip .pop{left:auto;right:0}.hot.below .pop{bottom:auto;top:calc(100% + 10px);transform:translateY(-6px)} .hot:hover .pop,.hot.on .pop{opacity:1;transform:translateY(0)} .hot .pop img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;mix-blend-mode:multiply;display:block} .hot .pop b{font:400 13.5px/1.2 "EB Garamond",Georgia,serif}.hot .pop small{font:400 11px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums} .look:has(.hot:hover) .hot:not(:hover){opacity:.35}.look:has(.hot:hover) .note{opacity:0} .bundle .set{display:grid;gap:14px} .bundle .set .eyebrow{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B655E;margin:0} .bundle h3{font:500 clamp(22px,2.2vw,28px)/1.2 "EB Garamond",Georgia,serif;color:#1C1A17;margin:0} .bundle .dek{font:400 18px/1.45 "EB Garamond",Georgia,serif;color:#4A4642;margin:0} .bundle .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin-top:6px} .tile-s{display:grid;gap:4px;text-decoration:none;color:#1C1A17;transition:transform .22s ease} .tile-s .ph{display:block;aspect-ratio:4/5;background:#F1EBE3;border-radius:8px;overflow:hidden;transition:box-shadow .22s ease} .tile-s .ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;display:block;transition:transform .35s ease} .tile-s:hover,.tile-s.on{transform:translateY(-6px) scale(1.04)}.tile-s:hover .ph,.tile-s.on .ph{box-shadow:0 16px 30px rgba(28,26,23,.16)}.tile-s:hover .ph img{transform:scale(1.05)} .tile-s .house{margin-top:6px;font:500 10.5px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E} .tile-s .name{font:400 15px/1.25 "EB Garamond",Georgia,serif}.tile-s .line{font:400 12.5px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums}.tile-s .line b{color:#1C1A17;font-weight:500} .bundle .set .btn{justify-self:start} @media(max-width:820px){.hot .pop{display:none}} @media(prefers-reduced-motion:reduce){.hot,.cat,.tile-s,.btn{transition:none}} /* v2.1 hero framing. Desktop: the band is tall enough to hold the 3:2 photograph, so the head is never cropped at the header. Phone: no overlay at all; the copy sits on paper and the whole portrait follows it. */ .hero--v2 img.bg{object-position:72% 0} .hero--v2 .inner{min-height:clamp(560px,64vw,940px);grid-template-rows:1fr auto;align-items:center} .hero--v2 .parts{align-self:end} @media(max-width:767px){ .hero--v2{display:flex;flex-direction:column;background:#F7F3EE} .hero--v2 picture{order:2;position:relative;inset:auto;display:block;width:100%;aspect-ratio:2/3;z-index:0} .hero--v2 picture img.bg{object-position:50% 50%} .hero--v2 .fade{display:none} .hero--v2 .inner{order:1;min-height:0;padding:36px var(--gutter) 24px;grid-template-rows:auto auto;gap:22px} .hero--v2 .parts{margin-top:0;flex-direction:row;flex-wrap:wrap;gap:10px 18px} .hero--v2 .parts small{display:none} } /* v2.2: the base .hero rule fixes its height and clips the parts row; the v2 band sizes itself. */ .hero--v2{height:auto;min-height:0;max-height:none} /* v2.3 phone hero: in-flow portrait after the copy; the absolute picture is hidden. */ .hero--v2 .shot-m{display:none} @media(max-width:767px){ .hero--v2{display:block} .hero--v2 picture{display:none} .hero--v2 .fade{display:none} .hero--v2 .inner{position:relative;min-height:0;padding:36px var(--gutter) 22px;display:grid;grid-template-rows:auto auto;gap:22px} .hero--v2 .copy,.hero--v2 .parts{max-width:none} .hero--v2 .parts{margin-top:0;flex-direction:row;flex-wrap:wrap;gap:10px 18px} .hero--v2 .parts small{display:none} .hero--v2 .shot-m{display:block;width:100%;height:auto;position:relative;z-index:0} } /* v2.4 phone portrait: 4:5 crop from the bottom keeps the head with room and drops the empty wall. */ @media(max-width:767px){.hero--v2 .shot-m{aspect-ratio:4/5;object-fit:cover;object-position:50% 100%}} /* v2.5 piece + brand pages */ .shot-main{position:relative;display:block} .price-pill{position:absolute;left:14px;bottom:14px;display:grid;gap:2px;padding:10px 14px;background:var(--glass); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:9px;color:#1C1A17} .price-pill b{font:500 20px/1 "EB Garamond",Georgia,serif;font-variant-numeric:tabular-nums} .price-pill small{font:400 11px/1.2 "Instrument Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4A4642} .cifras-pills{display:flex;gap:8px;flex-wrap:wrap} .pill{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #1C1A17;border-radius:999px;font:500 12px/1 "Instrument Sans",system-ui,sans-serif; color:#1C1A17;text-decoration:none;transition:background .2s ease,color .2s ease} .pill:hover{background:#1C1A17;color:#F7F3EE;text-decoration:none} .pill-glass{border-color:rgba(28,26,23,.14);background:var(--glass)}.pill-glass:hover{background:#1C1A17} .cifras{border-top:0}.cifras-head::before{content:"";display:block} .cifras{position:relative}.cifras::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#E4DDD3} .cifras::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--brass);transform:translateX(-50%) rotate(45deg)} .house-essay{position:relative;border-top:0}.house-essay::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#E4DDD3} .house-essay::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--brass);transform:translateX(-50%) rotate(45deg)} .bundles-band + .wrap{padding-top:0} /* v2.6 hero parts: bigger rings, icons and type. */ .hero--v2 .parts{gap:16px 40px} .hero--v2 .parts > div{gap:14px} .hero--v2 .parts .ic-ring{width:52px;height:52px} .hero--v2 .parts .ic-ring .ic{width:24px;height:24px} .hero--v2 .parts b{font-size:13px;letter-spacing:.12em} .hero--v2 .parts small{font-size:14px} @media(max-width:767px){.hero--v2 .parts .ic-ring{width:44px;height:44px}.hero--v2 .parts .ic-ring .ic{width:20px;height:20px}.hero--v2 .parts small{display:block}} /* v2.7 one hero picture: pinned under the copy on wide screens, in flow after it on phones. */ .hero--v2 picture.shot{position:absolute;inset:0;z-index:0;display:block} .hero--v2 picture.shot img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 0} @media(max-width:767px){ .hero--v2 picture.shot{display:block;position:relative;inset:auto;width:100%;aspect-ratio:4/5} .hero--v2 picture.shot img.bg{position:absolute;inset:0;object-position:50% 100%} } /* v2.8 phone hero: copy OVER the photograph. The band is the screen height, the portrait fills it anchored to the bottom so the head sits below the copy; a paper fade plus a light glass panel keep the text readable; the three parts sit on a glass band. */ @media(max-width:767px){ .hero--v2{display:grid;position:relative;min-height:clamp(640px,100svh,820px);background:#E9E0D3} .hero--v2 picture.shot{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;z-index:0} .hero--v2 picture.shot img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%} .hero--v2 .fade{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(247,243,238,.9) 0%,rgba(247,243,238,.55) 30%,rgba(247,243,238,0) 46%)} .hero--v2 .inner{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr auto;align-content:stretch;min-height:100%;padding:22px var(--gutter) 16px;gap:0} .hero--v2 .copy{max-width:none;gap:12px;padding:16px 16px 18px;background:rgba(252,250,247,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);border-radius:12px} .hero--v2 h1{font-size:40px} .hero--v2 .sub{font-size:15px} .hero--v2 .acts .btn{width:auto} .hero--v2 .parts{grid-row:3;align-self:end;max-width:none;margin-top:0;flex-direction:row;flex-wrap:wrap;gap:8px 16px;padding:10px 12px;background:rgba(252,250,247,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.55);border-radius:12px} .hero--v2 .parts .ic-ring{width:36px;height:36px;background:transparent;backdrop-filter:none} .hero--v2 .parts .ic-ring .ic{width:17px;height:17px} .hero--v2 .parts b{font-size:11px} .hero--v2 .parts small{display:none} } /* v2.9 phone hero: the panel ends above the hairline. Taller band (the portrait scales up, so the head sits lower) and a compact copy block. */ @media(max-width:767px){ .hero--v2{min-height:clamp(700px,100svh,920px)} .hero--v2 .copy{gap:10px;padding:14px 14px 16px} .hero--v2 .copy .eyebrow,.hero--v2 .copy .rule{display:none} .hero--v2 h1{font-size:36px;line-height:1.04} .hero--v2 .sub{font-size:14.5px;line-height:1.4} .hero--v2 .acts{margin-top:2px} .hero--v2 .acts .btn{padding:12px 18px} .hero--v2 .inner{padding-top:16px} } /* v3.0 tap, cards, marks, square */ /* Phones: the preview card shows on tap (the .on class), inside the look, never off-screen. */ @media(max-width:820px){ .hot .pop{display:grid;width:min(170px,44vw)} .hot.on .pop{opacity:1;transform:translateY(0)} .hot:hover:not(.on) .pop{opacity:0} } /* Category cards: as many columns as there are cards, two on phones. */ .cats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} @media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}} /* House marks: one size, one weight, one colour, caps tracked like a wordmark. Counts sit under the mark. (These are typographic marks, not the houses' own logotypes.) */ .houses{gap:0;justify-content:center;border-bottom:1px solid #E4DDD3} .houses a{flex:1 1 150px;max-width:220px;display:grid;justify-items:center;gap:6px;padding:18px 8px 16px;border-right:1px solid #E4DDD3;text-decoration:none} .houses a:last-child{border-right:0} .houses .h{font:500 15px/1 "EB Garamond",Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:#1C1A17;white-space:nowrap} .houses .n{font:400 11.5px/1 "Instrument Sans",system-ui,sans-serif;color:#6B655E;font-variant-numeric:tabular-nums} .houses a:hover .h{text-decoration:none;color:#8A5A3C} /* Piece photographs: square frames, the object fills them. */ .tile .ph,.ph{aspect-ratio:1/1} .tile .ph img,.ph img{object-fit:cover} .card-grid .tile--feature .ph{aspect-ratio:1/1;height:auto} /* ---- checkout / order page (orders app) ---- */ .checkout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;max-width:1080px;margin:32px auto 64px;padding:0 16px} .checkout__piece img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius,8px);background:var(--paper-2,#f3efe8)} .checkout__piece h1{font-size:1.5rem;margin:6px 0 4px} .checkout .price-line{font-size:1.25rem;margin:10px 0 0} .checkout .price-line small{display:block;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3,#7a736b);margin-top:2px} .plans{display:grid;gap:14px} .plans__set{display:grid;gap:14px;min-width:0;margin:0;padding:0;border:0} .plan{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hairline,rgba(0,0,0,.14));border-radius:var(--radius,8px);padding:16px 18px;background:var(--paper,#fbf9f5);cursor:pointer;transition:border-color .2s,box-shadow .2s} .plan:has(input:checked){border-color:var(--brass,#a8843c);box-shadow:0 0 0 1px var(--brass,#a8843c) inset} .plan input{margin-top:5px;accent-color:var(--brass,#a8843c)} .plan__body{display:grid;gap:4px} .plan__amt{font-size:1.05rem} .plan__terms{font-size:.9rem;color:var(--ink-2,#4b4640);line-height:1.45} .plan__list{margin:12px 0 0 18px;line-height:1.5} .plans--soon{border:1px solid var(--hairline,rgba(0,0,0,.14));border-radius:var(--radius,8px);padding:16px 18px} .field{display:grid;gap:6px;font-size:.9rem} .field input{border:1px solid var(--hairline,rgba(0,0,0,.2));border-radius:var(--radius,8px);padding:10px 12px;font:inherit;background:#fff} .tick{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--ink-2,#4b4640)} .tick input{margin-top:4px;accent-color:var(--brass,#a8843c)} .plans .btn{justify-self:start;margin-top:4px} .fine{font-size:.8rem;color:var(--ink-3,#7a736b);margin:0} .ask{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline,rgba(0,0,0,.14))} .ask .inline{display:inline} .order__state{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 18px} .order__state dt{color:var(--ink-3,#7a736b);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;padding-top:2px} .order__state dd{margin:0;line-height:1.45} .ok{background:var(--paper-2,#f3efe8);border-left:3px solid var(--brass,#a8843c);padding:10px 14px;border-radius:0 var(--radius,8px) var(--radius,8px) 0} .cta .btn--wa{margin-top:6px} @media (max-width:760px){.checkout{grid-template-columns:1fr;gap:24px;margin-top:16px}.checkout__piece img{max-width:360px}} /* v3.1 (22 Sep, Adam's phone review): logos in the house row, swipeable bundles rail, swipeable category cards on phones, the phone hero with the head clear of the panel. */ /* House row: the houses' own wordmarks at one height, count underneath. */ .houses .logo{display:block;height:20px;width:auto;max-width:150px;object-fit:contain} .houses a{gap:9px;padding:20px 10px 16px} @media(max-width:767px){.houses .logo{height:15px;max-width:120px}.houses a{flex:1 1 42%;max-width:none;padding:16px 6px 12px}} /* Category cards: on phones a horizontal rail, one and a bit cards per view, snap. */ @media(max-width:900px){ .cats{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; padding:4px var(--gutter) 10px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch} .cats::-webkit-scrollbar{display:none} .cats .cat{flex:0 0 68%;scroll-snap-align:start} } /* Conjuntos: a rail of cards. Phones swipe one card at a time; desktop shows two or three with arrows. Each card stacks the look over its tiles so the rail stays one height. */ .bundles-rail{position:relative} .bundles{display:flex;grid-template-columns:none;gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter);padding:6px var(--gutter) 14px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch} .bundles::-webkit-scrollbar{display:none} .bundle{flex:0 0 min(420px,calc(50% - 12px));scroll-snap-align:start;grid-template-columns:1fr;gap:16px;align-content:start;padding:clamp(14px,1.6vw,20px)} @media(min-width:1180px){.bundle{flex-basis:calc(33.333% - 16px)}} @media(max-width:820px){.bundle{flex-basis:86%;grid-template-columns:1fr}} .bundle .tiles{grid-template-columns:repeat(3,1fr);gap:10px} .bundle .tiles .tile-s:nth-child(n+7){display:none} .bundle .tile-s .name{font-size:14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .bundle h3{font-size:clamp(20px,1.8vw,24px)} .bundle .dek{font-size:16px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .bundle .look{aspect-ratio:2/3} .rail-btn{position:absolute;top:calc(50% - 24px);z-index:6;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.6); background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(28,26,23,.14); display:grid;place-items:center;cursor:pointer;color:#1C1A17;transition:background .2s ease,transform .2s ease} .rail-btn:hover{background:#1C1A17;color:#F7F3EE;transform:scale(1.04)} .rail-btn.prev{left:calc(-1 * var(--gutter) + 6px)}.rail-btn.next{right:calc(-1 * var(--gutter) + 6px)} .rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6} .rail-btn[disabled]{opacity:.35;cursor:default;transform:none} @media(max-width:820px){.rail-btn{display:none}} .rail-dots{display:flex;justify-content:center;gap:6px;margin-top:2px} .rail-dots i{width:6px;height:6px;border-radius:50%;background:#D8CFC2;transition:background .2s ease,transform .2s ease} .rail-dots i.on{background:var(--brass);transform:scale(1.25)} .rail-hint{font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B655E;text-align:center;margin:8px 0 0} @media(min-width:821px){.rail-hint{display:none}} /* Phone hero: the portrait starts below the copy panel and is anchored to its own top, so the whole head is always under the panel's lower edge; the crop moves to the feet instead. */ @media(max-width:767px){ .hero--v2 picture.shot{inset:max(38%,268px) 0 0 0;height:auto} .hero--v2 picture.shot img.bg{object-position:50% 0} .hero--v2 .fade{background:linear-gradient(180deg,rgba(247,243,238,.92) 0%,rgba(247,243,238,.6) 36%,rgba(247,243,238,0) 50%)} } /* Catalogue stats: two cells now. */ .proof{grid-template-columns:repeat(2,1fr)} /* v3.1b tiles in one row whatever the count; the phone portrait is pre-cropped (hero-v2-p2). */ .bundle .tiles{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))} @media(max-width:767px){.hero--v2 picture.shot{inset:max(36%,256px) 0 0 0}} /* ---- staff order board (orders app) ---- */ .staff h1{font-size:1.4rem;margin:4px 0 6px} .staff-h{font:500 12px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6B655E;margin:28px 0 10px;padding-top:12px;border-top:1px solid #E4DDD3} .staff-h small{color:var(--brass);margin-left:6px} .staff-alert{background:#FFF6E8;border:1px solid #E9C98F;border-radius:10px;padding:12px 16px;margin:10px 0 6px} .staff-alert ul{margin:6px 0 0 18px} .staff-t{width:100%;border-collapse:collapse;font-size:14px} .staff-t th{text-align:left;font:500 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6B655E;padding:6px 8px;border-bottom:1px solid #E4DDD3} .staff-t td{padding:10px 8px;border-bottom:1px solid #EFE9E1;vertical-align:top} .staff-t small,.staff-dl small{color:#6B655E} .staff-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px} @media(max-width:820px){.staff-grid{grid-template-columns:1fr}} .staff-img{width:160px;height:160px;object-fit:cover;border-radius:8px;background:#F1EBE3;margin:6px 0} .staff-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px} .staff-dl dt{color:#6B655E}.staff-dl dd{margin:0} .staff-acts{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px} .staff-links{display:grid;gap:6px;margin-top:8px}.staff-links small{color:#6B655E;margin:-2px 0 6px} .staff-step{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px dashed #E4DDD3;font-size:14px} .staff-step label{display:inline-flex;flex-direction:column;gap:3px;font-size:12px;color:#6B655E} .staff-step input,.staff-step textarea{border:1px solid rgba(28,26,23,.2);border-radius:6px;padding:7px 9px;font:inherit;font-size:14px;background:#fff;min-width:160px} .staff-step textarea{min-width:260px} .staff-step small{color:#6B655E} .staff-msg{padding:8px 12px;border-radius:8px;background:#F3EFE8;border-left:3px solid var(--brass)} .staff-msg.error{border-left-color:#B5473A} .staff-notes{white-space:pre-wrap;font:13px/1.5 "Instrument Sans",system-ui,sans-serif;background:#F7F3EE;padding:10px 12px;border-radius:8px} .inline{display:inline} /* 23 Sep 2026: stamped buttons (an inset hairline frame, like a label stamp) and WhatsApp green. Dark green text on #25D366: white on that green fails contrast. */ .cta-stack{display:grid;gap:12px;margin-top:4px} .kbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:3px; font:600 13px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease} .kbtn::after{content:"";position:absolute;inset:4px;border:1px solid currentColor;opacity:.3;border-radius:2px;pointer-events:none} .kbtn:hover{transform:translateY(-1px)} .kbtn:focus-visible{outline:2px solid #B08D57;outline-offset:3px} .kbtn--buy{background:#1C1A17;color:#F7F3EE;box-shadow:0 10px 26px rgba(28,26,23,.18)} .kbtn--buy::after{border-color:#B08D57;opacity:.75} .kbtn--buy:hover{background:#2A2622;box-shadow:0 14px 32px rgba(28,26,23,.24)} .kbtn__arrow{display:inline-block;color:#B08D57;letter-spacing:0;transition:transform .18s ease} .kbtn--buy:hover .kbtn__arrow{transform:translateX(4px)} .kbtn--wa{background:#25D366;color:#073B22;box-shadow:0 10px 24px rgba(37,211,102,.28)} .kbtn--wa:hover{background:#1FBF5A;color:#052C19} .kbtn .ic-wa{width:20px;height:20px;fill:currentColor;flex:0 0 auto} .cta-apartar{justify-self:center;padding:6px;font:500 13px/1.4 "Instrument Sans",system-ui,sans-serif;color:#6E4730; text-decoration:underline;text-underline-offset:3px;text-decoration-color:#B08D57} .cta-apartar:hover{color:#1C1A17} .ask{display:grid;gap:12px} .wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));z-index:60; width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 28px rgba(18,140,126,.35),0 0 0 4px rgba(247,243,238,.92);transition:transform .18s ease} .wa-float:hover{transform:scale(1.06)} .wa-float .ic-wa{width:30px;height:30px;fill:#fff} @media print{.wa-float{display:none}} @media (max-width:767px){body > footer{padding-bottom:88px}} /* room under the floating WhatsApp button */ /* ================= KOVE REBRAND 2026-09-23 — oxblood/gold/ink on white ================= Board: Main.dc.html / Motifs.dc.html / MenuMobile.dc.html / PieceMobile.dc.html / PieceDesktop.dc.html. Scoped under body.kv-public so /staffroom/ (orders/staff_board.html, staff_order.html) renders exactly as before: those two templates override the body_class block in web/base.html to drop kv-public. Every rule below is additive; nothing above this point in the file is edited. */ .kv-public{--k-ink:#111010;--k-gold:#B08D57;--k-gold2:#C9A96A;--k-oxblood:#7A0F1C;--k-oxblood2:#5C0A14; --surface:#FFFFFF;--surface-2:#FFFFFF;--paper:#FFFFFF;--paper-2:#FFFFFF;--ink:#111010} /* ---- flat backgrounds go true white, everywhere on the public site ---- */ .kv-public.bg-papel,.kv-public .bg-papel, .kv-public .bg-surface,.kv-public .bg-surface2{background-color:#FFFFFF!important} /* ---- 1. header ---- */ .kv-public .site-header{ background:url("../img/brand/banner-header.2945b18d0404.webp") center 55%/cover no-repeat; border-bottom:3px solid var(--k-oxblood); } .kv-public .site-header__row{min-height:100px} @media(min-width:1024px){.kv-public .site-header__row{min-height:140px}} .kv-public .brandlock--plate{ background:#FFFFFF;padding:8px 14px;border-radius:2px;color:var(--k-ink); box-shadow:0 0 0 1px var(--k-gold),0 0 0 5px #FFFFFF,0 0 0 6px var(--k-gold); } .kv-public .brandlock--plate .mark{fill:var(--k-oxblood)} @media(max-width:640px){.kv-public .brandlock--plate{padding:6px 10px}} .kv-public .menu-plate{background:#FFFFFF;border-radius:2px;box-shadow:0 0 0 1px var(--k-gold)} /* ---- 2. mobile menu / nav drawer ---- */ .kv-public #mobile-nav{position:relative;overflow:hidden} .kv-public #mobile-nav::before{ content:"";position:absolute;inset:0;z-index:0; background:url("../img/brand/toile-panel.7ff8d95a769d.webp") center/cover no-repeat;opacity:.09; } .kv-public #mobile-nav::after{ content:"";position:absolute;right:-70px;bottom:-60px;z-index:0; width:260px;height:260px;border-radius:50%;transform:rotate(-12deg); background:url("../img/brand/seal.77e86dbc702b.webp") center/cover no-repeat;opacity:.13;pointer-events:none; } .kv-public #mobile-nav > *{position:relative;z-index:1} .kv-public #mobile-nav li a{ font-family:"EB Garamond",Georgia,serif;font-size:22px;color:var(--k-ink); padding:14px 0 14px 22px;border-bottom-color:rgba(176,141,87,.45);position:relative; } .kv-public #mobile-nav li a::before{ content:"";position:absolute;left:0;top:50%;width:7px;height:7px; background:var(--k-oxblood);transform:translateY(-50%) rotate(45deg); } /* ---- 3. footer ---- */ .kv-public .site-footer{ background:url("../img/brand/banner-footer.4545ea9ed1e6.webp") center 40%/cover no-repeat; border-top:3px solid var(--k-oxblood);padding:24px 0; } .kv-public .site-footer__card{ background:#FFFFFF;border-radius:4px; box-shadow:0 0 0 1px var(--k-gold),0 0 0 6px #FFFFFF,0 0 0 7px var(--k-gold); } .kv-public .rule-accent::before,.kv-public .rule-accent::after{background:var(--k-gold)} /* ---- 4. buttons, site-wide ---- */ .kv-public .btn{ background:var(--k-oxblood);color:#F7F3EE;border:0;border-radius:3px; box-shadow:inset 0 0 0 5px var(--k-oxblood),inset 0 0 0 6px var(--k-gold2); text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:13px; } .kv-public .btn:hover{background:var(--k-oxblood2);box-shadow:inset 0 0 0 5px var(--k-oxblood2),inset 0 0 0 6px var(--k-gold2)} .kv-public .btn-ghost,.kv-public .btn--hairline{ background:#FFFFFF;color:var(--k-ink);border:0;border-radius:3px; box-shadow:inset 0 0 0 1px var(--k-ink),inset 0 0 0 5px #FFFFFF,inset 0 0 0 6px var(--k-gold); text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:13px; } .kv-public .btn-ghost:hover,.kv-public .btn--hairline:hover{ background:#FAF7F1;box-shadow:inset 0 0 0 1px var(--k-ink),inset 0 0 0 5px #FAF7F1,inset 0 0 0 6px var(--k-gold); } .kv-public .btn--off,.kv-public .btn--off:hover{background:#EFE9E1;color:#6B655E;box-shadow:none} .kv-public .kbtn--buy::after,.kv-public .kbtn--wa::after{content:none} .kv-public .kbtn--buy{background:var(--k-oxblood);box-shadow:inset 0 0 0 5px var(--k-oxblood),inset 0 0 0 6px var(--k-gold2),0 12px 26px rgba(122,15,28,.25)} .kv-public .kbtn--buy:hover{background:var(--k-oxblood2);box-shadow:inset 0 0 0 5px var(--k-oxblood2),inset 0 0 0 6px var(--k-gold2),0 14px 30px rgba(92,10,20,.3)} .kv-public .kbtn__arrow{color:var(--k-gold2)} .kv-public .kbtn--wa{background:var(--k-ink);color:#F7F3EE;box-shadow:inset 0 0 0 5px var(--k-ink),inset 0 0 0 6px var(--k-gold)} .kv-public .kbtn--wa:hover{background:#2A2622;box-shadow:inset 0 0 0 5px #2A2622,inset 0 0 0 6px var(--k-gold)} .kv-public .kbtn--wa .ic-wa,.kv-public .kbtn .ic-wa{fill:var(--k-gold2)} .kv-public .cta-apartar{color:var(--k-oxblood);text-decoration-color:var(--k-gold)} .kv-public .cta-apartar:hover{color:var(--k-oxblood2)} /* ---- 5. floating WhatsApp ---- */ .kv-public .wa-float{ background:var(--k-ink); box-shadow:inset 0 0 0 3px var(--k-ink),inset 0 0 0 4px var(--k-gold),0 12px 26px rgba(17,16,16,.28),0 0 0 4px #FFFFFF; } .kv-public .wa-float:hover{background:#2A2622} .kv-public .wa-float .ic-wa{fill:var(--k-gold2)} /* ---- 6. piece page: framed photo, subline, rule, "La pieza" card ---- */ .kv-public .shot-frame{position:relative;display:block;width:250px;aspect-ratio:2/3;max-width:100%;margin:0 auto 8px;transform:rotate(-2deg);filter:drop-shadow(0 18px 28px rgba(17,16,16,.22))} .kv-public .shot-frame__border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .kv-public .shot-frame__photo{position:absolute;left:11.8%;top:10.1%;width:76.3%;height:78.8%;object-fit:cover} .kv-public .shot-frame__seal{position:absolute;right:-18px;bottom:-14px;width:72px;height:72px;object-fit:cover;border-radius:50%;transform:rotate(8deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))} @media(min-width:900px){ .kv-public .shot-frame{width:400px;margin:0 0 8px} .kv-public .shot-frame__seal{right:-26px;bottom:-20px;width:104px;height:104px} } .kv-public .piece-head h1{font-family:"EB Garamond",Georgia,serif} .kv-public .piece-subline{font:italic 400 19px/1.3 "EB Garamond",Georgia,serif;color:var(--k-oxblood);margin:.3rem 0 0} @media(min-width:900px){.kv-public .piece-subline{font-size:23px}} .kv-public .piece-rule{display:flex;align-items:center;gap:12px;margin:1rem 0} .kv-public .piece-rule span{height:1px;flex:1 1 auto;background:var(--k-gold)} .kv-public .piece-rule i{width:8px;height:8px;background:var(--k-oxblood);transform:rotate(45deg);flex:0 0 auto;font-style:normal} .kv-public .price-line{font-family:"EB Garamond",Georgia,serif;color:var(--k-ink)} .kv-public .piece-card{background:url("../img/brand/toile-panel.7ff8d95a769d.webp") center/cover no-repeat;padding:14px;border-radius:4px;margin-top:1.5rem} .kv-public .piece-card__inner{background:#FFFFFF;padding:26px 22px;box-shadow:0 0 0 1px var(--k-gold),0 0 0 6px #FFFFFF,0 0 0 7px var(--k-gold);display:flex;flex-direction:column;gap:12px} .kv-public .piece-card__eyebrow{font:600 11px/1 "Instrument Sans",system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--k-oxblood);text-align:center;margin:0} .kv-public .piece-card .attrs{border-top:1px solid #E8DFD2;margin-top:4px} .kv-public .piece-card__seal{align-self:center;width:72px;height:72px;object-fit:cover;border-radius:50%;margin-top:6px} .kv-public .piece-card__ref{font:600 11px/1.4 "Instrument Sans",system-ui,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:#8A6F43;text-align:center;margin:0} @media(min-width:900px){.kv-public .piece-card__seal{width:84px;height:84px}} /* ---- 7. everywhere else: gold hairline on listing cards, oxblood eyebrows/accents ---- */ .kv-public .tile .ph{box-shadow:0 0 0 1px var(--k-gold)} .kv-public .eyebrow{color:var(--k-oxblood)} .kv-public .eyebrow a{color:var(--k-oxblood)} .kv-public .eyebrow a:hover{color:var(--k-oxblood2)} .kv-public .folio .n{color:var(--k-gold)} .kv-public .rule-double{border-top-color:var(--k-gold)} .kv-public .text-vachetta,.kv-public .hover\:text-vachetta:hover{color:var(--k-oxblood)!important} .kv-public .border-vachetta{border-color:var(--k-gold)!important} .kv-public .bg-vachetta{background-color:var(--k-oxblood)!important} /* ================= KOVE REBRAND ROUND 2 — 2026-09-24 owner phone review ================= 1) mobile text-flush-to-edge fix (bled .plate .panel measured at x:-24 via Playwright, so its own 24px padding only reached x:0, not past it) 2) footer uses the same banner-header.webp frieze as the header, plate gets mobile margin 3) every remaining warm brown/beige surface -> white/ink/gold/oxblood, meta grey neutral 4) header nav links + search made visible: full-width white bar under the banner (desktop) + a mobile search icon that opens #mobile-nav focused on its search field 5) listing cards: square engraved frame (frame-square.webp) replaces the gold hairline */ /* ---- 1. mobile text-flush-to-edge: .plate is .bleed (negative-margined out to the viewport), so .panel's own box starts at x:-var(--gutter); double the inset so the CONTENT starts at +var(--gutter), not 0. ---- */ @media(max-width:767px){ .kv-public .plate .panel{padding-left:calc(var(--gutter) * 2);padding-right:calc(var(--gutter) * 2)} } /* ---- 2. footer: same frieze as the header; mobile margin on the plate ---- */ .kv-public .site-footer{background:url("../img/brand/banner-header.2945b18d0404.webp") center 55%/cover no-repeat} @media(max-width:640px){.kv-public .site-footer__card{margin:0 12px}} /* ---- 3. kill every remaining warm brown/beige; neutral grey for meta text ---- */ .kv-public{--ink3:#6B6B6B;--ink-3:#6B6B6B} .kv-public .ph,.kv-public .tile-s .ph{background:#FFFFFF} .kv-public .shots > img,.kv-public .shot--empty,.kv-public .plate .shot,.kv-public .hero, .kv-public .cat,.kv-public .look,.kv-public .cm-ph,.kv-public .post-ph,.kv-public .post-hero, .kv-public .search-band,.kv-public .hero--v2,.kv-public .filters select,.kv-public .filters input{ background-color:#FFFFFF; } .kv-public .panel--plaster{background:#FFFFFF} .kv-public .panel--plaster::before{display:none} .kv-public .eyebrow a:hover,.kv-public .filters a,.kv-public .prose a,.kv-public .filter-group a:hover, .kv-public .quote .mark,.kv-public .steps .n,.kv-public .panel .more,.kv-public .post-data a, .kv-public .cifras-line a,.kv-public .houses a:hover .h,.kv-public .hero--v2 h1 em{ color:var(--k-oxblood); } .kv-public .folio .n,.kv-public .steps .n{color:var(--k-gold)} .kv-public .filters a:hover,.kv-public .prose a:hover,.kv-public .panel .more:hover, .kv-public .post-data a:hover,.kv-public .post-related a:hover,.kv-public .record a:hover, .kv-public .cifras-line a:hover{color:var(--k-oxblood2)} /* ---- 4. header: white bar for nav + search (desktop), search icon -> #mobile-nav (mobile) ---- */ .kv-public .site-header__bar{background:#FFFFFF;border-bottom:1px solid var(--k-gold)} .kv-public .site-header__bar .hdr-wrap{padding-top:12px;padding-bottom:12px;gap:32px} .kv-public .site-header__links{display:flex;align-items:center;gap:28px;font:500 13px/1 "Instrument Sans",system-ui,sans-serif} .kv-public .site-header__links a{color:var(--k-ink);text-decoration:none} .kv-public .site-header__links a:hover{color:var(--k-oxblood)} .kv-public .site-header__search{display:flex;align-items:center;flex:1 1 auto;max-width:320px; background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--k-gold);border-radius:3px;padding:0 4px 0 12px} .kv-public .site-header__search input{flex:1;border:0;background:transparent;padding:9px 4px; font:400 13.5px/1 "Instrument Sans",system-ui,sans-serif;color:var(--k-ink)} .kv-public .site-header__search input::placeholder{color:#8A8A8A} .kv-public .site-header__search input:focus{outline:none} .kv-public .site-header__search button{background:transparent;border:0;color:var(--k-oxblood); padding:8px;display:flex;cursor:pointer} .kv-public .site-header__lang{margin-left:auto} .kv-public .site-header__langbtn{background:transparent;border:0;color:var(--k-ink3,#6B6B6B); font:500 12.5px/1 "Instrument Sans",system-ui,sans-serif;cursor:pointer} .kv-public .site-header__langbtn:hover{color:var(--k-oxblood)} .kv-public .search-plate{background:#FFFFFF;border-radius:2px;box-shadow:0 0 0 1px var(--k-gold)} .kv-public .mnav-search{position:relative;z-index:1;display:flex;align-items:center;margin:18px 24px 4px; background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--k-gold);border-radius:3px;padding:0 4px 0 14px} .kv-public .mnav-search input{flex:1;border:0;background:transparent;padding:12px 4px; font:400 15px/1 "Instrument Sans",system-ui,sans-serif;color:var(--k-ink)} .kv-public .mnav-search input::placeholder{color:#8A8A8A} .kv-public .mnav-search input:focus{outline:none} .kv-public .mnav-search button{background:transparent;border:0;color:var(--k-oxblood);padding:8px;display:flex;cursor:pointer} /* ---- 5. listing cards: square engraved frame, no hairline, no rotation ---- */ .kv-public .tile .ph{box-shadow:none} .kv-public .ph{position:relative;background:#FFFFFF} .kv-public .ph-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} .kv-public .ph-photo{position:absolute!important;left:9.4%!important;top:11%!important; width:81.2%!important;height:77.4%!important;object-fit:contain;background:#FFFFFF} /* ================= KOVE REBRAND ROUND 3 — 2026-09-24 owner desktop review ================= 1) header/content collision: #main gets real top padding, scoped to kv-public so /staffroom/ (no kv-public class on body) is untouched. */ .kv-public #main{padding-top:32px} @media(min-width:1024px){.kv-public #main{padding-top:48px}} /* ================= KOVE REBRAND ROUND 4 — 2026-09-24 ================= transparent seal cutout: no disc, no circular crop, just a soft drop-shadow so it reads as wax sitting on the paper/photo underneath. */ .kv-public .shot-frame__seal{ object-fit:contain;border-radius:0;background:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); } .kv-public .piece-card__seal{ object-fit:contain;border-radius:0;background:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); } /* ================= KOVE REBRAND ROUND 5 — 2026-09-24 ================= .site-header__bar visibility with an explicit, self-contained media query instead of a Tailwind "lg:block" combo that isn't in the precompiled tw.css. */ .kv-public .site-header__bar{display:none} @media(min-width:1024px){.kv-public .site-header__bar{display:block}} /* ================= KOVE REBRAND ROUND 6 — 2026-09-24 ================= Last remaining brown accents caught by visual review of the catalogue screenshot (the search submit button) plus a sweep for the same #8A5A3C pattern elsewhere: focus rings, mic-active state, filter-row hover, order-status colour, selection. */ .kv-public ::selection{background:var(--k-oxblood);color:#FFFFFF} .kv-public .state-cv{color:var(--k-oxblood)} .kv-public .filter-row a:hover{color:var(--k-oxblood2)} .kv-public .ksearch-go{background:var(--k-oxblood)} .kv-public .ksearch-go:hover{background:var(--k-oxblood2)} .kv-public .ksearch-mic.kove-mic-on{background:var(--k-oxblood)} .kv-public summary:focus-visible,.kv-public [tabindex]:focus-visible, .kv-public .filters select:focus,.kv-public .filters input:focus, .kv-public .ksearch input:focus-visible, .kv-public .ksearch-mic:focus-visible,.kv-public .ksearch-go:focus-visible{ outline-color:var(--k-oxblood); } /* ================= KOVE REBRAND ROUND 7 — 2026-09-24 owner home-page notes ================= 1) gold always pairs with oxblood: section numbers, rule diamonds, ornament colour 2) feature icon badges: white disc + gold outer / oxblood inner double ring + oxblood dot accent; the 4-column certeza row sits on a 50%-white-washed toile band 3) category cards: oxblood-tinted frosted label, thin gold double-rule border 4) stats (proof) numbers in oxblood, gold rule with oxblood diamond between cells 5) props: deferred, assets not yet on disk */ /* ---- 1. gold pairs with oxblood ---- */ .kv-public .folio .n{color:var(--k-oxblood)} .kv-public .folio .bar{position:relative} .kv-public .folio .bar::before{content:"";position:absolute;left:-13px;top:50%;width:6px;height:6px; background:var(--k-oxblood);transform:translateY(-50%) rotate(45deg)} .kv-public .steps .n{color:var(--k-oxblood)} .kv-public .rule-accent .nd{color:var(--k-oxblood)} /* ---- 2. icon badges: white disc, gold/oxblood double ring, oxblood dot accent ---- */ .kv-public .ic-ring{ position:relative;background:#FFFFFF;border:1px solid var(--k-oxblood); box-shadow:0 0 0 3px #FFFFFF,0 0 0 4px var(--k-gold); } .kv-public .ic-ring::after{ content:"";position:absolute;right:-2px;bottom:-2px;width:6px;height:6px;border-radius:50%; background:var(--k-oxblood);box-shadow:0 0 0 2px #FFFFFF; } .kv-public .ic-ring .ic{color:var(--k-ink)} .kv-public .hero--v2 .parts b{color:var(--k-ink)} .kv-public .certeza{position:relative;isolation:isolate;padding-top:32px;padding-bottom:32px} .kv-public .certeza::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url("../img/brand/toile-panel.7ff8d95a769d.webp") center/cover no-repeat; } .kv-public .certeza .row > div{background:#FFFFFF;padding:20px 16px;border-radius:4px} .kv-public .certeza .ic-ring{width:56px;height:56px;margin-bottom:4px} .kv-public .certeza .ic-ring .ic{width:26px;height:26px;color:var(--k-ink)} .kv-public .certeza h3{font-family:"EB Garamond",Georgia,serif} /* ---- 3. category cards: oxblood-tinted glass, thin gold double-rule border ---- */ .kv-public .cat{box-shadow:0 0 0 1px var(--k-gold),0 0 0 4px #FFFFFF,0 0 0 5px var(--k-gold)} .kv-public .cat .glass{background:rgba(122,15,28,.20);border-color:rgba(255,255,255,.35)} .kv-public .cat .glass b,.kv-public .cat .glass small,.kv-public .cat .glass .ic{color:#FFFFFF} /* ---- 4. stats: oxblood numbers, gold rule + oxblood diamond between cells ---- */ .kv-public .proof .num{color:var(--k-oxblood)} .kv-public .proof .cell + .cell{border-left:1px solid var(--k-gold);position:relative} .kv-public .proof .cell + .cell::before{ content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px; background:var(--k-oxblood);transform:translateY(-50%) rotate(45deg); } @media(max-width:767px){ .kv-public .proof .cell:nth-child(3)::before,.kv-public .proof .cell:nth-child(4)::before{display:none} } /* ================= KOVE REBRAND ROUND 8 — 2026-09-24 ================= engraved-prop dividers: one small motif per selected folio rule, gently parallaxed on scroll (see base.html's inline script), never tiled/repeated. */ /* Normal flex child of .folio (not absolutely positioned) so it never overlaps the "Todas las bolsas" link some folios carry after the rule. */ .kv-public .folio-prop{ width:36px;height:36px;object-fit:contain;opacity:.85;flex:0 0 auto; pointer-events:none;will-change:transform; } @media(max-width:640px){.kv-public .folio-prop{width:26px;height:26px}} /* ================= KOVE REBRAND ROUND 9 — 2026-09-24 owner desktop review ================= 1) centre the 4 certeza cards (icon, title, text) 2) headings/card titles EB Garamond 400 -> 500, body text untouched 3) "03 Conjuntos" matches "01 Encuentra tu pieza": gold-double-rule frame on the look photo and the small piece thumbnails, oxblood-tinted hotspot preview label (white backgrounds and the folio number/rule styling were already covered in earlier rounds since .look/.tile-s .ph and .folio are shared with cats/proof) 4) hover-swap bug: the base photo must fade OUT, not just the alt fade in, or a transparent-background photo lets the base photo show through the alt 5) thin gold+oxblood-diamond dividers between sections that had none (a full per-card-row separator inside a responsive grid was judged too fragile to ship blind -- see report; this covers the certeza boundary and a divider above every card grid instead) */ /* ---- 1. centre certeza cards ---- */ .kv-public .certeza .row > div{text-align:center;display:flex;flex-direction:column;align-items:center} /* ---- 2. bolder headings / card titles, EB Garamond only ---- */ .kv-public h1,.kv-public h2,.kv-public h3, .kv-public .tile-name,.kv-public .cat .glass b,.kv-public .certeza h3, .kv-public .bundle h3,.kv-public .tile-s .name{ font-weight:500; } /* ---- 3. Conjuntos matches Encuentra tu pieza ---- */ .kv-public .look{box-shadow:0 0 0 1px var(--k-gold),0 0 0 4px #FFFFFF,0 0 0 5px var(--k-gold)} .kv-public .tile-s .ph{box-shadow:0 0 0 1px var(--k-gold),0 0 0 3px #FFFFFF,0 0 0 4px var(--k-gold)} .kv-public .hot .pop{background:rgba(122,15,28,.20)} .kv-public .hot .pop b,.kv-public .hot .pop small{color:#FFFFFF} /* ---- 4. hover crossfade: base image must fade OUT (transparent-bg photos were letting the resting photo show through the incoming one) ---- */ .kv-public .ph-photo{transition:opacity .25s ease} @media(hover:hover){ .kv-public .tile:hover .ph-photo:not(.ph-alt){opacity:0} .kv-public .tile:hover .ph-alt{opacity:1} } /* ---- 5. dividers where there were none ---- */ .kv-public .certeza{border-bottom:0;position:relative} .kv-public .certeza::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--k-gold); } .kv-public .card-grid{border-top:1px solid var(--k-gold);padding-top:28px;margin-top:4px;position:relative} .kv-public .card-grid::before{ content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px; background:var(--k-oxblood);transform:translateX(-50%) rotate(45deg); } /* ================= KOVE REBRAND ROUND 10 — 2026-09-24 ================= 1) tighter vertical rhythm between sections (header gap under #main untouched) 2) vanilla lightbox for piece photos (styles only; behaviour is in piece.html) 3) main piece photo: square frame, object-fit:contain on white, never cropped 4) red-tinted frames (image src already swapped in templates) 5) layered hover header: base frieze + separately positioned/animated props */ /* ---- 1. tighter section rhythm ---- */ .kv-public .section{margin-top:48px} @media(min-width:768px){.kv-public .section{margin-top:70px}} /* ---- 3. main photo: square red frame, CONTAIN not COVER, white letterbox ---- */ .kv-public .shot-frame{aspect-ratio:1/1} .kv-public .shot-frame__photo{ left:9.2%!important;top:10.8%!important;width:81.6%!important;height:77.8%!important; object-fit:contain!important;background:#FFFFFF; } /* ---- 2. lightbox ---- */ .kv-public .kv-lightbox{ position:fixed;inset:0;z-index:200;background:#FFFFFF; } .kv-public .kv-lightbox:not([hidden]){display:flex;align-items:center;justify-content:center} .kv-public .kv-lightbox__stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px} .kv-public .kv-lightbox__stage img{max-width:100%;max-height:100%;object-fit:contain} .kv-public .kv-lightbox__close,.kv-public .kv-lightbox__prev,.kv-public .kv-lightbox__next{ position:absolute;background:#FFFFFF;color:var(--k-ink);border:0; box-shadow:0 0 0 1px var(--k-gold);border-radius:2px; display:flex;align-items:center;justify-content:center;cursor:pointer; font-size:20px;line-height:1;width:44px;height:44px; } .kv-public .kv-lightbox__badge{position:absolute;left:16px;bottom:16px;background:#FFFFFF; color:#6B655E;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:5px 10px;border:1px solid #E4DDD3;border-radius:2px} .kv-public .kv-lightbox__close{top:16px;right:16px;font-size:28px} .kv-public .kv-lightbox__prev{left:16px;top:50%;transform:translateY(-50%)} .kv-public .kv-lightbox__next{right:16px;top:50%;transform:translateY(-50%)} .kv-public .kv-lightbox__close:hover,.kv-public .kv-lightbox__prev:hover,.kv-public .kv-lightbox__next:hover{ box-shadow:0 0 0 1px var(--k-oxblood);color:var(--k-oxblood); } /* ---- 5. layered hover header ---- */ .kv-public .site-header{background:url("../img/brand/banner-header-base.889d2fafaed4.webp") center 55%/cover no-repeat} .kv-public .site-header__props{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none;display:none} @media(min-width:900px){.kv-public .site-header__props{display:block}} .kv-public .site-header__props-inner{ position:absolute;top:55%;left:50%;transform:translate(-50%,-55%); width:100%;aspect-ratio:2400/523;min-height:100%; } .kv-public .header-prop{ position:absolute;transform:translate(-50%,-50%);pointer-events:auto; object-fit:contain; } .kv-public .header-prop--hummingbird{width:5%} .kv-public .header-prop--monarch{width:3.5%} @media(prefers-reduced-motion:no-preference){ @keyframes kv-monarch-flutter{0%,100%{transform:translate(-50%,-50%) scaleX(1)}50%{transform:translate(-50%,-50%) scaleX(.55)}} @keyframes kv-hummingbird-hover{ 0%{transform:translate(-50%,-50%) translateY(0) rotate(0) scale(1)} 30%{transform:translate(-50%,-50%) translateY(-4px) rotate(-6deg) scale(1.04)} 50%{transform:translate(-50%,-50%) translateY(-4px) rotate(-6deg) scale(.96)} 70%{transform:translate(-50%,-50%) translateY(-4px) rotate(-6deg) scale(1.03)} 100%{transform:translate(-50%,-50%) translateY(-4px) rotate(-6deg) scale(1)} } .kv-public .header-prop--monarch:hover{animation:kv-monarch-flutter .35s ease-in-out 3} .kv-public .header-prop--hummingbird:hover{animation:kv-hummingbird-hover .5s ease-out forwards} } /* ================= KOVE REBRAND ROUND 10b — 2026-09-24 ================= header-props sizing fix: .site-header__props now sizes against .site-header__banner (the banner-image row only), not the whole
(which also includes the solid-white nav bar below and was pushing the cover-scaled prop-positioning box's visible window mostly off-screen). */ .kv-public .site-header__banner{position:relative} /* 24 Sep: centre the certeza badges. The pre-rebrand 48px ghost circle (::before) and the left/top nudge on the icon sat under the new 56px ring, offset, so it read as off-centre. */ .kv-public .certeza .row > div::before{content:none;display:none} .kv-public .certeza .row > div{display:flex;flex-direction:column;align-items:center;text-align:center} .kv-public .certeza .ic-ring{display:grid;place-items:center;margin:0 auto 12px} .kv-public .certeza .row > div .ic{position:static;left:auto;top:auto;margin:0} /* ================= KOVE 24 Sep — category hero band (bolsas/zapatos/accesorios/ropa) ================= Desktop: subject sits right in the source photo, so the left ~60% carries a soft white scrim for the title/lede/search. Mobile: image stacks above the copy, scrim removed. */ .kv-public .cat-hero{position:relative;overflow:hidden;margin-bottom:1.25rem} .kv-public .cat-hero picture,.kv-public .cat-hero img{display:block;width:100%;height:auto} .kv-public .cat-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.65) 34%,rgba(255,255,255,0) 60%); } .kv-public .cat-hero-copy{ position:absolute;left:0;top:0;height:100%;width:100%;max-width:560px; display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,5vw,64px); } .kv-public .cat-hero-copy h1{margin:0 0 .5rem;color:var(--k-ink,#111010)} .kv-public .cat-hero-copy .lede{margin:0 0 1.25rem;max-width:420px} .kv-public .cat-hero-search{max-width:420px} @media(max-width:768px){ .kv-public .cat-hero{position:static;margin-bottom:0} .kv-public .cat-hero::before{display:none} .kv-public .cat-hero img{aspect-ratio:4/5;object-fit:cover} .kv-public .cat-hero-copy{ position:static;height:auto;max-width:none;width:auto; padding:1.5rem 1.25rem 0;display:block; } .kv-public .cat-hero-copy .lede{max-width:none} .kv-public .cat-hero-search{max-width:none} }