/* Theme Name: RoPa Theme URI: https://romanapalic.com Author: Romana Palič Author URI: https://romanapalic.com Description: Blok tema za RoPa, ročno izdelan nakit iz naravnih kamnov. Slovenska trgovina, WooCommerce, brez zunanjih virov. Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.1 Version: 0.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ropa Tags: e-commerce, block-patterns, full-site-editing, custom-colors, custom-menu, translation-ready */ /* ----------------------------------------------------------------------------- Every colour, size and space here comes from theme.json as a CSS custom property. There are no literal hex values in this file by design: a token that is wrong gets fixed in _reference/design/tokens.md, flows into theme.json, and propagates. See 02-build/CLAUDE.md rule 1. Contents 1. Base 2. Type signatures (the gold italic em, eyebrow, lead, meta) 3. Block styles (registered in functions.php) 4. Header + navigation 5. Hero 6. Section furniture (rails, triplets, stat rows, cards) 6b. Stone library + care guide (/kamni/ and /nega/) 7. Footer + buy bar 8. WooCommerce 9. Accessibility -------------------------------------------------------------------------------*/ /* 1. Base ------------------------------------------------------------------ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* The hero card and the low-stock pill deliberately overhang their column. Clip rather than hide so position: sticky in the header still works. ONLY on body. Putting overflow-x on as well breaks the WooCommerce mini-cart drawer: a non-visible overflow on switches off overflow propagation from to the viewport, so the drawer setting body { overflow: hidden } turns BODY into its own scroll container instead of being absorbed by the viewport. Tearing that container down again on close drops the viewport scroll to 0, and the page jumps to the top every time the cart is closed. Measured, because the cause is not guessable from reading it: with the rule on both, scrollY went 1470 -> 0 on close; with it on body alone, 1461 -> 1500. Clipping on body alone still contains the overhang, because body wraps all of the content. Verified at 390 and 1440. */ body { max-width: 100%; overflow-x: clip; } /* 2. Type signatures ------------------------------------------------------- */ /* The signature move: an italic em inside display type is gold. Preserve it. :where() keeps specificity at 0 so any block-level override still wins. */ :where(h1, h2, h3, h4, h5, h6, .ropa-display, .is-style-ropa-lead) em, :where(h1, h2, h3, h4, h5, h6, .ropa-display, .is-style-ropa-lead) i { color: var(--wp--preset--color--gold-deep); font-style: italic; } /* Display type outside a heading: prices, stat numbers, the wordmark. */ .ropa-display { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 300; letter-spacing: -0.012em; line-height: 1.02; } .ropa-serif { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 300; letter-spacing: 0.005em; } /* 3. Block styles ---------------------------------------------------------- */ /* Eyebrow: is-style-ropa-eyebrow on a paragraph or heading. */ .is-style-ropa-eyebrow { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.32em; line-height: 1.4; text-transform: uppercase; } /* Everything on the two dark bands: the footer and the philosophy quote. Gold on ink fails contrast, so the accent becomes champagne and body copy becomes paper. Applied as one class rather than per block, because a dark band that half-inherits light-band colours is the classic way this breaks. */ .ropa-on-ink, .ropa-on-ink :where(h1, h2, h3, h4, h5, h6, p, li, a) { color: var(--wp--preset--color--paper); } .ropa-on-ink :where(h1, h2, h3, h4, h5, h6, .ropa-display, .is-style-ropa-lead) em, .ropa-on-ink .is-style-ropa-eyebrow { color: var(--wp--preset--color--champagne); } .ropa-on-ink :where(a):hover, .ropa-on-ink :where(a):focus-visible { color: var(--wp--preset--color--champagne); } .ropa-on-ink .is-style-ropa-lead, .ropa-on-ink .is-style-ropa-meta { color: color-mix(in srgb, var(--wp--preset--color--paper) 72%, transparent); } .ropa-on-ink hr, .ropa-on-ink .wp-block-separator { border-color: color-mix(in srgb, var(--wp--preset--color--champagne) 30%, transparent); } .ropa-on-ink :where(a):focus-visible { outline-color: var(--wp--preset--color--champagne); } /* Lead: serif italic body copy, the aside next to a section headline. */ .is-style-ropa-lead { color: var(--wp--preset--color--ink-soft); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--large); font-style: italic; line-height: 1.5; } /* Meta: the small uppercase caption line under a price or a card. */ .is-style-ropa-meta { color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.1em; line-height: 1.4; } /* Card: paper panel with a hairline, lifts on hover when it is a link. */ .is-style-ropa-card { background-color: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); transition: transform 0.3s ease, box-shadow 0.3s ease; } .is-style-ropa-card:has(a:hover), a.is-style-ropa-card:hover { box-shadow: 0 30px 60px -30px rgb(60 40 20 / 25%); transform: translateY(-4px); } /* Button variants. The default (ink) lives in theme.json. */ .wp-block-button.is-style-ropa-ghost > .wp-block-button__link { background-color: transparent; border: 1px solid var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); } .wp-block-button.is-style-ropa-ghost > .wp-block-button__link:hover, .wp-block-button.is-style-ropa-ghost > .wp-block-button__link:focus { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); } .wp-block-button.is-style-ropa-gold > .wp-block-button__link { background-color: var(--wp--preset--color--gold-deep); } .wp-block-button.is-style-ropa-gold > .wp-block-button__link:hover, .wp-block-button.is-style-ropa-gold > .wp-block-button__link:focus { background-color: var(--wp--preset--color--ink); } /* Quiet: a text link with a hairline under it, used beside a primary CTA. */ .wp-block-button.is-style-ropa-quiet > .wp-block-button__link { background-color: transparent; border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); letter-spacing: 0.22em; padding: 0 0 4px; } .wp-block-button.is-style-ropa-quiet > .wp-block-button__link:hover, .wp-block-button.is-style-ropa-quiet > .wp-block-button__link:focus { background-color: transparent; border-bottom-color: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--gold-deep); } /* 4. Header + navigation --------------------------------------------------- */ .ropa-promo { font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: 0.22em; text-transform: uppercase; } .ropa-promo p { margin: 0; } @media (max-width: 781px) { /* Keep every trust signal reachable without eating 80px of vertical space: one swipeable line, faded at both ends. */ .ropa-promo .wp-block-group.is-layout-flex { -webkit-overflow-scrolling: touch; flex-wrap: nowrap; justify-content: flex-start; mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); overflow-x: auto; scrollbar-width: none; } .ropa-promo .wp-block-group.is-layout-flex::-webkit-scrollbar { display: none; } .ropa-promo p { flex: 0 0 auto; white-space: nowrap; } } /* Sticky lives on the header template part rather than on a group inside it. A sticky element can only travel within its parent's box, so anything nested deeper would unstick the moment the header scrolled past its own height. The gutter is deliberately NOT set here. WordPress puts the root left/right padding on the first container carrying .has-global-padding, which is the constrained group inside this element, so the band spans the viewport while its contents land on the same 1184px grid as every section. Adding padding here as well would double the gutter. */ .ropa-header, .wp-site-blocks > header.wp-block-template-part { border-bottom: 1px solid transparent; padding-bottom: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--40); position: sticky; top: 0; transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), padding var(--wp--custom--transition); z-index: 50; } /* Added by assets/js/ropa.js past 8px of scroll. Both selector forms, exactly like the base rule above: WooCommerce's own block templates (shop, product, category, checkout) include the header part WITHOUT the ropa-header className our templates set, so the JS falls back to the bare part and the scrolled ground must land on that form too. Found by the 2026-08-18 mystery-shop audit: nav floated illegibly over product images on every Woo-owned page while the homepage looked fine. */ .ropa-header.is-scrolled, .wp-site-blocks > header.wp-block-template-part.is-scrolled { backdrop-filter: saturate(140%) blur(10px); background-color: color-mix(in srgb, var(--wp--preset--color--paper) 85%, transparent); border-bottom-color: var(--wp--preset--color--line); padding-bottom: 18px; padding-top: 18px; } .ropa-wordmark a, .ropa-wordmark { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: clamp(26px, 3vw, 36px); font-style: italic; font-weight: 300; letter-spacing: 0.02em; line-height: 1; } .ropa-wordmark em { color: var(--wp--preset--color--gold-deep); font-style: italic; } .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold-deep); } /* The mobile overlay, dressed as the prototype's drawer: paper ground, serif italic links, a hairline under each. */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--paper); padding: 80px var(--wp--custom--gutter) var(--wp--preset--spacing--50); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { border-bottom: 1px solid var(--wp--preset--color--line); display: block; font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 26px; font-style: italic; letter-spacing: 0.01em; padding: 16px 0; text-transform: none; width: 100%; } /* 5. Hero ------------------------------------------------------------------ */ .ropa-hero__media { position: relative; } .ropa-hero__media img { filter: saturate(0.95) contrast(1.02); height: 100%; object-fit: cover; width: 100%; } @media (min-width: 782px) { .ropa-hero__media, .ropa-hero__media .wp-block-image, .ropa-hero__media figure { height: 100%; margin: 0; } .ropa-hero__media { min-height: 600px; } } @media (max-width: 781px) { /* Image first on a phone, so the piece is the thing above the fold rather than the headline describing it. */ .ropa-hero__media-col { order: -1; } } /* The manifest card overhangs the photo's left edge on desktop and tucks inside it on mobile, where there is no gutter to overhang into. */ .ropa-hero__card { background-color: var(--wp--preset--color--paper); box-shadow: 0 0 60px -10px rgb(60 40 20 / 30%); left: -28px; max-width: 280px; position: absolute; top: 100px; transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition); z-index: 2; } .ropa-hero__card:has(a:hover) { box-shadow: 0 30px 80px -20px rgb(60 40 20 / 45%); transform: translateY(-3px); } @media (max-width: 781px) { .ropa-hero__media { aspect-ratio: 4 / 5; } .ropa-hero__card { left: 14px; max-width: 70%; padding: 14px 16px !important; top: 14px; } } /* 6. Section furniture ----------------------------------------------------- */ /* Top-level blocks own their spacing through section padding, so the root block gap would only ever add a stray band of background between two sections and break the seam collapse below. Specificity beats core's :where() rule. */ body .wp-site-blocks > * { margin-block-start: 0; } /* Section headline on the left, an italic aside on the right, baselines aligned. Two class selectors, because core's generated flex-layout rule for the same element also carries two and would otherwise win on source order. */ .wp-block-group.ropa-section-head { align-items: flex-end; justify-content: space-between; } /* The aside is width-capped here rather than with the block editor's own selfStretch/flexSize control. That control writes flex-basis, which is the MAIN axis, so the moment this row stacks into a column on a phone the 320px stopped meaning "this wide" and started meaning "this tall", leaving a section-sized hole under every headline. */ .wp-block-group.ropa-section-head > .is-style-ropa-lead { flex: 0 1 340px; } @media (max-width: 781px) { .wp-block-group.ropa-section-head { align-items: stretch; flex-direction: column; } .wp-block-group.ropa-section-head > .is-style-ropa-lead { flex: 0 1 auto; } } /* The hero's three figures. A grid rather than a flex row: the labels are tracked-out uppercase and the widest of them ("kombinacij namere") does not fit a third of the hero column, so a flex row wraps the last one onto its own line and the set stops reading as a set. minmax(0, 1fr) rather than 1fr is load-bearing. 1fr means minmax(auto, 1fr), and an auto minimum refuses to shrink below the content's min-content width. That label does not fit a third of a phone, so the grid pushed its own column wider than the viewport, and because a flex item will not shrink below its min-content either, that widened the whole hero column and clipped every line of copy in it. */ .wp-block-group.ropa-stats { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 600px) { .wp-block-group.ropa-stats { gap: 8px; } .wp-block-group.ropa-stats .ropa-display { font-size: 26px !important; } .wp-block-group.ropa-stats .is-style-ropa-eyebrow { font-size: 9px; letter-spacing: 0.2em; } } /* Romana's initial, set as a coin next to her signature line. padding: 0 is load-bearing. Core ships `:where(p.has-background) { padding: 1.25em 2.375em }`, which at 28px turns this 64px circle into a 197x134 ellipse. The :where() keeps core's specificity at 0, so this one line wins. */ .ropa-monogram { align-items: center; border-radius: 50%; display: flex; flex: 0 0 auto; height: 64px; justify-content: center; padding: 0; width: 64px; } /* Beads in the Atelje teaser overlap slightly, the way they sit on a strand. */ .ropa-bead--overlap + .ropa-bead--overlap { margin-left: -10px; } /* Numbered cells that hang off a hairline (V vsakem paketu, the quote band). */ .ropa-ruled > * { border-top: var(--wp--custom--hairline); padding-top: var(--wp--preset--spacing--30); } .has-ink-background-color .ropa-ruled > * { border-top-color: color-mix(in srgb, var(--wp--preset--color--champagne) 30%, transparent); } /* Rail arrows. The scrollbar is hidden by design, so without these there is nothing on a desktop saying the rail scrolls at all. They sit in their own zero-height row above the rail and hang over it. Hidden on touch, where the swipe is the affordance and an arrow is just clutter. */ .ropa-rail-wrap { height: 0; position: relative; z-index: 2; } .ropa-rail-arrow { align-items: center; background-color: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: 50%; box-shadow: 0 10px 30px -14px rgb(60 40 20 / 40%); color: var(--wp--preset--color--ink); cursor: pointer; display: flex; font-family: var(--wp--preset--font-family--jost); font-size: 18px; height: 46px; justify-content: center; left: -22px; position: absolute; /* Centre on the bead, not on the card: the label sits under the bead and an arrow level with the text reads as belonging to it. The wrap is a zero-height row whose origin lands on the bead's top edge, and a bead is as tall as the rail card is wide, so half the card width less half the arrow centres it. Derived from the token so it survives a resize. */ top: calc(var(--wp--custom--rail-card) / 2 - 23px); transition: opacity 0.2s ease, background-color var(--wp--custom--transition); width: 46px; } .ropa-rail-arrow--next { left: auto; right: -22px; } .ropa-rail-arrow:hover { background-color: var(--wp--preset--color--cream); color: var(--wp--preset--color--gold-deep); } .ropa-rail-arrow[hidden] { display: none; } @media (hover: none), (max-width: 781px) { .ropa-rail-wrap { display: none; } } /* Horizontal stone rail. Scrollbar hidden, ends faded, snaps card to card. */ .wp-block-group.ropa-rail { -ms-overflow-style: none; mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .ropa-rail::-webkit-scrollbar { display: none; } /* Grab to scroll, mouse only. Touch already has momentum scrolling, and a grab cursor on a touch device means nothing. */ @media (hover: hover) { .wp-block-group.ropa-rail { cursor: grab; } /* While dragging, scroll-behavior: smooth and scroll-snap both fight the gesture: every scrollLeft assignment would animate a frame behind the pointer, and snapping would yank the rail back mid-drag. Suspend both for the duration of the drag only. */ .wp-block-group.ropa-rail.is-grabbing { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; } } /* Stop the browser's native image and link dragging from stealing the gesture. */ .ropa-rail img, .ropa-rail a { -webkit-user-drag: none; } .ropa-rail > * { flex: 0 0 var(--wp--custom--rail-card); scroll-snap-align: start; text-align: center; } .ropa-rail img { display: block; height: auto; margin: 0 auto; width: 100%; } @media (max-width: 781px) { .wp-block-group.ropa-rail { margin-left: calc(var(--wp--style--root--padding-left) * -1); margin-right: calc(var(--wp--style--root--padding-right) * -1); padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); } } /* A bead render never wants a background or a border, only its own alpha. Nor a bottom margin: core gives every figure.wp-block-image one, and the gap under a bead belongs to the container's blockGap so it stays consistent everywhere the bead is used. */ .wp-block-image.ropa-bead { margin-bottom: 0; } .ropa-bead img { background: none; object-fit: contain; } /* Full-bleed portrait in the story section on mobile, as specified. */ @media (max-width: 781px) { .ropa-bleed-mobile { margin-left: calc(var(--wp--style--root--padding-left) * -1); margin-right: calc(var(--wp--style--root--padding-right) * -1); } } /* Seam collapse. Two sections in the same colour have no visible boundary between them, so a full rhythm gap on each side reads as double the space of a real colour change. Where the colours match, both sides collapse to one unit. The prototype did this with a DOM pass on every render. Adjacent-sibling selectors do the same job statically, and they keep working when someone reorders the sections in the editor, which the DOM pass could not. */ .has-paper-background-color + .has-paper-background-color, .has-cream-background-color + .has-cream-background-color, .has-cream-deep-background-color + .has-cream-deep-background-color, .has-ink-background-color + .has-ink-background-color { padding-top: var(--wp--custom--seam-collapse) !important; } .has-paper-background-color:has(+ .has-paper-background-color), .has-cream-background-color:has(+ .has-cream-background-color), .has-cream-deep-background-color:has(+ .has-cream-deep-background-color), .has-ink-background-color:has(+ .has-ink-background-color) { padding-bottom: var(--wp--custom--seam-collapse) !important; } /* The trust badge row is a trailer to the hero, not a section of its own: it keeps the hero's ground and only needs a gap under it. */ .ropa-badges { padding-top: var(--wp--preset--spacing--40) !important; } @media (max-width: 781px) { /* Four badges wrapped onto three lines is a wall. One swipeable lane keeps all four reachable and costs one line of height. */ .ropa-badges .wp-block-group.is-layout-flex { flex-wrap: nowrap; mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); overflow-x: auto; scrollbar-width: none; } .ropa-badges .wp-block-group.is-layout-flex::-webkit-scrollbar { display: none; } .ropa-badge { flex: 0 0 auto; white-space: nowrap; } } /* 6b. Stone library + care guide ------------------------------------------- */ /* /kamni/ and /nega/, both rendered from ropa_stones(). Rebuilt 2026-08-18 after the first attempt was rejected on sight. The reasons are worth keeping, because all three were avoidable: - It laid the stones out three-across. The approved design in 01-design-handoff/kamni.html is ONE full-width card per stone, and at a third of the width the four-cell meta grid and the care row both wrapped, leaving ragged card bottoms across the row. - The care ratings were filled ink rectangles. Three solid black blocks per card made the warnings the loudest thing on a page about delicate stones, and they read as buttons rather than as data. The design uses a 5px dot plus the words. - The cards had no surface. A single top hairline over the band background is not a card, it is three columns of loose text. The lesson generalises: the handoff already contained a finished design for this page. Read it before inventing a layout. */ .ropa-stone-jump { border-top: var(--wp--custom--hairline); display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); } .ropa-stone-jump a { align-items: center; background-color: var(--wp--preset--color--paper); border: var(--wp--custom--hairline); color: var(--wp--preset--color--ink); display: inline-flex; gap: 8px; padding: 7px 13px; text-decoration: none; transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition); } .ropa-stone-jump a img { height: 22px; object-fit: contain; width: 22px; } .ropa-stone-jump a span { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 15px; font-style: italic; } .ropa-stone-jump a:hover, .ropa-stone-jump a:focus-visible { background-color: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--gold); } /* Category header: display title left, its one line right, rule underneath. */ .ropa-cat-head { align-items: flex-end; border-bottom: var(--wp--custom--hairline); display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); justify-content: space-between; padding-bottom: var(--wp--preset--spacing--30); } .ropa-cat-head__tag { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.32em; margin: 0 0 var(--wp--preset--spacing--10); text-transform: uppercase; } .ropa-cat-head__title { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--display-s); font-weight: 300; letter-spacing: -0.012em; line-height: 1.05; margin: 0; } .ropa-cat-head__text { color: var(--wp--preset--color--ink-soft); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--medium); font-style: italic; margin: 0; max-width: 34ch; text-align: right; } /* One card per stone, full width. */ .ropa-stone-list { display: grid; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--50); } .ropa-stone-card { align-items: start; background-color: var(--wp--preset--color--paper); border: var(--wp--custom--hairline); display: grid; gap: var(--wp--preset--spacing--60); /* minmax(0, ...) on the text column: the meta row is tracked-out uppercase that will not wrap, and an auto minimum lets it push the card wider than the grid. themes/ropa/CLAUDE.md rule 8. */ grid-template-columns: 200px minmax(0, 1fr); padding: var(--wp--preset--spacing--50) 38px; /* The homepage rail links to /kamni/#id and the header is sticky. */ scroll-margin-top: 120px; transition: border-color var(--wp--custom--transition); } .ropa-stone-card:hover { border-color: var(--wp--preset--color--champagne); } /* :target is the point of this page. Fourteen links land on an anchor and the visitor has to be able to see which card they were sent to. */ .ropa-stone-card:target { border-color: var(--wp--preset--color--gold); } .ropa-stone-card__rail { text-align: center; } /* A grid item defaults to min-width:auto, which will not shrink below its content. The care row inside is a nowrap flex line, so without this the card grows past the grid instead of the row wrapping. Same trap as rule 8. */ .ropa-stone-card__body { min-width: 0; } .ropa-stone-card__bead { display: block; height: 160px; margin: 0 auto; object-fit: contain; width: 160px; } .ropa-stone-card__name { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--display-xs); font-weight: 300; letter-spacing: -0.012em; line-height: 1.1; margin: var(--wp--preset--spacing--20) 0 2px; } .ropa-stone-card__en { color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--jost); font-size: 10px; letter-spacing: 0.22em; margin: 0; text-transform: uppercase; } .ropa-stone-card__meaning { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 17px; font-style: italic; margin: 8px 0 0; } /* Four reference cells, each under its own hairline. */ .ropa-stone-meta { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--wp--preset--spacing--30); } .ropa-stone-meta > div { border-top: var(--wp--custom--hairline); padding-top: 11px; } .ropa-stone-meta dt { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; margin-bottom: 5px; text-transform: uppercase; } .ropa-stone-meta dd { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--medium); font-style: italic; line-height: 1.3; margin: 0; } .ropa-stone-card__desc { color: var(--wp--preset--color--ink-soft); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 19px; font-style: italic; line-height: 1.6; margin: 0 0 var(--wp--preset--spacing--30); } /* The care row, shared with /nega/. Rules above and below use the SOFT hairline, because `line` inside the card reads as a second box against its own border. */ .ropa-care-row { align-items: center; border-bottom: 1px solid var(--wp--custom--line-soft); border-top: 1px solid var(--wp--custom--line-soft); display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); padding: 16px 0; } .ropa-care-row__label { color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--jost); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } /* Dot plus words. The word is the primary signal and the colour is the second, so the table still reads in greyscale. */ .ropa-care { align-items: center; display: inline-flex; font-family: var(--wp--preset--font-family--jost); font-size: 10px; gap: 6px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .ropa-care i { border-radius: 50%; flex: 0 0 auto; height: 5px; width: 5px; } .ropa-care--ok { color: var(--wp--custom--care-ok); } .ropa-care--ok i { background-color: var(--wp--custom--care-ok); } .ropa-care--warn { color: var(--wp--custom--care-warn); } .ropa-care--warn i { background-color: var(--wp--custom--care-warn); } .ropa-care--no { color: var(--wp--custom--care-no); } .ropa-care--no i { background-color: var(--wp--custom--care-no); } /* On /nega/ the same indicator gains a tint. `is-pill` is added in the markup there and nowhere else, so one helper (ropa_care_class) serves both pages. */ .ropa-care.is-pill { border-radius: 2px; padding: 4px 10px; } .ropa-care--ok.is-pill { background-color: var(--wp--custom--care-ok-bg); } .ropa-care--warn.is-pill { background-color: var(--wp--custom--care-warn-bg); } .ropa-care--no.is-pill { background-color: var(--wp--custom--care-no-bg); } .ropa-care-row__mohs { color: var(--wp--preset--color--ink-soft); font-family: var(--wp--preset--font-family--jost); font-size: 11px; letter-spacing: 0.08em; } .ropa-care-row__more { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: 11px; letter-spacing: 0.16em; margin-left: auto; text-transform: uppercase; } .ropa-stone-card__links { margin: var(--wp--preset--spacing--30) 0 0; } .ropa-stone-card__links a { border: 1px solid var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); display: inline-block; font-family: var(--wp--preset--font-family--jost); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; padding: 13px 20px; text-decoration: none; text-transform: uppercase; transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition); } .ropa-stone-card__links a:hover, .ropa-stone-card__links a:focus-visible { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); } /* /nega/ ------------------------------------------------------------------- */ /* Rebuilt 2026-08-18 against 01-design-handoff/nega.html, which is flatter and less structured in the first build than the design actually is. Two things were missing and both are what gave the design page its shape: - The four cleansing methods are BOXED cards on cream, not text under a hairline. - The per-stone care section is a TWO-COLUMN grid of cards, not a wide table row per stone, and each card ends with a note block set off by a gold left rule. The ratings there are tinted pills, not bare dots. The tinted pill is deliberately only used here. On /kamni/ the same rating renders as a bare dot plus words, which is the handoff's own distinction: this page is a reference table you scan, so the ratings carry a fill; the stone library is editorial, so they stay quiet. */ .ropa-method-grid { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(4, minmax(0, 1fr)); } .ropa-method { background-color: var(--wp--preset--color--cream); border: var(--wp--custom--hairline); padding: 26px 22px; } .ropa-method__mark { color: var(--wp--preset--color--gold-deep); display: block; font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 38px; line-height: 1; margin-bottom: 12px; } .ropa-method__title { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 22px; font-style: italic; font-weight: 300; margin: 0 0 4px; } .ropa-method__when { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: 9px; font-weight: 500; letter-spacing: 0.32em; margin: 0 0 12px; text-transform: uppercase; } .ropa-method__text { color: var(--wp--preset--color--ink-soft); font-size: 13px; line-height: 1.55; margin: 0; } /* Two up, one card per stone. */ .ropa-care-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ropa-care-card { background-color: var(--wp--preset--color--paper); border: var(--wp--custom--hairline); padding: 26px 28px; /* /kamni/ links here as /nega/#id for all fourteen, and the header is sticky. */ scroll-margin-top: 120px; transition: border-color var(--wp--custom--transition); } .ropa-care-card:target { border-color: var(--wp--preset--color--gold); } .ropa-care-card__head { align-items: center; display: flex; gap: 16px; margin-bottom: 18px; } .ropa-care-card__head img { flex: 0 0 auto; height: 64px; object-fit: contain; width: 64px; } .ropa-care-card__head h3 { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 28px; font-weight: 300; letter-spacing: -0.012em; line-height: 1.1; margin: 0; } .ropa-care-card__head p { color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--jost); font-size: 10px; letter-spacing: 0.18em; margin: 4px 0 0; text-transform: uppercase; } .ropa-care-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } /* The note, set off by a gold left rule rather than another box. */ .ropa-care-note { background-color: var(--wp--preset--color--cream); border-left: 2px solid var(--wp--preset--color--gold-deep); padding: 14px 18px; } .ropa-care-note__label { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: 9px; font-weight: 500; letter-spacing: 0.32em; margin: 0 0 5px; text-transform: uppercase; } .ropa-care-note__text { color: var(--wp--preset--color--ink-soft); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 16px; font-style: italic; line-height: 1.5; margin: 0; } .ropa-step-grid { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); list-style: none; margin: 0; padding: 0; } .ropa-step { border-top: var(--wp--custom--hairline); padding-top: var(--wp--preset--spacing--30); } .ropa-step__n { color: var(--wp--preset--color--gold); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--display-xs); font-style: italic; } .ropa-step__t { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--large); font-weight: 300; margin: var(--wp--preset--spacing--10) 0 0; } .ropa-step__x { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--x-small); margin: var(--wp--preset--spacing--20) 0 0; } .ropa-dont-grid { border-top: var(--wp--custom--hairline); display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); padding-top: var(--wp--preset--spacing--50); } .ropa-dont h3 { font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.22em; margin: 0; text-transform: uppercase; } .ropa-dont p { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--x-small); margin: var(--wp--preset--spacing--20) 0 0; } @media (max-width: 1023px) { /* The bead rail goes above the text rather than beside it. Below about 900px a 200px rail leaves the four meta cells under 120px each and they wrap. */ .ropa-stone-card { gap: var(--wp--preset--spacing--40); grid-template-columns: minmax(0, 1fr); } /* Bead left, the three text lines stacked beside it. A flex row here put all four children side by side, which squeezed the English name and the meaning into narrow columns that wrapped after two words. */ .ropa-stone-card__rail { align-items: center; column-gap: var(--wp--preset--spacing--30); display: grid; grid-template-columns: 96px minmax(0, 1fr); text-align: left; } .ropa-stone-card__bead { grid-column: 1; grid-row: 1 / 4; height: 96px; margin: 0; width: 96px; } .ropa-stone-card__name { margin-top: 0; } } @media (max-width: 781px) { /* Two products across a 390px viewport leaves ~165px per card, and the name-and-price row collided: "Rodonit ·" wrapped, then "Sočutje 66,00 €" sat beside it. Stack them instead. */ .wp-block-group.ropa-prod-line { align-items: flex-start; flex-direction: column; gap: 4px; } .ropa-stone-card { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); } .ropa-stone-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ropa-care-row__more { margin-left: 0; } .ropa-cat-head__text { text-align: left; } /* The design's own mobile rules: methods go two-up, care cards one-up. */ .ropa-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ropa-care-grid { grid-template-columns: minmax(0, 1fr); } } /* 6b-2. Materials on the care guide (q21) ---------------------------------- */ .ropa-mat-grid { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .ropa-mat { border-top: 2px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--30); } /* The elastic card is the one that explains the shower rule, so it is marked rather than just placed first: on a phone every card is first. */ .ropa-mat--lead { border-top-color: var(--wp--preset--color--gold-deep); grid-column: 1 / -1; } .ropa-mat h3 { font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.22em; margin: 0; text-transform: uppercase; } .ropa-mat--lead h3 { color: var(--wp--preset--color--gold-deep); } /* Set larger than the other three on purpose. This is the sentence that decides whether a bracelet survives a year, and it is about a component the customer cannot see. It should not read at the same weight as "brass tarnishes". */ .ropa-mat--lead p { font-size: var(--wp--preset--font-size--small); max-width: 56ch; } .ropa-mat p { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--x-small); margin: var(--wp--preset--spacing--20) 0 0; max-width: 62ch; } /* 6b-3. "V vsakem paketu" (q16) -------------------------------------------- */ .ropa-parcel { display: grid; gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .ropa-parcel__cell { border-top: var(--wp--custom--hairline); padding-top: var(--wp--preset--spacing--30); } .ropa-parcel__n { color: var(--wp--preset--color--gold-deep); display: block; font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 26px; font-weight: 300; line-height: 1; } .ropa-parcel__t { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 22px; font-style: italic; font-weight: 300; margin: 6px 0 0; } .ropa-parcel__d { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--x-small); margin: 6px 0 0; } /* 6c. Wrist guide (/velikosti/) -------------------------------------------- */ /* minmax(0, ...) rather than a bare 1fr: "Najpogostejša velikost" is the widest min-content in here and an auto minimum would let it set the track width. Rule 8. */ .ropa-sizes { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .ropa-sizes__card { background: var(--wp--preset--color--paper); border: var(--wp--custom--hairline); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); text-align: center; } .ropa-sizes__letter { color: var(--wp--preset--color--ink); display: block; font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--display-s); font-weight: 300; line-height: 1; } /* The made-to-measure card says "Po meri" where the others say one letter, so it would otherwise set the row height for all four. */ .ropa-sizes__card--custom .ropa-sizes__letter { font-size: var(--wp--preset--font-size--x-large); font-style: italic; } .ropa-sizes__cm { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.24em; margin: var(--wp--preset--spacing--20) 0 0; text-transform: uppercase; } .ropa-sizes__note { color: var(--wp--preset--color--mute); font-size: 13px; margin: var(--wp--preset--spacing--20) 0 0; } /* The slider. Ships hidden and ropa.js unhides it, so a visitor with no JavaScript sees the four cards above and nothing broken. */ .ropa-wrist { background: var(--wp--preset--color--paper); border: var(--wp--custom--hairline); display: grid; gap: var(--wp--preset--spacing--20); justify-items: center; padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter); text-align: center; } .ropa-wrist__label { color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--jost); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; } .ropa-wrist__out { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--display-s); font-weight: 300; line-height: 1; } /* accent-color does the whole job in every browser this site supports, and it keeps the native thumb, which is already the right size for a finger. */ .ropa-wrist__range { accent-color: var(--wp--preset--color--gold-deep); max-width: 420px; width: 100%; } .ropa-wrist__verdict { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--x-large); font-style: italic; font-weight: 300; margin: 0; } .ropa-wrist__verdict span { color: var(--wp--preset--color--mute); font-family: var(--wp--preset--font-family--jost); font-size: 13px; font-style: normal; white-space: nowrap; } /* 7. Footer + buy bar ------------------------------------------------------ */ .ropa-footer-links { list-style: none; } .ropa-footer-links li { margin-bottom: 10px; } .ropa-footer-links a { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 18px; font-style: italic; letter-spacing: 0.05em; } /* Two class selectors, not one. The block's own generated layout rule (.wp-container-core-group-is-layout-*) also carries one class and sets display: flex, and it is printed after this stylesheet, so a single-class rule loses the tie and the bar shows up on desktop. */ .wp-block-group.ropa-buybar { display: none; } @media (max-width: 781px) { .wp-block-group.ropa-buybar { align-items: center; background-color: var(--wp--preset--color--paper); border-top: var(--wp--custom--hairline); bottom: 0; box-shadow: 0 -12px 30px -18px rgb(60 40 20 / 40%); display: flex; gap: 14px; justify-content: space-between; left: 0; padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); position: fixed; right: 0; transform: translateY(130%); transition: transform 0.3s ease; z-index: 120; } /* Added by assets/js/ropa.js once the hero is off screen. */ .ropa-buybar.is-show { transform: translateY(0); } .ropa-buybar p { margin: 0; } .ropa-buybar .wp-block-button__link { padding: 14px 18px; white-space: nowrap; } } /* 8. WooCommerce ----------------------------------------------------------- */ /* Woo's block templates inherit theme.json, so this is only the handful of things it cannot express. Anything more belongs in a Woo template override, not here. See 02-build/CLAUDE.md rule 4. */ .woocommerce-product-gallery, .wc-block-components-product-image img { border-radius: 0; } .wc-block-components-product-price__value, .woocommerce-Price-amount { color: var(--wp--preset--color--gold-deep); font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: var(--wp--preset--font-size--x-large); } .wc-block-components-product-name { font-family: var(--wp--preset--font-family--cormorant-garamond); font-weight: 300; letter-spacing: -0.012em; } /* Woo's archive-product template is used as shipped, per 02-build/CLAUDE.md rule 4: no template override, because the structure is right and only the styling is not. These are the four things it inherits wrongly from theme.json, all of them only visible once there are actually products in the grid. 1. The archive title renders at the hero's display size. `Trgovina` set in 104px reads as a landing page, not as a shop. */ .wp-block-query-title { font-size: var(--wp--preset--font-size--display-l); margin-bottom: var(--wp--preset--spacing--50); } /* 2. Woo centres the product title and price. Everything else in this design is left aligned, including the same card on the homepage, so an archive that centres two lines of three looks like a different site. */ .wp-block-woocommerce-product-template .wp-block-post-title, .wp-block-woocommerce-product-template .wc-block-components-product-price { text-align: left; } /* 3. The catalog sorting control is a bare browser