/* ============================================================ COBRAND — responsive layer Loaded last on every page, so it wins over the inline styles. One file: fix a screen-size problem here and it is fixed everywhere at once. Ladder: 1280 · 1024 · 900 · 720 · 560 · 420 · 360 ============================================================ */ /* ---------- fluid foundations (apply at every width) ---------- */ html{ -webkit-text-size-adjust:100%; overflow-x:clip; } body{ overflow-x:clip; } img,svg,video,canvas{ max-width:100%; height:auto; } .shell{ width:min(100% - 2*var(--pad,20px), var(--shell,1240px)); margin-inline:auto; } /* Type scales continuously instead of jumping at a breakpoint. */ .hero h1, .phero h1, .shop-hero h1{ font-size:clamp(1.9rem, 6.2vw, 4.6rem); line-height:1.04; } .hero p, .phero p, .shop-hero p{ font-size:clamp(.92rem, 2.1vw, 1.06rem); } .sec-head h2, .mission h2, .eco h2, .reviews-head h2, .builder h2, .studio h2, .planner-head h2, .product h2, .offer-card h2, .closer h2{ font-size:clamp(1.45rem, 4.2vw, 2.5rem); line-height:1.1; } .co-head h1{ font-size:clamp(1.45rem, 4.4vw, 2.3rem); } /* Never let a long word or code string push the page sideways. */ h1,h2,h3,blockquote,p,td,th,.pv-name,.biz-top h3,.pcard h3{ overflow-wrap:anywhere; } /* Tables scroll rather than stretch the layout. */ .tbl{ min-width:520px; } .tblwrap, .card:has(> .tbl){ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ---------- Book Store Header & Sub-Nav Layer ---------- */ .header-in{ display:flex; align-items:center; gap:24px; height:76px; } .book-subnav{ background:var(--navy-deep); color:#fff; border-bottom:1px solid rgba(255,255,255,.1); padding:9px 0; font-size:.85rem; z-index:90; position:relative; } .book-subnav-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .book-subnav-links{ display:flex; align-items:center; gap:20px; } .book-subnav-links a{ color:rgba(255,255,255,.75); font-weight:600; display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px; transition:all .2s ease; text-decoration:none; } .book-subnav-links a:hover, .book-subnav-links a.active{ color:#fff; background:rgba(255,255,255,.14); } .book-subnav-tag{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-lift); } /* Visually-hidden label. The marketing pages define this; the Book Store pages use the class but never declared it, so their skip links and search labels were rendering as visible text. */ .skip{ position:absolute; left:-9999px; background:var(--navy-deep,#011246); color:#fff; padding:12px 18px; z-index:200; } .skip:focus{ left:16px; top:12px; } /* ---------- Book Store search, inline on the sub-nav bar ---------- The search field sits on the same line as Catalog, My Library and Publisher Studio rather than behind a magnifier in the header, so it is visible and one tap away. Results drop beneath the bar. */ .subnav-search{ position:relative; display:flex; align-items:center; gap:8px; flex:0 1 340px; min-width:0; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:5px 7px 5px 12px; transition:background .2s ease, border-color .2s ease; } .subnav-search:focus-within{ background:rgba(255,255,255,.17); border-color:var(--accent); } .subnav-search > svg{ color:rgba(255,255,255,.6); flex:none; } .subnav-search input{ flex:1; min-width:0; background:none; border:0; outline:0; color:#fff; font:500 .84rem var(--body); padding:5px 0; } .subnav-search input::placeholder{ color:rgba(255,255,255,.5); } .subnav-search input::-webkit-search-cancel-button{ filter:invert(1) opacity(.5); } .sl-esc{ flex:none; background:rgba(255,255,255,.14); border:0; border-radius:7px; padding:5px 10px; font:700 .66rem var(--body); letter-spacing:.06em; color:rgba(255,255,255,.78); cursor:pointer; transition:background .18s, color .18s; } .sl-esc:hover{ background:rgba(255,255,255,.28); color:#fff; } .subnav-search .sl-results{ position:absolute; top:calc(100% + 10px); right:0; width:min(430px, 88vw); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 26px 54px -22px rgba(1,18,70,.55); padding:8px; max-height:min(64vh, 460px); overflow-y:auto; z-index:140; display:none; text-align:left; } #searchLayer.is-open .sl-results{ display:block; } @media (max-width:720px){ .book-subnav-in{ flex-direction:column; align-items:flex-start; gap:8px; } .book-subnav-links{ width:100%; overflow-x:auto; padding-bottom:4px; } /* The row is built to scroll sideways, but its links were still allowed to shrink, so "My Library" and "Publisher Studio" each broke onto two lines. Holding their natural width lets the container scroll the way it was designed to. */ .book-subnav-links a{ flex:none; white-space:nowrap; } .book-subnav-tag{ display:none; } /* full width once the bar stacks */ .subnav-search{ flex:1 1 auto; width:100%; } .subnav-search .sl-results{ right:auto; left:0; width:100%; } } /* ---------- 1280: keep gutters off the glass ---------- */ @media (max-width:1280px){ :root{ --pad:22px; } } /* ---------- 1024: tablet landscape / "desktop site" on a phone ---------- */ @media (max-width:1024px){ :root{ --pad:20px; } .solutions-grid, .band-grid, .review-grid, .shopgrid, .biz, .catrow, .pgrid, .dash-cards{ grid-template-columns:repeat(2,1fr) !important; } .review-grid > .review:nth-child(5){ grid-column:auto; } .promos{ grid-template-columns:1fr 1fr; } .promos > :nth-child(3){ grid-column:1 / -1; } .proof-grid, .product-grid, .offer-grid, .contact-grid, .contact-body, .builder-grid, .twocol, .co-grid, .board{ grid-template-columns:1fr !important; } .preview-wrap, .osum, .dnav{ position:static; } .sec, .planner, .studio, .builder, .reviews{ padding-block:56px; } } /* ---------- 900: tablet portrait ---------- */ @media (max-width:900px){ .eco-grid{ grid-template-columns:1fr !important; grid-template-rows:none; } .eco-card:nth-of-type(1),.eco-card:nth-of-type(2), .eco-card:nth-of-type(3),.eco-card:nth-of-type(4){ grid-area:auto; } .eco-core{ grid-area:auto; order:-1; margin:0 auto 12px; } .eco-node{ display:none; } .dash{ grid-template-columns:1fr; } .dnav{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; scrollbar-width:none; } .dnav::-webkit-scrollbar{ display:none; } .dnav button{ width:auto; white-space:nowrap; flex:none; } .kpis{ grid-template-columns:repeat(2,1fr) !important; } .sbanner-cta{ margin-left:0; width:100%; } .contact-visual{ min-height:240px; } } /* ---------- 720: large phone ---------- */ @media (max-width:720px){ :root{ --pad:16px; } .solutions-grid, .band-grid, .review-grid, .shopgrid, .biz, .catrow, .promos, .incl, .foot-grid, .dash-cards, .dash-row, .revgrid, .contact-body{ grid-template-columns:1fr !important; } .promos > :nth-child(3){ grid-column:auto; } .pgrid{ grid-template-columns:repeat(2,1fr) !important; gap:12px; } .solutions-grid{ margin-top:-64px; } .hero{ padding-block:52px 116px; } .phero, .shop-hero{ padding-block:48px 44px; } .sec, .planner, .studio, .builder, .reviews, .proof, .product, .offer, .eco{ padding-block:44px; } .card, .sol-card, .pill-card, .eco-card, .cell{ padding:18px; } .counters{ position:static; margin-top:18px; right:auto; grid-template-columns:repeat(2,1fr); gap:12px; } .offer-card{ padding:26px 20px; box-shadow:7px -7px 0 0 var(--accent), var(--shadow-lift); } .foot-bar{ flex-direction:column; align-items:flex-start; gap:10px; } .site-footer{ padding-top:48px; } /* touch targets */ .btn{ padding:14px 24px; min-height:46px; } .link, .foot-list a, .nav a{ padding-block:8px; } .icon-btn, .cb-btn, .tool{ min-width:44px; min-height:44px; } .socials a{ width:44px; height:44px; } /* floating furniture must not stack on top of each other */ .wa-float{ right:12px; bottom:12px; width:52px; height:52px; } .coride-ad{ right:12px; bottom:74px; width:min(74vw,200px); padding:12px; } .ch-launch{ left:12px; bottom:12px; padding:11px 15px; font-size:.79rem; } .ch-panel{ left:10px; right:10px; bottom:10px; width:auto; max-height:72vh; } .cb-drawer{ width:100%; } } /* ---------- 560: standard phone ---------- */ @media (max-width:560px){ .hero h1, .phero h1, .shop-hero h1{ font-size:clamp(1.75rem, 8.2vw, 2.4rem); } .hero-eyebrow{ font-size:.62rem; letter-spacing:.2em; } .hero-actions, .offer-actions, .lock-acts, .board-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn, .offer-actions .btn, .lock-acts .btn, .board-actions .btn{ width:100%; justify-content:center; } .logo svg, .logo img{ width:34px; } .logo-word{ font-size:1.02rem; letter-spacing:.1em; } .logo-desc{ font-size:.44rem; } .header-in{ height:60px; gap:8px; } .eco-core{ width:150px; height:150px; } .eco-core > svg{ width:80px; height:80px; } .palette{ grid-template-columns:repeat(5,1fr); } .swatchbar{ height:52px; font-size:.5rem; } .monogram{ width:74px; height:74px; font-size:2rem; } .steps-bar{ font-size:.7rem; } .split-row{ grid-template-columns:88px 1fr 40px; gap:8px; font-size:.76rem; } .ussd{ font-size:1.05rem; } .phone{ width:min(100%,290px); } .video-frame .play, .play{ width:56px; height:56px; } } /* ---------- 420: small phone ---------- */ @media (max-width:420px){ :root{ --pad:13px; } .pgrid{ grid-template-columns:1fr !important; } .counters{ grid-template-columns:1fr 1fr; } .chips, .tabs, .opts{ gap:7px; } .chip, .tab, .opt{ padding:9px 13px; font-size:.8rem; } .sbanner-in{ gap:14px; } .slogo{ width:60px; height:60px; border-radius:14px; font-size:1.5rem; } .cb-row{ gap:9px; } .cb-th{ width:42px; height:42px; } .gate-box{ padding:26px 20px; } .authbox .card{ padding:20px 16px; } } /* ---------- 360: smallest common phone ---------- */ @media (max-width:360px){ :root{ --pad:11px; } .hero h1, .phero h1, .shop-hero h1{ font-size:1.62rem; } .btn{ padding:13px 18px; font-size:.86rem; } .coride-ad{ display:none; } /* nothing left to give */ } /* ---------- landscape phones: reclaim vertical space ---------- */ @media (max-height:520px) and (orientation:landscape){ .hero, .phero, .shop-hero{ padding-block:34px; } .site-header{ position:static; } .cb-drawer, .ch-panel{ max-height:100vh; } } /* ---------- very wide screens ---------- */ @media (min-width:1600px){ :root{ --shell:1360px; } } /* ============================================================ DARK MODE Driven by data-theme="dark" on . The toggle lives in the header and remembers the choice. Follows the system setting until the visitor overrides it. ============================================================ */ :root[data-theme="dark"]{ --white:#0E1320; --soft-white:#151B2B; --steel:#1B2334; --line:#28324A; --charcoal:#E6EBF5; --muted:#93A2BF; --cobalt:#8FB0FF; --royal:#6E9BFF; --royal-soft:#1B2745; --navy-deep:#080C16; --navy-2:#0B1120; } :root[data-theme="dark"] body{background:#0E1320;color:#E6EBF5} :root[data-theme="dark"] .site-header{background:#111827;border-bottom-color:#28324A} :root[data-theme="dark"] .nav a,:root[data-theme="dark"] .login, :root[data-theme="dark"] .icon-btn,:root[data-theme="dark"] .cb-btn{color:#E6EBF5} :root[data-theme="dark"] .card,:root[data-theme="dark"] .sol-card,:root[data-theme="dark"] .pill-card, :root[data-theme="dark"] .eco-card,:root[data-theme="dark"] .storecard,:root[data-theme="dark"] .pcard, :root[data-theme="dark"] .bizcard,:root[data-theme="dark"] .review,:root[data-theme="dark"] .kpi, :root[data-theme="dark"] .dnav,:root[data-theme="dark"] .appcard,:root[data-theme="dark"] .thread, :root[data-theme="dark"] .prow,:root[data-theme="dark"] .vidrow,:root[data-theme="dark"] .phone, :root[data-theme="dark"] .pvshop,:root[data-theme="dark"] .cb-drawer,:root[data-theme="dark"] .gate-box{ background:#151B2B; border-color:#28324A; color:#E6EBF5} :root[data-theme="dark"] .dwrap{background:#0B1120} :root[data-theme="dark"] .sec--tint,:root[data-theme="dark"] .band, :root[data-theme="dark"] .searchwrap,:root[data-theme="dark"] .closer, :root[data-theme="dark"] .contact{background:#111827} :root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .searchbar, :root[data-theme="dark"] .searchbar input,:root[data-theme="dark"] .chip, :root[data-theme="dark"] .tab,:root[data-theme="dark"] .opt,:root[data-theme="dark"] .mini{ background:#1A2133; border-color:#28324A; color:#E6EBF5} :root[data-theme="dark"] .field input::placeholder, :root[data-theme="dark"] .searchbar input::placeholder{color:#6B7A99} :root[data-theme="dark"] .tbl td{border-bottom-color:#222B40;color:#D6DEEE} :root[data-theme="dark"] .tbl th{border-bottom-color:#28324A} :root[data-theme="dark"] .spec{background:#18213A;border-color:#28324A;color:#BFD0F0} :root[data-theme="dark"] .drop{background:#161D2E;border-color:#28324A} :root[data-theme="dark"] .review-rail,:root[data-theme="dark"] blockquote{color:#E6EBF5} :root[data-theme="dark"] img,:root[data-theme="dark"] .media{filter:brightness(.94)} .theme-btn{background:none;border:0;padding:8px;border-radius:9px;color:var(--cobalt); display:grid;place-items:center;cursor:pointer;min-width:40px;min-height:40px} .theme-btn:hover{background:var(--royal-soft)} .theme-btn .moon{display:none} :root[data-theme="dark"] .theme-btn .sun{display:none} :root[data-theme="dark"] .theme-btn .moon{display:block} /* ============================================================ ACCOUNT CONTROL · AD STRIP · DARK-MODE CONTRAST ============================================================ */ .acct{display:flex;align-items:center;gap:9px;text-decoration:none;border-radius:10px;padding:6px 10px; transition:background .16s ease} .acct:hover{background:var(--royal-soft)} .acct--signup{background:var(--accent);color:#fff;font-weight:600;font-size:.88rem;padding:11px 22px; border-radius:999px} .acct--signup:hover{background:var(--accent-lift)} .acct-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--cobalt);color:#fff;font:800 .88rem var(--display)} .acct-txt{display:flex;flex-direction:column;line-height:1.1} .acct-txt small{font-size:.66rem;color:var(--muted)} .acct-txt b{font-size:.86rem;color:var(--cobalt);font-weight:700} .acct-menu{position:absolute;top:100%;right:16px;min-width:230px;background:#fff;border:1px solid var(--line); border-radius:13px;box-shadow:0 24px 50px -20px rgba(1,18,70,.45);padding:8px;z-index:120; opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s} .acct-menu.on{opacity:1;visibility:visible;transform:none} .am-head{padding:11px 12px 12px;border-bottom:1px solid var(--line);margin:0 0 6px; font:700 .88rem var(--body);color:var(--cobalt)} .am-head small{display:block;font-weight:400;font-size:.74rem;color:var(--muted);margin-top:2px} .acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;border:0;background:none; padding:11px 12px;border-radius:9px;font:500 .86rem var(--body);color:var(--charcoal);cursor:pointer; text-decoration:none} .acct-menu a:hover,.acct-menu button:hover{background:var(--royal-soft);color:var(--royal)} .acct-menu button{color:#DC2626;border-top:1px solid var(--line);margin-top:6px;border-radius:0 0 9px 9px} .site-header{position:sticky;top:0;z-index:100} /* ============================================================ HEADER PROFILES: one place decides which buttons each page shows Every page's
carries data-header: home index.html only: every key button shopping Shops, Verified shops, product, Book Store, book, library, account: search, account, wishlist, basket info Brand, Grow, About, Articles, Terms: account only app dashboards, admin, Publisher Studio: account only, no site nav (they have their own) checkout logo and "Secure checkout" only, nothing to wander off to auth sign in, sign up, verify: logo only Add the word "seller" to show the "My shop" button too (shop.html has data-header="shopping seller"). Order, left to right, the way Amazon arranges its header: search · theme · account · wishlist · basket · My shop (CSS "order" rearranges them without touching any page's HTML.) ============================================================ */ .site-header .header-actions > .icon-btn{order:1} .site-header .header-actions > .theme-btn{order:2} .site-header .header-actions > .login{order:3} .site-header .header-actions > .cb-shopbtns{order:4} .site-header .header-actions > .tool{order:4} /* shop and product pages' own wishlist + cart */ .site-header .header-actions > a.icon-btn{order:5} /* the shop page's "All COBRAND shops" */ .site-header .header-actions > [data-role]{order:5} .site-header .header-actions > .secure-note{order:6} .site-header .header-actions > .burger{order:9} /* Search, wishlist and basket: only where people are shopping */ .site-header[data-header]:not([data-header~="home"]):not([data-header~="shopping"]) .header-actions > .icon-btn, .site-header[data-header]:not([data-header~="home"]):not([data-header~="shopping"]) .cb-shopbtns, /* "My shop": the homepage, or pages marked "seller" */ .site-header[data-header]:not([data-header~="home"]):not([data-header~="seller"]) [data-role="seller"], /* The site nav and its phone menu button: not in apps, checkout or sign-in */ .site-header[data-header~="app"] .nav, .site-header[data-header~="app"] .burger, .site-header[data-header~="checkout"] .nav, .site-header[data-header~="checkout"] .burger, .site-header[data-header~="auth"] .nav, .site-header[data-header~="auth"] .burger, /* Account ("Hello Chidi" / Sign up): not during checkout or on sign-in pages */ .site-header[data-header~="checkout"] .login, .site-header[data-header~="checkout"] #acctMenu, .site-header[data-header~="auth"] .login, .site-header[data-header~="auth"] #acctMenu, /* Theme switch: not during checkout */ .site-header[data-header~="checkout"] .theme-btn{display:none !important} /* cobrand-auth.js hides seller/publisher-only buttons with the hidden attribute, but each page's .btn{display:inline-flex} overrode it, so signed-out visitors and buyers saw "My shop" too. hidden must win. */ .site-header [data-role][hidden]{display:none !important} /* With no nav in the middle, keep the remaining buttons on the right */ .site-header[data-header~="app"] .header-actions, .site-header[data-header~="checkout"] .header-actions, .site-header[data-header~="auth"] .header-actions{margin-left:auto} /* Below 1080px the nav folds into the menu button, so nothing is left in the middle to push the buttons across and the row simply follows the logo. Anchoring it right puts the menu button in the same place on every page, whether that page shows three buttons or four. */ @media (max-width:1080px){ .site-header .header-actions{margin-left:auto} } .secure-note{display:none} .site-header[data-header~="checkout"] .secure-note{ display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--body);color:var(--cobalt)} /* Up to 1280px the full nav and every button don't fit side by side (1130px needed at 1100px wide, found in testing), so "Hello Chidi" shrinks to its round avatar and the nav links close up a little. */ @media (max-width:1280px){ .site-header .acct--me .acct-txt, .site-header .acct--me > svg{display:none} .site-header .acct--me{padding:4px} } @media (min-width:1081px) and (max-width:1280px){ .site-header .nav{gap:24px} } /* Below 1080px the pages fold the nav into the menu button, and they used to hide the account button too: no way to sign in on a tablet or phone. Keep it (the avatar, or a compact Sign up) wherever it belongs. */ @media (max-width:1080px){ .site-header[data-header] .header-actions > .login{display:flex} .site-header .acct--signup{padding:9px 16px;font-size:.82rem} } /* Phones, like Amazon's mobile site: search, account, basket, menu. The theme follows the phone's own dark-mode setting, the wishlist is a tab in the basket drawer, and "My shop" is in the account menu. */ @media (max-width:560px){ .site-header[data-header] .theme-btn, .site-header[data-header] #cbWishBtn, .site-header[data-header] .header-actions > [data-role="seller"]{display:none !important} .site-header .header-actions{gap:6px} /* Shop and product pages have their own "Saved items" button: it goes the same way as the wishlist button above (it's a tab in the drawer) */ .site-header[data-header] .header-actions > .tool[aria-label="Saved items"], /* A shop's "All COBRAND shops" button is also in its menu and footer */ .site-header[data-header~="store"] .header-actions > a.icon-btn{display:none !important} /* Every logo was flex:none, so a long name ("Salvationcut Wears" in wide capitals) pushed the buttons off the screen instead of giving way. On phones the logo may shrink, and a long name ends in "..." */ .site-header .logo{flex:0 1 auto;min-width:0} .site-header .logo-text{min-width:0;overflow:hidden} .site-header .logo-word, .site-header .logo-desc{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .site-header .header-actions{flex:none} /* Signed out, "Sign up" becomes a round account icon the same size as the signed-in avatar (the pill pushed the buttons off a 375px screen). Its aria-label, "Create a COBRAND account", still names it. */ .site-header .acct--signup{ width:40px;height:40px;padding:0;border-radius:50%;font-size:0;flex:none; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011246' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E") center/21px no-repeat; } } /* The smallest phones (360px): tighten the logo's letter-spacing and the gaps so the menu button sits inside the page margin, not against the screen edge. Buttons keep their 44px touch size. */ @media (max-width:400px){ .site-header .header-in{gap:6px} .site-header .logo-word{letter-spacing:.05em} .site-header .header-actions{gap:4px} /* At this width the strapline was being cut mid-word ("AI-Powered Growth Partn..."), which looks like a fault rather than a design. The wordmark alone reads cleanly. */ .site-header .logo-desc{display:none} } /* ---------- Book Store search results ---------- The results panel is white but sits inside the dark sub-nav bar, and it used to inherit the bar's WHITE text: every line was invisible except the emoji icons. The rows had no layout styles on the Book Store pages either (they only existed inside other pages). */ .subnav-search .sl-results{color:var(--charcoal)} .subnav-search .sl-group{margin:8px 10px 4px;font:600 .62rem var(--body);letter-spacing:.18em; text-transform:uppercase;color:var(--muted)} .subnav-search .sl-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px; color:var(--charcoal);text-decoration:none} .subnav-search .sl-item:hover,.subnav-search .sl-item:focus-visible{background:var(--royal-soft);outline:none} .subnav-search .sl-ico{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center; background:var(--royal-soft);color:var(--royal);font:800 .9rem var(--display)} .subnav-search .sl-item b{display:block;font:600 .9rem var(--body);color:var(--cobalt);line-height:1.3} .subnav-search .sl-item small{display:block;font-size:.76rem;color:var(--muted);line-height:1.4} .subnav-search .sl-none{padding:26px 16px;text-align:center;color:var(--muted);font-size:.9rem} /* thin advert band, edge to edge, seams invisible */ .topads{display:flex;width:100%;background:var(--navy-deep);overflow:hidden} .topads a{flex:1;min-width:0;display:grid;place-items:center;padding:9px 14px;text-decoration:none; color:rgba(255,255,255,.9);font:500 .78rem var(--body);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;background-image:var(--img,none);background-size:cover;background-position:center; position:relative;transition:background-color .2s ease} .topads a::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(11,44,150,.55),rgba(1,18,70,.55))} .topads a>span{position:relative;z-index:2} .topads a:hover{color:#fff} .topads a:hover::before{background:linear-gradient(90deg,rgba(29,78,189,.7),rgba(11,44,150,.7))} .topads b{color:var(--accent-lift);font-weight:700} /* The three boards used to be dropped one at a time as the screen narrowed. They are paid video placements now, so hiding them would mean an advertiser paying for a board that phone visitors never see. cobrand-ads.js turns the strip into a swipeable row on small screens instead, and all three stay in the page. */ /* ---- video leaderboard adverts (1456 × 180) ---- */ .topads--video{display:flex;width:100%;background:#000;overflow:hidden;gap:0} .topads--video .vad{flex:1;min-width:0;position:relative;display:block; aspect-ratio:1456/180;overflow:hidden;cursor:pointer} .topads--video .vad video{width:100%;height:100%;object-fit:cover;display:block} .topads--video .vad .vad-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--navy-deep) 0%,#0B2C96 50%,var(--navy-2) 100%); color:rgba(255,255,255,.5);font:600 .74rem var(--body);letter-spacing:.12em;text-transform:uppercase; text-decoration:none;gap:8px;transition:background .25s ease} .topads--video .vad .vad-placeholder:hover{background:linear-gradient(135deg,#0B2C96 0%,var(--accent) 50%,#0B2C96 100%); color:rgba(255,255,255,.85)} .topads--video .vad .vad-placeholder svg{opacity:.5} .topads--video .vad .vad-placeholder:hover svg{opacity:.8} .topads--video .vad-label{position:absolute;top:6px;right:8px;z-index:3;font:600 .52rem var(--body); letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45); background:rgba(0,0,0,.45);padding:3px 7px;border-radius:4px;pointer-events:none} .topads--video .vad-overlay{position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,.02) 50%,rgba(0,0,0,.10)); pointer-events:none;transition:opacity .25s ease;opacity:0} .topads--video .vad:hover .vad-overlay{opacity:1} .topads--video .vad-sep{width:1px;background:rgba(255,255,255,.08);flex:none} @media (max-width:900px){.topads--video .vad:nth-child(n+5){display:none}} @media (max-width:600px){.topads--video{flex-direction:column} .topads--video .vad{aspect-ratio:728/90} .topads--video .vad-sep{width:100%;height:1px} .topads--video .vad:nth-child(n+4){display:none}} /* ---------- dark mode: readable text everywhere ---------- */ :root[data-theme="dark"]{ --charcoal:#EEF2FA; --muted:#A9B8D6; --cobalt:#A9C4FF; --royal:#8FB0FF; --line:#2C3752; --soft-white:#161D2E; --royal-soft:#1E2B4C; /* --white was never flipped, so every page painted with it — body included — stayed white while the text turned pale. That is what made homepage copy disappear. */ --white:#0F1524; } :root[data-theme="dark"] body{ background:var(--white); color:#DDE5F5; } :root[data-theme="dark"] body, :root[data-theme="dark"] p,:root[data-theme="dark"] li,:root[data-theme="dark"] td, :root[data-theme="dark"] blockquote,:root[data-theme="dark"] label, :root[data-theme="dark"] .lede,:root[data-theme="dark"] .sub, :root[data-theme="dark"] .fieldnote,:root[data-theme="dark"] small{color:#DDE5F5} :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3, :root[data-theme="dark"] h4,:root[data-theme="dark"] .acct-txt b, :root[data-theme="dark"] .card h2,:root[data-theme="dark"] .sec-head h2, :root[data-theme="dark"] .kpi b,:root[data-theme="dark"] .dtop h1{color:#F3F7FF} :root[data-theme="dark"] .store-cat,:root[data-theme="dark"] .store-city, :root[data-theme="dark"] .chip-prod,:root[data-theme="dark"] .reviewer small, :root[data-theme="dark"] .counter,:root[data-theme="dark"] .video-note, :root[data-theme="dark"] .adnote,:root[data-theme="dark"] .am-head small{color:#B6C5E2} :root[data-theme="dark"] .storecard h3,:root[data-theme="dark"] .bizcard h3, :root[data-theme="dark"] .reviewer b,:root[data-theme="dark"] .pv-name, :root[data-theme="dark"] .pprice,:root[data-theme="dark"] .prow .pp{color:#EAF0FF} :root[data-theme="dark"] .acct-menu{background:#151B2B;border-color:#2C3752} :root[data-theme="dark"] .acct-menu a,:root[data-theme="dark"] .acct-menu button{color:#DDE5F5} :root[data-theme="dark"] .nav{background:#111827} :root[data-theme="dark"] .eyebrow--blue{color:#8FB0FF} :root[data-theme="dark"] .tbl th{color:#A9B8D6} :root[data-theme="dark"] .pill{filter:brightness(1.12)} :root[data-theme="dark"] ::placeholder{color:#7F8FB0} /* ---------- Book Store Responsive Extensions ---------- */ @media (max-width:1024px){ .hero-grid, .featured-grid, .detail-grid, .dashboard-grid, .video-grid{ grid-template-columns:1fr !important; gap:28px !important; } .book-gallery{ position:static !important; } .books-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important; } } @media (max-width:720px){ .books-grid, .category-grid, .trust-grid, .reviews-grid, .stats-cards, .library-grid{ grid-template-columns:1fr !important; } .featured-section{ padding:24px 16px !important; } .featured-grid{ padding:0 !important; } .hero-stats{ flex-wrap:wrap; gap:16px !important; } .format-selector{ grid-template-columns:1fr !important; } .action-buttons{ flex-direction:column; } .btn-wishlist{ width:100% !important; border-radius:99px !important; } } /* ---------- print ---------- */ @media print{ .site-header,.wa-float,.coride-ad,.ch-launch,.ch-panel,.cb-drawer,.cb-veil, .gate-veil,.searchlayer,.video-frame{ display:none !important; } body{ color:#000; } } /* ============================================================ MOBILE LAYER ------------------------------------------------------------ The ladder above was written for the original marketing and storefront pages. This section extends the same treatment to the Book Store family, the Publisher Studio, the account hub and the Articles module, and hardens the things that break a phone regardless of which page you are on. Ordering note: this file loads last on every page, so these rules win over each page's inline