/* ============================================================================ GOFA GROUP + ranneen — brand layer over Bootstrap 5.3 ---------------------------------------------------------------------------- Palette, type and architecture follow docs/brand/DESIGN_LANGUAGE.md, where every value was measured from the logo raster and the ranneen brochure. Red #E60013 appears in BOTH marks — it is the join, so it is the house accent; the two divisions differ only in green (GOFA) vs blue (ranneen). Archivo is the specified superfamily, self-hosted in assets/fonts (archivo.css). Light/dark is driven by Bootstrap's own data-bs-theme attribute. ========================================================================== */ :root{ /* brand — measured, light theme */ --gofa-green:#006E36; --gofa-green-400:#47976E; --gofa-green-700:#044F2F; --ranneen-blue:#2f5fd6;--ranneen-blue-400:#6b8fe6;--ranneen-blue-700:#1f47b0;--blue-ink:#12224f; --red:#E60013; --red-400:#ED4755; --red-700:#B00010; --navy:#183169; --ink:#0B1220; --n0:#FFFFFF; --n50:#F6F7F9; --n100:#EDEFF3; --n200:#DFE3EA; --n300:#C3CAD6; --n500:#7C8798; --n600:#5A6475; --n800:#2A3342; /* semantic surfaces (light) */ --bg:var(--n0); --bg-alt:var(--n50); --card:var(--n0); --card-alt:var(--n100); --text:var(--ink); --text-dim:var(--n600); --rule:var(--n200); --rule-firm:var(--n300); --shadow-sm:0 1px 2px rgba(11,18,32,.05); --shadow:0 1px 2px rgba(11,18,32,.05), 0 8px 24px -12px rgba(11,18,32,.18); --shadow-lg:0 2px 4px rgba(11,18,32,.06), 0 24px 48px -20px rgba(11,18,32,.28); --font-display:"Archivo","Helvetica Neue","Arial Black",Arial,sans-serif; --font-text:"Archivo","Helvetica Neue",Arial,Helvetica,sans-serif; --font-spec:"Archivo Narrow","Archivo","Arial Narrow",Arial,sans-serif; --maxw:1240px; --radius:.5rem; /* remap Bootstrap accents to the brand */ --bs-primary:#E60013; --bs-primary-rgb:230,0,19; --bs-link-color:#0E3498; --bs-link-color-rgb:14,52,152; --bs-link-hover-color:#0F46D6; --bs-border-color:var(--rule); --bs-body-font-family:var(--font-text); } /* dark theme — Bootstrap sets data-bs-theme="dark" on */ [data-bs-theme="dark"]{ --bg:#080D16; --bg-alt:#0E1522; --card:#111A29; --card-alt:#16233a; --text:#EEF1F6; --text-dim:#9BA6B8; --rule:#1E2938; --rule-firm:#2C3849; --gofa-green:#3FA96C; --gofa-green-400:#6FC393; --gofa-green-700:#2C8452; --ranneen-blue:#5B87EE; --ranneen-blue-400:#8CAAF4; --ranneen-blue-700:#3A63C9; --red:#FF4351; --red-400:#FF7480; --red-700:#E02535; --navy:#0f2350; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.8); --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 28px 56px -22px rgba(0,0,0,.9); --bs-primary:#FF4351; --bs-primary-rgb:255,67,81; --bs-link-color:#8CAAF4; --bs-link-color-rgb:140,170,244; --bs-link-hover-color:#B9CCF9; --bs-body-bg:#080D16; --bs-body-color:#EEF1F6; --bs-border-color:var(--rule); } /* ---- base -------------------------------------------------------------- */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{ background:var(--bg); color:var(--text); font-family:var(--font-text); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } html,body{overflow-x:clip;max-width:100%} main{overflow-x:clip} img{max-width:100%;height:auto} [dir="rtl"] body{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,var(--font-text)} :lang(zh){font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",var(--font-text)} ::selection{background:var(--red);color:#fff} a{color:var(--bs-link-color);text-underline-offset:2px} .container{max-width:var(--maxw)} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px} /* ---- type -------------------------------------------------------------- */ .display-1,.display-2,.display-3,.display-4,h1,h2,h3,.h1,.h2,.h3{ font-family:var(--font-display);letter-spacing:-.02em;text-wrap:balance;color:var(--text)} .d-hero{font-family:var(--font-display);font-weight:900;line-height:.98;letter-spacing:-.03em; text-transform:uppercase;font-size:clamp(2.3rem,6vw,4.25rem)} .d-hero .accent{color:var(--red)} h2,.h2{font-weight:800;text-transform:uppercase;letter-spacing:-.01em; font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.1} h3,.h3{font-weight:700;font-size:1.3rem;letter-spacing:-.005em} .lead{color:var(--text-dim);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:64ch} .text-dim{color:var(--text-dim)!important} .eyebrow{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em; color:var(--text-dim);display:inline-flex;align-items:center;gap:.6rem;margin:0 0 .85rem} .eyebrow::before{content:"";width:1.75rem;height:3px;background:var(--red);flex:none;border-radius:2px} [dir="rtl"] .eyebrow::before{order:2} .eyebrow.g::before{background:var(--gofa-green)} .eyebrow.b::before{background:var(--ranneen-blue)} /* ---- section rhythm ---------------------------------------------------- */ section{padding-block:clamp(3rem,7vw,5.5rem)} .sec-alt{background:var(--bg-alt)} .sec-ink{background:var(--ink);color:#fff} .sec-ink h2,.sec-ink h3,.sec-ink .display-4{color:#fff} .sec-ink .lead,.sec-ink .text-dim{color:rgba(255,255,255,.72)!important} .sec-head{max-width:66ch;margin-bottom:clamp(1.75rem,4vw,2.75rem)} /* ---- navbar ------------------------------------------------------------ */ .navbar{background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px);border-bottom:1px solid var(--rule); padding-block:.55rem} .navbar .navbar-brand{display:flex;align-items:center;gap:.65rem;padding:0} .navbar .navbar-brand img{width:34px;height:34px} .brand-word{font-family:var(--font-display);font-weight:900;font-size:1.3rem; letter-spacing:-.02em;text-transform:uppercase;line-height:1;color:var(--text)} .brand-sub{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--text-dim);line-height:1;margin-top:2px} .navbar .nav-link{font-size:.92rem;font-weight:500;color:var(--text-dim);white-space:nowrap; padding:.4rem .2rem;margin-inline:.42rem;border-bottom:2px solid transparent;border-radius:0} .navbar .btn-brand{white-space:nowrap} @media (min-width:992px) and (max-width:1200px){ .navbar .nav-link{font-size:.86rem;margin-inline:.3rem} .navbar .brand-sub{display:none} } .navbar .nav-link:hover,.navbar .nav-link:focus-visible{color:var(--text);border-bottom-color:var(--red)} .navbar .nav-link.active{color:var(--text);border-bottom-color:var(--red)} .navbar .dropdown-menu{border-color:var(--rule);box-shadow:var(--shadow);background:var(--card); border-radius:var(--radius)} .navbar .dropdown-item{color:var(--text-dim);font-size:.92rem} .navbar .dropdown-item:hover{background:var(--bg-alt);color:var(--text)} .icon-btn{width:2.35rem;height:2.35rem;display:inline-grid;place-items:center;border-radius:.4rem; border:1px solid var(--rule-firm);background:transparent;color:var(--text-dim);cursor:pointer} .icon-btn:hover{color:var(--text);border-color:var(--text-dim)} .lang-btn{font:inherit;font-size:.8rem;font-weight:600;padding:.35rem .55rem;border-radius:.4rem; border:1px solid var(--rule-firm);background:transparent;color:var(--text-dim);cursor:pointer} .lang-btn[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)} /* language dropdown */ .lang-dd .dropdown-toggle{display:inline-flex;align-items:center;gap:.35rem} .lang-dd .dropdown-menu{min-width:10rem;max-height:70vh;overflow:auto} .lang-dd .dropdown-item{font-size:.9rem;color:var(--text-dim);border-radius:.3rem} .lang-dd .dropdown-item:hover{background:var(--bg-alt);color:var(--text)} .lang-dd .dropdown-item.active{background:var(--red);color:#fff} /* ---- buttons ----------------------------------------------------------- */ .btn{font-weight:600;border-radius:.4rem;padding:.62rem 1.2rem} .btn-brand{background:var(--red);border-color:var(--red);color:#fff} .btn-brand:hover,.btn-brand:focus-visible{background:var(--red-700);border-color:var(--red-700);color:#fff} .btn-outline-brand{border:1px solid currentColor;color:var(--text);background:transparent} .btn-outline-brand:hover{background:color-mix(in srgb,currentColor 10%,transparent);color:var(--text)} .btn-ghost-light{border:1px solid rgba(255,255,255,.4);color:#fff;background:transparent} .btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff} /* ---- pills / chips ----------------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600; text-transform:uppercase;letter-spacing:.08em;padding:.3rem .7rem;border-radius:100px; border:1px solid var(--rule-firm);color:var(--text-dim);background:var(--card)} .pill.g{color:var(--gofa-green);border-color:color-mix(in srgb,var(--gofa-green) 40%,var(--rule))} .pill.b{color:var(--ranneen-blue);border-color:color-mix(in srgb,var(--ranneen-blue) 40%,var(--rule))} /* ---- cards ------------------------------------------------------------- */ .card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease, border-color .18s} .card.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--rule-firm)} .card-accent{border-top:4px solid var(--accent,var(--red))} .mark{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;line-height:1; background:transparent;padding:0;color:inherit} .mark-gofa{color:var(--gofa-green);text-transform:uppercase} .mark-rann{color:var(--ranneen-blue);text-transform:lowercase} .mark-rann .reg{color:var(--red)} .role-tag{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)} .tick{list-style:none;padding:0;margin:0;display:grid;gap:.55rem} .tick li{position:relative;padding-inline-start:1.4rem;font-size:.95rem} .tick li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:7px;height:7px; border-radius:2px;background:var(--accent,var(--red));transform:rotate(45deg)} /* feature icon tiles */ .feature{display:flex;gap:1rem;align-items:flex-start} .feature .ic{flex:none;width:2.75rem;height:2.75rem;border-radius:.6rem;display:grid;place-items:center; background:color-mix(in srgb,var(--accent,var(--red)) 12%,transparent);color:var(--accent,var(--red))} .feature .ic svg{width:1.4rem;height:1.4rem} .feature h3{font-size:1.08rem;margin:0 0 .3rem} .feature p{margin:0;color:var(--text-dim);font-size:.93rem} /* ---- power spine ------------------------------------------------------- */ .spine{position:relative;padding-top:2.75rem;margin-top:1rem} .spine::before{content:"";position:absolute;top:2.75rem;inset-inline:0;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--gofa-green),var(--red) 46%,var(--red) 54%,var(--ranneen-blue))} .spine-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;position:relative} .node{position:relative;padding-top:1.5rem;text-align:start} .node::before{content:"";position:absolute;top:-4px;inset-inline-start:0;width:14px;height:14px; border-radius:50%;background:var(--bg);border:3px solid var(--dot,var(--red))} .node b{display:block;font-family:var(--font-display);font-weight:900;line-height:1.05; font-size:clamp(1.05rem,2.1vw,1.5rem);letter-spacing:-.02em} .node span{display:block;font-size:.76rem;color:var(--text-dim);margin-top:.3rem;line-height:1.35} .node em{display:block;font-style:normal;font-size:.68rem;font-weight:600;text-transform:uppercase; letter-spacing:.09em;color:var(--dot);margin-top:.45rem} @media (max-width:760px){ .spine{padding-top:0}.spine::before{display:none} .spine-row{grid-template-columns:repeat(2,1fr);gap:1.25rem} .node{padding-top:1.3rem;border-top:3px solid var(--dot)}.node::before{display:none} } /* ---- flagship / stat band --------------------------------------------- */ .flagship{background:var(--navy);color:#fff;border-radius:var(--radius);overflow:hidden} .flagship .eyebrow{color:rgba(255,255,255,.72)} .flagship .eyebrow::before{background:var(--red-400)} .figures{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.16)} .figures>div{background:var(--navy);padding:1.1rem 1.2rem} .figures b{display:block;font-family:var(--font-display);font-weight:900;line-height:1; font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em} .figures span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em; color:rgba(255,255,255,.6);margin-top:.4rem} /* ---- stat strip -------------------------------------------------------- */ .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} .stat-strip>div{background:var(--card);padding:1.3rem 1.4rem} .stat-strip b{display:block;font-family:var(--font-display);font-weight:900;font-size:1.7rem; letter-spacing:-.02em;line-height:1;color:var(--text)} .stat-strip span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em; color:var(--text-dim);margin-top:.5rem} /* ---- spec tables ------------------------------------------------------- */ .spec-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card)} table.spec{border-collapse:collapse;width:100%;min-width:640px;margin:0; font-family:var(--font-spec);font-size:.9rem;font-variant-numeric:tabular-nums} table.spec caption{caption-side:top;text-align:start;padding:1rem 1.1rem;font-family:var(--font-text); font-size:.88rem;color:var(--text-dim);border-bottom:1px solid var(--rule)} table.spec thead th{background:var(--th,var(--ranneen-blue));color:#fff;font-weight:700; font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap; padding:.6rem .9rem;text-align:start;position:sticky;top:0} table.spec th[scope="row"]{font-weight:700;color:var(--text);white-space:nowrap} table.spec td,table.spec th{padding:.6rem .9rem;text-align:start;border-bottom:1px solid var(--rule)} table.spec tbody tr:nth-child(even){background:var(--card-alt)} table.spec .flag{color:var(--red);font-weight:700} .th-green{--th:var(--gofa-green-700)} .th-blue{--th:var(--ranneen-blue-700)} .th-navy{--th:var(--navy)} /* ---- catalogue browser (lighting) ------------------------------------- */ .filterbar{display:flex;flex-wrap:wrap;gap:.5rem} .fchip{font:inherit;font-size:.82rem;font-weight:600;padding:.45rem .85rem;cursor:pointer; border:1px solid var(--rule-firm);background:var(--card);color:var(--text-dim);border-radius:100px} .fchip:hover{color:var(--text);border-color:var(--text-dim)} .fchip[aria-pressed="true"]{background:var(--gofa-green);border-color:var(--gofa-green);color:#fff} .fam-acc .accordion-item{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius)!important; margin-bottom:.75rem;overflow:hidden} .fam-acc .accordion-button{background:var(--card);color:var(--text);font-family:var(--font-display); font-weight:800;letter-spacing:-.01em;padding:1rem 1.15rem} .fam-acc .accordion-button:not(.collapsed){background:var(--bg-alt);color:var(--text);box-shadow:none} .fam-acc .accordion-button:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 30%,transparent)} .fam-acc .accordion-button::after{filter:grayscale(1)} [data-bs-theme="dark"] .fam-acc .accordion-button::after{filter:grayscale(1) invert(1)} .fam-meta{display:flex;gap:.5rem 1rem;flex-wrap:wrap;align-items:center;width:100%;padding-inline-end:1rem} /* flex, not `grid; place-items:center` — the third place this bit us. On a grid item `height:100%` resolves against an auto row and falls back to auto, so the thumbnail sized itself from its own aspect ratio (up to 88x88 in a 88x62 box) and `overflow:hidden` silently cropped 138 of the 144 catalogue thumbnails. */ .fam-thumb{flex:none;width:88px;height:62px;border-radius:.35rem;overflow:hidden;background:var(--card-alt); display:flex;align-items:center;justify-content:center;border:1px solid var(--rule)} .fam-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:3px;background:#fff} [data-bs-theme="dark"] .fam-thumb img{background:#f3f5f8} .fam-cat{font-family:var(--font-text);font-size:.72rem;font-weight:600;text-transform:uppercase; letter-spacing:.1em;color:var(--gofa-green)} .fam-n{font-family:var(--font-text);font-size:.8rem;color:var(--text-dim);margin-inline-start:auto} /* ---- application / solution grid -------------------------------------- */ .app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} .app{background:var(--card);padding:clamp(1.3rem,2.5vw,1.8rem)} .app .ic{width:2.4rem;height:2.4rem;border-radius:.55rem;display:grid;place-items:center;margin-bottom:.9rem; background:color-mix(in srgb,var(--accent,var(--red)) 13%,transparent);color:var(--accent,var(--red))} .app .ic svg{width:1.3rem;height:1.3rem} .app h3{font-size:1.06rem;margin:0 0 .4rem} .app p{margin:0;color:var(--text-dim);font-size:.9rem} .app .kit{margin-top:.85rem;font-size:.74rem;font-weight:600;text-transform:uppercase; letter-spacing:.07em;color:var(--accent,var(--red))} /* ---- definition list (trade terms) ------------------------------------ */ .dl-terms{display:grid;gap:0;border-top:1px solid var(--rule-firm)} .dl-terms>div{display:grid;grid-template-columns:12rem 1fr;gap:1rem;padding:.9rem 0; border-bottom:1px solid var(--rule)} @media (max-width:560px){.dl-terms>div{grid-template-columns:1fr;gap:.25rem}} .dl-terms dt{margin:0;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)} .dl-terms dd{margin:0;font-size:.95rem} .dl-terms .flag{color:var(--red);font-weight:600} /* ---- FAQ --------------------------------------------------------------- */ .faq .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--rule)} .faq .accordion-button{background:transparent;color:var(--text);font-weight:700;padding:1.1rem .25rem;font-size:1.02rem} .faq .accordion-button:not(.collapsed){color:var(--text);box-shadow:none} .faq .accordion-body{padding:.25rem .25rem 1.2rem;color:var(--text-dim)} /* ---- process steps ----------------------------------------------------- */ .steps{counter-reset:step;display:grid;gap:1rem} .step{position:relative;padding-inline-start:3.4rem} .step::before{counter-increment:step;content:counter(step);position:absolute;inset-inline-start:0;top:0; width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display); font-weight:900;background:var(--red);color:#fff} .step h3{font-size:1.05rem;margin:.2rem 0 .3rem} .step p{margin:0;color:var(--text-dim);font-size:.93rem} /* ---- forms ------------------------------------------------------------- */ .form-control,.form-select{background:var(--card);border-color:var(--rule-firm);color:var(--text);border-radius:.4rem} .form-control:focus,.form-select:focus{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent)} .form-label{font-weight:600;font-size:.9rem} /* ---- footer ------------------------------------------------------------ */ .site-footer{background:var(--ink);color:#fff;padding-block:clamp(2.5rem,6vw,4rem) 2rem} .site-footer h4,.site-footer h3{font-family:var(--font-display);font-size:.8rem;font-weight:700;text-transform:uppercase; letter-spacing:.12em;color:rgba(255,255,255,.55);margin:0 0 .9rem} .site-footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.94rem} .site-footer a:hover{color:#fff;text-decoration:underline} .site-footer .addr{color:rgba(255,255,255,.72);line-height:1.7;font-size:.94rem} .footer-bot{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14); display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.5)} /* ---- dark hero (biwatt-style, always dark) ---------------------------- */ .hero-dark{position:relative;overflow:hidden;color:#fff;background:#070b16} /* drifting aurora glow */ .hero-dark::before{content:"";position:absolute;inset:-20%;pointer-events:none;z-index:0; background: radial-gradient(38% 46% at 82% 12%, rgba(15,70,214,.55), transparent 62%), radial-gradient(34% 42% at 10% 96%, rgba(0,110,54,.42), transparent 58%), radial-gradient(30% 40% at 60% 80%, rgba(230,0,19,.18), transparent 60%), linear-gradient(155deg, #0c1730 0%, #0a1020 46%, #070b16 100%); animation:aurora 18s ease-in-out infinite alternate} @keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-3%,2%,0) scale(1.06)} 100%{transform:translate3d(3%,-2%,0) scale(1.03)}} .hero-dark::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size:30px 30px;mask-image:linear-gradient(180deg,#000,transparent 85%)} @media (prefers-reduced-motion:reduce){.hero-dark::before{animation:none}} .hero-dark .container{position:relative;z-index:1} .hero-dark h1,.hero-dark h2{color:#fff} .hero-dark .lead{color:rgba(255,255,255,.76)} .hero-dark .eyebrow{color:rgba(255,255,255,.66)} .hero-dark .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.82)} .hero-dark .btn-outline-brand{color:#fff;border-color:rgba(255,255,255,.5)} .hero-dark .btn-outline-brand:hover{background:rgba(255,255,255,.12)} /* power spine reads on the dark hero */ .hero-dark .node b{color:#fff} .hero-dark .node span{color:rgba(255,255,255,.65)} .hero-dark .node::before{background:#0a1020} .hero-dark .text-dim{color:rgba(255,255,255,.6)!important} /* flex, not `grid; place-items:center`: on a grid item a percentage max-height resolves against an auto-sized track and drops to none, so the render escaped the frame instead of being capped by it. Flex centres identically and keeps the percentage meaningful. */ .hero-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px} /* framed variant — separates a foreground product from a busy photo background */ /* width:fit-content so the glass panel hugs the render. Stretched to the full column it left a tall narrow product floating in up to 81% empty panel. */ .hero-media.framed{width:fit-content;max-width:100%;margin-inline:auto; padding:clamp(1rem,2.5vw,1.75rem);border-radius:calc(var(--radius) + 6px); background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.22); box-shadow:0 24px 60px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter:blur(10px) saturate(120%)} .hero-media.framed::before{content:"";position:absolute;z-index:0;width:72%;aspect-ratio:1; border-radius:50%;background:radial-gradient(circle, rgba(107,143,230,.55), transparent 70%); filter:blur(10px)} .hero-media.framed img{position:relative;z-index:1} .hero-media::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, rgba(91,135,238,.55), rgba(91,135,238,0) 70%);filter:blur(8px)} .hero-media img{position:relative;max-height:min(520px,60vh);max-width:100%;width:auto;height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));animation:floaty 7s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.hero-media img{animation:none}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media (max-width:991px){.hero-media{min-height:0;margin-top:1.5rem}.hero-media img{max-height:360px}} /* crossfading hero product stack — fixed-height box contains the absolute imgs */ .hero-media.stack{position:relative;height:clamp(320px,40vw,520px);min-height:0} .hero-media.stack img{position:absolute;top:50%;left:50%; max-height:100%;max-width:100%;width:auto;height:auto; opacity:0;transition:opacity 1.1s ease;animation:none; transform:translate(-50%,-50%);filter:drop-shadow(0 24px 48px rgba(0,0,0,.55))} .hero-media.stack img.is-active{opacity:1} @media (max-width:991px){.hero-media.stack{height:340px;margin-top:1rem}} /* ---- photo hero (full-bleed image + scrim + ken burns) ---------------- */ .hero-photo::before{display:none} /* photo replaces the aurora */ .hero-photo .hero-bg{position:absolute;inset:0;z-index:0;background-position:center; background-size:cover;background-repeat:no-repeat;animation:kenburns 28s ease-in-out infinite alternate; transform-origin:center;will-change:transform} /* Every photo hero is the same shape on every page. The sources are all cropped to 2.4:1 by tools/normalize_heroes.py and the container holds that same ratio, so `cover` has nothing left to crop. Height, not min-height: min-height let a page with taller hero copy grow past the ratio, which is what made the eight headers five different sizes. Owner 2026-08-08 picked the lighting header as the reference — 2.4:1 reads as a banner without eating the fold. */ .hero-photo{contain:paint;display:flex;align-items:center; height:clamp(420px,41.66vw,660px);padding-top:0!important;padding-bottom:0!important} .hero-photo>.container{width:100%} /* the hero copy must live inside the ratio rather than dictate it */ .hero-photo .lead{margin-bottom:0} /* a definite height, not max-height: `max-height:100%` on the image only means anything if the parent's own height is resolvable, and max-height alone still leaves it content-sized. This is what actually caps the render. */ .hero-photo .hero-media{height:clamp(240px,30vw,420px);min-height:0;max-height:none} /* 100%, not the same vw formula as the frame: an absolute cap equal to the frame's outer height ignores its 28px padding, so the render bled over the glass edge top and bottom. Percentage resolves against the content box. */ .hero-photo .hero-media img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain} @media (max-width:767px){.hero-photo{height:auto;min-height:clamp(400px,86vw,520px); padding-top:2.5rem!important;padding-bottom:2.5rem!important}} .hero-photo .hero-scrim{position:absolute;inset:0;z-index:0; background:linear-gradient(100deg, rgba(7,11,22,.94) 0%, rgba(8,14,30,.78) 44%, rgba(12,28,64,.52) 100%)} .hero-photo .container{position:relative;z-index:1} @keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.17)}} @media (prefers-reduced-motion:reduce){.hero-photo .hero-bg{animation:none}} /* foreground product lineup inside a hero — real , never cropped */ .hero-lineup{display:block;width:min(100%,1100px);height:auto;margin:clamp(1.5rem,4vw,2.5rem) auto 0; filter:drop-shadow(0 26px 50px rgba(0,0,0,.55))} /* ---- product carousel ------------------------------------------------- */ .prod-carousel{background:radial-gradient(95% 130% at 50% -10%, #12203c, #080d17 72%); border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} .prod-slide{display:grid;place-items:center;text-align:center;color:#fff;padding:2.5rem 3.5rem 3.25rem} .prod-slide .pimg{height:clamp(200px,26vw,300px);display:grid;place-items:center;margin-bottom:1.25rem;position:relative} .prod-slide .pimg::after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;z-index:0; background:radial-gradient(circle, rgba(91,135,238,.5), transparent 70%);filter:blur(6px)} .prod-slide img{position:relative;z-index:1;max-height:clamp(200px,26vw,300px);max-width:82%;width:auto; object-fit:contain;filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))} .prod-slide .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)} .prod-slide h3{color:#fff;margin:.5rem 0 .35rem;font-family:var(--font-display);font-weight:800} .prod-slide p{color:rgba(255,255,255,.72);max-width:44ch;margin:0 0 1.1rem} .prod-slide .btn-outline-brand{color:#fff;border-color:rgba(255,255,255,.5)} .prod-slide .btn-outline-brand:hover{background:rgba(255,255,255,.12)} .prod-carousel .carousel-control-prev,.prod-carousel .carousel-control-next{width:7%;opacity:.7} .prod-carousel .carousel-control-prev:hover,.prod-carousel .carousel-control-next:hover{opacity:1} .prod-carousel .carousel-indicators [data-bs-target]{width:8px;height:8px;border-radius:50%; border:0;background:rgba(255,255,255,.4)} .prod-carousel .carousel-indicators .active{background:var(--red)} /* ---- product-image card (name WITH picture) --------------------------- */ /* Taller than it looks like it needs to be: the product renders are portrait (~0.63), so a short landscape slot left half the card empty around a small image. A squarer slot lets the same render draw bigger without cropping. */ .pcard-media{height:clamp(210px,25vw,300px);margin:-1.5rem -1.5rem 1.15rem;overflow:hidden; border-bottom:1px solid var(--rule);border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; display:flex;align-items:center;justify-content:center; background:radial-gradient(78% 92% at 50% 14%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 72%), linear-gradient(160deg, color-mix(in srgb,var(--accent) 9%,var(--card-alt)), var(--card-alt))} .pcard-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:.6rem; filter:drop-shadow(0 12px 22px rgba(11,18,32,.18));transition:transform .5s cubic-bezier(.22,.61,.36,1)} .card.lift:hover .pcard-media img{transform:scale(1.05)} [data-bs-theme="dark"] .pcard-media img{filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))} /* ---- light hero (calm, Hina-style) ------------------------------------ */ .hero-light{background: radial-gradient(55% 75% at 92% 0%, color-mix(in srgb,var(--ranneen-blue) 12%,transparent), transparent 62%), radial-gradient(45% 60% at 0% 100%, color-mix(in srgb,var(--gofa-green) 9%,transparent), transparent 60%), linear-gradient(180deg, var(--bg-alt), var(--bg))} .hero-light .hero-visual{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg); aspect-ratio:4/3;background:var(--card-alt)} .hero-light .hero-visual img{width:100%;height:100%;object-fit:cover;display:block} /* ---- two worlds gateway ----------------------------------------------- */ .worlds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.75rem)} @media (max-width:820px){.worlds{grid-template-columns:1fr}} .world{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden; border:1px solid var(--rule);border-radius:var(--radius);background:var(--card); box-shadow:var(--shadow);transition:transform .22s ease, box-shadow .22s ease} .world:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} /* flex, not block: `contain` letterboxes the image inside its own box, and on a block parent that leftover space all lands on one side — a 1.5:1 photo and a 0.63:1 product render both sat flush left with up to 354px of dead space. */ .world .media{position:relative;height:clamp(240px,28vw,340px);overflow:hidden;background:var(--card-alt); display:flex;align-items:center;justify-content:center} .world .media>img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; transition:transform .7s cubic-bezier(.22,.61,.36,1)} .world:hover .media>img{transform:scale(1.06)} .world .media.prod{background: radial-gradient(80% 90% at 50% 12%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb,var(--accent) 16%,var(--card-alt)), var(--card-alt))} .world .media.prod>img{object-fit:contain;padding:clamp(1rem,3vw,2rem)} .world .media .badge{position:absolute;top:1rem;inset-inline-start:1.1rem;z-index:2; font-family:var(--font-display);font-weight:900;letter-spacing:-.01em;font-size:1.2rem;color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55)} .world .body{display:flex;flex-direction:column;flex:1;padding:clamp(1.5rem,3vw,2.25rem); border-top:4px solid var(--accent)} .world .kicker{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.12em; font-size:.72rem;margin-bottom:.5rem} .world h3{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;line-height:1.05; font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .6rem;text-transform:uppercase;color:var(--text)} .world p{color:var(--text-dim);margin:0 0 1.1rem} .world .tick{margin-bottom:1.4rem} .world .go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem; font-weight:700;color:#fff;background:var(--accent);border:0;border-radius:.4rem;padding:.62rem 1.2rem; text-decoration:none;transition:filter .15s} .world .go:hover{filter:brightness(1.08);color:#fff} /* ---- photo cards (application gallery) --------------------------------- */ /* aspect-ratio, not a fixed height: a flat height made the box as wide as its grid column allowed (up to 2.44:1) while the photography is all 1.33-1.60, so `cover` was throwing away 39-45% of every frame. 16:10 sits inside the source range, which keeps the crop to a trim rather than a re-composition. Sources far outside that range get .photo-card.strip below. */ .photo-card{position:relative;border-radius:var(--radius);overflow:hidden;margin:0; box-shadow:var(--shadow);aspect-ratio:16/10;min-height:210px;background:var(--card-alt)} .photo-card.strip{aspect-ratio:32/9} /* natively panoramic sources */ .photo-card img{width:100%;height:100%;object-fit:cover;display:block;background:var(--card-alt);transition:transform .6s cubic-bezier(.22,.61,.36,1)} .photo-card:hover img{transform:scale(1.06)} .photo-card figcaption{position:absolute;inset-inline:0;bottom:0;padding:1.6rem 1.1rem .9rem; color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.01em; background:linear-gradient(0deg, rgba(7,11,22,.9) 10%, rgba(7,11,22,.4) 70%, transparent)} .photo-card .tag{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:#fff;background:var(--gofa-green);padding:.2rem .5rem;border-radius:3px;margin-bottom:.4rem} /* ---- green sustainability band ---------------------------------------- */ .green-band{position:relative;overflow:hidden;color:#fff;padding-block:clamp(3rem,7vw,5rem)} .green-band .green-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover; animation:kenburns 30s ease-in-out infinite alternate} .green-band::after{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(0deg, rgba(4,20,12,.82), rgba(4,30,18,.5))} .green-band .container{position:relative;z-index:1} .green-band h2{color:#fff} .green-band .lead{color:rgba(255,255,255,.82)} .green-band .eyebrow{color:rgba(255,255,255,.8)}.green-band .eyebrow::before{background:#3FA96C} /* ---- reveal on scroll -------------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---- showroom range banner (full-bleed dark) -------------------------- */ .range-banner{position:relative;overflow:hidden;color:#fff;padding-block:clamp(2.5rem,6vw,4rem); background:radial-gradient(90% 140% at 50% 0%, #14203c, #080d17 70%)} .range-banner .lineup{width:auto;max-width:100%;max-height:clamp(160px,22vw,300px);height:auto;display:block;margin:1.5rem auto 0;filter:drop-shadow(0 24px 48px rgba(0,0,0,.5))} .range-banner h2{color:#fff} .range-banner .lead{color:rgba(255,255,255,.72)} /* product thumb inside cards */ .pthumb{height:120px;display:grid;place-items:center;margin:-0.5rem 0 .6rem} .pthumb img{max-height:120px;width:auto;filter:drop-shadow(0 10px 20px rgba(11,18,32,.18))} [data-bs-theme="dark"] .pthumb img{filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))} /* ---- WhatsApp chat widget --------------------------------------------- */ .wa-fab{position:fixed;inset-inline-end:1.15rem;bottom:1.15rem;z-index:1040; width:3.4rem;height:3.4rem;border-radius:50%;border:0;cursor:pointer; display:grid;place-items:center;background:#25D366;color:#fff; box-shadow:0 6px 22px rgba(11,18,32,.28);transition:transform .18s ease, box-shadow .18s ease} .wa-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 28px rgba(11,18,32,.36)} .wa-fab svg{width:1.85rem;height:1.85rem;fill:#fff} .wa-fab .dot{position:absolute;top:2px;inset-inline-end:2px;width:.7rem;height:.7rem;border-radius:50%; background:var(--red);border:2px solid #fff} .wa-panel{position:fixed;inset-inline-end:1.15rem;bottom:5.4rem;z-index:1041;width:min(21rem,calc(100vw - 2.3rem)); background:var(--card);border:1px solid var(--rule);border-radius:var(--radius); box-shadow:var(--shadow-lg);overflow:hidden;display:none} .wa-panel.open{display:block;animation:waIn .18s ease} @keyframes waIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wa-head{background:#075E54;color:#fff;padding:.85rem 1rem;display:flex;align-items:center;gap:.7rem} .wa-head .av{width:2.2rem;height:2.2rem;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none} .wa-head .av svg{width:1.25rem;height:1.25rem;fill:#fff} .wa-head b{display:block;font-size:.92rem;line-height:1.2} .wa-head span{font-size:.72rem;opacity:.85} .wa-head .x{margin-inline-start:auto;background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer; line-height:1;padding:.2rem .35rem;border-radius:.25rem} .wa-head .x:hover{background:rgba(255,255,255,.15)} .wa-body{padding:1rem;background:var(--bg-alt)} .wa-msg{background:var(--card);border:1px solid var(--rule);border-radius:.55rem;padding:.7rem .85rem; font-size:.88rem;color:var(--text);box-shadow:var(--shadow-sm)} .wa-body label{display:block;font-size:.75rem;font-weight:600;color:var(--text-dim);margin:.9rem 0 .35rem} .wa-body textarea{width:100%;font:inherit;font-size:.88rem;padding:.55rem .7rem;border-radius:.4rem; border:1px solid var(--rule-firm);background:var(--card);color:var(--text);resize:vertical} .wa-body textarea:focus{outline:0;border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.2)} .wa-send{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.7rem; background:#25D366;color:#fff;border:0;border-radius:.4rem;padding:.6rem 1rem;font-weight:700; font-size:.92rem;cursor:pointer;text-decoration:none;white-space:nowrap} .wa-send svg{width:1.15rem;height:1.15rem;flex:none;fill:#fff} .wa-send:hover{background:#1EBE5B;color:#fff} .wa-note{font-size:.72rem;color:var(--text-dim);margin:.6rem 0 0;text-align:center} @media (max-width:520px){.wa-fab{width:3.1rem;height:3.1rem}.wa-fab svg{width:1.65rem;height:1.65rem}} /* ---- misc -------------------------------------------------------------- */ .hairline{height:1px;background:var(--rule);border:0} .bg-grid{background-image:radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0); background-size:26px 26px} .skip-link{position:absolute;top:-4rem;inset-inline-start:.5rem;z-index:1000;background:var(--red);color:#fff; padding:.5rem .9rem;border-radius:.3rem;text-decoration:none;transition:top .15s ease} .skip-link:focus,.skip-link:focus-visible{top:.5rem}