/* ========================================================================== Public catalogue + course detail page Shares the landing page's language: soft canvas, white panels, big radii. ========================================================================== */ :root{ --bg:#EBEBEA; --panel:#FFFFFF; --panel-2:#F6F6F4; --ink:#151515; --ink-2:#5B5B58; --faint:#9A9A96; --line:#EAEAE7; --black:#141414; /* The blue from the logo. Buttons were near-black, which belonged to no part of the brand; the mark's two blue wedges and the wordmark are this. The deep one is for hover and for text on white, where the mid tone does not carry enough contrast. */ --cta:#1571C6; --cta-deep:#0F5BA3; --cta-lite:#3FA9E8; /* Violet belonged to no part of the brand. The logo is two blues and two reds; this is its blue, and the red is kept for the few places that need a second accent. */ --brand:#1571C6; --brand-2:#E23E57; --grad:#1571C6; --green:#22C55E; --gold:#F5A623; --sh-sm:0 2px 10px rgba(20,20,20,.05); --sh:0 20px 50px rgba(20,20,20,.07); --sh-lg:0 30px 70px rgba(20,20,20,.10); --r-panel:38px; --r-card:24px; --r-sm:16px; --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } /* the hidden attribute must beat any display rule below */ [hidden]{display:none!important} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55; -webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} svg{width:18px;height:18px;flex:none;vertical-align:-.16em} h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em;line-height:1.12} .page{max-width:1240px;margin:0 auto;padding:18px} :focus-visible{outline:3px solid rgba(21,113,198,.45);outline-offset:2px;border-radius:10px} /* ---------- shared bits reused from the landing page ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px; padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,background .18s,color .18s} .btn-dark{background:var(--cta);color:#fff;box-shadow:0 6px 18px rgba(21,113,198,.26)} .btn-dark:hover{background:var(--cta-deep);transform:translateY(-2px); box-shadow:0 12px 26px rgba(21,113,198,.34)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--sh-sm)} .btn-white{background:#fff;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.14)} .btn-white:hover{transform:translateY(-2px)} .btn-sm{padding:9px 16px;font-size:14px} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh)} .pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line); color:var(--ink-2);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase; padding:8px 14px;border-radius:999px;box-shadow:var(--sh-sm)} .stars{display:inline-flex;gap:2px;color:var(--gold)} .stars svg{width:16px;height:16px} /* ---------- nav ---------- */ /* Pinned to the very top, edge to edge, rather than a pill floating 18px down the canvas. The floating pill left a strip of page scrolling past above it and made the bar read as a card rather than the site's header. */ /* The rounded pill, as it was, but held at the top of the window instead of floating 18px down the canvas. The band behind it is the page's own colour, so whatever scrolls underneath disappears rather than cutting across the top of the screen or ghosting through the pill's translucent edges. */ /* Pulled up through the page's own 18px of padding, so the pill sits near the top of the window rather than a third of the way down it. */ .nav{position:sticky;top:0;z-index:100;padding:10px 0 8px;margin:-18px 0 20px} .nav::before{content:"";position:absolute;top:0;bottom:0; left:calc(50% - 50vw);width:100vw;z-index:-1;pointer-events:none; background:var(--bg);opacity:0;transition:opacity .2s ease} .nav.stuck::before{opacity:1} .nav-in{background:rgba(255,255,255,.86);backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-sm); display:flex;align-items:center;justify-content:space-between;gap:20px; padding:8px 10px 8px 22px;transition:box-shadow .2s ease,background .2s ease} .nav.stuck .nav-in{background:rgba(255,255,255,.96);box-shadow:var(--sh)} /* The logo is one image -- the mark and the wordmark together, as drawn. Sized by height so it keeps its own proportions whatever the file is, and everything else in the bar is sized around it rather than the other way round. */ .logo{display:flex;align-items:center;flex:none} .logo .wordmark{height:60px;width:auto;display:block} /* Down a step on a laptop and again on a phone: 60px of logo beside four links and two buttons does not fit a narrow bar. */ @media(max-width:1100px){.logo .wordmark{height:48px}} @media(max-width:860px){.logo .wordmark{height:42px}} @media(max-width:560px){.logo .wordmark{height:36px}} .logo .mark{width:46px;height:46px;border-radius:11px;background:#fff;display:grid;place-items:center; overflow:hidden;flex:none;box-shadow:0 4px 14px rgba(20,20,20,.12)} .logo .mark img{width:100%;height:100%;object-fit:contain} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{color:var(--ink-2);font-weight:500;font-size:15.5px} .nav-links a:hover,.nav-links a.on{color:var(--ink)} .nav-r{display:flex;align-items:center;gap:10px} /* Sized against a 60px logo -- the old .btn-sm looked lost beside it. */ .nav-r .btn{padding:12px 22px;font-size:15px} .menu-btn{padding:11px} .menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px;cursor:pointer} /* ---------- catalogue ---------- */ .cat-head{padding:46px 48px 40px;margin-bottom:22px;text-align:center} .cat-head h1{font-size:clamp(34px,4.6vw,54px);font-weight:900;margin:18px 0 14px} .cat-head p{font-size:18px;color:var(--ink-2);max-width:620px;margin:0 auto} .cat-stats{display:flex;justify-content:center;gap:34px;margin-top:26px;flex-wrap:wrap} .cat-stats b{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em} .cat-stats span{font-size:13.5px;color:var(--faint)} .filters-bar{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px; margin-bottom:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap} .f-search{flex:1;min-width:230px;position:relative} .f-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--faint)} .f-search input{width:100%;padding:12px 16px 12px 44px;border:1px solid var(--line);border-radius:999px; font-family:inherit;font-size:15px;background:var(--panel-2)} .f-search input:focus{outline:none;border-color:var(--brand);background:#fff} .f-select{padding:11px 34px 11px 15px;border:1px solid var(--line);border-radius:999px;background:#fff; font-family:inherit;font-size:14.5px;font-weight:500;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A96' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:16px} .type-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .type-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px; background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink-2); transition:transform .16s,box-shadow .16s,border-color .16s} .type-tab:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)} .type-tab.on{background:var(--cta);border-color:var(--cta);color:#fff} .type-tab .n{font-size:12px;opacity:.65;font-weight:700} .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .chip-row a{padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line); font-size:13.5px;font-weight:600;color:var(--ink-2)} .chip-row a.on{background:var(--grad);border-color:transparent;color:#fff} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px} .ccrd{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden; display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .ccrd:hover{transform:translateY(-5px);box-shadow:var(--sh)} .ccrd .top{position:relative;aspect-ratio:16/9;overflow:hidden} .ccrd .top img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .4s cubic-bezier(.2,.9,.3,1)} .ccrd:hover .top img{transform:scale(1.05)} .buy .art img{width:100%;height:100%;object-fit:cover;display:block} .ccrd .top .ccrd .kind{position:absolute;top:13px;left:13px;background:rgba(255,255,255,.94);color:#1a1a2e; font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:7px} .ccrd .rate{position:absolute;top:13px;right:13px;background:rgba(255,255,255,.94);color:#B45309; font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:999px} .ccrd .bd{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column} .ccrd h3{font-size:18px;font-weight:800;line-height:1.28;margin-bottom:8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ccrd .sub{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:14px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ccrd .meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint); font-weight:500;margin-bottom:14px} .ccrd .meta i{width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block} .ccrd .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .ccrd .tags span{background:var(--panel-2);border:1px solid var(--line);border-radius:9px; padding:5px 9px;font-size:12px;font-weight:600} .ccrd .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto; padding-top:14px;border-top:1px solid var(--line)} .ccrd .price{font-size:21px;font-weight:900;letter-spacing:-.03em} .ccrd .price s{font-size:13.5px;font-weight:600;color:var(--faint);margin-left:6px} .empty-state{background:#fff;border:1px dashed var(--line);border-radius:var(--r-card); padding:70px 30px;text-align:center} .empty-state h3{font-size:20px;margin-bottom:8px} .empty-state p{color:var(--ink-2);max-width:420px;margin:0 auto 20px} /* ---------- course detail ---------- */ .cd-hero{padding:44px 48px;margin-bottom:22px} .cd-grid{display:grid;grid-template-columns:minmax(0,1.5fr) 380px;gap:44px;align-items:start} .cd-crumb{display:flex;align-items:center;gap:6px;min-width:0; font-size:13.5px;color:var(--faint);margin-bottom:16px} .cd-crumb a{flex:none} .cd-crumb a:hover{color:var(--ink)} .cd-crumb span{flex:none} /* The title takes whatever room is left and ends in an ellipsis. */ .cd-crumb b{font-weight:400;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cd-hero h1{font-size:clamp(30px,4vw,46px);font-weight:900;margin:14px 0 16px} .cd-lede{font-size:18px;color:var(--ink-2);line-height:1.6;margin-bottom:22px} .cd-facts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2); margin-bottom:24px} .cd-facts b{color:var(--ink)} .cd-facts i{width:3px;height:3px;border-radius:50%;background:var(--faint);display:inline-block} .cd-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .cd-badge{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line); border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600} /* content sections */ .cd-sec{padding:38px 48px;margin-bottom:22px} .cd-sec h2{font-size:clamp(24px,3vw,32px);margin-bottom:8px} .cd-sec .sec-sub{color:var(--ink-2);font-size:16px;margin-bottom:26px} .learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 30px} .learn-grid li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.55} .learn-grid li svg{color:var(--green);margin-top:3px} .curr{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .curr details{border-bottom:1px solid var(--line)} .curr details:last-child{border-bottom:none} .curr summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none; background:var(--panel-2);font-weight:700;font-size:15.5px} .curr summary::-webkit-details-marker{display:none} .curr summary .cnt{margin-left:auto;font-size:13px;color:var(--faint);font-weight:600} .curr summary .ch{transition:transform .2s} .curr details[open] > summary .ch{transform:rotate(180deg)} .curr .it{display:flex;align-items:center;gap:12px;padding:13px 20px 13px 52px;font-size:15px; color:var(--ink-2);border-top:1px solid var(--line)} .curr .it .dur{margin-left:auto;font-size:13px;color:var(--faint)} .curr .it .free{background:#DCEBFA;color:#5B21B6;font-size:11px;font-weight:800;padding:3px 8px;border-radius:5px} /* reviews */ .rev-summary{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:center; padding:26px;background:var(--panel-2);border-radius:var(--r-sm);margin-bottom:28px} /* The stars under the average had no colour of their own, so they drew in the inherited text grey -- "4.2" beside five grey stars reads as nothing rated rather than as the score it sits next to. Gold, like every other star on the site. */ .rev-big{text-align:center} .rev-big .stars,.rev-big svg{color:var(--gold)} .rev-big b{display:block;font-size:52px;font-weight:900;letter-spacing:-.04em;line-height:1} .rev-big span{font-size:13.5px;color:var(--faint)} .rev-bars{display:grid;gap:8px} .rev-bar{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)} .rev-bar .n{width:44px;flex:none} .rev-bar .track{flex:1;height:8px;border-radius:5px;background:#E4E4E0;overflow:hidden} .rev-bar .track span{display:block;height:100%;background:var(--gold)} .rev-bar .c{width:36px;text-align:right;flex:none;color:var(--faint)} .rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px} /* The review card. It was a flat pastel rectangle: tint, name, text, stars, nothing else. The tint stays -- a row of them reads as one set, which white boxes do not -- but flat colour with no surface is what made it look cheap. What it gains here is depth (a white inner face over the tint, a real border, a shadow that lifts), a hierarchy (who and how many stars on one line, the quote below it, where it came from underneath) and a watermark so the card has something in it besides text. */ .rev{position:relative;isolation:isolate;overflow:hidden; background:linear-gradient(170deg,var(--rv,#F4F6F8) 0%,#FFFFFF 62%); border:1px solid rgba(20,24,40,.07); border-radius:22px;padding:24px 24px 20px;display:flex;flex-direction:column; gap:13px;box-shadow:0 1px 2px rgba(20,24,40,.04),0 10px 26px rgba(20,24,40,.05); transition:transform .22s ease-out,box-shadow .22s ease-out,border-color .22s} .rev:hover{transform:translateY(-4px);border-color:rgba(20,24,40,.12); box-shadow:0 2px 4px rgba(20,24,40,.05),0 22px 52px rgba(20,24,40,.12)} .rev.feat{border-color:#CFE3F7;box-shadow:0 2px 4px rgba(21,113,198,.07), 0 18px 44px rgba(21,113,198,.13)} /* The quote mark is the card's only ornament, set large and faint behind the text rather than inline, where it competed with the first word. */ .rev-mark{position:absolute;top:-14px;right:10px;z-index:-1; font-family:Georgia,'Times New Roman',serif;font-size:110px;line-height:1; color:var(--cta);opacity:.09;pointer-events:none;user-select:none} .rev-top{display:flex;align-items:center;gap:12px;margin:0} .rev-av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center; overflow:hidden;background:var(--cta);color:#fff;font-weight:800;font-size:15px; /* A white ring and a shadow lift the face off the tint; without them the avatar sat flat against a near-matching ground. */ border:2.5px solid #fff;box-shadow:0 3px 10px rgba(20,24,40,.16)} .rev-av img{width:100%;height:100%;object-fit:cover;display:block} .rev-who{min-width:0;flex:1} .rev-who b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rev-who span{display:block;font-size:12.5px;color:var(--ink-2);opacity:.8; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* On the top line with the person, not stranded at the bottom: the score is read with the name, the way it is on every shop. */ .rev .rev-stars{display:flex;gap:2px;color:var(--gold);flex:none;align-self:flex-start; margin-top:3px} .rev .rev-stars svg{width:15px;height:15px} .rev h4{font-size:15.5px;font-weight:800;letter-spacing:-.015em;margin:0; line-height:1.3} /* Cut at eight lines. A review is worth reading, but one that runs to fifteen lines next to one that runs to two turns a row of cards into a row of different shapes, and a carousel into mostly empty tint. */ .rev p{font-size:14.8px;line-height:1.62;color:var(--ink-2);margin:0;flex:1; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8; overflow:hidden} .rev.open p{-webkit-line-clamp:unset;display:block;overflow:visible} /* Only rendered for a review that is actually cut off -- a button under a review you can already read in full is a lie about there being more. */ .rev-more{align-self:flex-start;font:inherit;font-size:13.5px;font-weight:700; color:var(--cta);background:none;border:0;padding:2px 0;cursor:pointer; text-decoration:underline;text-underline-offset:3px} .rev-more:hover{color:var(--cta-deep)} .rev-more:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:3px} /* Where it came from, on a hairline under the quote. Pushed to the bottom so cards of different text lengths still line their feet up. */ .rev-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto; padding-top:13px;border-top:1px solid rgba(20,24,40,.07)} .rev-ver{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800; letter-spacing:.02em;color:var(--cta-deep)} .rev-ver svg{width:14px;height:14px;color:var(--cta)} .rev-course{font-size:11.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.75); border:1px solid rgba(20,24,40,.08);border-radius:999px;padding:4px 10px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .rev .when{font-size:12px;color:var(--ink-2);opacity:.6} @media(prefers-reduced-motion:reduce){ .rev{transition:none} .rev:hover{transform:none} } .faq details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;background:#fff} .faq summary{padding:17px 20px;cursor:pointer;font-weight:700;font-size:16px;display:flex; align-items:center;gap:12px;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary .ch{margin-left:auto;transition:transform .2s} .faq details[open] > summary .ch{transform:rotate(180deg)} .faq .a{padding:0 20px 18px;color:var(--ink-2);font-size:15px;line-height:1.65} .cd-cta{padding:52px 48px;text-align:center;background:var(--black);color:#fff; border-radius:var(--r-panel);margin-bottom:22px} .cd-cta h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:12px} .cd-cta p{color:rgba(255,255,255,.74);font-size:17px;max-width:520px;margin:0 auto 26px} .mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} @media(max-width:980px){ .cd-grid{grid-template-columns:1fr} .buy{position:static} .rev-summary{grid-template-columns:1fr;gap:22px} } @media(max-width:840px){ .nav-links{display:none} .menu-btn{display:inline-flex} .cat-head,.cd-hero,.cd-sec,.cd-cta{padding-left:24px;padding-right:24px} .cat-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{transition:none!important} /* decorative animation stops; the review columns are content, so they keep drifting, just slower and at a constant speed */ *:not([data-rail-track]):not(.uq-track){animation:none!important} .uq-track{animation-duration:80s!important;animation-timing-function:linear!important} } /* ---------- share row ---------- */ .share-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px} .share-lbl{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); margin-right:2px} .sh{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line); background:#fff;color:var(--ink-2);cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,color .16s} .sh:hover{transform:translateY(-2px);box-shadow:var(--sh-sm);color:#fff} .sh svg{width:17px;height:17px} .sh.wa:hover{background:#25D366;border-color:#25D366} .sh.tg:hover{background:#229ED9;border-color:#229ED9} .sh.li:hover{background:#0A66C2;border-color:#0A66C2} .sh.xx:hover{background:#000;border-color:#000} .sh.fb:hover{background:#1877F2;border-color:#1877F2} .sh.em:hover{background:#5B5B58;border-color:#5B5B58} .sh.cp:hover,.sh.nat:hover{background:var(--brand);border-color:var(--brand)} .share-done{font-size:13px;font-weight:600;color:var(--green)} .ver{color:var(--green);font-weight:600} /* ---------- free preview ---------- */ .try-free{display:flex;align-items:flex-start;gap:11px;background:#EAF4FD;border:1px solid #DCD9FB; border-radius:var(--r-sm);padding:14px 16px;margin-bottom:22px;font-size:14.5px;color:var(--ink-2); line-height:1.55} .try-free svg{color:var(--brand);margin-top:2px} .try-free em{font-style:normal;font-weight:700;color:var(--brand);font-size:11px;letter-spacing:.05em} .curr .it{width:100%;text-align:left;font-family:inherit} button.it{background:none;border:none;cursor:pointer;border-top:1px solid var(--line)} button.it-free:hover{background:#F7F5FF} button.it-free .play{margin-left:8px;width:26px;height:26px;border-radius:50%;background:var(--brand); color:#fff;display:grid;place-items:center;flex:none} button.it-free .play svg{width:12px;height:12px} .curr .it .lock{margin-left:auto;color:var(--faint)} .curr .it .lock svg{width:15px;height:15px} .curr .it .dur+.lock{margin-left:8px} .pv{position:fixed;inset:0;background:rgba(20,20,20,.72);backdrop-filter:blur(3px);z-index:400; display:flex;align-items:center;justify-content:center;padding:24px} .pv[hidden]{display:none} .pv-box{background:#fff;border-radius:20px;width:100%;max-width:880px;max-height:92vh;overflow:hidden; display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,.4)} .pv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px; border-bottom:1px solid var(--line)} .pv-head b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pv-x{width:34px;height:34px;border:none;background:var(--panel-2);border-radius:50%;font-size:22px; line-height:1;cursor:pointer;color:var(--ink-2);flex:none} .pv-x:hover{background:#E8E8E4} .pv-body{flex:1;overflow-y:auto;background:#0E0E12;display:grid;place-items:center;min-height:220px} .pv-body video{width:100%;max-height:70vh;display:block;background:#000} .pv-body img{max-width:100%;max-height:70vh;object-fit:contain} .pv-body iframe{width:100%;height:70vh;border:none;background:#fff} .pv-body audio{padding:40px 24px} .pv-text{background:#fff;color:var(--ink);padding:28px 30px;line-height:1.75;font-size:15.5px;width:100%; max-height:70vh;overflow-y:auto} .pv-load{color:#B9B9C4;font-size:15px;padding:60px 24px;text-align:center} .pv-alt{background:#fff;width:100%;padding:12px 18px;font-size:14px} .pv-alt a{color:var(--brand);font-weight:600} .pv-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px; border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);flex-wrap:wrap} @media(max-width:640px){ .pv{padding:0} .pv-box{border-radius:0;max-height:100vh;height:100vh} } /* ---------- carousels on the course page ---------- */ .cd-sec .rail{margin-top:22px} .cd-sec .rail-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:16px} .cd-sec .rail-arrows{display:flex;gap:9px} .cd-sec .rail-dots{display:flex;align-items:center;gap:7px;margin-right:auto} .cd-sec .rail-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line); background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none; transition:background .16s,color .16s,opacity .16s} .cd-sec .rail-btn:hover:not(:disabled){background:var(--black);color:#fff} .cd-sec .rail-btn:disabled{opacity:.3;cursor:default} .cd-sec .rail-btn svg{width:16px;height:16px} .cd-sec .rail-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#D6D6D2; cursor:pointer;transition:width .22s,background .22s} .cd-sec .rail-count{font-size:12.5px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums} .rail-dot.on{width:24px;border-radius:4px;background:var(--black)} /* the grids become snapping rows; the cards keep their own look */ .cd-sec [data-rail-track]{display:grid;grid-auto-flow:column;overflow-x:auto; scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 12px;margin:0 -4px} .cd-sec [data-rail-track]::-webkit-scrollbar{display:none} .cd-sec [data-rail-track] > *{scroll-snap-align:start;min-width:0} .cd-sec .rev-grid[data-rail-track]{grid-auto-columns:minmax(320px,1fr);gap:18px} .cd-sec .mini-grid[data-rail-track]{grid-auto-columns:minmax(258px,1fr);gap:18px} .cd-sec .rev{height:100%} @media(max-width:760px){ .cd-sec .rev-grid[data-rail-track]{grid-auto-columns:minmax(272px,88%)} .cd-sec .mini-grid[data-rail-track]{grid-auto-columns:minmax(230px,74%)} .cd-sec .rail-nav{justify-content:center} .cd-sec .rail-dots{margin-right:0} } /* ========================================================================== Course detail on a phone: tighter sections, a buy bar that stays reachable, and nothing that runs off the side. ========================================================================== */ @media(max-width:760px){ .cd-sec{padding:26px 20px;border-radius:26px;margin-bottom:14px} .cd-sec h2{font-size:22px} .cd-sec .sec-sub{font-size:14px} .cd-hero{padding:24px 20px} .cd-grid{grid-template-columns:1fr;gap:22px} .cd-facts{font-size:13px;gap:7px} .cd-badges{gap:7px} .cd-badge{font-size:12px;padding:6px 11px} .learn-grid{grid-template-columns:1fr!important;gap:11px} .rev-summary{grid-template-columns:1fr;gap:18px} .rev-bars{gap:7px} .share-row{flex-wrap:wrap;gap:8px} .cd-cta{padding:34px 22px;border-radius:26px} .cd-cta h2{font-size:24px} .faq summary{font-size:15px} /* the buy card is no use halfway down a long page */ .buy{position:static;margin-bottom:0} .cd-buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center; gap:12px;padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);backdrop-filter:blur(14px); border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(20,20,20,.08); transform:translateY(110%);transition:transform .26s cubic-bezier(.2,.9,.3,1)} .cd-buybar.on{transform:none} .cd-buybar .bb-price{flex:none} .cd-buybar .bb-price b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em; line-height:1.1} .cd-buybar .bb-price s{font-size:12px;color:var(--faint)} .cd-buybar .btn{flex:1;justify-content:center;padding:13px 18px} body:has(.cd-buybar.on){padding-bottom:0} } @media(min-width:761px){ .cd-buybar{display:none} } /* ---------- course detail: the column beside the buy card ---------- */ .cd-h3{font-size:15px;font-weight:800;letter-spacing:.02em;margin:28px 0 12px; display:flex;align-items:center;gap:9px} .cd-h3::after{content:"";flex:1;height:1px;background:var(--line)} .cd-two{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:4px} .cd-list{list-style:none;display:grid;gap:9px} .cd-list li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.6; color:var(--ink-2)} .cd-list svg{width:15px;height:15px;color:var(--faint);flex:none;margin-top:3px} .cd-hero .learn-grid{grid-template-columns:1fr 1fr;gap:12px 26px} .cd-hero .cd-badges{margin-bottom:4px} @media(max-width:1000px){ .cd-two{grid-template-columns:1fr;gap:8px} .cd-hero .learn-grid{grid-template-columns:1fr} } .cd-about{font-size:15.5px;line-height:1.75;color:var(--ink-2)} .cd-about p{margin-bottom:12px} .cd-about b,.cd-about strong{color:var(--ink)} /* ---------- sticky buy card ---------- */ .buy{position:sticky;top:100px;background:#fff;border:1px solid var(--line); border-radius:22px;overflow:hidden;box-shadow:var(--sh)} .buy .art{position:relative;aspect-ratio:16/9;overflow:hidden} .buy .art img{width:100%;height:100%;object-fit:cover;display:block} .art-off{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:800; background:var(--green);color:#fff;padding:5px 11px;border-radius:999px; box-shadow:0 4px 12px rgba(34,197,94,.3)} .buy .bd{padding:20px} .seats{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#B45309; background:#FFFBEB;border:1px solid #FDE68A;border-radius:9px;padding:8px 11px;margin-bottom:14px} .seats svg{width:14px;height:14px} .buy .price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .buy .price b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1} .buy .price s{font-size:15px;color:var(--faint)} .save{font-size:13px;font-weight:700;color:#166534;margin-top:5px} .buy-cta{width:100%;justify-content:center;margin-top:16px;font-size:16px;padding:14px 20px} .buy-alt{display:block;text-align:center;font-size:13px;color:var(--faint);margin-top:10px} .buy-alt:hover{color:var(--ink);text-decoration:underline} .buy-list{list-style:none;display:grid;gap:9px;margin-top:18px;padding-top:16px; border-top:1px solid var(--line)} .buy-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2); line-height:1.5} .buy-list svg{width:14px;height:14px;color:var(--green);flex:none;margin-top:2px} .buy-note{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px; color:var(--faint);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .buy-note svg{width:13px;height:13px} .buy-note a{color:var(--faint);text-decoration:underline} .buy-note a:hover{color:var(--ink)} /* ---------- "this course includes" strip ---------- */ .incl{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:6px} .incl-i{display:flex;gap:11px;align-items:flex-start} .incl-i svg{width:17px;height:17px;color:var(--ink-2);flex:none;margin-top:3px} .incl-i b{display:block;font-size:14.5px;letter-spacing:-.01em} .incl-i em{display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:1px} /* ---------- who teaches it ---------- */ .tutor{display:flex;align-items:center;gap:13px;margin-top:26px;padding:14px 16px; border:1px solid var(--line);border-radius:16px;background:var(--panel-2)} .tutor-av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff; display:grid;place-items:center;font-size:17px;font-weight:800;flex:none} .tutor-w em{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--faint)} .tutor-w b{display:block;font-size:15.5px;letter-spacing:-.01em;margin-top:2px} .tutor-w > span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px} @media(max-width:1000px){ .buy{position:static} .incl{grid-template-columns:1fr} } /* A rail that drifts continuously must not snap — the snap points fight the animation and make it stutter. */ .rail-flowing [data-rail-track]{scroll-snap-type:none!important;scroll-behavior:auto!important} .rail-flowing [data-rail-track] > *{scroll-snap-align:none!important} /* ---------- course detail: banner ---------- */ /* Light, and with no photograph behind it. The backdrop was one stock image shared by every course, which said nothing about any of them and made the pitch fight a gradient to stay legible. The only colour here is the one the title carries. */ .cd-banner{position:relative;border-radius:var(--r-panel);margin-bottom:22px; background: radial-gradient(120% 90% at 8% 0%, #F3F6FF 0%, rgba(243,246,255,0) 58%), radial-gradient(110% 90% at 100% 100%, #F7F1FF 0%, rgba(247,241,255,0) 60%), #fff; border:1px solid var(--line);color:var(--ink);overflow:hidden} .cdb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:clamp(28px,3.6vw,52px);align-items:center;padding:clamp(28px,3.8vw,50px)} .cdb-in{min-width:0} .cdb-pills{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px} .cdb-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600; color:var(--ink-2);background:#fff;border:1px solid var(--line); padding:7px 14px;border-radius:999px} .cdb-pill svg{width:14px;height:14px;opacity:.7} /* The one that says the course is running: a live dot, as everywhere else. */ .cdb-pill.live{background:#ECFDF3;border-color:#C7F0D8;color:#15693B} .cdb-pill.live i{width:7px;height:7px;border-radius:50%;background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18)} .cdb-h1{font-size:clamp(30px,4.2vw,52px);font-weight:900;letter-spacing:-.035em; line-height:1.06;margin-bottom:15px;text-wrap:balance} /* The name inside the name. A gradient rather than a flat colour because this is the one thing on the page allowed to be loud. */ /* The house colours are the logo's blue and black, and nothing else. This ran to violet, which belonged to no other part of the site. */ .cdb-h1 .lead{color:var(--cta)} .cdb-sub{font-size:clamp(15px,1.35vw,17px);line-height:1.62;color:var(--ink-2); max-width:560px;margin-bottom:26px} /* What is actually in the course, as three things you can read at a glance rather than a row of small grey labels. */ /* Three across, not wrapped two-and-one: they are one row of facts about the same course, and a stray third line underneath reads as an afterthought. minmax(0,1fr) so a long value shrinks instead of pushing the column wider than the grid allows. */ .cdb-facts{display:grid;grid-template-columns:repeat(3,minmax(0,auto)); justify-content:start;gap:14px 20px;margin-bottom:28px} .cdb-fact{display:flex;align-items:center;gap:11px;min-width:0} .cf-ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid; place-items:center} .cf-ic svg{width:19px;height:19px} .cf-ic.i1{background:#EAF1FE;color:#2563EB} /* One family, three weights of it, rather than a violet and a green that appear nowhere else. */ .cf-ic.i2{background:#E3EDFB;color:#1E5FA8} .cf-ic.i3{background:#DDE8F7;color:#164E82} .cdb-fact b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em; line-height:1.2} /* One line. These captions are short by design, and a two-line one next to two single-line ones knocks the row out of alignment; a caption long enough to need the room still gets it on a narrow screen, where the chips stack. */ .cdb-fact em{display:block;font-style:normal;font-size:12.5px;color:var(--faint); margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:900px){.cdb-fact em{white-space:normal}} .cdb-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .cdb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--cta);color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em; padding:16px 30px;border-radius:999px; box-shadow:0 10px 26px rgba(21,113,198,.26); transition:transform .16s,box-shadow .16s,background .16s} .cdb-btn:hover{transform:translateY(-2px);background:var(--cta-deep); box-shadow:0 16px 34px rgba(21,113,198,.32)} .cdb-btn svg{width:16px;height:16px} .cdb-ghost{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:#fff;color:var(--ink);font-weight:700;font-size:15.5px; padding:15px 26px;border-radius:999px;border:1px solid var(--line); transition:border-color .16s,transform .16s} .cdb-ghost:hover{border-color:var(--ink-2);transform:translateY(-2px)} .cdb-ghost svg{width:13px;height:13px} .cdb-trust{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px; margin-top:26px;padding-top:22px;border-top:1px solid var(--line); font-size:13.5px;font-weight:600;color:var(--ink-2)} .cdb-trust span{display:inline-flex;align-items:center;gap:7px} .cdb-trust svg{width:15px;height:15px;opacity:.65} .cdb-trust i{width:1px;height:14px;background:var(--line)} /* ---------- the learner's video review, beside the pitch ---------- */ .cdb-side{display:grid;align-content:center;min-width:0} .ugc{background:#0C0C0E;border:1px solid var(--line); border-radius:22px;overflow:hidden; box-shadow:0 22px 54px rgba(20,24,40,.16)} .ugc-frame{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer} .ugc-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,opacity .3s} .ugc:hover .ugc-thumb{transform:scale(1.04);opacity:.86} .ugc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .ugc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:72px;height:72px;border-radius:50%;border:0;background:rgba(255,255,255,.94); display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s; box-shadow:0 10px 30px rgba(0,0,0,.4)} .ugc:hover .ugc-play{transform:translate(-50%,-50%) scale(1.08);background:#fff} .ugc-tri{width:0;height:0;margin-left:5px;border-top:14px solid transparent; border-bottom:14px solid transparent;border-left:23px solid #101011} .ugc-tag{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; background:rgba(10,10,12,.72);color:#fff;padding:5px 11px;border-radius:999px; backdrop-filter:blur(6px)} .ugc-tag svg{width:12px;height:12px} /* .ugc-foot is gone with the caption card: it repeated what the player already said, and the free lesson it pointed at lives in the curriculum. */ /* the review column beside the video, masked so cards fade in and out */ .uq-wall{position:relative;height:230px;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent); mask-image:linear-gradient(180deg,transparent,#000 16%,#000 82%,transparent)} .uq-track{display:flex;flex-direction:column;gap:10px;animation:uqrise 34s linear infinite; will-change:transform} .uq-wall:hover .uq-track{animation-play-state:paused} @keyframes uqrise{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 5px))}} .ugc-quotes{display:grid;gap:10px} .uq{margin:0;flex:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); border-radius:16px;padding:14px 16px;backdrop-filter:blur(8px)} .uq-stars{font-size:11px;color:#F5A623;letter-spacing:1.5px} .uq blockquote{margin:7px 0 11px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.9)} .uq figcaption{display:flex;align-items:center;gap:9px} .uq-av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16); display:grid;place-items:center;font-size:11px;font-weight:800;flex:none} .uq b{display:block;font-size:12.5px} .uq em{display:block;font-style:normal;font-size:11px;color:rgba(255,255,255,.55)} .uq-all{display:inline-flex;margin-top:2px;align-items:center;gap:7px;font-size:12.5px;font-weight:700; color:rgba(255,255,255,.8);padding:2px} .uq-all:hover{color:#fff} .uq-all svg{width:14px;height:14px;transition:transform .18s} .uq-all:hover svg{transform:translateX(3px)} /* cd-h2 had no rule of its own, so it took the bare h2 line-height and no bottom margin, and the -8px here pulled the line underneath up into it -- the two sat on top of each other. The heading owns its spacing now. */ .cd-h2{font-size:22px;letter-spacing:-.025em;margin-bottom:6px} .cd-sub{font-size:14px;color:var(--ink-2);margin:0 0 18px} @media(max-width:1000px){ .cdb-grid{grid-template-columns:1fr;gap:26px} .cdb-side{max-width:560px} } @media(max-width:760px){ .cd-banner{border-radius:28px} .cdb-grid{padding:24px 18px} .cdb-facts{grid-template-columns:1fr;gap:13px} /* Full width so the two sit above each other rather than squeezing onto one line at 150px each. */ .cdb-btn,.cdb-ghost{width:100%;padding:15px 22px} } /* the banner's right column when a course has no video or reviews yet */ /* Shown when a course has no video yet. On white now, like the panel it sits in -- it was drawn for the dark banner and went invisible. */ .ugc-blank{background:#fff;border:1px solid var(--line); border-radius:20px;padding:24px;box-shadow:0 14px 34px rgba(20,24,40,.07)} .ub-ic{width:42px;height:42px;border-radius:13px;background:#EAF1FE;color:var(--cta); display:grid;place-items:center;margin-bottom:14px} .ub-ic svg{width:19px;height:19px} .ugc-blank b{display:block;font-size:17px;letter-spacing:-.02em} .ugc-blank em{display:block;font-style:normal;font-size:13px;color:var(--faint); margin-top:3px} .ugc-blank ul{list-style:none;display:grid;gap:8px;margin-top:16px;padding-top:14px; border-top:1px solid var(--line)} .ugc-blank li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)} .ugc-blank svg{width:14px;height:14px;color:#16A34A;flex:none} /* Grid children default to min-width:auto, so a wide child (a long lesson row, a breadcrumb) pushes the column past the viewport instead of shrinking. */ .cd-grid > *{min-width:0} .cd-grid,.cpage{min-width:0} .cd-sec,.cd-hero{overflow-x:clip} /* --- catalogue filter bar --------------------------------------------- */ /* minmax(0,1fr), not the default auto track: an auto track is sized to its widest content, so the search row set the card's width and pushed the whole catalogue page sideways on a phone instead of shrinking to fit it. */ .cf{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px; margin-bottom:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px} .cf-top{display:flex;gap:10px;align-items:center} .cf-search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 14px; height:46px;border-radius:13px;background:var(--panel-2);border:1px solid transparent} .cf-search:focus-within{border-color:var(--brand);background:#fff} .cf-search svg{width:18px;height:18px;color:var(--muted);flex:none} .cf-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px; outline:none;color:inherit} .cf-sel{height:46px;border:1px solid var(--line);border-radius:13px;background-color:#fff; padding:0 34px 0 13px;font:inherit;font-size:14px;cursor:pointer;color:inherit; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b7b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:15px} .cf-sel:focus{outline:none;border-color:var(--brand)} .cf-sort{min-width:154px} .cf-go{height:46px;padding:0 22px;border-radius:13px} .cf-bottom{display:flex;gap:14px;align-items:center;flex-wrap:wrap; padding-top:12px;border-top:1px solid var(--line)} .cf-seg{display:inline-flex;background:var(--panel-2);border-radius:12px;padding:3px;gap:2px} .cf-seg button{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer; padding:8px 14px;border-radius:9px;background:none;font:inherit;font-size:13.5px; font-weight:600;color:var(--muted);white-space:nowrap} .cf-seg button:hover{color:var(--ink)} .cf-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,20,45,.12)} .cf-seg button b{font-size:11.5px;font-weight:700;color:var(--faint)} .cf-seg button.on b{color:var(--brand)} .cf-refine{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-left:auto} .cf-field{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)} .cf-field .cf-sel{height:38px;font-size:13.5px} .cf-clear{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600; color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:9px} .cf-clear:hover{background:var(--panel-2);color:var(--ink)} .cf-clear svg{width:13px;height:13px} @media(max-width:820px){ /* Every flex child here has to be allowed to shrink. Without min-width:0 a select keeps its 154px floor and the Search button its text width, and the row pushes the whole catalogue page sideways on a phone. */ .cf-top{flex-wrap:wrap;min-width:0} .cf-top > *{min-width:0} .cf-search{flex-basis:100%} .cf-sort{flex:1;min-width:0} .cf-go{flex:none;padding:0 16px} .cf-bottom{flex-direction:column;align-items:stretch} .cf-seg{overflow-x:auto;scrollbar-width:none} .cf-seg::-webkit-scrollbar{display:none} /* Same reason as the row above: anything that can be told to shrink has to be, or one wide select sets the width of the whole page. */ .cf-bottom > *{min-width:0} .cf-refine{margin-left:0;min-width:0;flex-wrap:wrap} .cf-refine > *{min-width:0} .cf-field{flex:1;min-width:0} .cf-field .cf-sel{flex:1;width:100%;min-width:0} .catrow.inbar{min-width:0} } /* A