MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 52 Shore Citizen POC — Main Page content only. Citizen chrome stays native. */
.skin-citizen.page-Main_Page .shore-home{--shore-forest:#315d23;--shore-forest-dark:#1c3e19;--shore-lake:#24566d;--shore-lake-dark:#173746;--shore-cream:#f3eddd;--shore-paper:#faf9f5;--shore-ink:#182630;--shore-line:rgba(24,38,48,.13);--shore-emergency:#c94b2c;--shore-focus:#d79a2d;--shore-radius:16px;--shore-radius-lg:22px;--shore-shadow:0 8px 24px rgba(24,45,38,.10);--shore-shadow-lg:0 18px 44px rgba(14,31,29,.22);box-sizing:border-box;color:var(--shore-ink);margin:0 auto;max-width:1440px;overflow:hidden;width:100%}
.skin-citizen.page-Main_Page .shore-home *{box-sizing:border-box;min-width:0}.skin-citizen.page-Main_Page .shore-home a:focus-visible{border-radius:4px;outline:3px solid var(--shore-focus);outline-offset:3px}
.skin-citizen.page-Main_Page #firstHeading,.skin-citizen.page-Main_Page .mw-first-heading{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.skin-citizen.page-Main_Page .shore-home__hero{align-items:center;background-color:var(--shore-lake-dark);background-image:linear-gradient(90deg,rgba(8,25,29,.66),rgba(8,25,29,.20) 54%,rgba(8,25,29,.48)),url("/index.php/Special:Redirect/file/52-shore-hero-desktop.jpg");background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:var(--shore-radius-lg);color:#fff;display:flex;isolation:isolate;justify-content:center;min-height:520px;overflow:hidden;position:relative;text-align:center}
.skin-citizen.page-Main_Page .shore-home__hero-content{max-width:900px;padding:64px clamp(22px,6vw,84px)}.skin-citizen.page-Main_Page .shore-home__eyebrow{color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.5rem);font-style:italic;line-height:1.1;margin:0 0 8px;text-shadow:0 2px 12px rgba(0,0,0,.42)}.skin-citizen.page-Main_Page .shore-home__hero h1{color:#fff;font-family:inherit;font-size:clamp(2.4rem,5vw,4.4rem);font-weight:750;letter-spacing:-.025em;line-height:1.04;margin:0;text-shadow:0 3px 16px rgba(0,0,0,.52)}.skin-citizen.page-Main_Page .shore-home__intro{color:#fff;font-size:clamp(1rem,1.65vw,1.25rem);line-height:1.55;margin:22px auto 0;max-width:720px;text-shadow:0 2px 9px rgba(0,0,0,.58)}
.skin-citizen.page-Main_Page .shore-home__content{background:linear-gradient(180deg,var(--shore-paper),#f3f1ea);padding:0 clamp(14px,3.5vw,48px) 42px}.skin-citizen.page-Main_Page .shore-home__section{background:rgba(255,255,255,.97);border:1px solid rgba(28,62,25,.08);border-radius:var(--shore-radius-lg);box-shadow:var(--shore-shadow);padding:clamp(18px,2.3vw,30px)}.skin-citizen.page-Main_Page .shore-home__section--topics{margin-top:-72px;position:relative;z-index:2}.skin-citizen.page-Main_Page .shore-home__section-heading{align-items:center;display:flex;gap:18px;justify-content:space-between;margin-bottom:20px}.skin-citizen.page-Main_Page .shore-home__section-heading h2{color:var(--shore-ink);font-family:inherit;font-size:1.25rem;margin:0}.skin-citizen.page-Main_Page .shore-home__section-heading>a{color:var(--shore-forest);font-weight:700;text-decoration:none;white-space:nowrap}
.skin-citizen.page-Main_Page .shore-topic-grid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}.skin-citizen.page-Main_Page .shore-topic-card>a{align-items:center;background:var(--shore-topic-surface,#edf1e8);border:1px solid rgba(24,38,48,.06);border-radius:var(--shore-radius);color:var(--shore-topic-ink,var(--shore-forest-dark));display:flex;gap:14px;min-height:94px;padding:14px 18px;text-decoration:none;transition:box-shadow .18s ease,transform .18s ease}.skin-citizen.page-Main_Page .shore-topic-card>a:hover{box-shadow:var(--shore-shadow);transform:translateY(-2px)}.skin-citizen.page-Main_Page .shore-topic-card__icon{align-items:center;background:rgba(255,255,255,.62);border-radius:12px;display:flex;flex:0 0 58px;font-family:"Segoe UI Symbol",sans-serif;font-size:2rem;height:58px;justify-content:center}.skin-citizen.page-Main_Page .shore-topic-card__label{color:var(--shore-ink);font-weight:700;line-height:1.25}.skin-citizen.page-Main_Page .shore-topic-card--lake{--shore-topic-surface:#e5eff1;--shore-topic-ink:#1d596b}.skin-citizen.page-Main_Page .shore-topic-card--sand{--shore-topic-surface:#f2e6cf;--shore-topic-ink:#89640d}.skin-citizen.page-Main_Page .shore-topic-card--fire{--shore-topic-surface:#f6ddcf;--shore-topic-ink:#b84918}.skin-citizen.page-Main_Page .shore-topic-card--gold{--shore-topic-surface:#f7edc9;--shore-topic-ink:#88620a}.skin-citizen.page-Main_Page .shore-topic-card--lavender{--shore-topic-surface:#ebe6ef;--shore-topic-ink:#573369}.skin-citizen.page-Main_Page .shore-topic-card--moss{--shore-topic-surface:#e6ecdf;--shore-topic-ink:#365d2d}.skin-citizen.page-Main_Page .shore-topic-card--mist{--shore-topic-surface:#e7eef2;--shore-topic-ink:#184f68}
.skin-citizen.page-Main_Page .shore-home__lower-grid{display:grid;gap:24px;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);margin-top:24px}.skin-citizen.page-Main_Page .shore-quick-links{display:grid;gap:0;list-style:none;margin:0;padding:0}.skin-citizen.page-Main_Page .shore-quick-links li{align-items:center;border-bottom:1px solid var(--shore-line);display:grid;gap:12px;grid-template-columns:26px 1fr auto;min-height:50px}.skin-citizen.page-Main_Page .shore-quick-links li:last-child{border-bottom:0}.skin-citizen.page-Main_Page .shore-quick-links li>span:first-child{color:var(--shore-lake);font-size:1.2rem;font-weight:700;text-align:center}.skin-citizen.page-Main_Page .shore-quick-links a{color:var(--shore-ink);text-decoration:none}.skin-citizen.page-Main_Page .shore-quick-links a:hover{text-decoration:underline}.skin-citizen.page-Main_Page .shore-quick-links__emergency>span:first-child,.skin-citizen.page-Main_Page .shore-quick-links__emergency a{color:var(--shore-emergency);font-weight:700}
.skin-citizen.page-Main_Page .shore-nearby-grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}.skin-citizen.page-Main_Page .shore-nearby-card{background-color:var(--shore-lake);background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:var(--shore-radius);color:#fff;min-height:180px;overflow:hidden;position:relative}.skin-citizen.page-Main_Page .shore-nearby-card::after{background:linear-gradient(0deg,rgba(8,24,27,.82),rgba(8,24,27,.05) 70%);content:"";inset:0;position:absolute}.skin-citizen.page-Main_Page .shore-nearby-card--hiking{background-image:url("/index.php/Special:Redirect/file/52-shore-nearby-hiking.jpg")}.skin-citizen.page-Main_Page .shore-nearby-card--beach{background-image:url("/index.php/Special:Redirect/file/52-shore-nearby-beach.jpg")}.skin-citizen.page-Main_Page .shore-nearby-card--grocery{background-image:url("/index.php/Special:Redirect/file/52-shore-nearby-grocery.jpg")}.skin-citizen.page-Main_Page .shore-nearby-card--ice-cream{background-image:url("/index.php/Special:Redirect/file/52-shore-nearby-ice-cream.jpg")}.skin-citizen.page-Main_Page .shore-nearby-card__body{bottom:0;left:0;padding:16px;position:absolute;right:0;z-index:1}.skin-citizen.page-Main_Page .shore-nearby-card h3,.skin-citizen.page-Main_Page .shore-nearby-card p{margin:0}.skin-citizen.page-Main_Page .shore-nearby-card h3{font-family:inherit;font-size:1.05rem}.skin-citizen.page-Main_Page .shore-nearby-card h3 a{color:#fff;text-decoration:none}.skin-citizen.page-Main_Page .shore-nearby-card p{color:rgba(255,255,255,.92);font-size:.88rem;margin-top:3px}
.skin-citizen.page-Main_Page .shore-home__closing{align-items:stretch;background:linear-gradient(105deg,#e8eee2,#f7f2e5);border:1px solid rgba(28,62,25,.08);border-radius:var(--shore-radius-lg);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;overflow:hidden}.skin-citizen.page-Main_Page .shore-home__closing>div{align-items:center;display:grid;gap:14px;grid-template-columns:44px 1fr;padding:20px 24px}.skin-citizen.page-Main_Page .shore-home__closing>div+div{border-left:1px solid var(--shore-line)}.skin-citizen.page-Main_Page .shore-home__closing>div>span{color:var(--shore-forest);font-size:1.8rem;text-align:center}.skin-citizen.page-Main_Page .shore-home__closing p{line-height:1.45;margin:0}.skin-citizen.page-Main_Page .shore-home__closing a{color:var(--shore-forest-dark)}
@media(max-width:1000px){.skin-citizen.page-Main_Page .shore-home__lower-grid{grid-template-columns:1fr}.skin-citizen.page-Main_Page .shore-nearby-card{min-height:210px}}
@media(max-width:768px){.skin-citizen.page-Main_Page .shore-home__hero{min-height:480px}.skin-citizen.page-Main_Page .shore-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-citizen.page-Main_Page .shore-nearby-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-citizen.page-Main_Page .shore-home__closing{grid-template-columns:1fr}.skin-citizen.page-Main_Page .shore-home__closing>div+div{border-left:0;border-top:1px solid var(--shore-line)}}
@media(max-width:520px){.skin-citizen.page-Main_Page .shore-home{max-width:100%;overflow-x:hidden}.skin-citizen.page-Main_Page .shore-home__hero{background-image:linear-gradient(90deg,rgba(8,25,29,.68),rgba(8,25,29,.24) 54%,rgba(8,25,29,.50)),url("/index.php/Special:Redirect/file/52-shore-hero-mobile.jpg");border-radius:var(--shore-radius);min-height:460px}.skin-citizen.page-Main_Page .shore-home__hero-content{padding:54px 18px}.skin-citizen.page-Main_Page .shore-home__intro br{display:none}.skin-citizen.page-Main_Page .shore-home__content{padding:0 10px 28px}.skin-citizen.page-Main_Page .shore-home__section{border-radius:var(--shore-radius);padding:16px}.skin-citizen.page-Main_Page .shore-home__section--topics{margin-top:-48px}.skin-citizen.page-Main_Page .shore-topic-grid{gap:10px}.skin-citizen.page-Main_Page .shore-topic-card>a{align-items:center;display:grid;gap:8px;grid-template-columns:1fr;min-height:118px;padding:12px;text-align:center}.skin-citizen.page-Main_Page .shore-topic-card__icon{height:52px;margin:0 auto;width:52px}.skin-citizen.page-Main_Page .shore-nearby-grid{grid-template-columns:1fr}.skin-citizen.page-Main_Page .shore-nearby-card{min-height:190px}.skin-citizen.page-Main_Page .shore-home__section-heading{align-items:flex-start}.skin-citizen.page-Main_Page .shore-home__closing>div{padding:18px}}
@media(prefers-reduced-motion:reduce){.skin-citizen.page-Main_Page .shore-home *,.skin-citizen.page-Main_Page .shore-home *::before,.skin-citizen.page-Main_Page .shore-home *::after{transition-duration:.01ms!important}}