MediaWiki:Common.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.

/* CSS placed here will be applied to all skins */

/* 52 Shore manual POC. All component rules are scoped to .poc-shore. */
.poc-shore{--poc-forest:#315d23;--poc-forest-dark:#1c3e19;--poc-lake:#24566d;--poc-lake-dark:#183745;--poc-sage:#e8eee3;--poc-paper:#f8f7f3;--poc-ink:#182630;--poc-muted:#68737a;--poc-line:rgba(24,38,48,.14);--poc-emergency:#c94b2c;--poc-focus:#d79a2d;--poc-radius:15px;--poc-radius-lg:20px;--poc-shadow:0 7px 22px rgba(24,45,38,.10);--poc-shadow-lg:0 15px 40px rgba(14,31,29,.24);--poc-gutter:clamp(18px,4.7vw,72px);--poc-wide:1440px;background:linear-gradient(#f8f7f3,#f2f0e9);color:var(--poc-ink);font-family:Inter,Aptos,"Segoe UI",Helvetica,Arial,sans-serif;margin:0;overflow:hidden}
.poc-shore *{box-sizing:border-box}.poc-shore a:focus-visible,.poc-shore button:focus-visible,.poc-shore input:focus-visible,.poc-shore summary:focus-visible{outline:3px solid var(--poc-focus);outline-offset:3px}
body.page-Main_Page .mw-body-content,body.page-Main_Page .mw-parser-output,body.page-Main_Page .mw-content-container{max-width:none}body.page-Main_Page .mw-body{padding:0}body.page-Main_Page #firstHeading{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}body.page-Main_Page .mw-parser-output>p:empty{display:none}
body.mw-user-anon.page-Main_Page .vector-header-container,body.mw-user-anon.page-Main_Page .vector-page-toolbar,body.mw-user-anon.page-Main_Page .vector-column-start,body.mw-user-anon.page-Main_Page .vector-column-end,body.mw-user-anon.page-Main_Page .mw-footer{display:none}
.poc-nav{align-items:center;background:#fff;display:flex;gap:36px;justify-content:space-between;margin:0 auto;max-width:var(--poc-wide);min-height:74px;padding:10px var(--poc-gutter)}.poc-nav a{color:var(--poc-ink);text-decoration:none}.poc-nav__brand a{align-items:center;display:inline-flex;gap:8px;line-height:1}.poc-nav__mark{color:var(--poc-forest);font-size:30px}.poc-nav__number{color:#5f843e;font-size:43px;font-weight:700}.poc-nav__name{color:var(--poc-lake-dark);font-size:20px;letter-spacing:.08em}.poc-nav__name small{display:block;font-size:10px;letter-spacing:.13em;margin-top:5px}.poc-nav__desktop{align-items:center;display:flex;flex-wrap:wrap;gap:22px;justify-content:flex-end}.poc-nav__desktop>a{border-bottom:2px solid transparent;font-weight:600;padding:12px 0}.poc-nav__desktop>a:hover,.poc-nav__desktop>a:focus-visible{border-bottom-color:var(--poc-forest);color:var(--poc-forest-dark)}.poc-nav__emergency a{color:var(--poc-emergency);font-weight:700}.poc-nav__mobile{display:none;position:relative}.poc-nav__mobile summary{cursor:pointer;font-weight:700;min-height:44px;padding:12px}.poc-nav__menu{background:#fff;border-radius:var(--poc-radius);box-shadow:var(--poc-shadow-lg);display:grid;min-width:230px;padding:8px;position:absolute;right:0;z-index:30}.poc-nav__menu a{border-radius:8px;padding:12px}.poc-nav__menu a:hover,.poc-nav__menu a:focus-visible{background:#f0f1ea}
.poc-hero{background:var(--poc-lake-dark);color:#fff;min-height:530px;overflow:hidden;position:relative}.poc-hero__media,.poc-hero__media .mw-file-description,.poc-hero__media .mw-file-element{height:100%;inset:0;position:absolute;width:100%}.poc-hero__media .mw-file-element{object-fit:cover;object-position:center}.poc-hero__media--mobile{display:none}.poc-hero::after{background:linear-gradient(90deg,rgba(9,25,28,.46),rgba(9,25,28,.12) 52%,rgba(9,25,28,.40));content:"";inset:0;position:absolute}.poc-hero__content{margin:0 auto;max-width:920px;padding:48px var(--poc-gutter) 150px;position:relative;text-align:center;z-index:2}.poc-hero__eyebrow{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.6rem);font-style:italic;margin:0 0 4px;text-shadow:0 2px 12px rgba(0,0,0,.35)}.poc-hero h1{color:#fff;font-size:clamp(2.4rem,5vw,4.35rem);font-weight:750;letter-spacing:-.025em;line-height:1.05;margin:0;text-shadow:0 3px 16px rgba(0,0,0,.48)}.poc-hero__lede{font-size:clamp(1rem,1.65vw,1.25rem);line-height:1.55;margin:18px auto 22px;max-width:710px;text-shadow:0 2px 8px rgba(0,0,0,.6)}.poc-hero__search{margin:0 auto;max-width:540px}.poc-hero__search form{display:flex;position:relative}.poc-hero__search .mw-inputbox-input{background:#fff;border:0;border-radius:999px;box-shadow:var(--poc-shadow-lg);font-size:1.1rem;min-height:58px;padding:0 122px 0 28px;width:100%}.poc-hero__search .mw-ui-button,.poc-hero__search input[type="submit"]{background:var(--poc-forest);border:0;border-radius:999px;color:#fff;cursor:pointer;font-weight:700;margin:7px;min-height:44px;padding:0 22px;position:absolute;right:0}
.poc-home{margin:0 auto;max-width:var(--poc-wide);padding:0 var(--poc-gutter) 42px}.poc-panel{background:rgba(255,255,255,.97);border:1px solid rgba(28,62,25,.08);border-radius:var(--poc-radius-lg);box-shadow:var(--poc-shadow);padding:clamp(18px,2.3vw,30px)}.poc-panel--topics{margin-top:-140px;position:relative;z-index:5}.poc-panel__heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:18px}.poc-panel__heading h2{color:var(--poc-ink);font-size:1.25rem;margin:0}
.poc-topic-grid{display:grid;gap:clamp(12px,2vw,28px);grid-template-columns:repeat(8,minmax(0,1fr))}.poc-topic{min-width:0;text-align:center}.poc-topic__icon{align-items:center;background:var(--poc-topic-bg,#e7edde);border-radius:14px;color:var(--poc-topic-fg,var(--poc-forest));display:flex;font-family:"Segoe UI Symbol",sans-serif;font-size:clamp(2rem,3vw,3rem);font-weight:650;height:96px;justify-content:center;margin:0 auto 10px;max-width:104px;transition:transform .18s ease,box-shadow .18s ease}.poc-topic:hover .poc-topic__icon{box-shadow:var(--poc-shadow);transform:translateY(-3px)}.poc-topic h3{font-size:1rem;margin:0}.poc-topic h3 a{color:var(--poc-ink);text-decoration:none}.poc-topic--lake{--poc-topic-bg:#e5eff1;--poc-topic-fg:#1d596b}.poc-topic--sand{--poc-topic-bg:#f2e6cf;--poc-topic-fg:#89640d}.poc-topic--fire{--poc-topic-bg:#f6ddcf;--poc-topic-fg:#b84918}.poc-topic--gold{--poc-topic-bg:#f7edc9;--poc-topic-fg:#88620a}.poc-topic--lavender{--poc-topic-bg:#ebe6ef;--poc-topic-fg:#573369}.poc-topic--moss{--poc-topic-bg:#e6ecdf;--poc-topic-fg:#365d2d}.poc-topic--mist{--poc-topic-bg:#e7eef2;--poc-topic-fg:#184f68}
.poc-secondary{display:grid;gap:24px;grid-template-columns:.92fr 1.08fr;margin-top:24px}.poc-quick-grid{column-gap:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.poc-quick{align-items:center;border-bottom:1px solid var(--poc-line);display:grid;gap:12px;grid-template-columns:28px 1fr auto;min-height:48px}.poc-quick a{color:var(--poc-ink);text-decoration:none}.poc-quick a:hover,.poc-quick a:focus-visible{color:var(--poc-forest);text-decoration:underline}.poc-quick__icon{color:var(--poc-lake-dark);font-size:1.25rem;font-weight:700;text-align:center}.poc-quick--emergency .poc-quick__icon,.poc-quick--emergency a{color:var(--poc-emergency);font-weight:700}
.poc-nearby-grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}.poc-nearby{border-radius:var(--poc-radius);color:#fff;min-height:124px;overflow:hidden;position:relative}.poc-nearby__media,.poc-nearby__media .mw-file-description,.poc-nearby__media .mw-file-element{height:100%;inset:0;position:absolute;width:100%}.poc-nearby__media{background:linear-gradient(135deg,#547342,#47778a)}.poc-nearby__media .mw-file-element{object-fit:cover}.poc-nearby::after{background:linear-gradient(90deg,rgba(10,26,25,.74),rgba(10,26,25,.05));content:"";inset:0;position:absolute}.poc-nearby__label{bottom:12px;left:14px;position:absolute;right:10px;z-index:2}.poc-nearby__label h3,.poc-nearby__label p{margin:0}.poc-nearby__label h3{font-size:1rem}.poc-nearby__label h3 a{color:#fff;text-decoration:none}.poc-nearby__label p{font-size:.88rem;margin-top:2px}.poc-nearby-more{margin:14px 0 0;text-align:center}.poc-nearby-more a{color:var(--poc-forest);font-weight:700}
.poc-footer{background:linear-gradient(90deg,#eef0e8,#f6f4ee);border-radius:var(--poc-radius);display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;overflow:hidden}.poc-footer__item{align-items:center;display:grid;gap:14px;grid-template-columns:46px 1fr;padding:18px 24px}.poc-footer__item+.poc-footer__item{border-left:1px solid var(--poc-line)}.poc-footer__item>span{color:var(--poc-forest);font-size:2rem;text-align:center}.poc-footer__item p{font-size:.92rem;line-height:1.45;margin:0}.poc-footer__legal{background:var(--poc-forest-dark);color:#fff;grid-column:1/-1;padding:12px 20px;text-align:center}.poc-footer__legal a{color:#fff}
@media(max-width:1100px){.poc-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:24px}.poc-secondary{grid-template-columns:1fr}}
@media(max-width:900px){.poc-nav__desktop{display:none}.poc-nav__mobile{display:block}.poc-nav{min-height:64px}.poc-nav__number{font-size:34px}.poc-nav__name{font-size:16px}.poc-footer{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.poc-shore{--poc-gutter:12px}.poc-hero{min-height:440px}.poc-hero__media--desktop{display:none}.poc-hero__media--mobile{display:block}.poc-hero__media .mw-file-element{object-position:center}.poc-hero__content{padding:54px 20px 116px}.poc-hero__lede br{display:none}.poc-hero__search .mw-inputbox-input{font-size:1rem;min-height:54px;padding-left:20px}.poc-panel{border-radius:var(--poc-radius);padding:16px}.poc-panel--topics{margin-top:-86px}.poc-topic-grid{gap:18px 10px;grid-template-columns:repeat(2,minmax(0,1fr))}.poc-topic__icon{height:74px;max-width:82px}.poc-topic h3{font-size:.92rem}.poc-quick-grid{grid-template-columns:1fr}.poc-nearby-grid{display:flex;margin-right:calc(-1 * var(--poc-gutter));overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}.poc-nearby{flex:0 0 78%;scroll-snap-align:start}.poc-footer{grid-template-columns:1fr}.poc-footer__item+.poc-footer__item{border-left:0;border-top:1px solid var(--poc-line)}}
@media(prefers-reduced-motion:reduce){.poc-shore *,.poc-shore *::before,.poc-shore *::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}