/* ========================================================================== Ice Fishing Live — design system from handoff/README.md Type Barlow Condensed (display, uppercase) · IBM Plex Sans (body) · IBM Plex Mono (labels) Base #0b2135 · #123a5c · #1f6fa8 · #dff1fb / #f4fafd · #fff CTA linear-gradient(180deg,#ffb43a,#f47b12), text #2c1500, always "PLAY ICE FISHING" Frames desktop 1280 · mobile 390 Country accents arrive as --acc / --acc2 / --acc-deep and --ornament on . ========================================================================== */ :root{ --navy:#0b2135; --navy-2:#123a5c; --blue:#1f6fa8; --ice:#dff1fb; --ice-2:#f4fafd; --white:#fff; --ink:#0b2135; --ink-2:#3c5a75; --ink-3:#6d879e; --line:#d3e6f3; --line-2:#b6d6ea; --cta-a:#ffb43a; --cta-b:#f47b12; --cta-ink:#2c1500; --display:"Barlow Condensed",Arial Narrow,sans-serif; --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --wrap:1280px; --pad:clamp(16px,3.2vw,40px); --r:8px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ice-2)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}} body{margin:0;background:var(--ice-2);color:var(--ink);font-family:var(--body);font-size:16.5px; line-height:1.62;-webkit-font-smoothing:antialiased} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} a{color:var(--blue)} a:hover{color:var(--navy)} :focus-visible{outline:3px solid var(--cta-b);outline-offset:2px} img,svg{max-width:100%} /* ---------------- type ---------------- */ h1,h2,h3.disp{font-family:var(--display);text-transform:uppercase;font-weight:700; letter-spacing:.01em;line-height:1.02;margin:0 0 .4em;color:var(--navy);text-wrap:balance} h1{font-size:clamp(38px,5.6vw,68px)} h2{font-size:clamp(26px,3.4vw,42px)} h3{font-family:var(--body);font-weight:600;font-size:clamp(17px,1.6vw,20px);line-height:1.3; margin:0 0 .4em;color:var(--navy)} p{margin:0 0 1.05em} p:last-child{margin-bottom:0} .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink-2)} .eyebrow{margin:0 0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--acc)} strong{font-weight:600} /* ---------------- ornament strip ---------------- */ .orn{height:16px;background-image:var(--ornament);background-repeat:repeat-x; background-size:auto 16px} /* ---------------- sticky top bar ---------------- */ .bar{position:sticky;top:0;z-index:60;background:var(--navy);color:#cfe6f5} .bar__in{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);min-height:68px} .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto} /* 48px desktop / 38px mobile, as set in the handoff markup */ .brand__img{display:block;width:auto;height:48px} @media (max-width:1080px){.brand__img{height:38px}} .foot__img{display:block;width:100%;max-width:220px;height:auto;margin:0 0 14px} .nav{display:flex;gap:clamp(9px,1.3vw,22px);margin-left:auto} .nav a{color:#cfe6f5;font-family:var(--display);text-transform:uppercase;font-size:16px; letter-spacing:.04em;text-decoration:none;white-space:nowrap} .nav a:hover,.nav a[aria-current=page]{color:var(--acc2)} .burger{display:none;margin-left:auto;cursor:pointer;border-radius:var(--r); background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff; padding:8px 14px;font:600 14px/1 var(--body)} .bar .btn{flex:0 0 auto} @media (max-width:1080px){ .nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;gap:0; padding:4px var(--pad) 14px;background:var(--navy)} .nav.open{display:flex} .nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)} .burger{display:block} .bar .btn--go{display:none} } /* ---------------- buttons ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px; padding:0 26px;border-radius:var(--r);font-family:var(--display);text-transform:uppercase; font-weight:700;font-size:19px;letter-spacing:.03em;text-decoration:none;border:0;cursor:pointer; transition:filter .15s ease} .btn--go{background:linear-gradient(180deg,var(--cta-a),var(--cta-b));color:var(--cta-ink); box-shadow:0 2px 0 rgba(0,0,0,.18)} .btn--go:hover{filter:brightness(1.06);color:var(--cta-ink)} .btn--dark{background:var(--navy);color:#fff} .btn--dark:hover{background:var(--navy-2);color:#fff} .btn--line{background:transparent;border:2px solid var(--line-2);color:var(--navy)} .btn--line:hover{border-color:var(--navy);color:var(--navy)} .btn--sm{min-height:40px;padding:0 18px;font-size:16px} .btn--block{width:100%} /* ---------------- hero ---------------- */ .hero{position:relative;text-align:center;color:#fff; background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 45%,var(--blue) 100%)} .hero::after{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none; background-image:var(--ornament);background-size:auto 16px} .hero__in{position:relative;z-index:1;padding:clamp(34px,5vw,64px) var(--pad) clamp(30px,4vw,52px)} .hero h1{color:#fff;max-width:16ch;margin-inline:auto} .hero .eyebrow{color:var(--acc2)} .hero .sub{margin:14px auto 0;max-width:62ch;color:#cfe6f5;font-size:clamp(14px,1.2vw,17px)} .hero .btn{margin-top:26px} /* ---------------- stat bar ---------------- */ .statbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy-2);color:#fff} .statbar>div{padding:20px 22px;border-right:1px solid rgba(255,255,255,.12)} .statbar>div:last-child{border-right:0} .statbar b{display:block;font-family:var(--display);font-size:clamp(22px,2.5vw,34px); line-height:1.05;color:var(--acc2)} .statbar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:#9dc2dd} @media (max-width:720px){.statbar{grid-template-columns:repeat(2,1fr)} .statbar>div:nth-child(2n){border-right:0} .statbar>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}} /* ---------------- layout ---------------- */ .main{padding:clamp(26px,3.4vw,48px) 0 8px} .sec{padding:0 0 42px;scroll-margin-top:84px} .sec+.sec{border-top:1px solid var(--line);padding-top:38px} .crumb{background:var(--white);border-bottom:1px solid var(--line);font-size:12.5px; color:var(--ink-3);padding:10px 0} .crumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} .crumb li+li::before{content:"/";margin-right:6px;color:var(--line-2)} .crumb a{color:var(--ink-3)} /* ---------------- section label ---------------- */ .tag{display:inline-block;margin:0 0 16px;padding:7px 16px;border-radius:999px; background:var(--navy);color:#fff;font-family:var(--display);text-transform:uppercase; font-size:17px;letter-spacing:.03em;border:2px solid var(--acc)} /* ---------------- TOC ---------------- */ .toc{margin:0 0 30px;padding:20px 22px;background:var(--white);border:1px solid var(--line); border-left:4px solid var(--acc);border-radius:var(--r)} .toc h2{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:none;color:var(--ink-3)} .toc ol{margin:0;padding:0;list-style:none;counter-reset:t;columns:2;column-gap:30px;font-size:15px} .toc li{counter-increment:t;display:flex;gap:10px;padding:5px 0;break-inside:avoid} .toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:11px; color:var(--acc);padding-top:3px} .toc a{color:var(--ink-2);text-decoration:none} .toc a:hover{color:var(--blue);text-decoration:underline} @media (max-width:640px){.toc ol{columns:1}} /* ---------------- operators ---------------- */ .ops{display:grid;gap:12px} .op{display:grid;grid-template-columns:34px minmax(0,1.6fr) 1fr 1fr auto;gap:18px;align-items:center; padding:16px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r); border-left:4px solid var(--acc)} .op__n{font-family:var(--display);font-size:22px;color:var(--ink-3)} .op__id h3{margin:0;font-size:17px} .op__id p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)} .op__f span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3)} .op__f b{font-size:14.5px} @media (max-width:900px){.op{grid-template-columns:28px 1fr;row-gap:12px} .op .btn{grid-column:1/-1}} /* ---------------- tables ---------------- */ .tw{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r)} table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px} caption{padding:16px 18px 4px;text-align:left;font-size:12.5px;color:var(--ink-3)} th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--ice)} thead th{background:var(--ice-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3)} tbody th{font-weight:600} tbody tr:last-child th,tbody tr:last-child td{border-bottom:0} .n{font-family:var(--mono);font-size:14px;color:var(--blue)} .tnote{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)} /* ---------------- steps ---------------- */ .steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:16px} .steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:14px} .steps li::before{content:counter(s);grid-column:1;grid-row:1;width:30px;height:30px; border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-ink,#0b2135); font-family:var(--display);font-size:16px;font-weight:700} /* Both the heading and the body sit in column 2. Without this the paragraph wraps onto row 2 of column 1, which is 30px wide, and every word gets its own line. */ .steps h3{grid-column:2;margin:2px 0 4px;font-size:17px} .steps p{grid-column:2;margin:0;font-size:15px;color:var(--ink-2)} /* ---------------- FAQ ---------------- */ .faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r); margin-bottom:9px} .faq summary{cursor:pointer;list-style:none;position:relative;padding:15px 48px 15px 20px} .faq summary::-webkit-details-marker{display:none} .faq summary h3{display:inline;margin:0;font-size:16.5px} .faq summary::after{content:"+";position:absolute;right:20px;top:12px;font-family:var(--display); font-size:22px;color:var(--acc)} .faq details[open] summary::after{content:"\2013"} .faq details>div{padding:0 20px 18px;font-size:15.5px;color:var(--ink-2)} /* ---------------- misc ---------------- */ .clusters{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .cluster{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r); border-top:3px solid var(--acc)} .cluster h3{margin:0 0 5px} .cluster>p{margin:0 0 12px;font-size:14px;color:var(--ink-3)} .cluster ul{margin:0;padding:0;list-style:none} .cluster li{padding:9px 0;border-top:1px solid var(--ice)} .cluster li a{font-weight:600;font-size:15px;text-decoration:none} .cluster li span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3)} .rel{margin-top:30px;padding:18px 22px;background:var(--ice);border-radius:var(--r)} .rel h2{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em; text-transform:none;color:var(--ink-3)} .rel ul{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:15px} .note{display:block;margin:22px 0;padding:16px 20px;border-radius:var(--r);background:var(--white); border:1px solid var(--line);border-left:4px solid var(--blue);font-size:15px;color:var(--ink-2)} .note.warn{border-left-color:var(--cta-b);background:#fff8ee} .disc{margin:0 0 18px;padding:10px 16px;border-radius:var(--r);background:var(--ice); font-size:12.5px;color:var(--ink-3)} .byline{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 20px;font-size:12.5px;color:var(--ink-3)} .byline a{color:var(--ink-3)} .prose h3{margin:1.5em 0 .4em} .prose>:first-child{margin-top:0} .prose ul,.prose ol{padding-left:22px} .prose li{margin-bottom:8px} .wheel{margin:0;max-width:380px} .wheel svg{display:block;width:100%;height:auto} .wheel figcaption{margin-top:12px;font-size:13px;color:var(--ink-3)} .two{display:grid;grid-template-columns:1fr minmax(0,380px);gap:clamp(20px,3vw,40px);align-items:center} @media (max-width:820px){.two{grid-template-columns:1fr}} .skip{position:absolute;left:-9999px;background:var(--cta-b);color:#fff;padding:10px 16px;font-weight:700} .skip:focus{left:0;top:0;z-index:100} .vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)} /* ---------------- sticky mobile CTA ---------------- */ .dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--navy)} .dock .btn{width:100%} @media (max-width:820px){.dock{display:block}body{padding-bottom:80px}} /* ---------------- footer ---------------- */ .foot{margin-top:40px;background:var(--navy);color:#a9c8de} .foot__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px; padding:26px 0} .foot__cta h2{margin:0;color:#fff} .foot__cta p{margin:4px 0 0;font-size:13px;color:#8fb4cf} .foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding:34px 0 0; border-top:1px solid rgba(255,255,255,.12)} .foot h2.h{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:#7ba5c4} .foot ul{margin:0;padding:0;list-style:none;font-size:14px} .foot li{margin-bottom:8px} .foot a{color:#a9c8de;text-decoration:none} .foot a:hover{color:#fff;text-decoration:underline} .foot p{font-size:13px;line-height:1.6} .foot__l{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px;padding:18px 0 30px; border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#87abc7} /* sits on the navy footer, so it uses the light accent rather than --acc, which is itself dark in some country skins. */ .plus{display:grid;place-items:center;width:40px;height:40px;border-radius:50%; border:2px solid var(--acc2);color:var(--acc2);font-family:var(--display);font-size:14px;flex:0 0 auto} @media (max-width:900px){.foot__g{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot__g{grid-template-columns:1fr;gap:22px}}