@charset "UTF-8"; /*! * plase.net — design system, compiled for the Storefront child theme. * * Source of truth: the "plase.net Design System" project (Claude Design). * Tokens below are copied verbatim from tokens/*.css; the component layer maps them * onto the DOM WooCommerce and Storefront actually emit. * * Mobile-first. ONE breakpoint at 769px — the 2013 theme had exactly one and * resisting the urge to add more is part of the discipline. * * Contents — numbered in the order the layers were added; the lettered * sections were inserted later, against the real markup. * 1 Tokens 19a Page rhythm * 2 Base 19b Footer widget region * 3 Layout 19c Single product, tabs, reviews * 4 Header, search, cart 19d Page layout — sidebar or not * 5 Navigation 19e Sticky add-to-cart * 6 Buttons 19f Notices * 7 Product cards (7a lockup, 20 Form fields * 7b button, 7c heading + panel) 21 Cart * 8 Trust strip, category tiles 22 Checkout * (8b testimonial) 23 Header search * 9 Category / archive 24 Header — Superstore arrangement * 10 Single product + buy panel 25 Badge * 11 Reviews + testimonials 26 Account * 12 Footer 27 Social login * 13 Motion 28 Content pages, legacy shortcodes * 14 Existing theme markup 29 Contact * 15 Dropping Font Awesome 30 Blog * 16 The board 31 Search + 404 * 17 Fixes against the real markup 32 Footer payment marks * 18 Measured fixes * 19 Navigation contrast */ /* ============================================================ 1 TOKENS ============================================================ */ :root{ /* Blue. Set by hand 44x in custom.css over the theme's stock cyan. Prices, links, nav. */ --blue-050:#e6f0f6; --blue-100:#cfe2ed; --blue-500:#1a7bb0; --blue-600:#006599; --blue-700:#004f78; /* Orange. Reserved for offers, cart and stars. Never the default action colour. */ --orange-050:#fdf1e9; --orange-100:#fbdcc7; --orange-500:#f37324; --orange-600:#e26213; --orange-700:#d15102; /* Slate. Nav, footer, buttons — and the darkest text. */ --slate-200:#adb9bc; --slate-300:#9ca8ab; --slate-400:#697578; --slate-500:#586467; --slate-600:#4d5e61; --slate-800:#364245; --slate-900:#253134; /* Neutrals. Exact values from the theme, not rounded. */ --white:#fff; --paper:#f8f8f8; --grey-025:#f3f3f3; --grey-050:#efefef; --grey-100:#e7e7e7; --grey-150:#e9e9e9; --grey-300:#c5c5c5; --ink:#3e3e3e; --ink-strong:#253134; --ink-struck:#3d3d3d; --green-600:#89b93f; --red-600:#e01c1f; --red-700:#cf0b0e; /* Logo-only red. Never use it on an interface. */ --brand-red:#db1414; --surface-page:var(--paper); --surface-card:var(--white); --surface-sunken:var(--grey-025); --surface-band:var(--grey-050); --surface-dark:var(--slate-800); --surface-darker:var(--slate-900); --text-body:var(--ink); --text-strong:var(--ink-strong); --text-heading:var(--slate-900); --text-muted:var(--slate-400); --text-quiet:var(--slate-500); --text-inverse:var(--paper); --text-link:var(--blue-600); --text-link-hover:var(--blue-700); --text-struck:var(--ink-struck); --border-rule:var(--grey-150); --border-input:var(--grey-100); --border-input-hover:#d6d6d6; --border-strong:rgba(0,0,0,.075); /* THE 2018 SPLIT: blue carries ordinary prices, orange is held back for real offers. */ --price-bg:var(--blue-600); --price-fold:var(--blue-700); --price-sale-bg:var(--orange-500); --price-sale-fold:var(--orange-700); --sale-badge:var(--orange-600); --action-bg:var(--slate-800); --action-fg:var(--paper); --action-bg-hover:var(--orange-500); --action-bg-active:var(--orange-700); --action-quiet-bg:var(--blue-600); --action-quiet-bg-hover:var(--blue-500); --focus-ring:var(--blue-600); --star-fill:var(--orange-500); --star-empty:var(--slate-200); --stock-ok:var(--green-600); --stock-out:var(--red-600); --field-valid-border:#a1c962; --field-valid-bg:#f5f9ee; --field-error-border:#e84749; --field-error-bg:#fceaea; /* Type. One family for language, one for numbers. */ --font-core:"IBM Plex Sans","Helvetica Neue",Helvetica,sans-serif; --font-spec:"IBM Plex Mono",ui-monospace,Menlo,monospace; /* Body stays at 16 px; the steps above it are a gentle major-third ladder (18 / 20 / 24 / 28 / 34 / 40). The golden-ratio ladder that preceded it put a 42 px h1 on "Rezultatele căutării" and a 33 px h2 on every section — Mihai, 2026-09-16: "title of pages font is waaay too big". */ --text-xs:.764rem; --text-sm:.857rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.75rem; --text-3xl:2.125rem; --text-4xl:2.5rem; --weight-body:300; --weight-normal:400; --weight-medium:500; --weight-semi:600; --weight-strong:700; --leading-body:1.618; --leading-snug:1.35; --leading-tight:1.15; --leading-none:1; --tracking-tight:-.02em; --tracking-normal:0; --tracking-spec:.14em; --numeric-tabular:tabular-nums; --type-body:var(--weight-body) var(--text-base)/var(--leading-body) var(--font-core); --type-lede:var(--weight-body) var(--text-md)/var(--leading-body) var(--font-core); --type-small:var(--weight-body) var(--text-sm)/var(--leading-body) var(--font-core); /* h1 28 px, h2 24 px, h3 20 px on desktop; h1 drops to 24 px on phones (end of file). */ --type-h1:var(--weight-body) var(--text-2xl)/var(--leading-tight) var(--font-core); --type-h2:var(--weight-body) var(--text-xl)/var(--leading-tight) var(--font-core); --type-h3:var(--weight-strong) var(--text-lg)/var(--leading-snug) var(--font-core); --type-h4:var(--weight-strong) var(--text-base)/var(--leading-snug) var(--font-core); --type-link:var(--weight-strong) var(--text-base)/var(--leading-body) var(--font-core); --type-button:var(--weight-strong) var(--text-sm)/var(--leading-body) var(--font-core); --type-spec:var(--weight-medium) var(--text-xs)/var(--leading-none) var(--font-spec); --type-price:var(--weight-strong) var(--text-base)/var(--leading-body) var(--font-core); /* Space. Every measure is a power of the golden ratio. */ --space-1:.236rem; --space-2:.382rem; --space-3:.618rem; --space-4:1rem; --space-5:1.618rem; --space-6:2.618rem; --space-7:3.631rem; --space-8:5.874rem; --radius-xs:.236rem; --radius-sm:.3rem; --radius-md:.382rem; --radius-round:100%; --border-hair:1px; --border-rule-w:.202em; --border-accent-w:3px; --container:66.5rem; --gutter:var(--space-4); /* One elevation, applied without exception. */ --shadow-card:0 1px 2px rgba(0,0,0,.075),0 1px 7px rgba(0,0,0,.15); --shadow-lift:0 3px 10px rgba(0,0,0,.18); --shadow-ribbon:0 1px 3px rgba(0,0,0,.25); --focus-ring-width:2px; --focus-ring-offset:3px; /* The ground is a net. Gradients, never a PNG. */ --net-line:var(--grey-050); --net-pitch:6px; --net-hair:1px; --net-lattice: repeating-linear-gradient(45deg,var(--net-line) 0 var(--net-hair),transparent var(--net-hair) var(--net-pitch)), repeating-linear-gradient(-45deg,var(--net-line) 0 var(--net-hair),transparent var(--net-hair) var(--net-pitch)); --net-lattice-coarse: repeating-linear-gradient(45deg,var(--border-rule) 0 1px,transparent 1px 9px), repeating-linear-gradient(-45deg,var(--border-rule) 0 1px,transparent 1px 9px); /* Alive on interaction, calm when idle. */ --ease-overshoot:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:ease-in-out; --dur-instant:80ms; --dur-fast:150ms; --dur-base:250ms; --dur-enter:320ms; --dur-image:350ms; --stagger:45ms; --lift-y:-1px; } /* ============================================================ 2 BASE ============================================================ */ body.plasenet{ background-color:var(--surface-page); background-image:var(--net-lattice); color:var(--text-body); font:var(--type-body); text-wrap:pretty; } /* NO global -webkit-font-smoothing:antialiased. typography.css is explicit that the light body weight is the character and must not be normalised up to 400 — so the body stays at 300. But `antialiased` turns off macOS subpixel rendering, which thins every glyph, and at 300 on a near-white ground that reads as washed out. Grayscale smoothing belongs on light text over DARK panels, not on the body copy; it is kept on the buttons and the dark bands where it earns its keep. */ .plasenet h1,.plasenet h2,.plasenet h3,.plasenet h4,.plasenet h5,.plasenet h6{ color:var(--text-heading);font-family:var(--font-core);text-wrap:balance;margin:0 0 var(--space-3); } /* Light headings against heavy links — the owner overrode h1 to 300 on purpose. */ .plasenet h1{font:var(--type-h1);letter-spacing:var(--tracking-tight)} .plasenet h2{font:var(--type-h2);letter-spacing:var(--tracking-tight)} .plasenet h3{font:var(--type-h3)} .plasenet h4{font:var(--type-h4)} .plasenet a{color:var(--text-link);font-weight:var(--weight-strong);text-decoration:none} .plasenet a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px} .plasenet h1 a,.plasenet h2 a,.plasenet h3 a,.plasenet h4 a{color:inherit} .plasenet h1 a:hover,.plasenet h2 a:hover,.plasenet h3 a:hover,.plasenet h4 a:hover{color:var(--text-link)} .plasenet del{color:var(--text-struck);text-decoration:line-through;opacity:1} .plasenet ins{text-decoration:none;background:transparent} .plasenet img{max-width:100%;height:auto} .plasenet :focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)} /* The spec voice: units, dimensions, codes, eyebrows. Never running prose. */ .plasenet .spec,.psn-spec{ font:var(--type-spec);letter-spacing:var(--tracking-spec); text-transform:uppercase;font-variant-numeric:var(--numeric-tabular); } .plasenet .tnum,.plasenet .price,.plasenet .amount,.plasenet .woocommerce-Price-amount{ font-variant-numeric:var(--numeric-tabular); } /* ============================================================ 3 LAYOUT ============================================================ */ .plasenet .col-full{max-width:var(--container);padding:0 var(--gutter)} /* Storefront also gives .col-full a 1.42em side MARGIN on phones, which on top of the gutter left 38px of paper each side of a 390px screen — more than a tenth of the width. The gutter alone is the page edge. */ @media (max-width:768px){.plasenet .col-full{margin-left:0;margin-right:0}} .plasenet .site-content{padding-top:var(--space-5)} .plasenet .site-main{margin-bottom:var(--space-5)} /* WooCommerce gives the product grid a 2.6 em bottom margin; inside the up-sells/related section it only pushed the footer away. */ .plasenet .up-sells ul.products,.plasenet .related ul.products{margin-bottom:0} /* At most two background colours on a page: the paper ground and one band. */ .plasenet .psn-band{background:var(--surface-band);padding:var(--space-6) 0;margin:var(--space-6) 0} /* Surfaces are opaque so the net ground stays behind them. No blur, no glass. */ .plasenet .psn-card, .plasenet .site-header, .plasenet ul.products li.product, .plasenet .widget{ background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); border:0; } /* Sub-sections inside a card are divided by a chunky .202em rule, not a 1px grey line. */ .plasenet .psn-rule{border-bottom:var(--border-rule-w) solid var(--border-strong)} /* ============================================================ 4 HEADER, SEARCH, CART The header is a white card; the slate nav sits INSIDE it at its foot. ============================================================ */ .plasenet .site-header{ background-color:var(--surface-card); border-bottom:0; margin:var(--space-4) auto var(--space-5); max-width:var(--container); padding:var(--space-4) 0 0; } .plasenet .site-header .col-full{padding:0 var(--space-4)} .plasenet .site-branding{margin-bottom:var(--space-3);float:none;width:auto} .plasenet .site-branding .custom-logo-link img, .plasenet .site-branding img{max-width:200px;height:auto} .plasenet .site-title,.plasenet .site-description{margin:0} /* Tagline lockup: uppercase, letterspaced, spec voice, behind a hairline rule. */ .plasenet .psn-tagline{ display:none;font:var(--type-spec);letter-spacing:.16em;text-transform:uppercase; color:var(--slate-600);line-height:1.5; border-left:var(--border-hair) solid var(--border-rule);padding-left:var(--space-4); } .plasenet .psn-brand{display:flex;align-items:center;gap:var(--space-4)} /* Phone, live and tappable — out of the logo PNG at last. Trade buyers phone. */ .plasenet .psn-phone{ display:inline-flex;align-items:center;gap:.4em; font:var(--type-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase; color:var(--slate-600);white-space:nowrap; } .plasenet .psn-phone:hover{color:var(--blue-600);text-decoration:none} .plasenet .psn-phone strong{font-size:1.15em;letter-spacing:.06em} .plasenet .site-search{margin:0 0 var(--space-3);width:auto;float:none} .plasenet .site-search .widget_product_search form, .plasenet .site-search form{margin:0} .plasenet .site-search input[type=search], .plasenet .site-search input[type=text]{ background:rgba(0,0,0,.025);border:var(--border-hair) solid var(--border-input); border-radius:var(--radius-xs);box-shadow:none; padding:.53em .857em;font:var(--type-body);color:var(--text-body);width:100%; } .plasenet .site-search input[type=search]:hover{border-color:var(--border-input-hover)} .plasenet .site-header-cart{margin:0 0 var(--space-4);float:none;width:auto;list-style:none;padding:0} .plasenet .site-header-cart .cart-contents{ display:inline-flex;align-items:center;gap:.5em; background:var(--slate-800);color:var(--paper); padding:.53em 1.1em;border-radius:var(--radius-sm); font:var(--type-button);text-decoration:none; transition:background-color var(--dur-fast) var(--ease-out); } .plasenet .site-header-cart .cart-contents:hover{background:var(--orange-500);color:#fff;text-decoration:none} /* The cart count chip is one of the few things orange is allowed to carry. */ .plasenet .site-header-cart .count, .plasenet .site-header-cart .cart-contents .count{ background:var(--orange-500);color:#fff;border-radius:var(--radius-round); min-width:1.7em;height:1.7em;display:inline-flex;align-items:center;justify-content:center; font:var(--type-spec);letter-spacing:0;padding:0 .35em; } .plasenet .site-header-cart .cart-contents:hover .count{background:var(--orange-600)} @media (min-width:769px){ .plasenet .site-header{padding:var(--space-5) 0 0} .plasenet .site-header .col-full{padding:0 var(--space-5)} .plasenet .psn-header-grid{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-5); } .plasenet .psn-tagline{display:block} .plasenet .site-branding,.plasenet .site-search,.plasenet .site-header-cart{margin-bottom:0} } /* ============================================================ 5 NAVIGATION — slate bar inside the header card ============================================================ */ .plasenet .storefront-primary-navigation{ background:var(--slate-800);border-radius:var(--radius-md); margin:var(--space-4) 0 0;clear:both; } .plasenet .site-header .storefront-primary-navigation{margin-bottom:var(--space-4)} .plasenet .main-navigation ul.menu,.plasenet .main-navigation ul.nav-menu{margin:0;padding:0} .plasenet .main-navigation ul li a{ color:var(--paper);font-weight:var(--weight-strong);font-size:var(--text-sm); padding:.75em var(--space-4); transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); } .plasenet .main-navigation ul li:hover>a, .plasenet .main-navigation ul li.current-menu-item>a, .plasenet .main-navigation ul li.current_page_item>a{ background:var(--blue-600);color:#fff;text-decoration:none; } .plasenet .main-navigation ul.menu ul.sub-menu, .plasenet .main-navigation ul.nav-menu ul{ background:var(--surface-card);box-shadow:var(--shadow-card);border-radius:var(--radius-md); border:0;padding:var(--space-2) 0; } .plasenet .main-navigation ul ul li a{color:var(--text-body);font-weight:var(--weight-normal);padding:.5em var(--space-4)} .plasenet .main-navigation ul ul li:hover>a{background:var(--blue-050);color:var(--blue-600)} /* Mobile: the handheld toggle. Storefront shows this below 769px. */ .plasenet .menu-toggle{ background:transparent;color:var(--paper);border:0;border-radius:var(--radius-sm); font:var(--type-button);padding:.75em var(--space-4);width:100%;text-align:left; } .plasenet .menu-toggle:hover{background:var(--blue-600);color:#fff} .plasenet .handheld-navigation ul li a{color:var(--paper);padding:.6em var(--space-4)} /* ============================================================ 6 BUTTONS — slate at rest, orange on hover. Never orange at rest. ============================================================ */ .plasenet .button, .plasenet button, .plasenet input[type=submit], .plasenet .woocommerce a.button, .plasenet .woocommerce button.button, .plasenet .woocommerce input.button, .plasenet .woocommerce #respond input#submit{ display:inline-flex;align-items:center;justify-content:center;gap:.618em; background:var(--action-bg);color:var(--action-fg); border:0;border-radius:var(--radius-sm); font:var(--type-button);padding:.53em 1.1em;line-height:var(--leading-body); text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer; text-transform:none;letter-spacing:0; transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .plasenet .button:hover, .plasenet button:hover, .plasenet input[type=submit]:hover, .plasenet .woocommerce a.button:hover, .plasenet .woocommerce button.button:hover, .plasenet .woocommerce input.button:hover, .plasenet .woocommerce #respond input#submit:hover{ background:var(--action-bg-hover);color:#fff; transform:translateY(var(--lift-y));box-shadow:var(--shadow-lift);text-decoration:none; } .plasenet .button:active,.plasenet .woocommerce a.button:active,.plasenet .woocommerce button.button:active{ background:var(--action-bg-active);transform:none;box-shadow:none; transition-duration:var(--dur-instant); } /* alt = the single most important action on the page (add to cart, place order). */ .plasenet .woocommerce a.button.alt, .plasenet .woocommerce button.button.alt, .plasenet .woocommerce input.button.alt, .plasenet .woocommerce .single_add_to_cart_button{background:var(--blue-600)} .plasenet .woocommerce a.button.alt:hover, .plasenet .woocommerce button.button.alt:hover, .plasenet .woocommerce .single_add_to_cart_button:hover{background:var(--orange-500)} .plasenet .button:disabled,.plasenet .button.disabled{background:var(--slate-200);cursor:not-allowed} /* Nothing uses opacity as a hover state; hovers are always a colour change. */ .plasenet .psn-btn-ghost{ background:transparent;color:var(--text-link);border:1px solid var(--blue-600); } .plasenet .psn-btn-ghost:hover{background:var(--blue-050);color:var(--blue-700)} /* ============================================================ 7 PRODUCT CARDS — ProductCard.jsx, as markup we own These rules used to target Storefront's and WooCommerce's own class names (.woocommerce-loop-product__title, ul.products li.product .price). That made the stylesheet a running commentary on somebody else's markup: every rule needed a !important or a descendant chain to out-specify the parent theme, and the structure it described was not the board's. The card is now woocommerce/content-product.php, so the classes below are the component's own. The `.product` class stays on the
  • because WooCommerce's scripts need it — it is a hook, not a style. ============================================================ */ .plasenet ul.products{ display:grid;grid-template-columns:1fr;gap:var(--space-4); margin:0 0 var(--space-6);padding:0;list-style:none; } .plasenet ul.products::before,.plasenet ul.products::after{display:none} .plasenet .psn-card{ position:relative;display:flex;flex-direction:column; background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card); width:auto!important;float:none!important;margin:0!important;padding:0;clear:none!important; transition:box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out); /* `backwards`, NOT `both`. With `both` the animation keeps applying its own `to{transform:none}` after it finishes, and an animation outranks normal declarations — so the hover lift below could never take effect. */ animation:psn-enter var(--dur-enter) var(--ease-overshoot) calc(var(--psn-i,0) * var(--stagger)) backwards; } /* Storefront sets the card shadow from `.site-main ul.products li.product` (0,3,2). A plain `.plasenet .psn-card:hover` is (0,3,0) and loses, so the loop selector is carried here purely to win the tie. */ /* WooCommerce centres `ul.products li.product` (0,2,2). The component is left-aligned; the heading above it is what carries the centring. */ /* WooCommerce centres `ul.products li.product` (0,2,2) and clips it, which cut off the sale badge's deliberate overhang. The component is left-aligned and must not clip; the heading above the grid is what carries the centring. */ .plasenet ul.products li.psn-card{text-align:left;overflow:visible} /* Subcategory tiles share the products grid with the cards, so they need the same escape from Storefront's float/width rules. */ .plasenet ul.products li.psn-tile-item{ width:auto!important;float:none!important;margin:0!important;padding:0; clear:none!important;text-align:left;list-style:none; } .plasenet ul.products li.psn-tile-item::before{display:none} /* Keep the tile at its designed height. Stretching it to match a taller product card in the same row drags the label bar to the bottom of an empty white box, away from the photograph it belongs to. */ .plasenet ul.products li.psn-tile-item{align-self:start} .plasenet .psn-card:hover, .plasenet ul.products li.psn-card:hover{ box-shadow:var(--shadow-lift);transform:translateY(var(--lift-y)); } @keyframes psn-enter{ from{opacity:0;transform:translateY(8px) scale(.98)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ .plasenet .psn-card{animation:none} } /* --- thumbnail ---------------------------------------------------------- */ /* The clip lives on the IMAGE, not the thumb. The ribbon hangs .58em past the card's left edge with its fold beneath — put overflow:hidden on the thumb and both the overhang and the fold are cut off, which is what was shipping. */ .plasenet .psn-card-thumb{ position:relative; border-radius:var(--radius-md) var(--radius-md) 0 0; background-color:var(--surface-page);background-image:var(--net-lattice-coarse); } .plasenet .psn-card-image{ display:block;overflow:hidden; border-radius:var(--radius-md) var(--radius-md) 0 0; } .plasenet .psn-card .psn-card-image img{ display:block;margin:0;width:100%;aspect-ratio:4/3;object-fit:cover; transition:transform var(--dur-image) ease-in-out; } .plasenet .psn-card:hover .psn-card-image img{transform:scale(1.04)} /* --- title and categories ----------------------------------------------- */ .plasenet .psn-card-title{ font:var(--type-h4);color:var(--text-heading); padding:var(--space-4) var(--space-4) 0;margin:0; } .plasenet .psn-card-title a{color:inherit;text-decoration:none} .plasenet .psn-card-title a:hover{color:var(--text-link)} .plasenet .psn-card-cats{ list-style:none;margin:0;padding:.5em var(--space-4) var(--space-4); border-bottom:var(--border-rule-w) solid var(--border-strong); font:var(--type-small);color:var(--text-quiet); } .plasenet .psn-card-cats a{color:var(--text-quiet);font-weight:var(--weight-normal)} /* --- foot: action left, rating right ------------------------------------ */ .plasenet .psn-card-foot{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); padding:var(--space-4);margin-top:auto; } .plasenet .psn-card-foot .psn-btn{margin:0} /* --- PriceRibbon.jsx ---------------------------------------------------- Hung .58em off the card's left edge with a folded corner behind it: a paper tag pinned to the product, not a label floating on it. THE 2018 SPLIT — blue for ordinary prices, orange only for genuine reductions, slate for "we will quote you". */ .plasenet .psn-ribbon{ display:inline-block;margin:0;z-index:2; background:var(--price-bg);color:#fff; padding:.327em .857em;font:var(--type-price); border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 0; box-shadow:var(--shadow-ribbon);white-space:nowrap; } .plasenet .psn-ribbon--floating{position:absolute;bottom:var(--space-5);left:-.58em} .plasenet .psn-ribbon--sale{background:var(--price-sale-bg)} .plasenet .psn-ribbon--quote{background:var(--slate-600)} .plasenet .psn-ribbon-fold{ position:absolute;left:0;bottom:-.58em;display:block; border-style:solid;border-width:.618em 0 0 .618em; border-color:var(--price-fold) transparent transparent transparent; } .plasenet .psn-ribbon--sale .psn-ribbon-fold{border-top-color:var(--price-sale-fold)} .plasenet .psn-ribbon--quote .psn-ribbon-fold{border-top-color:var(--slate-800)} .plasenet .psn-ribbon-from{font-weight:var(--weight-normal)} .plasenet .psn-ribbon-unit{ font-family:var(--font-spec);font-weight:var(--weight-normal);font-size:.82em; margin-left:.3em;opacity:.92; } /* WooCommerce's own price markup lands inside the ribbon; it must not bring its own box with it. */ .plasenet .psn-ribbon .amount, .plasenet .psn-ribbon bdi{background:none;color:inherit;font:inherit} .plasenet .psn-ribbon del{color:rgba(255,255,255,.75);font-weight:var(--weight-normal);margin-right:.35em} .plasenet .psn-ribbon ins{color:#fff;font-weight:var(--weight-strong);text-decoration:none} /* --- SaleBadge.jsx ------------------------------------------------------ An eight-pointed star: a rounded square plus a 45deg copy, overhanging the corner. It pulses ONCE on mount, then holds still. The label is set in Plex SANS bold, not in spec mono — the earlier port used `var(--type-spec)` with uppercase and .14em tracking, which made "Ofertă!" 54px wide inside a 44px star. It overflowed its own badge and then got cut off by the card, so it read "FERTĂ!". */ .plasenet .psn-sale-badge,.plasenet .onsale{ position:absolute;top:.618em;left:-1em;z-index:99; min-height:auto;min-width:auto; display:grid;place-items:center; width:3.631em;height:3.631em;padding:0;margin:0; background:none;color:#fff; font-family:var(--font-core);font-weight:var(--weight-strong); font-size:var(--text-xs);line-height:1;letter-spacing:0;text-transform:none; text-align:center; animation:psn-salepulse 500ms var(--ease-overshoot) 1; } .plasenet .psn-sale-badge::before,.plasenet .onsale::before, .plasenet .psn-sale-badge::after,.plasenet .onsale::after{ content:"";position:absolute;inset:0;z-index:-1; background:var(--sale-badge);border-radius:var(--radius-md); } .plasenet .psn-sale-badge::after,.plasenet .onsale::after{transform:rotate(45deg)} @keyframes psn-salepulse{ from{transform:scale(.85)}70%{transform:scale(1.1)}to{transform:scale(1)} } /* --- StarRating.jsx — orange, one of its few permitted homes ------------ */ .plasenet .psn-stars{display:inline-flex;align-items:center;gap:.2em} .plasenet .star-rating{color:var(--star-fill);font-size:.85em;margin:0} .plasenet .star-rating::before{color:var(--star-empty)} .plasenet .psn-review-count{font:var(--type-spec);color:var(--text-muted)} /* Acasa-atelier.dc.html sizes the product grid `repeat(auto-fit,minmax(14rem,1fr))` with a space-5 gap — no breakpoint, no column count. At the 66.5rem container that resolves to four across, and it degrades on its own below that. minmax(14rem,0) rather than (14rem,1fr) so a long product name cannot widen its own column. */ .plasenet ul.products{ grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:var(--space-5); } .plasenet ul.products>*{min-width:0} /* ============================================================ 7a BRAND LOCKUP The original mark with the phone number removed, shipped as a theme asset. Sized to the board's 186px. ============================================================ */ .plasenet .site-branding{margin:0;padding:0;width:auto} /* Storefront's own rule is `.storefront-secondary-navigation.woocommerce-active .site-header .site-branding` — four classes, so anything shorter loses. Both of those classes live on alongside .plasenet, hence the compound. */ .plasenet.woocommerce-active .site-header .site-branding, .plasenet.storefront-secondary-navigation .site-header .site-branding{ margin:0;padding:0;width:auto;max-width:none; } .plasenet .site-title,.plasenet .site-branding .beta{margin:0;padding:0;font-size:inherit;line-height:1} .plasenet .site-title a,.plasenet .site-branding a{text-decoration:none;display:block} .plasenet .site-title a:hover{text-decoration:none} .plasenet img.psn-logo{display:block;width:186px;height:auto;max-width:100%} /* ============================================================ 7b BUTTON — Button.jsx Slate at rest, orange on hover: the old site's "orange takeover", re-timed to 150ms and stopped. Orange is never the resting state of an ordinary button. ============================================================ */ .plasenet .psn-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.618em; font:var(--type-button); background:var(--action-bg);color:var(--action-fg); border:0;border-radius:var(--radius-sm); line-height:var(--leading-body);text-align:center;text-decoration:none; white-space:nowrap;cursor:pointer;-webkit-font-smoothing:antialiased;appearance:none; transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .plasenet .psn-btn--sm{font-size:var(--text-xs);padding:.45em 1em} .plasenet .psn-btn--md{font-size:var(--text-sm);padding:.53em 1.1em} .plasenet .psn-btn--lg{font-size:var(--text-lg);padding:.53em 1.1em} .plasenet .psn-btn--block{display:flex;width:100%} .plasenet .psn-btn:hover,.plasenet .psn-btn:focus{text-decoration:none} .plasenet .psn-btn:hover{background:var(--action-bg-hover);color:var(--action-fg);transform:translateY(var(--lift-y));box-shadow:var(--shadow-lift)} .plasenet .psn-btn:active{background:var(--action-bg-active);transform:none;box-shadow:none} .plasenet .psn-btn[disabled]{background:var(--slate-200);color:var(--white);cursor:not-allowed;transform:none;box-shadow:none} .plasenet .psn-btn--accent{background:var(--orange-500);color:#fff} .plasenet .psn-btn--accent:hover{background:var(--orange-600)} .plasenet .psn-btn--accent:active{background:var(--orange-700)} .plasenet .psn-btn--quiet{background:var(--blue-600)} .plasenet .psn-btn--quiet:hover{background:var(--blue-500)} .plasenet .psn-btn--quiet:active{background:var(--blue-700)} .plasenet .psn-btn--ghost{background:transparent;color:var(--text-link);border:1px solid var(--blue-600)} .plasenet .psn-btn--ghost:hover{background:var(--blue-050);color:var(--text-link)} .plasenet .psn-btn--ghost:active{background:var(--blue-100)} /* ============================================================ 7c SECTION HEADING + PANEL — SectionHeading.jsx, Panel.jsx ============================================================ */ .plasenet .psn-heading{ display:flex;flex-direction:column;gap:var(--space-2); margin-bottom:var(--space-5); } .plasenet .psn-heading--center{align-items:center;text-align:center} .plasenet .psn-heading--start{align-items:flex-start;text-align:left} .plasenet .psn-heading-title{ font:var(--type-h2);letter-spacing:var(--tracking-tight); color:var(--text-heading);margin:0; } .plasenet .psn-eyebrow{ font:var(--type-spec);letter-spacing:var(--tracking-spec); text-transform:uppercase;color:var(--blue-600); } .plasenet .psn-panel{ background:var(--surface-card);border-radius:var(--radius-md); box-shadow:var(--shadow-card);padding:var(--space-5);color:var(--text-body); } .plasenet .psn-panel--sunken{background:var(--surface-sunken)} .plasenet .psn-panel--band{background:var(--surface-band)} .plasenet .psn-panel--flush{padding:0} .plasenet .psn-panel-head{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4); margin-bottom:var(--space-4);padding-bottom:var(--space-3); border-bottom:var(--border-rule-w) solid var(--border-strong); } .plasenet .psn-panel--flush .psn-panel-head{padding:var(--space-5) var(--space-5) var(--space-3)} .plasenet .psn-panel-title{font:var(--type-h4);margin:0;color:var(--text-heading)} .plasenet .psn-heading-action,.plasenet .psn-panel-action{font:var(--type-small);white-space:nowrap} /* ============================================================ 8 TRUST STRIP + CATEGORY TILES — routing four unlike audiences ============================================================ */ /* --- TrustStrip.jsx ----------------------------------------------------- Four claims on a band: centred icon, bold title, quiet detail. The detail used to be set in mono uppercase spec type, which is the voice reserved for measurements — it made "din Galați, din 2011" read like a part code. */ .plasenet .psn-trust{ display:grid;grid-template-columns:1fr;gap:var(--space-5); background:var(--surface-band);border-radius:var(--radius-md); padding:var(--space-5);margin:0 0 var(--space-6); } .plasenet .psn-trust-item{text-align:center} .plasenet .psn-trust-icon{display:block;line-height:0;margin-bottom:.5em} /* These icons are mixed: the Romania outline is drawn with fill, the truck, star and case with stroke. Forcing both turns the stroked three into solid blobs, so set `color` and let each SVG's own currentColor resolve. */ .plasenet .psn-trust-icon svg{ width:1.618rem;height:1.618rem;display:inline-block;color:var(--blue-600); } .plasenet .psn-trust-title{ font-weight:var(--weight-strong);font-size:var(--text-sm);color:var(--text-strong); } .plasenet .psn-trust-detail{font:var(--type-small);color:var(--text-muted)} @media (min-width:769px){ .plasenet .psn-trust{grid-template-columns:repeat(var(--psn-trust-cols,4),1fr)} } /* --- CategoryTile.jsx --------------------------------------------------- A photograph with a BLUE label bar over its lower half. The first pass drew these as dark slate cards under a full-height gradient scrim with the title at the bottom. That is a different component: it buries the photograph and it spends slate where the system spends blue. The bar was blue in 2018 and blue is where it belongs — CategoryTile.jsx is explicit about it. */ .plasenet .psn-tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:var(--space-4);list-style:none;margin:0 0 var(--space-6);padding:0; } .plasenet .psn-tiles>*{min-width:0} .plasenet .psn-tile{ position:relative;display:block;overflow:hidden;text-decoration:none; border-radius:var(--radius-md);box-shadow:var(--shadow-card); background:var(--surface-card); transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); } .plasenet .psn-tile:hover{transform:translateY(var(--lift-y));box-shadow:var(--shadow-lift);text-decoration:none} .plasenet .psn-tile-photo{ display:block;height:9.5rem; background-color:var(--surface-page);background-image:var(--net-lattice-coarse); background-size:cover;background-position:center; transition:transform var(--dur-image) ease-in-out; } .plasenet .psn-tile:hover .psn-tile-photo{transform:scale(1.04)} /* The bar is anchored to the bottom, so its TOP edge moves with the length of the name. The board's own data is one word per tile ("Sport", "Pescuit"); ours carries the real taxonomy — "Construcţii şi amenajări interioare" — and the row came out ragged, every bar starting at a different height. A minimum of two lines squares them up without truncating anything. */ .plasenet .psn-tile-label{ position:absolute;left:0;right:0;bottom:0; display:flex;align-items:center; min-height:calc(2 * var(--leading-snug) * 1em + 2 * var(--space-3)); padding:var(--space-3) var(--space-4); background:var(--blue-600);color:#fff;font:var(--type-h4); transition:background-color var(--dur-fast) var(--ease-out); } .plasenet .psn-tile:hover .psn-tile-label{background:var(--blue-500)} .plasenet .psn-tile-name{display:block} .plasenet .psn-tile-count{font-weight:var(--weight-normal);opacity:.85} /* With a description the bar sits at the 55% line and the text runs beneath. */ .plasenet .psn-tile--described .psn-tile-label{top:55%;bottom:auto} .plasenet .psn-tile-desc{ display:block;margin:0; padding:calc(var(--space-6) + var(--space-3)) var(--space-4) var(--space-4); font:var(--type-small);color:var(--text-body); } @media (min-width:769px){ } /* ============================================================ 8b TESTIMONIAL — Testimonial.jsx A rated review, not a pull quote. The first pass rendered a bare
    with a portrait, which loses the two things the board leads with: the stars, and which product is being reviewed. ============================================================ */ .plasenet .psn-testimonial{ display:grid;grid-template-columns:1fr;gap:var(--space-4); background:var(--surface-card);border-radius:var(--radius-md); box-shadow:var(--shadow-card);padding:var(--space-5); } .plasenet .psn-testimonial--imaged{grid-template-columns:6.5rem 1fr} .plasenet .psn-testimonial-photo{ height:6.5rem;border-radius:var(--radius-md); background-color:var(--surface-page);background-size:cover;background-position:center; } .plasenet .psn-testimonial-body{min-width:0} .plasenet .psn-testimonial-product{font:var(--type-h4);margin:.382em 0 0} .plasenet .psn-testimonial-price{font-weight:var(--weight-body);color:var(--text-quiet)} .plasenet .psn-testimonial-author{ margin:0 0 var(--space-3);font:var(--type-small);color:var(--text-muted); } .plasenet .psn-testimonial-text{margin:0;font:var(--type-small);color:var(--text-body)} .plasenet .psn-testimonial-link{margin:var(--space-3) 0 0} /* --- The home hero: the one full-bleed image, the only gradient --------- */ .plasenet .psn-hero{ position:relative;border-radius:var(--radius-md);overflow:hidden; background:var(--slate-900);background-size:cover;background-position:center; min-height:23rem;display:grid;align-items:center; padding:var(--space-6) var(--space-4);margin-bottom:var(--space-5); box-shadow:var(--shadow-card); } /* The board's gradient has a third stop at 55% — it holds the text side dark for longer, then releases the photograph. Two stops washed the middle out. */ .plasenet .psn-hero::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(37,49,52,.9) 0%,rgba(37,49,52,.66) 55%,rgba(37,49,52,.25) 100%); } .plasenet .psn-hero>*{position:relative;color:var(--paper);max-width:36rem} .plasenet .psn-hero h1,.plasenet .psn-hero h2{color:#fff;margin-bottom:var(--space-3)} .plasenet .psn-hero .psn-eyebrow{ font:var(--type-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase; color:var(--orange-500);display:block;margin-bottom:var(--space-3); } @media (min-width:769px){.plasenet .psn-hero{padding:var(--space-7) var(--space-6)}} /* ============================================================ 9 CATEGORY / ARCHIVE ============================================================ */ .plasenet .woocommerce-products-header{margin-bottom:var(--space-4)} .plasenet .storefront-sorting,.plasenet .woocommerce-ordering,.plasenet .woocommerce-result-count{ font:var(--type-small);color:var(--text-quiet); } .plasenet .storefront-sorting{ background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card); padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4); } .plasenet select,.plasenet .woocommerce-ordering select{ background:var(--white);border:var(--border-hair) solid var(--border-input); border-radius:var(--radius-xs);padding:.4em .6em;font:var(--type-small);color:var(--text-body); } .plasenet #secondary .widget{padding:var(--space-4);margin-bottom:var(--space-4)} .plasenet #secondary .widget-title{font:var(--type-h4);margin-bottom:var(--space-3); padding-bottom:var(--space-3);border-bottom:var(--border-rule-w) solid var(--border-strong)} .plasenet #secondary .widget ul{list-style:none;margin:0;padding:0} .plasenet #secondary .widget ul li{padding:.35em 0;border-bottom:var(--border-hair) solid var(--border-rule)} .plasenet #secondary .widget ul li:last-child{border-bottom:0} .plasenet .woocommerce-pagination ul{border:0;display:flex;gap:var(--space-2);justify-content:center} .plasenet .woocommerce-pagination ul li{border:0} .plasenet .woocommerce-pagination a,.plasenet .woocommerce-pagination span{ background:var(--surface-card);box-shadow:var(--shadow-card);border-radius:var(--radius-md); padding:.4em .8em;font:var(--type-button);color:var(--text-link); } .plasenet .woocommerce-pagination .current{background:var(--blue-600);color:#fff} @media (min-width:769px){ .plasenet #secondary{width:15.5rem} } /* ============================================================ 10 SINGLE PRODUCT + BUY PANEL The calculator is the moment the business model becomes visible. Three real buying states: calculator, fixed price, quote-only. ============================================================ */ .plasenet .single-product div.product{position:relative} .plasenet .single-product .woocommerce-product-gallery{ background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card); padding:var(--space-3);margin-bottom:var(--space-4); } .plasenet .single-product .product_title{font:var(--type-h1);letter-spacing:var(--tracking-tight)} .plasenet .single-product div.product p.price, .plasenet .single-product div.product span.price{ color:var(--blue-600);font:var(--weight-strong) var(--text-xl)/1.2 var(--font-core); font-variant-numeric:var(--numeric-tabular); } .plasenet .single-product div.product p.price del{color:var(--text-struck);font-size:.7em;font-weight:var(--weight-normal)} .plasenet .single-product div.product p.price ins{color:var(--orange-600)} .plasenet .psn-unit-note{font:var(--type-spec);letter-spacing:var(--tracking-spec); text-transform:uppercase;color:var(--text-muted);display:block;margin-top:.3em} /* The buy panel — one card, whichever of the three states it is in. */ .plasenet .psn-buy{ background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card); padding:var(--space-4);margin-bottom:var(--space-4); } .plasenet .stock.in-stock{color:var(--stock-ok);font-weight:var(--weight-strong)} .plasenet .stock.out-of-stock{color:var(--stock-out)} /* ============================================================ 11 REVIEWS + TESTIMONIALS Rich on fishing pages, empty on sports pages — the empty state must be dignified rather than a hole. ============================================================ */ /* The Testimonial component itself is defined in section 8b. */ .plasenet .psn-empty{ background-color:var(--surface-sunken);background-image:var(--net-lattice-coarse); border-radius:var(--radius-md);padding:var(--space-5);text-align:center; color:var(--text-quiet);font:var(--type-small); } /* The product-page reviews live with the tabs, in section 19c. */ /* ============================================================ 12 FOOTER ============================================================ */ .plasenet .site-footer{ background:var(--surface-dark);color:var(--slate-300); margin-top:var(--space-5);padding:var(--space-5) 0; } .plasenet .site-footer a{color:var(--slate-300);font-weight:var(--weight-normal)} .plasenet .site-footer a:hover{color:var(--paper)} .plasenet .site-footer h1,.plasenet .site-footer h2,.plasenet .site-footer h3, .plasenet .site-footer h4,.plasenet .site-footer .widget-title{color:var(--paper)} .plasenet .site-footer .widget{background:transparent;box-shadow:none;border-radius:0;padding:0} .plasenet .site-info{ border-top:var(--border-hair) solid var(--slate-600); margin-top:var(--space-5);padding-top:var(--space-4); font:var(--type-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase; color:var(--slate-400); } .plasenet .psn-legal{font-family:var(--font-core);text-transform:none;letter-spacing:0;display:block;margin-top:.5em} /* ============================================================ 13 MOTION — alive on interaction, calm when idle ============================================================ */ @keyframes psn-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}} /* The card entrance and its stagger live in section 7, on --psn-i. */ /* The original code respected nothing. This one does. */ @media (prefers-reduced-motion:reduce){ .plasenet *,.plasenet *::before,.plasenet *::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .plasenet ul.products li.product:hover{transform:none} .plasenet ul.products li.product:hover a img{transform:none} } /* ============================================================ 14 EXISTING THEME MARKUP The child theme already emits a trust strip and a footer badge row. These are styled rather than replaced. ============================================================ */ .plasenet .plasenet-trust-signals{margin:var(--space-5) 0} .plasenet .trust-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)} .plasenet .trust-item{ display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; column-gap:var(--space-3);row-gap:0;align-items:center; background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card); padding:var(--space-3) var(--space-4); } .plasenet .trust-item .trust-icon{ grid-row:1/3;width:2em;height:2em;color:var(--blue-600); } /* "Producător român — din Galați, din 2011": the claim in the reading voice, the qualifier in the spec voice. Both concrete and checkable. */ .plasenet .trust-item strong{ font:var(--type-h4);color:var(--text-heading);align-self:end; } .plasenet .trust-item span{ font:var(--type-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase; color:var(--slate-600);align-self:start;padding-top:.35em; } @media (min-width:769px){ .plasenet .trust-grid{grid-template-columns:repeat(4,1fr)} } /* Footer info row + legal badges. */ .plasenet .site-info-inner{ display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start; } .plasenet .site-info-text{ font-family:var(--font-core);font-size:var(--text-sm);font-weight:var(--weight-body); text-transform:none;letter-spacing:0;line-height:var(--leading-body);color:var(--slate-300); } .plasenet .site-info-badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)} .plasenet .site-info-badges img{height:30px;width:auto} @media (min-width:769px){ .plasenet .site-info-inner{flex-direction:row;justify-content:space-between;align-items:center} } /* Made-to-measure cards say so before the click. */ .plasenet .psn-card--measured .psn-card-title::after{ content:"pe măsură";display:block;width:fit-content;margin:.5em 0 0; font:var(--type-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase; color:var(--blue-600);background:var(--blue-050); border-radius:var(--radius-xs);padding:.3em .5em; } /* ============================================================ 15 DROPPING FONT AWESOME Storefront enqueues Font Awesome Free 5.13 (80KB of CSS plus a ~78KB woff2) and its own templates use it for exactly four things: the star rating, the review star-picker, the notice icons and the password reveal. All four are redrawn here as inline SVG so 'storefront-icons' can be dequeued — see inc/plasenet-design.php. Every rule below must therefore also KILL the pseudo-element the FA glyph lived in, or it renders as tofu once the font is gone. ============================================================ */ /* --- Star rating --------------------------------------------------------- Orange is allowed here; it is one of its few permitted homes. */ :root{ --star-svg-full:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 20'%3E%3Cpath fill='%23f37324' d='M10.8 1l2.23 5.93 6.33.29-4.95 3.95 1.68 6.11-5.29-3.48-5.29 3.48 1.68-6.11L2.24 7.22l6.33-.29z'/%3E%3C/svg%3E"); --star-svg-empty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.6 20'%3E%3Cpath fill='%23adb9bc' d='M10.8 1l2.23 5.93 6.33.29-4.95 3.95 1.68 6.11-5.29-3.48-5.29 3.48 1.68-6.11L2.24 7.22l6.33-.29z'/%3E%3C/svg%3E"); } .plasenet .star-rating, .plasenet .woocommerce .star-rating{ position:relative;display:inline-block;overflow:hidden; width:5.4em;height:1em;line-height:1;font-size:.85em; background-image:var(--star-svg-empty); background-size:1.08em 1em;background-repeat:repeat-x; color:transparent; } .plasenet .star-rating::before, .plasenet .woocommerce .star-rating::before, .woocommerce .plasenet .star-rating::before{content:none;display:none} .plasenet .star-rating span, .plasenet .woocommerce .star-rating span{ position:absolute;top:0;left:0;height:1em;overflow:hidden;padding-top:0; background-image:var(--star-svg-full); background-size:1.08em 1em;background-repeat:repeat-x; text-indent:-9999px; } .plasenet .star-rating span::before, .plasenet .woocommerce .star-rating span::before, .woocommerce .plasenet .star-rating span::before{content:none;display:none} /* --- The star picker in the review form --------------------------------- */ .plasenet p.stars a{ position:relative;width:1.2em;height:1.2em;display:inline-block;text-indent:-9999px; background-image:var(--star-svg-empty);background-size:contain; background-repeat:no-repeat;background-position:center; } .plasenet p.stars a::before,.plasenet p.stars a::after{content:none} .plasenet p.stars a{transition:transform var(--dur-fast) var(--ease-overshoot)} .plasenet p.stars a:hover{transform:scale(1.15)} /* Chosen: everything up to the picked star is full, everything after empty. */ .plasenet p.stars.selected a{background-image:var(--star-svg-full)} .plasenet p.stars.selected a.active~a{background-image:var(--star-svg-empty)} /* Hovering previews a new choice and must beat the chosen state above, whose `a.active~a` is (0,4,3) — hence `.stars.stars`, a same-element repeat. */ .plasenet p.stars.stars:hover span a{background-image:var(--star-svg-full)} .plasenet p.stars.stars:hover span a:hover~a{background-image:var(--star-svg-empty)} /* --- Notices — see section 19f. The block that used to sit here drew a LEFT rail; Notice.jsx specifies a top edge. --------------------------------- */ /* --- Password reveal ----------------------------------------------------- */ .plasenet .show-password-input::after{content:none} /* :hover too — `.plasenet button:hover` resets the whole background shorthand. */ .plasenet .show-password-input,.plasenet .show-password-input:hover{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23697578'%3E%3Cpath d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10zm0-8a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:1.2em; } /* ============================================================ 16 THE BOARD — "Redesign plase.net — fluxul de cumpărare" Source: Redesign plase.net - board.dc.html (tura 1, 6 Sep 2026) and the three artboards it imports: Acasa-atelier, Categorie-pescuit, Produs (iepuri / prostovol / taliene). The artboards use @container queries because a canvas frame can never fire a viewport breakpoint. On a real site that constraint is gone, so these are @media at the system's single breakpoint, 769px. ============================================================ */ /* --- Brand red, entering the interface ---------------------------------- The design system reserved #DB1414 for the logo. The board spends it in two of the three ways the "roşu de marcă" study proposes: 3a the red thread (a 3px edge and the rule beside the tagline) and 3c the maker's seal (the tricolour stamp). It never touches a button, a link or a price. NOTE: brand red and the destructive red (#E01C1F) are the same colour to the eye — see the cart remove control at the end of this section. */ .plasenet{border-top:3px solid var(--brand-red)} /* --- Top utility bar ---------------------------------------------------- */ /* One line everywhere. On a phone: the number and "Transport gratuit > 300 lei"; the e-mail and the words "la comenzi" come back from tablet width up. Wraps to two centred lines only if a very narrow screen cannot hold it. */ .plasenet .psn-topbar{background:rgba(0,0,0,.035);font:var(--type-small);font-size:var(--text-xs)} .plasenet .psn-topbar-inner{ max-width:var(--container);margin:0 auto;padding:.2em var(--gutter); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--space-4); } .plasenet .psn-topbar ul{ display:flex;justify-content:center;flex-wrap:wrap; list-style:none;margin:0;padding:0; } .plasenet .psn-topbar li{padding:.35em 0} .plasenet .psn-topbar a{color:var(--slate-600);font-weight:var(--weight-normal);white-space:nowrap} .plasenet .psn-topbar a:hover{color:var(--blue-600)} .plasenet .psn-topbar svg{width:1em;height:1em;vertical-align:-.12em;margin-right:.35em} .plasenet .psn-topbar-mail,.plasenet .psn-topbar-long{display:none} /* The shipping promise is the one line of running text that carries the red. */ .plasenet .psn-topbar-notice{color:var(--brand-red);font-weight:var(--weight-strong);white-space:nowrap;padding:.35em 0} @media (min-width:769px){ .plasenet .psn-topbar{font-size:var(--text-sm)} .plasenet .psn-topbar-inner{padding:.5em var(--gutter);column-gap:var(--space-5)} .plasenet .psn-topbar-mail{display:list-item} .plasenet .psn-topbar-long{display:inline} .plasenet .psn-topbar li{padding:0 .6em 0 0} .plasenet .psn-topbar-notice{padding:0} } /* --- Header ------------------------------------------------------------- */ .plasenet .psn-header-grid{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5); } .plasenet .site-branding img.psn-logo{width:186px;max-width:100%} .plasenet .psn-tagline{ display:none; border-left:2px solid var(--brand-red); padding-left:var(--space-4);color:var(--slate-600);line-height:1.6; } /* The search is Storefront's `.site-search`. A `.psn-search` selector was also carried here for a while and matched nothing at all. */ /* Hamburger: 44px, the minimum comfortable touch target. */ .plasenet .psn-burger{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:0 0 auto; background:var(--slate-800);color:var(--paper);border:0; border-radius:var(--radius-sm);cursor:pointer;padding:0; transition:background var(--dur-fast) var(--ease-out); } .plasenet .psn-burger:hover{background:var(--orange-500)} .plasenet .psn-burger span{ display:block;width:18px;height:2px;background:currentColor; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor; } @media (min-width:769px){ .plasenet .psn-burger{display:none} .plasenet .psn-tagline{display:block} .plasenet .site-branding img,.plasenet .custom-logo{width:186px} .plasenet .psn-header-grid{gap:var(--space-5);padding:var(--space-5)} } /* The nav bar's first and last items square off against the bar's ends. */ .plasenet .main-navigation ul.menu>li:first-child>a{border-radius:var(--radius-md) 0 0 var(--radius-md)} .plasenet .main-navigation ul.menu>li:last-child>a{border-radius:0 var(--radius-md) var(--radius-md) 0} /* --- Hero -------------------------------------------------------------- The one full-bleed image on the site, and the only gradient in the system: a three-stop slate scrim so the text side stays legible over photography. */ .plasenet .psn-hero{ min-height:23rem;display:grid;align-items:center; padding:0;background-size:cover;background-position:center; } .plasenet .psn-hero::before{ background:linear-gradient(90deg,rgba(37,49,52,.9) 0%,rgba(37,49,52,.66) 55%,rgba(37,49,52,.25) 100%); } .plasenet .psn-hero-inner{ position:relative;padding:var(--space-6) var(--space-5);max-width:36rem; } .plasenet .psn-hero h1{color:var(--paper);margin:var(--space-3) 0;font-size:var(--text-2xl)} .plasenet .psn-hero p{color:var(--slate-200);font:var(--type-lede);margin-bottom:var(--space-5);max-width:30rem} .plasenet .psn-hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)} /* The hero is the one place an orange button rests, because it is the single most-wanted action on the page and it sits on a photograph. */ .plasenet .psn-hero .psn-btn-accent{background:var(--orange-500);color:#fff} .plasenet .psn-hero .psn-btn-accent:hover{background:var(--orange-600)} .plasenet .psn-hero .psn-btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--paper)} .plasenet .psn-hero .psn-btn-ghost:hover{background:rgba(248,248,248,.14);color:#fff} @media (min-width:769px){ .plasenet .psn-hero-inner{padding:var(--space-7) var(--space-6)} .plasenet .psn-hero h1{font-size:var(--text-4xl)} } /* --- Section headings --------------------------------------------------- */ .plasenet .psn-section{margin:var(--space-6) 0} .plasenet .psn-heading{margin-bottom:var(--space-4)} .plasenet .psn-heading .psn-eyebrow{ display:block;font:var(--type-spec);letter-spacing:var(--tracking-spec); text-transform:uppercase;color:var(--blue-600);margin-bottom:var(--space-2); } .plasenet .psn-heading h2{margin:0} /* --- The three promises: ţesute · croite · livrate ---------------------- */ .plasenet .psn-features{ display:grid;grid-template-columns:1fr;gap:var(--space-5); } .plasenet .psn-feature{ background:var(--surface-card);border-radius:var(--radius-md); box-shadow:var(--shadow-card);padding:var(--space-5); display:flex;flex-direction:column;gap:var(--space-3); } .plasenet .psn-feature svg{width:2.4rem;height:2.4rem;color:var(--slate-800);fill:currentColor} .plasenet .psn-feature h3{margin:0} .plasenet .psn-feature p{font:var(--type-small);margin:0;color:var(--text-body)} @media (min-width:769px){ .plasenet .psn-features{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))} } /* --- Category tiles ----------------------------------------------------- */ /* --- The promotions band ------------------------------------------------ At most two background colours on a page: the paper ground and one band. */ .plasenet .psn-band{ background:var(--surface-band); border-top:1px solid var(--border-rule);border-bottom:1px solid var(--border-rule); margin:var(--space-6) 0 0;padding:var(--space-6) 0; } .plasenet .psn-band .col-full{max-width:var(--container);margin:0 auto} /* --- Testimonials ------------------------------------------------------- */ .plasenet .psn-testimonials{ display:grid;grid-template-columns:1fr;gap:var(--space-5); } @media (min-width:769px){ .plasenet .psn-testimonials{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))} } /* --- The maker's seal --------------------------------------------------- Variant 3c: one red element per page, and it carries content — origin, which is exactly what a buyer avoiding imports is looking for. */ .plasenet .psn-seal{ display:inline-flex;align-items:center;gap:.5em; background:var(--brand-red);border-radius:var(--radius-md); padding:.5em .7em;align-self:flex-start; } .plasenet .psn-seal .spec{color:var(--paper)} .plasenet .psn-seal svg{border-radius:1px;flex:0 0 auto} .plasenet .psn-seal-outline{ background:transparent;border:2px solid var(--brand-red); flex-direction:column;gap:.4em; } .plasenet .psn-seal-outline .spec{color:var(--brand-red);line-height:1.4;text-align:center} /* --- Footer ------------------------------------------------------------- */ .plasenet .psn-footer-legal{ background:var(--surface-darker);color:var(--grey-050); } .plasenet .psn-footer-legal-inner{ max-width:var(--container);margin:0 auto;padding:var(--space-5) var(--gutter); display:grid;grid-template-columns:1fr;gap:var(--space-5); border-top:1px solid rgba(248,248,248,.14); } .plasenet .psn-footer-legal a{color:var(--paper);font-weight:var(--weight-normal)} /* «Setări cookie» is an action, so a button, dressed as its neighbouring links. */ .plasenet .psn-footer-legal .psn-footer-cookie-settings{ font:inherit;color:var(--paper);background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer; text-decoration:underline;text-underline-offset:.15em;align-self:flex-start; } .plasenet .psn-footer-legal .psn-footer-cookie-settings:hover{color:var(--orange-500)} .plasenet .psn-footer-legal strong{color:var(--paper)} /* AI transparency note (EU AI Act art. 50), beside the ANPC marks. */ /* `.psn-footer-badges>div` (wrap, centred) outranks a plain class, hence the child selector here. */ .plasenet .psn-footer-badges>.psn-ai-badge{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--space-2);max-width:28rem;margin-top:var(--space-4);font:var(--type-small);color:var(--slate-300);line-height:1.5} .plasenet .psn-ai-badge>span:last-child{flex:1 1 auto;min-width:0} /* The EU icon's artwork sits inside a padded square; the negative margins let the disc, not the box, align with the text. */ .plasenet .psn-footer-badges .psn-ai-badge img{flex:0 0 auto;width:2.75rem;height:2.75rem;margin:-.55rem 0 0 -.5rem} .plasenet .psn-footer-company{font:var(--type-small);line-height:1.7;display:flex;flex-direction:column} .plasenet .psn-footer-links{display:flex;flex-direction:column;gap:var(--space-2);font:var(--type-small)} .plasenet .psn-footer-badges{display:flex;flex-direction:column;gap:var(--space-4)} .plasenet .psn-footer-badges>div{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center} .plasenet .psn-footer-badges img{height:34px;width:auto} .plasenet .psn-footer-badges .psn-anpc-sal img{height:50px;width:201px;max-width:100%} .plasenet .psn-pay{ font:var(--type-spec);letter-spacing:var(--tracking-spec);text-transform:uppercase; color:var(--paper);border:1px solid rgba(248,248,248,.35); border-radius:var(--radius-xs);padding:.55em .75em; } .plasenet .psn-footer-copy{ max-width:var(--container);margin:0 auto; padding:0 var(--gutter) var(--space-5); font:var(--type-small);color:var(--grey-100); } @media (min-width:769px){ .plasenet .psn-footer-legal-inner{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))} } /* --- The cart remove control ------------------------------------------- The board raises this itself: once brand red is on the page, the round red delete button stops reading as "danger" and starts reading as a brand mark. Move the control to slate and keep the red on the glyph. */ .plasenet .woocommerce a.remove{ background:var(--slate-800);color:var(--red-600)!important; border-radius:var(--radius-round); } .plasenet .woocommerce a.remove:hover{ background:var(--slate-900);color:var(--red-700)!important; } /* ============================================================ 17 FIXES AGAINST THE REAL MARKUP Found by rendering the theme on staging rather than a harness. ============================================================ */ /* Storefront's cart is a