/* ============================================================================ OKI 2026 — Shared design system. "Modern coastal." Pair with the fonts in each page : ========================================================================== */ :root{ /* sea */ --sea-950:#062536; --sea-900:#0a3a52; --sea-800:#0c4a64; --sea-700:#0e6582; --sea-600:#0f86a3; --sea-500:#16a3bd; --sea-400:#46c0d4; --sea-300:#86dbe6; --foam:#bdeef0; /* warm */ --sand:#f6efe0; --sand-2:#efe3cd; --sand-3:#e6d6b8; --paper:#fffdf7; --coral:#ef6a4c; --coral-2:#f59e6f; --gold:#e0a64f; /* Town of Oak Island accents — leaf green + sky blue */ --leaf:#5d943c; --leaf-2:#7bb04a; --sky:#4f9fd6; --sky-2:#9cccec; /* ink */ --ink:#0f2e3c; --ink-2:#1c4150; --ink-soft:#42606c; --muted:#6c8893; --line:#dfe7ea; --line-2:#cdd9dd; /* fx */ --shadow:0 10px 30px -12px rgba(10,58,82,.30); --shadow-sm:0 4px 14px -6px rgba(10,58,82,.25); --shadow-lg:0 24px 60px -20px rgba(10,58,82,.42); --ring:0 0 0 3px rgba(22,163,189,.30); --r:14px; --r-lg:22px; --r-sm:9px; --maxw:1120px; --topbar-h:58px; --subnav-h:0px; --controls-h:0px; /* measured by site.js; used for sticky offsets */ --grad-sea:linear-gradient(135deg,var(--sea-900),var(--sea-700) 48%,var(--sea-500)); --grad-cta:linear-gradient(135deg,var(--sea-600),var(--sea-500)); --font-d:"Fraunces","Hoefler Text",Georgia,serif; --font-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--topbar-h) + var(--subnav-h) + 18px)} body{ margin:0; color:var(--ink); font-family:var(--font-b); font-size:16px; line-height:1.6; background: radial-gradient(1200px 520px at 50% -260px, #ffffff 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg,#fbf6ec 0%, #f6efe0 100%); background-attachment:fixed; } img{max-width:100%;display:block} a{color:var(--sea-700);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4,.display{font-family:var(--font-d);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .section{padding:62px 0 8px} .section.tight{padding:38px 0 8px} .lead{color:var(--ink-soft);font-size:18px} .center{text-align:center} .muted{color:var(--muted)} /* progress bar */ #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120; background:linear-gradient(90deg,var(--sea-500),var(--coral));box-shadow:0 0 10px rgba(22,163,189,.6)} /* ---------------- top bar ---------------- */ .topbar{position:sticky;top:0;z-index:100; backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px); background:rgba(255,253,247,.72);border-bottom:1px solid transparent;transition:.25s} .topbar.solid{background:rgba(255,253,247,.92);border-bottom-color:var(--line);box-shadow:var(--shadow-sm)} .topbar .row{max-width:var(--maxw);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:16px;justify-content:space-between} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-.01em} .brand:hover{text-decoration:none} .brand .mark{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; background:var(--grad-sea);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25),var(--shadow-sm)} .brand small{display:block;font-family:var(--font-b);font-weight:600;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--sea-600);margin-top:1px} .nav{display:flex;gap:3px;align-items:center;flex-wrap:wrap} .nav a{color:var(--ink-soft);font-weight:600;font-size:14px;padding:8px 12px;border-radius:999px;transition:.15s;white-space:nowrap} .nav a:hover{background:rgba(22,163,189,.10);color:var(--sea-800);text-decoration:none} .nav a.active{background:var(--ink);color:#fff} .nav a.vintage{color:var(--gold)} .nav .wx{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--sea-800); background:rgba(22,163,189,.10);padding:7px 12px;border-radius:999px;font-size:13.5px} .navtoggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;padding:7px 10px;cursor:pointer;color:var(--ink)} /* ---------------- in-page section sub-nav ---------------- */ .subnav{position:sticky;top:var(--topbar-h);z-index:80;background:rgba(255,253,247,.9); backdrop-filter:saturate(1.3) blur(8px);-webkit-backdrop-filter:saturate(1.3) blur(8px); border-bottom:1px solid var(--line)} .subnav .row{max-width:var(--maxw);margin:0 auto;padding:7px 22px;display:flex;gap:5px;align-items:center; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .subnav .row::-webkit-scrollbar{display:none} .subnav .lab{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); margin-right:4px;flex:0 0 auto} .subnav a{flex:0 0 auto;font-weight:600;font-size:13px;color:var(--ink-soft);padding:6px 12px;border-radius:999px; white-space:nowrap;transition:.14s} .subnav a:hover{background:rgba(22,163,189,.10);color:var(--sea-800);text-decoration:none} .subnav a.active{background:var(--ink);color:#fff} /* ---------------- hero ---------------- */ .hero{position:relative;overflow:hidden;color:#eaf7fa; background:var(--grad-sea);padding:74px 0 120px;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(620px 360px at 78% 8%, rgba(255,224,150,.55), rgba(255,224,150,0) 60%), radial-gradient(900px 500px at 12% 120%, rgba(8,30,44,.55), rgba(8,30,44,0) 60%);} .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C240,92 480,4 720,40 C960,76 1200,18 1440,52 L1440,90 L0,90 Z' fill='%23f6efe0'/%3E%3C/svg%3E") bottom/100% 90px no-repeat;} .hero .wrap{position:relative;z-index:2} .hero .kicker{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--foam)} .hero h1{font-size:clamp(40px,7vw,76px);color:#fff;margin:.12em 0 .1em;text-shadow:0 2px 18px rgba(0,0,0,.18)} .hero .hero-sub{max-width:680px;font-size:clamp(17px,2.3vw,21px);color:#dcf1f5;line-height:1.5} .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .hero-meta .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#eaf7fa} .hero-meta .pill b{color:#fff} .sun{position:absolute;top:42px;right:8%;width:120px;height:120px;border-radius:50%;z-index:1; background:radial-gradient(circle at 50% 50%, #fff5d6, #ffd874 55%, rgba(255,216,116,0) 72%); filter:blur(.3px);opacity:.92} /* pills / stats */ .pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600; background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--ink-soft)} .pill b{color:var(--ink)} .pill .ic{color:var(--sea-600)} .pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} /* ---------------- section head ---------------- */ .sec-head{max-width:760px} .sec-head.center{margin:0 auto;text-align:center} .eyebrow{font-weight:700;letter-spacing:.15em;text-transform:uppercase;font-size:12.5px;color:var(--sea-600)} .sec-head h2{font-size:clamp(28px,4vw,40px);margin:.16em 0 .12em} .sec-head p{color:var(--ink-soft);font-size:17px;margin:0} /* ---------------- countdown ---------------- */ .countdown{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px} .cd-tile{flex:1 1 0;min-width:84px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:16px 10px 12px;text-align:center;box-shadow:var(--shadow-sm)} .cd-num{font-family:var(--font-d);font-weight:600;font-size:clamp(34px,5.4vw,52px);color:var(--sea-800);line-height:1; font-variant-numeric:tabular-nums} .cd-lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px} .cd-msg{margin-top:14px;font-size:18px;color:var(--ink-soft)} .cd-msg b{color:var(--coral)} .hero .cd-msg{color:#dcf1f5} .hero .cd-msg b{color:#ffd874} .cd-live{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;background:var(--coral); border-radius:999px;padding:8px 16px;font-size:15px;box-shadow:var(--shadow-sm)} .cd-live .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}} /* ---------------- dashboard widgets ---------------- */ .dash{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px} .widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden} .widget .wt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px} .widget .wt .ic{color:var(--sea-600)} .w-weather .now{display:flex;align-items:center;gap:12px;margin-top:8px} .w-weather .temp{font-family:var(--font-d);font-weight:600;font-size:42px;line-height:1;color:var(--ink)} .w-weather .ico{font-size:34px;line-height:1} .w-weather .cond{font-size:14px;color:var(--ink-soft)} .forecast{display:flex;gap:8px;margin-top:14px} .fc-day{flex:1;text-align:center;background:rgba(22,163,189,.07);border-radius:10px;padding:8px 4px} .fc-day .d{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .fc-day .i{font-size:20px;margin:3px 0} .fc-day .hi{font-weight:700;font-size:14px} .fc-day .lo{font-size:12px;color:var(--muted)} .fc-day .pp{font-size:10.5px;color:var(--sea-600);font-weight:600} .w-tide .nexttide{font-family:var(--font-d);font-size:23px;color:var(--ink);margin-top:8px} .w-tide .nexttide b{color:var(--sea-700)} .tidelist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px} .tidelist li{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-soft); padding:5px 9px;border-radius:8px;background:rgba(22,163,189,.06)} .tidelist li .ty{font-weight:700} .tidelist li.hi .ty{color:var(--sea-600)} .tidelist li.lo .ty{color:var(--coral)} .w-idea .idea{margin-top:8px;font-size:16px;color:var(--ink-soft)} .w-idea .idea b{color:var(--ink)} .widget .loading{color:var(--muted);font-size:14px;margin-top:10px;font-style:italic} .widget .err{color:var(--coral);font-size:13px;margin-top:8px} /* ---------------- weather page ---------------- */ .grid.guides{grid-template-columns:repeat(auto-fit,minmax(208px,1fr))} .sunarc{display:block;margin:6px 0 12px} /* best beach window callout */ .beachwin{background:var(--grad-sea);color:#eaf7fa;border-radius:var(--r-lg);padding:18px 22px; box-shadow:var(--shadow);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between} .beachwin.rainy{background:linear-gradient(135deg,#37474f,#5b6b73)} .beachwin .bw-main{flex:1 1 280px} .beachwin .bw-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--foam)} .beachwin .bw-time{font-family:var(--font-d);font-weight:600;font-size:30px;color:#fff;line-height:1.05;margin:3px 0 5px} .beachwin .bw-desc{font-size:14px;color:#dcf1f5;line-height:1.5} .beachwin .bw-chips{display:flex;gap:8px;flex-wrap:wrap} .beachwin .bw-chip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:999px; padding:8px 14px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap} .beachwin .btn{background:#fff;color:var(--sea-800)} .beachwin .btn:hover{background:#eaf7fa} .wx-main{display:flex;align-items:center;gap:14px;margin-top:8px} .wx-main .ico{font-size:40px;line-height:1} .wx-main .temp{font-family:var(--font-d);font-weight:600;font-size:42px;line-height:1;color:var(--ink)} .wx-main .cond{font-size:14px;color:var(--ink-soft)} .wx-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px} .wx-stat{background:rgba(22,163,189,.07);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column} .wx-stat span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .wx-stat b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums} .wx-stat small{font-size:11px;color:var(--muted)} .wx-rows{margin-top:10px;display:flex;flex-direction:column;gap:6px} .wx-row{display:flex;justify-content:space-between;align-items:center;background:rgba(22,163,189,.06); border-radius:9px;padding:9px 12px;font-size:14.5px;color:var(--ink-soft)} .wx-row b{color:var(--ink);font-size:16px} .wx-tip{margin-top:12px;font-size:12.5px;color:var(--muted);font-style:italic} .wxfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:8px} .wxfact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 19px; box-shadow:var(--shadow-sm);position:relative;overflow:hidden} .wxfact::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--sea-400),var(--coral));opacity:.0;transition:.18s} .wxfact:hover::before{opacity:1} .wxfact .ic{font-size:26px} .wxfact .tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sea-600);margin:8px 0 2px} .wxfact h4{font-size:18px;margin:0 0 6px} .wxfact p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.55} .wild{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:8px} .wcard{display:flex;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s} .wcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .wcard.star{border-color:var(--sea-300);background:linear-gradient(180deg,#fffdf7,rgba(134,219,230,.10))} .wcard .em{font-size:34px;line-height:1;flex:0 0 auto} .wcard .where{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sea-600)} .wcard h4{font-size:17px;margin:2px 0 5px;line-height:1.15} .wcard h4 .st{color:var(--gold);font-size:13px} .wcard p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.5} /* ---------------- guide nav cards (hub) ---------------- */ .grid{display:grid;gap:20px} .grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c4{grid-template-columns:repeat(4,1fr)} .gcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit} .gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);text-decoration:none} .gcard .top{height:104px;position:relative;background:var(--grad-sea);display:grid;place-items:center;overflow:hidden} .gcard .top.eat{background:linear-gradient(135deg,#0c4a64,#0f86a3)} .gcard .top.bike{background:linear-gradient(135deg,#0e6582,#16a3bd)} .gcard .top.rain{background:linear-gradient(135deg,#244150,#0e6582)} .gcard .top.weather{background:linear-gradient(135deg,#0e6582,#46c0d4)} .gcard .top.lore{background:linear-gradient(135deg,#3a2c18,#7a5a2e)} .gcard .top .gico{font-size:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))} .gcard .top .badge{position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);padding:4px 9px;border-radius:999px} .gcard .body{padding:18px 20px 20px} .gcard h3{font-size:22px} .gcard .body p{margin:7px 0 0;color:var(--ink-soft);font-size:15px} .gcard .go{margin-top:14px;font-weight:700;color:var(--sea-700);font-size:14.5px;display:inline-flex;align-items:center;gap:6px} .gcard:hover .go .ar{transform:translateX(4px)} .gcard .go .ar{transition:transform .2s} /* ---------------- top picks strip ---------------- */ .picks{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px} .pick{background:var(--grad-sea);color:#eaf7fa;border-radius:var(--r);padding:13px 15px;text-decoration:none; box-shadow:var(--shadow-sm);transition:transform .18s;display:block} .pick:hover{transform:translateY(-3px);text-decoration:none} .pick .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--foam)} .pick .v{font-family:var(--font-d);font-size:19px;color:#fff;margin-top:3px;line-height:1.12} .pick .v small{display:block;font-family:var(--font-b);font-weight:500;font-size:11.5px;color:#cfeaf0;margin-top:3px} /* ---------------- controls (search / filter / sort / view) ---------------- */ .controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center; margin:18px 0 6px;padding:12px;background:rgba(255,253,247,.86);backdrop-filter:blur(8px); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)} .search{flex:1 1 230px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-2); border-radius:10px;padding:9px 13px} .search:focus-within{box-shadow:var(--ring);border-color:var(--sea-400)} .search input{border:0;outline:0;width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent} .search .ic{color:var(--muted)} .chips{display:flex;gap:7px;flex-wrap:wrap} .chip{cursor:pointer;border:1px solid var(--line-2);background:#fff;color:var(--ink-soft);font:inherit;font-weight:600; font-size:13px;padding:7px 13px;border-radius:999px;transition:.14s;white-space:nowrap} .chip:hover{border-color:var(--sea-400);color:var(--sea-800)} .chip.active{background:var(--ink);border-color:var(--ink);color:#fff} .chip .x{opacity:.6;margin-left:4px} .spacer{flex:1} .sortsel,.viewtoggle{display:inline-flex;align-items:center;gap:6px} .sortsel select{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);border:1px solid var(--line-2); background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer} .sortsel label{font-size:12.5px;color:var(--muted);font-weight:600} .viewtoggle{border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff} .viewtoggle button{border:0;background:none;font:inherit;font-weight:600;font-size:13px;color:var(--ink-soft); padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px} .viewtoggle button.active{background:var(--ink);color:#fff} .count{font-size:13px;color:var(--muted);font-weight:600;margin:10px 2px 2px} .count b{color:var(--ink)} /* collapsible controls — search always visible, filters fold away on mobile */ .controls-bar,.controls-adv{display:contents} .filter-toggle{display:none} .clearfilters{display:none;align-items:center;gap:5px;border:1px solid var(--line-2);background:#fff;color:var(--coral); font:inherit;font-weight:600;font-size:12.5px;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap} .clearfilters:hover{border-color:var(--coral);background:rgba(239,106,76,.07)} .controls.has-filters .clearfilters{display:inline-flex} @media(max-width:760px){ .controls{padding:10px;gap:8px} .controls-bar{display:flex;gap:8px;width:100%;align-items:center} .controls-bar .search{flex:1 1 auto;min-width:0} .filter-toggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border:1px solid var(--line-2); background:#fff;color:var(--sea-800);font:inherit;font-weight:700;font-size:13px;padding:9px 13px; border-radius:10px;cursor:pointer;white-space:nowrap} .filter-toggle .fcount{background:var(--ink);color:#fff;border-radius:999px;min-width:18px;height:18px; display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 5px;line-height:1} .filter-toggle .fcount:empty{display:none} .controls-adv{display:none;width:100%} .controls.adv-open .controls-adv{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px} .controls .spacer{display:none} } /* ---------------- place cards ---------------- */ .places{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:8px} .pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px 19px 16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden} .pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-cta);opacity:.0;transition:.18s} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pcard:hover::before{opacity:1} .pcard.star{border-color:var(--sea-300)} .pcard.star::before{opacity:1;background:linear-gradient(180deg,var(--gold),var(--coral))} .pcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .pcard-title{font-family:var(--font-d);font-size:21px;line-height:1.12;color:var(--ink)} .pcard-title .st{color:var(--gold);font-size:15px;vertical-align:.08em;margin-left:3px} .pcard-sub{font-size:12.5px;color:var(--sea-700);font-weight:600;margin-top:3px} .pcard .area{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--ink-soft);background:var(--sand-2);border-radius:999px;padding:5px 10px;white-space:nowrap} .pcard-desc{margin:11px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.55} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .tag{font-size:11px;font-weight:600;color:var(--sea-800);background:rgba(22,163,189,.10);border-radius:6px;padding:3px 8px} .tag.warn{color:#9a3a16;background:rgba(239,106,76,.13)} .tag.free{color:#1d7a4d;background:rgba(29,122,77,.12)} .metarow{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;font-size:12.5px;color:var(--ink-soft)} .mp{display:inline-flex;align-items:center;gap:5px;background:var(--sand);border:1px solid var(--line);border-radius:8px;padding:5px 9px} .mp .ic{color:var(--sea-600)} .mp b{color:var(--ink);font-variant-numeric:tabular-nums} .hours{margin-top:11px;font-size:13px;color:var(--ink-soft);display:flex;gap:7px;align-items:flex-start} .hours .ic{color:var(--sea-600);flex:0 0 auto;margin-top:2px} .pcard-foot{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:14px;flex-wrap:wrap} .pcard-foot .ph{font-size:13px;color:var(--muted);font-weight:600} /* buttons */ .btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer; border-radius:10px;padding:9px 14px;border:1px solid transparent;transition:.16s;text-decoration:none;white-space:nowrap} .btn.primary{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-sm)} .btn.primary:hover{filter:brightness(1.06);text-decoration:none;transform:translateY(-1px)} .btn.ghost{background:#fff;border-color:var(--line-2);color:var(--sea-800)} .btn.ghost:hover{border-color:var(--sea-400);text-decoration:none;background:rgba(22,163,189,.06)} .btn.sm{padding:7px 11px;font-size:12.5px;border-radius:9px} .btn.coral{background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff} .btn .ic{flex:0 0 auto} /* ---------------- data table view ---------------- */ .tablewrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow-sm)} table.data{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px} table.data thead th{position:sticky;top:0;background:var(--sea-900);color:#eaf7fa;text-align:left;font-weight:600; font-size:12px;letter-spacing:.04em;padding:11px 13px;cursor:pointer;white-space:nowrap} table.data thead th .ar{opacity:.4;font-size:10px;margin-left:4px} table.data thead th.sorted .ar{opacity:1;color:var(--sea-300)} table.data tbody td{padding:10px 13px;border-top:1px solid var(--line);vertical-align:top} table.data tbody tr:hover td{background:rgba(22,163,189,.05)} table.data .tname{font-weight:700;color:var(--ink)} table.data .tname a{color:var(--sea-700)} table.data .tsub{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px} table.data .c{text-align:center;white-space:nowrap} table.data .big{font-weight:700;color:var(--sea-800)} .empty{text-align:center;padding:46px 20px;color:var(--muted)} .empty .big{font-family:var(--font-d);font-size:22px;color:var(--ink-soft);margin-bottom:6px} /* ---------------- map ---------------- */ .mapwrap{margin-top:18px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#dfeef0} .mapwrap iframe{display:block;width:100%;height:360px;border:0} #bikemap{height:440px;width:100%} .maplegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:13px;color:var(--ink-soft)} .maplegend span{display:inline-flex;align-items:center;gap:7px} .maplegend .sw{width:22px;height:5px;border-radius:3px} .maplegend .legbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:#fff; color:var(--ink-soft);font:inherit;font-weight:600;font-size:13px;padding:7px 12px;border-radius:999px;cursor:pointer;transition:.14s} .maplegend .legbtn:hover{border-color:var(--sea-400);color:var(--sea-800)} .maplegend .legbtn.active{background:var(--ink);color:#fff;border-color:var(--ink)} .maplegend .legbtn .sw{height:6px} .maplegend .legnote{font-size:13px;color:var(--ink-soft)} .leaflet-container{font-family:var(--font-b)!important;border-radius:var(--r-lg)} /* ---------------- callout / note ---------------- */ .note{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sea-400); border-radius:var(--r);padding:15px 18px;color:var(--ink-soft);font-size:14.5px;box-shadow:var(--shadow-sm)} .note b{color:var(--ink)} .note.warn{border-left-color:var(--coral)} .note.gold{border-left-color:var(--gold)} /* simple two-col info cards (cozy ideas / before you roll) */ .infogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px} .infocard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)} .infocard h4{font-size:17px;margin-bottom:5px} .infocard p{margin:0;font-size:14px;color:var(--ink-soft)} /* ---------------- reveal ---------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.cd-live .dot{animation:none}} /* ---------------- footer ---------------- */ footer.site{margin-top:60px;background:var(--sea-950);color:#bcd4dc;padding:46px 0 40px;position:relative} footer.site::before{content:"";position:absolute;top:-1px;left:0;right:0;height:48px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C240,2 480,46 720,24 C960,2 1200,46 1440,24 L1440,0 L0,0 Z' fill='%23f6efe0'/%3E%3C/svg%3E") top/100% 48px no-repeat} footer.site .fwrap{max-width:var(--maxw);margin:0 auto;padding:22px 22px 0;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between} footer.site .fbrand{font-family:var(--font-d);font-size:20px;color:#fff} footer.site a{color:var(--sea-300)} footer.site .fnav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px} footer.site .fine{max-width:var(--maxw);margin:26px auto 0;padding:18px 22px 0;border-top:1px solid rgba(255,255,255,.10); font-size:12.5px;color:#7fa0ab;line-height:1.6} /* ---------------- responsive ---------------- */ @media(max-width:980px){ .dash{grid-template-columns:1fr} .grid.c4{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(2,1fr)} .picks{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .nav{display:none} .nav.open{display:flex;position:absolute;top:100%;right:14px;left:14px;flex-direction:column;align-items:stretch; background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:var(--shadow-lg);gap:2px} .nav.open a{padding:11px 14px} .navtoggle{display:inline-flex} .section{padding:46px 0 6px} .grid.c2{grid-template-columns:1fr} .places{grid-template-columns:1fr} } @media(max-width:480px){ .grid.c4,.grid.c3{grid-template-columns:1fr} .picks{grid-template-columns:1fr} body{font-size:15.5px} .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .cd-tile{min-width:0;padding:13px 4px 10px} .cd-num{font-size:34px} } /* ================= OKI brand + hero v2 (Town of Oak Island look) ================= */ /* OKI oval mark in the top bar */ .okimark{flex:0 0 auto;display:inline-flex;align-items:center;line-height:0} .okimark svg{display:block;height:30px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.16))} .brand .coast{color:var(--sky);font-weight:600} /* hero: two zones so decoration never sits on the text */ .hero{padding:60px 0 108px} .hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:18px;align-items:center;position:relative;z-index:2} .hero-copy{min-width:0} .hero-copy .hero-sub{max-width:560px} .hero .kicker .coast{color:var(--sky-2);font-style:italic;letter-spacing:.04em} .hero-art{position:relative;min-height:220px;display:grid;place-items:center} .oki-badge{position:relative;z-index:3;width:min(300px,82%);height:auto; filter:drop-shadow(0 14px 28px rgba(0,0,0,.32))} .hero-art .sun{position:absolute;top:4px;right:9%;width:132px;height:132px;z-index:1} /* seagull silhouettes */ .gull{position:absolute;fill:none;stroke:rgba(255,255,255,.9);stroke-width:2.4;stroke-linecap:round;z-index:2;pointer-events:none} .gull.g1{width:48px;top:14px;left:4%} .gull.g2{width:30px;top:52px;left:22%} .gull.g3{width:38px;top:150px;right:6%;opacity:.85} /* footer tagline (town motto) */ .ftag{font-family:var(--font-d);font-size:14px;color:var(--sea-300);margin-top:2px} .ftag em{color:var(--sky-2);font-style:normal} /* client hooks (set by site.js) */ html.is-mobile .desktop-only{display:none!important} html.is-desktop .mobile-only{display:none!important} @media(max-width:760px){ .hero{padding:40px 0 88px} .hero-grid{grid-template-columns:1fr;gap:4px} .hero-art{order:-1;min-height:128px;margin-bottom:2px;justify-items:center} .oki-badge{width:168px} .hero-art .sun{width:96px;height:96px;top:-4px;right:16%;opacity:.85} .gull.g2{display:none}.gull.g3{top:96px;right:8%} .hero-copy{text-align:left} .hero h1,.hero .kicker,.hero .hero-sub{text-shadow:0 1px 12px rgba(8,30,44,.42)} /* non-hub heroes: keep the lone sun glow out of the headline */ .hero > .sun{width:84px;height:84px;top:10px;right:-12px;opacity:.5} } @media(max-width:430px){ .oki-badge{width:150px} .hero-art .sun{right:10%} } /* ================= Shell Museum ================= */ .gcard .top.shells{background:linear-gradient(135deg,#0e6582,#5bb9a0)} .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:8px} .specimen{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column} .specimen:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .specimen .ph{position:relative;aspect-ratio:4/3;background:#f1ece1;overflow:hidden} .specimen .ph img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .25s} .specimen .ph:hover img{transform:scale(1.04)} .specimen .ph .extra{position:absolute;right:10px;bottom:10px;width:34%;height:auto;aspect-ratio:4/3;object-fit:cover; border:2px solid #fff;border-radius:9px;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .25s} .specimen .info{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1} .tbadge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:3px 9px;border-radius:999px;margin-bottom:8px} .tbadge.snail{background:rgba(22,163,189,.14);color:var(--sea-700)} .tbadge.bivalve{background:rgba(224,166,79,.20);color:#8a5a14} .tbadge.other{background:rgba(108,136,147,.18);color:var(--ink-soft)} .specimen h3{font-size:19px;margin:0 0 1px;line-height:1.15} .specimen .sci{font-style:italic;color:var(--muted);font-size:13px;margin-bottom:9px} .specimen .info > p{margin:0 0 11px;font-size:14px;color:var(--ink-soft);line-height:1.55} .specimen .meta{display:flex;gap:8px;font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:6px} .specimen .meta .k{flex:0 0 auto;font-weight:700;color:var(--sea-700);white-space:nowrap} .specimen .added{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center; font-size:12px;color:var(--muted)} .specimen .added .del{background:none;border:0;color:var(--coral);font:inherit;font-weight:600;cursor:pointer;padding:0} .specimen .added .del:hover{text-decoration:underline} .specimen .conf{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px} .conf.high{background:rgba(29,122,77,.14);color:#1d7a4d} .conf.medium{background:rgba(224,166,79,.18);color:#8a5a14} .conf.low{background:rgba(239,106,76,.14);color:#9a3a16} /* live-finds add bar */ .addbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between; background:var(--grad-sea);color:#eaf7fa;border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--shadow-sm);margin-bottom:18px} .addbar .t{font-family:var(--font-d);font-size:18px;color:#fff} .addbar .t small{display:block;font-family:var(--font-b);font-size:13px;color:#cfeaf0;font-weight:500;margin-top:2px} .addbar .btn{background:#fff;color:var(--sea-800)} .addbar .btn:hover{background:#eaf7fa} .liveempty{text-align:center;color:var(--muted);padding:24px 16px;font-size:14.5px} /* lightbox (shared) */ .lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,24,32,.88);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s} .lightbox.open{display:flex;opacity:1} .lightbox img{max-width:min(94vw,1200px);max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.55)} .lb-close{position:absolute;top:14px;right:18px;width:42px;height:42px;border:0;border-radius:50%; background:rgba(255,255,255,.16);color:#fff;font-size:24px;line-height:1;cursor:pointer} .lb-close:hover{background:rgba(255,255,255,.3)} /* add-a-shell modal */ .shellmodal{position:fixed;inset:0;z-index:210;background:rgba(8,24,32,.6);backdrop-filter:blur(3px); display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto} .shellmodal.open{display:flex} .shellmodal .panel{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);max-width:520px;width:100%; margin:auto;padding:22px 22px 20px;position:relative} .shellmodal h3{font-size:22px;margin:0 0 4px} .shellmodal .lede{color:var(--ink-soft);font-size:14px;margin:0 0 16px} .shellmodal label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);margin:12px 0 5px} .shellmodal input[type=text],.shellmodal input[type=password],.shellmodal select,.shellmodal textarea{ width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px} .shellmodal textarea{resize:vertical;min-height:54px;line-height:1.45} .shellmodal input:focus,.shellmodal select:focus,.shellmodal textarea:focus{outline:0;border-color:var(--sea-400);box-shadow:var(--ring)} .shellmodal .drop{border:2px dashed var(--line-2);border-radius:var(--r);padding:18px;text-align:center;color:var(--ink-soft);cursor:pointer} .shellmodal .drop:hover{border-color:var(--sea-400);background:rgba(22,163,189,.05)} .shellmodal .prev{width:100%;max-height:240px;object-fit:contain;border-radius:var(--r);margin-top:10px;background:#f1ece1;display:none} .shellmodal .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .shellmodal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap} .shellmodal .x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer} .shellmodal .err{color:var(--coral);font-size:13.5px;margin-top:10px} .shellmodal .busy{display:none;align-items:center;gap:9px;color:var(--ink-soft);font-size:14px;margin-top:12px} .shellmodal .busy.on{display:flex} .spin{width:18px;height:18px;border:2.5px solid var(--line-2);border-top-color:var(--sea-500);border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto} @keyframes spin{to{transform:rotate(360deg)}} .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:220; background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px; box-shadow:var(--shadow-lg);opacity:0;transition:.25s;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media(max-width:480px){ .shellmodal .row2{grid-template-columns:1fr} } /* ---- a11y + polish (from review) ---- */ :focus-visible{outline:2px solid var(--sea-500);outline-offset:2px} .btn:focus-visible,.chip:focus-visible,.legbtn:focus-visible,.filter-toggle:focus-visible,.viewtoggle button:focus-visible, .lb-close:focus-visible,.shellmodal .x:focus-visible,.specimen .del:focus-visible,.pill-btn:focus-visible{outline:2px solid var(--sea-500);outline-offset:2px;border-radius:8px} .drop:focus-within{border-color:var(--sea-400);box-shadow:var(--ring)} .sr-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .shellmodal .flabel{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:12px 0 5px} .pill-btn{font:inherit;cursor:pointer} .hero-meta .pill-btn:hover{background:rgba(255,255,255,.24)} .specimen .del{padding:6px 2px;min-height:30px} /* bigger tap target */ /* live (phone) photos: letterbox so the shell's tips aren't cropped off */ .specimen.live .ph img{object-fit:contain} /* gentle entrance for gallery cards (injected via JS) */ @keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .gallery .specimen{animation:cardIn .45s ease both} @media(prefers-reduced-motion:reduce){.gallery .specimen{animation:none}} /* ---------------- print (guides stay useful on paper) ---------------- */ @media print{ .topbar,.controls,.viewtoggle,.sortsel,.btn,.navtoggle,#progress,.mapwrap,.sun,.hero::after{display:none!important} body{background:#fff} .hero{background:none;color:var(--ink);padding:10px 0 0} .hero h1,.hero .kicker,.hero .hero-sub{color:var(--ink)} .reveal{opacity:1;transform:none} .pcard,.widget,.gcard{box-shadow:none;break-inside:avoid} .places{grid-template-columns:repeat(2,1fr)} }