/* ========================================================================== R.E. Enterprise — theme styles Hand written, no build step. Colour tokens are injected from the admin settings in inc/enqueue.php, so every value below reads from a variable. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root{ --re-accent:#EBB716; --re-accent-dark:#C08F06; --re-accent-soft:rgba(235,183,22,.13); --re-accent-line:rgba(235,183,22,.4); --re-ink:#111111; --re-paper:#FFFFFF; --re-mist:#F5F5F3; --re-line:#E3E3DF; --re-muted:#6B6B66; --re-on-accent:#111111; --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --wrap:1220px; --gut:clamp(18px,4vw,40px); --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(17,17,17,.05),0 8px 26px -12px rgba(17,17,17,.16); --shadow-lg:0 20px 60px -24px rgba(17,17,17,.34); --ease:cubic-bezier(.22,.61,.36,1); --header-h:70px; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0; background:var(--re-paper); color:var(--re-ink); font-family:var(--body); font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* `clip` hides horizontal overflow WITHOUT turning into a scroll container — `hidden` does, and that is what stopped scroll-triggered animation measuring correctly on desktop while still working on phones. */ overflow-x:clip; } @supports not (overflow:clip){ body{overflow-x:hidden;} } img,svg,video{max-width:100%;height:auto;display:block;} h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.12;margin:0;} p{margin:0 0 1em;} a{color:inherit;text-decoration:none;} button,input,select,textarea{font:inherit;color:inherit;} button{cursor:pointer;background:none;border:0;padding:0;} ul,ol{margin:0;padding:0;list-style:none;} table{border-collapse:collapse;width:100%;} :focus-visible{outline:3px solid var(--re-accent);outline-offset:3px;border-radius:4px;} ::selection{background:var(--re-accent);color:var(--re-ink);} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--re-ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;} .skip-link:focus{left:0;} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;} [hidden]{display:none!important;} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);} .wrap--narrow{max-width:800px;} /* -------------------------------------------------------------------------- 3. Motion primitives Reveals only apply when has BOTH .js and .motion, which the inline head script adds. No JS or reduced-motion means content is simply visible. -------------------------------------------------------------------------- */ html.js.motion .reveal{opacity:0;transform:translate3d(0,22px,0);} html.js.motion .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);} body.motion-off .reveal{opacity:1!important;transform:none!important;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;} /* Scoped to :not(.motion) so the ?re-motion=1 testing override can still demonstrate the animation on a machine that has reduce-motion switched on. Without the override this always wins, which is the point. */ html:not(.motion) .reveal{opacity:1!important;transform:none!important;} html:not(.motion) .ticker__track{animation:none!important;} } /* -------------------------------------------------------------------------- 4. Buttons & small controls -------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.012em; padding:13px 22px;border-radius:var(--radius-sm);border:1.5px solid transparent; min-height:46px;position:relative;overflow:hidden;isolation:isolate; transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease); white-space:nowrap; } .btn .re-icon{transition:transform .28s var(--ease);flex:none;} .btn:hover .re-icon:last-child{transform:translateX(3px);} .btn:active{transform:translateY(1px) scale(.985);} .btn--solid{background:var(--re-accent);color:var(--re-on-accent);box-shadow:0 1px 0 rgba(17,17,17,.06);} .btn--solid:hover{background:var(--re-accent-dark);box-shadow:0 10px 24px -12px rgba(17,17,17,.5);} .btn--outline{border-color:var(--re-line);background:var(--re-paper);color:var(--re-ink);} .btn--outline:hover{border-color:var(--re-ink);background:var(--re-ink);color:#fff;} .btn--ghost{border-color:var(--re-line);color:var(--re-ink);} .btn--ghost:hover{background:var(--re-mist);} .btn--dark{background:var(--re-ink);color:#fff;} .btn--dark:hover{background:#000;box-shadow:0 10px 24px -14px rgba(17,17,17,.8);} .btn--ghost-light{border-color:rgba(255,255,255,.28);color:#fff;} .btn--ghost-light:hover{background:#fff;color:var(--re-ink);border-color:#fff;} .btn--sm{padding:9px 15px;font-size:14px;min-height:40px;} .btn--lg{padding:16px 28px;font-size:16.5px;min-height:54px;} .btn--block{width:100%;} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:var(--radius-sm);color:inherit; transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); } .icon-btn:hover{background:var(--re-mist);} .icon-btn:active{transform:scale(.93);} .btn .count{ display:inline-flex;align-items:center;justify-content:center; min-width:21px;height:21px;padding:0 6px;margin-left:-2px; background:var(--re-ink);color:#fff;border-radius:11px; font-size:12px;font-weight:700;font-variant-numeric:tabular-nums; } .btn--solid .count{background:var(--re-ink);color:#fff;} .link-arrow{ display:inline-flex;align-items:center;gap:7px; font-family:var(--display);font-weight:700;font-size:15px; border-bottom:2px solid var(--re-accent);padding-bottom:2px; transition:gap .25s var(--ease),color .2s var(--ease); } .link-arrow:hover{gap:12px;color:var(--re-accent-dark);} .link-arrow--sm{font-size:14px;} /* -------------------------------------------------------------------------- 5. Structural devices — eyebrow and the measured rule The tick rule borrows from the millimetre markings on a caliper: this range is sold in 1/3/5 mm packers and 12 mm bearings, so measurement is the subject's own vocabulary rather than decoration. -------------------------------------------------------------------------- */ .eyebrow{ display:inline-block;font-family:var(--body);font-size:11.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--re-muted);margin-bottom:12px; } .eyebrow--light{color:var(--re-accent);} a.eyebrow:hover{color:var(--re-accent-dark);} .spec-rule{display:flex;align-items:flex-end;gap:0;height:14px;margin:26px 0 34px;border-bottom:1px solid var(--re-line);} .spec-rule span{flex:1;border-left:1px solid var(--re-line);height:5px;} .spec-rule span:nth-child(4n+1){height:12px;border-left-color:var(--re-accent);} /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ .topbar{background:var(--re-ink);color:rgba(255,255,255,.72);font-size:13.5px;} .topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;} .topbar__claim{display:flex;align-items:center;gap:8px;margin:0;} .topbar__claim .re-icon{color:var(--re-accent);} .topbar__contact{display:flex;gap:22px;} .topbar__contact a{display:flex;align-items:center;gap:7px;transition:color .2s var(--ease);} .topbar__contact a:hover{color:var(--re-accent);} .site-header{ position:sticky;top:0;z-index:80;background:var(--re-paper); border-bottom:1px solid var(--re-line); transition:box-shadow .3s var(--ease),transform .35s var(--ease); } .site-header.is-stuck{box-shadow:0 6px 24px -14px rgba(17,17,17,.32);} .site-header.is-hidden{transform:translateY(-100%);} .header__inner{display:flex;align-items:center;gap:20px;min-height:var(--header-h);} .brand{flex:none;display:block;} .brand img{width:auto;height:38px;object-fit:contain;transition:opacity .2s var(--ease);} .brand:hover img{opacity:.82;} .nav{margin-left:auto;} .nav__list{display:flex;align-items:center;gap:4px;} .nav__list a{ position:relative;display:block;padding:9px 13px;border-radius:var(--radius-sm); font-family:var(--display);font-weight:600;font-size:15px; transition:color .2s var(--ease),background-color .2s var(--ease); } .nav__list a::after{ content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px; background:var(--re-accent);transform:scaleX(0);transform-origin:left; transition:transform .3s var(--ease); } .nav__list a:hover::after,.nav__list .current-menu-item>a::after,.nav__list .current_page_parent>a::after{transform:scaleX(1);} .nav__list .current-menu-item>a{color:var(--re-ink);} .nav__foot{display:none;} /* Sub menus */ .nav__list .sub-menu{ position:absolute;top:100%;left:0;min-width:220px;padding:8px; background:var(--re-paper);border:1px solid var(--re-line);border-radius:var(--radius); box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .nav__list .menu-item-has-children{position:relative;} .nav__list .menu-item-has-children:hover>.sub-menu,.nav__list .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;} .nav__list .sub-menu a::after{display:none;} .nav__list .sub-menu a:hover{background:var(--re-mist);} .header__actions{display:flex;align-items:center;gap:9px;flex:none;} .header__brochure .re-icon{transition:transform .3s var(--ease);} .header__brochure:hover .re-icon{transform:translateY(2px);} .header__progress{ position:absolute;left:0;bottom:-1px;height:2px;width:100%; background:var(--re-accent);transform:scaleX(0);transform-origin:left; } /* Hamburger — three bars that fold into a cross */ .burger{display:none;width:44px;height:44px;border-radius:var(--radius-sm);align-items:center;justify-content:center;} .burger__box{position:relative;display:block;width:22px;height:15px;} .burger__box i{ position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--re-ink); transition:transform .34s var(--ease),opacity .2s var(--ease),width .34s var(--ease); } .burger__box i:nth-child(1){top:0;} .burger__box i:nth-child(2){top:6.5px;width:74%;} .burger__box i:nth-child(3){top:13px;} .burger[aria-expanded="true"] .burger__box i:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .burger[aria-expanded="true"] .burger__box i:nth-child(2){opacity:0;width:0;} .burger[aria-expanded="true"] .burger__box i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} .search-panel{border-bottom:1px solid var(--re-line);background:var(--re-mist);} .search-panel__form{display:flex;align-items:center;gap:12px;padding:16px 0;} .search-panel__form>.re-icon{color:var(--re-muted);flex:none;} .search-panel__form input{ flex:1;min-width:0;background:none;border:0;font-size:17px;padding:8px 0; font-family:var(--display);font-weight:600; } .search-panel__form input::placeholder{color:var(--re-muted);font-weight:400;font-family:var(--body);} .search-panel__form input:focus{outline:none;} .nav-scrim{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:70;backdrop-filter:blur(2px);} /* -------------------------------------------------------------------------- 7. Hero — video background The clip runs edge to edge behind the copy. A scrim weighted to the left keeps the text legible while leaving the right of the frame, where the work is actually happening, close to full brightness. -------------------------------------------------------------------------- */ .hero{ position:relative;isolation:isolate; display:flex;flex-direction:column; min-height:clamp(520px,76vh,720px); background:var(--re-ink);color:#fff;overflow:hidden; } .hero__bg{position:absolute;inset:0;z-index:0;background:var(--re-ink);} .hero__video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center; /* Painting the poster here as well means the frame is filled even in the moment between the poster attribute rendering and the video decoding. */ display:block; } /* Nothing in the video is interactive, and the controls must never appear. */ .hero__video::-webkit-media-controls{display:none!important;} .hero__video::-webkit-media-controls-enclosure{display:none!important;} .hero__scrim{ position:absolute;inset:0; background: linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.82) 34%,rgba(10,10,10,.42) 66%,rgba(10,10,10,.28) 100%), linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 26%,rgba(10,10,10,0) 62%,rgba(10,10,10,.72) 100%); } .hero--scrim-light .hero__scrim{ background: linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.64) 34%,rgba(10,10,10,.24) 66%,rgba(10,10,10,.12) 100%), linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,0) 26%,rgba(10,10,10,0) 62%,rgba(10,10,10,.6) 100%); } .hero--scrim-strong .hero__scrim{ background: linear-gradient(90deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.92) 40%,rgba(10,10,10,.66) 72%,rgba(10,10,10,.52) 100%), linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.14) 30%,rgba(10,10,10,.14) 58%,rgba(10,10,10,.82) 100%); } /* Grows to fill whatever is left above the facts bar and centres the copy in it, so the headline never floats with a dead band beneath it. */ .hero__inner{ position:relative;z-index:2;width:100%;flex:1 0 auto; display:flex;align-items:center; padding-block:clamp(44px,6vw,76px); } .hero__text{max-width:640px;} .hero__eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:#fff;} .hero__eyebrow::before{content:"";width:26px;height:2px;background:var(--re-accent);flex:none;} .hero__title{ font-size:clamp(34px,5vw,58px);line-height:1.06;margin-bottom:20px;color:#fff; text-wrap:balance; /* Keeps the type readable if a bright frame drifts under it mid-clip. */ text-shadow:0 2px 24px rgba(0,0,0,.34); } .hero__title em{font-style:normal;position:relative;display:inline-block;z-index:0;color:var(--re-ink);text-shadow:none;} /* A marker swipe behind the phrase, set very slightly off-square so it reads as something applied by hand rather than a rectangle. */ .hero__title em::before{ content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em; top:.17em;bottom:.09em;background:var(--re-accent); transform:skewX(-3deg) rotate(-.4deg); } .hero__lead{ font-size:clamp(16.5px,1.45vw,18px);color:rgba(255,255,255,.86); max-width:52ch;margin-bottom:30px;text-shadow:0 1px 14px rgba(0,0,0,.42); } .hero__actions{display:flex;flex-wrap:wrap;gap:12px;} /* Facts bar: a hard bottom edge for the section, so the video does not simply fade out into the next block. */ .hero__facts{ position:relative;z-index:2;margin-top:auto; background:rgba(10,10,10,.62); border-top:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .hero__facts-inner{ display:flex;align-items:center;justify-content:space-between;gap:22px; flex-wrap:wrap;padding-block:15px; } .hero__points{display:flex;flex-wrap:wrap;gap:9px 24px;font-size:14px;color:rgba(255,255,255,.82);} .hero__points li{display:flex;align-items:center;gap:8px;} .hero__points .re-icon{color:var(--re-accent);flex:none;} .hero__stat{display:flex;align-items:baseline;gap:9px;margin:0;} .hero__stat-num{ font-family:var(--display);font-size:24px;font-weight:800;line-height:1; letter-spacing:-.04em;color:var(--re-accent); } .hero__stat-label{font-size:13.5px;color:rgba(255,255,255,.68);} /* Pause control — WCAG 2.2.2. Deliberately quiet, but reachable and focusable. */ .hero__motion{ position:absolute;z-index:3; right:clamp(14px,3vw,26px);top:clamp(14px,3vw,24px); width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(10,10,10,.5);border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); } .hero__motion:hover{background:rgba(10,10,10,.78);border-color:#fff;transform:scale(1.06);} /* Two bars (pause) that collapse into a triangle (play) when stopped. */ .hero__motion-icon{position:relative;display:block;width:13px;height:13px;} .hero__motion-icon::before,.hero__motion-icon::after{ content:"";position:absolute;top:0;width:4px;height:13px;background:#fff;border-radius:1px; transition:all .25s var(--ease); } .hero__motion-icon::before{left:1px;} .hero__motion-icon::after{right:1px;} .hero__motion[aria-pressed="false"] .hero__motion-icon::before{ left:2px;width:0;height:0;border-radius:0;background:transparent; border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;border-left:11px solid #fff; } .hero__motion[aria-pressed="false"] .hero__motion-icon::after{opacity:0;} /* No video source resolved, or the visitor asked for less motion: the poster is doing the work, so the control has nothing to control. */ .hero.is-static .hero__motion{display:none;} /* -------------------------------------------------------------------------- 8. Ticker -------------------------------------------------------------------------- */ .ticker{overflow:hidden;background:var(--re-accent);color:var(--re-ink);border-block:1px solid rgba(17,17,17,.12);} .ticker__track{display:flex;width:max-content;animation:ticker 42s linear infinite;} .ticker__row{display:flex;align-items:center;gap:0;padding:11px 0;} .ticker__row b{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em;white-space:nowrap;} .ticker__row i{font-style:normal;padding:0 20px;opacity:.45;} .ticker:hover .ticker__track{animation-play-state:paused;} @keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* -------------------------------------------------------------------------- 9. Sections -------------------------------------------------------------------------- */ .section{padding-block:clamp(52px,7vw,92px);} .section--alt{background:var(--re-mist);} .section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:36px;flex-wrap:wrap;} .section__title{font-size:clamp(26px,3.4vw,40px);max-width:20ch;} .section__note{max-width:42ch;color:var(--re-muted);font-size:15px;margin:0;} /* Category grid */ .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;} .cat-card a{ display:flex;align-items:center;gap:15px;padding:16px;height:100%; background:var(--re-paper);border:1px solid var(--re-line);border-radius:var(--radius); transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .cat-card a:hover{border-color:var(--re-ink);transform:translateY(-3px);box-shadow:var(--shadow);} .cat-card__media{ flex:none;width:58px;height:58px;border-radius:var(--radius-sm);background:var(--re-mist); display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--re-muted); } .cat-card__media img{width:100%;height:100%;object-fit:cover;} .cat-card__body{flex:1;min-width:0;} .cat-card__name{display:block;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.25;} .cat-card__count{display:block;font-size:13px;color:var(--re-muted);margin-top:3px;} .cat-card__arrow{flex:none;color:var(--re-muted);transition:transform .3s var(--ease),color .2s var(--ease);} .cat-card a:hover .cat-card__arrow{transform:translateX(4px);color:var(--re-accent-dark);} /* -------------------------------------------------------------------------- 10. Product cards -------------------------------------------------------------------------- */ .p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;} .p-card{ display:flex;flex-direction:column;background:var(--re-paper); border:1px solid var(--re-line);border-radius:var(--radius);overflow:hidden; transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .p-card:hover{border-color:var(--re-ink);transform:translateY(-4px);box-shadow:var(--shadow);} .p-card__media{ position:relative;display:block;aspect-ratio:1;background:var(--re-mist);overflow:hidden; } .p-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);} .p-card:hover .p-card__media img{transform:scale(1.045);} .p-card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B9B9B2;} .p-card__flag{ position:absolute;top:10px;left:10px;background:var(--re-ink);color:#fff; font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:4px 9px;border-radius:20px; } .p-card__body{display:flex;flex-direction:column;gap:6px;padding:14px 15px 15px;flex:1;} .p-card__sku{ font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--re-muted); background:var(--re-mist);border-radius:4px;padding:2px 6px;align-self:flex-start; } .p-card__title{font-size:15.5px;line-height:1.28;letter-spacing:-.018em;} .p-card__title a{transition:color .2s var(--ease);} .p-card__title a:hover{color:var(--re-accent-dark);} .p-card__cat{font-size:13px;color:var(--re-muted);} .p-card__foot{margin-top:auto;padding-top:12px;} /* Quote toggle */ .btn--quote{width:100%;border:1.5px solid var(--re-line);background:var(--re-paper);color:var(--re-ink);} .btn--quote:hover{border-color:var(--re-ink);background:var(--re-ink);color:#fff;} .btn--quote .btn__icon--on{display:none;} .btn--quote.is-added{background:var(--re-accent);border-color:var(--re-accent);color:var(--re-on-accent);} .btn--quote.is-added .btn__icon--add{display:none;} .btn--quote.is-added .btn__icon--on{display:inline-flex;} .btn__icon{display:inline-flex;} .btn--quote.is-pulse{animation:pulse .42s var(--ease);} @keyframes pulse{0%{transform:scale(1);}45%{transform:scale(1.06);}100%{transform:scale(1);}} /* -------------------------------------------------------------------------- 11. Why / steps -------------------------------------------------------------------------- */ .why{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center;} .why__media{position:relative;border-radius:var(--radius);overflow:hidden;} .why__media img{width:100%;object-fit:cover;aspect-ratio:69/60;} .why__stamp{ position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:8px; background:var(--re-paper);border-radius:40px;padding:9px 16px;box-shadow:var(--shadow); font-family:var(--display);font-weight:700;font-size:14px; } .why__stamp .re-icon{color:var(--re-accent);fill:var(--re-accent);} .why__list{margin:26px 0 0;display:grid;gap:22px;} .why__list dt{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:17.5px;margin-bottom:7px;} .why__list dt .re-icon{ flex:none;color:var(--re-ink);background:var(--re-accent);border-radius:8px; padding:7px;width:34px;height:34px; } .why__list dd{margin:0;color:var(--re-muted);font-size:15.5px;padding-left:45px;} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--re-line);border:1px solid var(--re-line);border-radius:var(--radius);overflow:hidden;} .step{background:var(--re-paper);padding:26px 24px 30px;transition:background-color .25s var(--ease);} .step:hover{background:var(--re-mist);} .step__num{ display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em; color:var(--re-accent-dark);margin-bottom:14px; } .step__title{font-size:18px;margin-bottom:8px;} .step__text{color:var(--re-muted);font-size:15px;margin:0;} /* -------------------------------------------------------------------------- 12. Post cards -------------------------------------------------------------------------- */ .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;} .post-card{ display:flex;flex-direction:column;background:var(--re-paper);border:1px solid var(--re-line); border-radius:var(--radius);overflow:hidden; transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .post-card:hover{border-color:var(--re-ink);transform:translateY(-4px);box-shadow:var(--shadow);} .post-card__media{display:block;aspect-ratio:16/11;background:var(--re-mist);overflow:hidden;position:relative;} .post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);} .post-card:hover .post-card__media img{transform:scale(1.05);} .post-card__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B9B9B2;} .post-card__body{padding:18px 19px 20px;display:flex;flex-direction:column;gap:9px;flex:1;} .post-card__title{font-size:19px;line-height:1.26;} .post-card__excerpt{color:var(--re-muted);font-size:15px;margin:0;} .post-card__body .link-arrow{margin-top:auto;align-self:flex-start;} .post-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--re-muted);} .post-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;} /* -------------------------------------------------------------------------- 13. Subpage banner & breadcrumbs -------------------------------------------------------------------------- */ .banner{position:relative;background:var(--re-ink);color:#fff;overflow:hidden;padding-block:clamp(38px,5vw,62px);} .banner__grid{ position:absolute;inset:0;opacity:.42; background-image:linear-gradient(90deg,var(--re-accent-line) 1px,transparent 1px); background-size:52px 100%; mask-image:linear-gradient(90deg,#000,transparent 62%); -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%); } .banner .wrap{position:relative;} .banner__title{font-size:clamp(28px,4.2vw,46px);max-width:22ch;} .banner__sub{margin:14px 0 0;color:rgba(255,255,255,.72);max-width:60ch;font-size:16.5px;} .banner__rule{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--re-accent);} .crumbs{margin-bottom:16px;} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.6);} .crumbs li+li::before{content:"/";margin-right:8px;opacity:.5;} .crumbs a{transition:color .2s var(--ease);} .crumbs a:hover{color:var(--re-accent);} .crumbs [aria-current]{color:#fff;} .product__top .crumbs ol{color:var(--re-muted);} .product__top .crumbs [aria-current]{color:var(--re-ink);} .product__top .crumbs a:hover{color:var(--re-accent-dark);} /* -------------------------------------------------------------------------- 14. Catalogue -------------------------------------------------------------------------- */ .catalogue{display:grid;grid-template-columns:258px 1fr;gap:clamp(22px,3vw,44px);align-items:start;} .filters{position:sticky;top:calc(var(--header-h) + 16px);} .filters__toggle{display:none;} .filters__group{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--re-line);} .filters__group:last-child{border-bottom:0;} .filters__label{ display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--re-muted);margin-bottom:11px; } .filters__search,.quote-add__field{ display:flex;align-items:center;gap:9px;padding:0 12px; border:1.5px solid var(--re-line);border-radius:var(--radius-sm);background:var(--re-paper); transition:border-color .2s var(--ease); } .filters__search:focus-within,.quote-add__field:focus-within{border-color:var(--re-ink);} .filters__search .re-icon,.quote-add__field .re-icon{color:var(--re-muted);flex:none;} .filters__search input,.quote-add__field input{flex:1;min-width:0;border:0;background:none;padding:11px 0;font-size:15px;} .filters__search input:focus,.quote-add__field input:focus{outline:none;} .filters__hint{font-size:13px;color:var(--re-muted);margin:8px 0 0;} .filters__list li a{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:8px 11px;border-radius:var(--radius-sm);font-size:15px; transition:background-color .2s var(--ease),color .2s var(--ease); } .filters__list li a span{font-size:12.5px;color:var(--re-muted);font-variant-numeric:tabular-nums;} .filters__list li a:hover{background:var(--re-mist);} .filters__list li a.is-active{background:var(--re-ink);color:#fff;font-weight:600;} .filters__list li a.is-active span{color:var(--re-accent);} .filters select{ width:100%;padding:11px 12px;border:1.5px solid var(--re-line);border-radius:var(--radius-sm); background:var(--re-paper);font-size:15px;transition:border-color .2s var(--ease); } .filters select:focus{border-color:var(--re-ink);outline:none;} .check{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;} .check input{width:18px;height:18px;accent-color:var(--re-accent);cursor:pointer;} .filters__cta{background:var(--re-mist);border-radius:var(--radius);padding:16px;} .filters__cta p{font-size:14px;color:var(--re-muted);margin-bottom:11px;} .catalogue__bar{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px;} .catalogue__count{margin:0;font-size:15px;color:var(--re-muted);} .catalogue__count strong{color:var(--re-ink);font-family:var(--display);} .catalogue__hint{margin:0;font-size:14px;color:var(--re-muted);} .p-card.is-filtered{display:none;} /* -------------------------------------------------------------------------- 15. Single product -------------------------------------------------------------------------- */ .product__top{padding-block:clamp(24px,3vw,40px) clamp(30px,4vw,52px);} .product__layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,58px);align-items:start;} .product__figure{ position:relative;margin:0;border:1px solid var(--re-line);border-radius:var(--radius); overflow:hidden;background:var(--re-mist);aspect-ratio:1; } .product__figure img{width:100%;height:100%;object-fit:cover;} .product__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B9B9B2;} .product__flag{ position:absolute;top:14px;left:14px;font-size:11.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:20px; } .product__flag--ok{background:var(--re-accent);color:var(--re-ink);} .product__flag--wait{background:var(--re-ink);color:#fff;} .product__thumbs{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap;} .product__thumbs button{ border:1.5px solid var(--re-line);border-radius:var(--radius-sm);overflow:hidden; transition:border-color .2s var(--ease);width:72px;height:72px; } .product__thumbs button:hover,.product__thumbs button.is-active{border-color:var(--re-ink);} .product__thumbs img{width:100%;height:100%;object-fit:cover;} .product__title{font-size:clamp(27px,3.6vw,40px);margin-bottom:12px;} .product__sku{ display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px; background:var(--re-mist);border-radius:6px;padding:5px 10px;margin-bottom:16px; } .product__sku span{color:var(--re-muted);letter-spacing:.08em;font-size:11px;text-transform:uppercase;} .product__lead{font-size:17px;color:var(--re-muted);margin-bottom:22px;} .product__facts{display:grid;gap:0;border:1px solid var(--re-line);border-radius:var(--radius);overflow:hidden;margin-bottom:24px;} .product__facts li{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;font-size:15px;border-bottom:1px solid var(--re-line);} .product__facts li:last-child{border-bottom:0;} .product__facts span{color:var(--re-muted);} .product__buy{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;} .product__buy .btn--quote{width:auto;flex:1;min-width:200px;} .product__reassure{display:flex;gap:9px;font-size:14.5px;color:var(--re-muted);margin:0;} .product__reassure .re-icon{color:var(--re-accent-dark);flex:none;margin-top:3px;} .product__detail{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,54px);padding-bottom:clamp(40px,6vw,74px);align-items:start;} .product__specs-title{font-size:20px;margin-bottom:14px;} .spec-table{border:1px solid var(--re-line);border-radius:var(--radius);overflow:hidden;font-size:15px;} .spec-table th,.spec-table td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--re-line);} .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0;} .spec-table th{background:var(--re-mist);font-weight:600;color:var(--re-muted);width:45%;} /* -------------------------------------------------------------------------- 16. Prose (editor content) -------------------------------------------------------------------------- */ .prose{font-size:17px;} .prose>*+*{margin-top:1.05em;} .prose h2{font-size:clamp(22px,2.6vw,30px);margin-top:1.7em;} .prose h3{font-size:clamp(19px,2vw,23px);margin-top:1.5em;} .prose p{margin-bottom:0;} .prose .lead{font-size:19.5px;color:var(--re-muted);line-height:1.55;} .prose a{border-bottom:2px solid var(--re-accent);transition:color .2s var(--ease);} .prose a:hover{color:var(--re-accent-dark);} .prose ul,.prose ol{padding-left:1.25em;} .prose ul li{list-style:disc;margin-bottom:.4em;} .prose ol li{list-style:decimal;margin-bottom:.4em;} .prose img{border-radius:var(--radius);} .prose blockquote{ margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--re-accent); font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em; } .prose code{font-family:var(--mono);font-size:.9em;background:var(--re-mist);padding:2px 6px;border-radius:4px;} .prose hr{border:0;border-top:1px solid var(--re-line);margin:2em 0;} /* FAQ accordion — core

block, styled rather than scripted */ .prose .wp-block-details{ border:1px solid var(--re-line);border-radius:var(--radius);padding:0;margin-top:10px; background:var(--re-paper);transition:border-color .25s var(--ease); } .prose .wp-block-details:hover{border-color:#C9C9C2;} .prose .wp-block-details[open]{border-color:var(--re-ink);} .prose .wp-block-details summary{ list-style:none;cursor:pointer;padding:17px 52px 17px 20px;position:relative; font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.018em; } .prose .wp-block-details summary::-webkit-details-marker{display:none;} .prose .wp-block-details summary::after{ content:"";position:absolute;right:20px;top:50%;width:11px;height:11px; border-right:2px solid var(--re-accent-dark);border-bottom:2px solid var(--re-accent-dark); transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease); } .prose .wp-block-details[open] summary::after{transform:translateY(-25%) rotate(-135deg);} .prose .wp-block-details>*:not(summary){padding:0 20px;} .prose .wp-block-details>*:last-child{padding-bottom:19px;} .prose .wp-block-details p{color:var(--re-muted);} .post-hero{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;} .post-foot{margin-top:40px;padding-top:26px;border-top:1px solid var(--re-line);} .post-foot__share{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:15.5px;} /* -------------------------------------------------------------------------- 17. Quote page -------------------------------------------------------------------------- */ .quote-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,52px);align-items:start;} .quote-panel{border:1px solid var(--re-line);border-radius:var(--radius);overflow:hidden;background:var(--re-paper);} .quote-panel__head{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 19px;border-bottom:1px solid var(--re-line);background:var(--re-mist); } .quote-panel__title{font-size:18px;} .quote-panel__count{font-size:13px;color:var(--re-muted);font-variant-numeric:tabular-nums;} .quote-items{display:grid;} .quote-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 19px;border-bottom:1px solid var(--re-line);} .quote-item:last-child{border-bottom:0;} .quote-item__media{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--re-mist);overflow:hidden;display:flex;align-items:center;justify-content:center;color:#B9B9B2;} .quote-item__media img{width:100%;height:100%;object-fit:cover;} .quote-item__name{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.25;} .quote-item__sku{font-family:var(--mono);font-size:11.5px;color:var(--re-muted);margin-top:3px;display:block;} .quote-item__side{display:flex;align-items:center;gap:8px;} .qty{display:flex;align-items:center;border:1.5px solid var(--re-line);border-radius:var(--radius-sm);overflow:hidden;} .qty button{width:32px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--re-muted);transition:background-color .2s var(--ease),color .2s var(--ease);} .qty button:hover{background:var(--re-mist);color:var(--re-ink);} .qty input{width:52px;height:36px;border:0;text-align:center;font-size:15px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .qty input:focus{outline:none;background:var(--re-accent-soft);} .quote-item__remove{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--re-muted);transition:background-color .2s var(--ease),color .2s var(--ease);} .quote-item__remove:hover{background:#FDEBEC;color:#B32020;} .quote-item.is-leaving{opacity:0;transform:translateX(-14px);transition:opacity .25s var(--ease),transform .25s var(--ease);} .quote-empty{padding:34px 24px;text-align:center;color:var(--re-muted);} .quote-empty .re-icon{margin:0 auto 12px;color:#C6C6BF;} .quote-empty p{font-size:15px;margin-bottom:16px;} .quote-add{padding:17px 19px;border-top:1px solid var(--re-line);background:var(--re-mist);} .quote-add__label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--re-muted);margin-bottom:10px;} .quote-add__results{margin-top:9px;border:1px solid var(--re-line);border-radius:var(--radius-sm);background:var(--re-paper);max-height:270px;overflow-y:auto;} .quote-add__results li+li{border-top:1px solid var(--re-line);} .quote-add__results button{ display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;text-align:left; transition:background-color .18s var(--ease); } .quote-add__results button:hover{background:var(--re-mist);} .quote-add__results img{width:38px;height:38px;border-radius:6px;object-fit:cover;flex:none;} .quote-add__results .re-icon{flex:none;color:var(--re-muted);} .quote-add__results strong{display:block;font-family:var(--display);font-size:14.5px;font-weight:700;} .quote-add__results em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--re-muted);} .assurances{display:grid;gap:9px;margin-top:20px;} .assurances li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--re-muted);} .assurances .re-icon{color:var(--re-accent-dark);flex:none;} .quote-form__title{font-size:clamp(21px,2.4vw,27px);margin-bottom:18px;} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .field{margin-bottom:14px;} .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;font-family:var(--display);} .field abbr{color:var(--re-accent-dark);text-decoration:none;} .field input,.field textarea{ width:100%;padding:13px 14px;border:1.5px solid var(--re-line);border-radius:var(--radius-sm); background:var(--re-paper);font-size:16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .field textarea{resize:vertical;min-height:120px;} .field input:focus,.field textarea:focus{outline:none;border-color:var(--re-ink);box-shadow:0 0 0 4px var(--re-accent-soft);} .field input::placeholder,.field textarea::placeholder{color:#A3A39C;} .field.has-error input,.field.has-error textarea{border-color:#C0392B;} .field__error{display:none;font-size:13.5px;color:#C0392B;margin-top:6px;} .field.has-error .field__error{display:block;} .quote-form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px;} .quote-form__note{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--re-muted);margin:0;max-width:38ch;} .quote-form__note .re-icon{flex:none;margin-top:3px;color:var(--re-accent-dark);} .js-quote-submit.is-busy{opacity:.7;pointer-events:none;} .form-alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:15px;margin-bottom:18px;} .form-alert--ok{background:#E8F5EC;color:#1B6B37;border:1px solid #BFE3CB;} .form-alert--error{background:#FDEBEC;color:#A32A22;border:1px solid #F4C8C5;} .quote-alt{margin-top:26px;padding-top:22px;border-top:1px solid var(--re-line);} .quote-alt p{font-size:15px;color:var(--re-muted);margin-bottom:11px;} .quote-alt__links{display:flex;gap:10px;flex-wrap:wrap;} /* -------------------------------------------------------------------------- 18. Contact -------------------------------------------------------------------------- */ .contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,56px);align-items:start;} .contact__lead{color:var(--re-muted);margin:14px 0 26px;font-size:16.5px;} .contact__list{display:grid;gap:18px;} .contact__list li{display:flex;gap:14px;} .contact__icon{ flex:none;width:42px;height:42px;border-radius:var(--radius-sm);background:var(--re-mist); display:flex;align-items:center;justify-content:center;color:var(--re-ink); } .contact__list strong{display:block;font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--re-muted);margin-bottom:3px;} .contact__list a{display:block;transition:color .2s var(--ease);} .contact__list a:hover{color:var(--re-accent-dark);} .social--contact{margin-top:26px;} /* -------------------------------------------------------------------------- 19. Results, pagination, empty states -------------------------------------------------------------------------- */ .results{display:grid;gap:12px;} .result__link{ display:flex;align-items:center;gap:16px;padding:15px;border:1px solid var(--re-line); border-radius:var(--radius);background:var(--re-paper); transition:border-color .25s var(--ease),transform .2s var(--ease); } .result__link:hover{border-color:var(--re-ink);transform:translateX(4px);} .result__media{ flex:none;width:64px;height:64px;border-radius:var(--radius-sm);background:var(--re-mist); display:flex;align-items:center;justify-content:center;overflow:hidden;color:#B9B9B2; } .result__media img{width:100%;height:100%;object-fit:cover;} .result__body{flex:1;min-width:0;} .result__type{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--re-muted);margin-bottom:3px;} .result__title{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;} .result__excerpt{display:block;font-size:14.5px;color:var(--re-muted);margin-top:3px;} .result__arrow{flex:none;color:var(--re-muted);transition:transform .25s var(--ease);} .result__link:hover .result__arrow{transform:translateX(4px);} .pagination{margin-top:34px;} .pagination ul{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;} .pagination a,.pagination span{ display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px; border:1px solid var(--re-line);border-radius:var(--radius-sm);font-family:var(--display); font-weight:600;font-size:15px;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease); } .pagination a:hover{border-color:var(--re-ink);background:var(--re-ink);color:#fff;} .pagination .current{background:var(--re-accent);border-color:var(--re-accent);color:var(--re-on-accent);} .empty-state{text-align:center;max-width:560px;margin-inline:auto;padding-block:30px;} .empty-state h2{font-size:clamp(22px,3vw,30px);margin-bottom:12px;} .empty-state p{color:var(--re-muted);margin-bottom:22px;} .empty-state__links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px;} .searchform{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1.5px solid var(--re-line);border-radius:var(--radius-sm);background:var(--re-paper);} .searchform>.re-icon{color:var(--re-muted);flex:none;} .searchform input{flex:1;min-width:0;border:0;background:none;padding:10px 0;font-size:16px;} .searchform input:focus{outline:none;} /* -------------------------------------------------------------------------- 20. CTA band -------------------------------------------------------------------------- */ .cta-band{background:var(--re-ink);color:#fff;position:relative;overflow:hidden;} .cta-band::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(90deg,var(--re-accent-line) 1px,transparent 1px); background-size:52px 100%;opacity:.4; mask-image:linear-gradient(90deg,transparent 45%,#000); -webkit-mask-image:linear-gradient(90deg,transparent 45%,#000); } .cta-band__inner{ position:relative;display:flex;align-items:center;justify-content:space-between; gap:34px;flex-wrap:wrap;padding-block:clamp(38px,5vw,60px); } .cta-band__title{font-size:clamp(24px,3.2vw,36px);max-width:20ch;margin-bottom:10px;} .cta-band__text p{color:rgba(255,255,255,.72);max-width:52ch;margin:0;} .cta-band__actions{display:flex;gap:12px;flex-wrap:wrap;} /* -------------------------------------------------------------------------- 21. Footer -------------------------------------------------------------------------- */ .site-footer{background:#0C0C0C;color:rgba(255,255,255,.66);font-size:15px;} .footer__grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px); padding-block:clamp(38px,5vw,56px); } .footer__brand img{height:38px;width:auto;object-fit:contain;} .footer__blurb{margin:14px 0 12px;max-width:34ch;font-size:14.5px;} .footer__gst{font-size:13.5px;margin-bottom:16px;} .footer__gst span{color:rgba(255,255,255,.42);letter-spacing:.1em;text-transform:uppercase;font-size:11px;margin-right:6px;} .footer__title{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-family:var(--body);font-weight:700;} .footer__contact{display:grid;gap:11px;} .footer__contact li a,.footer__contact li span{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;transition:color .2s var(--ease);} .footer__contact .re-icon{flex:none;margin-top:3px;color:var(--re-accent);} .footer__contact a:hover{color:#fff;} .footer__links{display:grid;gap:9px;} .footer__links a{font-size:14.5px;transition:color .2s var(--ease),padding-left .2s var(--ease);} .footer__links a:hover{color:var(--re-accent);padding-left:4px;} .footer__col--rating .btn{margin-top:14px;} .footer__badge{width:110px;height:auto;border-radius:var(--radius-sm);} .footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:18px;} .footer__copy{margin:0;font-size:13.5px;color:rgba(255,255,255,.5);text-align:center;} .footer__copy a{color:var(--re-accent);transition:opacity .2s var(--ease);} .footer__copy a:hover{opacity:.75;} .social{display:flex;gap:9px;} .social__link{ display:flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:var(--radius-sm);border:1px solid var(--re-line);color:var(--re-ink); transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .social__link:hover{transform:translateY(-3px);background:var(--re-accent);border-color:var(--re-accent);color:var(--re-ink);} .social--footer .social__link{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.8);} .social--footer .social__link:hover{color:var(--re-ink);} /* -------------------------------------------------------------------------- 22. Sticky rail, quote dock, action bar, toast -------------------------------------------------------------------------- */ .social-rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:60;} .social--rail{flex-direction:column;} .social--rail .social__link{background:var(--re-paper);box-shadow:var(--shadow);} .social--rail .social__link:hover{transform:translateX(3px) scale(1.06);} .quote-dock{position:fixed;left:0;right:0;bottom:18px;z-index:70;pointer-events:none;display:flex;justify-content:center;padding-inline:14px;} .quote-dock__inner{ pointer-events:auto;display:flex;align-items:center;gap:12px; background:var(--re-ink);color:#fff;border-radius:50px;padding:9px 9px 9px 18px; box-shadow:var(--shadow-lg);animation:dock-in .45s var(--ease); } @keyframes dock-in{from{opacity:0;transform:translateY(22px) scale(.96);}to{opacity:1;transform:none;}} .quote-dock__count{ display:flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px; background:var(--re-accent);color:var(--re-ink);border-radius:14px; font-family:var(--display);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums; } .quote-dock__label{font-size:14.5px;color:rgba(255,255,255,.78);} .quote-dock .icon-btn{color:rgba(255,255,255,.6);width:36px;height:36px;} .quote-dock .icon-btn:hover{background:rgba(255,255,255,.12);color:#fff;} .action-bar{display:none;} .toast{ position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);z-index:95; background:var(--re-ink);color:#fff;padding:9px 17px;border-radius:50px; font-size:13px;line-height:1.35;font-weight:500;letter-spacing:-.005em; box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),bottom .3s var(--ease); max-width:calc(100% - 32px);white-space:nowrap; } .toast.is-visible{opacity:1;transform:translate(-50%,0);} /* When the quote dock is on screen the toast sits above it rather than on top of it. The class is toggled from app.js as the list fills and empties. */ body.has-dock .toast{bottom:80px;} /* -------------------------------------------------------------------------- 23. Widgets -------------------------------------------------------------------------- */ .widget{margin-bottom:28px;} .widget__title{font-size:17px;margin-bottom:12px;} .widget ul li{padding:6px 0;border-bottom:1px solid var(--re-line);font-size:15px;} /* -------------------------------------------------------------------------- 24. Responsive -------------------------------------------------------------------------- */ @media (max-width:1180px){ .social-rail{display:none;} } @media (max-width:1040px){ .hero__text{max-width:none;} .why{grid-template-columns:1fr;} .product__layout{grid-template-columns:1fr;} .product__detail{grid-template-columns:1fr;} .quote-layout{grid-template-columns:1fr;} .contact{grid-template-columns:1fr;} .footer__grid{grid-template-columns:1fr 1fr;} } @media (max-width:900px){ .nav{ position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);z-index:90; background:var(--re-paper);padding:84px 24px 34px;overflow-y:auto; transform:translateX(100%);transition:transform .38s var(--ease); box-shadow:var(--shadow-lg);margin-left:0; } .nav.is-open{transform:none;} .nav__list{flex-direction:column;align-items:stretch;gap:2px;} .nav__list a{padding:13px 12px;font-size:17px;border-radius:var(--radius-sm);} .nav__list a::after{display:none;} .nav__list a:hover{background:var(--re-mist);} .nav__list .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px;} .nav__foot{display:grid;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--re-line);} .burger{display:flex;} .header__brochure,.header__actions .btn--solid span{display:none;} .header__actions .btn--solid{width:44px;padding:0;justify-content:center;position:relative;} .header__actions .btn--solid .count{position:absolute;top:-5px;right:-5px;margin:0;} .catalogue{grid-template-columns:1fr;} .filters{position:static;border:1px solid var(--re-line);border-radius:var(--radius);overflow:hidden;} .filters__toggle{ display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px; font-family:var(--display);font-weight:700;font-size:15.5px;background:var(--re-mist); } .filters__toggle span{flex:1;text-align:left;} .filters__toggle .re-icon:last-child{transition:transform .3s var(--ease);} .filters__toggle[aria-expanded="true"] .re-icon:last-child{transform:rotate(180deg);} .filters__body{display:none;padding:18px 16px;} .filters__body.is-open{display:block;} .topbar__claim{display:none;} .topbar__inner{justify-content:center;} } @media (max-width:720px){ body{font-size:16px;padding-bottom:64px;} .hide-sm{display:none;} .section__head{flex-direction:column;align-items:flex-start;gap:14px;} .section__title{max-width:none;} .p-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;} .p-card__body{padding:12px;} .p-card__title{font-size:14.5px;} .cat-grid{grid-template-columns:1fr 1fr;} .cat-card a{flex-direction:column;align-items:flex-start;gap:11px;} .cat-card__arrow{display:none;} .field-row{grid-template-columns:1fr;gap:0;} .footer__grid{grid-template-columns:1fr;gap:30px;} .post-foot__share{flex-direction:column;align-items:flex-start;} .quote-item{grid-template-columns:52px 1fr;gap:11px;} .quote-item__media{width:52px;height:52px;} .quote-item__side{grid-column:1/-1;justify-content:space-between;} .cta-band__inner{flex-direction:column;align-items:flex-start;} .cta-band__actions{width:100%;} .cta-band__actions .btn{flex:1;} /* Phone action bar replaces the desktop rail and dock spacing */ .action-bar{ display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:75; background:var(--re-paper);border-top:1px solid var(--re-line); padding-bottom:env(safe-area-inset-bottom); } .action-bar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:9px 4px;font-size:11px;font-weight:600;color:var(--re-muted); transition:color .2s var(--ease),background-color .2s var(--ease); } .action-bar a:hover,.action-bar a:active{color:var(--re-ink);background:var(--re-mist);} .action-bar a.is-primary{color:var(--re-accent-dark);} /* Video hero on a phone: shorter, and the facts bar stacks rather than squeezing three items and a figure onto one line. */ .hero{min-height:clamp(470px,84vh,640px);} .hero__inner{padding-block:clamp(36px,8vw,56px);} .hero__facts-inner{flex-direction:column;align-items:flex-start;gap:12px;padding-block:14px;} .hero__points{gap:7px 18px;font-size:13px;} .hero__stat-num{font-size:21px;} .hero__stat-label{font-size:12.5px;} .hero__motion{width:34px;height:34px;} .quote-dock{bottom:calc(66px + env(safe-area-inset-bottom));} .quote-dock__label{display:none;} .toast{bottom:calc(78px + env(safe-area-inset-bottom));font-size:12.5px;padding:8px 15px;} body.has-dock .toast{bottom:calc(130px + env(safe-area-inset-bottom));} } @media (max-width:460px){ .steps{grid-template-columns:1fr;} .hero__actions .btn{width:100%;} .quote-form__foot .btn{width:100%;} } @media print{ .site-header,.topbar,.action-bar,.quote-dock,.social-rail,.cta-band,.site-footer{display:none!important;} body{font-size:12pt;} } /* Product card placeholder — a labelled plate rather than a broken-image icon */ .p-card__placeholder{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:8px;color:#B4B4AD; background:repeating-linear-gradient(135deg,var(--re-mist),var(--re-mist) 9px,#F0F0EC 9px,#F0F0EC 18px); } .p-card__placeholder-sku{ font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--re-muted); background:var(--re-paper);border:1px solid var(--re-line);border-radius:4px;padding:2px 7px; }