@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap'); /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) Clean Nordic letterhead palette: navy + Icelandic red + cool greys + whitespace -----------------------------------------*/ :root { --white-color: #ffffff; --primary-color: #dbe4f3; /* soft navy tint (date chips, selection) */ /* Canonical brand palette — single source of truth. Mirrors FOIStyle in common.py (used for server-rendered email/PDF). Templates should use these vars, not inline hexes, so the two never drift. */ --secondary-color: #202A44; /* brand navy */ --section-bg-color: #f4f6f9; /* clean cool light */ --custom-btn-bg-color: #202A44; /* navy buttons */ --custom-btn-bg-hover-color: #B33F40; /* brand red on hover */ --dark-color: #1a1f2e; --p-color: #5b6273; /* cool grey body text */ --link-hover-color: #B33F40; /* brand red */ --accent-red: #B33F40; /* brand red */ --border-color: #e2e5ec; --muted-color: #5e6679; /* AA-contrast muted grey */ --body-font-family: 'Hanken Grotesk', sans-serif; /* Literary serif for display headings — Iceland's saga/book-culture voice. Body/UI stays grotesque; the two faces carry the type hierarchy. */ --display-font-family: 'Spectral', Georgia, serif; /* Modular scale (~1.25). h1 is now the largest — the previous values had h1 (25px) smaller than h2 (36px), inverting the hierarchy on every page whose h1 wasn't overridden by the hero clamp. */ --h1-font-size: 44px; --h2-font-size: 36px; --h3-font-size: 28px; --h4-font-size: 22px; --h5-font-size: 19px; --h6-font-size: 17px; --p-font-size: 18px; --menu-font-size: 16px; --btn-font-size: 14px; --border-radius-large: 8px; /* crisp inputs / buttons (was pill 100px) */ --border-radius-medium: 12px; /* cards */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; --navy: #202A44; } /*--------------------------------------- BASE -----------------------------------------*/ body { background-color: var(--white-color); font-family: var(--body-font-family); color: var(--p-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Guard against horizontal overflow on phones (a stray wide element shoves the sticky navbar — and its hamburger — off-screen). overflow-x:hidden on keeps the viewport pinned without breaking the sticky navbar. */ overflow-x: hidden; } ::selection { background-color: var(--secondary-color); color: var(--white-color); } /*--------------------------------------- TYPOGRAPHY -----------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: var(--secondary-color); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; text-wrap: balance; } /* Display headings carry the Spectral serif; the negative tracking that suits the grotesque is dropped here (serifs want near-zero spacing). */ h1, h2, h3 { font-family: var(--display-font-family); letter-spacing: -0.005em; } /* Signature device: an italic Spectral accent word inside a display heading. The italic carries the emphasis; colour follows the background — Saga Red on light section headings, kept white in the photographic hero for contrast. This is the page's identity — typography, not an ornament. */ h1 em, h2 em, h3 em { font-style: italic; font-weight: var(--font-weight-medium); color: var(--accent-red); } /* Page hero banners — override the global navy heading colour */ .page-hero h1, .page-hero p { color: #fff; } .page-hero .lead { font-size: 0.85rem; margin-bottom: 0; } h1 { font-size: var(--h1-font-size); font-weight: var(--font-weight-bold); } h2 { font-size: var(--h2-font-size); font-weight: var(--font-weight-bold); } h3 { font-size: var(--h3-font-size); font-weight: var(--font-weight-medium); } h4 { font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); } h5 { font-size: var(--h5-font-size); font-weight: var(--font-weight-medium); } h6 { font-size: var(--h6-font-size); font-weight: var(--font-weight-medium); } p, ul li { color: var(--p-color); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); line-height: 1.7; text-wrap: pretty; } a, button { touch-action: manipulation; transition: all 0.25s ease; } a { display: inline-block; color: var(--secondary-color); text-decoration: none; } a:hover { color: var(--link-hover-color); } b, strong { font-weight: var(--font-weight-bold); } /* Eyebrow / spaced label utility (Nordic letterhead motif) */ .eyebrow, .section-label { display: inline-block; font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-color); } /*--------------------------------------- NAVIGATION BAR & OFFCANVAS -----------------------------------------*/ .navbar { background: transparent; background-color: var(--navy); z-index: 1030; /* CSS sticky keeps the navbar in flow (reserves its own space), so it never overlaps the hero at any width — replaces the old jquery.sticky.js. */ position: sticky; top: 0; overflow: visible; padding-top: 18px; padding-bottom: 18px; border-bottom: 3px solid var(--accent-red); transition: padding 0.3s ease; } /* Compact state — added by foi-ui.js once the user scrolls past the sentinel. */ .navbar.is-compact { padding-top: 10px; padding-bottom: 10px; } /* Wordmark lockup, in flow so it aligns with the container (and the hero text below it) and stays responsive at every width. */ .navbar-brand, .navbar-brand:hover { position: static; margin: 0; padding: 0; z-index: 4; color: var(--white-color); } /* Logo crest — large at the top of the page, shrinking into the bar on scroll. The negative bottom margin lets the expanded disc overhang below the bar onto the hero without enlarging the bar; .navbar overflow is visible so it spills. The reduced-motion guard turns the transition into a snap. */ /* Transparent sizing container — the SVG crest is self-contained (its own white disc + border rings), so no background/border-radius/padding here, or it'd draw a second ring around the logo. drop-shadow follows the circular alpha of the SVG (a box-shadow would cast a square). */ .brand-crest { flex: 0 0 auto; display: block; width: 104px; height: 104px; margin-bottom: -36px; filter: drop-shadow(0 8px 14px rgba(26, 31, 46, 0.38)); transition: width 0.3s ease, height 0.3s ease, margin-bottom 0.3s ease, filter 0.3s ease; } .navbar.is-compact .brand-crest { width: 56px; height: 56px; margin-bottom: 0; filter: drop-shadow(0 3px 8px rgba(26, 31, 46, 0.25)); } /* Sentinel: ~80px tall, absolutely placed so it never shifts layout; the navbar goes compact once it scrolls out of the viewport. */ #nav-sentinel { position: absolute; top: 80px; left: 0; width: 1px; height: 1px; pointer-events: none; } .navbar .navbar-brand, .navbar .navbar-brand:hover { color: var(--white-color); } /* Push nav links to the far right, vertically centred */ .navbar-nav { margin-left: auto; align-items: center; } /* Full circular crest on a clean white disc, slight overhang below the bar */ .brand-logo { position: absolute; left: 28px; top: 12px; width: 118px; height: 118px; border-radius: 50%; background: var(--white-color); box-sizing: border-box; padding: 5px; box-shadow: 0 10px 24px rgba(26, 31, 46, 0.35); z-index: 5; } .navbar .navbar-brand-image { width: 100%; height: 100%; display: block; margin: 0; position: relative; z-index: 2; } .brand-titles { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; line-height: 1.12; align-self: center; } .navbar .navbar-brand-text { font-weight: var(--font-weight-bold); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; margin-left: 12px; } .navbar .navbar-brand-sub { font-size: 11px; font-weight: var(--font-weight-medium); letter-spacing: 0.36em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-top: 7px; margin-left: 12px; } .navbar-expand-lg .navbar-nav .nav-link { border-radius: 0; margin: 10px; padding: 10px; } .navbar-nav .nav-link { display: inline-block; color: rgba(255, 255, 255, 0.85); font-size: var(--menu-font-size); font-weight: var(--font-weight-medium); letter-spacing: 0.02em; padding-top: 15px; padding-bottom: 15px; border-bottom: 2px solid transparent; box-shadow: none; } .navbar-nav .nav-link:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Visible keyboard focus (WCAG 2.4.7) — only for keyboard users */ .navbar-nav .nav-link:focus-visible { outline: 2px solid var(--white-color); outline-offset: 2px; border-radius: 2px; } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--white-color); border-bottom-color: var(--accent-red); } .navbar .dropdown-menu { background: var(--white-color); box-shadow: 0 1rem 3rem rgba(38, 51, 122, 0.14); border: 1px solid var(--border-color); display: inherit; opacity: 0; min-width: 9rem; margin-top: 20px; padding: 13px 0 10px 0; border-radius: var(--border-radius-medium); transition: all 0.25s; pointer-events: none; } .navbar .dropdown-menu::before { content: ""; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 15px solid var(--white-color); position: absolute; top: -10px; left: 10px; } .navbar .dropdown-item { display: inline-block; color: var(--p-color); font-size: var(--menu-font-size); font-weight: var(--font-weight-medium); position: relative; } .navbar .dropdown-item.active, .navbar .dropdown-item:active, .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { background: transparent; color: var(--link-hover-color); } .navbar .dropdown-toggle::after { content: "\f282"; display: inline-block; font-family: bootstrap-icons !important; font-size: var(--copyright-font-size); font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; left: 2px; border: 0; } .navbar-toggler { border: 0; padding: 0; cursor: pointer; margin: 0; width: 30px; height: 35px; outline: none; } .navbar-toggler:focus { outline: none; box-shadow: none; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before, .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transition: top 300ms 50ms ease, transform 300ms 350ms ease; top: 0; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(-45deg); } .navbar-toggler .navbar-toggler-icon { background: var(--white-color); transition: background 10ms 300ms ease; display: block; width: 30px; height: 2px; position: relative; } .navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after { transition: top 300ms 350ms ease, transform 300ms 50ms ease; position: absolute; right: 0; left: 0; background: var(--white-color); width: 30px; height: 2px; content: ''; } .navbar-toggler .navbar-toggler-icon::before { top: -8px; } .navbar-toggler .navbar-toggler-icon::after { top: 8px; } .offcanvas { padding: 30px; } .offcanvas.offcanvas-end { border-left: 0; } .offcanvas-header .btn-close { transition: all 0.3s; } .offcanvas-header .btn-close:hover { transform: rotate(180deg); } .offcanvas svg { position: absolute; bottom: 0; right: 0; left: 0; } /*--------------------------------------- BUTTONS -----------------------------------------*/ .custom-btn { background: var(--custom-btn-bg-color); border: 2px solid transparent; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--btn-font-size); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; line-height: normal; padding: 12px 26px; } .custom-btn:hover { background: var(--custom-btn-bg-hover-color); color: var(--white-color); } .custom-border-btn { background: transparent; border: 2px solid var(--secondary-color); color: var(--secondary-color); } .custom-border-btn:hover { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--white-color); } .custom-btn-group .link { color: var(--white-color); font-weight: var(--font-weight-medium); } .custom-btn-group .link:hover { color: var(--link-hover-color); } /*--------------------------------------- FORMS -----------------------------------------*/ .custom-form { background-color: white; padding: 20px; } .custom-form table { margin-left: auto; margin-right: auto; } .custom-form .form-control { border-radius: var(--border-radius-large); border-width: 1px; border-color: var(--border-color); box-shadow: none; color: var(--p-color); margin-bottom: 20px; padding: 12px 16px; outline: none; } .custom-form input { border-radius: var(--border-radius-large); border-width: 1px; border-color: var(--border-color); box-shadow: none; color: var(--p-color); margin-bottom: 20px; padding: 12px 16px; outline: none; } .custom-form .form-control:focus, .custom-form .form-control:hover { border-color: var(--secondary-color); } .custom-form button[type="submit"] { background: var(--secondary-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--p-font-size); font-weight: var(--font-weight-medium); transition: all 0.3s; margin-bottom: 0; padding: 12px 26px; } .custom-form button[type="submit"]:hover, .custom-form button[type="submit"]:focus { background: var(--custom-btn-bg-hover-color); border-color: transparent; } .custom-form input[type="submit"] { background: var(--secondary-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--p-font-size); font-weight: var(--font-weight-medium); transition: all 0.3s; margin-bottom: 0; padding: 12px 26px; } .custom-form input[type="submit"]:hover, .custom-form input[type="submit"]:focus { background: var(--custom-btn-bg-hover-color); border-color: transparent; } /* Select dropdowns — match the shape and spacing of text inputs */ .custom-form .form-select { border-radius: var(--border-radius-large); border-width: 1px; border-color: var(--border-color); box-shadow: none; color: var(--p-color); padding-left: 16px; padding-top: 1.625rem; padding-bottom: 0.625rem; outline: none; } .custom-form .form-select:focus, .custom-form .form-select:hover { border-color: var(--secondary-color); box-shadow: none; } /* Ensure form-floating wrappers match the bottom spacing of bare inputs */ .custom-form .form-floating { margin-bottom: 20px; } .form-floating > label { padding-left: 16px; } /*--------------------------------------- SECTIONS (shared utilities) -----------------------------------------*/ .section-bg { background-color: var(--section-bg-color); } .section-padding { padding-top: 100px; padding-bottom: 100px; } .section-overlay { content: ""; background: rgba(0, 0, 0, 0) linear-gradient(rgba(26, 31, 46, 0.05) 0%, rgba(26, 31, 46, 0.78) 100%) repeat scroll 0% 0%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /*--------------------------------------- HERO & AUTH SECTIONS -----------------------------------------*/ .hero-section, .auth-section { background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; padding-top: 100px; padding-bottom: 100px; height: 100vh; min-height: 670px; margin-bottom: -90px; } .hero-section { background-image: url('/static/images/splash.webp'); } .auth-section { background-image: url('/static/images/splash.webp'); } /*--------------------------------------- AUTH FORM PAGE (login / register / reset) -----------------------------------------*/ .auth-page { background-image: url('/static/images/splash.webp'); background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 100vh; padding-top: 100px; /* clears fixed navbar (76px) + breathing room */ padding-bottom: 60px; position: relative; } .auth-page::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(38, 51, 122, 0.58) 0%, rgba(38, 51, 122, 0.38) 60%, rgba(38, 51, 122, 0.58) 100% ); pointer-events: none; } .auth-page .container { position: relative; z-index: 1; } .auth-form-card { backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); background-color: rgba(255, 255, 255, 0.94); border-radius: var(--border-radius-medium); border: 1px solid rgba(226, 229, 236, 0.7); padding: 44px; box-shadow: 0 24px 48px rgba(26, 31, 46, 0.28); } .auth-form-card h2 { color: var(--secondary-color); margin-bottom: 24px; } /* Thin Icelandic-red accent under the auth heading (letterhead motif) */ .auth-form-card h2::after { content: ''; display: block; width: 44px; height: 2px; margin-top: 14px; background: var(--accent-red); } /* Input fields inside auth form card */ .auth-form-card .form-control { border-radius: var(--border-radius-large); border-width: 1px; border-color: var(--border-color); box-shadow: none; color: var(--p-color); margin-bottom: 16px; padding: 12px 18px; } .auth-form-card .form-control:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(38, 51, 122, 0.12); } /* Floating label tweaks for auth card */ .auth-form-card .form-floating { margin-bottom: 16px; } .auth-form-card .form-floating > .form-control { margin-bottom: 0; padding-top: 1.625rem; padding-bottom: 0.625rem; padding-left: 18px; } .auth-form-card .form-floating > label { padding-left: 18px; color: var(--p-color); } /* Submit button in auth card */ .auth-form-card button[type="submit"], .auth-form-card input[type="submit"] { background: var(--secondary-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--p-font-size); font-weight: var(--font-weight-medium); padding: 12px 30px; width: 100%; transition: background 0.3s; margin-top: 8px; } .auth-form-card button[type="submit"]:hover, .auth-form-card input[type="submit"]:hover { background: var(--custom-btn-bg-hover-color); } /* Links below auth form */ .auth-form-card .auth-links { margin-top: 18px; text-align: center; font-size: 0.9rem; } .auth-form-card .auth-links a { color: var(--secondary-color); font-weight: var(--font-weight-medium); text-decoration: underline; } .auth-form-card .auth-links a:hover { color: var(--custom-btn-bg-hover-color); } /* py4web validation errors inside auth card */ .auth-form-card .py4web-validation-error { margin-top: -12px; margin-bottom: 8px; font-size: 0.8em; color: var(--accent-red); } /*--------------------------------------- SUBTLE NAVBAR LOGIN (board members only for now — kept quiet) -----------------------------------------*/ .nav-login { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.55); font-size: var(--menu-font-size); font-weight: var(--font-weight-medium); letter-spacing: 0.02em; text-decoration: none; transition: color 0.2s ease; } .nav-login:hover { color: var(--white-color); } .nav-login:focus-visible { outline: 2px solid var(--white-color); outline-offset: 3px; border-radius: 2px; color: var(--white-color); } /*--------------------------------------- USER NAV DROPDOWN -----------------------------------------*/ .user-nav-dropdown .dropdown-toggle::after { display: none; /* hide default Bootstrap caret */ } .user-nav-dropdown .dropdown-toggle { color: var(--white-color) !important; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--border-radius-large); padding: 6px 14px; transition: all 0.3s; } .user-nav-dropdown .dropdown-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white-color); } .user-nav-dropdown .dropdown-menu { border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); box-shadow: 0 8px 24px rgba(26, 31, 46, 0.15); min-width: 160px; } .user-nav-dropdown .dropdown-item { font-size: 0.9rem; padding: 8px 16px; } .user-nav-dropdown .dropdown-item:hover { background-color: var(--section-bg-color); color: var(--secondary-color); } .hero-section .ratio, .auth-section .ratio { border-radius: var(--border-radius-medium); overflow: hidden; } .hero-section svg, .auth-section svg { position: absolute; right: 0; left: 0; } .hero-section > svg, .auth-section > svg { top: 0; } .hero-section .container + svg, .auth-section .container + svg { top: auto; bottom: -1px; } .hero-section .row, .auth-section .row { position: relative; z-index: 22; } .auth-form-wrapper { max-width: 575px; width: 100%; } /*--------------------------------------- ANIMATED HEADLINE -----------------------------------------*/ .cd-words-wrapper { display: inline-block; position: relative; text-align: left; } .cd-words-wrapper b { color: var(--link-hover-color); display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .cd-words-wrapper b.is-visible { position: relative; } .no-js .cd-words-wrapper b { opacity: 0; } .no-js .cd-words-wrapper b.is-visible { opacity: 1; } .cd-headline.rotate-1 .cd-words-wrapper { perspective: 300px; } .cd-headline.rotate-1 b { opacity: 0; transform-origin: 50% 100%; transform: rotateX(180deg); } .cd-headline.rotate-1 b.is-visible { opacity: 1; transform: rotateX(0deg); animation: cd-rotate-1-in 1.2s; } .cd-headline.rotate-1 b.is-hidden { transform: rotateX(180deg); animation: cd-rotate-1-out 1.2s; } @keyframes cd-rotate-1-in { 0% { transform: rotateX(180deg); opacity: 0; } 35% { transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { transform: rotateX(360deg); opacity: 1; } } @keyframes cd-rotate-1-out { 0% { transform: rotateX(0deg); opacity: 1; } 35% { transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { transform: rotateX(180deg); opacity: 0; } } /*--------------------------------------- NEWSLETTER SECTION -----------------------------------------*/ /* * Newsletter band photograph: "View of Reykjavík from Perlan" by Jakub Hałun * (Wikimedia Commons, user Jakubhal), licensed under CC BY-SA 4.0 — * https://creativecommons.org/licenses/by-sa/4.0/ * Source: https://commons.wikimedia.org/wiki/File:View_of_Reykjav%C3%ADk_from_Perlan,_20230507_1341_5757.jpg * Changes: resized to 2560px wide and converted to WebP for web use. This is a * ShareAlike adaptation, so the modified file is likewise CC BY-SA 4.0. */ .section-bg-image { background-image: url('/static/images/newsletter-reykjavik.webp'); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; margin-bottom: -70px; } .section-bg-image .container + svg { transform: rotate(180deg); position: relative; bottom: -1px; } .section-bg-image-block { backdrop-filter: blur(5px) saturate(160%); -webkit-backdrop-filter: blur(5px) saturate(160%); background-color: rgba(255, 255, 255, 0.82); border-radius: var(--border-radius-medium); border: 1px solid rgba(226, 229, 236, 0.6); padding: 40px; } .section-bg-image-block-inset { backdrop-filter: none; background-color: transparent; } .section-bg-image-block .input-group { background-color: var(--white-color); border-radius: var(--border-radius-large); border: 1px solid var(--border-color); padding: 8px 12px; } .section-bg-image-block .input-group-text { background-color: transparent; border: 10px; } .section-bg-image-block input[type="email"] { border: 0; box-shadow: none; margin-bottom: 0; padding-left: 0; } .section-bg-image-block button[type="submit"] { background-color: var(--secondary-color); border: 0; border-radius: var(--border-radius-large) !important; color: var(--white-color); max-width: 150px; } .section-bg-image-block button[type="submit"]:hover { background-color: var(--custom-btn-bg-hover-color); } /*--------------------------------------- ABOUT SECTION -----------------------------------------*/ .about-section { padding-bottom: 70px; } /*--------------------------------------- EVENTS SECTION -----------------------------------------*/ .events-section.section-bg .container > .row { margin-right: 5px; margin-left: 5px; } .events-section.section-bg .container > .row .row { margin: auto; } .events-title { font-size: var(--h3-font-size); font-weight: var(--font-weight-medium); } /*--------------------------------------- CUSTOM BLOCK (event cards) -----------------------------------------*/ .custom-block { border-radius: var(--border-radius-medium); position: relative; overflow: hidden; padding: 30px 20px; } .custom-block-bg { background: var(--white-color); border: 1px solid var(--border-color); } .custom-block-date-wrap { background-color: var(--secondary-color); border-radius: var(--border-radius-medium); text-align: center; padding: 20px 30px; } /* Month label sits on navy background — keep text light for legibility */ .custom-block-date-wrap strong { color: var(--white-color) !important; } /* Day number in the navy event-date chip — explicit size so it tracks the chip, not the (now larger) display h1 scale. */ .custom-block-date { font-size: 28px; color: var(--white-color); } .custom-block-image-wrap { border-radius: var(--border-radius-medium); position: relative; overflow: hidden; } .custom-block-image-wrap:hover .custom-block-image { transform: scale(1.2); } .custom-block-image-wrap:hover .custom-block-icon { opacity: 1; } .custom-block-image { transition: all 0.3s; } .custom-block-image-wrap .custom-block-date-wrap, .custom-block-image-wrap .custom-btn-wrap { position: absolute; bottom: 0; } .custom-block-image-wrap .custom-block-date-wrap { border-radius: 0; left: 0; width: 50%; padding: 12.30px 20px; } .custom-block-image-wrap .custom-btn-wrap { right: 0; width: 50%; } .custom-block-image-wrap .custom-btn { border-radius: 0; display: block; padding: 15px 20px; } .custom-block-info { padding-top: 10px; } .custom-block-image-wrap + .custom-block-info { padding-top: 20px; } .custom-block-span { color: var(--secondary-color); font-weight: var(--font-weight-bold); min-width: 110px; margin-right: 10px; } .custom-block-icon { background: var(--secondary-color); border-radius: var(--border-radius-large); color: var(--white-color); width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: var(--h3-font-size); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; } .custom-block-icon:hover { background: var(--custom-btn-bg-hover-color); color: var(--white-color); } /*--------------------------------------- MEMBERSHIP SECTION -----------------------------------------*/ .membership-section .container { position: relative; z-index: 2; } .table-responsive { border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); overflow: hidden; } .table-responsive tbody, .table-responsive td, .table-responsive tfoot, .table-responsive th, .table-responsive thead, .table-responsive tr { border: 0; } .table-responsive thead tr { background-color: var(--secondary-color); color: var(--white-color); } .table-responsive thead th { padding: 22px 16px !important; font-weight: var(--font-weight-medium); letter-spacing: 0.02em; } .table-responsive tbody tr:nth-child(even) { background-color: var(--section-bg-color); } .table-responsive .bi-check-value { color: #1f8a5b !important; font-size: 1.1rem; } .table > :not(caption) > * > * { padding: 18px 16px; } .table-responsive .bi-check-circle-fill { color: var(--accent-red); } .membership-form { background-color: var(--secondary-color); border-radius: var(--border-radius-medium); padding: 35px; } .membership-form .form-floating > textarea { border-radius: var(--border-radius-large); height: 100px; } /*--------------------------------------- TOKENIZED HOME COMPONENTS Former inline styles, lifted into classes so the brand tokens stay the single source of truth (and to keep markup clean under the strict CSP). -----------------------------------------*/ /* Small navy pill — e.g. "View all events" beside a section heading. */ .btn-pill-sm { display: inline-block; background: var(--secondary-color); color: var(--white-color); border: none; padding: 6px 16px; border-radius: var(--border-radius-large); font-size: var(--btn-font-size); font-weight: var(--font-weight-medium); white-space: nowrap; } .btn-pill-sm:hover { background: var(--custom-btn-bg-hover-color); color: var(--white-color); } /* Board roster card (home About section). */ .board-card { height: 100%; border: 0; border-radius: var(--border-radius-medium); overflow: hidden; text-align: center; background: var(--white-color); box-shadow: 0 0.125rem 0.5rem rgba(26, 31, 46, 0.10); } .board-card.is-president { border-top: 4px solid var(--accent-red); } .board-card-avatar-box { padding: 24px 16px 4px; } .board-card-initials { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; background: var(--secondary-color); color: var(--white-color); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: var(--font-weight-bold); } .board-card-body { padding: 12px 16px 18px; text-align: center; } .board-card-name { margin-bottom: 2px; color: var(--secondary-color); font-weight: var(--font-weight-bold); } .board-card-role { margin-bottom: 0; color: var(--accent-red); font-size: 0.8rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.07em; } /* Membership fee table: tighter density + the total (fees) row rule. */ .fee-table { font-size: 0.93rem; --bs-table-cell-padding-y: 0.18rem; } .fee-row-total { border-top: 2px solid var(--dark-color); } /*--------------------------------------- CONTACT SECTION -----------------------------------------*/ .contact-form .form-floating > textarea { border-radius: var(--border-radius-large); height: 120px; } .contact-info { position: relative; } /*--------------------------------------- IMAGE PLACEHOLDER -----------------------------------------*/ .img-placeholder { background: linear-gradient(135deg, #26337a 0%, #dc1e35 100%); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.35); width: 100%; } .img-placeholder .bi { font-size: 3rem; } /*--------------------------------------- FOOTER -----------------------------------------*/ /* Content footer — navy band, red top rule mirroring the navbar's red underline so the page is bookended by the same accent. Pure CSS, no JS. */ .site-footer { position: relative; background: var(--secondary-color); border-top: 3px solid var(--accent-red); color: rgba(255, 255, 255, 0.82); padding: 56px 0 0; } .site-footer .container { position: relative; z-index: 2; } .footer-logo { height: 64px; width: auto; margin-bottom: 18px; } .footer-tagline { max-width: 34ch; margin-bottom: 14px; color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; line-height: 1.6; } .footer-chapter { margin-bottom: 0; color: rgba(255, 255, 255, 0.70); font-size: 0.9rem; } .footer-heading { margin-bottom: 18px; color: var(--white-color); font-size: 0.82rem; font-weight: var(--font-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 11px; } .footer-links a { color: rgba(255, 255, 255, 0.82); font-size: 0.96rem; text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: var(--white-color); } .footer-chapter a, .footer-bottom a { color: var(--white-color); text-decoration: underline; } .footer-chapter a:hover, .footer-bottom a:hover { color: var(--accent-red); } .footer-bottom { margin-top: 44px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.66); font-size: 0.86rem; } /*--------------------------------------- RESPONSIVE STYLES -----------------------------------------*/ @media screen and (min-width: 992px) { .navbar .dropdown:hover .dropdown-menu { opacity: 1; margin-top: 0; pointer-events: auto; } } @media screen and (max-width: 991px) { h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } .section-padding { padding-top: 50px; padding-bottom: 50px; } .navbar { background-color: var(--secondary-color); } /* Phone/tablet: drop the big overhanging crest + scroll-zoom — at this width it crowds the hamburger toggler (the disc overlaps it). Fixed, in-bar size at both scroll states, and a tighter wordmark so the brand + toggler fit on one row. */ .brand-crest, .navbar.is-compact .brand-crest { width: 56px; height: 56px; margin-bottom: 0; filter: drop-shadow(0 3px 8px rgba(26, 31, 46, 0.25)); } .navbar .navbar-brand-text { font-size: 16px; letter-spacing: 0.08em; } .navbar .navbar-brand-text .h5 { font-size: 14px; } /* Let the brand shrink so a long wordmark never pushes the hamburger off the row (the toggler keeps its size and stays put). */ .navbar-brand { min-width: 0; flex: 0 1 auto; } .navbar-toggler { flex-shrink: 0; margin-left: auto; } .navbar-nav .dropdown-menu { position: relative; left: 10px; opacity: 1; pointer-events: auto; max-width: 155px; margin-top: 15px; margin-bottom: 15px; } .navbar-expand-lg .navbar-nav { padding-top: 15px; padding-bottom: 10px; } .navbar-expand-lg .navbar-nav .nav-link { margin: 5px; padding: 0; } /* Logged-in account menu inside the hamburger: a Bootstrap popup dropdown gets clipped/mispositioned in the collapsed navbar, so the Admin Dashboard/Logout links were unreachable. Render the menu INLINE (always visible) on mobile and drop the toggle button — the items sit centered in the dark menu like the nav links. */ .user-nav-dropdown .dropdown-toggle { /* !important beats the button's inline display:inline-flex. Hiding it also stops a tap from invoking Bootstrap's Popper, which would re-position the (now inline) menu absolutely and re-break it. */ display: none !important; } .user-nav-dropdown .dropdown-menu { display: block; /* Override the hover-reveal base (.navbar .dropdown-menu is opacity:0 + pointer-events:none) — there's no hover on touch, so make it visible + interactive inline. This is the piece the first attempt missed. */ opacity: 1; pointer-events: auto; position: static; float: none; inset: auto; transform: none; background: transparent; border: none; box-shadow: none !important; min-width: 0; margin: 8px 0 0; padding: 0; text-align: center; } .user-nav-dropdown .dropdown-menu::before { display: none; /* the desktop hover-pointer triangle would be a stray mark here */ } .user-nav-dropdown .dropdown-item { color: rgba(255, 255, 255, 0.75); justify-content: center; } .user-nav-dropdown .dropdown-item:hover, .user-nav-dropdown .dropdown-item:focus { background: transparent; color: var(--white-color); } .user-nav-dropdown .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.18); } .hero-section { position: relative; margin-bottom: 82px; } .events-section.section-bg .container > .row { margin-right: 0; margin-left: 0; } .section-bg-image-block { padding: 30px; } .site-footer { padding-top: 40px; } .footer-bottom { margin-top: 28px; } } @media screen and (max-width: 480px) { .navbar-brand { font-size: var(--p-font-size); } .section-bg-image-block { padding: 30px; } } @media screen and (max-width: 360px) { .custom-btn { font-size: 12px; padding: 8px 16px; } } /*--------------------------------------- HOME HERO (above-the-fold landing band) Full-bleed Iceland landscape + navy wash so white type stays legible over the light, overcast sky. -----------------------------------------*/ /* Smooth in-page anchor scrolling, no JS needed. scroll-margin clears the CSS position:sticky navbar (~108px) so an anchored section heading lands just below it, not under it. */ html { scroll-behavior: smooth; } section[id^="section_"] { scroll-margin-top: 120px; } /* * Hero photograph: "Goðafoss, July 2014" by Martin Falbisoner (Wikimedia * Commons), licensed under CC BY-SA 4.0 — * https://creativecommons.org/licenses/by-sa/4.0/ * Source: https://commons.wikimedia.org/wiki/File:Go%C3%B0afoss_July_2014.JPG * Changes: resized to 2560px wide and converted to WebP for web use. This is a * ShareAlike adaptation, so the modified file is likewise CC BY-SA 4.0. */ .hero-home { position: relative; display: flex; align-items: center; min-height: 72vh; padding: 96px 0 116px; background: url('/static/images/hero-godafoss.webp') center/cover no-repeat; overflow: hidden; } .hero-home::before { /* navy wash for contrast (WCAG AA) */ content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(26, 31, 46, 0.74) 0%, rgba(38, 51, 122, 0.52) 55%, rgba(26, 31, 46, 0.80) 100% ); pointer-events: none; } /* min-width:0 + width:100% lets this flex item shrink to the viewport on phones (default flex min-width:auto otherwise forces horizontal overflow). */ .hero-home .container { position: relative; z-index: 2; min-width: 0; width: 100%; } .hero-home-eyebrow { margin-bottom: 1rem; color: var(--white-color); font-size: 0.82rem; font-weight: var(--font-weight-bold); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.92; } .hero-home h1 { max-width: 16ch; margin-bottom: 1.25rem; color: var(--white-color); font-size: clamp(2.5rem, 5.8vw, 4.1rem); font-weight: var(--font-weight-bold); line-height: 1.05; letter-spacing: -0.02em; } /* In the hero the accent word stays white — the italic alone carries it, and Saga Red would lose contrast over the photograph. */ .hero-home h1 em { color: var(--white-color); } .hero-home .hero-lead { max-width: 56ch; margin-bottom: 1.9rem; color: rgba(255, 255, 255, 0.93); font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.55; } .hero-home .hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; } .hero-btn { display: inline-block; padding: 13px 30px; border-radius: var(--border-radius-large); font-size: var(--p-font-size); font-weight: var(--font-weight-medium); text-decoration: none; transition: all 0.25s ease; } .hero-btn-primary { background: var(--white-color); border: 2px solid var(--white-color); color: var(--secondary-color); } .hero-btn-primary:hover { background: var(--accent-red); border-color: var(--accent-red); color: var(--white-color); } .hero-btn-outline { background: transparent; border: 2px solid rgba(255, 255, 255, 0.8); color: var(--white-color); } .hero-btn-outline:hover { background: var(--white-color); border-color: var(--white-color); color: var(--secondary-color); } /* Wave melts the hero into the light Events band below */ .hero-home .hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; width: 100%; line-height: 0; } @media (max-width: 767px) { .hero-home { min-height: 66vh; padding: 72px 0 96px; text-align: center; } .hero-home h1 { max-width: none; } .hero-home .hero-lead { max-width: none; margin-left: auto; margin-right: auto; } /* Stack the CTAs full-width — bigger tap targets and no two-button overflow. */ .hero-home .hero-cta { flex-direction: column; align-items: stretch; } .hero-home .hero-btn { width: 100%; text-align: center; } } /* Skip-to-content link — visually hidden until keyboard-focused (WCAG 2.4.1) */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; padding: 10px 18px; background: var(--secondary-color); color: var(--white-color); font-weight: var(--font-weight-medium); text-decoration: none; border-radius: 0 0 var(--border-radius-large) 0; } .skip-link:focus { left: 0; color: var(--white-color); } /*--------------------------------------- REDUCED MOTION (WCAG 2.3.3 / brand quality floor) Honour the OS "reduce motion" setting: kill smooth-scroll, the rotating headline animation, and card/hover transitions. The rotating headline still swaps words — it just snaps instead of flipping. -----------------------------------------*/ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }