/* Beachhut PR - v2 shared stylesheet * * Palette locked 2026-05-13 by Niall + Megan (sign-off in 11/13 May email * thread): Megan's Palette 1 = Indigo + Coral on the shared yellow/teal/navy * anchor. See start of palettes.css history for the 4 options reviewed. */ :root{ --dark:#111F29; /* Megan's deep navy */ --navy:#0B1620; --mid:#19293A; --gold:#EAB747; /* Megan's yellow */ --teal:#58CAB7; /* Megan's teal */ --accent:#6564DB; /* Indigo (palette-1 accent) */ --accent-2:#EF767A; /* Coral (palette-1 accent-2) */ --white:#fff; --text:.7; --muted:.45; --dim:.3; --glass:rgba(255,255,255,.04); --border:rgba(255,255,255,.07); --max:1200px; --london:#9F7AEA; --dublin:#48BB78; --amsterdam:#F56565; } /* Accent wiring for the locked palette. * .btn-primary, .nav-cta, .stat-n are overridden in place further down the * stylesheet (search for !important on .nav-cta). The rules here cover the * lighter-weight wiring that doesn't conflict with later-defined styles. */ .hero .eyebrow { color: var(--accent) } .service:nth-child(3n+2) .service-icon { background: linear-gradient(135deg, var(--accent), var(--accent-2)); } section + section { border-top: 2px solid var(--accent) } /* Informational banner - gradient bar pinned to the top of the page. * Apply class="has-preview-banner" on to push the fixed nav down * by the banner height and pad the hero. Desktop only (hidden on mobile * so the small-screen hero stays as-is). */ .preview-banner { display: none; } @media(min-width:641px) { .preview-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: 36px; padding: 0 20px; background: linear-gradient(90deg, var(--teal), var(--accent), var(--accent-2)); color: var(--dark); font: 600 13px/36px 'Inter', sans-serif; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-banner .pb-sep { opacity: .55 } .preview-banner a { color: var(--dark); text-decoration: underline } body.has-preview-banner { padding-top: 36px } body.has-preview-banner > nav { top: 36px } } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:'Inter',sans-serif;background:var(--dark);color:rgba(255,255,255,var(--text));line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased} ::selection{background:var(--teal);color:var(--dark)} img{display:block;max-width:100%} a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:rgba(0,201,183,.2)} button,[role="button"]{-webkit-tap-highlight-color:rgba(0,201,183,.2)} input,textarea,select{font-size:16px} .filter-row{-webkit-overflow-scrolling:touch} /* TYPOGRAPHY */ h1,h2{font-family:'DM Serif Display',serif;font-weight:400} .eyebrow{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:20px} .gold{color:var(--gold)} .teal{color:var(--teal)} /* LAYOUT */ .wrap{max-width:var(--max);margin:0 auto;padding:0 40px} section{padding:140px 0} /* NAV - scoped to top-level page nav only (avoid cascading into drawer's