/* style.css for alarm-clock-countdown. Mobile-first, no external fonts/CSS. */ :root{ /* Site-wide dark theme: a flat dark surface (no gradient, no background motif) for the tools, hubs and content pages. Personalized /c countdowns and the create builder opt into a themed gradient + motif via an html.t-* class (see the generated palettes below). */ --bg:linear-gradient(#0b0e1c,#0b0e1c); --accent:#fcd34d; --text:#f8fafc; --card: rgba(255,255,255,.08); --border: rgba(255,255,255,.16); --muted: rgba(255,255,255,.65); --accent-text:#1e1b4b; /* text drawn on top of an --accent background */ --menu-bg:#141a3a; --menu-text:#f8fafc; /* solid surface for dropdown menus */ } /* ---- Theme palettes + topical background motifs (GENERATED by seo/tools/build-themes.mjs (edit there, not here). Set as a class on ; --motif is a faint tiling pattern layered behind the gradient. ---- */ /*THEMES-START*/ :root{--motif:none} html.t-generic{--bg:linear-gradient(160deg,#0b1026,#1e1b4b);--accent:#fcd34d;--text:#f8fafc;--accent-text:#1e1b4b;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.07'%3E%3Cpath%20d%3D%22M30%2020l2.4%207%207%202.4-7%202.4-2.4%207-2.4-7-7-2.4%207-2.4z%22%2F%3E%3Cpath%20d%3D%22M88%2074l1.8%205%205%201.8-5%201.8-1.8%205-1.8-5-5-1.8%205-1.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:200px} html.t-birthday{--bg:linear-gradient(160deg,#7c3aed,#db2777);--accent:#fde047;--text:#fff7ed;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Crect%20x%3D%2224%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%221%22%20transform%3D%22rotate(22%2027%2027)%22%2F%3E%3Crect%20x%3D%2282%22%20y%3D%2240%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%221%22%20transform%3D%22rotate(-28%2085%2045)%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2286%22%20r%3D%223%22%2F%3E%3Crect%20x%3D%2244%22%20y%3D%2270%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%221%22%20transform%3D%22rotate(46%2047%2075)%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2296%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:170px} html.t-wedding{--bg:linear-gradient(160deg,#4a044e,#831843);--accent:#f9a8d4;--text:#fdf2f8;--accent-text:#4a044e;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cpath%20d%3D%22M28%2040c-3-4-9-4-9%202%200%205%209%2011%209%2011s9-6%209-11c0-6-6-6-9-2z%22%2F%3E%3Cpath%20d%3D%22M86%2092c-3-4-9-4-9%202%200%205%209%2011%209%2011s9-6%209-11c0-6-6-6-9-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-graduation{--bg:linear-gradient(160deg,#0f172a,#1e3a8a);--accent:#facc15;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cpath%20d%3D%22M30%2022l18%207-18%207-18-7z%22%2F%3E%3Cpath%20d%3D%22M84%2076l18%207-18%207-18-7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:160px} html.t-christmas{--bg:linear-gradient(160deg,#0b1026,#1e1b4b);--accent:#fde047;--text:#f8fafc;--accent-text:#1e1b4b;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'150'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.05'%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M30%2016v20M20%2026h20M22.9%2018.9l14.2%2014.2M37.1%2018.9L22.9%2033.1%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M88%2078v14M81%2085h14M83%2080l10%2010M93%2080l-10%2010%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:110px} html.t-fireworks{--bg:linear-gradient(160deg,#020617,#1e1b4b);--accent:#fcd34d;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.07'%3E%3Cpath%20d%3D%22M30%2020l2.4%207%207%202.4-7%202.4-2.4%207-2.4-7-7-2.4%207-2.4z%22%2F%3E%3Cpath%20d%3D%22M88%2074l1.8%205%205%201.8-5%201.8-1.8%205-1.8-5-5-1.8%205-1.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:200px} html.t-vacation{--bg:linear-gradient(160deg,#075985,#0c4a6e);--accent:#fcd34d;--text:#f0f9ff;--accent-text:#0c4a6e;--motif:none} html.t-school{--bg:linear-gradient(160deg,#1d4ed8,#16a34a);--accent:#fde047;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.06'%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2284%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2226%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-love{--bg:linear-gradient(160deg,#9d174d,#f43f5e);--accent:#fecdd3;--text:#fff1f2;--accent-text:#9d174d;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cpath%20d%3D%22M28%2040c-3-4-9-4-9%202%200%205%209%2011%209%2011s9-6%209-11c0-6-6-6-9-2z%22%2F%3E%3Cpath%20d%3D%22M86%2092c-3-4-9-4-9%202%200%205%209%2011%209%2011s9-6%209-11c0-6-6-6-9-2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-patriotic{--bg:linear-gradient(160deg,#0a1a3f,#7f1d1d);--accent:#f8fafc;--text:#f8fafc;--accent-text:#0a1a3f;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.09'%3E%3Cpath%20d%3D%22M30%2016l3.2%209.6h10l-8.1%206%203.1%209.6L30%2044.3l-8.2%205.9%203-9.6-8-6h10z%22%2F%3E%3Cpath%20d%3D%22M90%2074l2.3%207h7.3l-5.9%204.3%202.3%207-6-4.3-6%204.3%202.2-7-5.9-4.3h7.4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-bbq{--bg:linear-gradient(160deg,#1c1207,#7c2d12);--accent:#f97316;--text:#fff7ed;--accent-text:#1c1207;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cpath%20d%3D%22M32%2086c-9-5-10-17-3-24%201%205%204%206%204%206%201-9%207-12%2011-18%201%207%204%209%207%2014%204%206%202%2016-4%2022%200-4-1-7-1-7-3%204-7%204-7%208-2%200-5-1-7-1z%22%2F%3E%3Cpath%20d%3D%22M92%2096c-5-3-6-10-2-14%201%203%202%203%202%203%200-5%204-7%206-10%200%204%202%205%204%208%202%204%201%209-3%2013%200-2%200-4%200-4-2%202-4%202-4%205-1%200-3-1-3-1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-party{--bg:linear-gradient(160deg,#2e1065,#db2777);--accent:#fde047;--text:#fff7ed;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Crect%20x%3D%2224%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%221%22%20transform%3D%22rotate(22%2027%2027)%22%2F%3E%3Crect%20x%3D%2282%22%20y%3D%2240%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%221%22%20transform%3D%22rotate(-28%2085%2045)%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%2286%22%20r%3D%223%22%2F%3E%3Crect%20x%3D%2244%22%20y%3D%2270%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%221%22%20transform%3D%22rotate(46%2047%2075)%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2296%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:170px} html.t-finishline{--bg:linear-gradient(160deg,#0b0f1a,#374151);--accent:#ef4444;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'40'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.05'%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%2220%22%20height%3D%2220%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:44px} html.t-spooky{--bg:linear-gradient(160deg,#1a0b2e,#7c2d12);--accent:#f97316;--text:#fef3c7;--accent-text:#1a0b2e;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cpath%20d%3D%22M22%2040c6-7%209%201%2014%201%205%200%208-8%2014-1-2%204-3%207-7%206-3-1-5-4-7-4s-4%203-7%204c-4%201-5-2-7-6z%22%2F%3E%3Cpath%20d%3D%22M78%2092c6-7%209%201%2014%201%205%200%208-8%2014-1-2%204-3%207-7%206-3-1-5-4-7-4s-4%203-7%204c-4%201-5-2-7-6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:160px} html.t-fiesta{--bg:linear-gradient(160deg,#831843,#ea580c);--accent:#fde047;--text:#fff7ed;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cpath%20d%3D%22M30%2014l9%2014-9%2014-9-14z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2228%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M90%2064l9%2014-9%2014-9-14z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2278%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:130px} html.t-soccer{--bg:linear-gradient(160deg,#065f46,#064e3b);--accent:#fde047;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M32%2027l5%204-2%206h-6l-2-6z%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2286%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M90%2081l5%204-2%206h-6l-2-6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-baseball{--bg:linear-gradient(160deg,#0f2d5c,#7f1d1d);--accent:#f8fafc;--text:#f8fafc;--accent-text:#0f2d5c;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2286%22%20r%3D%229%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M26%2027q5%205%200%2010M38%2027q-5%205%200%2010M84%2081q5%205%200%2010M96%2081q-5%205%200%2010%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-football{--bg:linear-gradient(160deg,#14532d,#052e16);--accent:#fde047;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2210%22%20ry%3D%226%22%2F%3E%3Cellipse%20cx%3D%2290%22%20cy%3D%2286%22%20rx%3D%2210%22%20ry%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%3E%3Cline%20x1%3D%2228%22%20y1%3D%2232%22%20x2%3D%2236%22%20y2%3D%2232%22%2F%3E%3Cline%20x1%3D%2286%22%20y1%3D%2286%22%20x2%3D%2294%22%20y2%3D%2286%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-golf{--bg:linear-gradient(160deg,#14532d,#166534);--accent:#fde047;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.08'%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%3E%3Cline%20x1%3D%2230%22%20y1%3D%2216%22%20x2%3D%2230%22%20y2%3D%2244%22%2F%3E%3Cline%20x1%3D%2286%22%20y1%3D%2270%22%20x2%3D%2286%22%20y2%3D%2298%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M30%2016l11%204-11%204z%22%2F%3E%3Cpath%20d%3D%22M86%2070l11%204-11%204z%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2246%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%22100%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:150px} html.t-newyear{--bg:linear-gradient(160deg,#020617,#1e1b4b);--accent:#fcd34d;--text:#f8fafc;--motif:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.07'%3E%3Cpath%20d%3D%22M30%2020l2.4%207%207%202.4-7%202.4-2.4%207-2.4-7-7-2.4%207-2.4z%22%2F%3E%3Cpath%20d%3D%22M88%2074l1.8%205%205%201.8-5%201.8-1.8%205-1.8-5-5-1.8%205-1.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--motif-size:200px} /*THEMES-END*/ *{box-sizing:border-box} [hidden]{display:none !important} html,body{margin:0;padding:0} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* faint themed motif tiled over the gradient (both fixed) */ background-image:var(--motif,none),var(--bg); background-size:var(--motif-size,200px),cover; background-repeat:repeat,no-repeat; background-attachment:fixed; color:var(--text); min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:var(--accent)} .wrap{max-width:820px;margin:0 auto;padding:12px 18px 64px} .brand{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:2px 0 8px} /* top navigation (CSS-only dropdowns via
) */ /* the hamburger menu is the nav at all widths; .topnav is a hidden holder for * the close-on-click script, kept only so nav injection stays idempotent */ .topnav{display:none} .menu-dd{margin-left:auto} .nav-dd{position:relative} .nav-dd summary{list-style:none;cursor:pointer;user-select:none;font-size:14px;font-weight:600; padding:8px 10px;border-radius:10px;color:var(--text);display:flex;align-items:center;gap:5px} .nav-dd summary::-webkit-details-marker{display:none} .nav-dd summary::after{content:"▾";font-size:10px;opacity:.7} .nav-dd summary:hover,.nav-dd[open] summary{background:var(--card)} /* hamburger: a touch smaller than the + button, bigger glyph, no ▾ arrow */ .menu-dd summary{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;font-size:30px;line-height:1;border-radius:10px;gap:0} .menu-dd summary::after{content:none} .nav-dd .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:215px;z-index:60; background:var(--menu-bg);border:1px solid var(--border);border-radius:14px;padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.35);list-style:none;margin:0} .nav-dd .menu a{display:block;padding:7px 13px;border-radius:9px;font-size:15px;font-weight:600; color:var(--menu-text);text-decoration:none;white-space:nowrap} .nav-dd .menu a:hover{background:rgba(125,125,125,.16)} .nav-dd .menu .sep{height:1px;background:var(--border);margin:5px 8px} /* the cannabis-leaf glyph on the 420 Countdown item — cropped viewBox + this * size make it fill roughly the same box as the emoji icons on the other * menu items */ .nav-dd .menu .nav-leaf{width:24px;height:24px;vertical-align:-7px;margin-right:-1px} /* inline SVG country flags (replace emoji flags, which degrade to "JP" etc.) */ .flag{display:inline-block;width:20px;height:14px;border-radius:2px;vertical-align:-2px; margin-right:6px;box-shadow:0 0 0 1px rgba(0,0,0,.25)} .h1-flag .flag{width:30px;height:20px;vertical-align:-3px;margin-right:4px} /* breadcrumb header: domain + (dimmer) first folder, reading like a URL path */ .crumbs{display:inline-flex;align-items:center;gap:1px;flex-wrap:wrap;min-width:0} .brand-name{font-weight:800;font-size:18px;color:var(--text);text-decoration:none;display:inline-flex;align-items:center} .brand-name .logo{display:block;height:45px;width:auto} .brand-name:hover{color:var(--accent)} .brand-cat{font-weight:600;font-size:18px;color:var(--muted);text-decoration:none;word-break:break-all} .brand-cat:hover{color:var(--text)} /* copy / share dropdown (reuses the nav-dd machinery, icon instead of a label) */ .copy-dd summary{padding:6px;color:var(--muted)} .copy-dd summary::after{content:none} .copy-dd summary svg{display:block} .copy-dd[open] summary,.copy-dd summary:hover{color:var(--text)} .copy-dd .menu{left:0;right:auto;min-width:200px} .copy-menu .menu-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); padding:4px 12px 6px;font-weight:700} .copy-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer; padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--menu-text); white-space:nowrap;font-family:inherit} .copy-item:hover{background:rgba(125,125,125,.16)} .copy-item.copied{color:var(--accent)} /* mobile: anchor every dropdown to the header so it spans the width and never runs off-screen (instead of hanging off whichever trigger is near an edge) */ @media (max-width:600px){ .brand{position:relative} .nav-dd{position:static} .nav-dd .menu,.copy-dd .menu{left:12px;right:12px;top:calc(100% + 4px);min-width:0; max-height:72vh;overflow-y:auto} .copy-item,.nav-dd .menu a{white-space:normal} } /* desktop: nav links sit on the top row, centered between logo and Create */ @media (min-width:680px){ .menu-dd summary{width:38px;height:38px;font-size:27px} } h1{font-size:26px;line-height:1.2;margin:2px 0 4px} .sub{color:var(--muted);margin:0 0 22px} /* homepage brand line: domain + linked tool list */ .home-tagline{margin:0 0 14px;font-size:14px;color:var(--muted)} .home-tagline a{color:var(--accent);text-decoration:none;font-weight:600} .home-tagline a:hover{text-decoration:underline} /* cards / form */ /* symmetric vertical margin: adjacent cards collapse to 16px (unchanged * rhythm), but a card that follows a non-card section (e.g. the countdown) now * also gets a consistent 16px of room above it instead of butting right up * against it */ .card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;margin:16px 0;backdrop-filter:blur(8px)} label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px} input,select,textarea{ width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border); background:rgba(0,0,0,.25);color:var(--text);font-size:16px;font-family:inherit } /* The closed select matches the text inputs (translucent dark) so every field * looks consistent. Only the OPEN option list is forced opaque + near-white: * the browser draws it itself and would otherwise composite the translucent * field background to an unreadable light gray. */ select option{background-color:#171327;color:#f8fafc} input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)} textarea{resize:vertical;min-height:64px} .row{display:flex;gap:12px} .row>*{flex:1} .hint{font-size:12px;color:var(--muted);margin-top:6px} /* concise reliability warning beside tool controls (timer Start, etc.) */ .tool-warn{text-align:center;margin:10px auto 0;max-width:520px} .tool-warn a{color:var(--muted)} /* duration-equivalent fact line under a preset timer ("90 minutes equals 1 hour * 30 minutes, or 1½ hours") — a subtle centered pill, tabular digits */ .duration-equivalent{margin:14px auto 0;width:max-content;max-width:100%;padding:7px 15px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);text-align:center;font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} /* per-duration illustration in the timer page's How-it-works card */ .timer-illus{float:right;width:160px;height:160px;margin:0 0 10px 16px;border-radius:14px} @media (max-width:480px){.timer-illus{float:none;display:block;margin:0 auto 12px}} /* analog clock illustration on the "set alarm for HH:MM" pages */ .clock-illus{float:right;width:150px;height:150px;margin:0 0 8px 16px} @media (max-width:480px){.clock-illus{float:none;display:block;margin:0 auto 10px}} /* "Show more times" expander under the alarm quick-links (CSS-only) */ .more-times{margin-top:12px} .more-times>summary{list-style:none;cursor:pointer;display:inline-block;font-size:13px;font-weight:700;color:var(--accent)} .more-times>summary::-webkit-details-marker{display:none} .more-times>summary::after{content:" ▾"} .more-times[open]>summary::after{content:" ▴"} .more-times>summary:hover{text-decoration:underline} /* schematic tide-pattern curve on tide station pages */ .tide-figure{margin:12px 0 0;text-align:center} .tide-curve{display:block;width:100%;max-width:340px;height:auto;margin:0 auto} .tide-figure figcaption{font-size:11px;color:var(--muted);margin-top:4px} /* "Tides near me" geolocation CTA on the tides hub */ .td-nearme{border:1.5px solid var(--accent);box-shadow:0 0 0 4px rgba(125,211,252,.06)} .td-nearme .btn{margin-top:4px} /* /tides/near-me/ inline preview: lead card CTA + nearest-locations list */ .nm-status{margin:0 0 10px;color:var(--muted)} /* status row: a fixed spinner-width column on the left, the message to the * right — the spinner shows while we're locating/looking up the nearest tides */ .nm-statusrow{display:flex;align-items:center;gap:10px;margin:0 0 10px} .nm-statusrow .nm-status{margin:0} .nm-spinner{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:nm-spin .7s linear infinite} .nm-spinner[hidden]{display:none} @keyframes nm-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.nm-spinner{animation-duration:2.4s}} .nm-list:not(:empty){margin-bottom:12px} .nm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .nm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card2,#171a26);text-decoration:none;color:inherit} .nm-item:hover{border-color:var(--accent);background:rgba(125,211,252,.08)} .nm-city{font-weight:600} .nm-mi{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} /* reciprocal coastal cards: baked sunrise/sunset line on a tide page */ .td-sunline{font-size:16px;margin:2px 0 8px;font-variant-numeric:tabular-nums} .td-sunline b{color:var(--accent);font-weight:700} /* baked "today's tides" table on tide station pages */ .tide-today{width:100%;border-collapse:collapse;margin-top:4px} .tide-today th,.tide-today td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)} .tide-today th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700} .tide-today td{font-variant-numeric:tabular-nums} .tide-today tr:last-child td{border-bottom:none} /* live theme preview in the builder: shows the chosen background colour + * pattern with the selected image on top, so you see the look before sharing */ .theme-preview{margin:12px 0 4px;height:128px;border:1px solid var(--border);border-radius:14px; background-image:var(--motif,none),var(--bg);background-size:var(--motif-size,auto),cover; background-position:center;display:flex;align-items:center;justify-content:center;overflow:hidden} .theme-preview svg{width:88px;height:88px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))} /* image picker + live preview side by side: the preview stretches to match * the label+select column, so the row reads as one unit */ .art-row{align-items:stretch} .art-row .theme-preview{margin:14px 0 0;height:auto;min-height:74px} .art-row .theme-preview svg{width:60px;height:60px} /* tappable suggested zero-messages under the message box */ .msg-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .msg-suggest button{cursor:pointer;border:1px solid var(--border);border-radius:999px;padding:5px 11px; font-size:12px;font-weight:600;color:var(--text);background:rgba(0,0,0,.18);font-family:inherit;width:auto} .msg-suggest button:hover{border-color:var(--accent)} /* preset grid */ .presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .preset{ display:block;cursor:pointer;border:1px solid var(--border);border-radius:14px;padding:12px 6px;text-align:center; background:rgba(0,0,0,.18);transition:.15s;font-size:13px;color:var(--text);text-decoration:none } .preset:hover{transform:translateY(-2px)} .preset.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:rgba(56,189,248,.12)} .preset .em{font-size:26px;display:block;margin-bottom:4px} .more-cta{display:block;text-align:center;margin-top:12px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none} .more-cta:hover{text-decoration:underline} /* home portal: popular-countdown lists */ .card h2{font-size:17px;margin:0 0 10px} .cat-link{color:var(--text);text-decoration:none} .cat-link:hover{text-decoration:underline} .facts{margin:0;padding-left:20px} .facts li{margin:7px 0} /* compact career/life timeline (build-events.mjs `timeline`) */ .tl-list{display:flex;flex-direction:column;gap:2px} .tl-row{display:flex;gap:14px;padding:9px 2px;border-bottom:1px solid var(--border)} .tl-row:last-child{border-bottom:none} .tl-year{flex:0 0 auto;min-width:64px;max-width:42%;font-weight:800;color:var(--accent);overflow-wrap:break-word} .tl-text{flex:1;min-width:0;line-height:1.4} .champ-note{color:var(--muted);font-weight:400} /* records list (build-events.mjs `records`): label/value rows, same rhythm as .tl-list */ .rec-list{display:flex;flex-direction:column;gap:2px} .rec-row{display:flex;gap:14px;padding:9px 2px;border-bottom:1px solid var(--border)} .rec-row:last-child{border-bottom:none} .rec-label{flex:0 0 auto;min-width:160px;max-width:42%;font-weight:700;color:var(--muted);overflow-wrap:break-word} .rec-value{flex:1;min-width:0;line-height:1.4;font-weight:600} @media (max-width:560px){ /* long labels (timeline years are fine, but record stat labels can run long) can't share a row with their text on narrow screens without squeezing it into a sliver — stack label above text instead */ .tl-row,.rec-row{flex-direction:column;gap:3px} .tl-year,.rec-label{max-width:100%} } /* sortable column headers above a .toplist (Name | Date) */ .list-head{display:flex;justify-content:space-between;gap:10px;padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--border)} .sortbtn{background:none;border:0;cursor:pointer;font:inherit;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:2px} .sortbtn:hover{color:var(--text)} .sortbtn[data-dir]{color:var(--accent)} .sortbtn[data-dir="asc"]::after{content:" ▲";font-size:9px} .sortbtn[data-dir="desc"]::after{content:" ▼";font-size:9px} .toplist{list-style:none;margin:0;padding:0} .toplist li{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:9px 2px;border-bottom:1px solid var(--border)} .toplist li:last-child{border-bottom:none} .toplist a{font-weight:600;text-decoration:none} .toplist a:hover{text-decoration:underline} .toplist .when{font-size:12px;color:var(--muted);white-space:nowrap} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer; border:none;border-radius:12px;padding:13px 18px;font-size:16px;font-weight:700; background:var(--accent);color:var(--accent-text);width:100%;font-family:inherit;text-decoration:none } .btn.secondary{background:rgba(255,255,255,.12);color:var(--text);border:1px solid var(--border)} .btn:active{transform:scale(.99)} .btn.small{padding:9px 12px;font-size:14px;width:auto} /* share row */ .share{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .share .btn{flex:1;min-width:120px} /* icon share + add-to-calendar */ .share-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px} .cal-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 22px} .share-label{font-weight:700;font-size:14px;color:var(--text)} /* put the "Share:" label on its own line (bolder), so the icons all sit on the * row beneath it instead of the label pushing them onto a second line */ .share-row .share-label{flex-basis:100%;font-weight:800;margin-bottom:2px} .ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0; border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;transition:.15s} .ico svg{width:20px;height:20px;fill:currentColor} .ico:hover{transform:translateY(-2px)} .ico.wa{background:#25d366;color:#fff;border-color:transparent} .ico.fb{background:#1877f2;color:#fff;border-color:transparent} .ico.x{background:#000;color:#fff;border-color:transparent} .ico.tg{background:#229ed9;color:#fff;border-color:transparent} .ico.sms{background:#34c759;color:#fff;border-color:transparent} .ico.em{background:#5b6472;color:#fff;border-color:transparent} /* link box */ .linkbox{display:flex;gap:8px;margin-top:8px} .linkbox input{font-size:13px} /* notice */ .notice{font-size:12px;color:var(--muted);border-left:3px solid var(--accent);padding:8px 12px;margin-top:14px;background:rgba(0,0,0,.18);border-radius:0 10px 10px 0} .notice-warn{margin-top:0;border-left-color:#f87171;background:rgba(248,113,113,.14);font-size:13px;color:var(--text)} /* "how it works" mini-steps on the builder */ .steps{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--muted)} .steps strong{color:var(--text)} /* ===== countdown page ===== */ .cd-hero{text-align:center;padding:8px 0 4px;min-height:132px;line-height:0} .cd-hero svg{width:120px;height:120px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))} /* celebrity birthdays show two illustrations (a star and a cake) side by side */ .cd-hero-pair{display:flex;justify-content:center;align-items:center;gap:8px} .cd-hero-pair svg{width:100px;height:100px} /* LinkedIn-style "profile" header for celebrities: a card holding the birthday illustration plus the name, intro and at-a-glance details. Image stacks above the text on mobile; image + text sit in two columns on desktop. The big countdown below stays the page's primary, bold focal point. */ /* the title spans the full page width, sitting above both columns */ .cd-profile-h1{text-align:left;margin:2px 0 12px} .cd-profile{display:flex;flex-direction:column;align-items:stretch;gap:16px; background:var(--card);border:1px solid var(--border);border-radius:20px; padding:16px;margin:8px 0 20px;text-align:left} .cd-profile-img{flex:0 0 auto;line-height:0;width:100%;display:flex;align-items:center;justify-content:center} .cd-profile-img img{display:block;width:100%;height:auto;border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.4)} .cd-profile-img svg{width:168px;height:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))} .cd-profile-body{min-width:0;display:flex;flex-direction:column;justify-content:center} .cd-profile-body .sub{margin:0 0 12px} /* at-a-glance detail rows */ .cd-meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px; font-size:14px;color:var(--text)} .cd-meta li{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap} .cd-meta .k{color:var(--muted);min-width:96px;text-align:left;font-weight:600} @media (min-width:640px){ /* image + text columns stretched to equal height */ .cd-profile{flex-direction:row;align-items:stretch;gap:24px;padding:18px} .cd-profile-img{width:42%;max-width:340px} .cd-profile-img svg{width:190px} .cd-profile-body{flex:1} } .cd-name{font-size:30px;font-weight:800;text-align:center;margin:8px 0 2px;color:#fff} .cd-when{color:var(--muted);text-align:center;margin:0 0 22px;font-size:14px;min-height:21px} .clock{display:flex;justify-content:center;gap:10px;margin:18px 0} /* Dark scrim behind every unit (same idea as the embed widget) so the white * digits stay legible on any page colour or themed gradient. */ .unit{background:rgba(0,0,0,.32);border:1px solid rgba(0,0,0,.25);border-radius:16px;padding:14px 6px;min-width:74px;text-align:center} .unit .num{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1; color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(255,255,255,.22)} .unit .lab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:6px} .cd-localtime{text-align:center;color:var(--muted);font-size:13px;margin:2px 0 0} /* small view count: under the countdown on mobile, to its right on desktop */ .cd-views{text-align:center;color:var(--muted);font-size:12px;margin:2px 0 0;min-height:1em;opacity:.85} .cd-clockrow{display:flex;flex-direction:column;align-items:center;margin-bottom:8px} .cd-clockrow .clock{margin-bottom:0} @media (min-width:560px){ .cd-clockrow{flex-direction:row;justify-content:center;align-items:center;gap:16px} .cd-clockrow .cd-views{margin:0;white-space:nowrap} } .cd-answer{text-align:center} .cd-answer h2{font-size:17px;margin:0 0 6px} .cd-answer p{margin:0;color:var(--muted)} .cd-msg{text-align:center;font-size:22px;font-weight:700;margin:8px 0;min-height:1px} .zero .clock{display:none} /* 420 novelty pages: cannabis-leaf SVG flanking the title + a green-tinted * countdown to tie the whole (entirely innocent) thing together. */ .h420{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,16px);flex-wrap:nowrap;text-align:center} .h420 span{flex:0 1 auto} .leaf420{flex:0 0 auto;width:clamp(46px,12vw,78px);height:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))} .cd420-stage{text-align:center;position:relative} /* zero-state smoke: a soft green haze rises over the display when the countdown * hits 4:20, then fades. Clipped to the stage; skipped for reduced-motion. */ .cd420-smoke{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:6;opacity:0} .cd420-smoke::before{content:"";position:absolute;left:-15%;right:-15%;bottom:-30%;height:150%;background:radial-gradient(40% 36% at 27% 76%,rgba(205,252,218,.8),transparent 66%),radial-gradient(42% 38% at 72% 82%,rgba(224,255,232,.72),transparent 66%),radial-gradient(52% 48% at 50% 92%,rgba(165,238,186,.66),transparent 68%);filter:blur(16px);transform:translateY(38%)} .cd420-stage.cd420-zero .cd420-smoke{animation:cd420Fade 6s ease-out forwards} .cd420-stage.cd420-zero .cd420-smoke::before{animation:cd420Rise 6s ease-out forwards} @keyframes cd420Fade{0%{opacity:0}14%{opacity:.95}55%{opacity:.85}100%{opacity:0}} @keyframes cd420Rise{0%{transform:translateY(38%) scale(1)}100%{transform:translateY(-58%) scale(1.45)}} @media (prefers-reduced-motion:reduce){.cd420-stage.cd420-zero .cd420-smoke,.cd420-stage.cd420-zero .cd420-smoke::before{animation:none}} .cd420-label{text-align:center;font-size:14px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 2px} /* digit colour/glow keyed off --g420, set on the stage by the shade picker * (defaults to mint) — so the chosen green follows the stage into full screen * and the pop-out window. */ .cd420-stage .unit .num{color:var(--g420,#7bd88f);text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px var(--g420-glow,rgba(76,175,80,.45))} .cd420-ctrl{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 18px} /* small icon buttons, same size/feel as the alarm page's .ac-icon (44x44) */ .cd420-ib{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:var(--text);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:.12s} .cd420-ib:hover{border-color:var(--accent);color:var(--accent)} .cd420-ib svg{display:block} /* the "Boss!" panic button rides in the same row but is text, not an icon — * auto width, 44px tall to line up with the icon buttons */ .cd420-boss{width:auto;padding:0 14px;font-size:14px;font-weight:700} .mc-pip .cd420-boss{padding:0 10px;font-size:12px} /* Colour + Share are
dropdowns; the menu floats over the content * below. Colour trigger = a square swatch of the current green; Share * trigger = the share icon, its menu a single horizontal row of options. */ .cd420-dd{position:relative} .cd420-dd summary{list-style:none;cursor:pointer} .cd420-dd summary::-webkit-details-marker{display:none} .cd420-dd[open]>summary{border-color:var(--accent)} .cd420-sq{width:24px;height:24px;border-radius:6px;background:var(--g420,#2ecc71);box-shadow:0 0 8px var(--g420-glow,rgba(46,204,113,.5))} /* solid (opaque) background — the theme's --card is semi-transparent, which * let the text below show through where the menu overlaps it. */ .cd420-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;min-width:200px;max-width:calc(100vw - 24px);max-height:min(64vh,440px);overflow:auto;background:#171a26;border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.55)} .cd420-menu-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px 8px} .cd420-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;background:none;border:0;border-radius:8px;cursor:pointer;color:var(--text);text-align:left} .cd420-opt:hover{background:rgba(255,255,255,.08)} .cd420-opt.on{background:rgba(255,255,255,.07)} .cd420-splotch{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.25)} .cd420-strain{font-size:14px;font-weight:600;white-space:nowrap} .cd420-share-menu{min-width:0} .cd420-share-icons{display:flex;gap:8px;padding:2px} .cd420-share-icons .ico{width:44px;height:44px} .ico.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff;border-color:transparent} /* cart dropdown: popular-search links + small-print affiliate disclosure */ .cd420-cart-menu{min-width:220px} .cd420-cart-item{display:block;padding:8px;border-radius:8px;color:var(--text);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap} .cd420-cart-item:hover{background:rgba(255,255,255,.08)} .cd420-cart-note{font-size:10px;line-height:1.4;color:var(--muted);padding:8px 8px 2px;margin-top:4px;border-top:1px solid var(--border);white-space:normal} /* full screen: black, centred, huge digits (readable across the room) */ .cd420-stage:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;width:100vw;height:100vh;gap:min(3vh,26px)} .cd420-stage:fullscreen .cd420-label{font-size:min(3.6vw,30px);margin:0} .cd420-stage:fullscreen .clock{gap:min(3vw,3vh)} .cd420-stage:fullscreen .unit{min-width:min(20vw,160px);padding:min(3vw,24px) min(1.5vw,10px)} .cd420-stage:fullscreen .unit .num{font-size:min(14vw,150px)} .cd420-stage:fullscreen .unit .lab{font-size:min(2vw,18px)} .cd420-stage:fullscreen .cd-msg{font-size:min(4vw,34px)} /* the control row now lives inside the stage, so colour/share/cart follow it * into full screen; hide the (now-redundant) full-screen + pop-out buttons. * The menus open upward so they don't run off the bottom of the screen. */ .cd420-stage:fullscreen .cd420-ctrl{margin:min(2vh,18px) 0 0} .cd420-stage:fullscreen #cd-fs,.cd420-stage:fullscreen #cd-pop{display:none} .cd420-stage:fullscreen .cd420-menu{top:auto;bottom:calc(100% + 8px)} /* pop-out (documentPictureInPicture) — compact clock in the floating window */ .mc-pip .cd420-stage{padding:6px} .mc-pip .cd420-label{font-size:11px;margin:0 0 6px} .mc-pip .cd420-stage .unit{min-width:0;padding:6px 3px} .mc-pip .cd420-stage .unit .num{font-size:22px} .mc-pip .cd420-stage .unit .lab{font-size:8px} /* pop-out keeps colour/share/cart too, at a compact size; no fs/pop there */ .mc-pip .cd420-ctrl{margin:8px 0 0;gap:6px} .mc-pip .cd420-ib{width:34px;height:34px;border-radius:9px} .mc-pip .cd420-ib svg{width:17px;height:17px} .mc-pip .cd420-sq{width:18px;height:18px} .mc-pip .cd420-ctrl #cd-fs,.mc-pip .cd420-ctrl #cd-pop{display:none} .mc-pip .cd420-menu{min-width:150px;max-width:calc(100vw - 12px)} .mc-pip .cd420-cart-menu{min-width:160px} /* launch-video facade (rocket pages): a 16:9 click-to-play box. The facade * is a styled placeholder — no YouTube request until tapped — then its own * script swaps in the iframe, which fills the same box. aspect-ratio holds * the space so there's no layout shift when the player loads. */ .cd-video{position:relative;width:100%;max-width:640px;margin:16px auto 4px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--border)} .cd-video iframe{display:block;width:100%;height:100%;border:0} .cd-video-facade{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0;border:0;cursor:pointer;color:#fff;background:radial-gradient(circle at 50% 42%,#1c2647,#0a0e1c)} .cd-video-play{display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding-left:5px;font-size:24px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.85);transition:.15s} .cd-video-facade:hover .cd-video-play{background:var(--accent);color:#000;border-color:var(--accent);transform:scale(1.06)} .cd-video-label{font-weight:700;font-size:15px;letter-spacing:.01em} /* ---- /work/ countdown widgets. Each is independently full-screenable via * element.requestFullscreen() (not the whole document) — the browser shows * only that element filling the screen, so the rest of the page (and, on * the hub, the other widgets) is naturally out of view with no manual * chrome-hiding CSS needed. Reuses the alarm clock's wake-lock + hourly * anti-burn-in pattern (--burn-x/--burn-y) since these are meant to be left * open unattended for hours too. */ .mc-hub-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:18px 0} @media(min-width:760px){.mc-hub-grid{grid-template-columns:repeat(3,1fr)}} .mc-widget{position:relative;container-type:inline-size;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px 16px;text-align:center} /* sized off the widget's own width (container query) so it's big and bold * whether the widget is alone on its own page or one of three in the hub * grid, without needing separate breakpoints for each context */ .mc-label{font-size:clamp(15px,5.4cqw,21px);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;line-height:1.25} /* also container-scaled: a hub grid column is much narrower than a * single-widget page, so the 4 units need to shrink to fit without * overlapping (flex-wrap is a safety net if they still don't). */ .mc-widget .clock{gap:min(2.2cqw,10px);flex-wrap:wrap} .mc-widget .unit{min-width:min(17cqw,74px);padding:min(2.6cqw,14px) min(1.2cqw,6px)} .mc-widget .unit .num{font-size:min(8cqw,40px)} .mc-widget .unit .lab{font-size:min(2.2cqw,11px)} /* Display color: same red/purple/blue/green/yellow/orange palette and * "ac_color" localStorage key as the alarm clock's swatch (cycled in * MC_JS), so a color picked on either page shows up on both. The hex pairs * are duplicated from the #ac-panel[data-c=...] rules rather than reusing * --seg-on/--seg-glow directly: those variables live in the TOOLCSS-marked * block build-inline.mjs strips from /work/ pages, so relying on them here * would resolve to nothing. Default (no data-c, i.e. red) needs no rule — * it's the same red the base .unit .num already ships. */ .mc-widget .unit .num{color:#ff2b2b;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(255,43,43,.6)} body[data-c="purple"] .mc-widget .unit .num{color:#b855f7;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(184,85,247,.5)} body[data-c="blue"] .mc-widget .unit .num{color:#38bdf8;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(56,189,248,.5)} body[data-c="green"] .mc-widget .unit .num{color:#35e06a;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(53,224,106,.5)} body[data-c="yellow"] .mc-widget .unit .num{color:#facc15;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(250,204,21,.5)} body[data-c="orange"] .mc-widget .unit .num{color:#fb923c;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(251,146,60,.5)} /* Controls are a centered row of small 44x44 icon buttons (same size/feel as * the alarm page's .ac-icon), below the countdown. Full screen, colour, * share and pop-out all share the .mc-icon size; the swatch keeps its rainbow * gradient. Its own small rules (not a reuse of .ac-icon) for the same * TOOLCSS-stripping reason. */ .btn.mc-icon{flex:0 0 auto;width:44px;height:44px;min-width:0;padding:0;display:inline-flex;align-items:center;justify-content:center} .btn.mc-icon svg{margin:0} .btn.mc-swatch{background:linear-gradient(rgba(5,5,8,.42),rgba(5,5,8,.42)),linear-gradient(135deg,#d5342e,#d58a2e,#c9c92e,#2eb45f,#2e6ed5,#8a2ed5);border-color:#4a4f5e} /* Day/Time/Time zone settings, a sibling of .mc-widget (not a descendant) * so it's automatically excluded when a single widget goes fullscreen; on * the hub, where it IS a descendant of the fullscreened grid, an explicit * rule below hides it there too. */ .mc-settings{max-width:340px;margin:10px auto 0;text-align:left} .mc-set-row{display:flex;align-items:center;gap:10px;margin:8px 0} .mc-set-row label{flex:0 0 84px;width:84px;margin:0;font-size:13px;font-weight:600} .mc-set-row select{flex:1 1 auto;margin:0} .mc-set-hint{font-size:11px;color:var(--muted);margin:10px 0 0;text-align:center} .mc-open-link{display:block;text-align:center;font-size:13px;margin-top:12px} .mc-hub-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px 0} .mc-ctrl{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0} /* the "Boss!" button lives in the control row (right of the icon buttons): * matched to their 44px height with tight side padding so the whole row fits * on one line. Full screen / pop-out override the sizing below. */ .mc-ctrl-boss{display:inline-flex;align-items:center;width:auto;height:44px;padding:0 12px;font-size:14px;font-weight:700} /* "Shop ideas" cart dropdown in the control row — rides into full screen and * the pop-out with the rest of the row (same idea as the 420 pages). */ .mc-cart-dd{position:relative;display:inline-flex} .mc-cart-dd summary{list-style:none;cursor:pointer} .mc-cart-dd summary::-webkit-details-marker{display:none} .mc-cart-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;min-width:210px;max-width:calc(100vw - 24px);max-height:min(60vh,420px);overflow:auto;background:#171a26;border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 12px 34px rgba(0,0,0,.55);text-align:left} .mc-cart-menu-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px 8px} .mc-cart-item{display:block;padding:8px;border-radius:8px;color:var(--text);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap} .mc-cart-item:hover{background:rgba(255,255,255,.08)} .mc-cart-note{font-size:10px;line-height:1.4;color:var(--muted);padding:8px 8px 2px;margin-top:4px;border-top:1px solid var(--border);white-space:normal} .mc-close-tl{position:fixed;top:16px;left:16px;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.78);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;cursor:pointer;z-index:10001} .mc-widget:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;border:0;border-radius:0;padding:0;width:100vw;height:100vh;transform:translate(var(--burn-x,0px),var(--burn-y,0px))} .mc-widget:fullscreen .mc-label{font-size:min(3.2vw,28px);margin-bottom:min(3vh,24px)} .mc-widget:fullscreen .clock{gap:min(3vw,3vh);flex-wrap:nowrap} .mc-widget:fullscreen .unit{min-width:min(20vw,160px);padding:min(3vw,24px) min(1.5vw,10px)} .mc-widget:fullscreen .unit .num{font-size:min(14vw,140px)} .mc-widget:fullscreen .unit .lab{font-size:min(2vw,18px)} .mc-widget:fullscreen .mc-msg{font-size:min(4vw,36px);margin-top:min(2vh,16px)} /* full screen: keep color, share and the boss key reachable; drop the now- * redundant full-screen + pop-out buttons. Buttons enlarged and lightened so * they read on the black background. */ .mc-widget:fullscreen .mc-ctrl{display:flex;margin-top:min(4vh,32px)} .mc-widget:fullscreen .mc-fs-btn,.mc-widget:fullscreen .mc-pop-btn{display:none} /* colour + share are square icon buttons; the boss key is a small "Boss" text * button sized to match their height, on the same row */ .mc-widget:fullscreen .mc-ctrl .btn:not(.mc-ctrl-boss){width:min(9vw,56px);height:min(9vw,56px)} .mc-widget:fullscreen .mc-ctrl-boss{display:inline-flex;width:auto;height:min(9vw,56px);padding:0 min(3.4vw,22px);font-size:min(3.2vw,17px);font-weight:700} /* keep the rainbow swatch's colour; only lighten the plain buttons */ .mc-widget:fullscreen .mc-ctrl .btn:not(.mc-swatch){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff} /* the cart rides along too; its menu opens upward so it stays on-screen */ .mc-widget:fullscreen .mc-cart-menu{top:auto;bottom:calc(100% + 12px)} /* hub full screen: all three widgets stacked one above another, filling the * screen, each still clearly labeled — the single Full screen button target * is the grid itself (not an individual widget). Stacked (not side by side) * so each one gets the full width to work with, which is what actually * lets the digits go bigger; sizing combines vw *and* vh caps (each widget * only gets ~1/3 of the viewport's height here) so they can't outgrow their * row vertically even though they're full width. */ .mc-hub-grid:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(2vh,20px);background:#000;width:100vw;height:100vh;padding:min(2vh,20px) min(3vw,28px);transform:translate(var(--burn-x,0px),var(--burn-y,0px))} .mc-hub-grid:fullscreen .mc-hub-item{flex:1 1 0;min-height:0;width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;justify-content:center} .mc-hub-grid:fullscreen .mc-widget{background:transparent;border:0;padding:0;width:100%} .mc-hub-grid:fullscreen .mc-label{font-size:min(4vw,4.5vh,28px);margin-bottom:min(1.4vh,14px);color:#fff} .mc-hub-grid:fullscreen .clock{gap:min(2vw,2vh,14px);flex-wrap:nowrap} .mc-hub-grid:fullscreen .unit{min-width:0;flex:1 1 0;max-width:190px;padding:min(2vh,16px) min(1.4vw,10px)} .mc-hub-grid:fullscreen .unit .num{font-size:min(11vw,13vh,110px)} .mc-hub-grid:fullscreen .unit .lab{font-size:min(1.6vw,1.8vh,14px)} .mc-hub-grid:fullscreen .mc-msg{font-size:min(3vw,3.4vh,26px);margin-top:min(1vh,10px)} .mc-hub-grid:fullscreen .mc-open-link,.mc-hub-grid:fullscreen .mc-settings{display:none} /* solo /work/ page action row: Copy-for-Slack + Boss key */ .mc-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 20px} /* "Boss key" overlay — a boring, convincing spreadsheet that covers the page */ .boss-screen{position:fixed;inset:0;z-index:2147483000;background:#f5f6f8;color:#1f2328;font-family:Calibri,"Segoe UI",Arial,sans-serif;overflow:auto;cursor:pointer} .boss-app{min-height:100%;display:flex;flex-direction:column} .boss-titlebar{background:#217346;color:#fff;font-size:13px;padding:7px 12px} .boss-fname{font-weight:700} .boss-menubar{background:#fff;border-bottom:1px solid #d5d7db;font-size:13px;color:#444;padding:7px 12px;white-space:nowrap;overflow:hidden} .boss-sheet{border-collapse:collapse;font-size:13px;width:100%;background:#fff;table-layout:auto} .boss-sheet th,.boss-sheet td{border:1px solid #d9dbde;padding:3px 10px;text-align:right;white-space:nowrap} .boss-sheet thead tr:first-child th{background:#eef0f2;color:#666;text-align:center;font-weight:600} .boss-sheet td:first-child,.boss-sheet th:first-child{background:#eef0f2;color:#666;text-align:center;width:36px;font-weight:600} .boss-sheet td:nth-child(2){text-align:left} .boss-hdr td{font-weight:700;background:#fafbfc} .boss-sheet tbody tr:last-child td{font-weight:700;background:#f3f7f4} .boss-tabs{background:#fff;border-top:1px solid #d5d7db;padding:5px 12px;font-size:12px;color:#555;display:flex;gap:16px;margin-top:auto} .boss-tab.active{color:#217346;font-weight:700;border-bottom:2px solid #217346} .boss-hint{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,.82);color:#fff;font-size:12px;padding:6px 14px;border-radius:20px;font-family:system-ui,sans-serif} /* top-right close button on the boss screen — big enough to tap on mobile */ .boss-close{position:fixed;top:12px;right:12px;z-index:10;width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,23,42,.85);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;cursor:pointer} .boss-close:hover{background:rgba(15,23,42,.95)} /* pop-out window (documentPictureInPicture), mirrors .ac-pip */ .mc-pip{background:#0b0b0c;margin:0;padding:10px} .mc-pip .mc-hub-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin:0} .mc-pip .mc-widget{padding:8px 4px;border-radius:10px} .mc-pip .mc-label{font-size:9px;margin-bottom:4px} .mc-pip .unit{padding:6px 2px;min-width:0} .mc-pip .unit .num{font-size:16px} .mc-pip .unit .lab{font-size:8px} /* pop-out window: hide every control except a small "Boss!" button */ .mc-pip .mc-ctrl{display:flex;justify-content:center;gap:6px;margin:5px 0 0} .mc-pip .mc-ctrl .btn:not(.mc-ctrl-boss){display:none} .mc-pip .mc-widget:not(:fullscreen) .mc-ctrl-boss{display:inline-flex;width:auto;height:auto;padding:2px 12px;font-size:11px;font-weight:700} /* keep the shopping cart visible in the pop-out (the other icons hide); compact */ .mc-pip .mc-ctrl .mc-cart-dd .btn.mc-cart-btn{display:inline-flex;width:auto;height:auto;padding:2px 6px} .mc-pip .mc-cart-menu{min-width:150px} .celebrate-list li{margin:7px 0} /* FAQ accordion on event pages (visible counterpart to the FAQPage JSON-LD) */ .faq-card summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none;position:relative;padding-right:26px} .faq-card summary::-webkit-details-marker{display:none} .faq-card summary::after{content:"+";position:absolute;right:4px;top:9px;font-size:22px;line-height:1;color:var(--muted)} .faq-card details[open] summary::after{content:"\2013"} .faq-card details{border-top:1px solid var(--border)} .faq-card details:first-of-type{border-top:0} .faq-card .faq-a{padding:0 0 12px;margin:0;color:var(--muted)} /*TOOLCSS-START*/ /* ===== time tools: stopwatch + timer ===== */ /* position+z-index so the alarm-sound dropdown (which overflows the card) * paints ABOVE the following card — both cards form backdrop-filter stacking * contexts, so without this the next card covers the open menu. */ .tool-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px 18px;margin:0 0 18px;text-align:center;backdrop-filter:blur(8px);position:relative;z-index:5} .tool-time{font-size:clamp(48px,17vw,108px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);margin:4px 0} .tool-time .cs{font-size:.45em;color:var(--muted)} .tool-msg{color:var(--accent);font-weight:700;min-height:20px;margin:4px 0 0} .tool-uses{color:var(--muted);margin:-12px 0 22px} .tool-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px} /* size to content (down from a 118px floor) so Custom timer / Start / the * square sound button all fit on one line; wrap only on very narrow screens */ .tool-controls .btn{width:auto;min-width:0} .timer-set{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin:8px 0 2px} .timer-set div{width:84px} .timer-set input{width:100%;text-align:center;font-size:26px;font-variant-numeric:tabular-nums;padding:10px 4px} .timer-set .u{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:5px} /* keep the H/M/S digits big & centered when the set form sits inside a dialog * (the generic .ac-form number-input rule would otherwise shrink them) */ .ac-form .timer-set{margin:4px 0 2px} .ac-form .timer-set input{font-size:26px;text-align:center;padding:10px 4px;margin-top:0} /* alarm-sound dropdown: a square speaker button (same set as the alarm clock) * that fits on the control row beside Custom timer / Start. */ .t-sound-dd{position:relative;display:inline-flex} .t-sound-dd summary{list-style:none;cursor:pointer} .t-sound-dd summary::-webkit-details-marker{display:none} .tool-controls .btn.t-sound-btn{width:46px;min-width:46px;padding:13px 0} .t-sound-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;min-width:158px;max-width:calc(100vw - 24px);background:#171a26;border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,.55);text-align:left} .t-sound-menu-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px 6px} .t-sound-opt{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:8px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit} .t-sound-opt:hover{background:rgba(255,255,255,.08)} .t-sound-opt.on{background:rgba(255,255,255,.1);color:var(--accent)} /* egg keeps its dropdown in a centered row below the egg (its controls sit in * an overflow-hidden shape, which would clip the menu). */ .t-sound-row{display:flex;justify-content:center;margin:12px 0 0} /* subtle "Notify me when time's up" opt-in hint */ .t-notify-hint{display:block;width:100%;margin:14px 0 0;padding:0;background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;font-family:inherit;text-align:center;cursor:pointer;line-height:1.4} .t-notify-hint:hover:not(:disabled){color:var(--accent);text-decoration:underline} .t-notify-hint:disabled{cursor:default} .laps{list-style:none;padding:0;margin:16px auto 0;max-width:360px;text-align:left;max-height:240px;overflow:auto} .laps li{display:flex;justify-content:space-between;gap:10px;padding:7px 4px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;font-size:14px} .laps li .lap-n{color:var(--muted)} .tool-done .tool-time{color:var(--accent);animation:toolflash 1s steps(2,start) infinite} @keyframes toolflash{50%{opacity:.4}} .tool-about{margin-top:10px} /*TOOLCSS-END*/ /* admin-panel primitives (search row, saved dropdown) shared by the tides * AND /sun/ pages — global so TOOLCSS-stripped pages render them */ .td-qrow{display:flex;gap:8px;flex:1 1 240px} .td-qrow input[type=search]{flex:1;margin:0;min-width:0} .td-qgo{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:10px;background:var(--accent);color:#0b1026;border:0;cursor:pointer} .td-qgo svg{pointer-events:none} .td-saved-wrap{position:relative;display:inline-flex;gap:8px} .td-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:70;min-width:260px;max-width:min(330px,88vw);background:#171a26;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.55);padding:12px} .td-myhead{display:flex;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px} .td-myitem{display:flex;align-items:center;gap:8px} .td-myitem input[type=radio]{width:auto;margin:0 6px;accent-color:var(--accent);cursor:pointer} .td-myfoot{display:flex;gap:8px;margin-top:8px} .td-mymsg{margin:6px 0 0;font-size:12px;color:var(--accent)} .td-myrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0} /* chips are used site-wide (sun pages, hubs) — kept OUTSIDE the tool-CSS * blocks so pages that strip TOOLCSS still render them correctly */ .timer-presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 0} .chip{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--text);text-decoration:none;background:rgba(0,0,0,.18);cursor:pointer;white-space:nowrap} .chip:hover{border-color:var(--accent)} /*TOOLCSS-START*/ /* home dashboard of tool cards */ .tool-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0 26px} @media(min-width:560px){.tool-grid{grid-template-columns:1fr 1fr}} @media(min-width:900px){.tool-grid{grid-template-columns:repeat(4,1fr)}} /* top row: on wide screens the alarm clock (wider left column) and the Work * Countdowns card sit side by side in a single row. On narrow screens both * stack in DOM order — Alarm, Work — so Work stays prominent right under the * alarm. The tide chart and world clock cards live further down the page * (their own row, below the Sunrise & Sunset card) — both depend on async * data (geolocation/NOAA, a ticking clock) and sit better off the initial * mobile viewport than up here next to the always-static alarm display. */ .tc-top-row{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0 14px} @media(min-width:900px){ /* single row: alarm gets the wider column, Work takes the rest. * align-items:start keeps each card its own content height instead of * stretching the shorter mini to match the alarm (no dead vertical space). */ .tc-top-row{grid-template-columns:1.7fr 1fr;align-items:start} } .tc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;background:var(--card);padding:16px;text-decoration:none;color:var(--text);transition:.15s;min-height:148px} /* timer/stopwatch cards: the Open button sits in a row with the LED mockup so * it lines up vertically with it; content stacks from the top of the card */ .tc-foot{margin-top:auto;padding-top:12px;display:flex;justify-content:center} .tc-open-btn{flex:0 0 auto;width:auto;padding:8px 30px;font-size:14px;white-space:nowrap} .tc-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px} .tc-presets .chip{padding:5px 11px;font-size:13px} .tc:hover{border-color:var(--accent);transform:translateY(-2px)} .tc-head{font-weight:800;font-size:15px;margin-bottom:8px} .tc-big{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:44px;color:var(--accent);line-height:1.1} .tc-big small{font-size:22px;opacity:.8} .tc-tide-big{text-align:center;margin:6px auto 0} .tc-tide-big svg{width:100%;max-width:300px;height:auto;border-radius:10px} /* tide card: two side-by-side buttons (Nearest + Search) */ .tc-foot-2{gap:8px} .tc-foot-2 .tc-open-btn{flex:1 1 0;padding:8px 12px;text-align:center;justify-content:center} /* homepage tools row: alarm 50% + timer & stopwatch 25% each on desktop */ .home-tools-row{display:grid;grid-template-columns:1fr;gap:14px;margin:18px 0 14px} @media(min-width:560px){.home-tools-row{grid-template-columns:1fr 1fr}.home-tools-row>.tc-alarm{grid-column:1/-1}} @media(min-width:900px){.home-tools-row{grid-template-columns:2fr 1fr 1fr;align-items:start}.home-tools-row>.tc-alarm{grid-column:auto}} /* full-width home tide card: LA + Boston typical-pattern charts side by side */ .home-tides-card .tc-head{margin-bottom:12px} .home-tides-charts{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:600px){.home-tides-charts{grid-template-columns:repeat(3,1fr)}} .home-tides-chart{display:block;text-decoration:none;color:var(--text);text-align:center;border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(255,255,255,.02);transition:border-color .15s ease} .home-tides-chart:hover{border-color:var(--accent)} .home-tides-chart svg{width:100%;max-width:460px;height:auto;margin:8px auto 0} .home-tides-city{font-weight:700;font-size:15px} .home-tides-note{font-size:11px;color:var(--muted);margin-top:6px} .home-tides-foot,.home-sun-foot{display:flex;gap:8px;margin-top:14px;flex-wrap:nowrap} /* trim the roomy 30px side padding so both buttons sit on one line on mobile */ .home-tides-foot .tc-open-btn,.home-sun-foot .tc-open-btn{flex:0 1 auto;min-width:0;padding:8px 14px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:360px){.home-tides-foot .tc-open-btn,.home-sun-foot .tc-open-btn{padding:8px 10px;font-size:12px}} @media(max-width:340px){.home-tides-foot,.home-sun-foot{gap:6px}.home-tides-foot .tc-open-btn,.home-sun-foot .tc-open-btn{padding:8px 7px;font-size:11px}} /* compact work + 420 row below the countdown grid (not full width) */ .home-mini-row{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0 26px} @media(min-width:560px){.home-mini-row{grid-template-columns:1fr 1fr;max-width:640px}} /* 420 home card */ .tc-leaf{vertical-align:-4px} .tc-420-big{font-size:min(15cqw,40px);color:#5fd07a;text-shadow:0 0 14px rgba(95,208,122,.45);text-align:center;margin:6px auto 0} .tc-420-btn{flex:0 0 auto;width:auto;padding:8px 22px;font-size:14px;white-space:nowrap;background:#4caf50;border-color:#4caf50;color:#08240f;font-weight:800} .tc-420-btn:hover{background:#5fd07a;border-color:#5fd07a;color:#08240f} /* timer/stopwatch home-card mockups: a bigger LED screen sized to the card * width (so it scales right at every column count) with equal padding on all * four sides between the digits and the black screen edge */ .tc-mini{container-type:inline-size} .tc-big.seg-screen{font-size:min(13cqw,84px);padding:.5em;border-radius:12px;margin:8px auto 0;gap:.06em} /* home-card "Work Countdowns" — one row per countdown: an explicit label * with its live value stacked beneath it on the left, and a small "Go" * button on the right that opens that countdown's own page. A "See all" * link at the bottom (and the whole card, via .tc[data-href]) goes to * /work/. The label+value stack keeps each row narrow enough for the * explicit labels + button to fit in the card's tight top-row column. */ .tc-work .tc-head{margin-bottom:10px} .wk-mini{display:flex;flex-direction:column;gap:10px} .wk-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .wk-info{display:flex;flex-direction:column;min-width:0} .wk-row span{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wk-row b{color:var(--accent);font-variant-numeric:tabular-nums;font-size:15px;line-height:1.2;white-space:nowrap} .btn.tiny{flex:0 0 auto;width:auto;padding:5px 13px;font-size:12px} .wk-all{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--accent);margin-top:14px} .wk-all:hover{text-decoration:underline} .tc-foot{font-size:12px;color:var(--muted);margin-top:10px;text-align:center} .tc-alarm{cursor:pointer;container-type:inline-size;margin:0} .tc-alarm .ac-clock{max-width:none;margin:8px auto 0} .tc-alarm .ac-left{flex:0 1 auto;font-size:min(13cqw,84px)} .tc-alarm .ac-right{font-size:min(3.4cqw,20px)} /* hide only the widget's own (dialog-driven) control row inside #ac-panel; * the home card's real, working button row lives outside #ac-panel as a * sibling and stays visible, picking up the same .ac-controls/.ac-icon * styling for pixel parity with the real alarm page */ .tc-alarm #ac-panel .ac-controls,.tc-alarm .ac-ring,.tc-alarm .ac-brand{display:none} /* the home card has only one main button (Add), so it shares a single row * with the icon buttons instead of stacking (there's room); wraps to its * own line only if the card gets too narrow to fit both */ .tc-alarm .ac-controls{max-width:none;margin:12px 0 0;flex-direction:row;flex-wrap:wrap;align-items:center} .tc-alarm .ac-ctrl-row{width:auto} .tc-alarm .ac-ctrl-main{flex:1 1 140px} .tc-alarm .ac-ctrl-icons{flex:0 0 auto} @supports not (container-type:inline-size){.tc-alarm .ac-left{font-size:min(11vw,64px)}.tc-alarm .ac-right{font-size:14px}} .cd-mini{display:flex;flex-direction:column;gap:6px;font-size:14px} .cd-mini>div{display:flex;justify-content:space-between;gap:10px} .cd-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cd-mini b{color:var(--accent);white-space:nowrap} /*TOOLCSS-END*/ /*TOOLCSS-START*/ /* egg-timer: the countdown sits in the middle of an egg */ .egg-wrap{display:flex;justify-content:center;margin:6px 0 14px} .egg-layout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 30px;margin:6px 0 14px} .egg-layout .egg-wrap{margin:0} .egg-options{min-width:200px} .egg-grp{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px} .egg-grp-h{font-weight:700;font-size:15px;margin:0;min-width:58px} .egg-grp-row{display:flex;flex-wrap:wrap;gap:5px} .egg-grp-row .chip{padding:5px 9px;font-size:13px;text-align:center} .egg-intro{margin:0 0 16px} .egg-intro .sub{margin:0} .egg-more-link{color:var(--accent);font-weight:600;cursor:pointer} .egg-more-link::after{content:"\00a0▾";font-size:10px} .egg-more-toggle{position:absolute;width:1px;height:1px;opacity:0;clip:rect(0 0 0 0)} .egg-more-toggle:checked~.sub .egg-more-link::after{content:"\00a0▴"} .egg-more-body{display:none;font-size:14px;color:var(--muted);line-height:1.5;margin-top:8px} .egg-more-toggle:checked~.egg-more-body{display:block} .egg-more-body ul{margin:8px 0;padding-left:20px} .egg-more-body li{margin:5px 0} .egg-grp:last-child{margin-bottom:0} .egg-card{padding-top:12px;padding-bottom:14px} .egg-card .egg-layout{margin:3px 0 4px} .egg-card .tool-msg:empty{min-height:0;margin:0} /*TOOLCSS-END*/ /* how-it-works: CSS-only tabs (radio + label); selected tab is bold + accent */ .hiw-tabs input{position:absolute;width:1px;height:1px;opacity:0;clip:rect(0 0 0 0);overflow:hidden} .hiw-tablist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px} .hiw-tablist label{cursor:pointer;font-weight:600;font-size:15px;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);user-select:none;transition:.15s} .hiw-tablist label:hover{border-color:var(--accent)} .hiw-panel{display:none} #hiw-countdown:checked~.hiw-tablist label[for=hiw-countdown], #hiw-timer:checked~.hiw-tablist label[for=hiw-timer], #hiw-stopwatch:checked~.hiw-tablist label[for=hiw-stopwatch]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.2)} #hiw-countdown:checked~.hiw-p-countdown, #hiw-timer:checked~.hiw-p-timer, #hiw-stopwatch:checked~.hiw-p-stopwatch{display:block} /*TOOLCSS-START*/ /* world clock: compact cards, 1 col on mobile -> 2 -> 3 on desktop */ .wc-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px} .wc-toolbar input[type=search]{flex:1;min-width:160px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px} .wc-grid{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:560px){.wc-grid{grid-template-columns:1fr 1fr}} @media(min-width:880px){.wc-grid{grid-template-columns:1fr 1fr 1fr}} .wc-card{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:14px;padding:11px 14px;background:var(--card);min-width:0;position:relative} /* user-added cities: subtle accent edge + a remove ✕ */ .wc-user{border-color:rgba(252,211,77,.45)} .wc-del{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:4px} .wc-del:hover{color:var(--text)} .wc-toolbar .btn{width:auto} .wc-icon{font-size:17px;flex:0 0 auto} .wc-info{flex:1 1 auto;min-width:0} .wc-city{font-weight:700;font-size:15px} .wc-tzname{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wc-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wc-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:19px;white-space:nowrap;flex:0 0 auto} .wc-card.wc-night{background:rgba(40,55,82,.32)} .wc-card.wc-you{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .wc-sun{font-size:11px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums} .wc-sun-i{font-size:15px;font-weight:700;line-height:1} /*TOOLCSS-END*/ /*TOOLCSS-START*/ /* alarm clock: red-on-black LED display */ #ac-stage{position:relative;max-width:560px;margin:0 auto} .ac-clock{background:#0b0b0c;border:1px solid #2a2a2a;border-radius:18px;padding:20px 24px;display:flex;align-items:center;justify-content:center;gap:8px;max-width:560px;margin:6px auto 16px;box-shadow:inset 0 3px 16px rgba(0,0,0,.9),0 10px 30px rgba(0,0,0,.3)} /* battery level + charging badge (Battery Status API — Android Chrome/Edge * only; stays hidden everywhere else). Pinned to the corner so it never * disturbs the digit/date layout underneath it. */ .ac-batt{position:absolute;top:10px;right:14px;display:flex;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--seg-on,#ff2b2b);font-family:ui-monospace,Menlo,Consolas,monospace} /* second exit-fullscreen button, top-left (mirrors the battery badge's * top-right placement) — a visible, guaranteed way out, since the * browser/OS's own "swipe to exit fullscreen" hint can't be controlled or * removed from the page. Full screen only. */ .ac-close-tl{display:none} .ac-batt-bolt{display:none;flex:0 0 auto} .ac-batt.charging .ac-batt-bolt{display:block} /* font-size on .ac-left scales the whole digital readout (digits use em units); * AM/PM sits just to the right of the digits, top-aligned, with a tight gap */ .ac-left{flex:1 1 auto;display:flex;align-items:flex-start;justify-content:center;gap:.08em;min-width:0;font-size:clamp(46px,16vw,112px)} .ac-ampm{color:var(--seg-on,#ff2b2b);font-weight:800;font-size:.2em;margin-top:.22em;letter-spacing:1px;font-family:ui-monospace,Menlo,Consolas,monospace} .ac-time{display:flex;align-items:center;gap:.1em} /* 7-segment digit: 7 rectangular cells; unlit segments stay faintly visible */ .dig{position:relative;display:inline-block;width:.58em;height:1em} .seg{position:absolute;background:var(--seg-off,#180505)} .seg-a,.seg-g,.seg-d{clip-path:polygon(13% 0,87% 0,100% 50%,87% 100%,13% 100%,0 50%)} .seg-b,.seg-c,.seg-e,.seg-f{clip-path:polygon(0 14%,50% 0,100% 14%,100% 86%,50% 100%,0 86%)} .seg.on{background:var(--seg-on,#ff2b2b);box-shadow:0 0 .12em var(--seg-glow,rgba(255,43,43,.65))} /* Hour-tens digit only ever shows blank or "1" (hours 10-12) — like an old * digital alarm clock, where that position physically only had room for a * narrow "1", not a full 7-segment character. Only segments b/c (the "1" * shape) exist there; the rest are never rendered, on or off. */ .dig[data-d="h1"] .seg-a,.dig[data-d="h1"] .seg-d,.dig[data-d="h1"] .seg-e,.dig[data-d="h1"] .seg-f,.dig[data-d="h1"] .seg-g{display:none} .seg-a{top:0;left:.1em;width:.38em;height:.1em} .seg-g{top:.45em;left:.1em;width:.38em;height:.1em} .seg-d{top:.9em;left:.1em;width:.38em;height:.1em} .seg-f{top:.1em;left:0;width:.1em;height:.35em} .seg-b{top:.1em;right:0;width:.1em;height:.35em} .seg-e{top:.55em;left:0;width:.1em;height:.35em} .seg-c{top:.55em;right:0;width:.1em;height:.35em} .ac-colon{display:inline-flex;flex-direction:column;justify-content:center;gap:.24em;height:1em;margin:0 .03em} .ac-colon i{width:.1em;height:.1em;border-radius:50%;background:var(--seg-on,#ff2b2b);box-shadow:0 0 .1em var(--seg-glow,rgba(255,43,43,.6))} /* decimal point for the stopwatch (hundredths) */ .seg-dot{align-self:flex-end;width:.12em;height:.12em;border-radius:50%;margin:0 .04em .06em;background:var(--seg-on,#ff2b2b);box-shadow:0 0 .1em var(--seg-glow,rgba(255,43,43,.6))} /* shared LED "screen": black panel + light blue-green digits, for the timer * and stopwatch (font-size scales the whole readout; digits use em units) */ .seg-screen{--seg-on:#3df2c0;--seg-off:#0e3a33;--seg-glow:rgba(61,242,192,.55); display:inline-flex;align-items:center;justify-content:center;gap:.04em; background:#0b0b0c;border:1px solid #2a2a2a;border-radius:16px;padding:.16em .26em; box-shadow:inset 0 3px 16px rgba(0,0,0,.9),0 10px 30px rgba(0,0,0,.3); font-size:clamp(44px,15vw,108px);line-height:1;margin:4px auto;max-width:100%} .seg-label{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px} .ac-right{flex:0 0 auto;color:var(--seg-on,#ff2b2b);min-width:96px;border-left:1px solid #3a1010;padding-left:14px;margin-left:2px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;font-family:ui-monospace,Menlo,Consolas,monospace} .ac-date{font-size:19px;font-weight:800;letter-spacing:1px} .ac-alarms{font-size:14px;line-height:1.5;font-weight:700;border-top:1px solid #3a1010;margin-top:7px;padding-top:7px} .ac-alarm-row{white-space:nowrap} .ac-dim{color:var(--seg-on,#ff2b2b);font-weight:400;font-style:italic} .ac-ring{max-width:560px;margin:0 auto 14px;background:var(--accent);color:#fff;border-radius:12px;padding:12px 16px;text-align:center;font-weight:800;font-size:18px} .ac-wake-note{max-width:560px;margin:-8px auto 18px;text-align:center;font-size:13px;color:var(--muted)} .ac-wake-note svg{width:1.05em;height:1.05em;vertical-align:-.16em;margin:0 1px} body.ac-fs .ac-controls{transition:opacity .45s ease,visibility .45s ease} body.ac-fs.ac-idle .ac-controls{opacity:0;visibility:hidden;pointer-events:none} body.ac-alarming .ac-controls{opacity:1!important;visibility:visible!important;pointer-events:auto!important} /* one compact row: buttons sized to their labels (not stretched full-width), * centered. Small text buttons (Set/Edit) get tight padding so all fit; if the * row runs out of room they shrink and "Stop alarm" wraps to two lines before * the row itself breaks. Only an extremely narrow screen wraps to a new line. */ /* Control bar: two rows — Add/Edit + Stop alarm (50/50), then a row of small * icon buttons (full screen, share, colour, show-on-top, help). */ .ac-controls{display:flex;flex-direction:column;gap:8px;max-width:560px;width:100%;margin:0 auto 18px} .ac-ctrl-row{display:flex;justify-content:center;gap:8px;width:100%} .ac-ctrl-main .btn{flex:1 1 0} .ac-controls .btn{min-width:0;padding:10px 12px;line-height:1.15;font-size:15px;font-weight:700;background:#0b0b0c;color:var(--seg-on,#ff2b2b);border:1px solid var(--ac-line,#a02828);box-shadow:none;border-radius:10px} .ac-controls .btn:hover{border-color:var(--seg-on,#ff2b2b)} #ac-close{display:none} body.ac-fs #ac-close{display:inline-flex;align-items:center;justify-content:center} /* colour-cycle button: a muted red→purple rainbow filling the box (a dark * tint layered on top keeps it from glowing next to the LED display) */ /* .ac-controls .btn.ac-swatch (3 selectors) intentionally outweighs the * .ac-controls .btn base rule (2 selectors) regardless of source order */ .ac-controls .btn.ac-swatch{background:linear-gradient(rgba(5,5,8,.42),rgba(5,5,8,.42)),linear-gradient(135deg,#d5342e,#d58a2e,#c9c92e,#2eb45f,#2e6ed5,#8a2ed5);border-color:#4a4f5e} .ac-controls .btn.ac-swatch:hover{background:linear-gradient(rgba(5,5,8,.28),rgba(5,5,8,.28)),linear-gradient(135deg,#d5342e,#d58a2e,#c9c92e,#2eb45f,#2e6ed5,#8a2ed5);border-color:#7a8098} body.ac-alarming #ac-stop{background:var(--seg-on,#ff2b2b);color:#000;border-color:var(--seg-on,#ff2b2b);font-weight:800} /* selectable LED colour (persisted); the swatch button cycles red -> purple -> * blue -> green -> yellow -> orange -> red (rainbow order, no white). * Defined on both #ac-panel (so a cloned panel keeps its colour when popped * into a Picture-in-Picture window) and body (so the colour also reaches * sibling sections outside #ac-panel, like the alarm list and dialogs). * (A brighter red was tried to help PageSpeed Insights' contrast check, but * it didn't move the score and looked worse, so it's back to the original.) */ #ac-panel,body{--seg-on:#ff2b2b;--seg-off:#180505;--seg-glow:rgba(255,43,43,.6);--ac-line:#a02828} #ac-panel[data-c="purple"],body[data-c="purple"]{--seg-on:#b855f7;--seg-off:#13061b;--seg-glow:rgba(184,85,247,.5);--ac-line:#7c3aed} #ac-panel[data-c="blue"],body[data-c="blue"]{--seg-on:#38bdf8;--seg-off:#05131a;--seg-glow:rgba(56,189,248,.5);--ac-line:#1e6f9e} #ac-panel[data-c="green"],body[data-c="green"]{--seg-on:#35e06a;--seg-off:#051a0d;--seg-glow:rgba(53,224,106,.5);--ac-line:#1f7a40} #ac-panel[data-c="yellow"],body[data-c="yellow"]{--seg-on:#facc15;--seg-off:#1a1703;--seg-glow:rgba(250,204,21,.5);--ac-line:#a16207} #ac-panel[data-c="orange"],body[data-c="orange"]{--seg-on:#fb923c;--seg-off:#1a0e03;--seg-glow:rgba(251,146,60,.5);--ac-line:#c2410c} /* Mobile portrait: stack the readout. The digits fill the full width (so they * can be much bigger) with AM/PM at their top-right; below a divider sits the * date on the left and the alarms on the right. The homepage mini-card clock * keeps its compact side-by-side row (overrides below). */ @media(max-width:560px){ .ac-clock{flex-direction:column;align-items:stretch;gap:9px;padding:18px 16px} .ac-left{font-size:clamp(66px,24vw,160px)} /* date and alarms sit together, centered under the digits, split by a vertical divider (date on the left, alarms on the right) */ .ac-right{flex-direction:row;justify-content:center;align-items:flex-start;gap:14px;min-width:0;align-self:auto;border-left:0;border-top:1px solid #3a1010;padding-left:0;padding-top:9px;margin-left:0} .ac-date{font-size:16px;align-self:center} .ac-alarms{font-size:13px;border-top:0;margin-top:0;padding-top:0;border-left:1px solid #3a1010;padding-left:14px;text-align:left} .tc-alarm .ac-clock{flex-direction:row;align-items:center;padding:15px 14px;gap:6px} .tc-alarm .ac-right{flex-direction:column;justify-content:center;min-width:78px;border-top:0;border-left:1px solid #3a1010;padding-top:0;padding-left:7px} .tc-alarm .ac-alarms{border-top:1px solid #3a1010;margin-top:5px;padding-top:5px;text-align:left;font-size:12px} .tc-alarm .ac-date{font-size:15px} } /* full-screen / view controls */ .ac-controls .ac-icon{flex:0 0 auto;width:44px;height:44px;padding:0} .ac-icon svg{display:block;margin:0 auto} #ac-close{display:none} .ac-editbtn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-weight:600;padding:5px 9px;cursor:pointer;flex:0 0 auto} .ac-editbtn:hover{border-color:var(--accent)} /* in any view (full screen or compact): swap the icons for a Close button */ body.ac-view #ac-fs,body.ac-view #ac-ontop{display:none} body.ac-view #ac-close{display:inline-flex} /* full-screen bedside view (real fullscreen, big, page hidden) */ body.ac-fs .brand,body.ac-fs h1,body.ac-fs .sub,body.ac-fs .ac-ring,body.ac-fs .ac-list,body.ac-fs .tool-about,body.ac-fs .footer{display:none} body.ac-fs .wrap{max-width:none;margin:0;padding:0} body.ac-fs #ac-stage{position:fixed;inset:0;max-width:none;margin:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:9998;padding:64px 16px 84px} body.ac-fs .ac-clock{border:0;box-shadow:none;background:transparent;max-width:none;padding:0;gap:min(4vw,4vh);aspect-ratio:auto;transform:translate(var(--burn-x,0px),var(--burn-y,0px))} /* full-screen sizing is width-driven (vw) so the clock fills the screen, * with a vh cap so it can't outgrow short/landscape screens */ body.ac-fs .ac-left{font-size:min(23.5vw,36vh)} body.ac-fs .ac-right{min-width:0;padding-left:min(3.5vw,3.5vh);font-size:min(5.4vw,7.4vh)} body.ac-fs .ac-date{font-size:1em} body.ac-fs .ac-alarms{font-size:.8em;margin-top:.45em;padding-top:.45em} /* Pinned to the actual screen corner, always visible (does not fade with * controls when idle). #ac-stage's own top padding keeps the clock content * out of this corner regardless of aspect ratio; the backing chip is just * for contrast against the digits' glow. */ body.ac-fs .ac-batt{position:fixed;top:16px;right:16px;font-size:clamp(17px,2.4vw,24px);background:rgba(0,0,0,.78);padding:5px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.14);z-index:10001} body.ac-fs .ac-close-tl{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:16px;left:16px;width:32px;height:32px;padding:0;background:rgba(0,0,0,.78);color:var(--seg-on,#ff2b2b);border:1px solid var(--ac-line,#a02828);border-radius:8px;cursor:pointer;z-index:10001} body.ac-fs .ac-controls{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(92vw,760px);max-width:none;margin:0;z-index:9999;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center} body.ac-fs .ac-ctrl-row{width:auto} body.ac-fs .ac-ctrl-main{flex:1 1 220px} body.ac-fs .ac-ctrl-icons{flex:0 0 auto} /* full-screen bedside mode: a small, permanent (not idle-faded) legal-link * row at the very bottom, so it's still there once .ac-controls fades away * and it's "just the clock" — unlike .ac-controls this never hides. */ .ac-fs-legal{display:none} body.ac-fs .ac-fs-legal{display:block;position:fixed;left:50%;bottom:5px;transform:translateX(-50%);z-index:9999;margin:0;font-size:11px;letter-spacing:.2px;color:rgba(255,255,255,.35);text-align:center;white-space:nowrap} body.ac-fs .ac-fs-legal a{color:rgba(255,255,255,.45);text-decoration:none} body.ac-fs .ac-fs-legal a:hover{color:rgba(255,255,255,.75);text-decoration:underline} /* while the clock is popped out, the page keeps a live display-only clone */ .ac-clone{display:block} .ac-clone .ac-controls,.ac-clone .ac-brand,.ac-clone .ac-fs-legal{display:none} /* always-on-top Picture-in-Picture window */ .ac-pip{margin:0;background:#0b0b0c;display:flex;align-items:center;justify-content:center;min-height:100vh} .ac-pip #ac-panel{position:static;left:auto;top:auto;right:auto;bottom:auto;width:100%;height:auto;border:0;box-shadow:none;resize:none;padding:10px;container-type:inline-size} .ac-pip #ac-fs,.ac-pip #ac-close,.ac-pip #ac-ontop{display:none} .ac-pip .ac-left{font-size:15cqw} .ac-pip .ac-batt{font-size:2.8cqw;top:2cqw;right:2cqw} .ac-pip .ac-right{display:flex;min-width:0;border-left:1px solid #3a1010;padding-left:4cqw;font-size:4cqw} .ac-pip .ac-date{font-size:1em} .ac-pip .ac-alarms{font-size:.78em;margin-top:3px;padding-top:3px} .ac-pip .ac-brand{display:flex} .ac-pip .ac-controls{position:static;width:100%;max-width:none;margin:8px 0 0;gap:5px} .ac-pip .ac-controls .btn{font-size:13px;padding:7px 3px} /* popup-clock branding + disclaimer link (compact + pip only) */ .ac-brand{display:none;justify-content:center;gap:12px;margin-top:9px;font-size:11px;letter-spacing:.3px} .ac-brand a{color:#a05a5a;text-decoration:none} .ac-brand a:hover{color:#ff2b2b;text-decoration:underline} /* ?popout=1 tap prompt (PiP needs a user gesture) */ .ac-pohint{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(0,0,0,.86);color:#fff;font-size:20px;font-weight:700;line-height:1.5;z-index:99999;cursor:pointer;padding:24px} .ac-pohint-box{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:340px} .ac-pohint .ac-bedside-go{width:auto;padding:14px 28px;font-size:18px;background:#0b0b0c;color:#ff2b2b;border:2px solid #ff2b2b;border-radius:10px} .ac-pohint .ac-bedside-skip{width:auto;padding:10px 20px;font-size:14px;font-weight:600;background:none;color:#cfd2da;border:1px solid rgba(255,255,255,.3);border-radius:10px} .ac-pohint .ac-bedside-skip:hover{color:#fff;border-color:#fff} .ac-pohint-box p{font-size:14px;font-weight:400;color:#cfd2da;line-height:1.55;margin:0} .tc-alarm-note{font-size:11px;color:var(--muted);text-align:center;margin:8px 0 0} .tc-alarm-note svg{width:1.05em;height:1.05em;vertical-align:-.16em;margin:0 1px} /* edit-dialog list scrolls if long */ #ac-editlist{max-height:50vh;overflow:auto;margin-bottom:12px} .ac-list{max-width:560px;margin:0 auto} .ac-li{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--card)} .ac-li-on{flex:0 0 auto;display:flex} .ac-tog{accent-color:var(--seg-on,#ff2b2b)} .ac-li-main{flex:1 1 auto;min-width:0;font-size:15px} .ac-li-rep{display:block;font-size:12px;color:var(--muted)} .ac-del{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px} .ac-del:hover{color:var(--accent)} .ac-dialog{border:1px solid var(--border);border-radius:16px;background:var(--menu-bg,#15151b);color:var(--text);padding:0;max-width:380px;width:92%;max-height:92vh;max-height:92dvh;overflow-y:auto} .ac-dialog::backdrop{background:rgba(0,0,0,.55)} .ac-form{padding:18px} /* short viewports (e.g. full-screen landscape): compress the form so it fits * without the top/bottom running off-screen; the dialog also scrolls. */ @media (max-height:560px){ .ac-form{padding:12px 14px} .ac-form h2{margin:0 0 6px} .ac-form label{margin:8px 0 3px} .ac-form input,.ac-form select,.ac-form textarea{padding:7px 10px;font-size:15px} .ac-vol-hint{margin:8px 0 2px} .ac-form-btns{margin-top:8px} } .ac-form h2{margin:0 0 14px} .ac-form label{display:block;font-size:14px;font-weight:600;margin:0 0 12px} .ac-form input[type=time],.ac-form input[type=text],.ac-form input[type=number],.ac-form select{width:100%;margin-top:5px;padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:15px} .ac-form input[readonly]{color:var(--muted);cursor:default} .ac-f-days{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} .ac-f-days label{margin:0} .ac-f-days input{position:absolute;opacity:0;pointer-events:none} .ac-f-days span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;cursor:pointer;font-size:13px;font-weight:600} .ac-f-days input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff} .ac-f-mw{display:flex;gap:8px} .ac-form-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px} /* three equal-width buttons (Cancel · Test · Save) */ .ac-btns-3 .btn{flex:1 1 0;min-width:0;white-space:nowrap;padding:11px 8px} .ac-vol-hint{font-size:12px;color:var(--muted);line-height:1.5;margin:14px 0 4px} .ac-label-hint{font-size:12px;color:var(--muted);line-height:1.5;margin:-8px 0 4px} /*TOOLCSS-END*/ /*TOOLCSS-START*/ .egg{width:230px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; background:radial-gradient(circle at 50% 36%,#fffefa,#fdeccd 68%,#f3d6a4); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; box-shadow:inset -14px -24px 44px rgba(176,134,64,.28),inset 10px 12px 26px rgba(255,255,255,.6),0 14px 30px rgba(0,0,0,.18)} .egg .tool-time{font-size:46px;color:#5b4327;text-shadow:0 1px 0 rgba(255,255,255,.55);margin:0} .egg .tool-controls{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px} .egg .tool-controls .btn.secondary{background:rgba(91,67,39,.1);color:#5b4327;border-color:rgba(91,67,39,.4)} .egg-card.tool-done .egg{animation:egg-shake .5s ease-in-out infinite} @keyframes egg-shake{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} @media (max-width:600px){.egg{width:196px;height:255px}.egg .tool-time{font-size:40px}} /*TOOLCSS-END*/ .amz-card .amz-h{font-size:17px;margin:0 0 4px} .amz-card .amz-d{font-size:14px;color:var(--muted);margin:0 0 8px} .amz-links{display:flex;flex-wrap:wrap;gap:8px} .amz-disc{font-size:12px;color:var(--muted);margin:10px 0 0} .views{text-align:center;color:var(--muted);font-size:13px;margin:10px 0;min-height:19px} .cta{text-align:center;margin:26px 0 10px} .ad-slot{margin:22px auto;max-width:336px;min-height:90px;border:1px dashed var(--border);border-radius:12px; display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px} .more{margin:18px auto 4px;max-width:520px;text-align:center} .more-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px} .more-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .more-links a{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:7px 14px; font-size:13px;font-weight:600;color:var(--text);text-decoration:none;background:rgba(0,0,0,.18)} /* chip walls inside cards (notable works, state registration links) */ .card .works-links{justify-content:flex-start;margin-top:4px} .footer{text-align:center;color:var(--muted);font-size:12px;margin-top:30px} .footer a{color:var(--muted)} .footer.copyright{margin-top:6px} .footer.sitelinks,.footer.trademark{margin-top:6px} /* site-wide "share an idea" box (injected above the footer by build-inline) */ .suggest-box{max-width:560px;margin:40px auto 0;border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:hidden} .suggest-box>summary{list-style:none;cursor:pointer;padding:14px 18px;font-size:14px;font-weight:600;color:var(--text);text-align:center;line-height:1.5} .suggest-box>summary::-webkit-details-marker{display:none} .suggest-box>summary:hover{background:rgba(255,255,255,.05)} .suggest-box .arrow{color:var(--accent);white-space:nowrap} .suggest-form{padding:0 18px 18px;text-align:left} .suggest-form .btn{margin-top:16px} .suggest-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px} .suggest-note{margin-top:10px;min-height:14px} /* GDPR/CCPA privacy notice — a small dismissible strip fixed to the very bottom, injected on every page (build-inline.mjs) but only unhidden by its own script for a visitor whose /api/geo country/region requires it (EEA/UK/Switzerland or California). Hidden by the [hidden] attribute otherwise, so it never affects layout for anyone else. Deliberately compact: one wrapping row, 12px text, tiny self-contained buttons, an × to dismiss — never a tall banner. */ .privacy-notice{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-wrap:wrap; align-items:center;justify-content:center;gap:6px 12px;padding:8px 36px 8px 12px; background:#11141f;border-top:1px solid var(--border);font-size:12px} .privacy-notice[hidden]{display:none} .privacy-text{flex:0 1 auto;margin:0;line-height:1.4;color:var(--muted)} .privacy-actions{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .privacy-actions a{color:var(--accent);font-size:12px} .privacy-actions button{font:inherit;font-size:12px;font-weight:700;padding:4px 12px;border-radius:8px; border:1px solid var(--border);background:var(--accent);color:#111;cursor:pointer} .privacy-actions button.plain{background:transparent;color:var(--text)} .privacy-close{position:absolute;right:2px;top:50%;transform:translateY(-50%);background:none;border:0; color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:8px 10px} .privacy-close:hover{color:var(--text)} /* home page "what are you counting down to?" search/jump box */ .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .home-search{position:relative;max-width:640px;margin:6px 0 26px;padding:14px 16px 16px;background:var(--card);border:1.5px solid var(--accent);border-radius:14px;box-shadow:0 0 0 4px rgba(252,211,77,.08)} .hs-label{display:block;font-weight:800;font-size:15px;margin:0 0 9px} .hs-row{display:flex;gap:8px} .hs-row input{flex:1;min-width:0} .hs-btn{flex:0 0 auto;width:auto;font-weight:700} /* suggestion nudge under the home search box */ .home-suggest{max-width:640px;margin:-16px 0 26px;font-size:14px;color:var(--muted)} .tc-ico{vertical-align:-4px} .nav-ico{vertical-align:-4px;margin-right:2px;color:var(--accent)} /* Display type: a rounded system stack for headings — zero downloads, zero * render blocking (SF Rounded on Apple, falls back to the normal system UI). */ h1,h2,.tc-head,.hs-label{font-family:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} h1{letter-spacing:-.015em} /* Unified hover on interactive cards: subtle accent edge + lift */ .tc{transition:border-color .15s ease,transform .15s ease} .tc[data-href]:hover,a.tc:hover{border-color:rgba(252,211,77,.45);transform:translateY(-1px)} /* event-page byline (E-E-A-T signal) */ .updated{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0;font-style:italic} .nav-dd .menu .nav-ico{color:var(--accent)} .trend-sub{font-size:13px;color:var(--muted);margin:-4px 0 10px} /* /sun/ pages: stat tiles + 7-day table */ .sun-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .sun-tile{border:1px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center;background:rgba(255,255,255,.03)} .sun-tile .sun-lab{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px} .sun-tile b{font-size:20px;font-variant-numeric:tabular-nums} .sun-main{border-color:rgba(252,211,77,.5)} .sun-main b{color:var(--accent)} .sun-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums} .sun-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .sun-table th,.sun-table td{padding:7px 10px;border-bottom:1px solid var(--border)} .sun-dial-card{display:flex;flex-direction:column;align-items:center} .sun-dial-card svg{width:100%;max-width:380px;height:auto} .sun-world summary{cursor:pointer;list-style:none} .sun-world summary h2{display:inline;margin:0} .sun-world summary::after{content:" ▾";color:var(--muted)} .sun-world[open] summary::after{content:" ▴"} .sun-world .timer-presets{margin-top:12px} /* /sun/ saved-cities list + search extras; year chart sizing */ .sun-ok{color:#4ade80;font-weight:700} .sun-mini{padding:3px 9px;font-size:12px;margin-left:8px} .sun-myhead{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px;font-weight:800;font-size:14px} .sun-myhead .chip{width:auto} .sun-myitem{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;margin-bottom:5px} .sun-myitem a{font-weight:700;color:var(--text);text-decoration:none;flex:1;min-width:0} .sun-def{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap} .sun-def input{width:auto;margin:0;accent-color:var(--accent);cursor:pointer} #sun-results li{display:flex;align-items:center} #sun-results a{flex:1} #sun-year{width:100%;max-width:660px;height:auto} /* dial left + compact stats right on city pages; stacks on mobile */ .sun-dial-card{flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center} .sun-dial-wrap{flex:0 1 300px;max-width:300px;text-align:center} .sun-dial-wrap svg{width:100%;height:auto} .sun-datewrap select{width:auto;margin:0;padding:6px 9px;font-size:13px} .sun-side{flex:1 1 230px;min-width:220px;display:flex;flex-direction:column;gap:6px} .sun-srow{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:10px;padding:6px 11px;font-size:13px} .sun-srow span{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .sun-srow b{font-size:16px;font-variant-numeric:tabular-nums} .sun-srow.sun-main{border-color:rgba(252,211,77,.5)} .sun-srow.sun-main b{color:var(--accent)} /* locally-computed seasonal facts list (direction, trend, next solstice) */ .sun-facts{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px} .sun-facts li{font-size:14px;line-height:1.5} /* next-solar-event highlight under the answer sentence (live countdown via JS) */ .sun-next{display:inline-block;margin:2px 0 10px;padding:6px 14px;border-radius:999px;background:rgba(252,211,77,.12);border:1px solid rgba(252,211,77,.35);color:var(--text);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums} /* phones: a smaller dial keeps the sunrise/sunset numbers above the fold */ @media (max-width:600px){ .sun-dial-card{gap:10px} .sun-dial-wrap{flex-basis:230px;max-width:230px} } /* hub mini sundials */ .sun-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .sun-mini-card{border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;background:rgba(255,255,255,.02)} .sun-mini-card svg{width:100%;max-width:120px;height:auto} .sun-mini-name{display:block;font-weight:700;color:var(--text);text-decoration:none;font-size:13px;margin-top:6px} .sun-mini-name:hover{color:var(--accent)} .sun-mini-times{font-size:12px;color:var(--text);margin-top:2px;font-variant-numeric:tabular-nums} .sun-mini-diff{font-size:11px;color:var(--muted);margin-top:2px} .sun-mini-link{display:block;text-decoration:none} .sun-mini-link:hover .sun-mini-name{color:var(--accent)} .sun-mini-link .sun-mini-name{display:block;font-weight:700;color:var(--text);font-size:13px;margin-top:6px} /* homepage sunrise/sunset card: much smaller dials than the /sun/ hub's * (auto-fill on a small min-width, not the hub's fixed 150px, so 2-3 fit * per row even on a phone instead of one oversized card per row) */ #home-sun-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px} #home-sun-grid .sun-mini-card{padding:6px} #home-sun-grid .sun-mini-card svg{max-width:72px} #home-sun-grid .sun-mini-name,#home-sun-grid .sun-mini-link .sun-mini-name{font-size:11px;margin-top:4px} #home-sun-grid .sun-mini-times{font-size:10.5px;margin-top:1px} .sun-datewrap input[type=date]{width:auto;margin:0;padding:6px 9px;font-size:13px} .td-none{padding:4px 2px;color:var(--muted);font-size:13px;margin:0} /* lift the card while a sun panel/dropdown is open (cards are stacking * contexts — same fix as the tides admin card) */ .card:has(#sun-mypanel:not([hidden])),.card:has(#sun-results:not([hidden])){position:relative;z-index:40} .hs-results{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:30;background:var(--menu-bg);border:1px solid var(--border);border-radius:12px;max-height:340px;overflow:auto;box-shadow:0 14px 34px rgba(0,0,0,.45)} .hs-results li{margin:0} .hs-results a{display:block;padding:10px 12px;border-radius:8px;color:var(--menu-text);text-decoration:none;font-weight:600} .hs-results a:hover,.hs-results a.active{background:var(--card);color:var(--accent)} .hs-empty{padding:10px 12px;color:var(--muted);font-size:13px} /* "Happening soon" rail on the home page */ .rail-head{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 10px} .soon-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;margin:0 0 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .soon-card{flex:0 0 auto;width:150px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--card);text-decoration:none;color:var(--text)} .soon-card:hover{border-color:var(--accent)} .soon-days{font-size:12px;font-weight:700;color:var(--accent)} .soon-label{font-weight:600;line-height:1.25} .soon-date{font-size:12px;color:var(--muted)} /* filter chips (events calendar) */ .cal-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .chip{cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text)} .chip.active{background:var(--accent);color:var(--accent-text);border-color:transparent} .cal-day{display:inline-block;min-width:1.6em;margin-right:8px;font-weight:700;color:var(--accent)} .cal-badge{text-transform:none} /* "Month Day" date prefix (home "Upcoming events"): fixed width so the event * names line up in a column regardless of 1- vs 2-digit days. */ .cal-md{display:inline-block;min-width:3.6em;margin-right:10px;font-weight:700;color:var(--accent);white-space:nowrap} /* ranked lists ("most-watched" page + home strip) */ .rank-list li{gap:8px} .rank-list .rank{min-width:1.6em;font-weight:700;color:var(--accent);text-align:right} .rank-list .rank:empty{display:none} .rank-list .views{font-size:12px;color:var(--muted);white-space:nowrap} /* copy-link button in the event-page share row */ .ico.copy{cursor:pointer;font:inherit;background:rgba(255,255,255,.12);color:var(--text);border-color:var(--border)} .ico.copy.ok{background:var(--accent);color:var(--accent-text);border-color:transparent} /* product link + Amazon Associate "Buy on Amazon" button (event-page Highlights) */ /* each album is a full-width row: name on the left, its "Buy on Amazon" link on * the same line at the right. One album per line reads cleaner and is more * useful on mobile than the old stacked pills. */ .card .works-links:has(.shop-pair){flex-direction:column;align-items:stretch;gap:10px} .shop-pair{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px} .shop-pair .buy-amazon{flex:0 0 auto} .buy-amazon{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;line-height:1; padding:8px 13px;border-radius:10px;background:#ff9900;color:#1a1a1a;text-decoration:none;border:1px solid transparent} .buy-amazon:hover{filter:brightness(1.06);text-decoration:none} .buy-amazon svg{flex:0 0 auto} /* wall of orange Amazon buttons (420 kit, work-page picks) — not the pill/chip * style of .more-links, so the buttons keep the recognizable Amazon orange */ .amz-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .affiliate-note{font-size:11px;color:var(--muted);margin:12px 0 0;font-style:italic} /* media tiles (420 music/movie cards): consistent square SVG art, name below, * one link per tile so art and name both go to the Amazon search */ .amz-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin:14px 0 4px} .amz-tile{display:block;text-decoration:none;text-align:center} .amz-tile svg{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.35)} .amz-tile-name{display:block;margin-top:7px;font-size:12.5px;font-weight:700;color:var(--text);line-height:1.25} .amz-tile-sub{display:block;margin-top:2px;font-size:11px;color:var(--muted)} .amz-tile:hover .amz-tile-name{text-decoration:underline} .amz-tile:hover svg{filter:brightness(1.08)} /* 420 music rows: title wraps inside its own block; the streaming icons * stay on the same line, never wrapping below */ .m420-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px} .m420-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 12px} .m420-row>svg{flex:0 0 auto} .m420-name{flex:1;min-width:0;font-weight:700;line-height:1.3} .m420-artist{color:var(--muted);font-weight:400;font-size:13px} .m420-links{display:flex;gap:9px;flex:0 0 auto;align-items:center} .m420-links a{display:inline-flex;line-height:0;border-radius:50%;transition:transform .12s} .m420-links a:hover{transform:scale(1.15)} /* musician birthday-page song rows (lib.mjs songRow): same layout as the * 420 music rows above, reused sitewide via a generic class name */ .song-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px} .song-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:8px 12px} .song-row>svg{flex:0 0 auto} .song-name{flex:1;min-width:0;font-weight:700;line-height:1.3} .song-name a{color:var(--text)} .song-links{display:flex;gap:2px;flex:0 0 auto;align-items:center} .song-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:0;border-radius:50%;transition:transform .12s} .song-links a:hover{transform:scale(1.1)} /* Artist Music Module (curated songs list, discography link, optional tour * line) — see seo/tools/artist-music.mjs */ .amm-more{margin:14px 2px 0;font-weight:700} .amm-tour{margin:14px 2px 0} /* birthday-page "celebrate by giving" callout */ .give-cta{border:1px solid rgba(252,211,77,.4);border-radius:12px;padding:12px 16px} .give-line{margin:6px 0 0;font-size:15px;line-height:1.5} .give-line a{font-weight:700} /* collapsible FAQ on timer pages (visible Q&A for FAQ rich results) */ .tool-faq .faq-item{border-bottom:1px solid var(--border);padding:4px 0} .tool-faq .faq-item:last-child{border-bottom:none} .tool-faq summary{cursor:pointer;font-weight:700;padding:8px 2px;list-style:none} .tool-faq summary::-webkit-details-marker{display:none} .tool-faq summary::after{content:" +";color:var(--muted);float:right} .tool-faq .faq-item[open] summary::after{content:" –"} .tool-faq .faq-item p{margin:2px 2px 10px;color:var(--muted);line-height:1.5} @media (max-width:420px){ .unit{min-width:62px;padding:12px 4px} .unit .num{font-size:32px} .presets{grid-template-columns:repeat(3,1fr)} } @media (min-width:560px){ h1{font-size:32px} } /*TOOLCSS-START*/ /* ---- /tides/ tool (stripped from non-tide pages by build-inline) ---- */ /* a card with an open dropdown (search results / saved) must paint above * the following cards — cards are stacking contexts, so lift the card */ .card:has(#td-results:not([hidden])),.card:has(#nm-results:not([hidden])),.card:has(#td-mypanel:not([hidden])){position:relative;z-index:40} .td-search{position:relative;display:flex;gap:8px;flex-wrap:wrap;align-items:center} #td-mypanel{min-width:280px} .td-savedok{color:#4ade80;font-weight:700;font-size:13px} .td-cur .chip{margin-left:2px} .td-datenav{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} /* On phones the 5 chart-nav buttons (« Week ‹ Day Today Day › Week ») wrap to a * second line; keep them on ONE row by shrinking them to share the width. */ @media(max-width:480px){ .td-datenav{flex-wrap:nowrap;gap:6px} .td-datenav .chip{flex:1 1 0;min-width:0;padding:7px 4px;font-size:12px;text-align:center;overflow:hidden;text-overflow:ellipsis} } @media(max-width:360px){ .td-datenav{gap:4px} .td-datenav .chip{font-size:11px;padding:7px 2px} } .td-chartset{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:10px} .td-chartset .td-cs-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .td-chartset label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600;color:var(--muted)} .td-chartset select{width:auto;margin:0;padding:6px 10px;font-size:14px} .td-chartset input[type=checkbox]{width:auto;margin:0} .td-savedgo{flex:1;text-align:left;padding:7px 8px;background:none;border:0;border-radius:8px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit} .td-savedgo:hover{background:rgba(255,255,255,.08)} .td-savedx{flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:50%;background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.4);cursor:pointer;font-size:13px;line-height:1} .td-panel .td-none{padding:4px 2px;color:var(--muted);font-size:13px;margin:0} /* lift the card while a sun panel/dropdown is open (cards are stacking * contexts — same fix as the tides admin card) */ .card:has(#sun-mypanel:not([hidden])),.card:has(#sun-results:not([hidden])){position:relative;z-index:40} .td-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;list-style:none;margin:0;padding:6px;background:#171a26;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.55);max-height:300px;overflow:auto} .td-results button{display:block;width:100%;text-align:left;padding:9px 10px;background:none;border:0;border-radius:8px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit} .td-results button:hover{background:rgba(255,255,255,.08)} .td-results .td-none{padding:8px 10px;color:var(--muted);font-size:13px} .td-cur{margin:12px 0 0;font-size:14px;color:var(--muted)} .td-curid{margin:1px 0 4px;font-size:12px;color:var(--muted)} .td-beta{margin:14px 0;font-size:13px;line-height:1.55} .td-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px} .td-next{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center} .td-next span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .td-next b{display:block;font-size:24px;margin:4px 0 2px;font-variant-numeric:tabular-nums} .td-next em{display:block;font-style:normal;font-size:13px;color:var(--muted)} .td-chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px} .td-sellab{font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap} .td-selr{text-align:right} .td-movebtn{position:absolute;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:#0b1026;border:3px solid #0b1026;box-shadow:0 0 0 1px var(--border),0 2px 8px rgba(0,0,0,.4);cursor:grab;touch-action:none;z-index:4;user-select:none;-webkit-user-select:none} .td-movebtn svg{pointer-events:none} .td-movebtn.on{cursor:grabbing;background:#fff;box-shadow:0 0 0 2px var(--accent),0 2px 10px rgba(0,0,0,.5)} .td-grid2{grid-template-columns:repeat(2,minmax(0,1fr))} .td-grid2:empty{display:none} .td-morerow{margin:10px 0 0;text-align:center} .td-morerow .btn{width:auto;display:inline-flex;padding:10px 18px} .td-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:12px} .td-quick:empty{display:none} .td-quick-h{grid-column:1/-1;margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .td-quick-row{display:flex;justify-content:space-between;align-items:center} .td-viewall{background:none;border:0;padding:0;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0} .td-qcard{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;color:var(--text);cursor:pointer;font-family:inherit} .td-qcard:hover{border-color:var(--accent)} .td-qcard strong{font-size:14px} .td-qcard em{font-style:normal;font-size:12px;color:var(--muted)} .td-qbadge{font-size:11px;color:var(--accent);font-weight:700} .td-mini{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--accent);color:#0b1026;font-weight:700;font-size:12px;line-height:1;vertical-align:-3px;margin:0 1px} .td-mini-edge{background:#0b1026;color:var(--accent);border:1px solid var(--accent);font-size:11px} .td-edge-flip svg{transform:scaleX(-1)} .td-edge{position:absolute;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0b1026;color:var(--accent);border:2px solid var(--accent);box-shadow:0 1px 6px rgba(0,0,0,.4);pointer-events:none;z-index:3} .td-chartwrap{position:relative;margin-top:10px} #td-chart{display:block;width:100%;height:360px;background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;touch-action:pan-y} /* baked static tide chart shown until the interactive canvas draws (crawlers / no-JS see real data instead of a blank canvas); JS removes it on first draw */ .td-chart-ssr{position:absolute;inset:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;pointer-events:none;background:#12151f} .td-chart-ssr svg{width:100%;height:100%;display:block} @media (max-width:600px){#td-chart{height:300px}} .td-tip{position:absolute;top:8px;pointer-events:none;background:#171a26;border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:12px;white-space:nowrap} .td-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:10px 0 4px} .td-controls label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px;font-weight:600;color:var(--muted)} .td-controls input[type=date]{margin:0;width:auto} .td-controls input[type=number]{margin:0;width:90px} .td-controls .td-chk{flex-direction:row;align-items:center;font-size:14px;color:var(--text)} .td-controls .td-chk input{width:auto;margin:0 6px 0 0} .td-controls .btn{width:auto;padding:10px 18px} .td-upd{width:42px;height:42px} @media (max-width:480px){.td-controls{gap:8px}.td-controls label{font-size:11px}.td-controls input[type=date]{padding:8px 5px;font-size:13px;max-width:122px}.td-upd{width:38px;height:38px}} .td-tablewrap{overflow-x:auto;margin-top:8px} .td-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums} .td-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border)} .td-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.06)} .td-table .td-lo td{color:var(--muted)} .td-big-h{font-size:16px;margin:16px 0 4px;color:var(--accent)} .td-statelink{margin:12px 0 0;font-size:14px;font-weight:600} .td-statelink a{text-decoration:underline} .td-county{font-size:16px;margin:18px 0 6px;color:var(--text)} .td-countylist .chip{margin:2px 4px 2px 0} /* one-column station rows on the state pages: City — station name/number, * tracking-station icon pinned right */ .td-strows{display:flex;flex-direction:column;gap:4px;max-width:560px} .td-strow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);background:rgba(255,255,255,.03)} .td-strow:hover{background:rgba(255,255,255,.08)} .td-strow b{font-size:14px;font-weight:700;white-space:nowrap} .td-strow .td-stname{font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .td-strow .td-staico{flex:0 0 auto} .td-staico-note .td-staico{vertical-align:-2px} .td-jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)} .td-jump select{width:auto;margin:0;padding:8px 10px;font-size:14px} .td-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px} .td-states .chip{justify-content:flex-start} .td-today{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center} .td-today-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .td-tchip{cursor:default} .td-past{opacity:.45} /* Print view (station pages): only the tide table, black on white — for the * fridge, the boat, the tackle box. */ .td-print-note{display:none} @media print{ body:has(#td-table){background:#fff;color:#000} body:has(#td-table) .wrap>*:not(:has(#td-table)){display:none!important} body:has(#td-table) #td-tool>*:not(.td-finder-card){display:none!important} body:has(#td-table) .td-finder-card{border:none;background:#fff;color:#000;box-shadow:none;padding:0} body:has(#td-table) .td-finder-card>p, body:has(#td-table) .td-finder-card .td-controls, body:has(#td-table) .td-finder-card .hint, body:has(#td-table) .td-finder-card .td-morerow, body:has(#td-table) #td-tbl-note{display:none!important} body:has(#td-table) .td-finder-card h2{color:#000} body:has(#td-table) .td-tablewrap{overflow:visible} body:has(#td-table) .td-table,body:has(#td-table) .td-table th,body:has(#td-table) .td-table td{color:#000!important;border-color:#aaa!important;background:#fff!important} .td-print-note{display:block!important;font-size:11px;color:#000!important;margin-top:10px;border-top:1px solid #aaa;padding-top:8px} } /*TOOLCSS-END*/