/* Shaka marketing site — shared styles Type and colour follow the Shaka apps: Dosis ExtraBold for display, DM Sans for everything else. The Google Fonts stylesheet is linked from each page's . */ :root{ /* Ink, and its two working opacities (secondary text is ink at 80%, never a grey) */ --ink:#0A2C3B; --ink-soft:rgba(10,44,59,.8); --ink-faint:rgba(10,44,59,.7); /* Page ground: soft foam gradient */ --foam-1:#E2F1F2; --foam-2:#EEF5F4; --foam-3:#F2F6F6; --bg:var(--foam-3); /* Accents */ --sea:#1A6F93; --sea-deep:#155F80; --coral:#E07A52; --coral-deep:#A8502D; --kelp:#2F9E78; --kelp-deep:#237763; --gold:#F0B04A; --gold-deep:#9A6A14; --sky:#4F8FD6; --sky-deep:#2F6DB5; --navy:#08303F; /* Rank colours: Pip gold, Squid coral, Grom kelp, Charger sky */ --flag-green:#2F9E78; --flag-yellow:#F0B04A; --flag-red:#DE4B34; --flag-navy:#0F3548; /* 12 to 16% washes for tiles and chips */ --wash-sea:rgba(26,111,147,.12); --wash-coral:rgba(224,122,82,.14); --wash-kelp:rgba(47,158,120,.14); --wash-gold:rgba(240,176,74,.16); --wash-sky:rgba(79,143,214,.14); /* Type */ --display:'Dosis',system-ui,sans-serif; --sans:'DM Sans',system-ui,sans-serif; /* Brand lockup (header + footer). The phone pair is set in the 480px media query. */ --lockup-mark:72px; --lockup-word:52px; --lockup-gap:5px; --lockup-nudge:-2px; /* Shape */ --radius:20px; --shadow:0 10px 28px rgba(10,44,59,.07); --shadow-lg:0 24px 60px rgba(10,44,59,.14); /* The wave from the brand mark (one period: 66 wide, 10 high, crest at 34) as a mask tile. --wave-w is one period on the page; the tile's height follows, so the rise is 10/66 of it. */ --wave-w:176px; --wave-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 96'%3E%3Cpath d='M0 10c18 0 18-10 34-10s16 10 32 10V96H0z'/%3E%3C/svg%3E"); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} html,body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased;} body{font-family:var(--sans);font-weight:400;color:var(--ink);line-height:1.5;} body.page-top{background:linear-gradient(180deg,var(--foam-1) 0%,var(--foam-2) 45%,var(--foam-3) 100%);} a{color:var(--sea);text-decoration:none;} a:hover{color:var(--sea-deep);} img{max-width:100%;} :focus-visible{outline:3px solid rgba(26,111,147,.5);outline-offset:3px;border-radius:6px;} h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:0;margin:0;color:var(--ink);text-wrap:balance;} p{text-wrap:pretty;} strong,b{font-weight:600;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* Layout */ .wrap{max-width:1160px;margin:0 auto;} .narrow{max-width:760px;margin:0 auto;} .section-pad{padding-left:40px;padding-right:40px;} .section{margin-top:96px;scroll-margin-top:24px;} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .center{text-align:center;} .hero-band{position:relative;background:linear-gradient(180deg,var(--foam-2) 0%,var(--foam-1) 100%);padding-bottom:64px;} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:78px;} .hero-grid-even{grid-template-columns:1.1fr .9fr;} .parents-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;} /* Nav */ .nav-inner{padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .brand{display:inline-flex;align-items:center;gap:var(--lockup-gap);color:inherit;} .brand .mark{width:var(--lockup-mark);height:var(--lockup-mark);display:block;} .brand .wordmark{display:block;height:var(--lockup-word);width:auto;margin-top:var(--lockup-nudge);} .nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500;color:var(--ink-soft);} .nav-links a{color:inherit;} .nav-links a:hover{color:var(--ink);} .nav-links a[aria-current="page"]{color:var(--ink);} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:17px;padding:16px 28px;border-radius:16px;border:0;cursor:pointer;line-height:1.1;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;} .btn:hover{transform:translateY(-1px);} .btn-coral{background:var(--coral);color:#fff;box-shadow:0 10px 24px rgba(224,122,82,.3);} .btn-coral:hover{color:#fff;background:#D46F48;} .btn-white{background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.18);} .btn-white:hover{color:var(--ink);} .btn-sm{font-size:14px;padding:10px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(224,122,82,.28);} .link-arrow{color:var(--sea);font-weight:500;font-size:16px;} .link-arrow::after{content:" \2192";} /* Type */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--sea-deep);background:var(--wash-sea);padding:7px 16px;border-radius:999px;} .eyebrow img{width:20px;height:14px;object-fit:contain;} .hero-h1{font-size:62px;line-height:1.04;margin:20px 0 18px;} .page-h1{font-size:54px;line-height:1.06;margin:20px 0 18px;} .h2{font-size:41px;line-height:1.1;margin:18px 0 12px;} .h2-lg{font-size:39px;} .h2-md{font-size:35px;} .h2-sm{font-size:32px;} .h3{font-size:21px;line-height:1.25;margin-top:16px;} .lede{font-size:19px;line-height:1.6;color:var(--ink-soft);margin:0 0 30px;max-width:560px;} .sub{font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0;} .muted{color:var(--ink-soft);} .faint{color:var(--ink-faint);} .small{font-size:13.5px;} .label{font-size:12px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);} /* Cards */ .card{background:#fff;border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);} .card p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:8px 0 0;text-wrap:normal;} .card-lined{border:2px solid rgba(10,44,59,.06);} .icon-bubble{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;} .icon-bubble img{width:28px;height:28px;} .icon-bubble.round{border-radius:50%;} .tint-sea{background:var(--wash-sea);} .tint-coral{background:var(--wash-coral);} .tint-kelp{background:var(--wash-kelp);} .tint-gold{background:var(--wash-gold);} .tint-sky{background:var(--wash-sky);} .num{width:34px;height:34px;border-radius:50%;background:var(--wash-sea);color:var(--sea-deep);font-family:var(--display);font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;} /* Setup steps: the number beside the title, the app (or apps) the step happens in along the bottom */ .step{display:flex;flex-direction:column;} .step-head{display:flex;align-items:center;gap:12px;} .step-head .h3{margin:0;font-size:20px;} .step>p{flex:1;margin-top:12px;} .step-apps{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(10,44,59,.07);} .step-app{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;font-weight:800;color:var(--ink);} .step-app img{width:44px;height:44px;display:block;} .step-hand-card{position:relative;overflow:hidden;padding-bottom:172px;} .step-hand{position:absolute;right:26px;bottom:-44px;width:108px;height:auto;display:block;transform:rotate(-8deg);filter:drop-shadow(0 8px 14px rgba(21,95,128,.18));} .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.9px;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap;color:var(--ink);} .pill-gold{color:var(--gold-deep);background:var(--wash-gold);} .pill-sky{color:var(--sky-deep);background:var(--wash-sky);} .pill-kelp{color:var(--kelp-deep);background:var(--wash-kelp);} .pill-coral{color:var(--coral-deep);background:var(--wash-coral);} .pill-sea{color:var(--sea-deep);background:var(--wash-sea);} .rank-name{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.1;margin-top:14px;color:var(--ink);} .quote{font-size:17px;font-weight:500;line-height:1.35;margin-top:10px;} /* Ranks: icon bubbles, feature rows, and the two layers under every rank */ .icon-bubble.rank-icon{width:64px;height:64px;border-radius:50%;} .icon-bubble.rank-icon img{width:42px;height:42px;} .rank-card{padding:26px 24px 22px;display:flex;flex-direction:column;position:relative;} .rank-card>.pill{position:absolute;top:22px;right:22px;} .rank-meta{display:flex;align-items:baseline;gap:8px;margin-top:16px;flex-wrap:wrap;} .rank-meta .rank-name{font-size:26px;margin:0;} .rank-card .quote{font-size:16px;} .rank-card>p{font-size:13.5px;} .feat{margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(10,44,59,.07);display:flex;flex-direction:column;gap:10px;} .feat>div{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:start;} .feat dt{font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);padding-top:3px;} .feat dd{margin:0;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--ink);} .rank-grid{gap:20px;align-items:stretch;} /* The same checklist on every age level card: a tick for what the level includes, an empty box for what it doesn't */ .level-checks{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(10,44,59,.07);display:flex;flex-direction:column;gap:9px;} .level-checks li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;line-height:1.3;color:var(--ink);} .level-checks li.off{color:var(--ink-faint);} .level-checks .check{width:18px;height:18px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--kelp);} .level-checks .check svg{width:11px;height:11px;} .level-checks li.off .check{background:transparent;border:2px solid rgba(10,44,59,.14);} /* Level by level (the age levels page): one panel per level on real screens, handwritten notes beside them. The tabs scroll the track to a panel; on a phone the panels swipe. */ .level-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 22px;} .level-tab{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 9px;border-radius:999px;background:#fff;border:2px solid rgba(10,44,59,.08);color:var(--ink);font-weight:600;font-size:15px;box-shadow:var(--shadow);} .level-tab:hover{color:var(--ink);border-color:rgba(26,111,147,.35);} .level-tab img{width:28px;height:28px;} .level-tab span{font-weight:500;font-size:12.5px;color:var(--ink-faint);margin-left:2px;} .level-tab[aria-current="true"]{border-color:var(--sea);background:#E6F1F5;color:var(--sea-deep);} .level-stage{position:relative;} .level-nav{position:absolute;top:50%;z-index:2;width:50px;height:50px;margin-top:-37px;border-radius:50%;border:0;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,opacity .12s ease;} .level-nav svg{width:22px;height:22px;} .level-nav:hover{transform:translateY(-1px);} .level-nav:disabled{opacity:.35;cursor:default;transform:none;} .level-nav-prev{left:-25px;} .level-nav-next{right:-25px;} .level-track{position:relative;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 0 24px;} .level-track::-webkit-scrollbar{display:none;} .level-panel{flex:0 0 100%;scroll-snap-align:start;border-radius:28px;box-shadow:0 24px 60px rgba(10,44,59,.14);position:relative;overflow:hidden;aspect-ratio:1240/960;} .level-gold{background:linear-gradient(160deg,#FCF3DC 0%,#F7E6BD 60%,#F2D99F 100%);--name:#B3841D;--note:#5C3F07;--arrow:#8F6512;--well:rgba(217,165,46,.18);} .level-coral{background:linear-gradient(160deg,#FDEBE3 0%,#F8D8C8 60%,#F3C5AE 100%);--name:#C25F3A;--note:#6B2C13;--arrow:#A94B28;--well:rgba(224,122,82,.16);} .level-kelp{background:linear-gradient(160deg,#E3F4EC 0%,#CDEADB 60%,#B9E0CB 100%);--name:#217A5B;--note:#15452F;--arrow:#1D6A4F;--well:rgba(47,158,120,.16);} .level-sky{background:linear-gradient(160deg,#E6EFFB 0%,#D3E2F6 60%,#C2D6F0 100%);--name:#3572B8;--note:#1C3F6E;--arrow:#2B5F9E;--well:rgba(79,143,214,.16);} /* Each board is the design's 1240x960 artboard, scaled to the panel (site.js sets --s) */ .level-board{position:relative;width:1240px;height:960px;transform-origin:0 0;transform:scale(var(--s,1));} .lb-head{position:absolute;top:36px;left:40px;display:flex;align-items:center;gap:14px;} .lb-head .well{width:58px;height:58px;border-radius:50%;background:var(--well);display:flex;align-items:center;justify-content:center;} .lb-head .well img{width:38px;height:38px;} .lb-name{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;color:var(--name);} .lb-sub{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--name);opacity:.75;margin-top:6px;} .lb-phone{position:absolute;margin:0;overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(10,44,59,.26),0 0 0 1px rgba(10,44,59,.14);} .lb-phone>img,.lb-screen>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;} /* A screen wrapper clips a highlight ring to the phone even on a phone, where the frame itself stays overflow:visible for its markers */ .lb-screen{display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit;} .lb-hero{left:330px;top:96px;width:342px;height:744px;border-radius:40px;} .lb-inset{left:700px;top:318px;width:250px;height:544px;border-radius:30px;box-shadow:0 26px 50px rgba(10,44,59,.32),0 0 0 1px rgba(10,44,59,.16);} .lb-tag{position:absolute;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.72);color:var(--ink);white-space:nowrap;} .lb-tag-hero{left:330px;top:852px;} .lb-tag-inset{left:700px;top:874px;} .lb-note{position:absolute;left:var(--l);top:var(--t);width:var(--w);margin:0;font-family:'Caveat',cursive;font-weight:700;font-size:var(--fs);line-height:1.12;color:var(--note);transform:rotate(var(--r));text-wrap:pretty;} .lb-ring{position:absolute;left:3.6%;top:67.8%;width:93.2%;height:17.6%;border-radius:14px;box-shadow:0 0 0 3px #F2B84B,0 0 0 9999px rgba(8,36,52,.5);pointer-events:none;} .lb-mark{display:none;} /* The design's hand-drawn arrows, drawn on when the panel comes into view */ .lb-arrows{position:absolute;left:0;top:0;width:1240px;height:960px;pointer-events:none;} .lb-arrows path{fill:none;stroke:var(--arrow);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;} .js .lb-arrows path{stroke-dasharray:260;stroke-dashoffset:260;} .js .level-panel.is-in .lb-arrows path{animation:draw-on .8s ease-out forwards;} .js .level-panel.is-in .lb-arrows path:nth-child(2){animation:draw-on .3s ease-out forwards .6s;} .js .level-panel.is-in .lb-arrows path:nth-child(3){animation-delay:.4s;} .js .level-panel.is-in .lb-arrows path:nth-child(4){animation:draw-on .3s ease-out forwards 1s;} .js .level-panel.is-in .lb-arrows path:nth-child(5){animation-delay:.8s;} .js .level-panel.is-in .lb-arrows path:nth-child(6){animation:draw-on .3s ease-out forwards 1.4s;} @keyframes draw-on{to{stroke-dashoffset:0;}} .level-tag{font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.72);color:var(--ink);} .shot-ring{position:absolute;left:3.6%;top:67.8%;width:93.2%;height:17.6%;border-radius:14px;box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(8,36,52,.5);pointer-events:none;} /* Wave flags, drawn the way the timeline draws them */ /* The lifeguard flag, drawn like assets/icons/flag-app.svg (the 48 grid, ink outline 2.6, flat cloth), coloured by outcome */ .wflag{width:22px;height:22px;flex-shrink:0;display:inline-block;vertical-align:-5px;} .wflag path{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} .wflag .pole{fill:none;} .wflag-green .cloth{fill:var(--flag-green);} .wflag-yellow .cloth{fill:var(--flag-yellow);} .wflag-red .cloth{fill:var(--flag-red);} .wflag-navy .cloth{fill:var(--flag-navy);} .wave-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid rgba(10,44,59,.07);} .wave-row:last-child{border-bottom:0;} .wave-row .site{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:18px;color:#fff;} .wave-row .site.held{background:var(--sea);font-size:19px;} .wave-row b{display:block;font-size:14.5px;font-weight:600;} .wave-row span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:1px;} .wave-row span.warned{color:var(--gold-deep);} .wave-row span.covered{color:var(--coral-deep);} .wave-row span.heldnote{color:var(--sea-deep);} .wave-row .wflag{width:24px;height:24px;} /* What Wave Watch scans for: seven categories, each with a pirate-pack icon in a round tinted bubble */ .scan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;} .scan{padding:22px 20px 24px;display:flex;flex-direction:column;align-items:flex-start;} .scan .icon-bubble{width:68px;height:68px;margin-bottom:14px;flex-shrink:0;} .scan .icon-bubble img{width:42px;height:42px;} .scan .h3{font-size:18px;} .scan p{font-size:13.5px;line-height:1.5;margin-top:6px;} .outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .outcome{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);} .outcome .head{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:19px;} .outcome .head .wflag{width:28px;height:28px;margin-left:-4px;} .outcome p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:8px 0 0;} .outcome .who{display:inline-block;margin-top:10px;font-size:11px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint);} .watch-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;} /* The same page at each age level: one example per row, one flag per level */ .ww-title{font-size:12px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px 4px;} .ww-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;} .ww-table th,.ww-table td{text-align:left;vertical-align:middle;padding:13px 10px;border-bottom:1px solid rgba(10,44,59,.07);} .ww-table thead th{padding:14px 10px 10px;vertical-align:top;} .ww-age{display:block;font-size:11px;font-weight:500;color:var(--ink-faint);margin-top:5px;white-space:nowrap;} .ww-table tr.has-span th,.ww-table tr.has-span td{border-bottom:0;padding-bottom:4px;} .ww-table tr.ww-span td{padding:0 20px 13px;font-size:12.5px;font-weight:500;color:var(--coral-deep);} .ww-foot{font-size:12.5px;color:var(--ink-faint);margin:10px 0 0 4px;} .ww-table thead th:first-child,.ww-table tbody th{padding-left:20px;} .ww-table tbody tr:last-child th,.ww-table tbody tr:last-child td{border-bottom:0;} .ww-table tbody th{font-weight:400;width:30%;} .ww-table tbody th b{display:block;font-weight:600;font-size:14px;line-height:1.35;} .ww-table tbody th span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;line-height:1.4;} .ww-cell{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:12.5px;line-height:1.3;color:var(--ink);white-space:nowrap;} .ww-cell .wflag{width:20px;height:20px;margin:0 0 0 -2px;} .ww-cell .wflag path{stroke-width:3.2;} .ww-note{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:18px 0 0;} /* Hero visual */ .hero-visual{display:flex;justify-content:center;position:relative;padding-bottom:56px;} .hero-card{width:340px;max-width:100%;background:#fff;border-radius:24px;padding:30px 28px 26px;box-shadow:var(--shadow-lg);text-align:center;position:relative;z-index:2;} .hero-card .app-icon-lg{width:120px;height:120px;display:block;margin:0 auto;filter:drop-shadow(0 16px 30px rgba(21,95,128,.3));} .hero-card .name{font-family:var(--display);font-weight:800;font-size:24px;margin-top:16px;} .tide-teaser{margin-top:18px;background:linear-gradient(135deg,var(--sea),var(--sea-deep));border-radius:16px;padding:15px 17px;color:#fff;text-align:left;} .tide-teaser .label{color:rgba(255,255,255,.85);font-size:11px;letter-spacing:1px;} .tide-teaser .line{font-size:14px;font-weight:500;margin-top:6px;line-height:1.45;} .lifeguard-badge{position:absolute;right:8px;bottom:0;z-index:3;background:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 16px 40px rgba(10,44,59,.16);display:flex;align-items:center;gap:12px;text-align:left;} .lifeguard-badge img{width:44px;height:44px;flex-shrink:0;display:block;} .lifeguard-badge b{display:block;font-family:var(--display);font-weight:800;font-size:17px;} .lifeguard-badge span{display:block;font-size:12px;color:var(--ink-soft);} /* Mock cards (designed mockups, not screenshots: the Tide Report and Wave Watch teasers) */ .mock{background:#fff;border-radius:var(--radius);padding:26px;color:var(--ink);box-shadow:0 18px 44px rgba(8,48,63,.25);} .mock-head{display:flex;align-items:center;justify-content:space-between;} .mock-title{font-family:var(--display);font-weight:800;font-size:19px;} .mock-meta{font-size:12px;font-weight:500;color:var(--ink-faint);} .mock-rows{display:flex;flex-direction:column;gap:12px;margin-top:18px;} .mock-row{display:flex;align-items:flex-start;gap:12px;border-radius:14px;padding:13px 15px;} .mock-row img{width:22px;height:22px;flex-shrink:0;margin-top:1px;} .mock-row b{display:block;font-size:14px;font-weight:600;} .mock-row span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.45;margin-top:2px;} /* Real app screens (captures) */ .shot{position:relative;width:100%;max-width:300px;aspect-ratio:1206/2622;border-radius:12%/5.52%;overflow:hidden;background:#DCE8EA;box-shadow:0 22px 50px rgba(10,44,59,.16),0 0 0 1px rgba(10,44,59,.06);} .shot>img,.shot>video{display:block;width:100%;height:100%;object-fit:cover;} .shot-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;} .shot-figure figcaption{font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:320px;} .shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;justify-items:center;align-items:start;} .split-shot{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:44px;align-items:center;} .split-shot.reverse{grid-template-columns:minmax(0,1fr) minmax(230px,290px);} .split-shot .grid-4{grid-template-columns:repeat(2,1fr);} .split-shot .grid-3{grid-template-columns:1fr;} .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;padding:6px 12px;border-radius:999px;} .tag-real{color:var(--kelp-deep);background:var(--wash-kelp);} .tag-real::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kelp);} .tag-step{color:var(--sea-deep);background:var(--wash-sea);} .note{font-size:14px;line-height:1.55;color:var(--ink-faint);max-width:640px;margin:22px auto 0;text-align:center;} [data-parallax]{will-change:transform;} /* Emoji accents */ .em{font-size:16px;line-height:1;} .em-lg{font-size:44px;line-height:1;} /* Feature marks: the Wave Watch disc (the app icon's waves, no board, no tile) and the long-arm hand */ .ww-disc{display:block;width:76px;height:76px;border-radius:50%;box-shadow:0 10px 24px rgba(10,44,59,.12),0 0 0 1px rgba(10,44,59,.05);} .ww-disc-center{margin:0 auto 16px;} .ww-brand{display:flex;align-items:center;gap:16px;margin:0 0 22px;} .ww-brand-name{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;color:var(--ink);} /* A heading with the long-arm hand poking up from behind it: the heading box paints the section's own background over the wrist */ /* A heading with the long-arm hand rising from behind it: the hand sits in a window that ends on the heading's cap line (site.js measures the line), so the arm is cut where the letters begin, the way it is cut by the card edge on the home page */ .hand-heading{position:relative;display:inline-block;max-width:100%;padding-top:100px;} .hand-heading>.h2{position:relative;z-index:1;margin-top:0;} .hand-peek{position:absolute;left:0;right:0;top:0;height:100px;overflow:hidden;z-index:0;} .hand-peek img{position:absolute;left:50%;bottom:-12px;width:84px;height:auto;margin-left:-112px;transform:rotate(-18deg);transform-origin:50% 100%;} #promise .app-tag{font-size:16px;padding:8px 20px 8px 8px;gap:12px;} #promise .app-tag img{width:44px;height:44px;} /* App tags: which app a screen comes from */ .app-tag{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:6px 16px 6px 6px;box-shadow:var(--shadow);font-size:14px;line-height:1.2;} .app-tag img{width:30px;height:30px;display:block;} .app-tag b{font-weight:600;color:var(--ink);} .app-tag span{color:var(--ink-soft);} /* Wave dividers: the brand mark's wave tiled across the full width. The divider colour is painted on the pseudo-element and the wave tile masks it, drifting exactly one period per cycle so the loop is seamless. */ .crest{position:absolute;left:0;right:0;height:28px;overflow:hidden;pointer-events:none;--crest-color:var(--foam-1);--crest-period:14s;} .crest::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--wave-w));right:calc(-1 * var(--wave-w));background:var(--crest-color);-webkit-mask:var(--wave-tile) 0 0/var(--wave-w) auto repeat-x;mask:var(--wave-tile) 0 0/var(--wave-w) auto repeat-x;animation:crest-drift var(--crest-period) linear infinite;} .crest-top{top:-28px;} .crest-bottom{bottom:-28px;transform:scaleY(-1);} .crest-hero{bottom:0;height:28px;--crest-color:var(--foam-3);--crest-period:16s;} .crest-hero-back{bottom:0;height:46px;--crest-color:#EAF4F4;--crest-period:27s;} .tint-band{position:relative;margin-top:124px;padding:64px 0 72px;background:var(--foam-1);} .tint-band .crest-back{top:-44px;height:44px;--crest-color:#EAF3F4;--crest-period:24s;} .tint-band .crest-top{--crest-period:15s;} .tint-band .crest-bottom{--crest-period:19s;} .tint-band + .section{margin-top:124px;} /* The ocean at the foot of every page: the sun, a kid and a lifeguard sitting on their boards mid-conversation (the app's onboarding scene), three swells drawn with the brand wave, and the deep water that holds the waitlist. */ .ocean{position:relative;margin-top:96px;overflow:hidden;background:linear-gradient(180deg,var(--foam-3) 0%,#E6F1F3 55%,#D3E7EA 100%);} .ocean-sky{position:relative;height:330px;} .ocean-heading{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:56px 22px 0;text-align:center;font-size:32px;line-height:1.15;} .sun{position:absolute;left:50%;margin-left:-60px;top:140px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(240,176,74,.55) 0%,rgba(240,176,74,.2) 45%,rgba(240,176,74,0) 70%);animation:breathe 6s ease-in-out infinite;} .chat-scene{position:absolute;left:50%;bottom:0;width:min(600px,100%);height:100%;transform:translateX(-50%);} .sitter{position:absolute;bottom:-19px;display:block;animation:bob 3.6s ease-in-out infinite;filter:drop-shadow(0 12px 16px rgba(10,44,59,.16));} .sitter-kid{left:6%;width:176px;height:176px;} .sitter-guard{right:4%;width:212px;height:212px;bottom:-29px;animation-delay:.7s;} .bubble{position:absolute;display:flex;gap:6px;padding:13px 16px;border-radius:18px;box-shadow:0 10px 24px rgba(8,48,63,.18);opacity:0;animation:bubble-pop 7s ease-in-out infinite;} .bubble::after{content:"";position:absolute;bottom:-5px;width:13px;height:13px;border-radius:3px;background:inherit;transform:rotate(45deg);} .bubble i{width:7px;height:7px;border-radius:50%;animation:dot-pulse 1.3s ease-in-out infinite;} .bubble i:nth-child(2){animation-delay:.18s;} .bubble i:nth-child(3){animation-delay:.36s;} .bubble-kid{left:calc(6% + 36px);bottom:181px;background:#fff;} .bubble-kid::after{left:14px;} .bubble-kid i{background:var(--sea);} .bubble-guard{right:calc(4% + 48px);bottom:209px;background:var(--coral);animation-delay:3.5s;} .bubble-guard::after{right:14px;} .bubble-guard i{background:rgba(255,255,255,.92);} .gulls{position:absolute;top:176px;left:0;animation:gull-glide 18s linear infinite;} .gull{position:absolute;display:flex;} .gull i{display:block;width:14px;height:4px;background:rgba(10,44,59,.38);border-radius:4px 4px 0 4px;transform-origin:100% 50%;animation:wing-l .7s ease-in-out infinite;} .gull i+i{border-radius:4px 4px 4px 0;margin-left:-2px;transform-origin:0 50%;animation-name:wing-r;} .gull-2{top:18px;left:38px;transform:scale(.85);} .gull-2 i{animation-duration:.62s;animation-delay:.25s;} @keyframes bubble-pop{0%,4%{opacity:0;transform:translateY(8px) scale(.7);}10%,42%{opacity:1;transform:translateY(0) scale(1);}48%,100%{opacity:0;transform:translateY(-4px) scale(.85);}} @keyframes dot-pulse{0%,100%{opacity:.25;}50%{opacity:1;}} @keyframes gull-glide{from{transform:translateX(-90px);}to{transform:translateX(100vw);}} @keyframes wing-l{0%,100%{transform:rotate(-18deg);}50%{transform:rotate(16deg);}} @keyframes wing-r{0%,100%{transform:rotate(18deg);}50%{transform:rotate(-16deg);}} .swells{position:relative;height:120px;} .swell{position:absolute;left:calc(-1 * var(--wave-w));right:calc(-1 * var(--wave-w));bottom:0;background:var(--c);-webkit-mask:var(--wave-tile) 0 0/var(--wave-w) auto repeat-x;mask:var(--wave-tile) 0 0/var(--wave-w) auto repeat-x;animation:crest-drift var(--p) linear infinite;} .swell.s1{--c:#BFDDE3;--p:23s;height:120px;} .swell.s2{--c:#8CC0CC;--p:17s;height:86px;} .swell.s3{--c:#4A98B0;--p:12s;height:54px;} .ocean-deep{position:relative;background:linear-gradient(180deg,var(--sea) 0%,var(--sea-deep) 40%,var(--navy) 100%);color:#fff;padding:52px 0 76px;} .ocean-deep .crest-top{--crest-color:var(--sea);--crest-period:9s;} .ocean-deep h2{color:#fff;} .ocean-deep p{color:rgba(255,255,255,.9);} @keyframes crest-drift{to{transform:translateX(var(--wave-w));}} @keyframes breathe{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.08);opacity:1;}} /* Checklist */ .checks{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;} .checks li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:500;line-height:1.45;} .checks .tick{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;} .checks.dark .tick{background:var(--wash-sea);} .checks .tick svg{width:11px;height:11px;} .checks.compact{gap:8px;} .checks.compact li{font-size:12.5px;} .checks.compact .tick{width:16px;height:16px;} .checks.compact .tick svg{width:9px;height:9px;} /* Bands */ .band{border-radius:24px;padding:56px 52px;color:#fff;} .band-sea{background:linear-gradient(135deg,var(--sea),var(--sea-deep));box-shadow:0 20px 50px rgba(21,95,128,.28);} .band-navy{background:var(--navy);box-shadow:0 20px 50px rgba(8,48,63,.3);} .band h2{color:#fff;} .band p{color:rgba(255,255,255,.9);} .band .eyebrow{color:#fff;background:rgba(255,255,255,.16);} .band .link-arrow{color:#fff;} .band-inline{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:44px 48px;} /* Waitlist form */ .waitlist{margin:0;max-width:520px;} .waitlist-row{display:flex;gap:10px;background:#fff;padding:6px;border-radius:18px;box-shadow:0 14px 34px rgba(10,44,59,.12);border:2px solid transparent;transition:border-color .15s ease;} .waitlist-row:focus-within{border-color:rgba(26,111,147,.45);} .waitlist input[type="email"]{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;padding:12px 14px;color:var(--ink);outline:none;} .waitlist input[type="email"]::placeholder{color:var(--ink-faint);} .waitlist .btn{padding:13px 22px;font-size:16px;border-radius:14px;} .waitlist .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;} .waitlist-note{font-size:13.5px;color:var(--ink-faint);margin:14px 0 0;display:flex;align-items:center;gap:10px;line-height:1.45;} .waitlist-note .dot{width:8px;height:8px;border-radius:50%;background:var(--kelp);flex-shrink:0;} .waitlist-msg{font-size:14.5px;font-weight:500;margin:12px 0 0;min-height:1.2em;color:var(--kelp-deep);} .waitlist-msg.error{color:var(--coral-deep);} .waitlist.is-done .waitlist-row{opacity:.55;pointer-events:none;} .waitlist.on-dark .waitlist-note{color:rgba(255,255,255,.78);} .waitlist.on-dark .waitlist-msg{color:#9FE3C6;} .waitlist.on-dark .waitlist-msg.error{color:#FFB59A;} .waitlist.centered{margin:0 auto;} .waitlist.centered .waitlist-note{justify-content:center;} .interests{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0;list-style:none;} .interests label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;background:#fff;border:2px solid rgba(10,44,59,.08);border-radius:999px;padding:8px 14px 8px 10px;cursor:pointer;color:var(--ink);} .interests label:has(input:checked){border-color:var(--sea);background:#E6F1F5;} .interests input{accent-color:var(--sea);margin:0;} /* Long-form content on SEO pages */ .prose{font-size:17px;line-height:1.7;color:var(--ink);} .prose h2{font-size:32px;line-height:1.15;margin:48px 0 12px;} .prose h3{font-size:23px;margin:30px 0 8px;} .prose p{margin:0 0 18px;} .prose ul{padding-left:22px;margin:0 0 18px;} .prose li{margin-bottom:8px;} .callout{background:#fff;border-left:5px solid var(--coral);border-radius:16px;padding:18px 22px;margin:24px 0;box-shadow:var(--shadow);font-size:16px;} /* Legal pages (/privacy, /terms), generated from legal/*.md by scripts/build-legal.js */ .legal h2,.legal h3{scroll-margin-top:24px;} .legal a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;overflow-wrap:anywhere;} .legal ol,.legal ul{padding-left:22px;margin:0 0 18px;} .legal-dates{font-size:15px;} .legal-summary{border-left-color:var(--sea);padding:22px 26px;} .legal-summary p{margin:0 0 12px;} .legal-summary ul{margin:0;} .legal-summary li:last-child{margin-bottom:0;} .legal-toc{background:#fff;border-radius:16px;padding:20px 26px;margin:0 0 36px;box-shadow:var(--shadow);font-size:15px;} .legal-toc h2.label{font-family:var(--sans);font-size:12px;margin:0 0 10px;} .legal-toc ol{list-style:none;padding:0;margin:0;columns:2;column-gap:28px;} .legal-toc li{margin:0 0 6px;break-inside:avoid;} .legal-toc a{text-decoration:none;} .legal-caps{font-size:14.5px;line-height:1.65;letter-spacing:.1px;} .table-scroll{overflow-x:auto;margin:0 0 22px;border-radius:14px;box-shadow:var(--shadow);background:#fff;} .legal table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55;} .legal th,.legal td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid rgba(10,44,59,.08);} .legal th{font-weight:600;background:var(--wash-sea);color:var(--ink);white-space:nowrap;} .legal tbody tr:last-child td{border-bottom:0;} .legal td:first-child{min-width:150px;} .legal-see-also{margin-top:40px;padding-top:20px;border-top:1px solid rgba(10,44,59,.08);color:var(--ink-soft);} /* Phones: each table row becomes a card, every cell labelled with its column */ @media (max-width:720px){ .legal-toc ol{columns:1;} .table-scroll{background:none;box-shadow:none;border-radius:0;overflow:visible;} .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%;} .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} .legal tr{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:6px 16px;margin:0 0 12px;} .legal td,.legal td:first-child{min-width:0;padding:8px 0;} .legal td:first-child{font-size:15.5px;} .legal td:empty{display:none;} .legal td:not(:first-child)::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;} .legal tbody tr:last-child td{border-bottom:1px solid rgba(10,44,59,.08);} .legal tr td:last-child,.legal tbody tr:last-child td:last-child{border-bottom:0;} } /* FAQ */ .faq{display:flex;flex-direction:column;gap:12px;} .faq details{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:0 24px;} .faq summary{cursor:pointer;list-style:none;font-family:var(--sans);font-weight:500;font-size:17px;padding:20px 32px 20px 0;position:relative;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";position:absolute;right:0;top:16px;font-size:24px;color:var(--sea);font-weight:400;} .faq details[open] summary::after{content:"\2212";} .faq details p{margin:0 0 20px;color:var(--ink-soft);font-size:15.5px;line-height:1.6;} /* Footer */ .footer{margin-top:96px;padding-top:40px;padding-bottom:56px;border-top:1px solid rgba(10,44,59,.08);} .footer-grid{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr;gap:32px;} /* Footer brand: the lockup on the left, the blurb and badge beside it */ .footer-brand{display:flex;align-items:center;gap:20px;} .footer-brand .brand{flex-shrink:0;} .footer-words{min-width:0;} .footer-brand p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0;max-width:300px;} .footer-col h4{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;} .footer-col a{display:block;font-size:14px;font-weight:500;color:var(--ink-soft);margin-bottom:9px;} .footer-col a:hover{color:var(--ink);} .footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid rgba(10,44,59,.08);font-size:12.5px;color:var(--ink-faint);} .badge-family{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--kelp-deep);background:var(--wash-kelp);padding:6px 12px;border-radius:999px;margin-top:12px;white-space:nowrap;} /* Motion */ @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .bob{animation:bob 4.5s ease-in-out infinite;} /* Reveal: below the fold, sections, cards and figures rise in as they arrive, siblings a beat apart (site.js adds the classes) */ .js .reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;} .js .reveal.is-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.bob,.crest::before,.swell,.sun,.sitter,.gulls,.gull i{animation:none;}.bubble{animation:none;opacity:1;}html,.level-track{scroll-behavior:auto;}.btn:hover{transform:none;}.js .reveal{opacity:1;transform:none;transition:none;}.js .lb-arrows path{stroke-dasharray:none;animation:none;}} /* Responsive */ @media (max-width:900px){ .scan-grid{grid-template-columns:repeat(2,1fr);} .hero-grid,.hero-grid-even{grid-template-columns:1fr;gap:36px;} .parents-grid{grid-template-columns:1fr;gap:32px;} .grid-4{grid-template-columns:repeat(2,1fr);} .footer-grid{grid-template-columns:repeat(3,1fr);} .footer-brand{grid-column:1 / -1;} .split-shot,.split-shot.reverse{grid-template-columns:1fr;gap:36px;} .split-shot>*{width:100%;} .watch-grid{grid-template-columns:1fr;gap:32px;} } @media (max-width:720px){ .scan-grid{gap:12px;margin-top:28px;} .scan{padding:18px 16px 20px;} .scan .icon-bubble{width:56px;height:56px;margin-bottom:10px;} .scan .icon-bubble img{width:34px;height:34px;} .scan .h3{font-size:16px;} .grid-2,.grid-3,.shots{grid-template-columns:1fr;} .section-pad{padding-left:22px;padding-right:22px;} .section{margin-top:64px;} .nav-inner{padding-top:20px;} .nav-links{gap:14px;font-size:13.5px;width:100%;justify-content:space-between;} .nav-links .btn{display:none;} .hero-h1{font-size:45px;} .page-h1{font-size:41px;} .h2{font-size:32px;} .h2-lg{font-size:33px;} .h2-md{font-size:31px;} .h2-sm{font-size:28px;} .band{padding:34px 26px;} .band-inline{padding:34px 26px;} .waitlist-row{flex-direction:column;gap:6px;} .waitlist .btn{width:100%;} .footer{margin-top:64px;} .prose h2{font-size:27px;} .tint-band{margin-top:92px;padding:48px 0 56px;} .tint-band + .section{margin-top:92px;} .ocean{margin-top:72px;} .ocean-sky{height:290px;} .ocean-heading{font-size:24px;padding-top:36px;} .gulls{top:150px;} .sun{width:90px;height:90px;margin-left:-45px;top:150px;} .sitter-kid{width:124px;height:124px;left:4%;bottom:-9px;} .sitter-guard{width:150px;height:150px;right:2%;bottom:-17px;} .bubble{padding:10px 12px;} .bubble-kid{left:calc(4% + 24px);bottom:135px;} .bubble-guard{right:calc(2% + 32px);bottom:151px;} /* On a phone the board is a column: numbered markers on the screens, the notes numbered to match, no arrows */ .level-track{align-items:flex-start;overflow-y:hidden;transition:height .35s ease;} .level-panel{aspect-ratio:auto;padding:22px 18px 30px;} .level-board{width:auto;height:auto;transform:none;display:flex;flex-direction:column;gap:18px;} .lb-head{position:static;} .lb-name{font-size:28px;} .lb-sub{letter-spacing:.9px;} .lb-phone{position:relative;left:auto;top:auto;height:auto;overflow:visible;margin:6px auto 0;} .lb-hero{width:min(280px,78%);aspect-ratio:342/744;} .lb-inset{width:min(230px,64%);aspect-ratio:250/544;margin-top:14px;} .lb-tag{position:static;align-self:center;margin-top:-8px;} .lb-note{position:relative;left:auto;top:auto;width:auto;transform:none;font-size:24px;padding-left:36px;} .lb-note:not([data-n]){padding-left:0;} .lb-note[data-n]::before{content:attr(data-n);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--arrow);color:#fff;font:700 13px/26px var(--sans);text-align:center;} .lb-arrows{display:none;} .lb-mark{display:block;position:absolute;left:var(--mx);top:var(--my);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--arrow);color:#fff;font:700 13px/26px var(--sans);text-align:center;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 10px rgba(10,44,59,.3);} .level-stage{padding-bottom:56px;} .level-nav{top:auto;bottom:0;margin-top:0;width:46px;height:46px;} .level-nav-prev{left:calc(50% - 58px);} .level-nav-next{right:calc(50% - 58px);} .level-tabs{gap:6px;} .level-tab{font-size:14px;padding:6px 12px 6px 8px;gap:7px;} .level-tab img{width:24px;height:24px;} .level-tab span{font-size:12px;} .hand-heading{padding-top:84px;} .hand-peek{height:84px;} .hand-peek img{width:70px;margin-left:-95px;bottom:-10px;} .ww-brand{gap:12px;margin-bottom:18px;} .ww-brand .ww-disc{width:60px;height:60px;} .ww-brand-name{font-size:30px;} .swells{height:96px;} .swell.s1{height:96px;} .swell.s2{height:70px;} .swell.s3{height:46px;} .em-lg{font-size:38px;} /* Age level cards swipe sideways on a phone, one card at a time */ .rank-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-22px;margin-right:-22px;padding:4px 22px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .rank-grid::-webkit-scrollbar{display:none;} .rank-grid>.rank-card{flex:0 0 min(82%,320px);scroll-snap-align:center;} /* The examples table stacks: the example on top, the four levels in a two-by-two grid */ .ww-table,.ww-table tbody,.ww-table tr,.ww-table th,.ww-table td{display:block;} .ww-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} .ww-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:16px 18px;border-bottom:1px solid rgba(10,44,59,.07);} .ww-table tbody tr:last-child{border-bottom:0;} .ww-table tbody th{grid-column:1 / -1;width:auto;padding:0;border:0;} .ww-table tbody td{padding:0;border:0;} .ww-table tbody td[data-level]::before{content:attr(data-level);display:block;font-size:10.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;} .ww-table tbody tr.has-span{padding-bottom:6px;} .ww-table tbody tr.ww-span{padding-top:0;} .ww-table tbody tr.ww-span td{grid-column:1 / -1;padding:0;} } @media (max-width:480px){ .scan-grid{grid-template-columns:1fr;gap:10px;} .scan{flex-direction:row;align-items:flex-start;gap:14px;padding:16px;} .scan .icon-bubble{margin-bottom:0;} .scan p{margin-top:4px;} .grid-4,.footer-grid,.split-shot .grid-4,.outcomes{grid-template-columns:1fr;} .hero-h1{font-size:37px;} .page-h1{font-size:35px;} .nav-links a:not(.btn){font-size:12.5px;} .badge-family{font-size:11px;letter-spacing:.4px;padding:5px 10px;} :root{--lockup-mark:45px;--lockup-word:41px;} .level-tab span{display:none;} .level-tab{padding-right:14px;} } /* Comparison table (compare-parental-controls) */ .table-scroll{overflow-x:auto;margin:24px 0;-webkit-overflow-scrolling:touch;} .compare{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;font-size:15px;} .compare th,.compare td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(10,44,59,.08);} .compare thead th{background:var(--foam-1);font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;} .compare tbody th{font-weight:600;color:var(--ink);} .compare colgroup .c1{width:19%;}.compare colgroup .c2{width:27%;} .compare colgroup .c3{width:30%;}.compare colgroup .c4{width:24%;} .compare td{color:var(--ink-soft);line-height:1.5;} .compare tr:last-child th,.compare tr:last-child td{border-bottom:none;} .compare .yes{color:var(--kelp,#3E7C5A);font-weight:600;} .compare .no{color:var(--ink-soft);} .table-note{font-size:13.5px;color:var(--ink-soft);margin:-8px 0 0;} @media(max-width:700px){ .compare{font-size:14px;} .compare th,.compare td{padding:11px 12px;} }