/* ============================================================
Flahoo Lifestyle rebuild -- shared component stylesheet.
[Claude] 2026-10-11T -- Anthony approved the lifestyle mood-board
direction (full brand review artifact + a provided moodboard image),
then "Let's proceed but don't change the logo yet" (AskUserQuestion:
"All four (Home, Shop, Product, Collections)" built for real).
This file is ADDITIVE and loaded after style.css (see header.php's
matching [v16] edit log) -- nothing in style.css is touched or
removed. It reuses the Phase 0 brand tokens already defined in
style.css's own :root block (--flahoo-red, --flahoo-off-white,
--flahoo-pink-tint, --flahoo-grey-light, --flahoo-charcoal,
--flahoo-near-black, --flahoo-radius-card, --flahoo-radius-pill,
--flahoo-shadow-card/-hover) rather than inventing competing colour
tokens, and adds only the handful of genuinely new ones below (a
softer/fainter text tone, a gold accent for the premium section, a
hairline border colour, and a larger card radius for the big photo
tiles this layer introduces).
Every selector here is a NEW class (fl_ prefix, this project's own
snake_case convention) added to the page templates alongside their
existing classes -- no existing class in style.css is restyled or
renamed, and no PHP data loop this file's markup depends on is
changed by adding these classes. See home.php's own [v22] entry for
the first page built on this layer.
Typography: ORIGINALLY Fraunces (display/headlines) + Plus Jakarta
Sans (body/UI) -- loaded via Google Fonts in header.php's own [v16]
entry. [Claude] 2026-10-11T, later same day -- Anthony: "I don't
like the fonts - I think the Flahoo fonts before are better."
REVERTED: every font-family below now points back to the site's
own self-hosted family (proxima_nova_rgbold / proxima_nova_rgregular
-- see style.css's own @font-face block, backed by the Nemesis
webfont files in assets/fonts/), matching whatever weight the rule
already called for (700/800/bold -> rgbold, everything else ->
rgregular). Nothing else changed -- every layout, colour, spacing
and photography decision this file made stays exactly as it was;
this was a typography-only request. The Google Fonts for
Fraunces/Plus Jakarta Sans is removed in header.php's own [v17]
entry, since nothing on the site uses them any more after this.
[Claude] 2026-10-11T -- Anthony, live on /uk/home: "when you resize it
goes to small and the image becomes focus on the body and not the
face". The hero photo (assets/images/lifestyle/hero.jpg, 1204x1400,
face sits in roughly the top fifth of the frame) was relying on
.fl_photo_fill's shared default object-position (50% 50%, dead
centre) -- fine at full desktop width, where .fl_hero_photo is tall
(min-height:600px, stretched by the grid), but at the single-column
breakpoint (<=900px) the frame gets much shorter and wider relative
to the photo, and a dead-centre crop landed on the collarbone/chest
instead of the face. Fixed below with a hero-specific override
(50% 15%) scoped to .fl_hero_photo .fl_photo_fill only -- NOT a
change to the shared .fl_photo_fill default itself, which several
other sections below (department tiles, premium banner, editorial
cards) also use with their own different images and framing needs.
Confirmed live at mobile (375px), tablet (768px, the width that
showed the bug) and desktop (1440px) widths.
============================================================ */
:root {
--flahoo-ink-soft: #4a4347;
--flahoo-ink-faint: #8b8488;
--flahoo-gold: #cda45e;
--flahoo-line: rgba(34, 37, 42, 0.09);
--flahoo-radius-lg: 22px;
}
.fl_display {
font-family: 'proxima_nova_rgbold', sans-serif;
letter-spacing: -0.01em;
text-wrap: balance;
}
.fl_eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--flahoo-red-dark);
}
.fl_eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--flahoo-red-dark); }
/* ---------------- Photo-fill helper: a real ![]()
behind any card's
text, with a bottom-up dark gradient for legibility. Used by the
hero, the department/mood tiles, the premium banner, the "edit"
cards and the editorial/magazine cards below. ---------------- */
.fl_photo_fill {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
.fl_photo_overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg, rgba(10,8,10,.68) 0%, rgba(10,8,10,0) 55%);
border-radius: inherit;
pointer-events: none;
}
/* ================= HERO ================= */
.fl_hero {
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: stretch;
min-height: 600px;
}
@media (max-width: 900px) { .fl_hero { grid-template-columns: 1fr; min-height: auto; } }
.fl_hero_copy {
display: flex; flex-direction: column; justify-content: center;
padding: clamp(32px,6vw,72px) clamp(20px,5vw,56px);
gap: 20px;
/* [Claude] 2026-10-12T -- Phase 5a, see .fl_trust_item's own edit
below for the full root-cause story (Anthony: "The Free to use etc
icons and wording should be... never truncated if the window is
made smaller"). A CSS grid item's implicit minimum width defaults
to its content's natural (unwrapped) width, not 0 -- without this,
a narrow window could force .fl_hero's whole 2-column grid wider
than the viewport rather than letting this column actually shrink,
silently clipping anything inside it once body-level overflow
hides the excess. */
min-width: 0;
}
.fl_hero_copy h1 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: clamp(36px,5.6vw,64px);
line-height: 1.0;
font-weight: 500;
color: var(--flahoo-near-black);
margin: 0;
}
.fl_hero_copy h1 em { font-style: italic; color: var(--flahoo-red); }
.fl_hero_copy p.fl_hero_sub {
font-family: 'proxima_nova_rgregular', sans-serif;
font-size: 16px;
color: var(--flahoo-charcoal);
max-width: 380px;
line-height: 1.55;
margin: 0;
}
.fl_hero_stats { display: flex; gap: clamp(18px, 4vw, 30px); padding-top: 4px; }
.fl_hero_stats div, .fl_hero_stats a { display: flex; flex-direction: column; }
/* [Claude] 2026-10-12T -- Phase 5a (Anthony, home page, instructing
directly): "Th3 trusted stores number should link to the stores
directory and the new deais should also link. Make this wording more
prominent." .fl_n bumped from 20px/600 to a clamp up to 26px/700 (scales
down on narrow phones so it can never force the 3-stat row to overflow
-- see .fl_hero_stats' own clamp()'d gap above, same reasoning) and
.fl_l from 11px to 12px/600 -- both read noticeably more prominent
without needing a layout change, .fl_hero_stats is still the same
plain flex row. The 2 now-linked stats (home.php's own [Claude]
2026-10-12T entry, right below $hero_stats' own markup) reuse this
same div-replaced-by- styling via the ", .fl_hero_stats a" selector
added above and the .fl_hero_stat_link rules just below -- colour/
layout stay identical to the plain (non-link) 3rd stat, so the row
doesn't visually split into "2 look like buttons, 1 doesn't". */
.fl_hero_stats .fl_n { font-family: 'proxima_nova_rgbold', sans-serif; font-size: clamp(18px, 6vw, 26px); font-weight: 700; color: var(--flahoo-near-black); }
.fl_hero_stats .fl_l { font-size: 12px; font-weight: 600; color: var(--flahoo-ink-faint); font-family: 'proxima_nova_rgregular', sans-serif; }
.fl_hero_stats a.fl_hero_stat_link {
text-decoration: none; color: inherit; cursor: pointer;
}
/* [Claude] 2026-10-12T -- Phase 5b (Anthony: "I don't want underlink
links. change colout the the flahoo pink."). Swapped the hover-
underline for a flahoo-pink colour change instead -- same --flahoo-red
token "Spend Less." already uses.
[Claude] 2026-10-12T -- Phase 5c correction (Anthony: "The links need
to start black and turn to flahoo pink on hover"). Phase 5b made the
colour permanent -- overcorrected. Moved to :hover only, same as any
ordinary link: black (inherited near-black) at rest, pink on hover. */
.fl_hero_stats a.fl_hero_stat_link .fl_n {
transition: color .15s ease;
}
.fl_hero_stats a.fl_hero_stat_link:hover .fl_n {
color: var(--flahoo-red);
}
.fl_hero_photo { position: relative; background: #2a1118; min-height: 320px; }
/* Anchors the crop toward the top of the frame, where this photo's
face actually is -- see this file's own header note above. Scoped to
the hero specifically; .fl_photo_fill's own default (50% 50%) is
left alone for every other section reusing that helper class. */
.fl_hero_photo .fl_photo_fill { object-position: 50% 15%; }
.fl_hero_float_card {
position: absolute; left: 24px; bottom: 24px; z-index: 2;
background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
border-radius: 14px; padding: 13px 15px; width: 210px;
box-shadow: 0 16px 36px rgba(22,19,22,0.22);
font-family: 'proxima_nova_rgregular', sans-serif;
}
.fl_hero_float_card .fl_store { font-size: 10.5px; color: var(--flahoo-ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.fl_hero_float_card .fl_name { font-size: 12.5px; font-weight: 700; margin: 3px 0 6px; color: var(--flahoo-near-black); }
.fl_hero_float_card .fl_now { font-family: 'proxima_nova_rgbold', sans-serif; font-weight: 600; font-size: 16px; color: var(--flahoo-near-black); }
.fl_hero_float_card .fl_was { font-size: 11px; color: var(--flahoo-ink-faint); text-decoration: line-through; margin-left: 6px; }
.fl_hero_topchip {
position: absolute; top: 20px; right: 20px; z-index: 2;
background: rgba(255,255,255,0.92); font-size: 11px; font-weight: 700;
color: var(--flahoo-near-black); padding: 6px 12px; border-radius: var(--flahoo-radius-pill);
font-family: 'proxima_nova_rgbold', sans-serif;
}
/* ================= DEPARTMENT / MOOD TILES ================= */
.fl_dept_rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 900px) { .fl_dept_rail { grid-template-columns: repeat(2,1fr); } }
.fl_dept_tile {
border-radius: var(--flahoo-radius-lg);
aspect-ratio: 3/4; position: relative; overflow: hidden;
display: flex; align-items: flex-end; padding: 16px; color: #fff;
background: #20151a;
}
.fl_dept_tile h3 {
position: relative; z-index: 2; font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 18px; font-weight: 600; margin: 0;
}
.fl_dept_tile .fl_cnt { position: relative; z-index: 2; font-size: 11px; opacity: .9; margin-top: 3px; font-family: 'proxima_nova_rgregular', sans-serif; }
/* ================= PREMIUM BANNER ================= */
.fl_premium { background: linear-gradient(180deg,#191418,#0e0b0e); color: #f3ede9; }
.fl_premium_inner { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding-block: 72px; }
@media (max-width: 900px) { .fl_premium_inner { grid-template-columns: 1fr; padding-block: 48px; gap: 26px; } }
.fl_premium_copy .fl_eyebrow { color: var(--flahoo-gold); }
.fl_premium_copy .fl_eyebrow::before { background: var(--flahoo-gold); }
.fl_premium_copy h2 { font-family: 'proxima_nova_rgbold', sans-serif; font-size: clamp(26px,3.6vw,40px); font-weight: 500; color: #fff; line-height: 1.08; margin: 12px 0 14px; }
.fl_premium_copy p { color: #c9c0c5; font-size: 14.5px; max-width: 420px; line-height: 1.6; margin: 0 0 20px; font-family: 'proxima_nova_rgregular', sans-serif; }
.fl_btn_gold {
display: inline-flex; align-items: center; gap: 8px;
background: var(--flahoo-gold); color: #1d1710; font-weight: 700; font-size: 13px;
padding: 13px 22px; border-radius: var(--flahoo-radius-pill); border: none; cursor: pointer;
font-family: 'proxima_nova_rgbold', sans-serif; text-decoration: none;
}
.fl_premium_photo { aspect-ratio: 4/3; border-radius: var(--flahoo-radius-lg); position: relative; background: #1a1410; overflow: hidden; }
.fl_premium_tag {
position: absolute; z-index: 2; top: 16px; left: 16px;
background: var(--flahoo-gold); color: #1d1710; font-size: 10.5px; font-weight: 800;
padding: 5px 11px; border-radius: var(--flahoo-radius-pill); font-family: 'proxima_nova_rgbold', sans-serif;
}
/* ================= EDIT CARDS (featured product spotlights) ================= */
.fl_edit_grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .fl_edit_grid { grid-template-columns: 1fr; } }
.fl_edit_card {
border-radius: var(--flahoo-radius-lg); position: relative; overflow: hidden;
min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
padding: 20px; background: #20151a; color: #fff; text-decoration: none;
}
.fl_edit_card.fl_short { min-height: 178px; }
.fl_edit_card .fl_badge {
position: relative; z-index: 2; align-self: flex-start;
background: #fff; color: var(--flahoo-near-black); font-size: 10.5px; font-weight: 800;
padding: 4px 11px; border-radius: var(--flahoo-radius-pill); margin-bottom: auto;
font-family: 'proxima_nova_rgbold', sans-serif;
}
.fl_edit_card .fl_body { position: relative; z-index: 2; }
.fl_edit_card .fl_store { font-size: 10.5px; opacity: .85; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-family: 'proxima_nova_rgbold', sans-serif; }
.fl_edit_card .fl_title { font-family: 'proxima_nova_rgbold', sans-serif; font-size: 18px; font-weight: 600; margin: 5px 0 9px; line-height: 1.15; }
.fl_edit_card .fl_now { font-size: 17px; font-weight: 700; font-family: 'proxima_nova_rgbold', sans-serif; }
.fl_edit_card .fl_was { font-size: 11.5px; opacity: .7; text-decoration: line-through; margin-left: 7px; font-family: 'proxima_nova_rgregular', sans-serif; }
/* ================= DEPARTMENT / SHOP PAGE HERO ================= */
/* [Claude] 2026-10-12T [Quiet Confidence Phase 4] -- Anthony: "all hero
banner photos should be stylish, follow the same theme throughout,
and be flush so there is no white spaces or curves." Checked live:
this banner was already full-bleed (0 side margin at every width
tested, 375-1990px) -- the only real "curve" was this rule's own
border-radius, removed below. The "same theme" photo mismatch (the
audit's "generic coding-desk stock photo" finding) is fixed in
shop.php/stores.php/pins.php -- see their own edit-log entries. */
/* [Claude] 2026-10-12T [Quiet Confidence Phase 4c -- alignment pass]
-- Anthony: "ensure all things align on the page on the left: logo,
menu starting with shop, hero text, shop by department and the rest."
This hero's text was padded a flat 30px from the edge while the
header logo/nav bar sits well to the right of that (135px/56px
depending on page -- see the matching header/.top_background3 edits
in this same pass) -- a real, measured misalignment, not a vague
one: confirmed via getBoundingClientRect() before touching anything.
Switched to the SAME clamp(20px,5vw,56px) left/right inset this file
already uses for the home hero's own copy column and (as of this
pass) the site's logo bar and Shop/Brands/Stores nav row, so this
banner's eyebrow/heading/paragraph now share one consistent left
edge with everything above them, on every page that renders this
hero (Shop/Stores/Collections), at every width. */
.fl_page_hero {
position: relative; overflow: hidden;
min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end;
padding: 26px clamp(20px, 5vw, 56px); color: #fff; background: #1c1418;
}
.fl_page_hero::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(10,8,10,.78) 10%, rgba(10,8,10,.25) 65%);
}
.fl_page_hero .fl_eyebrow { color: #ffd9de; position: relative; z-index: 2; }
.fl_page_hero .fl_eyebrow::before { background: #ffd9de; }
/* [Claude] 2026-10-12T -- Anthony: "drop the - from shop flahoo". Same
small hyphen-like ::before mark already removed from the home hero's
eyebrow (see .fl_hero_copy .fl_eyebrow::before below) -- scoped here
to the Shop page's own eyebrow only, via a modifier class on its
span (shop.php), since Stores/Collections share this same .fl_eyebrow
base rule and weren't mentioned. */
.fl_page_hero .fl_eyebrow_no_dash::before { display: none; }
.fl_page_hero h1 { position: relative; z-index: 2; font-family: 'proxima_nova_rgbold', sans-serif; font-size: clamp(26px,3.6vw,42px); font-weight: 500; color: #fff; margin: 8px 0 0; }
.fl_page_hero p { position: relative; z-index: 2; color: #e4e2e6; font-size: 13.5px; max-width: 420px; margin-top: 8px; font-family: 'proxima_nova_rgregular', sans-serif; }
/* Per-photo crop focus overrides -- .fl_photo_fill's shared default
object-position (50% 50%) crops some of this library's photos
(people shot off-centre, facing down-frame) into an unrecognisable
abstract close-up on this very wide/short banner. Live-tested at
desktop (1440px, the tightest crop) and mobile (375px) before
picking these two: fl_photo_pos_model keeps mood_weekend.jpg's
model's face in frame; fl_photo_pos_fallback does the same for
mag_fashion.jpg, used wherever no department-specific photo exists
yet (see shop.php/stores.php/pins.php). Every other photo used here
already reads correctly at the shared default and is left alone. */
.fl_page_hero .fl_photo_pos_model { object-position: 55% 18%; }
.fl_page_hero .fl_photo_pos_fallback { object-position: 55% 5%; }
/* [Claude] 2026-10-12T [Quiet Confidence Phase 4b] -- Anthony: "let
every department get their own photo". The 7 departments without a
confirmed-good wide/portrait photo (see shop.php's [v12] comment)
use the square department-tile photos instead (assets/images/
lifestyle/departments/*.jpg -- already sourced and approved for the
homepage rail), but a plain object-fit:cover crop of a square photo
into this very wide/short banner is an unrecognisable close-up
(confirmed live testing electronics.jpg earlier). Two-layer "contain
over blurred cover" treatment instead: fl_photo_bg fills the whole
banner, blurred/darkened, as a backdrop; fl_photo_fg sits on top at
object-fit:contain, showing the FULL photo undistorted, letterboxed
by the blur rather than cropped. Live-tested on all 7 photos plus
electronics.jpg (reusing it as the generic hard case) at 1440px and
375px before writing -- every one reads clearly. .fl_page_hero's own
overflow:hidden keeps the scaled blur from spilling past the edges. */
.fl_page_hero .fl_photo_bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
filter: blur(24px) brightness(0.65) saturate(1.1);
transform: scale(1.15);
}
.fl_page_hero .fl_photo_fg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; z-index: 0;
}
/* ================= EDITORIAL / MAGAZINE STRIP ================= */
.fl_mag_grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .fl_mag_grid { grid-template-columns: 1fr; } }
.fl_mag_card { border-radius: var(--flahoo-radius-lg); overflow: hidden; background: #fff; box-shadow: var(--flahoo-shadow-card); display: block; text-decoration: none; color: inherit; }
.fl_mag_cover { aspect-ratio: 16/10; position: relative; display: flex; align-items: flex-end; padding: 14px; background: #20151a; }
.fl_mag_cover span { position: relative; z-index: 2; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-family: 'proxima_nova_rgbold', sans-serif; }
.fl_mag_body { padding: 15px 16px 18px; }
.fl_mag_body h3 { font-family: 'proxima_nova_rgbold', sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.3; margin: 0 0 5px; color: var(--flahoo-near-black); }
.fl_mag_body p { font-size: 12px; color: var(--flahoo-ink-soft); margin: 0; line-height: 1.5; font-family: 'proxima_nova_rgregular', sans-serif; }
/* ================= PRODUCT PAGE ================= */
.fl_pp_layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; align-items: start; }
@media (max-width: 900px) { .fl_pp_layout { grid-template-columns: 1fr; gap: 20px; } }
.fl_pp_photo { aspect-ratio: 1/0.92; border-radius: var(--flahoo-radius-lg); position: relative; background: #eee; overflow: hidden; }
.fl_pp_why {
font-size: 13px; color: var(--flahoo-ink-soft); line-height: 1.6; max-width: 440px;
margin: 18px 0; padding: 15px 17px; background: #fff; border-radius: 14px; border: 1px solid var(--flahoo-line);
font-family: 'proxima_nova_rgregular', sans-serif;
}
.fl_pp_why strong { color: var(--flahoo-near-black); }
/* ================= COLLECTIONS (Saved Collections / Pins) ================= */
.fl_coll_grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 900px) { .fl_coll_grid { grid-template-columns: 1fr; } }
.fl_coll_card {
border-radius: var(--flahoo-radius-lg); position: relative; aspect-ratio: 16/11; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff;
background: #20151a; text-decoration: none;
}
.fl_coll_card h3 { position: relative; z-index: 2; font-family: 'proxima_nova_rgbold', sans-serif; font-size: 19px; font-weight: 600; margin: 0; }
.fl_coll_card .fl_meta { position: relative; z-index: 2; font-size: 11.5px; opacity: .9; margin-top: 4px; font-family: 'proxima_nova_rgregular', sans-serif; }
/* ================= Shared section rhythm ================= */
.fl_section { padding-block: 56px; }
/* [Claude] 2026-10-12T [Phase 4c] -- same alignment pass as the header/
nav/hero rules above. .fl_section.container wraps every repeating
home-page section ("Shop by Department", "Daily Offers", "The Flahoo
Edit", "Stay in the Loop") in Bootstrap's own stepped .container
(150px left edge at 1440px via its 15px column gutter) -- one more
value that didn't match the logo/nav/hero's new shared inset. Scoped
to .fl_section.container specifically (not bare .container, which is
reused all over the site for unrelated layout -- footer, sidebar,
modals -- that this pass isn't touching) so only these four sections
move. */
.fl_section.container {
width: auto; max-width: none; margin: 0;
padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px);
}
.fl_section_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.fl_section_head h2 { font-family: 'proxima_nova_rgbold', sans-serif; font-size: clamp(22px,3vw,32px); font-weight: 500; color: var(--flahoo-near-black); margin: 0; }
.fl_section_head p.fl_kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--flahoo-red-dark); margin: 0 0 6px; font-family: 'proxima_nova_rgbold', sans-serif; }
.fl_viewall { font-size: 12.5px; font-weight: 700; color: var(--flahoo-near-black); border-bottom: 1px solid var(--flahoo-near-black); padding-bottom: 2px; text-decoration: none; font-family: 'proxima_nova_rgbold', sans-serif; white-space: nowrap; }
/* ================= RESTYLE: existing Deal Score / Our Daily Offers
tab system (home.php) -- CSS ONLY, per Anthony's "keep the tabs,
restyle them" answer. Every selector below targets a class that
already exists in home.php/style.css; none of this file's new fl_*
classes needed to be added to that markup for this part. [Claude]
2026-10-11T, home.php's own [v22] edit log. ================= */
.red_nav .title_promo .title {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 500;
letter-spacing: -0.01em;
}
.red_nav .title_promo .promo .promo_text {
font-family: 'proxima_nova_rgregular', sans-serif;
}
/* [Claude] 2026-10-12T [v40] -- the .nav.nav-tabs block that used to sit
here ([v22], 2026-10-11) is REMOVED. It was a now-superseded first
pass at this tab bar (underline tabs on transparent bg). [v27]
(2026-10-11, below at .fl_deals_tabs) replaced it with light pill
buttons -- but [v27] never removed this old rule, and because
".nav.nav-tabs > li.active > a" has higher CSS specificity (3
classes) than ".fl_deals_tabs > li.active > a" (2 classes), the OLD
underline style was still winning on the live site regardless of
source order -- confirmed via getComputedStyle() on
https://www.flahoo.com/uk/home showing transparent background /
top-corners-only radius on the active tab instead of the intended
solid red pill. Deleting the dead rule (home.php's tabs are the only
place "nav-tabs" is used in the templates, confirmed by grep) lets
the v27 pill design apply as originally intended. */
.deal_section_subheading {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 600;
letter-spacing: -0.005em;
}
.deal_section_subheading_link {
color: var(--flahoo-red-dark);
}
/* ================= RESTYLE: existing Shop page filter sidebar / heading
(shop.php) -- CSS ONLY, same "keep the tabs, restyle them" discipline
carried over from home.php. Every selector below targets a class that
already exists in shop.php/style.css; no markup there needed to
change. [Claude] 2026-10-11T, shop.php's own [v11] edit log. ================= */
.search-results-header {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 500;
letter-spacing: -0.01em;
}
.sidebar-heading {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 700;
letter-spacing: .03em;
color: var(--flahoo-near-black);
}
.active_filters_breadcrumb .active_filter_chip {
font-family: 'proxima_nova_rgregular', sans-serif;
border-radius: var(--flahoo-radius-pill);
}
.active_filters_breadcrumb .clear_all_filters {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 700;
}
/* ================= RESTYLE: existing Product page (product.php) -- CSS
ONLY, same discipline as home.php/shop.php. This page shows a real,
specific product's own real photo/price/offers -- no new photography
or invented content added here, just typography/colour on the
classes that already exist. [Claude] 2026-10-11T, see home.php's own
[v22] edit log for the wider context (no markup edit was needed in
product.php itself for this page). ================= */
.p_title h2 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 500;
letter-spacing: -0.01em;
}
.p_title h3 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 600;
color: var(--flahoo-ink-soft);
}
.p_badge_row .hot_deal_pill {
/* [Claude] rgbold here, not rgregular -- this rule never declares its
own font-weight, but it overrides style.css's base .hot_deal_pill
rule, which already pairs proxima_nova_rgbold with font-weight:
bold. rgregular would have been a font this badge never actually
had, not a revert to it. */
font-family: 'proxima_nova_rgbold', sans-serif;
border-radius: var(--flahoo-radius-pill);
}
.item_price.p_item_price .item_price_now {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 600;
}
.p_cta_row .p_cta_primary {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 700;
border-radius: var(--flahoo-radius-pill);
letter-spacing: .01em;
}
#p_offers_table {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 500;
}
/* ================= RESTYLE: existing Stores directory + Store profile
pages (stores.php, store.php) -- CSS ONLY, same "keep it, restyle it"
discipline as every other RESTYLE section above. stores.php also gets a
new fl_page_hero banner (see its own [v5] edit log entry, markup
already covered by the rules above); store.php gets CSS-only treatment
here -- it already shows the real merchant's own logo as its hero
content, so no new/invented photography is added for it. Every
selector below targets a class that already exists in stores.php/
store.php/style.css (several, e.g. .store-card-profile-btn/
.store-profile-shop-btn, are shared between the two pages' markup
already). [Claude] 2026-10-11T. ================= */
.store-profile-heading h1 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 500;
letter-spacing: -0.01em;
}
.store-profile-department-badge {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 700;
}
.store-profile-section-heading {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 500;
letter-spacing: -0.01em;
}
.store-stat-count {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 600;
}
.store-profile-shop-btn,
.store-profile-view-all-btn,
.store-card-profile-btn {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 700;
letter-spacing: .01em;
}
.store-filter-label,
.store-filter-search-group input[type="text"],
.store-filter-select {
font-family: 'proxima_nova_rgregular', sans-serif;
}
.store-filter-reset {
font-family: 'proxima_nova_rgbold', sans-serif;
font-weight: 700;
}
/* ================= "OUR DAILY OFFERS" -- CLEAN TAB BAR =================
[Claude] 2026-10-11T [v27] -- Anthony's moodboard punch list, Phase A.
The loud red .red_nav banner this section used to live in is gone --
see home.php's own [v27] entry, which moved the heading to a plain
.fl_section_head (styled by the shared rule above, no CSS needed
here) and the tabs to sit directly on the page's white background.
Only the tab bar itself needs its own rule: light pill buttons,
replacing the old translucent-white-on-red pills. .nav-tabs/.tab-
pane/.active class names and the data-toggle="tab" markup Bootstrap's
JS binds to are UNCHANGED, this is visual only -- same discipline as
before. */
.fl_deals_tabs {
border-bottom: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 28px;
padding: 0;
}
.fl_deals_tabs > li { float: none; margin: 0; }
.fl_deals_tabs > li > a {
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .02em;
color: var(--flahoo-charcoal);
background: var(--flahoo-grey-light);
border: none;
border-radius: var(--flahoo-radius-pill);
padding: 9px 18px;
margin: 0;
}
.fl_deals_tabs > li > a:hover {
background: var(--flahoo-pink-tint);
color: var(--flahoo-red-dark);
}
.fl_deals_tabs > li.active > a,
.fl_deals_tabs > li.active > a:hover,
.fl_deals_tabs > li.active > a:focus {
background: var(--flahoo-red);
color: #fff;
border: none;
/* [Claude] 2026-10-12T [v40] -- explicit pill radius here, tied in
specificity with style.css's old bootstrap ".nav-tabs > li.active
> a { border-radius:5px; }" (and its 768px media override that
zeroed the bottom corners) but loaded after it, so this wins the
tie and the active tab gets the same full pill shape as the
inactive ones instead of top-rounded-only corners. */
border-radius: var(--flahoo-radius-pill);
}
/* ================= "STAY IN THE LOOP" SIGNUP =================
[Claude] 2026-10-11T [v28] -- Anthony's moodboard punch list, Phase A.
The newsletter form moved out of the old red deals banner into its
own section (home.php's own [v28] entry) -- same form, same CSRF
field, same flashdata states, just a new tint-background + photo
layout matching the reference images' "Stay in the Loop" panel. */
.fl_signup_section {
background: var(--flahoo-pink-tint);
padding-block: 56px;
}
.fl_signup_grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) { .fl_signup_grid { grid-template-columns: 1fr; gap: 28px; } }
.fl_signup_copy h2 {
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: clamp(24px,3.4vw,36px);
font-weight: 500;
color: var(--flahoo-near-black);
line-height: 1.12;
margin: 6px 0 12px;
}
.fl_signup_sub {
font-family: 'proxima_nova_rgregular', sans-serif;
font-size: 14.5px;
color: var(--flahoo-charcoal);
max-width: 460px;
line-height: 1.55;
margin: 0 0 20px;
}
.fl_signup_benefits {
display: flex;
flex-wrap: wrap;
gap: 18px 28px;
margin-bottom: 26px;
}
.fl_signup_benefit {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 12.5px;
color: var(--flahoo-near-black);
max-width: 110px;
}
.fl_signup_benefit svg {
width: 22px;
height: 22px;
color: var(--flahoo-red);
padding: 9px;
background: #fff;
border-radius: 50%;
box-sizing: content-box;
}
.fl_signup_msg {
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 13px;
color: var(--flahoo-red-dark);
margin: 0 0 12px;
}
.fl_signup_msg_success { color: #1f7a43; }
.fl_signup_form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.fl_signup_field {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border-radius: var(--flahoo-radius-pill);
padding: 0 16px;
flex: 1 1 260px;
min-width: 220px;
}
.fl_signup_field svg { width: 17px; height: 17px; color: var(--flahoo-ink-faint); flex: 0 0 auto; }
.fl_signup_field input {
border: none;
background: transparent;
outline: none;
font-family: 'proxima_nova_rgregular', sans-serif;
font-size: 14px;
padding: 13px 0;
width: 100%;
}
.fl_signup_btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--flahoo-red);
color: #fff;
border: none;
border-radius: var(--flahoo-radius-pill);
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 13.5px;
font-weight: 700;
padding: 0 24px;
cursor: pointer;
flex: 0 0 auto;
}
.fl_signup_btn:hover { background: var(--flahoo-red-dark); }
.fl_signup_legal {
font-family: 'proxima_nova_rgregular', sans-serif;
font-size: 11.5px;
color: var(--flahoo-ink-faint);
margin: 0;
}
.fl_signup_legal a { color: var(--flahoo-charcoal); text-decoration: underline; }
.fl_signup_photo {
position: relative;
border-radius: var(--flahoo-radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
background: #2a1118;
}
.fl_signup_photo_chip {
position: absolute; left: 18px; bottom: 18px; z-index: 2;
background: rgba(255,255,255,0.92); font-size: 12px; font-weight: 700;
color: var(--flahoo-near-black); padding: 7px 14px; border-radius: var(--flahoo-radius-pill);
font-family: 'proxima_nova_rgbold', sans-serif;
}
/* ================= "TRUSTED BY" BRAND STRIP =================
[Claude] 2026-10-11T [v29] -- Anthony's moodboard punch list, Phase A
(a scrollable brand-logo strip). Plain text wordmarks, not each
brand's logo_url image -- a good number of brands in $popular_brands
have no logo on file (the mobile Popular Brands row above already
has a badge-initial fallback for exactly this reason), and a strip
that's meant to read at a glance shouldn't mix real logos with
fallback-initial badges. Horizontal scroll, same mechanics as the
department rail above (flex + overflow-x:auto, hidden scrollbar). */
.fl_brand_strip_section {
background: #fff;
border-top: 1px solid var(--flahoo-line);
border-bottom: 1px solid var(--flahoo-line);
padding-block: 22px;
}
.fl_brand_strip_head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.fl_brand_strip_head p {
margin: 0;
font-family: 'proxima_nova_rgregular', sans-serif;
font-size: 13px;
color: var(--flahoo-charcoal);
}
.fl_brand_strip_row {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 34px;
padding: 2px 2px 6px;
scrollbar-width: none;
}
.fl_brand_strip_row::-webkit-scrollbar { display: none; }
.fl_brand_strip_item {
flex: 0 0 auto;
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 15px;
color: var(--flahoo-near-black);
text-decoration: none;
white-space: nowrap;
opacity: .72;
}
.fl_brand_strip_item:hover { opacity: 1; color: var(--flahoo-red); }
/* ================= SAVED COLLECTIONS: NAMED BOARD TABS =================
[Claude] 2026-10-11T -- Saved Collections named boards (Anthony:
"named boards + price alerts"). Pill-tab row on pins.php, sitting
directly below .fl_page_hero and above the pre-existing .shop_head
block -- see that file's own [v3] edit log entry for the markup.
Same pill-tab visual language as .fl_deals_tabs (home.php's "Our
Daily Offers" banner) for consistency, but on the page's plain light
background rather than painted onto a red banner. Live-verified
(375/768/1440px, wrap behaviour, active-state contrast) by injecting
this block into the live /shop page's own .fl_page_hero with mock
board names before writing it here -- /pins redirects anonymous
visitors, so it can't be tested directly with no session. */
.fl_board_tabs_wrap {
max-width: 1180px;
margin: 0 auto;
padding: 18px 20px 0;
}
.fl_board_tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.fl_board_tabs > li {
display: flex;
align-items: center;
gap: 4px;
}
.fl_board_tabs > li > a {
display: inline-block;
padding: 8px 16px;
border-radius: var(--flahoo-radius-pill);
background: var(--flahoo-grey-light);
color: var(--flahoo-charcoal);
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 12.5px;
letter-spacing: .02em;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.fl_board_tabs > li > a:hover { background: var(--flahoo-pink-tint); color: var(--flahoo-red-dark); text-decoration: none; }
.fl_board_tabs > li.active > a { background: var(--flahoo-red); color: #fff; }
.fl_board_tab_actions { display: inline-flex; gap: 2px; }
.fl_board_rename_btn, .fl_board_delete_btn {
border: none;
background: var(--flahoo-grey-light);
color: var(--flahoo-ink-soft);
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fl_board_rename_btn:hover, .fl_board_delete_btn:hover { background: var(--flahoo-pink-tint); color: var(--flahoo-red-dark); }
.fl_board_new > button {
display: inline-block;
padding: 8px 16px;
border-radius: var(--flahoo-radius-pill);
background: transparent;
border: 1px dashed var(--flahoo-line);
color: var(--flahoo-ink-faint);
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 12.5px;
cursor: pointer;
}
.fl_board_new > button:hover { border-color: var(--flahoo-red); color: var(--flahoo-red); }
@media (max-width: 767px) {
.fl_board_tabs_wrap { padding: 14px 16px 0; }
.fl_board_tabs { gap: 6px; }
.fl_board_tabs > li > a { padding: 7px 12px; font-size: 12px; }
}
/* ================= SAVED COLLECTIONS: PRICE-DROPPED BADGE =================
[Claude] 2026-10-11T -- Saved Collections price-dropped indicator
(Anthony: in-page indicator only, no email). .item_price_dropped_badge
is rendered by Pop_model::renderProduct() (see its own doc comment on
$price_drop_baseline) only on pins.php -- no other product grid
site-wide ever passes that 3rd arg, so this class only ever appears
there. Sits inside .item_price alongside the existing .discount_tag/
.premium_value_tag/.one_to_watch_tag pills -- matching pill shape
(var(--flahoo-radius-pill)) but its own green, since "price dropped"
is a distinct, positive signal from the merchant's own sale/premium
tags above it. */
.item_price_dropped_badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--flahoo-radius-pill);
background: #e3f5e9;
color: #1f7a43;
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 11px;
letter-spacing: .01em;
white-space: nowrap;
}
/* ================= PHASE A: DESKTOP HEADER REBUILD =================
[Claude] 2026-10-11T [v15] -- Anthony's moodboard punch list, Phase A
(header): smaller logo, search + account merged into one compact
row, and the black "Shop by Department" mega-menu bar replaced by a
light "Shop / Brands / Stores" link row (the 3 real .stores-classed
elements in header.php's #navigation, relabelled/reordered --
see header.php's own [v15] entry). The .departments is hidden
via .fl_nav_hidden rather than deleted, so the full department
flyout markup/PHP loop stays intact and reversible.
Scoped ENTIRELY to @media (min-width: 768px): header.php's existing
mobile header (.mobile_hero_nav icon row, .mobile_login_icon, built
Sept 15 2026) is a separate, already-good design and must not be
touched by this pass -- confirmed via live DOM-injection testing at
1440px/800px (desktop/tablet) and a mobile baseline screenshot
before writing this file. Reuses the existing --flahoo-red/
--flahoo-off-white/--flahoo-charcoal/--flahoo-near-black tokens
(style.css's own :root block) rather than inventing new colours. */
/* [Claude] 2026-10-13T -- Phase 12 follow-up, widened Phase 13 (Anthony:
"Still not aligned" on desktop, then "align the mobile version" the same
day). Real cause: #login_box itself centres fine wherever #login is a
flex row with align-items:center (confirmed via getBoundingClientRect at
both 1440px and 375px -- #login_box and #login_text land on the same
vertical centre either way). The mismatch is INSIDE #login_box:
.pinns_saved (style.css) is an inline-flex , which as an atomic
inline box defaults to vertical-align:baseline -- so it sits with its
own bottom edge pinned to #login_box's text baseline rather than
centred in its line box, visibly higher than "Register" (which is just
normal inline text, already centred by its own line-height). This was
originally scoped inside the >=768px block above, but the identical
markup/class is used at every width, so moved here, unscoped, once the
same misalignment was confirmed live on mobile too -- deliberately not
on the global .pinns_saved rule in style.css itself, since that class
is also used on the product page in a context where this fix does not
apply. */
#login_box .pinns_saved {
vertical-align: middle;
}
@media (min-width: 768px) {
/* Shrink the logo + reduce the two decorative header background
strips to match (style.css: .logo img had padding-top:40px,
max-width:150px, top:-20px; .header_bg_1 was 40px tall,
.header_bg_2 started at top:40px).
[Claude] 2026-10-12T [v35] -- Anthony: "Make flahoo logo smaller,
nearer to the search bar and align everything middle so it looks
really professional." Shrunk again (110px -> 80px) and the manual
padding-top:18px/top:0 nudge dropped to a flat 0/0 -- those were
only ever there to hand-position the logo under the old float-
based row; the new flex row below (#header .container > .row)
now centres it for real, so compensating offsets on the logo
itself would just throw that off again. */
#header .logo img {
max-width: 80px;
padding-top: 0;
top: 0;
}
#header .header_bg_1 { height: 20px; }
#header .header_bg_2 { top: 20px; }
/* [Claude] 2026-10-12T [v33] -- Anthony: "Seems like a grey border" (at
the very top of the page, above the logo). These two divs
(style.css, ~line 105) are a pair of decorative white-to-grey
gradient strips (#ffffff -> #f8f8f8, and #ffffff -> #efefef with its
own 1px #e6e6e6 border-top) built for the OLD, much taller desktop
header -- #header .logo img used to have padding-top:40px/top:-20px
(style.css base rule), so these 40px-tall strips sat behind/around
it as subtle texture. Since the Oct 11 Phase A shrink (logo cut to
padding-top:18px/top:0, just above), they no longer line up with
anything and just read as a stray grey bar pinned above the new
compact header. Hidden rather than removed -- see this file's own
"hide, don't delete" convention -- scoped to this existing >=768px
block so the Sept 15 2026 mobile header (which never adopted this
shrink and still wants its original 40px band) is untouched. */
#header .header_bg_1, #header .header_bg_2 { display: none; }
/* #login (style.css: position:relative; min-height:140px) becomes a
compact flex row holding the new desktop account icon + the
existing JS-populated #login_box/#login_text, replacing
#login_box's own broken-looking red background-image box. */
#login {
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
/* [Claude] 2026-10-12T [v35] -- was 22px 0 0, then 16px 0 0 (the
[v32] pass's own manual nudge to line the icon up with the logo
and search bar under the old float-based row). The row itself
is a real centred flex row now (#header .container > .row,
below) -- it centres #login's whole box on its own, so any
padding here would just push the icon off-centre again. */
padding: 0;
}
#login .mobile_login_icon { display: none; }
#login .fl_account_icon_desktop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--flahoo-grey-light);
color: var(--flahoo-charcoal);
flex: 0 0 auto;
}
#login .fl_account_icon_desktop svg { width: 18px; height: 18px; }
#login #login_box {
/* [Claude] 2026-10-13T -- Phase 12 (Anthony: "I still think the saved
text is not aligned with the Register text" / "Check the text is the
same size"). Root cause: #login_text ("Register") has always set its
own font-size:13px (style.css + this file), but #login_box (the
"N saved" link) never got an explicit font-size of its own -- it was
quietly inheriting the page global body font-size (14px), one pixel
larger than "Register" right next to it. Matching it to 13px so both
sides of the divider are genuinely the same size, not just visually
close. */
font-size: 13px;
position: static;
height: auto;
width: auto;
background-image: none;
background: none;
/* [Claude] 2026-10-13T -- Phase 10 (Anthony: "the hearts don't align").
This box's own base rule (style.css, ~line 183) still carries
padding-top:34px -- a leftover from the OLD 114px-tall
login_70.png button this flex row replaced. Never reset when
this became a flex child of #login (align-items:center) --
so the saved-link content sat 34px lower inside its own box
than the account icon next to it, even though the row itself
was correctly centre-aligned. Zeroing it lets align-items:
center actually do its job.
*/
padding-top: 0;
/* [Claude] 2026-10-13T -- Phase 9 (Anthony: "How do you track heart,
should it not be at the top next to the user icon" -- it's always
been here, right next to .fl_account_icon_desktop just above, but
was genuinely invisible). Root cause: style.css's base
"#login_box a { color: #fff; }" (written for the OLD red
login_70.png button background this desktop rebuild replaced,
still unchanged at the top of this file) was never overridden for
THIS flex-row layout -- so the saved-count link rendered white
text on this light header, i.e. nothing visible at all. Same
near-black token #login_text a already uses two rules down. */
color: var(--flahoo-near-black);
}
#login #login_box a {
color: var(--flahoo-near-black);
}
#login #login_text {
position: static;
top: auto;
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 13px;
/* [Claude] 2026-10-13T -- Phase 11 (Anthony: "The Register is not
aligned with 12 saved, maybe a small line in between"). A plain
hairline separator between the saved-link and Register, reusing
the same #e6e6e6 this file already uses for the header's other
subtle borders (see .header_bg_2 above) rather than a new colour.
#login's own flex gap:10px still provides the space either side. */
border-left: 1px solid #e6e6e6;
padding-left: 10px;
/* [Claude] 2026-10-13T -- Phase 10, same alignment pass as
#login_box just above. This box's base rule (style.css,
~line 200) still carries margin-top:-6px and a fixed
width:70px/text-align:center -- both relics of the old
absolute-positioned (top:108px) layout. The negative margin
nudged "Register" up/out of line with the icon, and the
70px centred box padded empty space around short text,
making the gap to the saved-link look bigger than the gap
from the icon to the saved-link. Resetting both so this box
just hugs its own text, same as #login_box next to it.
*/
margin-top: 0;
width: auto;
text-align: left;
}
#login #login_text a {
color: var(--flahoo-near-black);
text-decoration: none;
}
#login #login_text a:hover { color: var(--flahoo-red); }
#login #login_box a:hover { color: var(--flahoo-red); }
/* [Claude] 2026-10-12T [v35] -- Anthony: "the top area needs to be
tidy... align everything middle so it looks really professional."
#header's row (logo / #login / the search column) was 3 Bootstrap
grid columns sized by FIXED PERCENTAGE (col-xs-3 / col-xs-2 /
col-md-7) -- a leftover from the original, much busier header this
grid was built for. At any real desktop width that leaves the
80px-wide logo sitting in a 25%-wide column (e.g. ~480px of empty
space at a 1990px-wide window) before the search bar even starts,
which is exactly the "logo far from the search bar" look Anthony
flagged. Turned the row into a real flex row instead, each column
sized to its own content (order: set explicitly since #login's
markup comes before the search column but needs to render last,
matching its old pull-right position) and vertically centred as a
whole -- this is also what finally makes "align everything middle"
solid rather than the earlier per-element padding nudges (#login's
own padding, #search_field's margin-top) this file already carried
working around a float layout. Those earlier rules are left in
place -- they still trim each item's OWN internal dead space
(shorter items -> a tighter, shorter row), just no longer need to
carry the vertical-alignment job themselves. Confirmed live via
getBoundingClientRect() at both 1990px and 800px wide (logo/
account-icon/search-bar centres landed within <1px of each other
at both) before writing this. */
#header .container > .row {
display: flex;
align-items: center;
gap: 24px;
}
#header .container > .row > .col-xs-3 {
flex: 0 0 auto;
width: auto;
order: 1;
}
#header .container > .row > .col-xs-2.pull-right {
flex: 0 0 auto;
width: auto;
float: none;
order: 3;
}
#header .container > .row > .col-xs-12.col-sm-12.col-md-7.col-lg-7 {
flex: 1 1 auto;
width: auto;
min-width: 0;
order: 2;
}
/* [Claude] 2026-10-12T [v39] -- Anthony: "The logo needs to be near
the search bar and so does the user symbol and Register. Everything
need to be more compact." Measured live: the visible gap between
the logo image and the search box was 54px, and between the search
box and the account icon was ALSO 54px -- the flex row's own 24px
gap above only accounts for a third of that each time. The other
30px on each side is Bootstrap's original grid-gutter padding
(padding-left/right:15px), still sitting on these 3 columns from
before this row was converted to flex -- it was never needed once
spacing moved to the row's own `gap`, just never cleaned up.
(The account-icon column has an extra wrinkle: #login -- which the
earlier padding:0 rule already targets, just above -- is actually
nested INSIDE this flex item, not the flex item itself; the 15px
padding eating the extra space belongs to the OUTER .col-xs-2.
pull-right column.) Zeroed all 3 columns' leftover padding and
trimmed the row's own gap 24px -> 16px -- confirmed live, both
visible gaps now a consistent 16px (down from 54px), at 1440px,
1235px and 800px wide, with no overlap or crowding at any of
them. */
#header .container > .row {
gap: 16px;
}
#header .container > .row > .col-xs-3,
#header .container > .row > .col-xs-12.col-sm-12.col-md-7.col-lg-7,
#header .container > .row > .col-xs-2.pull-right {
padding-left: 0;
padding-right: 0;
}
/* [Claude] 2026-10-12T [v36] -- Anthony: "Too much white space. The menu
below should align to the left of the flahoo logo... When the screen
goes smaller the alignment goes." See the long note just above this
block for the root cause (Bootstrap's .row clearfix pseudo-elements
becoming phantom flex items). */
#header .container > .row::before,
#header .container > .row::after {
display: none;
}
/* [Claude] 2026-10-12T [Phase 4c] -- Anthony: "ensure all things
align on the page on the left: logo, menu...". The logo bar above
has always used Bootstrap's own stepped, breakpoint-jumping
.container (135px left edge at 1440px); the nav row and hero text
elsewhere in this file use a smooth clamp(20px,5vw,56px) inset
instead (adopted so the home hero's nav never collides with its
photo at 901-1151px -- see that rule's own long comment). Rather
than pull nav/hero back onto Bootstrap's jumpy container (which
is what caused that collision in the first place), this gives the
logo bar the SAME smooth inset, so logo, nav, and hero text all
share one left edge at every width instead of three different
ones. Safe here specifically because the logo bar never sits next
to the hero photo the way the nav row does. */
#header .container {
width: auto;
max-width: none;
margin: 0;
padding-left: clamp(20px, 5vw, 56px);
padding-right: clamp(20px, 5vw, 56px);
}
/* Bootstrap's .row still carries its own -15px left/right margin
(meant to offset its children's 15px column gutters) even after
the v36 fix above hid its clearfix pseudo-elements -- confirmed
live this was eating exactly 15px off the new inset above (56px
padding - 15px negative margin = 41px, not 56px) before adding
this. */
#header .container > .row {
margin-left: 0;
margin-right: 0;
}
/* Replace the black .top_background3 mega-menu bar with a light,
simple Shop/Brands/Stores row. */
.top_background3 {
background: var(--flahoo-off-white);
border-top: 1px solid var(--flahoo-line);
border-bottom: 1px solid var(--flahoo-line);
}
#navigation .fl_top_nav {
display: flex;
align-items: center;
gap: 28px;
padding: 0;
margin: 0;
}
/* [Claude] 2026-10-12T [v31] -- Anthony: "Why does the top part look
so untidy, not centred and different sizes?" Root cause: these
elements (and the Coupons/Blog/Help ones added in [v16]) carried a
generic "stores" class, reused from the original 3 real .stores-
classed nav links (header.php's own [v15] note) purely as a
styling hook. That collided with legacy style.css rules
(li.stores a { float:left; width:235px/290px; margin-left:-72px;
line-height:40px; text-align:center }) which this ruleset never
overrides, since it only sets display/padding/font/color on the
-- not float/width/margin-left/line-height/text-align. Those
legacy box-model properties don't conflict in specificity (this
file's selector is more specific but never sets the same
properties), so both rulesets' properties merged, giving every
item a fixed legacy width/float/negative-margin instead of this
flex row's own sizing -- confirmed live via DOM injection
(stripping the "stores" class alone fixed the alignment).
header.php's own [v31] entry renames that class to the neutral
fl_top_nav_item, so none of this row's items match any li.stores
selector in style.css any more. The explicit padding:0 below
replaces style.css's unrelated generic "ul li { padding-left:9px }"
rule, which was adding uneven left padding on top of the above. */
#navigation .fl_top_nav > li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation .fl_top_nav > li > a {
display: block;
padding: 13px 2px;
font-family: 'proxima_nova_rgbold', sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--flahoo-near-black);
}
#navigation .fl_top_nav > li > a:hover {
color: var(--flahoo-red);
/* [Claude] 2026-10-12T [v36] -- Anthony: "The hero menu only need to
change colour on hover and not be underlined." Bootstrap's own base
a:hover rule sets text-decoration:underline; this rule only ever
overrode colour, so the underline was still showing through. */
text-decoration: none;
}
/* Hidden rather than removed -- see header.php's [v15] note. */
#navigation .fl_nav_hidden { display: none; }
/* [Claude] 2026-10-12T [v32] -- Anthony: "On item 1 let's remove the
all department dropdown and everything should be tidy and middle
aligned." Three separate things were making the search row look
untidy and sitting lower than the logo/account icon -- confirmed
live via DOM measurement before writing any of this:
1) The black "All Departments" dropdown (header.php's
.mobile_dept_select_wrapper, wrapping #category) was already
hidden on mobile (style.css) but NOT at desktop widths -- still
visible exactly as in Anthony's screenshot. Same "hide, don't
delete" treatment: the