/* BUILD 11.2 */ /* ============================================================================ SITE SKINS - assets/css/skins.css ---------------------------------------------------------------------------- One skin per site. Each is a complete change of typeface, radius scale, shadow language, border weight, density and surface colour - the things that actually make two sites look like each other. Reordering blocks does not do that; this does. Loaded AFTER style.css and theme.css and BEFORE the site's own custom CSS, so a skin overrides the base look and anything hand-written still wins. header.php puts the choice on as sk- and loads that skin's web fonts. Nothing here applies unless a skin is chosen: without a body class every rule below is inert, and "Liquid Glass" reproduces the current look, so an existing site is unchanged until someone picks another. ============================================================================ */ /* ---------- Liquid Glass : The current look. Frosted cards, wide radii, soft depth. ---------- */ body.sk-glass{ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --sh-1:0 1px 2px rgba(16,32,52,.05),0 6px 18px rgba(16,32,52,.07); --sh-2:0 2px 6px rgba(16,32,52,.06),0 14px 38px rgba(16,32,52,.10); --sh-3:0 2px 6px rgba(16,32,52,.06),0 14px 38px rgba(16,32,52,.10); --spec:none; --g-fill:rgba(255,255,255,.58); --g-fill-strong:rgba(255,255,255,.58); --g-fill-faint:rgba(255,255,255,.58); --g-edge:rgba(255,255,255,.72); --g-edge-soft:rgba(255,255,255,.72); --g-blur:saturate(180%) blur(22px); --g-blur-lg:saturate(180%) blur(22px); --skin-bw:1px; --skin-bc:rgba(255,255,255,.72); --skin-fill:rgba(255,255,255,.58); --band-pad:22px; --ink:#12181F; --header-ink:#12181F; --hair:rgba(255,255,255,.72); --line:rgba(255,255,255,.72); --bg:rgba(255,255,255,.58); --card:rgba(255,255,255,.58); --bg-soft:#eef2f7; --hdr:rgba(255,255,255,.58); font-family:"Poppins",system-ui,sans-serif; background:#eef2f7; color:#12181F; } body.sk-glass h1,body.sk-glass h2,body.sk-glass h3, body.sk-glass .section__head h2,body.sk-glass .slide__card h1{ font-family:"Montserrat",sans-serif;font-weight:800;letter-spacing:-.022em; } body.sk-glass .eyebrow,body.sk-glass .mono,body.sk-glass .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-glass .card,body.sk-glass .catcard,body.sk-glass .tile, body.sk-glass .artcard,body.sk-glass .masthead__in,body.sk-glass .mainnav__in{ background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.72);border-radius:22px; box-shadow:0 1px 2px rgba(16,32,52,.05),0 6px 18px rgba(16,32,52,.07);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px); } body.sk-glass .card:hover,body.sk-glass .catcard:hover, body.sk-glass .tile:hover,body.sk-glass .artcard:hover{box-shadow:0 2px 6px rgba(16,32,52,.06),0 14px 38px rgba(16,32,52,.10)} body.sk-glass .btn,body.sk-glass .catrail__cta{border-radius:16px} body.sk-glass .section{padding:38px 0} body.sk-glass .section--soft > .wrap{padding:38px var(--band-pad)} /* ---------- Swiss Grid : Flat, square, hairline rules. No shadows anywhere. ---------- */ body.sk-swiss{ --r-sm:0px; --r-md:0px; --r-lg:2px; --r-xl:2px; --sh-1:none; --sh-2:none; --sh-3:none; --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#111; --g-edge-soft:#111; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#111; --skin-fill:#fff; --band-pad:24px; --ink:#111; --header-ink:#111; --hair:#111; --line:#111; --bg:#fff; --card:#fff; --bg-soft:#fff; --hdr:#fff; font-family:"Inter",system-ui,sans-serif; background:#fff; color:#111; } body.sk-swiss h1,body.sk-swiss h2,body.sk-swiss h3, body.sk-swiss .section__head h2,body.sk-swiss .slide__card h1{ font-family:"Inter",system-ui,sans-serif;font-weight:700;letter-spacing:-.03em; } body.sk-swiss .eyebrow,body.sk-swiss .mono,body.sk-swiss .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-swiss .card,body.sk-swiss .catcard,body.sk-swiss .tile, body.sk-swiss .artcard,body.sk-swiss .masthead__in,body.sk-swiss .mainnav__in{ background:#fff;border:1px solid #111;border-radius:2px; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-swiss .card:hover,body.sk-swiss .catcard:hover, body.sk-swiss .tile:hover,body.sk-swiss .artcard:hover{box-shadow:none} body.sk-swiss .btn,body.sk-swiss .catrail__cta{border-radius:0px} body.sk-swiss .section{padding:30px 0} body.sk-swiss .section--soft > .wrap{padding:30px var(--band-pad)} /* ---------- Editorial Serif : Serif headings, wide margins, rules instead of cards. ---------- */ body.sk-editorial{ --r-sm:2px; --r-md:4px; --r-lg:6px; --r-xl:8px; --sh-1:none; --sh-2:0 1px 0 rgba(0,0,0,.06); --sh-3:0 1px 0 rgba(0,0,0,.06); --spec:none; --g-fill:#fffdf9; --g-fill-strong:#fffdf9; --g-fill-faint:#fffdf9; --g-edge:#e2ded6; --g-edge-soft:#e2ded6; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#e2ded6; --skin-fill:#fffdf9; --band-pad:26px; --ink:#231f1b; --header-ink:#231f1b; --hair:#e2ded6; --line:#e2ded6; --bg:#fffdf9; --card:#fffdf9; --bg-soft:#faf7f2; --hdr:#fffdf9; font-family:"Karla",system-ui,sans-serif; background:#faf7f2; color:#231f1b; } body.sk-editorial h1,body.sk-editorial h2,body.sk-editorial h3, body.sk-editorial .section__head h2,body.sk-editorial .slide__card h1{ font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.01em; } body.sk-editorial .eyebrow,body.sk-editorial .mono,body.sk-editorial .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-editorial .card,body.sk-editorial .catcard,body.sk-editorial .tile, body.sk-editorial .artcard,body.sk-editorial .masthead__in,body.sk-editorial .mainnav__in{ background:#fffdf9;border:1px solid #e2ded6;border-radius:6px; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-editorial .card:hover,body.sk-editorial .catcard:hover, body.sk-editorial .tile:hover,body.sk-editorial .artcard:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)} body.sk-editorial .btn,body.sk-editorial .catrail__cta{border-radius:4px} body.sk-editorial .section{padding:46px 0} body.sk-editorial .section--soft > .wrap{padding:46px var(--band-pad)} /* ---------- Brutalist : Heavy black borders, hard offset shadows, mono headings. ---------- */ body.sk-brutal{ --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --sh-1:4px 4px 0 #111; --sh-2:7px 7px 0 #111; --sh-3:7px 7px 0 #111; --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#111; --g-edge-soft:#111; --g-blur:none; --g-blur-lg:none; --skin-bw:2.5px; --skin-bc:#111; --skin-fill:#fff; --band-pad:22px; --ink:#111; --header-ink:#111; --hair:#111; --line:#111; --bg:#fff; --card:#fff; --bg-soft:#f5f2e8; --hdr:#fff; font-family:"Space Grotesk",system-ui,sans-serif; background:#f5f2e8; color:#111; } body.sk-brutal h1,body.sk-brutal h2,body.sk-brutal h3, body.sk-brutal .section__head h2,body.sk-brutal .slide__card h1{ font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.02em; } body.sk-brutal .eyebrow,body.sk-brutal .mono,body.sk-brutal .catcard span{font-family:"Space Mono",monospace} body.sk-brutal .card,body.sk-brutal .catcard,body.sk-brutal .tile, body.sk-brutal .artcard,body.sk-brutal .masthead__in,body.sk-brutal .mainnav__in{ background:#fff;border:2.5px solid #111;border-radius:0px; box-shadow:4px 4px 0 #111;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-brutal .card:hover,body.sk-brutal .catcard:hover, body.sk-brutal .tile:hover,body.sk-brutal .artcard:hover{box-shadow:7px 7px 0 #111} body.sk-brutal .btn,body.sk-brutal .catrail__cta{border-radius:0px} body.sk-brutal .section{padding:34px 0} body.sk-brutal .section--soft > .wrap{padding:34px var(--band-pad)} /* ---------- Soft UI : Very round, low contrast, dual-tone depth. ---------- */ body.sk-soft{ --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:38px; --sh-1:6px 6px 14px rgba(163,177,198,.35),-6px -6px 14px rgba(255,255,255,.9); --sh-2:10px 10px 24px rgba(163,177,198,.4),-10px -10px 24px rgba(255,255,255,.95); --sh-3:10px 10px 24px rgba(163,177,198,.4),-10px -10px 24px rgba(255,255,255,.95); --spec:none; --g-fill:#eef1f6; --g-fill-strong:#eef1f6; --g-fill-faint:#eef1f6; --g-edge:transparent; --g-edge-soft:transparent; --g-blur:none; --g-blur-lg:none; --skin-bw:0px; --skin-bc:transparent; --skin-fill:#eef1f6; --band-pad:24px; --ink:#3c4655; --header-ink:#3c4655; --hair:transparent; --line:transparent; --bg:#eef1f6; --card:#eef1f6; --bg-soft:#eef1f6; --hdr:#eef1f6; font-family:"Nunito",system-ui,sans-serif; background:#eef1f6; color:#3c4655; } body.sk-soft h1,body.sk-soft h2,body.sk-soft h3, body.sk-soft .section__head h2,body.sk-soft .slide__card h1{ font-family:"Nunito",system-ui,sans-serif;font-weight:800;letter-spacing:-.015em; } body.sk-soft .eyebrow,body.sk-soft .mono,body.sk-soft .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-soft .card,body.sk-soft .catcard,body.sk-soft .tile, body.sk-soft .artcard,body.sk-soft .masthead__in,body.sk-soft .mainnav__in{ background:#eef1f6;border:0px solid transparent;border-radius:28px; box-shadow:6px 6px 14px rgba(163,177,198,.35),-6px -6px 14px rgba(255,255,255,.9);-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-soft .card:hover,body.sk-soft .catcard:hover, body.sk-soft .tile:hover,body.sk-soft .artcard:hover{box-shadow:10px 10px 24px rgba(163,177,198,.4),-10px -10px 24px rgba(255,255,255,.95)} body.sk-soft .btn,body.sk-soft .catrail__cta{border-radius:20px} body.sk-soft .section{padding:40px 0} body.sk-soft .section--soft > .wrap{padding:40px var(--band-pad)} /* ---------- Industrial : Condensed uppercase, square, dark bands, amber accent. ---------- */ body.sk-industrial{ --r-sm:0px; --r-md:2px; --r-lg:3px; --r-xl:4px; --sh-1:none; --sh-2:0 2px 0 rgba(0,0,0,.14); --sh-3:0 2px 0 rgba(0,0,0,.14); --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#c9ced6; --g-edge-soft:#c9ced6; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#c9ced6; --skin-fill:#fff; --band-pad:20px; --ink:#1b1f24; --header-ink:#1b1f24; --hair:#c9ced6; --line:#c9ced6; --bg:#fff; --card:#fff; --bg-soft:#eceef1; --hdr:#fff; font-family:"Barlow",system-ui,sans-serif; background:#eceef1; color:#1b1f24; } body.sk-industrial h1,body.sk-industrial h2,body.sk-industrial h3, body.sk-industrial .section__head h2,body.sk-industrial .slide__card h1{ font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.01em; } body.sk-industrial .eyebrow,body.sk-industrial .mono,body.sk-industrial .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-industrial .card,body.sk-industrial .catcard,body.sk-industrial .tile, body.sk-industrial .artcard,body.sk-industrial .masthead__in,body.sk-industrial .mainnav__in{ background:#fff;border:1px solid #c9ced6;border-radius:3px; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-industrial .card:hover,body.sk-industrial .catcard:hover, body.sk-industrial .tile:hover,body.sk-industrial .artcard:hover{box-shadow:0 2px 0 rgba(0,0,0,.14)} body.sk-industrial .btn,body.sk-industrial .catrail__cta{border-radius:2px} body.sk-industrial .section{padding:32px 0} body.sk-industrial .section--soft > .wrap{padding:32px var(--band-pad)} /* ---------- Warm Retail : Friendly, rounded, warm neutrals, gentle depth. ---------- */ body.sk-retail{ --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --sh-1:0 1px 3px rgba(60,40,20,.06),0 8px 20px rgba(60,40,20,.07); --sh-2:0 3px 8px rgba(60,40,20,.08),0 16px 34px rgba(60,40,20,.10); --sh-3:0 3px 8px rgba(60,40,20,.08),0 16px 34px rgba(60,40,20,.10); --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#eee2d4; --g-edge-soft:#eee2d4; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#eee2d4; --skin-fill:#fff; --band-pad:22px; --ink:#2b2521; --header-ink:#2b2521; --hair:#eee2d4; --line:#eee2d4; --bg:#fff; --card:#fff; --bg-soft:#fbf7f2; --hdr:#fff; font-family:"DM Sans",system-ui,sans-serif; background:#fbf7f2; color:#2b2521; } body.sk-retail h1,body.sk-retail h2,body.sk-retail h3, body.sk-retail .section__head h2,body.sk-retail .slide__card h1{ font-family:"Rubik",system-ui,sans-serif;font-weight:700;letter-spacing:-.018em; } body.sk-retail .eyebrow,body.sk-retail .mono,body.sk-retail .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-retail .card,body.sk-retail .catcard,body.sk-retail .tile, body.sk-retail .artcard,body.sk-retail .masthead__in,body.sk-retail .mainnav__in{ background:#fff;border:1px solid #eee2d4;border-radius:18px; box-shadow:0 1px 3px rgba(60,40,20,.06),0 8px 20px rgba(60,40,20,.07);-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-retail .card:hover,body.sk-retail .catcard:hover, body.sk-retail .tile:hover,body.sk-retail .artcard:hover{box-shadow:0 3px 8px rgba(60,40,20,.08),0 16px 34px rgba(60,40,20,.10)} body.sk-retail .btn,body.sk-retail .catrail__cta{border-radius:12px} body.sk-retail .section{padding:38px 0} body.sk-retail .section--soft > .wrap{padding:38px var(--band-pad)} /* ---------- Corporate Navy : Conservative, small radius, restrained depth. ---------- */ body.sk-corporate{ --r-sm:3px; --r-md:5px; --r-lg:7px; --r-xl:9px; --sh-1:0 1px 2px rgba(20,35,60,.08); --sh-2:0 2px 6px rgba(20,35,60,.10); --sh-3:0 2px 6px rgba(20,35,60,.10); --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#d5dce5; --g-edge-soft:#d5dce5; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#d5dce5; --skin-fill:#fff; --band-pad:22px; --ink:#16233a; --header-ink:#16233a; --hair:#d5dce5; --line:#d5dce5; --bg:#fff; --card:#fff; --bg-soft:#f4f6f9; --hdr:#fff; font-family:"Lato",system-ui,sans-serif; background:#f4f6f9; color:#16233a; } body.sk-corporate h1,body.sk-corporate h2,body.sk-corporate h3, body.sk-corporate .section__head h2,body.sk-corporate .slide__card h1{ font-family:"Source Sans 3",system-ui,sans-serif;font-weight:700;letter-spacing:-.005em; } body.sk-corporate .eyebrow,body.sk-corporate .mono,body.sk-corporate .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-corporate .card,body.sk-corporate .catcard,body.sk-corporate .tile, body.sk-corporate .artcard,body.sk-corporate .masthead__in,body.sk-corporate .mainnav__in{ background:#fff;border:1px solid #d5dce5;border-radius:7px; box-shadow:0 1px 2px rgba(20,35,60,.08);-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-corporate .card:hover,body.sk-corporate .catcard:hover, body.sk-corporate .tile:hover,body.sk-corporate .artcard:hover{box-shadow:0 2px 6px rgba(20,35,60,.10)} body.sk-corporate .btn,body.sk-corporate .catrail__cta{border-radius:5px} body.sk-corporate .section{padding:34px 0} body.sk-corporate .section--soft > .wrap{padding:34px var(--band-pad)} /* ---------- Mono Tech : Monospace throughout, dark surfaces, terminal feel. ---------- */ body.sk-mono{ --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --sh-1:none; --sh-2:0 0 0 1px rgba(255,255,255,.06); --sh-3:0 0 0 1px rgba(255,255,255,.06); --spec:none; --g-fill:#161b22; --g-fill-strong:#161b22; --g-fill-faint:#161b22; --g-edge:#2a3340; --g-edge-soft:#2a3340; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#2a3340; --skin-fill:#161b22; --band-pad:22px; --ink:#e6edf3; --header-ink:#e6edf3; --hair:#2a3340; --line:#2a3340; --bg:#161b22; --card:#161b22; --bg-soft:#0d1117; --hdr:#161b22; font-family:"Inter",system-ui,sans-serif; background:#0d1117; color:#e6edf3; } body.sk-mono h1,body.sk-mono h2,body.sk-mono h3, body.sk-mono .section__head h2,body.sk-mono .slide__card h1{ font-family:"JetBrains Mono",monospace;font-weight:700;letter-spacing:-.02em; } body.sk-mono .eyebrow,body.sk-mono .mono,body.sk-mono .catcard span{font-family:"JetBrains Mono",monospace} body.sk-mono .card,body.sk-mono .catcard,body.sk-mono .tile, body.sk-mono .artcard,body.sk-mono .masthead__in,body.sk-mono .mainnav__in{ background:#161b22;border:1px solid #2a3340;border-radius:8px; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-mono .card:hover,body.sk-mono .catcard:hover, body.sk-mono .tile:hover,body.sk-mono .artcard:hover{box-shadow:0 0 0 1px rgba(255,255,255,.06)} body.sk-mono .btn,body.sk-mono .catrail__cta{border-radius:6px} body.sk-mono .section{padding:34px 0} body.sk-mono .section--soft > .wrap{padding:34px var(--band-pad)} /* ---------- Pastel Air : Very light, airy, high radius, soft tints. ---------- */ body.sk-pastel{ --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --sh-1:0 2px 10px rgba(140,150,190,.10); --sh-2:0 8px 30px rgba(140,150,190,.16); --sh-3:0 8px 30px rgba(140,150,190,.16); --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#e9e6f7; --g-edge-soft:#e9e6f7; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#e9e6f7; --skin-fill:#fff; --band-pad:26px; --ink:#3a3550; --header-ink:#3a3550; --hair:#e9e6f7; --line:#e9e6f7; --bg:#fff; --card:#fff; --bg-soft:#f7f5fd; --hdr:#fff; font-family:"Poppins",system-ui,sans-serif; background:#f7f5fd; color:#3a3550; } body.sk-pastel h1,body.sk-pastel h2,body.sk-pastel h3, body.sk-pastel .section__head h2,body.sk-pastel .slide__card h1{ font-family:"Quicksand",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em; } body.sk-pastel .eyebrow,body.sk-pastel .mono,body.sk-pastel .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-pastel .card,body.sk-pastel .catcard,body.sk-pastel .tile, body.sk-pastel .artcard,body.sk-pastel .masthead__in,body.sk-pastel .mainnav__in{ background:#fff;border:1px solid #e9e6f7;border-radius:26px; box-shadow:0 2px 10px rgba(140,150,190,.10);-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-pastel .card:hover,body.sk-pastel .catcard:hover, body.sk-pastel .tile:hover,body.sk-pastel .artcard:hover{box-shadow:0 8px 30px rgba(140,150,190,.16)} body.sk-pastel .btn,body.sk-pastel .catrail__cta{border-radius:18px} body.sk-pastel .section{padding:46px 0} body.sk-pastel .section--soft > .wrap{padding:46px var(--band-pad)} /* ---------- Newsprint : Paper stock, serif body, tight leading, hairlines. ---------- */ body.sk-newsprint{ --r-sm:0px; --r-md:1px; --r-lg:2px; --r-xl:2px; --sh-1:none; --sh-2:none; --sh-3:none; --spec:none; --g-fill:#fcfaf5; --g-fill-strong:#fcfaf5; --g-fill-faint:#fcfaf5; --g-edge:#d8d3c8; --g-edge-soft:#d8d3c8; --g-blur:none; --g-blur-lg:none; --skin-bw:1px; --skin-bc:#d8d3c8; --skin-fill:#fcfaf5; --band-pad:24px; --ink:#1e1c19; --header-ink:#1e1c19; --hair:#d8d3c8; --line:#d8d3c8; --bg:#fcfaf5; --card:#fcfaf5; --bg-soft:#f2efe7; --hdr:#fcfaf5; font-family:"Libre Baskerville",Georgia,serif; background:#f2efe7; color:#1e1c19; } body.sk-newsprint h1,body.sk-newsprint h2,body.sk-newsprint h3, body.sk-newsprint .section__head h2,body.sk-newsprint .slide__card h1{ font-family:"Archivo",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em; } body.sk-newsprint .eyebrow,body.sk-newsprint .mono,body.sk-newsprint .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-newsprint .card,body.sk-newsprint .catcard,body.sk-newsprint .tile, body.sk-newsprint .artcard,body.sk-newsprint .masthead__in,body.sk-newsprint .mainnav__in{ background:#fcfaf5;border:1px solid #d8d3c8;border-radius:2px; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-newsprint .card:hover,body.sk-newsprint .catcard:hover, body.sk-newsprint .tile:hover,body.sk-newsprint .artcard:hover{box-shadow:none} body.sk-newsprint .btn,body.sk-newsprint .catrail__cta{border-radius:1px} body.sk-newsprint .section{padding:36px 0} body.sk-newsprint .section--soft > .wrap{padding:36px var(--band-pad)} /* ---------- Neo Contrast : Huge tight headings, near-black on white, minimal chrome. ---------- */ body.sk-contrast{ --r-sm:2px; --r-md:4px; --r-lg:6px; --r-xl:8px; --sh-1:none; --sh-2:0 1px 0 #111; --sh-3:0 1px 0 #111; --spec:none; --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fff; --g-edge:#111; --g-edge-soft:#111; --g-blur:none; --g-blur-lg:none; --skin-bw:1.5px; --skin-bc:#111; --skin-fill:#fff; --band-pad:24px; --ink:#0a0a0a; --header-ink:#0a0a0a; --hair:#111; --line:#111; --bg:#fff; --card:#fff; --bg-soft:#fff; --hdr:#fff; font-family:"Inter",system-ui,sans-serif; background:#fff; color:#0a0a0a; } body.sk-contrast h1,body.sk-contrast h2,body.sk-contrast h3, body.sk-contrast .section__head h2,body.sk-contrast .slide__card h1{ font-family:"Archivo",system-ui,sans-serif;font-weight:900;letter-spacing:-.04em; } body.sk-contrast .eyebrow,body.sk-contrast .mono,body.sk-contrast .catcard span{font-family:"IBM Plex Mono",monospace} body.sk-contrast .card,body.sk-contrast .catcard,body.sk-contrast .tile, body.sk-contrast .artcard,body.sk-contrast .masthead__in,body.sk-contrast .mainnav__in{ background:#fff;border:1.5px solid #111;border-radius:6px; box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-contrast .card:hover,body.sk-contrast .catcard:hover, body.sk-contrast .tile:hover,body.sk-contrast .artcard:hover{box-shadow:0 1px 0 #111} body.sk-contrast .btn,body.sk-contrast .catrail__cta{border-radius:4px} body.sk-contrast .section{padding:42px 0} body.sk-contrast .section--soft > .wrap{padding:42px var(--band-pad)} /* ---- per-skin character: the bits a token swap alone cannot express ---- */ /* Swiss: rules instead of cards, nothing floats */ body.sk-swiss .catcard,body.sk-swiss .card,body.sk-swiss .artcard{box-shadow:none;border-width:0;border-top:2px solid #111;border-radius:0} body.sk-swiss .catcard:hover,body.sk-swiss .tile:hover,body.sk-swiss .artcard:hover{transform:none;box-shadow:none} body.sk-swiss .masthead__in,body.sk-swiss .mainnav__in{border:0;border-bottom:1px solid #111;box-shadow:none;border-radius:0} body.sk-swiss .eyebrow{text-transform:uppercase;letter-spacing:.22em} /* Editorial: hairline dividers, no card fills, roomy */ body.sk-editorial .catcard,body.sk-editorial .artcard{background:none;border:0;border-top:1px solid #ddd6c9;box-shadow:none;border-radius:0;padding-left:0;padding-right:0} body.sk-editorial .catcard:hover,body.sk-editorial .artcard:hover{transform:none;box-shadow:none} body.sk-editorial .section__head h2{font-size:clamp(30px,4vw,46px);line-height:1.04} body.sk-editorial .masthead__in{border:0;border-bottom:1px solid #e2ded6;box-shadow:none;border-radius:0} /* Brutalist: hard offset shadow, nothing soft */ body.sk-brutal .catcard:hover,body.sk-brutal .tile:hover,body.sk-brutal .artcard:hover{transform:translate(-2px,-2px)} body.sk-brutal .btn{border:2.5px solid #111;box-shadow:3px 3px 0 #111;border-radius:0} body.sk-brutal .eyebrow{background:#111;color:#fff;border:0;border-radius:0;padding:3px 9px} body.sk-brutal .section__head h2{text-transform:uppercase} /* Soft UI: no borders at all, everything moulded */ body.sk-soft .catcard,body.sk-soft .card,body.sk-soft .tile,body.sk-soft .artcard{border:0} body.sk-soft .btn{box-shadow:5px 5px 12px rgba(163,177,198,.4),-5px -5px 12px rgba(255,255,255,.9);border:0} /* Industrial: uppercase condensed headings, tight grid lines */ body.sk-industrial .section__head h2{text-transform:uppercase;letter-spacing:.02em} body.sk-industrial .eyebrow{text-transform:uppercase;letter-spacing:.2em;border-radius:0} body.sk-industrial .catcard{border-left:3px solid var(--accent)} body.sk-industrial .btn{border-radius:2px;text-transform:uppercase;letter-spacing:.05em} /* Mono Tech: dark page, light text, hairline chrome */ body.sk-mono{background:#0d1117;color:#e6edf3} body.sk-mono .section--soft{background:#11161d} body.sk-mono .sitefoot,body.sk-mono .logostrip{background:#11161d} body.sk-mono .section__head h2,body.sk-mono h1,body.sk-mono h2,body.sk-mono h3{color:#e6edf3} body.sk-mono p,body.sk-mono .catcard p,body.sk-mono .tile__part{color:#93a1b1} body.sk-mono .catcard h3,body.sk-mono .tile__name{color:#e6edf3} body.sk-mono .eyebrow{background:#161b22;border:1px solid #2a3340;color:#7ee787} /* Newsprint: serif body, tight leading, rules */ body.sk-newsprint p{line-height:1.5} body.sk-newsprint .catcard,body.sk-newsprint .artcard{background:none;border:0;border-bottom:1px solid #d8d3c8;box-shadow:none;border-radius:0} body.sk-newsprint .catcard:hover,body.sk-newsprint .artcard:hover{transform:none;box-shadow:none} body.sk-newsprint .eyebrow{border-radius:0;background:none;border:0;border-bottom:2px solid #1e1c19;padding:0 0 3px} /* Neo Contrast: oversized headings, minimal chrome */ body.sk-contrast .section__head h2{font-size:clamp(34px,5vw,62px);line-height:.98} body.sk-contrast .catcard,body.sk-contrast .artcard{box-shadow:none;border:1.5px solid #111} body.sk-contrast .catcard:hover,body.sk-contrast .artcard:hover{background:#111;color:#fff} body.sk-contrast .catcard:hover h3,body.sk-contrast .catcard:hover p{color:#fff} body.sk-contrast .btn{border-radius:0;border:1.5px solid #111} /* the two card styles a skin can ask for that are not in the card-style list */ body[class*="sk-"] .catcard--auto.catcard--plainish::before{display:none} /* ============================================================================ HOUSE OF CARDS SKIN_HOUSECARDS ---------------------------------------------------------------------------- Everything on the page is a card: no hairline borders, no boxed lists, no grey bands. Surfaces float on white and are separated by shadow. Two colours carry the whole design - a deep primary and a bright accent - and they alternate wherever there is a row of equal things, so a set reads as a set. The two colours come from --hoc-p and --hoc-a, set by one of the ten palette classes below. Nothing here hard-codes a colour, so a palette change repaints the entire site. Contrast is why the accent surfaces carry dark text rather than white. On a bright accent, white measures under 2:1 against a 4.5:1 minimum - unreadable for anyone with reduced vision. --hoc-on-a is near-black for that reason. ============================================================================ */ body.sk-housecards{ --hoc-p:#2A3A7A; --hoc-a:#EFBF04; --hoc-on-p:#ffffff; --hoc-on-a:#1a1205; --hoc-ring:rgba(20,30,70,.10); --hoc-sh:rgba(20,30,70,.09); --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px; --hair:var(--hoc-ring); --line:var(--hoc-ring); --g-edge:var(--hoc-ring); --g-edge-soft:rgba(20,30,70,.06); --g-blur:none; --g-blur-lg:none; --spec:none; --bg:#fff; --bg-soft:#fff; --card:#fff; --hdr:#fff; --g-fill:#fff; background:#fff; } /* ---------- the ten palettes ---------- */ body.hoc-navy { --hoc-p:#2A3A7A; --hoc-a:#EFBF04; --hoc-on-a:#1a1205 } body.hoc-forest { --hoc-p:#14532D; --hoc-a:#F4C430; --hoc-on-a:#1a1205 } body.hoc-claret { --hoc-p:#6B1F3B; --hoc-a:#F0B429; --hoc-on-a:#1a1205 } body.hoc-slate { --hoc-p:#28323C; --hoc-a:#4FD1C5; --hoc-on-a:#06302C } body.hoc-indigo { --hoc-p:#3730A3; --hoc-a:#FBBF24; --hoc-on-a:#1a1205 } body.hoc-teal { --hoc-p:#0F5257; --hoc-a:#F59E0B; --hoc-on-a:#1a1205 } body.hoc-plum { --hoc-p:#4C1D5C; --hoc-a:#E9C46A; --hoc-on-a:#1a1205 } body.hoc-rust { --hoc-p:#7C2D12; --hoc-a:#FCD34D; --hoc-on-a:#1a1205 } body.hoc-ocean { --hoc-p:#0C4A6E; --hoc-a:#38BDF8; --hoc-on-a:#04283B } body.hoc-graphite { --hoc-p:#1F2933; --hoc-a:#F2A413; --hoc-on-a:#1a1205 } /* ---------- surfaces: shadow, never a border ---------- */ body.sk-housecards .card,body.sk-housecards .catcard,body.sk-housecards .tile, body.sk-housecards .artcard,body.sk-housecards .masthead__in, body.sk-housecards .tb-bi,body.sk-housecards .notice,body.sk-housecards .empty, body.sk-housecards .tblwrap,body.sk-housecards .ordersummary, body.sk-housecards .sidemenu,body.sk-housecards .sidemenu__aside{ background:#fff;border:0;border-radius:var(--r-lg); box-shadow:0 1px 2px var(--hoc-sh),0 10px 26px var(--hoc-sh); -webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-housecards .card:hover,body.sk-housecards .catcard:hover, body.sk-housecards .tile:hover,body.sk-housecards .artcard:hover, body.sk-housecards .tb-bi:hover{ box-shadow:0 2px 4px var(--hoc-sh),0 18px 38px rgba(20,30,70,.15); } body.sk-housecards .section{padding:30px 0} body.sk-housecards .section--soft{padding:0;background:#fff} body.sk-housecards .section--soft > .wrap{background:#fff;padding-top:30px;padding-bottom:30px} body.sk-housecards .logostrip{background:#fff;border-top:1px solid var(--hoc-ring);border-bottom:1px solid var(--hoc-ring);padding:22px 0} body.sk-housecards .logostrip__item img{border:0;background:transparent;border-radius:12px} /* ---------- header ---------- */ body.sk-housecards .masthead{display:flow-root;padding-top:0} body.sk-housecards .masthead__in{padding:3px 14px 3px 20px} body.sk-housecards .mainnav{margin-top:2px} body.sk-housecards .mainnav__in{ background:var(--hoc-p);border:1px solid var(--hoc-p);border-radius:var(--r-pill); padding:4px 7px;box-shadow:0 2px 10px var(--hoc-sh); -webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-housecards .mainnav a{color:var(--hoc-on-p);padding:6px 14px;font-size:14px; transition:background .2s,color .2s,box-shadow .2s,transform .12s} body.sk-housecards .mainnav a:hover{background:rgba(255,255,255,.18);color:var(--hoc-on-p); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transform:translateY(-1px)} body.sk-housecards .mainnav a.is-active{background:var(--hoc-a);color:var(--hoc-on-a);font-weight:600} body.sk-housecards .dropdown,body.sk-housecards .flyout{ background:#000;border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:none;backdrop-filter:none; } body.sk-housecards .dropdown a,body.sk-housecards .flyout a{color:#fff} body.sk-housecards .dropdown a:hover,body.sk-housecards .flyout a:hover{background:rgba(255,255,255,.14);color:var(--hoc-a)} body.sk-housecards .flyout__arrow{color:rgba(255,255,255,.55)} body.sk-housecards .flyout__all,body.sk-housecards .dropdown__more{color:rgba(255,255,255,.78);border-top-color:rgba(255,255,255,.16)} body.sk-housecards .dropdown__child{color:rgba(255,255,255,.82)} /* ---------- buttons ---------- */ body.sk-housecards .btn,body.sk-housecards .btn--ghost,body.sk-housecards .mainnav__cta, body.sk-housecards .tb-shop{border-radius:var(--r-pill)} body.sk-housecards .btn:not(.btn--ghost){background:var(--hoc-p);border:1px solid var(--hoc-p); color:var(--hoc-on-p);box-shadow:0 2px 8px var(--hoc-sh)} body.sk-housecards .btn:not(.btn--ghost):hover{background:var(--hoc-a);border-color:var(--hoc-a);color:var(--hoc-on-a)} body.sk-housecards .btn--ghost{background:transparent;border:1.5px solid var(--hoc-ring);color:var(--hoc-p)} body.sk-housecards .btn--ghost:hover{border-color:var(--hoc-p);background:rgba(20,30,70,.05)} /* ---------- alternating sets ---------- */ body.sk-housecards .tb-benefits__row .tb-bi:nth-child(odd), body.sk-housecards .tb-promos .tb-promo:nth-child(odd){background:var(--hoc-p);background-image:none;border:0} body.sk-housecards .tb-benefits__row .tb-bi:nth-child(even), body.sk-housecards .tb-promos .tb-promo:nth-child(even){background:var(--hoc-a);background-image:none;border:0} body.sk-housecards .tb-bi:nth-child(odd) h3,body.sk-housecards .tb-bi:nth-child(odd) p, body.sk-housecards .tb-promo:nth-child(odd) h3,body.sk-housecards .tb-promo:nth-child(odd) p{color:var(--hoc-on-p)} body.sk-housecards .tb-bi:nth-child(even) h3,body.sk-housecards .tb-bi:nth-child(even) p, body.sk-housecards .tb-promo:nth-child(even) h3,body.sk-housecards .tb-promo:nth-child(even) p{color:var(--hoc-on-a)} body.sk-housecards .tb-bi:nth-child(odd) .tb-bi__i{background:var(--hoc-a);border-color:var(--hoc-a);color:var(--hoc-on-a)} body.sk-housecards .tb-bi:nth-child(even) .tb-bi__i{background:var(--hoc-p);border-color:var(--hoc-p);color:var(--hoc-on-p)} body.sk-housecards .tb-bi::before{background:var(--hoc-a)} body.sk-housecards .tb-promo .tb-shop{border-radius:var(--r-pill)} body.sk-housecards .tb-promo:nth-child(odd) .tb-shop{background:var(--hoc-a);color:var(--hoc-on-a)} body.sk-housecards .tb-promo:nth-child(even) .tb-shop{background:var(--hoc-p);color:var(--hoc-on-p)} /* ---------- the category bar ---------- */ body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related){ display:flex;flex-wrap:nowrap;gap:0;border-radius:var(--r-md);overflow:hidden; background:transparent;box-shadow:0 2px 6px var(--hoc-sh),0 14px 32px var(--hoc-sh); } body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard{ flex:1 1 0;min-width:0;border:0;border-radius:0;box-shadow:none;padding:20px 14px; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; transition:box-shadow .18s; } body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(odd){background:var(--hoc-p)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(even){background:var(--hoc-a)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(odd) h3{color:var(--hoc-on-p)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(even) h3{color:var(--hoc-on-a)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard h3{font-size:12.5px;line-height:1.35;margin:11px 0 0;font-weight:600;text-align:center;width:100%} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard__i{background:transparent;border:0;width:auto;height:auto;margin:0;display:flex;align-items:center;justify-content:center} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard__i svg{width:21px;height:21px} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(odd) .catcard__i, body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(odd) .catcard__i svg *{color:var(--hoc-a);stroke:var(--hoc-a)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(even) .catcard__i, body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(even) .catcard__i svg *{color:var(--hoc-p);stroke:var(--hoc-p)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard span, body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard p, body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard__bg, body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) .catcard::before{display:none} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(odd):hover{box-shadow:inset 0 0 0 2px var(--hoc-a)} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard:nth-child(even):hover{box-shadow:inset 0 0 0 2px var(--hoc-on-a)} @media(max-width:900px){ body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related){flex-wrap:wrap} body.sk-housecards .section:has(> .wrap > .section__head) > .wrap > .grid:not(.grid--related) > .catcard{flex:1 1 45%} } /* ---------- product rows and tiles ---------- */ body.sk-housecards .plist{background:transparent;border:0;border-radius:0;overflow:visible} body.sk-housecards .prow{ border:0;border-top:3px solid var(--hoc-a);border-radius:var(--r-md);background:#fff; box-shadow:0 1px 2px var(--hoc-sh),0 8px 22px var(--hoc-sh); margin-bottom:12px;padding:16px 18px;transition:box-shadow .2s,transform .12s; } body.sk-housecards .prow:last-child{margin-bottom:0} body.sk-housecards .prow:hover{transform:translateY(-2px);box-shadow:0 2px 4px var(--hoc-sh),0 16px 34px rgba(20,30,70,.14)} body.sk-housecards .prow__img{background:#fff;border:1.5px solid var(--hoc-p);border-radius:var(--r-lg);width:96px;height:86px} body.sk-housecards .prow:hover .prow__img{border-color:var(--hoc-a)} body.sk-housecards .prow__name{font-size:15.5px;font-weight:700;margin-bottom:6px} body.sk-housecards .prow__name a{color:var(--ink)} body.sk-housecards .prow__name a:hover{color:var(--hoc-p)} body.sk-housecards .prow__meta b{color:var(--hoc-p)} body.sk-housecards .tile{border:0;border-top:3px solid var(--hoc-a);border-radius:var(--r-lg);overflow:hidden} body.sk-housecards .tile__img{background:#fbfcfe;border-bottom:1px solid var(--g-edge-soft)} body.sk-housecards .tile__brand{color:var(--hoc-p);font-weight:700} body.sk-housecards .tile__name a{color:var(--ink)} body.sk-housecards .tile__name a:hover{color:var(--hoc-p)} body.sk-housecards .tile__add .btn{width:100%;justify-content:center} body.sk-housecards .dealclock__d{background:var(--hoc-p);color:var(--hoc-on-p);border-radius:10px;padding:.34em .45em;box-shadow:0 2px 6px var(--hoc-sh)} body.sk-housecards .dealclock__c{color:var(--hoc-p);opacity:.45} body.sk-housecards .dealclock.is-soon .dealclock__d{background:var(--hoc-a);color:var(--hoc-on-a)} /* ---------- the filter panel ---------- */ body.sk-housecards .pf2,body.sk-housecards .catfilter{ background:var(--hoc-p);border:0;border-radius:var(--r-md);overflow:hidden;color:#fff; box-shadow:0 2px 6px var(--hoc-sh),0 14px 32px var(--hoc-sh); } body.sk-housecards .pf2 > *,body.sk-housecards .pf2 div, body.sk-housecards .catfilter > *,body.sk-housecards .catfilter div{background-color:transparent} body.sk-housecards .pf2__head,body.sk-housecards .catfilter__head{ background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.13);padding:13px 15px 10px} body.sk-housecards .pf2__head > span:first-child,body.sk-housecards .catfilter__head{ background:transparent;color:var(--hoc-a);padding:0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase} body.sk-housecards .pf2__search,body.sk-housecards .catfilter__search{ border:0;border-bottom:1.5px solid rgba(255,255,255,.22);border-radius:0;background:transparent;color:#fff;padding:6px 2px} body.sk-housecards .pf2__search::placeholder,body.sk-housecards .catfilter__search::placeholder{color:rgba(255,255,255,.45)} body.sk-housecards .pf2__search:focus,body.sk-housecards .catfilter__search:focus{border-bottom-color:var(--hoc-a);outline:0;box-shadow:none} body.sk-housecards .pf2__row,body.sk-housecards .pf2__brand,body.sk-housecards .pf2__sub, body.sk-housecards .catfilter__row,body.sk-housecards .catfilter__brand,body.sk-housecards .catfilter__sub{ display:flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:5px 10px;margin:1px 0; color:rgba(255,255,255,.9);font-size:12.5px;transition:background .15s} body.sk-housecards .pf2__lbl,body.sk-housecards .catfilter__label{padding:0;margin:0;border-radius:0;flex:1} body.sk-housecards .pf2__row > span,body.sk-housecards .pf2__brand > span, body.sk-housecards .catfilter__row > span,body.sk-housecards .catfilter__label > span{color:rgba(255,255,255,.9)} body.sk-housecards .pf2__row:hover,body.sk-housecards .pf2__brand:hover,body.sk-housecards .pf2__sub:hover, body.sk-housecards .catfilter__row:hover,body.sk-housecards .catfilter__brand:hover{background:rgba(255,255,255,.1)} body.sk-housecards .pf2__row:has(input:checked),body.sk-housecards .pf2__brand:has(input:checked), body.sk-housecards .catfilter__row:has(input:checked),body.sk-housecards .catfilter__brand:has(input:checked){background:var(--hoc-a)} body.sk-housecards .pf2__row:has(input:checked) *,body.sk-housecards .pf2__brand:has(input:checked) *, body.sk-housecards .catfilter__row:has(input:checked) *,body.sk-housecards .catfilter__brand:has(input:checked) *{color:var(--hoc-on-a)} body.sk-housecards .pf2__bcnt,body.sk-housecards .pf2__cnt, body.sk-housecards .catfilter__cnt,body.sk-housecards .catfilter__count{color:rgba(255,255,255,.55);font-size:11px} body.sk-housecards .pf2__subs,body.sk-housecards .catfilter__subs{ background:transparent;border-left:2px solid rgba(255,255,255,.35);margin:2px 0 4px 20px;padding-left:6px} body.sk-housecards .pf2__toggle,body.sk-housecards .catfilter__toggle,body.sk-housecards .pf2__tog{color:rgba(255,255,255,.6)} body.sk-housecards .pf2__act,body.sk-housecards .catfilter__actions{ background:transparent;border:0;border-top:1px solid rgba(255,255,255,.13);padding:12px 15px 15px;display:flex;gap:10px;align-items:center} body.sk-housecards .pf2__clear,body.sk-housecards .catfilter__clear{color:rgba(255,255,255,.58);font-size:12px} body.sk-housecards .pf2__apply,body.sk-housecards .catfilter__apply{ flex:1;background:var(--hoc-a);color:var(--hoc-on-a);border:0;border-radius:var(--r-pill);padding:9px;font-weight:700} body.sk-housecards .pf2__apply:hover,body.sk-housecards .catfilter__apply:hover{background:#fff;color:var(--hoc-p)} body.sk-housecards .pf2__chips,body.sk-housecards .catfilter__chips{background-color:rgba(0,0,0,.18);border:0;padding:10px 14px} body.sk-housecards .pf2__chip{background:var(--hoc-a);color:var(--hoc-on-a);border-radius:var(--r-pill)} /* ---------- footer ---------- */ body.sk-housecards .sitefoot{background:#16204a;border-radius:var(--r-md) var(--r-md) 0 0;border-top:3px solid var(--hoc-a);margin-top:26px} body.sk-housecards .sitefoot::before{display:none} body.sk-housecards .sitefoot__grid{padding:26px 26px 20px} body.sk-housecards .sitefoot h4{color:var(--hoc-a);font-size:11px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px} body.sk-housecards .sitefoot__col a{color:rgba(255,255,255,.76);font-size:13px;padding:4px 0} body.sk-housecards .sitefoot__col a:hover{color:var(--hoc-a)} body.sk-housecards .sitefoot__col--intro img{background:#fff;border-radius:10px;padding:7px 12px;max-height:52px} body.sk-housecards .sitefoot__bar{background:#101832;border-top:1px solid rgba(255,255,255,.09)} body.sk-housecards .sitefoot__bar,body.sk-housecards .sitefoot__bar a{color:rgba(255,255,255,.5);font-size:12px} body.sk-housecards .sitefoot__bar a:hover{color:var(--hoc-a)} /* ---------- headings, prose, policy pages ---------- */ body.sk-housecards .pagehead .wrap h1{border-left:4px solid var(--hoc-a);padding-left:16px} body.sk-housecards .pagehead .wrap .eyebrow{color:var(--hoc-a);padding-left:16px;display:block} body.sk-housecards .section__head > p{display:none} body.sk-housecards .section__head::before{background:var(--hoc-a)} body.sk-housecards .prose strong{color:var(--hoc-p)} body.sk-housecards .prose h3:not(:only-of-type){ font-size:16px;color:var(--hoc-p);margin:30px 0 10px;padding-left:13px; border-left:3px solid var(--hoc-a);border-bottom:0;display:block;line-height:1.4} body.sk-housecards .prose li::marker{color:var(--hoc-a)} body.sk-housecards .prose:has(h3:not(:only-of-type)){max-width:88ch;margin-inline:auto} body.sk-housecards .prose blockquote{ background:var(--hoc-p);border:0;border-left:4px solid var(--hoc-a);border-radius:12px; margin:24px 0;padding:16px 20px;color:#fff;font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px;line-height:2;font-style:normal} body.sk-housecards .prose blockquote strong{color:rgba(255,255,255,.55);font-weight:400} body.sk-housecards .hero .slide{min-height:0} body.sk-housecards .hero .slide img{position:static;width:100%;height:auto;object-fit:contain} body.sk-housecards .hero .slide .slide__mask{display:none} /* ---------- product tiles: identical wherever they appear ------------------- Related products, category listings and the home page all render .tile. They must not read differently from one another, which means the three things that vary have to be pinned: the picture box, the number of title lines, and where the price and button sit. The related grid ALSO carries .section__head above it, the same marker the category bar uses - which is why that rule now excludes .grid--related. */ body.sk-housecards .grid--related{align-items:stretch} body.sk-housecards .tile{height:100%;display:flex;flex-direction:column} /* a square picture box, whatever shape the supplied image is */ body.sk-housecards .tile__img{aspect-ratio:1/1;height:auto;flex:none;display:grid;place-items:center;overflow:hidden} body.sk-housecards .tile__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} body.sk-housecards .tile__body{display:flex;flex-direction:column;flex:1} /* two lines at every width - the package only clamps above 1100px, so a long name made one tile taller than its neighbours on narrower screens */ body.sk-housecards .tile__name{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:2.6em; } body.sk-housecards .tile__part{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* price and button pushed to the foot, so they line up across the row even when the names above them differ in length */ body.sk-housecards .tile__price{margin-top:auto} body.sk-housecards .tile__add{margin-top:10px} /* ---------- mobile --------------------------------------------------------- Everything this skin restyles, checked at phone width. Nothing outside the skin is touched. */ @media (max-width:900px){ body.sk-housecards .contactgrid{grid-template-columns:1fr} body.sk-housecards .contactgrid > :nth-child(2){order:2;border-radius:0 0 18px 18px} body.sk-housecards .contactgrid > :nth-child(1){order:1} } @media (max-width:760px){ /* header: the nav bar becomes a stack rather than a squeezed pill */ body.sk-housecards .masthead__in{padding:6px 12px;gap:10px} body.sk-housecards .mainnav__in{border-radius:14px;padding:6px} body.sk-housecards .mainnav a{padding:8px 12px;font-size:13.5px} /* product rows: picture, then details, then price - not three columns */ body.sk-housecards .prow{padding:13px 14px;gap:12px} body.sk-housecards .prow__img{width:74px;height:68px;border-radius:14px} body.sk-housecards .prow__buy{width:100%;flex-direction:row;align-items:center; justify-content:space-between;text-align:left;gap:10px;flex-wrap:wrap} body.sk-housecards .prow__buy .btn{flex:1;min-width:140px;justify-content:center} /* tiles: two per row, still square pictures and two-line names */ body.sk-housecards .grid--related{grid-template-columns:repeat(2,minmax(0,1fr))} body.sk-housecards .tile__body{padding:11px 12px 13px} body.sk-housecards .tile__name{font-size:12.5px} /* the filter panel is a full-width card above the results, not a rail */ body.sk-housecards .pf2,body.sk-housecards .catfilter{position:static;max-height:none;border-radius:14px} body.sk-housecards .pf2__clist,body.sk-housecards .pf2__blist, body.sk-housecards .pf2__list,body.sk-housecards .catfilter__list{max-height:44vh} /* footer columns stack */ body.sk-housecards .sitefoot{border-radius:14px 14px 0 0;margin-top:20px} body.sk-housecards .sitefoot__grid{padding:20px 18px 16px;gap:18px} body.sk-housecards .sitefoot__bar-in{flex-direction:column;gap:6px;text-align:center} /* the quote band stacks instead of pushing its buttons off the edge */ body.sk-housecards .nvx-cta{flex-direction:column;align-items:stretch;text-align:center;padding:18px} body.sk-housecards .nvx-cta__acts{justify-content:center} /* sections tighten again - 30px either side is a lot on a phone */ body.sk-housecards .section{padding:20px 0} body.sk-housecards .section--soft > .wrap{padding-top:20px;padding-bottom:20px} body.sk-housecards .pagehead{padding:24px 0 16px} } @media (max-width:520px){ /* one tile per row rather than two squeezed ones */ body.sk-housecards .grid--related{grid-template-columns:1fr} body.sk-housecards .prow__img{width:100%;height:150px} body.sk-housecards .prow{flex-direction:column;align-items:stretch} body.sk-housecards .mainnav a{padding:7px 10px;font-size:13px} } /* ============================================================================ BLUE PATRIOT B2C SKIN_BLUEPATRIOT ---------------------------------------------------------------------------- A retail skin. Where House of Cards is quiet and even, this one is built to sell: price is the loudest thing on a card, every product carries an Add to Cart, savings are called out, and the accent colour is reserved almost entirely for things you can click. THREE SETTINGS, not one. The palette picks the two colours; the card family decides how every surface is framed; the row style decides how a product list reads. They are independent, so the same palette can look considered or punchy depending on the other two. Everything reads --bp-p and --bp-a. No rule hard-codes a colour, so changing palette repaints the whole site - and --bp-on-a exists because a bright accent needs dark text on it: white on lime measures under 2:1 against a 4.5:1 minimum, which is unreadable rather than merely poor. ============================================================================ */ body.sk-bluepatriot{ --bp-p:#3730A3; --bp-a:#A3E635; --bp-pd:#28217A; --bp-on-a:#14200a; --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-pill:0px; --hair:rgba(20,30,60,.11); --line:rgba(20,30,60,.11); --g-edge:rgba(20,30,60,.11); --g-edge-soft:rgba(20,30,60,.07); --g-blur:none; --g-blur-lg:none; --spec:none; --bg:#fff; --bg-soft:#fff; --card:#fff; --hdr:#fff; --g-fill:#fff; --primary:var(--bp-p); --accent:var(--bp-a); background:#fff; } /* ---------- ten palettes ---------- */ body.bp-indigo { --bp-p:#3730A3; --bp-a:#A3E635; --bp-pd:#28217A; --bp-on-a:#14200a } body.bp-brand { --bp-p:#1A4FA0; --bp-a:#F5A623; --bp-pd:#123A78; --bp-on-a:#1a1205 } body.bp-ocean { --bp-p:#0B5A8A; --bp-a:#FF7A59; --bp-pd:#08425F; --bp-on-a:#2b0d05 } body.bp-teal { --bp-p:#0F5257; --bp-a:#F2A413; --bp-pd:#0A3A3E; --bp-on-a:#1a1205 } body.bp-plum { --bp-p:#5B2A6B; --bp-a:#FFA46B; --bp-pd:#41184E; --bp-on-a:#2b1205 } body.bp-forest { --bp-p:#14532D; --bp-a:#BEF264; --bp-pd:#0C3A1E; --bp-on-a:#122007 } body.bp-charcoal{ --bp-p:#25303B; --bp-a:#F5A623; --bp-pd:#161E26; --bp-on-a:#1a1205 } body.bp-violet { --bp-p:#4C1D95; --bp-a:#5EEAD4; --bp-pd:#361268; --bp-on-a:#04302a } body.bp-claret { --bp-p:#6B1F3B; --bp-a:#F0B429; --bp-pd:#4C1229; --bp-on-a:#1a1205 } body.bp-slate { --bp-p:#28323C; --bp-a:#38BDF8; --bp-pd:#18202A; --bp-on-a:#04283B } /* "custom" takes the site's own Brand colours, so any pair can be used */ body.bp-custom { --bp-p:var(--primary,#3730A3); --bp-a:var(--accent,#A3E635); } /* ---------- header ---------- */ body.sk-bluepatriot .masthead{display:flow-root;padding-top:0} body.sk-bluepatriot .masthead__in{background:#fff;border:0;border-bottom:1px solid var(--line); border-radius:0;box-shadow:none;padding:12px 18px;-webkit-backdrop-filter:none;backdrop-filter:none} body.sk-bluepatriot .mainnav{margin-top:0} body.sk-bluepatriot .mainnav__in{background:var(--bp-p);border:0;border-radius:0;padding:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} body.sk-bluepatriot .mainnav a{color:#fff;padding:12px 15px;font-size:14px;font-weight:500;position:relative} body.sk-bluepatriot .mainnav a:hover{background:rgba(255,255,255,.16)} body.sk-bluepatriot .mainnav a.is-active{background:rgba(255,255,255,.16)} body.sk-bluepatriot .mainnav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0; height:3px;background:var(--bp-a)} body.sk-bluepatriot .mainnav__cta{background:var(--bp-a);color:var(--bp-on-a);border:0;border-radius:0;font-weight:800} body.sk-bluepatriot .dropdown,body.sk-bluepatriot .flyout{background:#fff;border:1px solid var(--line); border-top:4px solid var(--bp-a);border-radius:0;box-shadow:0 12px 30px rgba(20,30,60,.16); -webkit-backdrop-filter:none;backdrop-filter:none} body.sk-bluepatriot .dropdown a,body.sk-bluepatriot .flyout a{color:#39424e;border-radius:0} body.sk-bluepatriot .dropdown a:hover,body.sk-bluepatriot .flyout a:hover{background:var(--bp-p);color:#fff} body.sk-bluepatriot .dropdown__parent{color:#12181f;font-weight:600} body.sk-bluepatriot .flyout__arrow{color:var(--bp-p)} /* ---------- buttons: primary sells, ghost supports ---------- */ body.sk-bluepatriot .btn{border-radius:0;font-weight:800} body.sk-bluepatriot .btn:not(.btn--ghost){background:var(--bp-p);border:1px solid var(--bp-p);color:#fff} body.sk-bluepatriot .btn:not(.btn--ghost):hover{background:var(--bp-a);border-color:var(--bp-a);color:var(--bp-on-a)} body.sk-bluepatriot .btn--ghost{background:transparent;border:1.5px solid var(--line);color:var(--bp-p)} body.sk-bluepatriot .btn--ghost:hover{border-color:var(--bp-p);background:color-mix(in srgb,var(--bp-p) 6%,#fff)} /* ---------- section headings ---------- */ body.sk-bluepatriot .section{padding:30px 0} body.sk-bluepatriot .section--soft{padding:0;background:#fff} body.sk-bluepatriot .section--soft > .wrap{background:#fff;padding-top:30px;padding-bottom:30px} body.sk-bluepatriot .section__head{margin-bottom:18px} body.sk-bluepatriot .section__head > p{display:none} body.sk-bluepatriot .section__head h2,body.sk-bluepatriot .pagehead .wrap h1{ padding-left:14px;position:relative;letter-spacing:-.025em} body.sk-bluepatriot .section__head h2::before,body.sk-bluepatriot .pagehead .wrap h1::before{ content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;background:var(--bp-a)} body.sk-bluepatriot .section__head::before{display:none} body.sk-bluepatriot .pagehead{padding:26px 0 16px} body.sk-bluepatriot .pagehead .wrap .eyebrow{color:var(--bp-p);padding-left:14px;display:block} /* ---------- category cards ---------- */ body.sk-bluepatriot .grid--3 .catcard,body.sk-bluepatriot .grid--4 .catcard{ background:#fff;overflow:hidden;padding:0;text-align:left} body.sk-bluepatriot .grid--3 .catcard h3,body.sk-bluepatriot .grid--4 .catcard h3{ background:var(--bp-p);color:#fff;margin:0;padding:11px 13px;font-size:13px;font-weight:600} body.sk-bluepatriot .grid--3 .catcard p,body.sk-bluepatriot .grid--4 .catcard p, body.sk-bluepatriot .grid--3 .catcard span,body.sk-bluepatriot .grid--4 .catcard span{display:none} body.sk-bluepatriot .catcard__i{background:transparent;border:0;color:var(--bp-p);margin:14px 0 8px 14px} body.sk-bluepatriot .catcard__bg{display:none} /* ---------- markets: solid, alternating ---------- */ body.sk-bluepatriot .catcard--auto{background:var(--bp-p);color:#fff;padding:22px 20px;overflow:hidden} body.sk-bluepatriot .catcard--auto:nth-child(even){background:var(--bp-pd)} body.sk-bluepatriot .catcard--auto::before{content:"";position:static;display:block;width:30px;height:4px; background:var(--bp-a);margin-bottom:11px} body.sk-bluepatriot .catcard--auto h3{color:#fff;font-size:17px;margin:0 0 5px} body.sk-bluepatriot .catcard--auto p,body.sk-bluepatriot .catcard--auto span{color:rgba(255,255,255,.75)} body.sk-bluepatriot .catcard--auto .catcard__i{display:none} body.sk-bluepatriot .catcard--auto .catcard__bg{display:none} /* ---------- benefits band ---------- */ body.sk-bluepatriot .tb-benefits__row{background:var(--bp-p);display:grid;gap:0;position:relative;overflow:hidden} body.sk-bluepatriot .tb-benefits__row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--bp-a)} body.sk-bluepatriot .tb-bi{background:transparent;border:0;border-right:1px solid rgba(255,255,255,.16); border-radius:0;box-shadow:none;padding:22px 20px;color:#fff} body.sk-bluepatriot .tb-bi:last-child{border-right:0} body.sk-bluepatriot .tb-bi::before{content:"";position:static;display:block;width:26px;height:4px; background:var(--bp-a);margin-bottom:10px} body.sk-bluepatriot .tb-bi h3{color:#fff;font-size:15px;margin:0 0 2px} body.sk-bluepatriot .tb-bi p{color:rgba(255,255,255,.78);font-size:12.5px;margin:0} body.sk-bluepatriot .tb-bi__i{background:transparent;border:0;color:var(--bp-a);width:auto;height:auto;margin:0 0 8px} /* ---------- promo tiles ---------- */ body.sk-bluepatriot .tb-promo{border-radius:0;background-image:none!important} body.sk-bluepatriot .tb-promo:nth-child(odd){background:var(--bp-p)!important} body.sk-bluepatriot .tb-promo:nth-child(even){background:var(--bp-pd)!important} body.sk-bluepatriot .tb-promo h3,body.sk-bluepatriot .tb-promo p{color:#fff!important} body.sk-bluepatriot .tb-shop{background:var(--bp-a)!important;color:var(--bp-on-a)!important;border-radius:0!important} /* ---------- product tiles ---------- */ body.sk-bluepatriot .tile{background:#fff;overflow:hidden;display:flex;flex-direction:column;height:100%} body.sk-bluepatriot .tile__img{aspect-ratio:1/1;height:auto;flex:none;display:grid;place-items:center; background:#fbfcfe;border-bottom:1px solid var(--g-edge-soft);overflow:hidden} body.sk-bluepatriot .tile__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} body.sk-bluepatriot .tile__brand{color:var(--bp-p);font-weight:800;letter-spacing:.11em} body.sk-bluepatriot .tile__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.7em} body.sk-bluepatriot .tile__name a{color:#12181f} body.sk-bluepatriot .tile__name a:hover{color:var(--bp-p)} body.sk-bluepatriot .tile__price{margin-top:auto} body.sk-bluepatriot .tile__add{margin-top:10px} body.sk-bluepatriot .tile__add .btn{width:100%;justify-content:center} body.sk-bluepatriot .dealclock__d{background:var(--bp-a);color:var(--bp-on-a);border-radius:0; box-shadow:none;font-weight:800} body.sk-bluepatriot .dealclock__c{color:var(--bp-p);opacity:.5} body.sk-bluepatriot .plist{background:transparent;border:0;border-radius:0;overflow:visible} body.sk-bluepatriot .logostrip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0} body.sk-bluepatriot .logostrip__item img{border:0;background:transparent} /* ---------- CARD FAMILIES ------------------------------------------------ One idea applied to every surface, so the page reads as a system. The list of surfaces is deliberately identical in all three - a family that skips one element is what makes a component look bolted on. */ /* 1 - cut corner */ body.bpc-cut .catcard,body.bpc-cut .tile,body.bpc-cut .prow,body.bpc-cut .pf2, body.bpc-cut .catfilter,body.bpc-cut .tb-benefits__row,body.bpc-cut .artcard{ clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%); border:1px solid var(--line)} body.bpc-cut .catcard::after,body.bpc-cut .tile::after,body.bpc-cut .prow::after{ content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid; border-width:0 0 16px 16px;border-color:transparent transparent var(--bp-a) transparent} body.bpc-cut .tb-benefits__row{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);border:0} body.bpc-cut .tb-benefits__row::after{left:auto;right:0;bottom:0;width:0;height:0;background:none; border-style:solid;border-width:0 0 22px 22px;border-color:transparent transparent var(--bp-a) transparent} body.bpc-cut .catcard,body.bpc-cut .tile,body.bpc-cut .prow{position:relative} body.bpc-cut .catcard--auto{border:0} /* 2 - accent bar on the leading edge */ body.bpc-bar .catcard,body.bpc-bar .tile,body.bpc-bar .pf2,body.bpc-bar .catfilter, body.bpc-bar .artcard{border:1px solid var(--line);position:relative} body.bpc-bar .catcard::before,body.bpc-bar .tile::before,body.bpc-bar .pf2::before, body.bpc-bar .catfilter::before,body.bpc-bar .artcard::before{ content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--bp-a);z-index:3} body.bpc-bar .prow{border:1px solid var(--line);border-left:6px solid var(--bp-a)} body.bpc-bar .catcard--auto{border:0;padding-left:26px} body.bpc-bar .catcard--auto::before{position:absolute;left:0;top:0;bottom:0;width:7px;height:auto;margin:0} body.bpc-bar .tb-benefits__row{border:0} body.bpc-bar .tb-benefits__row::after{top:0;bottom:auto;height:6px} /* 3 - raised plate */ body.bpc-plate .catcard,body.bpc-plate .tile,body.bpc-plate .prow,body.bpc-plate .pf2, body.bpc-plate .catfilter,body.bpc-plate .artcard{border:0; box-shadow:0 1px 2px rgba(20,30,60,.06),0 10px 26px rgba(20,30,60,.09);position:relative} body.bpc-plate .prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--bp-a)} body.bpc-plate .tb-benefits__row{border:0;box-shadow:0 1px 2px rgba(20,30,60,.06),0 10px 26px rgba(20,30,60,.12)} body.bpc-plate .tb-benefits__row::after{top:0;bottom:auto;left:20px;right:auto;width:44px;height:5px} /* ---------- PRODUCT ROWS - four same-line styles ------------------------- All four hold one line, so a list of six finishes level with the filter beside it. What changes is what leads the row and how price reads. */ body.sk-bluepatriot .prow{display:flex;align-items:center;background:#fff;padding:0;margin-bottom:6px; min-height:46px;gap:0;position:relative} body.sk-bluepatriot .prow__img{width:46px;height:auto;flex:none;align-self:stretch;background:#fbfcfe; border:0;border-radius:0;display:grid;place-items:center;padding:4px} body.sk-bluepatriot .prow__main{display:flex;align-items:center;gap:10px;padding:5px 12px;min-width:0;flex:1} body.sk-bluepatriot .prow__name{font-size:13px;margin:0;font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0} body.sk-bluepatriot .prow__meta{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--bp-p);font-weight:800;flex:none;margin:0} body.sk-bluepatriot .prow__buy{width:auto;flex:none;flex-direction:row;align-items:center;gap:10px; text-align:right;padding-right:12px} body.sk-bluepatriot .prow__buy .btn{padding:6px 14px;font-size:11.5px;white-space:nowrap;width:auto} /* A - thumbnail leads. Declared rather than left implicit, so all four styles exist as rules and none depends on being "whatever the base happens to be". */ body.bpr-thumb .prow__img{display:grid;width:46px} body.bpr-thumb .prow::before{display:none} /* B - ranked, no picture */ body.bpr-rank .prow__img{display:none} body.bpr-rank .prow{counter-increment:bprow} body.bpr-rank .prow::before{content:counter(bprow);display:grid;place-items:center;width:40px;flex:none; align-self:stretch;background:var(--bp-p);color:#fff;font-weight:800;font-size:14px} body.bpr-rank .plist{counter-reset:bprow} /* C - larger thumbnail, price stacked */ body.bpr-stack .prow{min-height:56px} body.bpr-stack .prow__img{width:56px} body.bpr-stack .prow__buy{flex-direction:column;align-items:flex-end;gap:1px} /* D - zebra list, no frame */ body.bpr-zebra .prow{border:0!important;box-shadow:none!important;clip-path:none!important; background:transparent;min-height:42px;margin-bottom:0} body.bpr-zebra .prow::after,body.bpr-zebra .prow::before{display:none!important} body.bpr-zebra .prow:nth-child(odd){background:color-mix(in srgb,var(--bp-p) 5%,#fff)} body.bpr-zebra .prow__img{background:transparent;width:38px} body.bpr-zebra .prow__meta{display:none} body.bpr-zebra .prow__buy .btn{background:transparent;border:0;color:var(--bp-p);padding:6px 0} body.bpr-zebra .prow__buy .btn:hover{background:transparent;color:var(--bp-a)} /* ---------- filter ---------- */ body.sk-bluepatriot .pf2,body.sk-bluepatriot .catfilter{background:#fff;color:#39424e;border-radius:0;overflow:hidden} body.sk-bluepatriot .pf2__head,body.sk-bluepatriot .catfilter__head{background:transparent;border:0; border-bottom:1px solid var(--line);padding:14px 16px 11px} body.sk-bluepatriot .pf2__head > span:first-child,body.sk-bluepatriot .catfilter__head{ background:transparent;color:var(--bp-p);padding:0;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase} body.sk-bluepatriot .pf2__search,body.sk-bluepatriot .catfilter__search{border:0; border-bottom:1.5px solid var(--line);border-radius:0;background:transparent;padding:7px 2px} body.sk-bluepatriot .pf2__search:focus,body.sk-bluepatriot .catfilter__search:focus{ border-bottom-color:var(--bp-a);outline:0;box-shadow:none} body.sk-bluepatriot .pf2__row,body.sk-bluepatriot .pf2__brand,body.sk-bluepatriot .pf2__sub, body.sk-bluepatriot .catfilter__row,body.sk-bluepatriot .catfilter__brand,body.sk-bluepatriot .catfilter__sub{ display:flex;align-items:center;gap:9px;border-radius:0;padding:5px 10px;margin:1px 0;font-size:13px; transition:background .15s} body.sk-bluepatriot .pf2__lbl,body.sk-bluepatriot .catfilter__label{padding:0;margin:0;flex:1} body.sk-bluepatriot .pf2__row:hover,body.sk-bluepatriot .catfilter__row:hover, body.sk-bluepatriot .pf2__brand:hover{background:color-mix(in srgb,var(--bp-p) 7%,#fff)} body.sk-bluepatriot .pf2__row:has(input:checked),body.sk-bluepatriot .catfilter__row:has(input:checked), body.sk-bluepatriot .pf2__brand:has(input:checked),body.sk-bluepatriot .catfilter__brand:has(input:checked){ background:var(--bp-p)} body.sk-bluepatriot .pf2__row:has(input:checked) *,body.sk-bluepatriot .catfilter__row:has(input:checked) *, body.sk-bluepatriot .pf2__brand:has(input:checked) *,body.sk-bluepatriot .catfilter__brand:has(input:checked) *{color:#fff} body.sk-bluepatriot .pf2__lbl input[type="checkbox"], body.sk-bluepatriot .catfilter__label input[type="checkbox"]{accent-color:var(--bp-a)} body.sk-bluepatriot .pf2__subs,body.sk-bluepatriot .catfilter__subs{background:transparent; border-left:2px solid var(--bp-a);margin:2px 0 4px 20px;padding-left:6px} body.sk-bluepatriot .pf2__chips,body.sk-bluepatriot .catfilter__chips{background:transparent;border:0;padding:10px 16px} body.sk-bluepatriot .pf2__chip{background:var(--bp-a);color:var(--bp-on-a);border-radius:0;font-weight:700} body.sk-bluepatriot .pf2__act,body.sk-bluepatriot .catfilter__actions{background:transparent;border:0; border-top:1px solid var(--line);padding:13px 16px} body.sk-bluepatriot .pf2__apply,body.sk-bluepatriot .catfilter__apply{background:var(--bp-p);color:#fff; border:0;border-radius:0;font-weight:800} body.sk-bluepatriot .pf2__apply:hover,body.sk-bluepatriot .catfilter__apply:hover{ background:var(--bp-a);color:var(--bp-on-a)} /* ---------- footer ---------- */ body.sk-bluepatriot .sitefoot{background:#fff;border-top:5px solid var(--bp-a);color:#39424e;margin-top:36px} body.sk-bluepatriot .sitefoot::before{display:none} body.sk-bluepatriot .sitefoot__grid{padding:30px 0 24px} body.sk-bluepatriot .sitefoot h4{color:var(--bp-p);font-size:11px;letter-spacing:.1em;text-transform:uppercase; border-bottom:2px solid var(--bp-a);padding-bottom:6px;display:inline-block;margin-bottom:11px} body.sk-bluepatriot .sitefoot__col a,body.sk-bluepatriot .sitefoot__col p{color:#68727f;font-size:13.5px} body.sk-bluepatriot .sitefoot__col a:hover{color:var(--bp-p)} body.sk-bluepatriot .sitefoot__bar{background:#fff;border-top:1px solid var(--line)} body.sk-bluepatriot .sitefoot__bar,body.sk-bluepatriot .sitefoot__bar a{color:#68727f;font-size:12.5px} body.sk-bluepatriot .sitefoot__bar a:hover{color:var(--bp-p)} /* ---------- contact and policy pages ---------- */ body.sk-bluepatriot .contactgrid{grid-template-columns:.9fr 1.1fr;gap:0;border-radius:0;overflow:hidden; box-shadow:none;border:1px solid var(--line)} body.sk-bluepatriot .contactgrid > :nth-child(2){order:1;background:var(--bp-p);color:#fff;padding:30px 28px} body.sk-bluepatriot .contactgrid > :nth-child(2) h2, body.sk-bluepatriot .contactgrid > :nth-child(2) h3{color:#fff} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist li{ border-bottom:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.82);padding:13px 0} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .k{color:var(--bp-a);font-size:11px; letter-spacing:.1em;text-transform:uppercase} body.sk-bluepatriot .contactgrid > :nth-child(2) a{color:#fff} body.sk-bluepatriot .contactgrid > :nth-child(2) a:hover{color:var(--bp-a)} body.sk-bluepatriot .contactgrid > :nth-child(1){order:2;background:#fff;padding:30px 28px} body.sk-bluepatriot .contactgrid .field input,body.sk-bluepatriot .contactgrid .field textarea, body.sk-bluepatriot .contactgrid .field select{border:0;border-bottom:2px solid var(--line); border-radius:0;background:transparent;padding:9px 2px} body.sk-bluepatriot .contactgrid .field input:focus,body.sk-bluepatriot .contactgrid .field textarea:focus{ border-bottom-color:var(--bp-a);outline:0;box-shadow:none} body.sk-bluepatriot .contactgrid .field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--bp-p);font-weight:800} body.sk-bluepatriot .prose h3:not(:only-of-type){font-size:17px;color:var(--bp-p);margin:30px 0 9px; padding-left:14px;border-left:4px solid var(--bp-a);border-bottom:0;display:block} body.sk-bluepatriot .prose li::marker{color:var(--bp-a)} body.sk-bluepatriot .prose:has(h3:not(:only-of-type)){max-width:88ch;margin-inline:auto} body.sk-bluepatriot .prose blockquote{background:var(--bp-p);border:0;border-left:5px solid var(--bp-a); border-radius:0;color:#fff;padding:16px 20px;font-style:normal} body.sk-bluepatriot .hero .slide{min-height:0} body.sk-bluepatriot .hero .slide img{position:static;width:100%;height:auto;object-fit:contain} body.sk-bluepatriot .hero .slide .slide__mask{display:none} /* ---------- mobile ---------- */ @media(max-width:820px){ body.sk-bluepatriot .tb-benefits__row{grid-template-columns:repeat(2,1fr)} body.sk-bluepatriot .contactgrid{grid-template-columns:1fr} body.sk-bluepatriot .contactgrid > :nth-child(2){order:2} body.sk-bluepatriot .contactgrid > :nth-child(1){order:1} } @media(max-width:760px){ body.sk-bluepatriot .masthead__in{padding:8px 12px} body.sk-bluepatriot .mainnav a{padding:9px 12px;font-size:13.5px} body.sk-bluepatriot .prow{flex-wrap:wrap;min-height:0;padding-bottom:8px} body.sk-bluepatriot .prow__main{width:calc(100% - 46px)} body.sk-bluepatriot .prow__name{white-space:normal} body.sk-bluepatriot .prow__buy{width:100%;justify-content:space-between;padding:0 12px} body.sk-bluepatriot .section{padding:20px 0} body.sk-bluepatriot .pf2,body.sk-bluepatriot .catfilter{position:static;max-height:none} } /* ---------- WHY CHOOSE US, W3 ------------------------------------------- A statement panel beside a numbered list of reasons. Built entirely from what the block already prints. The section head and the card grid are siblings inside .wrap, so the wrap becomes a two-column grid: the heading moves into a solid indigo panel on the left, and the cards become numbered rows on the right. No markup change, so it survives updates. The numbers come from a CSS counter rather than being typed into the content, which means they stay correct when an item is added, removed or reordered. */ body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap{ display:grid;grid-template-columns:.85fr 1.15fr;gap:0;align-items:stretch; border:1px solid var(--line)} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head{ grid-column:1;grid-row:1;background:var(--bp-p);color:#fff;padding:26px 24px;margin:0; display:flex;flex-direction:column;justify-content:center} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head::before{ content:"";display:block;width:30px;height:4px;background:var(--bp-a);margin-bottom:12px;position:static} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head .eyebrow{ color:var(--bp-a);margin-bottom:6px} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head h2{ color:#fff;font-size:21px;line-height:1.22;padding:0;margin:0} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head h2::before{display:none} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head p{ display:block;color:rgba(255,255,255,.76);font-size:13px;line-height:1.6;margin:9px 0 0} /* the reasons: rows in the right-hand column, numbered by counter */ body.sk-bluepatriot .tb-whychoose{grid-column:2;grid-row:1;display:block;background:#fff; padding:6px 22px;margin:0;counter-reset:wc} body.sk-bluepatriot .tb-wc{counter-increment:wc;background:transparent;border:0;border-radius:0; box-shadow:none;padding:13px 0;display:grid;grid-template-columns:26px 1fr;gap:12px; align-items:start;border-bottom:1px solid var(--g-edge-soft);transform:none} body.sk-bluepatriot .tb-wc:last-child{border-bottom:0} body.sk-bluepatriot .tb-wc:hover{transform:none;box-shadow:none} body.sk-bluepatriot .tb-wc::before{content:"0" counter(wc);grid-row:1 / span 2; color:var(--bp-a);font-weight:800;font-size:15px;line-height:1.35} /* the icon is redundant next to a number, and the pill was a B2B affectation - the title reads better as a plain strong line */ body.sk-bluepatriot .tb-wc__ic{display:none} body.sk-bluepatriot .tb-wc__pill{background:transparent!important;color:#12181f!important; padding:0!important;border-radius:0!important;font-size:14.5px;font-weight:700;display:block} body.sk-bluepatriot .tb-wc__t{grid-column:2;font-size:12.5px;color:#68727f;margin:3px 0 0} @media(max-width:820px){ body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap{grid-template-columns:1fr} body.sk-bluepatriot .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head{grid-row:1} body.sk-bluepatriot .tb-whychoose{grid-column:1;grid-row:2} } /* ============================================================================ BLUE PATRIOT - CHROME (build 11.46) ---------------------------------------------------------------------------- Closes the header/footer gaps against preview-ribbon-final.html. Everything below was verified against the real markup in includes/header.php and includes/footer.php, not assumed. ============================================================================ */ /* ---------- utility bar ----------------------------------------------------- No skin in this file styled .utilitybar - it fell through to the base rules in style.css, which build a floating rounded panel coloured from the topbar_bg / topbar_ink settings. The preview is a flush, full-bleed strip in the dark primary. This is that. ------------------------------------------ */ body.sk-bluepatriot .utilitybar{background:var(--bp-pd);padding-top:0;font-size:12px} body.sk-bluepatriot .utilitybar__in, body.sk-bluepatriot .utilitybar__panel{background:transparent;padding:0;margin:0;border:0} /* every shape option is neutralised, so topbar_shape stops fighting the skin */ body.sk-bluepatriot .utilitybar__row, body.sk-bluepatriot .utilitybar__row.ubshape--pill, body.sk-bluepatriot .utilitybar__row.ubshape--rounded, body.sk-bluepatriot .utilitybar__row.ubshape--square, body.sk-bluepatriot .utilitybar__row.ubshape--sharp, body.sk-bluepatriot .utilitybar__row.ubshape--underline, body.sk-bluepatriot .utilitybar__row.ubshape--none{ background:transparent;border:0;border-radius:0;padding:7px 0;gap:8px 20px} body.sk-bluepatriot .utilitybar__row .ub{color:#fff;font-weight:500;font-size:12px} body.sk-bluepatriot .utilitybar__row .ub:hover{color:var(--bp-a)} body.sk-bluepatriot .utilitybar__row .ub__i{color:var(--bp-a)} body.sk-bluepatriot .utilitybar__row .ub--hours{margin-left:auto;color:rgba(255,255,255,.75)} /* ---------- masthead search: preview is flex:1 / 500px, base was auto / 400px */ body.sk-bluepatriot .masthead__search{max-width:500px;margin-left:0;margin-right:auto} body.sk-bluepatriot .masthead__search input{border-radius:0} body.sk-bluepatriot .masthead__search button{border-radius:0;background:var(--bp-p);color:#fff;font-weight:700} body.sk-bluepatriot .masthead__search button:hover{background:var(--bp-a);color:var(--bp-on-a)} /* ---------- the line above the footer --------------------------------------- The 5px lime rule was already correct; the 36px margin above it left a white band, so the ribbon and the rule read as two things instead of one edge. */ /* The footer's 5px lime rule is full-viewport-width. In 11.46 the 36px gap above it was removed, which pushed that rule flush under the benefits ribbon - so it read as an over-long lime bar belonging to the ribbon rather than as the top edge of the footer. The approved design keeps a gap (preview .foot has margin-top:40px). Restored. */ body.sk-bluepatriot .sitefoot{margin-top:40px} /* ---------- footer advice band (FOOTER_CTA_V1) ---------------------------- */ body.sk-bluepatriot .sitefoot__cta{ background:color-mix(in srgb,var(--bp-p) 6%,#fff);border-bottom:0} body.sk-bluepatriot .sitefoot__cta-txt b{color:var(--bp-p);font-size:20px} body.sk-bluepatriot .sitefoot__cta-txt span{color:#68727f;font-size:13.5px} body.sk-bluepatriot .sitefoot__cta-btn{ background:var(--bp-p);color:#fff;border-radius:0;font-weight:800;font-size:13.5px;padding:12px 26px} body.sk-bluepatriot .sitefoot__cta-btn:hover{background:var(--bp-a);color:var(--bp-on-a);opacity:1} /* ---------- utility bar: emoji markers + the ticker on the right ---------- The strip is dark, so the ticker text and separators have to be light. The base rules colour them from --header-ink, which is the masthead's ink and therefore near-black here. */ body.sk-bluepatriot .utilitybar__row .ub__i--emoji{font-size:13px} body.sk-bluepatriot .utilitybar__row .ticker--topbar .ticker__item{ color:rgba(255,255,255,.88);font-size:12px;font-weight:500} body.sk-bluepatriot .utilitybar__row .ticker--topbar .ticker__sep{ color:var(--bp-a);opacity:.9} /* ---------- utility bar: ONE line, never two ------------------------------- The row inherits flex-wrap:wrap from style.css. With a phone, an email, a full street address AND a ticker on it, that wrapped the ticker onto a second line and doubled the height of the strip. The design is a single thin line, so: no wrap, and the address truncates rather than pushing anything down. */ body.sk-bluepatriot .utilitybar__row{flex-wrap:nowrap;padding:4px 0;gap:0 18px} body.sk-bluepatriot .utilitybar__row .ub{ font-weight:400;font-size:11.5px;line-height:1.45;gap:6px;flex:none} /* the ADDRESS never shrinks - it is the item that must stay readable, so it is flex:none with no ellipsis. The ticker is what gives way. */ body.sk-bluepatriot .utilitybar__row .ub--addr{flex:none;white-space:nowrap} /* the ticker takes whatever is left, right-aligned, and shrinks to fit */ body.sk-bluepatriot .utilitybar__row .ticker--topbar{ /* Sits in the RIGHT THIRD of the bar and scrolls inside that box, so it never reaches back to the address. margin-left:auto pins the box right; the base .ticker margin:0 20px is cleared so it ends flush with the wrap. */ flex:0 0 auto;min-width:0;width:clamp(220px,34%,480px); margin:0 0 0 auto;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} body.sk-bluepatriot .utilitybar__row .ticker--topbar .ticker__track{ animation:ticker 26s linear infinite} /* ---------- cart ------------------------------------------------------------ .mainnav__cta in style.css sets an accent GRADIENT with !important, which beat the skin's flat colour - that is why the button came out olive rather than lime. Both positions are forced to the palette accent here. */ body.sk-bluepatriot .mainnav__cta, body.sk-bluepatriot .masthead__cart{ background:var(--bp-a)!important;background-image:none!important; color:var(--bp-on-a)!important;border-radius:0!important; box-shadow:none!important;font-weight:800!important; padding:11px 20px;font-size:13px;border:0} body.sk-bluepatriot .mainnav__cta:hover, body.sk-bluepatriot .masthead__cart:hover{ filter:none;background:var(--bp-p)!important;color:#fff!important} body.sk-bluepatriot .masthead__cart{margin-left:auto} /* ---------- nav: lime underline only, no bubble ---------------------------- style.css line 367 gives every .mainnav a a border-radius:var(--r-pill), and .is-active adds a tinted background plus an inset 1px ring. Together those render as a rounded bubble around the current page. The design has no bubble - the active item is marked by a lime rule under the text and nothing else. All three are removed here. */ body.sk-bluepatriot .mainnav a{border-radius:0;box-shadow:none} body.sk-bluepatriot .mainnav a:hover{ background:transparent;color:var(--bp-a);box-shadow:none} body.sk-bluepatriot .mainnav a.is-active{ background:transparent;box-shadow:none;color:#fff;font-weight:600} body.sk-bluepatriot .mainnav a.is-active::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--bp-a);border-radius:0} /* the ticker text follows the smaller bar */ body.sk-bluepatriot .utilitybar__row .ticker--topbar .ticker__item{font-size:11.5px;font-weight:400} body.sk-bluepatriot .utilitybar__row .ub__i--emoji{font-size:12px} /* ---------- CONTACT PAGE ---------------------------------------------------- The two-column grid, the indigo panel and the underline-only fields were already here. What the design has and the skin did not: a lime square badge on each info row, hairline separators between rows, and a two-up field grid in the form. The real reason none of this showed before: the packaged rules targeted .contactgrid > div:nth-child(2), and the panel is an

, not a div - so the selector never matched anything. Every one is now a universal child selector. contact.php also emits the badge letter directly (CONTACT_ROWS_V1) rather than trying to derive it in CSS. */ body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist{ list-style:none;margin:20px 0 0;padding:0} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist__intro{ color:rgba(255,255,255,.75);font-size:14px;margin:6px 0 0} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist li{ display:grid;grid-template-columns:34px 1fr;gap:0 13px;align-items:start; padding:14px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:0;margin:0} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist li:first-child{border-top:0} /* CONTACT_ROWS_V1 writes the badge letter into the markup, so this is just a square - no ::first-letter, which does not work reliably on a grid box and is why the first attempt showed nothing. */ body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .k{ width:34px;height:34px;display:grid;place-items:center;flex:none; background:var(--bp-a);color:var(--bp-on-a); font-size:14px;font-weight:800;line-height:1;letter-spacing:0;text-transform:none} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .v{min-width:0} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .v b{ display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.4} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .v em{ display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.7);margin-top:2px} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .v a{color:#fff;text-decoration:none} body.sk-bluepatriot .contactgrid > :nth-child(2) .infolist .v a:hover{color:var(--bp-a)} /* form: two-up rows, as the design shows */ body.sk-bluepatriot .contactgrid .field--2{display:grid;grid-template-columns:1fr 1fr;gap:14px} body.sk-bluepatriot .contactgrid .form .btn{border-radius:0;font-weight:800;padding:13px 30px} /* the map is now a sibling of the grid, full width beneath both columns */ body.sk-bluepatriot .contactmap{margin-top:0;padding:0} body.sk-bluepatriot .contactmap iframe, body.sk-bluepatriot .contactmap img{display:block;width:100%;border:0;border-radius:0} @media (max-width:700px){ body.sk-bluepatriot .contactgrid .field--2{grid-template-columns:1fr} } /* ---------- POLICY PAGES ---------------------------------------------------- Terms, Privacy, Shipping and Returns all render .prose.prose--terms inside a plain .section > .wrap. The design puts a sticky "On this page" index beside the copy, numbers the headings, and marks the lead paragraph and any callout. The two-column shell and the index are built at runtime by POLICY_TOC_V1 in assets/js/main.js, which wraps the prose in .pwrap and injects .toc - so no policy page markup changes. */ body.sk-bluepatriot .pwrap{ display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;margin-top:26px} body.sk-bluepatriot .toc{ position:sticky;top:20px;border:1px solid var(--line);background:#fff} body.sk-bluepatriot .toc h4{ margin:0;padding:14px 16px;font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--bp-p);border-bottom:1px solid var(--line)} body.sk-bluepatriot .toc a{ display:block;padding:9px 16px;font-size:13px;color:#68727f; border-left:3px solid transparent;text-decoration:none} body.sk-bluepatriot .toc a:hover, body.sk-bluepatriot .toc a.is-on{ color:var(--bp-p);border-left-color:var(--bp-a); background:color-mix(in srgb,var(--bp-p) 5%,#fff)} /* no max-width here: .pwrap already gives the prose a measured column, and 74ch on top of that left a wide empty strip down the right of the page. */ body.sk-bluepatriot .pwrap .prose--terms{max-width:none;min-width:0} body.sk-bluepatriot .prose--terms > p:first-of-type{ font-size:17px;line-height:1.65;color:#12181f; border-left:5px solid var(--bp-a);padding-left:18px;margin:0 0 26px} body.sk-bluepatriot .prose--terms h2, body.sk-bluepatriot .prose--terms h3{ font-size:17px;margin:30px 0 9px;padding-left:14px;position:relative;color:var(--bp-p)} body.sk-bluepatriot .prose--terms h2::before, body.sk-bluepatriot .prose--terms h3::before{ content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;background:var(--bp-a)} body.sk-bluepatriot .prose--terms p{margin:0 0 13px;line-height:1.75;color:#39424e} body.sk-bluepatriot .prose--terms li{margin:5px 0;line-height:1.7;color:#39424e} body.sk-bluepatriot .prose--terms li::marker{color:var(--bp-a)} /* an admin can mark any paragraph as the indigo callout by giving it class="pnote" in the policy editor */ body.sk-bluepatriot .prose--terms .pnote{ background:var(--bp-p);color:#fff;padding:18px 20px;margin:24px 0;border:0} body.sk-bluepatriot .prose--terms .pnote b{display:block;margin-bottom:4px;color:#fff} @media (max-width:900px){ body.sk-bluepatriot .pwrap{grid-template-columns:1fr} body.sk-bluepatriot .toc{position:static} } /* ---------- policy pages: sections written as an ordered list --------------- The Terms page does not use h2/h3 at all. Its 34 sections are an

, and the opening paragraph was authored as an
. That is why the index would not build and why the page had no heading rhythm. Both shapes are handled here and in POLICY_TOC_V1. */ body.sk-bluepatriot .prose--terms > h1:first-of-type{ font-size:17px;line-height:1.65;font-weight:400;color:#12181f; border-left:5px solid var(--bp-a);padding-left:18px;margin:0 0 26px} body.sk-bluepatriot .prose--terms > h1:first-of-type::before{display:none} body.sk-bluepatriot .prose--terms .policy-sections{ list-style:none;counter-reset:sec;padding-left:0;margin:0} body.sk-bluepatriot .prose--terms .policy-sections > li{ counter-increment:sec;margin:0 0 24px;padding-left:14px;position:relative; line-height:1.75;color:#39424e} body.sk-bluepatriot .prose--terms .policy-sections > li::before{ content:"";position:absolute;left:0;top:5px;width:4px;height:19px;background:var(--bp-a)} body.sk-bluepatriot .prose--terms .policy-sections > li > strong:first-child{ display:block;font-size:17px;color:var(--bp-p);margin-bottom:7px;font-weight:700} body.sk-bluepatriot .prose--terms .policy-sections > li > strong:first-child::before{ content:counter(sec) ". "} /* ============================================================================ WHYCHOOSE_STYLE_V1 - five layouts for the Why Choose section ---------------------------------------------------------------------------- The packaged layout put the heading in a coloured panel beside the list with align-items:stretch, so with nine reasons beside a three-word heading the panel became a tall empty rectangle. Each option below is a different answer to that. Set 'whychoose_style' in Site Settings. The markup is fixed (.section__head + .tb-whychoose > .tb-wc > .tb-wc__ic / .tb-wc__pill / .tb-wc__t), so all five work on the same content with no editing, and the numbers come from a CSS counter - add, remove or reorder a reason and they stay correct. ============================================================================ */ /* ---- shared: undo the packaged split so each option starts from nothing --- */ body.sk-bluepatriot:not(.wc-split) .section:has(> .wrap > .tb-whychoose) > .wrap{ display:block;border:0} body.sk-bluepatriot:not(.wc-split) .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head{ background:transparent;color:inherit;padding:0;margin:0 0 20px;display:block} body.sk-bluepatriot:not(.wc-split) .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head::before{ display:none} body.sk-bluepatriot:not(.wc-split) .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head h2{ color:var(--bp-p);font-size:24px;padding-left:14px;position:relative} body.sk-bluepatriot:not(.wc-split) .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head h2::before{ content:"";display:block;position:absolute;left:0;top:3px;bottom:3px;width:5px;background:var(--bp-a)} body.sk-bluepatriot:not(.wc-split) .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head .eyebrow{ color:var(--bp-p)} body.sk-bluepatriot:not(.wc-split) .tb-whychoose{ grid-column:auto;grid-row:auto;background:transparent;padding:0;counter-reset:wc} body.sk-bluepatriot:not(.wc-split) .tb-wc__ic{display:none} body.sk-bluepatriot:not(.wc-split) .tb-wc__pill{ background:transparent!important;padding:0!important;border-radius:0!important;display:block} body.sk-bluepatriot:not(.wc-split) .tb-wc{ counter-increment:wc;border-radius:0;transform:none;box-shadow:none} body.sk-bluepatriot:not(.wc-split) .tb-wc:hover{transform:none;box-shadow:none} /* ---- 1. SPLIT (the existing one, with the empty panel fixed) -------------- The panel no longer stretches to the height of the list. It sits at the top and stays there while the reasons scroll past, so a short heading beside a long list stops reading as a blank rectangle. */ body.sk-bluepatriot.wc-split .section:has(> .wrap > .tb-whychoose) > .wrap{ align-items:start} body.sk-bluepatriot.wc-split .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head{ position:sticky;top:16px;align-self:start;padding:30px 26px} /* ---- 2. CARDS - the approved layout --------------------------------------- Marker on a tinted square with an accent rule on its leading edge, on cards carrying the cut corner from the card family, two across. Density and column count are settings; one set of variables drives padding, marker, type size and leading together, so the proportions hold at every step rather than the padding shrinking while the type stays put. */ body.sk-bluepatriot.wc-cards{ --wcpad:14px 15px; --wcgap:12px; --wcmk:32px; --wcemo:16px; --wct:14.5px; --wcb:12.5px; --wcbl:1.5} body.sk-bluepatriot.wc-cards.wcd-comfortable{ --wcpad:20px 18px; --wcgap:16px; --wcmk:38px; --wcemo:18px; --wct:15.5px; --wcb:13px; --wcbl:1.6} body.sk-bluepatriot.wc-cards.wcd-tight{ --wcpad:11px 12px; --wcgap:9px; --wcmk:27px; --wcemo:14px; --wct:13.5px; --wcb:12px; --wcbl:1.45} body.sk-bluepatriot.wc-cards .tb-whychoose{ display:grid;grid-template-columns:repeat(2,1fr);gap:var(--wcgap)} body.sk-bluepatriot.wc-cards.wcc-3 .tb-whychoose{grid-template-columns:repeat(3,1fr)} body.sk-bluepatriot.wc-cards.wcc-4 .tb-whychoose{grid-template-columns:repeat(4,1fr)} body.sk-bluepatriot.wc-cards .tb-wc{ display:grid;grid-template-columns:calc(var(--wcmk) + 8px) 1fr;gap:0 12px; align-items:start;background:#fff;border:1px solid var(--line);padding:var(--wcpad); clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)} body.sk-bluepatriot.wc-cards .tb-wc::before{content:none} /* the marker square. The inline colour on .tb-wc__ic is the per-item colour from the editor; it is overridden so the eight read as one set. */ body.sk-bluepatriot.wc-cards .tb-wc__ic{ display:grid!important;place-items:center;grid-row:1 / span 2; width:var(--wcmk);height:var(--wcmk);margin:0; background:color-mix(in srgb,var(--bp-p) 6%,#fff); border-left:4px solid var(--bp-a); color:var(--bp-p)!important;font-size:var(--wcemo);line-height:1} body.sk-bluepatriot.wc-cards .tb-wc__ic svg{width:60%;height:60%} body.sk-bluepatriot.wc-cards .tb-wc__n{font-weight:800;font-size:calc(var(--wcemo) - 3px)} body.sk-bluepatriot.wc-cards .tb-wc__pill{ color:var(--bp-p)!important;font-size:var(--wct);font-weight:700;line-height:1.3} body.sk-bluepatriot.wc-cards .tb-wc__t{ font-size:var(--wcb);color:#68727f;margin:3px 0 0;line-height:var(--wcbl)} /* a narrow viewport gets two columns whatever is set, and one below 640 - four cards across a phone would be four words a line */ @media(max-width:1000px){ body.sk-bluepatriot.wc-cards .tb-whychoose{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:640px){ body.sk-bluepatriot.wc-cards .tb-whychoose{grid-template-columns:1fr!important}} /* ---- 3. ROWS - full width, numbered, hairline between ------------------- */ body.sk-bluepatriot.wc-rows .tb-whychoose{display:block;border-top:1px solid var(--line)} body.sk-bluepatriot.wc-rows .tb-wc{ display:grid;grid-template-columns:44px 1fr;gap:0 18px;align-items:start; padding:18px 0;border-bottom:1px solid var(--line)} body.sk-bluepatriot.wc-rows .tb-wc::before{ content:"0" counter(wc);grid-row:1 / span 2;width:36px;height:36px;display:grid; place-items:center;background:var(--bp-a);color:var(--bp-on-a);font-weight:800;font-size:13px} body.sk-bluepatriot.wc-rows .tb-wc__pill{ grid-column:2;color:var(--bp-p)!important;font-size:16px;font-weight:700} body.sk-bluepatriot.wc-rows .tb-wc__t{ grid-column:2;font-size:13px;color:#68727f;margin:4px 0 0;line-height:1.6;max-width:78ch} /* ---- 4. TILES - compact, four across, lime rule above each -------------- */ body.sk-bluepatriot.wc-tiles .tb-whychoose{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0; border:1px solid var(--line)} body.sk-bluepatriot.wc-tiles .tb-wc{ display:block;padding:20px 18px;border-right:1px solid var(--line);background:#fff} body.sk-bluepatriot.wc-tiles .tb-wc:last-child{border-right:0} body.sk-bluepatriot.wc-tiles .tb-wc::before{ content:"";display:block;width:26px;height:4px;background:var(--bp-a);margin-bottom:12px} body.sk-bluepatriot.wc-tiles .tb-wc__pill{ color:var(--bp-p)!important;font-size:15px;font-weight:700;margin-bottom:5px} body.sk-bluepatriot.wc-tiles .tb-wc__t{font-size:12.5px;color:#68727f;margin:0;line-height:1.55} /* ---- 5. BAND - solid colour, edge to edge, white text ------------------- */ body.sk-bluepatriot.wc-band .section:has(> .wrap > .tb-whychoose){ background:var(--bp-p);padding:40px 0} body.sk-bluepatriot.wc-band .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head h2{ color:#fff} body.sk-bluepatriot.wc-band .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head .eyebrow{ color:var(--bp-a)} body.sk-bluepatriot.wc-band .tb-whychoose{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 26px} body.sk-bluepatriot.wc-band .tb-wc{display:block;padding:0} body.sk-bluepatriot.wc-band .tb-wc::before{ content:"0" counter(wc);display:block;color:var(--bp-a);font-weight:800;font-size:15px; margin-bottom:7px;letter-spacing:.06em} body.sk-bluepatriot.wc-band .tb-wc__pill{ color:#fff!important;font-size:15.5px;font-weight:700;margin-bottom:4px} body.sk-bluepatriot.wc-band .tb-wc__t{ font-size:13px;color:rgba(255,255,255,.75);margin:0;line-height:1.6} @media(max-width:820px){ body.sk-bluepatriot.wc-split .section:has(> .wrap > .tb-whychoose) > .wrap > .section__head{ position:static} body.sk-bluepatriot.wc-tiles .tb-wc{border-right:0;border-bottom:1px solid var(--line)} } /* ---------- footer: contact panel (FOOTER_LAYOUT_V2) ------------------------ Option 5 of the footer preview, tightened. The negative margins on the panel match .sitefoot__grid's padding below - change one and change the other. */ body.sk-bluepatriot .sitefoot{margin-top:40px} body.sk-bluepatriot .sitefoot__grid{ grid-template-columns:1.3fr 1fr 1.05fr;gap:0 26px;align-items:stretch; padding:26px 0 22px} body.sk-bluepatriot .sitefoot__grid:has(.sitefoot__col:nth-child(4)){ grid-template-columns:1.25fr .8fr .8fr 1fr} /* headings, exactly as the preview: 11px, .1em tracking, indigo, 2px accent rule under the words only - not the column */ body.sk-bluepatriot .sitefoot h4{ font-size:11px!important;letter-spacing:.1em!important;text-transform:uppercase; color:var(--bp-p)!important;font-weight:700!important;line-height:1.2; border-bottom:2px solid var(--bp-a);padding:0 0 5px;display:inline-block; margin:0 0 11px!important} /* left column - compact, and the blurb capped so it stops running the full width of the column and leaving a ragged edge */ body.sk-bluepatriot .sitefoot__logo{margin-bottom:8px} body.sk-bluepatriot .sitefoot__intro{ font-size:13px;line-height:1.6;color:#68727f;margin:8px 0 0;max-width:44ch} body.sk-bluepatriot .sitefoot__regs{margin:11px 0 0;font-size:12px;line-height:1.75} body.sk-bluepatriot .sitefoot__regs span{margin-right:12px} body.sk-bluepatriot .sitefoot__regs b{color:var(--bp-p)} /* link columns */ body.sk-bluepatriot .sitefoot__col a{padding:3px 0;font-size:13px;line-height:1.5} /* ---- the panel ---- */ body.sk-bluepatriot .sitefoot__col--contact{ background:var(--bp-p);color:#fff;padding:22px 22px 20px;margin:-26px 0 -22px} body.sk-bluepatriot .sitefoot__col--contact h4{ color:var(--bp-a)!important;border-bottom-color:rgba(255,255,255,.28)} /* every row is marker + text on one baseline, so the text edges line up down the column instead of each row starting wherever its marker ended */ body.sk-bluepatriot .sitefoot__col--contact a, body.sk-bluepatriot .sitefoot__col--contact p, body.sk-bluepatriot .sitefoot__col--contact span{color:#fff!important} body.sk-bluepatriot .sitefoot__ico, body.sk-bluepatriot .sitefoot__line--ico{ display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start; margin:0;padding:4px 0;font-size:13px!important;line-height:1.5} body.sk-bluepatriot .sitefoot__ico i, body.sk-bluepatriot .sitefoot__line--ico i{ font-style:normal;font-size:13px;line-height:1.5;text-align:center; /* FOOTER_ICONS_WHITE_V1. These are colour emoji - a pin, a phone and an envelope. grayscale+brightness cannot whiten them: the envelope is a DARK navy tile, so desaturating and brightening leaves a grey-blue tile, which is what showed on the indigo panel. brightness(0) flattens any colour to black while keeping the glyph's transparency, and invert(1) then turns that black into pure white - so every emoji becomes a clean white silhouette whatever colours it started with. Scoped to this skin on purpose: the contact column here is a known indigo panel. The base footer's colours come from per-site theme tokens and can be light, where forcing white icons would make them vanish. */ filter:brightness(0) invert(1);opacity:.92} body.sk-bluepatriot .sitefoot__ico:hover i{opacity:1} /* FOOTER_ICONS_CURRENTCOLOR_V2 superseded the filter above: the icons are SVG now and inherit this panel's white text, so the filter must not touch them. The rule above is kept for a site still serving the old emoji footer. */ body.sk-bluepatriot .sitefoot__ico i:has(svg), body.sk-bluepatriot .sitefoot__line--ico i:has(svg){filter:none;opacity:1} body.sk-bluepatriot .sitefoot__ico i svg, body.sk-bluepatriot .sitefoot__line--ico i svg{opacity:.92} body.sk-bluepatriot .sitefoot__ico span{font-weight:600;color:#fff!important} body.sk-bluepatriot .sitefoot__ico:hover span{color:var(--bp-a)!important} body.sk-bluepatriot .sitefoot__col--contact .sitefoot__line{ color:rgba(255,255,255,.88);font-size:13px} /* social: marks in a row, not a stack of words */ body.sk-bluepatriot .sitefoot__soc{display:flex;gap:8px;margin-top:14px} body.sk-bluepatriot .sitefoot__soc a{ width:30px;height:30px;display:grid;place-items:center;padding:0; background:rgba(255,255,255,.12);color:#fff} body.sk-bluepatriot .sitefoot__soc a:hover{background:var(--bp-a);color:var(--bp-on-a)} body.sk-bluepatriot .sitefoot__soc svg{width:15px;height:15px} /* the copyright was lime on white - close to unreadable */ body.sk-bluepatriot .sitefoot__bar{padding:11px 0} body.sk-bluepatriot .sitefoot__bar, body.sk-bluepatriot .sitefoot__bar a, body.sk-bluepatriot .sitefoot__bar span{color:#68727f!important;font-size:12.5px} body.sk-bluepatriot .sitefoot__bar a:hover{color:var(--bp-p)!important} @media(max-width:900px){ body.sk-bluepatriot .sitefoot__grid, body.sk-bluepatriot .sitefoot__grid:has(.sitefoot__col:nth-child(4)){ grid-template-columns:1fr;gap:22px} body.sk-bluepatriot .sitefoot__col--contact{margin:0} } /* deals page */ body.sk-bluepatriot .dealsub__n{background:var(--bp-a);color:var(--bp-on-a);border-radius:0} body.sk-bluepatriot .dealsub{font-size:13.5px} /* ============================================================================ MARKET_CARDS_V2 - option 4 of the markets preview: solid tiles ---------------------------------------------------------------------------- The live cards had THREE treatments stacked on one element: .bpc-cut .catcard a clip-path cutting the bottom-right corner .bpc-cut .catcard::after a lime notch triangle in that corner .catcard--auto a solid indigo fill with its own ::before rule The clip cut through the indigo and let the white card beneath show around it, which is the white box with a bar floating inside it. The lime dash sat above the fill rather than on it. And .grid--4 .catcard p was display:none, so the intro every market already has was never shown. One treatment now, not three. Everything below is scoped to .grid--4 so category cards elsewhere are untouched. ============================================================================ */ body.sk-bluepatriot .grid--4 .catcard, body.sk-bluepatriot.bpc-cut .grid--4 .catcard{ background:var(--bp-p);color:#fff;padding:18px 16px;border:0;min-height:0; display:block;overflow:hidden; /* the cut corner is kept, but applied to the FILLED card so nothing shows through it */ -webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)} /* kill both inherited pseudo-elements - the notch and the stray dash */ body.sk-bluepatriot .grid--4 .catcard::before, body.sk-bluepatriot .grid--4 .catcard::after, body.sk-bluepatriot.bpc-cut .grid--4 .catcard::before, body.sk-bluepatriot.bpc-cut .grid--4 .catcard::after{content:none;display:none} /* the even/odd alternation made an eight-card grid look accidental */ body.sk-bluepatriot .grid--4 .catcard--auto, body.sk-bluepatriot .grid--4 .catcard--auto:nth-child(even){background:var(--bp-p)} body.sk-bluepatriot .grid--4 .catcard:hover{background:var(--bp-pd)} body.sk-bluepatriot .grid--4 .catcard__mk{ display:grid;place-items:center;width:32px;height:32px;margin:0 0 11px; background:rgba(255,255,255,.14);font-size:16px;line-height:1} body.sk-bluepatriot .grid--4 .catcard h3{ color:#fff!important;font-size:15px;font-weight:700;line-height:1.3;margin:0} /* the intro was hidden by an older rule - it is the only description a market has, so it is shown */ body.sk-bluepatriot .grid--4 .catcard p{ display:block!important;color:rgba(255,255,255,.72)!important; font-size:12.5px;line-height:1.55;margin:4px 0 0} body.sk-bluepatriot .grid--4 .catcard span:not(.catcard__mk){display:none} body.sk-bluepatriot .grid--4 .catcard__i, body.sk-bluepatriot .grid--4 .catcard__bg{display:none} body.sk-bluepatriot .grid--4{gap:14px} @media(max-width:1000px){ body.sk-bluepatriot .grid--4{grid-template-columns:repeat(2,1fr)} } @media(max-width:600px){ body.sk-bluepatriot .grid--4{grid-template-columns:1fr} } /* ============================================================================ HEADER_BLOCK_V1 - top bar, masthead and nav as one solid block ---------------------------------------------------------------------------- .utilitybar and
are SIBLINGS, and .masthead carries no background of its own - only .masthead__in does. .masthead is also position:sticky, so the page behind it (the hero image) showed through the few pixels between the two, which is the strip of banner appearing under the contact bar. Giving .masthead the background rather than only its inner wrapper closes it, whatever padding either one ends up with. ============================================================================ */ body.sk-bluepatriot .utilitybar{margin:0;padding-top:0;padding-bottom:0} body.sk-bluepatriot .masthead{ background:#fff;padding:0;margin:0;display:block; border-bottom:1px solid var(--line)} body.sk-bluepatriot .masthead__in{ padding:10px 0;border:0;border-radius:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none;gap:20px} body.sk-bluepatriot .mainnav{margin:0} /* ---- search centred between the logo and the cart ------------------------ 11.46 pinned it left with margin-right:auto because it had been shoved right. Auto on BOTH sides centres it in the space that is left. */ body.sk-bluepatriot .masthead__search{ max-width:520px;margin-left:auto;margin-right:auto;flex:1 1 auto} /* ---- top bar: markers white, like the text beside them ------------------- The emoji render in their own colours - the telephone and the pin are both red - which is why they did not match. Same treatment as the footer: the glyph is desaturated and blown out to white. */ body.sk-bluepatriot .utilitybar__row .ub__i--emoji{ filter:grayscale(1) brightness(3);font-size:12px} body.sk-bluepatriot .utilitybar__row .ub, body.sk-bluepatriot .utilitybar__row .ub__i{color:#fff!important} body.sk-bluepatriot .utilitybar__row .ub:hover{color:var(--bp-a)!important} body.sk-bluepatriot .utilitybar__row .ub:hover .ub__i--emoji{filter:none} body.sk-bluepatriot .utilitybar__row .ticker--topbar .ticker__item{ color:#fff!important;opacity:.92} /* ============================================================================ HEADER_BLOCK_V2 - overflow, bar weight, and the gap under the bar ---------------------------------------------------------------------------- THE BARS NOT REACHING THE RIGHT EDGE was horizontal overflow, not alignment. 11.49 set the utility row to flex-wrap:nowrap and then gave the phone, the email AND the address flex:none so none of them could shrink, with the ticker on a 220px minimum on top. Past a certain address length the row is wider than the viewport, the document gains a horizontal scrollbar, and every full-width band ends at the viewport edge instead of the document's - which is the white strip down the right of the contact bar and the nav. The row is allowed to fit again: the address truncates, the ticker shrinks to nothing before anything overflows, and the bar clips whatever is left. ============================================================================ */ body.sk-bluepatriot .utilitybar, body.sk-bluepatriot .utilitybar__row{overflow:hidden;max-width:100%} body.sk-bluepatriot .utilitybar__row .ub--addr{ flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.sk-bluepatriot .utilitybar__row .ticker--topbar{ flex:0 1 auto;width:auto;min-width:0;max-width:38%} /* nothing on the page may widen the document past the viewport */ body.sk-bluepatriot{overflow-x:hidden} /* ---- lighter, thinner contact bar --------------------------------------- */ body.sk-bluepatriot .utilitybar{padding:0} body.sk-bluepatriot .utilitybar__row{padding:3px 0;gap:0 16px} body.sk-bluepatriot .utilitybar__row .ub{ font-weight:400!important;font-size:11.5px!important;line-height:1.5} body.sk-bluepatriot .utilitybar__row .ub__i--emoji{font-size:11px} body.sk-bluepatriot .utilitybar__row .ticker--topbar .ticker__item{ font-size:11.5px;font-weight:400} /* ---- close the space between the bar and the logo ----------------------- The masthead was 10px top and bottom around a logo allowed to be 66px tall, so the white band under the contact bar was mostly empty. */ body.sk-bluepatriot .masthead__in{padding:7px 0;gap:18px} body.sk-bluepatriot .brand img{max-height:44px} body.sk-bluepatriot .masthead__search input, body.sk-bluepatriot .masthead__search button{padding-top:9px;padding-bottom:9px} body.sk-bluepatriot .masthead__cart{padding:9px 18px} /* ============================================================================ HEADER_ALIGN_V1 - the three header rows share one left edge ---------------------------------------------------------------------------- .wrap is width:min(--page-w,100% - --page-gutter); margin-inline:auto; padding-inline:var(--band-pad) All three header rows carry .wrap, so all three should line up. They did not, because the rules I wrote for the contact bar and the masthead used the PADDING SHORTHAND - padding:3px 0 - which resets padding-inline to zero and throws away --band-pad. .mainnav__in was never overridden, so it kept it. That is the difference: the nav sat one gutter further in than the bar above it. Vertical padding is set with padding-block from here on, so the inline half of .wrap survives. The ubshape--* selectors are repeated because the packaged rule for them is a compound - body.sk-bluepatriot .utilitybar__row.ubshape--rounded, (0,4,1) - which outranks a plain .utilitybar__row rule (0,3,1). That is also why the bar never actually got thinner in 11.64: 7px kept winning over 3px. ============================================================================ */ body.sk-bluepatriot .utilitybar__row, body.sk-bluepatriot .utilitybar__row.ubshape--pill, body.sk-bluepatriot .utilitybar__row.ubshape--rounded, body.sk-bluepatriot .utilitybar__row.ubshape--square, body.sk-bluepatriot .utilitybar__row.ubshape--sharp, body.sk-bluepatriot .utilitybar__row.ubshape--underline, body.sk-bluepatriot .utilitybar__row.ubshape--none{ padding-block:3px;padding-inline:var(--band-pad); width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto; max-width:none;gap:0 16px} body.sk-bluepatriot .masthead__in{ padding-block:7px;padding-inline:var(--band-pad)} body.sk-bluepatriot .mainnav__in{padding-inline:var(--band-pad)} /* the overflow guard belongs on the full-width band, not on the row - putting it on the row was interfering with the row's own width */ body.sk-bluepatriot .utilitybar__row{overflow:visible} body.sk-bluepatriot .utilitybar{overflow:hidden} /* ============================================================================ HEADER_V4 - the header band, aligned to the width the page actually uses ============================================================================ V3 fixed the slant and the float but got two things wrong, and this corrects both rather than adding another layer on top. 1. WRONG WIDTH REFERENCE. V3 aligned the header to .wrap's own width:min(var(--page-w),100% - var(--page-gutter)) = min(1440px, ...). But theme.css overrides that on every band the page actually uses: --band-w: min(1240px, 100% - 48px) .utilitybar width:var(--band-w) (line 237) hero width:var(--band-w) (line 386) .masthead__in width:var(--band-w) (line 708) .mainnav__in width:var(--band-w) (line 717) So the page is a 1240px band and V3 made the header a 1440px one - wider than everything below it. That is the header running past the content on both sides. --band-w is the reference, not --page-w. 2. THE MENU BAR WENT INVISIBLE. The nav's indigo is on .mainnav__in, not on .mainnav (skins.css line 847). V3 set .mainnav__in{background:transparent} to strip theme.css's glass fill and took the skin's own colour with it - white links on a white band, with only the lime active underline left showing. The fill is set explicitly here instead of cleared. Everything from V3 about the slant, the float and the sticky positioning is kept; only the width reference and the nav fill change. ============================================================================ */ /* one band width for the whole header, matching the page. The fallback repeats theme.css's value so this still works on a site whose theme.css predates it. */ body.sk-bluepatriot .utilitybar__row, body.sk-bluepatriot .utilitybar__row.ubshape--pill, body.sk-bluepatriot .utilitybar__row.ubshape--rounded, body.sk-bluepatriot .utilitybar__row.ubshape--square, body.sk-bluepatriot .utilitybar__row.ubshape--sharp, body.sk-bluepatriot .utilitybar__row.ubshape--underline, body.sk-bluepatriot .utilitybar__row.ubshape--none, body.sk-bluepatriot .masthead .wrap, body.sk-bluepatriot .masthead__in, body.sk-bluepatriot .mainnav__in{ width:var(--band-w,min(1240px,100% - 48px));max-width:none; margin-inline:auto;padding-inline:20px;box-sizing:border-box} /* ---- the strip: full width, flat, no slant, no float -------------------- */ body.sk-bluepatriot .utilitybar{ /* cancel the slant through theme.css's own variables, so the clip-path computes to a plain rectangle even where it still applies */ --ub-slant:0px; --ub-edge:100%; width:100%;max-width:none;margin:0;padding:0; border:0;border-radius:0;overflow:hidden;min-height:0; position:static;top:auto; background:var(--bp-pd); -webkit-backdrop-filter:none;backdrop-filter:none; font-size:11.5px;color:#fff} body.sk-bluepatriot .utilitybar__in{position:static;display:block;padding:0;margin:0} body.sk-bluepatriot .utilitybar__panel{ background:transparent;padding:0;margin:0;max-width:none; -webkit-clip-path:none;clip-path:none} body.sk-bluepatriot .utilitybar__row, body.sk-bluepatriot .utilitybar__row.ubshape--rounded{ padding-block:4px;display:flex;align-items:center;flex-wrap:nowrap;gap:0 16px; background:transparent;border:0;border-radius:0;overflow:hidden} /* ---- masthead ----------------------------------------------------------- */ body.sk-bluepatriot .masthead{ padding:0;margin:0;background:#fff;border-bottom:0} body.sk-bluepatriot .masthead::before{display:none} body.sk-bluepatriot .masthead .wrap, body.sk-bluepatriot .masthead__in{ padding-block:9px;border:0;border-radius:0;box-shadow:none; background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} /* theme.css sets height:146px, a fixed height rather than a cap */ body.sk-bluepatriot .brand img{height:auto;max-height:42px;width:auto} /* ---- nav: the fill lives on __in, so it is set, not cleared ------------- */ body.sk-bluepatriot .mainnav{margin:0;border-top:0;background:none;box-shadow:none} body.sk-bluepatriot .mainnav__in{ background:var(--bp-p);border:0;border-radius:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; padding-block:0;display:flex;flex-wrap:wrap;align-items:center;gap:0} /* theme.css re-slants the bar under 860px; keep it square there too */ @media (max-width:860px){ body.sk-bluepatriot .utilitybar{--ub-slant:0px;--ub-edge:100%} body.sk-bluepatriot .utilitybar__row{ justify-content:flex-start;text-align:left;max-width:none} }