/* BUILD: build-20260609-122332-access-dynamic */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@300;400;500;600&display=swap'); /* ============================================ GRIEF TRIPS - Central Stylesheet /styles.css ============================================ */ /* --- Fonts --- */ /* Fonts loaded via in each page's for reliability */ /* --- Variables --- */ :root { /* Backgrounds - soft off-white with cool cast */ --bg: #F7F9FA; /* near-white, faint cool */ --card: #FFFFFF; --warm: #E4EAEF; /* soft blue tint (from #ACC0D3 family) */ /* Text - dark near-black, cool-neutral */ --ink: #1F2A30; /* near-black for body text */ --muted: #4E6470; /* muted steel-slate */ --faint: #8A9AA4; /* pale steel */ /* Brand - steel-blue primary, coral prominent accent, apricot + soft-blue support */ --terra: #4A7798; /* steel blue (deepened from #5484A4) - PRIMARY brand colour (name kept so it cascades everywhere) */ --steel-pure: #5484A4; /* the exact steel blue for large/non-text uses */ --forest: #3C5E78; /* deeper steel - anchor for dark sections */ --coral: #f96e81; /* prominent coral-pink accent (use for fills/badges/accents, NOT white text) */ --coral-btn: #E0526A; /* deepened coral for buttons with white text (accessible) */ --apricot: #F6C992; /* warm apricot - support accent + background */ --bluegrey: #ACC0D3; /* soft blue - accent + background */ --sand: #F6C992; /* apricot for soft italic accents (coral reserved for CTAs) */ --steel: #5484A4; /* steel blue */ --sage: #ACC0D3; /* Trip accents */ --porto: #5484A4; --morocco: #F6C992; --maldives: #5484A4; --bali: #4A7798; /* Utility */ --rule: rgba(84, 132, 164, 0.16); --nav-h: 64px; /* Type */ --font-display: 'Newsreader', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } button { font-family: var(--font-body); cursor: pointer; } /* --- Nav --- */ .nav { position: sticky; top: 0; z-index: 200; background: var(--bg); border-bottom: 1px solid var(--rule); } .navi { max-width: 1280px; margin: 0 auto; padding: 0 2rem; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--terra); white-space: nowrap; transition: opacity 0.2s; flex-shrink: 0; } .logo:hover { opacity: 0.8; } .navl { display: flex; gap: 1.75rem; align-items: center; } .navl a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; white-space: nowrap; } .navl a:hover, .navl a.on { color: var(--terra); } .navl .cta { background: var(--coral-btn); color: #fff !important; border-radius: 2rem; padding: 0.4rem 1.1rem; font-size: 0.75rem !important; transition: filter 0.2s; } .navl .cta:hover { filter: brightness(0.9); } /* Mobile hamburger - hidden by default */ .nav-toggle { display: none; background: none; border: none; color: var(--ink); padding: 0.25rem; line-height: 1; } /* --- Eyebrow --- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terra); margin-bottom: 1.25rem; } .eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--terra); } /* --- Section label --- */ .slbl { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2.5rem; } .slbl::after { content: ''; flex: 1; height: 1px; background: var(--rule); } /* --- Divider --- */ hr { border: none; height: 1px; background: var(--rule); max-width: 1280px; margin: 0 auto; } hr.full { max-width: 100%; } /* --- Shared buttons --- */ .btn-primary { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--coral); color: #fff; border: none; border-radius: 2rem; padding: 0.6rem 1.4rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: filter 0.15s, transform 0.15s; text-decoration: none; } .btn-primary:hover { filter: brightness(0.92); transform: translateY(-1px); } .btn-outline { display: inline-flex; align-items: center; gap: 0.4rem; background: none; color: var(--terra); border: 1.5px solid var(--terra); border-radius: 2rem; padding: 0.6rem 1.4rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; text-decoration: none; } .btn-outline:hover { background: var(--terra); color: #fff; } /* --- Newsletter section --- */ .nlsec { background: var(--warm); padding: 4rem 2rem; } .nlsec-inner { max-width: 1280px; margin: 0 auto; text-align: center; } .nlsec h2 { font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; color: var(--ink); margin-bottom: 0.75rem; line-height: 1.15; } .nlsec h2 em { color: var(--terra); font-style: italic; } .nlsec p { font-size: 0.95rem; color: var(--muted); line-height: 1.75; max-width: 52ch; margin: 0 auto 2rem; } .nl-form { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; max-width: 400px; margin: 0 auto; } .nl-form input { width: 100%; padding: 0.75rem 1.1rem; border: 1px solid var(--rule); border-radius: 0.5rem; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; } .nl-form input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(84, 132, 164, 0.15); } .nl-form input::placeholder { color: var(--faint); } .nl-form button { width: 100%; background: var(--terra); color: #fff; border: none; border-radius: 0.5rem; padding: 0.75rem 1.25rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: filter 0.2s; } .nl-form button:hover { filter: brightness(0.9); } .nl-form button:disabled { opacity: 0.6; cursor: not-allowed; } .nl-status { margin-top: 0.65rem; font-size: 0.85rem; min-height: 1.2em; } .nl-status.ok { color: var(--sage); } .nl-status.err { color: var(--terra); } /* --- Footer --- */ .foot { border-top: 1px solid var(--rule); background: var(--warm); padding: 2.25rem 2rem; } .footi { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .footb { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--terra); flex-shrink: 0; } .foott { font-size: 0.82rem; color: var(--faint); flex: 1; text-align: center; } .footl { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } .footl a { transition: opacity 0.2s; } .footl a:hover { opacity: 0.75; } .foot-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--terra); transition: filter 0.2s, transform 0.2s; } .foot-icon:hover { filter: brightness(0.9); transform: translateY(-2px); opacity: 1; } .foot-icon svg { width: 19px; height: 19px; } .footcta { background: var(--coral); color: #fff; border: none; padding: 0.55rem 1.1rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: filter 0.2s; white-space: nowrap; } .footcta:hover { filter: brightness(0.9); } /* --- Toast --- */ .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--ink); color: #fff; padding: 0.85rem 1.3rem; border-radius: 0.5rem; font-size: 0.84rem; z-index: 700; animation: toastIn 0.3s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); pointer-events: none; } @keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } } /* --- Form fields (shared) --- */ .fg { margin-bottom: 1.1rem; } .fg label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; } .fg input, .fg textarea, .fg select { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--rule); border-radius: 0.5rem; font-family: var(--font-body); font-size: 0.87rem; color: var(--ink); background: var(--bg); transition: border-color 0.2s, box-shadow 0.2s; } .fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(84, 132, 164, 0.15); } .fg textarea { resize: vertical; min-height: 100px; } .fg-hint { font-size: 0.72rem; color: var(--faint); font-style: italic; margin-top: 0.25rem; } .fg-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: 0.87rem; color: var(--muted); line-height: 1.5; } .fg-check input[type="checkbox"] { width: auto; margin-top: 0.2rem; accent-color: var(--terra); flex-shrink: 0; } .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } /* --- Responsive --- */ @media (max-width: 900px) { .footi { flex-direction: column; text-align: center; } .foott { text-align: center; } .footl { justify-content: center; } } @media (max-width: 640px) { .navi { padding: 0 1rem; } /* Mobile nav */ .navl { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0; z-index: 199; box-shadow: 0 4px 12px rgba(34,54,72,0.08); } .navl.open { display: flex; } .navl a { padding: 0.8rem 1.5rem; border-bottom: 1px solid var(--rule); font-size: 0.82rem; } .navl a:last-child { border-bottom: none; } .navl .cta { margin: 0.75rem 1.5rem; text-align: center; border-radius: 0.5rem; padding: 0.65rem 1rem; } .nav-toggle { display: flex; align-items: center; justify-content: center; } .nlsec { padding: 3rem 1.5rem; } .nlsec h2 { font-size: 1.75rem; } .foot { padding: 2rem 1.25rem; } .footi { gap: 1rem; } .fg-row { grid-template-columns: 1fr; } }