/* ============================================================================ 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 ------------------------------------------------------------ */ /* The blur lives on a pseudo-element, not on .navbar itself. `backdrop-filter` makes an element a containing block for its position:fixed descendants, and the mobile offcanvas menu is a child of the navbar — so with the filter on .navbar the panel sized itself against the 62px navbar instead of the viewport, and all seven links rendered outside it, over the page. Moving the filter to ::before keeps the glass look and gives the menu its height back. */ .navbar{border-bottom:1px solid var(--rule);padding-block:.55rem;position:relative} .navbar::before{content:"";position:absolute;inset:0;z-index:-1; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px)} .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}