/* ========================================================================== * Better Flags — 2026 rebuild additions (designer's bf-2026.css, reconciled) * -------------------------------------------------------------------------- * Source: betterflags-site-2026.zip, assets/bf-2026.css (2026-09-18). Ported * 2026-09-21. Everything visual still comes from the Webflow export; this file * only (1) turns the nav / FAQ states into classes, (2) gives every `.button` * the yellow clip-path wipe, (3) styles the three new 2026 blocks (photo hero, * CiCLO x Hemptex film slider, "As seen in" marquee) and (4) adds the Hemptex * green variants of existing components. See skills/site2026Redesign.md. * * LOAD ORDER — this file is NOT last, whatever the designer's header said. * RootDocument.tsx links it between better-flags.webflow.css and * bf-responsive.css. bf-responsive.css keeps its "KEEP IT LAST" contract (its * own header explains the horizontal-scrollbar reason). globals.css is * injected by Next BEFORE all of these, so at equal specificity this file wins * over globals.css and loses to bf-responsive.css. Consequences, per selector * both files touch (checked 2026-09-21 with a selector diff): * * - `.bf-cart-fab` (designer §17: hover scale) — DROPPED from this file. * bf-responsive.css §9 owns the floating cart button; on phones it moves it * to the bottom corner with `transform: none`, and the designer's * `:hover { transform: translateY(-50%) scale(1.06) }` out-specifies that * and would jump the button up by half its height on every tap. * - `.nav_link` — no property overlap. bf-responsive.css §4 sets the 44px * touch target via `.nav_menus .nav_link` (higher specificity, wins on * `display`); this file only animates opacity/transform. Both apply. * - `.vs_tab-link` — disjoint properties (cursor/position here, letter-spacing * there). Both apply. * - `.scroll_more` — bf-responsive.css §7 parks the badge bottom-LEFT under * 992px so it never stacks on the cart button. The designer's * `.section_hero.is-2026 .scroll_more { bottom: 40px }` is therefore * desktop-only here (wrapped in `min-width: 992px`); under 768px the * designer hides the badge entirely, which bf-responsive.css is fine with. * - `.w-checkbox-input` — bf-responsive.css §7d enlarges it to 20px on touch * screens (`hover: none`). The designer's 18px in `.section_contact` would * beat that by specificity, so the size here is gated to `hover: hover`. * - `.button` / `.btn_overlay` / `.faq_*` / `.stock_thumbnail.is-*` / * `.more_details-container` / `.solution_card` also exist in globals.css. * This file loads later and deliberately supersedes those rules (same * intent, designer's values). The JS button hover that used to set an * inline `transform` on `.btn_overlay` was removed from WebflowInit.tsx at * the same time — an inline transform would have beaten the clip-path wipe. * * State classes this file expects React to toggle (no bf.js is shipped): * body.nav-open Navigation.tsx * .faq--open / .w--open WebflowInit.tsx (delegated click) * .bf-reveal / .is-visible ScrollReveal.tsx (the wrapper class scopes §9's * hidden state so un-migrated pages stay visible) * .cobrand_stage.is-* FilmSlider.tsx * .vs_tab-link.w--current src/app/(en)/sustainability/VsTabs.tsx * ========================================================================== */ :root { --bf-indigo: #444dd0; --bf-red: #e44833; --bf-orange: #ff993e; --bf-yellow: #ffc831; --bf-ink: #1a1a1a; --bf-gray: #f1f1f1; --bf-mark: #adc3f9; --bf-hemp: #2f7d4f; --bf-hemp-deep: #1f412a; --bf-hemp-olive: #6b7a3a; } /* --- 1. Navigation states (were inline styles set by React) ---------------- */ .navigation { background-color: #1a1a1a; transition: background-color .3s ease; } .navigation_container { min-height: 88px; align-items: center; } .brand_link { z-index: 5; } .brand_link img { height: 48px; width: auto; display: block; } .nav_overlay { opacity: 0; pointer-events: none; transition: opacity .4s ease; } .nav_menus { display: flex; transform: translateY(-100%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .nav_links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .nav_link { display: block; line-height: 1.1; transform-origin: left center; opacity: 0; transform: translateX(-18px); transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1), color .3s; } .nav_link:nth-child(2) { transition-delay: .05s; } .nav_link:nth-child(3) { transition-delay: .1s; } .nav_link:nth-child(4) { transition-delay: .15s; } .nav_link:nth-child(5) { transition-delay: .2s; } .nav_link:nth-child(6) { transition-delay: .25s; } .nav_link.w--current { color: var(--bf-yellow); } .burger { display: flex; cursor: pointer; align-self: stretch; } .burger_icon { opacity: 1; transition: opacity .3s; } .burger_close { opacity: 0; transition: opacity .3s; } .nav_socials-container { opacity: 0; transition: opacity .5s ease .25s; } body.nav-open { overflow: hidden; } body.nav-open .nav_overlay { opacity: 1; pointer-events: auto; } body.nav-open .nav_menus { transform: translateY(0); pointer-events: auto; background-color: rgba(26, 26, 26, .55); } body.nav-open .nav_link { opacity: 1; transform: none; } body.nav-open .nav_socials-container { opacity: 1; } body.nav-open .burger_icon { opacity: 0; } body.nav-open .burger_close { opacity: 1; } /* `align-self: stretch` + z-index are the repo's (Navigation.tsx used to set them inline): the container centres its items, and without the stretch the burger's left border stops short of the bar's full height. */ .nav_right { display: flex; align-items: stretch; align-self: stretch; z-index: 5; } .nav_right .lang-switch { align-self: center; margin-right: 24px; } @media screen and (max-width: 767px) { .nav_right .lang-switch { margin-right: 12px; } } /* --- 2. Buttons: the yellow wipe on every square button ------------------- * The Webflow export draws a 100px yellow circle under the button * (.btn_overlay, inset: auto auto -100px 0) and the Next chunk slides it with * translateY — on the live site that circle never becomes visible, so red and * black buttons have no hover. The white CTA button does get the yellow * clip-path wipe (.section_cta …). That wipe is now the house hover for all. */ .button { transition: color .35s; } .button .btn_overlay, .section_cta .button.is-secondary.is-white .btn_overlay, .button.is-secondary.is-quote .btn_overlay { z-index: 0; inset: 0; width: auto; height: auto; border-radius: 0; transform: none; background-color: var(--bf-yellow); clip-path: circle(0% at 0 100%); transition: clip-path .5s; } .button:hover .btn_overlay, .section_cta .button.is-secondary.is-white:hover .btn_overlay, .button.is-secondary.is-quote:hover .btn_overlay { clip-path: circle(141.5% at 0 100%); transform: none; } .button:hover { color: #0b0b0b; } .button.is-line:hover { color: var(--bf-red); } .button.is-line .btn_overlay { display: none; } .btn_text, .button .embed_icon { z-index: 1; position: relative; } .button .embed_icon svg { transition: transform .35s; } .button:hover .embed_icon svg { transform: translateX(4px); } .button.is-white-line { color: #fff; background-color: transparent; border: 1px solid #ffffff8c; } .button.is-white-line:hover { color: #0b0b0b; border-color: var(--bf-yellow); } .arrow_button { text-decoration: none; transition: color .3s; gap: 12px; } .arrow_button:hover { color: #0b0b0b; } .arrow_button .embed_icon svg { transition: transform .35s; } .arrow_button:hover .embed_icon svg { transform: translateX(4px); } /* --- 3. Hand-drawn marks (the identity's expressive marks) ----------------- */ .hero_w-line:before { z-index: -1; } .mark { pointer-events: none; position: absolute; } .mark img { display: block; width: 100%; height: auto; } /* --- 4. Hero (2026): photo, headline with mark, two square buttons, partners */ .section_hero.is-2026 .hero_container { flex-direction: column; justify-content: center; } .section_hero.is-2026 .hero_contant-wrapper { gap: 1.75rem; max-width: 1040px; } .section_hero.is-2026 .hero_bg-image { object-position: center 30%; } .hero_scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,.35) 0%, rgba(26,26,26,.45) 55%, rgba(26,26,26,.8) 100%); } .hero_partners { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; padding: 0 2.5rem; } .hero_partners .overline { font-size: .875rem; letter-spacing: 3px; opacity: .85; } .hero_partners img { display: block; height: 44px; width: auto; filter: brightness(0) invert(1); } .hero_partners img.is-hemptex { height: 40px; } .hero_partners .partner_divider { width: 1px; height: 40px; background: #ffffff66; } /* Desktop only: under 992px bf-responsive.css owns the badge position. */ @media screen and (min-width: 992px) { .section_hero.is-2026 .scroll_more { bottom: 40px; } } @media screen and (max-width: 991px) { .hero_partners { bottom: 28px; gap: 18px; padding-right: 120px; justify-content: flex-start; } .hero_partners img { height: 32px; } .hero_partners img.is-hemptex { height: 30px; } } @media screen and (max-width: 767px) { .section_hero.is-2026 .hero_container { padding-top: 9rem; padding-bottom: 12rem; } .section_hero.is-2026 .scroll_more { display: none; } .hero_partners { padding-right: 1.5rem; padding-left: 1.5rem; bottom: 28px; justify-content: center; } .hero_partners .overline { width: 100%; text-align: center; } } /* --- 5. CiCLO® × Hemptex® film slider -------------------------------------- */ .section_cobrand { z-index: 1; position: relative; background-color: #1a1a1a; overflow: hidden; } .cobrand_stage { position: relative; height: clamp(520px, 78vh, 780px); overflow: hidden; background: #1a1a1a; } .cobrand_track { position: absolute; top: 0; left: 0; height: 100%; width: 200%; display: flex; transform: translateX(0); transition: transform .85s cubic-bezier(.22, .9, .24, 1); } .cobrand_stage.is-hemptex .cobrand_track { transform: translateX(-50%); } .cobrand_panel { position: relative; width: 50%; height: 100%; overflow: hidden; } .cobrand_panel.is-ciclo { background: linear-gradient(180deg, #7b81e4 0%, #444dd0 48%, #262a63 100%); } .cobrand_panel.is-hemptex { background: #10190f; } .cobrand_texture { position: absolute; left: -25%; top: -25%; width: 150%; max-width: none; height: 150%; object-fit: cover; object-position: center 75%; mix-blend-mode: soft-light; opacity: .85; filter: grayscale(1) contrast(1.25) brightness(1.05); animation: bfZoom 18s ease-in-out infinite alternate; } .cobrand_photo { position: absolute; left: -7%; top: -7%; width: 114%; max-width: none; height: 114%; object-fit: cover; object-position: 42% center; filter: brightness(1.22) saturate(1.05); animation: bfZoom 19s ease-in-out infinite alternate-reverse; } .cobrand_scrim { position: absolute; inset: 0; } .cobrand_panel.is-ciclo .cobrand_scrim { background: linear-gradient(180deg, rgba(68,77,208,0) 40%, rgba(26,26,26,.45) 100%); } .cobrand_panel.is-hemptex .cobrand_scrim { background: linear-gradient(180deg, rgba(31,65,42,.18) 0%, rgba(16,29,20,.3) 55%, rgba(8,15,10,.62) 100%); } .cobrand_sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%); transform: translateX(-190%) skewX(-14deg); animation: bfSheen 9s ease-in-out .6s infinite; } .cobrand_panel.is-hemptex .cobrand_sheen { animation-delay: 1s; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%); } .cobrand_lockup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; animation: bfFloat 6.5s ease-in-out infinite alternate; pointer-events: none; } .cobrand_lockup .is-bf { height: clamp(88px, 11vw, 140px); max-height: 18vh; width: auto; display: block; } .cobrand_lockup .is-x { font-family: var(--primary-font); font-weight: 500; font-size: 34px; color: #fff; line-height: 1; } .cobrand_lockup .is-ciclo-logo { width: clamp(280px, 30vw, 480px); max-width: 60vw; height: auto; display: block; filter: brightness(0) invert(1); } .cobrand_lockup .is-hemptex-logo { width: clamp(300px, 34vw, 540px); max-width: 70vw; height: auto; display: block; filter: brightness(0) invert(1); } .cobrand_stage.is-playing .cobrand_lockup { opacity: 0; } /* play button = the export's own .play_video (yellow ring, fills yellow on hover) */ .cobrand_play { z-index: 4; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: transparent; border: 0; padding: 0; cursor: pointer; } .cobrand_play .play_video { position: relative; background: rgba(26,26,26,.25); backdrop-filter: blur(2px); transition: color .35s; } .cobrand_play .play_overlay { transform: scale(0); transition: transform .45s cubic-bezier(.22, 1, .36, 1); } .cobrand_play:hover .play_overlay { transform: scale(1); } .cobrand_play:hover .play_video { color: #0b0b0b; } .cobrand_play .play_video-text { font-size: 13px; letter-spacing: 1px; line-height: 1.3; text-align: center; } .cobrand_stage.is-playing .cobrand_play { display: none; } .cobrand_video { position: absolute; inset: 0; z-index: 5; background: #000; display: none; } .cobrand_stage.is-playing .cobrand_video { display: block; } .cobrand_video iframe { width: 100%; height: 100%; border: 0; display: block; } .cobrand_close { position: absolute; top: 20px; right: 20px; z-index: 6; } .cobrand_stage:not(.is-playing) .cobrand_close { display: none; } .cobrand_bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px 2.5rem; background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.7) 100%); pointer-events: none; } .cobrand_stage.is-playing .cobrand_bar { display: none; } .cobrand_caption { display: flex; flex-direction: column; gap: 4px; } .cobrand_caption .overline { font-size: 1rem; } .cobrand_caption p { font-family: var(--primary-font); color: #ffffffc7; font-size: 1rem; margin: 0; } .cobrand_toggles { display: flex; gap: 8px; pointer-events: auto; } .cobrand_toggle { font-family: var(--primary-font); font-weight: 700; font-size: .8125rem; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: rgba(26,26,26,.45); border: 1px solid #ffffff8c; padding: 12px 18px; cursor: pointer; transition: all .25s; } .cobrand_toggle:hover { border-color: var(--bf-yellow); } .cobrand_toggle.is-active { background: var(--bf-yellow); border-color: var(--bf-yellow); color: #0b0b0b; } .cobrand_progress { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--bf-yellow); z-index: 6; } .cobrand_stage.is-running .cobrand_progress { animation: bfProgress 6s linear infinite; } .cobrand_stage.is-playing .cobrand_progress, .cobrand_stage.is-paused .cobrand_progress { display: none; } @keyframes bfZoom { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.15) translate(-1.5%, 1.3%); } } @keyframes bfSheen { 0% { transform: translateX(-190%) skewX(-14deg); } 46% { transform: translateX(330%) skewX(-14deg); } 100% { transform: translateX(330%) skewX(-14deg); } } @keyframes bfFloat { from { transform: translateY(3px); } to { transform: translateY(-5px); } } @keyframes bfProgress { from { width: 0; } to { width: 100%; } } @media screen and (max-width: 767px) { .cobrand_stage { height: 70vh; min-height: 480px; } .cobrand_bar { padding: 20px 1.25rem; } .cobrand_lockup { gap: 18px; } .cobrand_lockup .is-x { font-size: 24px; } .play_video.is-cobrand { width: 100px; height: 100px; } } /* --- 6. "As seen in" press marquee ---------------------------------------- */ .section_press { z-index: 1; position: relative; background-color: #fff; padding-top: 4rem; padding-bottom: 4rem; overflow: hidden; border-bottom: 1px solid #e6e6e6; } .press_header { text-align: center; margin-bottom: 2.5rem; } .press_header .overline { letter-spacing: 4px; font-size: 1rem; } .section_press .marquee { gap: 0; } .section_press .marquee_mover { gap: 0; animation-duration: 42s; } .section_press .marquee:hover .marquee_mover { animation-play-state: paused; } .press_item { flex: none; display: flex; align-items: center; justify-content: center; min-width: 190px; height: 76px; padding: 0 28px; text-decoration: none; color: #6b6c7e; } .press_item img { display: block; height: 36px; width: auto; max-width: 200px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; } .press_item img.is-tall { height: 46px; } .press_item img.is-short { height: 28px; } .press_item:hover img { filter: none; opacity: 1; } .press_wordmark { font-family: var(--primary-font); font-weight: 800; font-size: 1.375rem; letter-spacing: -.5px; white-space: nowrap; color: #6b6c7e; transition: color .2s; } .press_wordmark.is-serif { font-family: "Bodoni 72", "Didot", Georgia, serif; font-weight: 700; letter-spacing: 4px; font-size: 1.75rem; } .press_item:hover .press_wordmark { color: var(--bf-indigo); } .press_footer { display: flex; justify-content: center; margin-top: 2.5rem; } /* --- 7. Custom flags hover (was an inline