/** * Race Course 2026 – huvud-CSS * Bootstrap 5-overrides + temastilar. Tokens sätts i (inc/tokens.php). * * Riktning 2A: mörk topbar/header som ljusnar gradvis nedåt sidan. */ /* ============================ Bas ============================ */ /* Global nedskalning ~10% – motsvarar webbläsarzoom 90% (luftigare känsla). Endast desktop (≥992px): zoom på :root stör sticky/scroll på mobil, så där körs 100%. Justera via --rc-zoom (1 = 100%, .9 = 90%). */ :root { --rc-zoom: 0.9; } html { background: var(--rc-backdrop); } @media (min-width: 992px) { :root { zoom: var(--rc-zoom); } } body { font-family: var(--rc-font-sans); color: var(--rc-body); background: var(--rc-backdrop); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--rc-font-serif); color: var(--rc-heading); font-weight: 600; line-height: 1.15; } a { color: inherit; text-decoration: none; } .rc-main { display: block; } /* Ram runt hela den aktiva ytan (topbar → header → innehåll → footer). En enda box-shadow ramar in "arket" mot bakgrunden. Får INTE ha overflow:hidden – då bryts den sticky headern. */ .rc-frame { max-width: var(--rc-content-max); margin-inline: auto; background: var(--rc-surface); box-shadow: 0 40px 90px rgba(0, 0, 0, .4); } /* Innehållsvrapp – centrerad "sida". Vit som standard; block med egen bakgrund (Citat, CTA-banner, Text+Bild …) sätter själva sin yta. */ .rc-shell { max-width: var(--rc-content-max); margin-inline: auto; background: #fff; overflow: hidden; } /* Sektions-hjälpare */ .rc-container { max-width: var(--rc-content-max); margin-inline: auto; padding-inline: var(--rc-section-x); } .rc-eyebrow { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--rc-gold-ink); font-weight: 500; margin: 0; } .rc-serif { font-family: var(--rc-font-serif); } /* Spacing-klasser (block margin) */ .block-mt--none { margin-top: 0 !important; } .block-mt--sm { margin-top: 1.5rem !important; } .block-mt--md { margin-top: 3rem !important; } .block-mt--lg { margin-top: 5rem !important; } .block-mt--xl { margin-top: 7rem !important; } .block-mb--none { margin-bottom: 0 !important; } .block-mb--sm { margin-bottom: 1.5rem !important; } .block-mb--md { margin-bottom: 3rem !important; } .block-mb--lg { margin-bottom: 5rem !important; } .block-mb--xl { margin-bottom: 7rem !important; } /* ============================ Knappar ============================ */ .rc-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rc-font-sans); font-size: 14px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: 16px 30px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease; } .rc-btn:hover { transform: translateY(-1px); } .rc-btn--gold { background: var(--rc-gold); color: #211c17; } .rc-btn--gold:hover { color: #211c17; box-shadow: 0 10px 24px rgba(var(--rc-gold-rgb), .35); } .rc-btn--ghost { background: #ffffff; border-color: rgba(255,255,255,.45); color: var(--rc-gold-cta-text); } .rc-btn--ghost:hover { color: var(--rc-gold-cta-text); box-shadow: 0 10px 24px rgba(0,0,0,.12); } .rc-btn--dark { background: var(--rc-dark-cta); color: var(--rc-dark-cta-text); } .rc-btn--dark:hover { color: var(--rc-dark-cta-text); box-shadow: 0 10px 24px rgba(36,29,22,.35); } .rc-btn--tonal { background: rgba(138,109,28,.1); border-color: rgba(138,109,28,.5); color: #5c4a12; } .rc-btn--tonal:hover { color: #5c4a12; background: rgba(138,109,28,.16); } /* Piller-knappar (undersida) – ej versal */ .rc-btn--pill-dark, .rc-btn--pill-outline { text-transform: none; letter-spacing: 0; font-size: 15px; padding: 14px 28px; border-radius: var(--rc-radius-pill); } .rc-btn--pill-dark { background: var(--rc-dark-cta); color: var(--rc-dark-cta-text); } .rc-btn--pill-dark:hover { color: var(--rc-dark-cta-text); box-shadow: 0 10px 24px rgba(36,29,22,.3); } .rc-btn--pill-outline { background: transparent; border-color: var(--rc-dark-cta); color: var(--rc-dark-cta); } .rc-btn--pill-outline:hover { color: #fff; background: var(--rc-dark-cta); } /* Textlänk med pil ("Beställ →", "Läs mer →") */ .rc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--rc-gold-ink); font-weight: 500; white-space: nowrap; } .rc-link--underline { border-bottom: 1px solid var(--rc-gold-ink); padding-bottom: 2px; } .rc-link:hover { color: var(--rc-gold); } /* Bildruta / platshållare */ .rc-imgslot { display: flex; align-items: center; justify-content: center; background: var(--rc-placeholder-bg); color: var(--rc-placeholder-text); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; } .rc-imgslot img { width: 100%; height: 100%; object-fit: var(--rc-fit, cover); object-position: var(--rc-pos, center center); display: block; } /* ============================ Topbar ============================ */ .rc-topbar { max-width: var(--rc-content-max); margin-inline: auto; background: var(--rc-dark); color: #b8ae9c; border-bottom: 1px solid rgba(var(--rc-gold-rgb), .22); } .rc-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--rc-section-x); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } .rc-topbar__group { display: flex; gap: 26px; } .rc-topbar__accent { color: var(--rc-gold); } /* ============================ Header ============================ */ .rc-header { position: -webkit-sticky; /* iOS Safari */ position: sticky; top: 0; z-index: 1030; max-width: var(--rc-content-max); margin-inline: auto; background: var(--rc-dark-2); } .rc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 16px var(--rc-section-x); transition: padding .25s ease; } .rc-logo { display: inline-flex; flex: none; align-items: center; } /* Loggafilen har ca 20% transparent marginal upptill/nedtill och ~15% i sidled. Vi gör bilden stor och drar in tomrummet med negativa marginaler, så själva märket blir stort utan att headern växer i onödan. (Byts loggan mot en tightare trimmad fil kan dessa negativa marginaler nollställas.) */ .rc-logo img { height: 116px; width: auto; object-fit: contain; display: block; margin: -20px 0 -20px -20px; transition: height .25s ease, margin .25s ease; } .rc-logo__text { color: #fff; font-family: var(--rc-font-serif); font-weight: 600; font-size: 24px; letter-spacing: .04em; transition: font-size .25s ease; } /* Reserverar headerns plats när den blir fixed på mobil (sätts av theme.js) */ .rc-header-spacer { height: 0; } /* DESKTOP-header vid scroll: JS sätter .rc-fixed (se theme.js). Safari bryter position:sticky när :root är zoomad (--rc-zoom på desktop), så där används position:fixed, centrerad i "arket" (content-max). Mobilen använder INTE denna klass – där räcker native position:sticky (ingen zoom, mjukt på iOS). */ .rc-header.rc-fixed { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--rc-content-max); z-index: 1030; } /* Krymper loggan/headern vid scroll (klassen sätts av theme.js) */ .rc-header.rc-scrolled .rc-header__inner { padding-top: 8px; padding-bottom: 8px; } .rc-header.rc-scrolled .rc-logo img { height: 74px; margin: -12px 0 -12px -13px; } .rc-header.rc-scrolled .rc-logo__text { font-size: 20px; } .rc-header__right { display: flex; align-items: center; gap: 20px; } .rc-header__phone { color: var(--rc-gold); font-size: 16px; white-space: nowrap; } .rc-header__phone:hover { color: var(--rc-gold-light); } /* Nav */ .rc-nav-wrap { display: flex; } .rc-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 24px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; list-style: none; margin: 0; padding: 0; } .rc-nav .nav-item { display: inline-flex; position: relative; } .rc-nav .nav-link { color: var(--rc-nav-text); padding: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .15s ease; background: none; border: 0; } .rc-nav .nav-link:hover, .rc-nav .nav-link.active { color: var(--rc-gold); } /* Dropdown-pil (chevron – två streck, CSS-ritad). OBS: nollställ Bootstraps egna ::after-kanter (border-top/left) först. */ .rc-nav .dropdown-toggle::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .rc-nav .dropdown:hover > .dropdown-toggle::after { transform: translateY(1px) rotate(225deg); } /* Dropdown-panel (mörk, guld-border) – staplad kolumn */ .rc-nav .dropdown-menu { min-width: 210px; margin: 0; padding: 0; background: var(--rc-dark-2); border: 1px solid rgba(var(--rc-gold-rgb), .3); border-radius: 0; box-shadow: 0 20px 40px rgba(0,0,0,.4); list-style: none; } .rc-nav .dropdown-menu .rc-dropdown__li { display: block; } .rc-nav .dropdown-menu .dropdown-item { display: block; width: 100%; padding: 12px 18px; font-size: 14px; letter-spacing: .04em; text-transform: none; color: var(--rc-nav-text); border-bottom: 1px solid rgba(var(--rc-gold-rgb), .14); white-space: nowrap; } .rc-nav .dropdown-menu .rc-dropdown__li:last-child .dropdown-item { border-bottom: 0; } .rc-nav .dropdown-menu .dropdown-item:hover, .rc-nav .dropdown-menu .dropdown-item:focus { background: rgba(var(--rc-gold-rgb), .12); color: var(--rc-gold); } /* Desktop: fäll ut rakt nedåt (absolut positionerad), öppna på hover/fokus */ @media (min-width: 992px) { .rc-nav .dropdown > .dropdown-menu { position: absolute; top: 100%; left: 0; display: block; /* alltid i DOM – synlighet styrs nedan */ margin-top: 14px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } /* Osynlig brygga över 14px-gapet så menyn inte stängs när muspekaren rör sig dit. */ .rc-nav .dropdown > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .rc-nav .dropdown:hover > .dropdown-menu, .rc-nav .dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } /* Hamburger */ .rc-header__toggle { display: none; flex-direction: column; gap: 5px; width: 34px; background: none; border: 0; cursor: pointer; padding: 6px 0; } .rc-header__toggle span { display: block; height: 2px; background: var(--rc-nav-text); border-radius: 2px; } /* Offcanvas (mobil) */ .rc-offcanvas { background: var(--rc-dark-2); color: var(--rc-nav-text); width: min(86vw, 360px); } .rc-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(var(--rc-gold-rgb), .2); } .rc-offcanvas .rc-logo__text { font-size: 20px; } .rc-offcanvas .navbar-nav { --bs-nav-link-padding-y: .6rem; gap: 2px; } .rc-offcanvas .nav-link, .rc-offcanvas .navbar-nav a { color: var(--rc-nav-text); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; padding: 10px 0; display: block; border-bottom: 1px solid rgba(var(--rc-gold-rgb), .12); } /* Undermenyer i mobil – accordion (fälls ut vid tryck på pilen) */ .rc-offcanvas .menu-item-has-children { position: relative; } .rc-offcanvas .menu-item-has-children > a { padding-right: 48px; } .rc-offcanvas .sub-menu { list-style: none; margin: 0; padding: 0 0 0 14px; display: none; } .rc-offcanvas .menu-item-has-children.is-open > .sub-menu { display: block; } .rc-offcanvas .sub-menu a { text-transform: none; letter-spacing: .02em; font-size: 14px; color: var(--rc-ink-body-dark); } .rc-submenu-toggle { position: absolute; top: 0; right: -8px; width: 56px; height: 44px; background: none; border: 0; color: var(--rc-gold-light); cursor: pointer; display: flex; align-items: center; justify-content: center; } .rc-submenu-toggle::before { content: ""; width: 11px; height: 11px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; } .rc-offcanvas .menu-item-has-children.is-open > .rc-submenu-toggle::before { transform: translateY(3px) rotate(225deg); } .rc-header__phone--mobile { display: inline-block; margin-top: 22px; font-size: 18px; } /* ============================ Footer ============================ */ .rc-footer { max-width: var(--rc-content-max); margin-inline: auto; background: var(--rc-dark); color: var(--rc-ink-body-dark); border-top: 1px solid rgba(var(--rc-gold-rgb), .22); } .rc-footer__inner { padding: 56px var(--rc-section-x) 32px; } /* Nyhetsbrev – kant-till-kant band överst i footern. Ljus grå gradient (möter inte det svarta), mörk text för läsbarhet. */ .rc-newsletter { background: linear-gradient(180deg, #d6d4cf 0%, #c6c4be 100%); } .rc-newsletter__inner { max-width: var(--rc-content-max); margin-inline: auto; padding: 40px var(--rc-section-x) 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px 56px; flex-wrap: wrap; } .rc-newsletter__intro { flex: 1 1 320px; } .rc-newsletter__title { font-family: var(--rc-font-serif); font-size: 26px; font-weight: 600; color: var(--rc-heading); margin: 0; } .rc-newsletter__text { font-size: 15px; line-height: 1.6; color: var(--rc-body); margin: 8px 0 0; max-width: 460px; } .rc-newsletter__action { flex: 1 1 360px; max-width: 480px; } .rc-newsletter__form { display: flex; gap: 12px; } .rc-newsletter__input { flex: 1 1 auto; min-width: 0; font-family: var(--rc-font-sans); font-size: 16px; color: var(--rc-heading); background: #fff; border: 1px solid var(--rc-border); border-radius: 8px; padding: 13px 15px; transition: border-color .15s ease, box-shadow .15s ease; } .rc-newsletter__input::placeholder { color: var(--rc-muted); } .rc-newsletter__input:focus { outline: none; border-color: var(--rc-gold); box-shadow: 0 0 0 3px rgba(var(--rc-gold-rgb), .2); } .rc-newsletter__input--error { border-color: #b3261e; } .rc-newsletter__btn { flex: none; white-space: nowrap; } .rc-newsletter__ok { font-size: 16px; color: var(--rc-gold-ink); margin: 0; } .rc-newsletter__err { font-size: 14px; color: #b3261e; margin: 8px 0 0; } .rc-newsletter__note { font-size: 13px; color: var(--rc-body); margin: 10px 0 0; } /* Högre specificitet än footerns generella länkfärg (.rc-footer a). */ .rc-newsletter .rc-newsletter__note a { color: var(--rc-gold-ink); font-weight: 600; text-decoration: underline; } .rc-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 767.98px) { .rc-newsletter__inner { padding: 32px 22px 36px; } .rc-newsletter__form { flex-direction: column; } .rc-newsletter__btn { width: 100%; justify-content: center; } .rc-newsletter__title { font-size: 22px; } } /* Två delar: logga till vänster, textkolumner till höger. */ .rc-footer__main { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: start; } .rc-footer__brand { flex: none; } .rc-footer__logo { height: 104px; width: auto; object-fit: contain; display: block; } .rc-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .rc-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--rc-ink-body-dark); } .rc-footer__label { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--rc-gold-light); margin-bottom: 2px; } .rc-footer a { color: var(--rc-ink-body-dark); text-decoration: none; } .rc-footer a:hover { color: var(--rc-gold); } .rc-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(var(--rc-gold-rgb), .18); font-size: 14px; color: var(--rc-muted); } .rc-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; } .rc-footer__legal a { color: var(--rc-ink-body-dark); } /* ============================ Sidmall (page/undersida) ============================ */ /* Vit bakgrund som standard. Block med egen bakgrund överrider själva. */ .rc-page { background: #fff; } /* Toppbild – utvald bild överst på sidan (valfritt, som single-event). */ .rc-page-hero { background: #fff; } .rc-page-hero__img { width: 100%; height: 420px; object-fit: var(--rc-fit, cover); object-position: var(--rc-pos, center center); display: block; } .rc-page-hero + .rc-page-head { padding-top: 40px; } @media (max-width: 767.98px) { .rc-page-hero__img { height: 240px; } } /* Sidhuvud – WP:s sidtitel som H1 (centrerad). */ .rc-page-head { background: #fff; padding: 64px var(--rc-section-x) 8px; } .rc-page-head__inner { max-width: 760px; margin-inline: auto; text-align: center; } .rc-page-head__title { font-family: var(--rc-font-serif); font-size: 52px; line-height: 1.15; font-weight: 600; color: var(--rc-heading); margin: 0; text-wrap: pretty; } /* Sidinnehåll – vanliga Gutenberg-block (paragraf, rubrik, lista, bild, citat) hålls i en centrerad läskolumn. Tema-egna ACF-block renderas som egna fullbredds-
och påverkas inte av kolumnen. */ .rc-page__content { padding-bottom: 8px; } .rc-page__content > p, .rc-page__content > h2, .rc-page__content > h3, .rc-page__content > h4, .rc-page__content > figure, .rc-page__content > blockquote, .rc-page__content > .wp-block-image, .rc-page__content > .wp-block-quote, .rc-page__content > .wp-block-table { max-width: 760px; margin-inline: auto; padding-inline: var(--rc-section-x); } /* Listor: samma läskolumn men extra vänsterindrag så punkterna/siffrorna ryms inom spalten (all list-layout i EN regel för att undvika logisk/fysisk padding-krock). */ .rc-page__content > ul, .rc-page__content > ol { max-width: 760px; margin-inline: auto; padding-inline-end: var(--rc-section-x); padding-inline-start: calc(var(--rc-section-x) + 24px); } /* Övriga core-block (Design/Text) hålls också i läskolumnen – utom när de uttryckligen satts till bred/full bredd. */ .rc-page__content > .wp-block-buttons:not(.alignwide):not(.alignfull), .rc-page__content > .wp-block-columns:not(.alignwide):not(.alignfull), .rc-page__content > .wp-block-group:not(.alignwide):not(.alignfull), .rc-page__content > .wp-block-media-text:not(.alignwide):not(.alignfull), .rc-page__content > .wp-block-embed:not(.alignwide):not(.alignfull), .rc-page__content > .wp-block-cover:not(.alignwide):not(.alignfull), .rc-page__content > .wp-block-separator, .rc-page__content > .wp-block-code, .rc-page__content > .wp-block-preformatted, .rc-page__content > .wp-block-pullquote, .rc-page__content > .wp-block-verse { max-width: 760px; margin-inline: auto; padding-inline: var(--rc-section-x); } /* Kolumner: se till att kolumnerna faktiskt ligger i rad även utan wp-block-library, samt en avdelare som syns i temats stil. */ .rc-page__content > .wp-block-columns { display: flex; gap: 32px; } .rc-page__content > .wp-block-columns > .wp-block-column { flex: 1; } .rc-page__content > .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .rc-page__content > .wp-block-separator { border: 0; border-top: 1px solid var(--rc-border); height: 0; } @media (max-width: 600px) { .rc-page__content > .wp-block-columns { flex-direction: column; gap: 16px; } } .rc-page__content > p { font-size: 17px; line-height: 1.75; color: var(--rc-body); margin: 0 auto 18px; } .rc-page__content > h2 { font-family: var(--rc-font-serif); font-size: 32px; font-weight: 600; color: var(--rc-heading); line-height: 1.25; margin: 40px auto 14px; } .rc-page__content > h3 { font-family: var(--rc-font-serif); font-size: 26px; font-weight: 600; color: var(--rc-heading); line-height: 1.3; margin: 32px auto 12px; } .rc-page__content > h4 { font-family: var(--rc-font-sans); font-size: 19px; font-weight: 600; color: var(--rc-heading); line-height: 1.35; margin: 26px auto 10px; } .rc-page__content > ul, .rc-page__content > ol { font-size: 17px; line-height: 1.7; color: var(--rc-body); } .rc-page__content > ul li, .rc-page__content > ol li { margin-bottom: 6px; } .rc-page__content > figure img, .rc-page__content > .wp-block-image img { border-radius: var(--rc-radius-image); display: block; } /* Tabeller (t.ex. konferenslokalernas kapacitet). */ .rc-page__content > .wp-block-table, .rc-page__content > figure.wp-block-table { overflow-x: auto; } .rc-page__content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; } .rc-page__content .wp-block-table th, .rc-page__content .wp-block-table td { padding: 12px 14px; border: 1px solid var(--rc-border); text-align: left; color: var(--rc-body); } .rc-page__content .wp-block-table thead th { background: var(--rc-surface); font-family: var(--rc-font-sans); font-weight: 700; color: var(--rc-heading); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .rc-page__content .wp-block-table tbody th { font-weight: 600; color: var(--rc-heading); } .rc-page__content .wp-block-table tbody tr:nth-child(even) td, .rc-page__content .wp-block-table tbody tr:nth-child(even) th { background: rgba(242,239,230,.5); } /* Bara riktiga innehållslänkar – inte knappar (.rc-btn) eller hela kort-länkar (t.ex. .rc-event-card som wrappar hela kortet). */ .rc-page__content a:not(.rc-btn):not(.rc-event-card) { color: var(--rc-gold-ink); text-decoration: underline; } /* Första blocket direkt efter sidhuvudet ska inte få dubbel toppmarginal. */ .rc-page__content > *:first-child { margin-top: 0; } /* Vitt luftutrymme efter sidhuvudet innan ett fullbredds-ACF-block. */ .rc-page-head + .rc-page__content > p:first-child, .rc-page-head + .rc-page__content > ul:first-child, .rc-page-head + .rc-page__content > ol:first-child, .rc-page-head + .rc-page__content > h2:first-child { padding-top: 8px; } @media (max-width: 767.98px) { .rc-page-head { padding: 44px 22px 6px; } .rc-page-head__title { font-size: 36px; } .rc-page__content > p, .rc-page__content > h2, .rc-page__content > h3, .rc-page__content > h4, .rc-page__content > figure, .rc-page__content > blockquote { padding-inline: 22px; } } /* ============================ Arkiv / blogglista ============================ */ .rc-archive { background: #fff; padding: 56px var(--rc-section-x); } .rc-archive__list { display: flex; flex-direction: column; gap: 32px; max-width: 860px; margin-inline: auto; } .rc-archive__item { display: flex; gap: 28px; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid var(--rc-border-soft); } .rc-archive__item:last-child { border-bottom: 0; padding-bottom: 0; } .rc-archive__thumb { flex: none; width: 220px; height: 150px; overflow: hidden; border-radius: var(--rc-radius-image-sm); } .rc-archive__thumb img { width: 100%; height: 100%; object-fit: cover; } .rc-archive__body { display: flex; flex-direction: column; gap: 8px; } .rc-archive__title { font-family: var(--rc-font-serif); font-size: 28px; font-weight: 600; margin: 0; color: var(--rc-heading); } .rc-archive__excerpt { font-size: 16px; line-height: 1.6; color: var(--rc-body); margin: 0; } .rc-archive--empty { text-align: center; } .rc-archive__empty { text-align: center; padding: 40px 0; color: var(--rc-body); } @media (max-width: 575.98px) { .rc-archive { padding: 40px 22px; } .rc-archive__item { flex-direction: column; gap: 14px; } .rc-archive__thumb { width: 100%; height: 200px; } } /* ============================ Evenemang ============================ */ /* Arkiv – rutnät av evenemangskort */ .rc-events { background: #fff; padding: 56px var(--rc-section-x); } /* Kolumnantal styrs från Temainställningar via --rc-ev-cols / --rc-ev-cols-mobile. */ .rc-events__grid { display: grid; grid-template-columns: repeat(var(--rc-ev-cols, 3), 1fr); gap: 28px; } .rc-event-card { display: flex; flex-direction: column; background: var(--rc-surface); border: 1px solid var(--rc-border); border-radius: var(--rc-radius-card); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; } .rc-event-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .12); transform: translateY(-2px); } .rc-event-card__media { position: relative; } .rc-event-card__img { width: 100%; height: 190px; object-fit: cover; display: block; } .rc-event-card__img--placeholder { background: var(--rc-placeholder-bg); } .rc-event-card__badge { position: absolute; top: 14px; left: 14px; background: var(--rc-dark); color: var(--rc-ink-light); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; line-height: 1; } .rc-event-card__badge strong { font-family: var(--rc-font-serif); font-size: 21px; } .rc-event-card__badge span { font-size: 11px; letter-spacing: .12em; margin-top: 3px; color: var(--rc-gold-light); } .rc-event-card__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .rc-event-card__meta { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--rc-gold-ink); margin: 0; } .rc-event-card__place::before { content: " · "; } .rc-event-card__title { font-family: var(--rc-font-serif); font-size: 22px; font-weight: 600; color: var(--rc-heading); margin: 0; line-height: 1.2; } .rc-event-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--rc-body); margin: 0; } .rc-event-card__body .rc-link { margin-top: auto; padding-top: 4px; } .rc-events__empty { text-align: center; color: var(--rc-body); padding: 48px 0; } /* Single – evenemangshuvud */ .rc-event-hero { background: #fff; } .rc-event-hero__img { width: 100%; height: 420px; object-fit: cover; display: block; } .rc-event-hero__inner { max-width: 760px; margin-inline: auto; padding: 44px var(--rc-section-x) 8px; text-align: center; } .rc-event-hero__meta { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--rc-gold-ink); margin: 0 0 12px; } .rc-event-hero__title { font-family: var(--rc-font-serif); font-size: 44px; font-weight: 600; color: var(--rc-heading); line-height: 1.1; margin: 0; text-wrap: pretty; } .rc-event-hero__ingress { font-size: 18px; line-height: 1.7; color: var(--rc-body); margin: 16px auto 0; max-width: 640px; } .rc-event-hero__cta { margin-top: 24px; } .rc-event-back { background: #fff; padding: 8px var(--rc-section-x) 56px; } .rc-event-back .rc-link { display: inline-flex; } /* Upprepnings-pill på kort (t.ex. "Varje torsdag t.o.m. 18 dec") */ .rc-event-card__recur { position: absolute; top: 14px; right: 14px; background: rgba(var(--rc-gold-rgb), .95); color: #211c17; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--rc-radius-pill); } /* Kommande tillfällen (single, återkommande evenemang) */ .rc-event-dates { margin: 24px auto 0; max-width: 520px; text-align: left; background: var(--rc-surface); border: 1px solid var(--rc-border); border-radius: var(--rc-radius-card); padding: 16px 20px; } .rc-event-dates__label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-gold-ink); margin-bottom: 10px; } .rc-event-dates__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; } .rc-event-dates__list li { font-size: 14px; color: var(--rc-body); background: #fff; border: 1px solid var(--rc-border); border-radius: var(--rc-radius-pill); padding: 5px 12px; } .rc-event-dates__list strong { color: var(--rc-heading); } /* Växling mellan kommande / tidigare evenemang */ .rc-events__switch { display: flex; justify-content: center; margin-top: 40px; } .rc-events__switch .rc-link { display: inline-flex; } /* Tidigare (genomförda) evenemang – nedtonade */ .rc-event-card--past .rc-event-card__img { filter: grayscale(.4) brightness(.98); } .rc-event-card--past .rc-event-card__badge { background: var(--rc-muted); } .rc-event-card--past .rc-event-card__badge span { color: var(--rc-ink-light); } .rc-event-card__recur--past { background: rgba(36, 29, 22, .72); color: var(--rc-ink-light); } @media (max-width: 767.98px) { .rc-events__grid { grid-template-columns: repeat(var(--rc-ev-cols-mobile, 1), 1fr); gap: 16px; } /* Kompakta kort på mobil – mindre info. */ .rc-event-card__excerpt, .rc-event-card__place { display: none; } .rc-event-card__img { height: 140px; } .rc-event-card__body { padding: 16px 16px; gap: 6px; } .rc-event-card__title { font-size: 18px; } .rc-event-card__meta { font-size: 12px; } .rc-event-card__badge { padding: 6px 9px; } .rc-event-card__badge strong { font-size: 18px; } .rc-event-card__recur { font-size: 10px; padding: 4px 8px; } .rc-event-hero__img { height: 260px; } .rc-event-hero__title { font-size: 32px; } .rc-event-hero__inner { padding: 32px 22px 8px; } } @media (max-width: 575.98px) { .rc-events { padding: 40px 22px; } } /* ============================ Paginering ============================ */ .rc-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; } .rc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--rc-border); color: var(--rc-body-strong); } .rc-pagination .page-numbers.current { background: var(--rc-gold); color: #211c17; border-color: var(--rc-gold); } /* ============================ Responsivt ============================ */ @media (max-width: 991.98px) { .rc-nav-wrap { display: none; } .rc-header__phone { display: none; } .rc-header__toggle { display: flex; } .rc-topbar__inner { font-size: 12px; letter-spacing: .1em; gap: 12px; flex-wrap: wrap; } .rc-topbar__group { gap: 16px; } } @media (max-width: 767.98px) { :root { --rc-section-x: 22px; } .rc-topbar__group:last-child { display: none; } .rc-footer__main { grid-template-columns: 1fr; gap: 32px; } .rc-footer__cols { grid-template-columns: 1fr; gap: 28px; } .rc-footer__logo { height: 80px; } .rc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ============================ 404 ============================ */ .rc-404 { background: #fff; padding: 80px var(--rc-section-x) 96px; text-align: center; position: relative; overflow: hidden; } .rc-404__inner { max-width: 640px; margin-inline: auto; position: relative; } .rc-404__num { display: block; font-family: var(--rc-font-serif); font-size: clamp(120px, 22vw, 240px); line-height: .85; font-weight: 600; color: rgba(var(--rc-gold-rgb), .16); letter-spacing: .02em; } .rc-404__eyebrow { margin-top: 4px; } .rc-404__title { font-family: var(--rc-font-serif); font-size: clamp(30px, 5vw, 46px); font-weight: 600; color: var(--rc-heading); line-height: 1.12; margin: 10px 0 0; } .rc-404__text { font-size: 18px; line-height: 1.7; color: var(--rc-body); margin: 16px auto 0; max-width: 480px; } .rc-404__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; } @media (max-width: 600px) { .rc-404 { padding: 52px 22px 64px; } .rc-404__cta { flex-direction: column; } .rc-404__cta .rc-btn { width: 100%; justify-content: center; } }