/* ========================================================================== Tapa Valla Kultuurikeskus – main stylesheet "Warm paper, confident type, colour as a signal." 0. Fonts 1. Tokens 2. Base 3. Layout 4. Header 5. Components 6. Pages 8. Footer 9. Small screens 10. Print (7. Content sections live in sections.css, loaded only where the blocks are used) ========================================================================== */ /* 0. Fonts (self-hosted, subset to Estonian; the -ext files cover rare letters) */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-et.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+0160-0161,U+017D-017E,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2190-2193,U+2212} @font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-ext.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-015F,U+0162-017C,U+017F-024F,U+1E00-1EFF,U+2020-2021,U+2030,U+2039-203A,U+2116,U+2122} @font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/inter-italic-et.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+0160-0161,U+017D-017E,U+2013-2014,U+2018-201E,U+2026,U+20AC} @font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bricolage-et.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+0160-0161,U+017D-017E,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2190-2193,U+2212} @font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bricolage-ext.woff2) format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-015F,U+0162-017C,U+017F-024F,U+1E00-1EFF,U+2020-2021,U+2030,U+2039-203A,U+2116,U+2122} /* Metric-matched fallbacks: no layout shift while the web fonts load */ @font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Roboto");font-weight:400 700;size-adjust:104%;ascent-override:93.1%;descent-override:23.2%;line-gap-override:0%} @font-face{font-family:"Bricolage fb";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold");font-weight:700;size-adjust:98%;ascent-override:94.9%;descent-override:27.6%;line-gap-override:0%} /* 1. Tokens ---------------------------------------------------------------- */ :root { /* Canvas and neutrals */ --c-bg: #faf7f2; /* paper */ --c-surface: #fff; /* cards, panels, header */ --c-sand: #f3eee6; /* alternate sections, footer */ --c-line: #e7e1d6; /* hairlines */ --c-line-strong: #8c8579; /* control borders (≥3:1) */ --c-text: #1d1f2b; /* ink */ --c-muted: #585b69; --c-night: #1d1f2b; /* Action */ --c-primary: #40559e; --c-primary-dark: #2f4284; --c-primary-tint: #eaecf4; --c-focus: #1d1f2b; /* Status */ --c-open: #13803f; --c-closed: #b3261e; --c-later: #946800; --c-danger: #a3162f; --c-free: #0b6b3a; --c-warning-bg: #fff4d6; --f-body: Inter, "Inter fb", "Segoe UI", Arial, sans-serif; --f-display: "Bricolage Grotesque", "Bricolage fb", "Segoe UI", Arial, sans-serif; --fs-min: 1rem; /* 16px – legal only */ --fs-small: 1.0625rem; /* 17px – meta, chips */ --fs-body: 1.125rem; /* 18px (19px from 720px) */ --fs-ui: 1.125rem; --fs-lead: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); --fs-h4: 1.25rem; --fs-card: 1.3125rem; --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); --fs-h2: clamp(1.875rem, 1.45rem + 1.7vw, 3rem); --fs-h1: clamp(2.375rem, 1.6rem + 3.2vw, 4rem); --fs-display: clamp(2.75rem, 1.5rem + 5vw, 5.5rem); --lh-body: 1.6; --gutter: clamp(16px, 4vw, 48px); --container: 1280px; --measure: 68ch; --section-y: clamp(56px, 8vw, 112px); --grid-gap: clamp(16px, 2vw, 24px); --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px; --radius: var(--r-md); --sh-xs: 0 1px 2px rgba(29,31,43,.06); --sh-sm: 0 1px 2px rgba(29,31,43,.06), 0 4px 12px rgba(29,31,43,.06); --sh-md: 0 2px 4px rgba(29,31,43,.06), 0 12px 28px rgba(29,31,43,.10); --sh-lg: 0 4px 8px rgba(29,31,43,.06), 0 24px 48px rgba(29,31,43,.14); --sh-poster: drop-shadow(0 4px 10px rgba(29,31,43,.16)); --bd-hair: 1px solid var(--c-line); --c-card-line: #d6cdbd; --bd-card: 1px solid var(--c-card-line); --bd-control: 1.5px solid var(--c-line-strong); --tap: 48px; --btn-h: 52px; --btn-h-lg: 60px; --chip-h: 48px; --sticky-top: 0px; --ease: cubic-bezier(.2,.7,.2,1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms; --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); /* Default brand scope (umbrella organisation) */ --b-fill: var(--c-primary); --b-on: #fff; --b-ink: var(--c-primary); --b-tint: #e4e7f1; --b-mat: #f2f3f8; } /* House colours: fill = logo colour (rules, dots, date chips); on = text on fill; ink = coloured text on white/paper; tint = selected/current; mat = poster background */ [data-brand="kultuurikoda"] { --b-fill: #f6a848; --b-on: #1d1f2b; --b-ink: #8a5300; --b-tint: #fef3e5; --b-mat: #fef9f2; } [data-brand="muuseum"] { --b-fill: #23b9d6; --b-on: #1d1f2b; --b-ink: #00697b; --b-tint: #e0f5f9; --b-mat: #f0fafc; } [data-brand="tamsalu"] { --b-fill: #dc1d50; --b-on: #fff; --b-ink: #b8123f; --b-tint: #fadfe6; --b-mat: #fdeff3; } [data-brand="lehtse"] { --b-fill: #c74600; --b-on: #fff; --b-ink: #a93c00; --b-tint: #f7e5db; --b-mat: #fbf2ed; } [data-brand="porkuni"] { --b-fill: #086462; --b-on: #fff; --b-ink: #086462; --b-tint: #dce9e9; --b-mat: #eef4f4; } [data-brand="keskus"] { --b-fill: #40559e; --b-on: #fff; --b-ink: #40559e; --b-tint: #e4e7f1; --b-mat: #f2f3f8; } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } @view-transition { navigation: none; } } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; hyphens: auto; -webkit-font-smoothing: antialiased; } @media (min-width: 720px) { body { font-size: 1.1875rem; } } body.menu-open { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; } img { display: block; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--c-text); font-weight: 700; hyphens: manual; text-wrap: balance; } h1, h2, h3 { font-family: var(--f-display); } h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; } h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; } h4 { font-size: var(--fs-h4); line-height: 1.3; } p { text-wrap: pretty; } p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; } a { color: var(--c-primary-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--dur-1) var(--ease); } a:hover { color: var(--c-text); text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; } .is-dark :focus-visible { outline-color: #fff; } strong, b { font-weight: 700; } small { font-size: var(--fs-min); } hr { border: 0; border-top: var(--bd-hair); margin: 2.5em 0; } abbr[title] { text-decoration: none; } time, .tnum { font-variant-numeric: tabular-nums; } .icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; stroke-width: 1.75; } .icon-sm { width: 1em; height: 1em; } .muted { color: var(--c-muted); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: 14px 20px; background: var(--c-text); color: #fff; font-weight: 700; border-radius: var(--r-pill); } .skip-link:focus { top: 12px; color: #fff; } .site-main:focus { outline: none; } .copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Straight house-colour bars on rounded cards (an inset shadow would curve with the corners) */ :is(.group-card, .info-panel, .aside-box, .contact-card, .block-button)::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--b-fill); pointer-events: none; } .block-button::before { height: 5px; } .accordion__item::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 6px; background: var(--b-fill); pointer-events: none; } .alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--alert-rule); } /* 3. Layout ---------------------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(880px + 2 * var(--gutter)); } .section { padding-block: var(--section-y); } .section--tight { padding-block: calc(var(--section-y) * .6); } .section--surface { background: var(--c-sand); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; } .section-head h2 { margin: 0; } .section-head p { margin: 0; color: var(--c-muted); } .stack > * + * { margin-top: 1rem; } .grid { display: grid; gap: 28px; } .grid--events { grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: 32px 24px; } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 24px; } .grid--contact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 24px; } .grid--houses { grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 20px; } .two-col { display: grid; gap: 40px; } @media (min-width: 960px) { .two-col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: start; } } .page-head { padding-block: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 32px); } .page-head h1 { margin: 0; } .page-head .lead { margin: 16px 0 0; max-width: 60ch; color: var(--c-muted); } .lead { font-size: var(--fs-lead); line-height: 1.5; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--b-ink); font-size: var(--fs-small); font-weight: 700; } /* 4. Header ---------------------------------------------------------------- */ .brand-stripe { height: 4px; background: linear-gradient(90deg, #f6a848 0 20%, #23b9d6 20% 40%, #dc1d50 40% 60%, #c74600 60% 80%, #086462 80%); } .notice-bar { background: var(--c-primary-tint); color: var(--c-text); border-bottom: 1px solid #d6daea; } .notice-bar__inner { display: flex; gap: 12px; align-items: center; padding-block: 12px; } .notice-bar p { margin: 0; } .notice-bar a { color: var(--c-primary-dark); font-weight: 700; } .notice-bar .icon { width: 26px; height: 26px; color: var(--c-primary); } .site-header { position: relative; z-index: 50; background: var(--c-surface); } .header-main { border-bottom: var(--bd-hair); } .header-main__inner { display: flex; align-items: center; gap: 20px; min-height: 64px; } .site-logo { display: flex; align-items: center; flex: none; padding-block: 8px; } .site-logo img { width: min(190px, 46vw); height: auto; } .general-nav, .header-actions { display: none; } .menu-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font: 700 var(--fs-small) / 1 var(--f-body); cursor: pointer; } .menu-toggle .icon { width: 24px; height: 24px; } .house-nav { display: none; } @media (max-width: 1199px) { :root { --sticky-top: 68px; } .site-header { position: sticky; top: 0; } html { scroll-padding-top: 92px; } } @media (max-width: 1199px) and (max-height: 500px) { :root { --sticky-top: 0px; } .site-header { position: static; } html { scroll-padding-top: 16px; } } @media (min-width: 1200px) { .menu-toggle { display: none; } .header-main__inner { min-height: 84px; gap: 24px; } .site-logo img { width: 200px; } .general-nav { display: block; margin-left: auto; } .header-actions { display: flex; align-items: center; gap: 12px; } .house-nav { display: block; border-bottom: var(--bd-hair); } } @media (min-width: 1400px) { .site-logo img { width: 220px; } } .general-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; } .general-nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-text); font-weight: 600; font-size: var(--fs-ui); text-decoration: none; } .general-nav a:hover, .general-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; } /* Search: a round button that opens into a field (the field stays open while focused or filled) */ .header-search { position: relative; display: flex; align-items: center; } .header-search input { position: absolute; right: calc(100% + 8px); top: 50%; z-index: 3; transform: translateY(-50%); width: 0; min-height: var(--tap); padding: 0; border: 0; border-radius: var(--r-pill); background: #fff; font: inherit; font-size: var(--fs-small); color: var(--c-text); opacity: 0; pointer-events: none; transition: width var(--dur-2) var(--ease), padding var(--dur-2) var(--ease), opacity var(--dur-1); } .header-search button { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; border: var(--bd-control); border-radius: 50%; background: #fff; color: var(--c-text); cursor: pointer; } .header-search button:hover { border-color: var(--c-text); background: var(--c-sand); } .header-search button .icon { width: 22px; height: 22px; } .site-header:has(.header-search.is-open, .header-search input:focus) .general-nav { visibility: hidden; } .header-search.is-open input, .header-search input:focus { width: min(520px, 40vw); padding: 0 20px; border: var(--bd-control); opacity: 1; pointer-events: auto; box-shadow: var(--sh-md); } /* House bar (desktop) */ .tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1600px; margin: 0 auto; padding: 0; list-style: none; border-inline: var(--bd-hair); } .tile { position: relative; display: flex; align-items: stretch; min-height: 60px; background: #fff; box-shadow: inset 0 4px 0 var(--b-fill); transition: background var(--dur-1) var(--ease); } .tile + .tile { border-left: var(--bd-hair); } .tile:hover, .tile.is-open { background: var(--b-tint); } .tile.is-current { background: var(--b-tint); box-shadow: inset 0 6px 0 var(--b-fill); } .tile__link { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 4px 6px clamp(12px, 1.4vw, 24px); color: var(--c-text); text-decoration: none; font-weight: 700; font-size: var(--fs-ui); line-height: 1.2; } .tile__link:hover { color: var(--c-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; } .tile__link:focus-visible { outline-offset: -4px; } .tile__dot, .house-tag__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--b-fill); flex: none; } .tile__toggle { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; padding-top: 4px; border: 0; background: transparent; color: var(--c-text); cursor: pointer; } .tile__toggle .icon { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease); } .tile__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .tile__toggle:focus-visible { outline-offset: -6px; } .tile__sub { position: absolute; top: 100%; left: -1px; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; width: max(100%, 640px); padding: 0; background: #fff; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: inset 0 4px 0 var(--b-fill), var(--sh-lg); align-items: start; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s var(--dur-2); } .tile:nth-child(n+4) .tile__sub { left: auto; right: -1px; } .tile.is-open .tile__sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } @media (hover: hover) { .tile:not(.is-dismissed):hover .tile__sub { visibility: visible; opacity: 1; transform: none; transition-delay: .12s; } } .tile__links { margin: 0; padding: 12px 0 16px; list-style: none; } .tile__links a { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 24px; color: var(--c-text); text-decoration: none; font-size: var(--fs-ui); } .tile__links a:hover { background: var(--b-tint); text-decoration: underline; } .tile__links li + li a { border-top: var(--bd-hair); } .tile__facts { align-self: start; display: flex; flex-direction: column; gap: 10px; margin: 16px 16px 16px 0; padding: 20px; background: var(--b-mat); border-radius: var(--r-md); font-size: var(--fs-small); } .tile__facts p { display: flex; gap: 10px; align-items: flex-start; margin: 0; } .tile__facts .icon { width: 20px; height: 20px; margin-top: .15em; color: var(--b-ink); } .tile__facts a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; color: var(--c-text); overflow-wrap: anywhere; } .tile__facts .status { min-height: 0; } .tile__facts .btn { margin-top: 12px; align-self: flex-start; min-height: var(--tap); } /* Mobile menu: paper sheet, actions first, left-aligned house rows */ .mobile-menu { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain; background: var(--c-bg); padding-bottom: 40px; animation: sheet-in var(--dur-3) var(--ease); } @keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .mobile-menu[hidden] { display: none; } .mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 var(--gutter); border-bottom: var(--bd-hair); background: #fff; } .mobile-menu__logo img { width: min(190px, 50vw); } .mobile-menu__close { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font: 700 var(--fs-small) / 1 var(--f-body); cursor: pointer; } .mobile-menu__close .icon { width: 22px; height: 22px; } .mobile-menu__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px var(--gutter) 12px; } .mobile-menu__ctas .btn { min-height: 56px; } .mobile-menu__search { display: flex; gap: 8px; margin: 0 var(--gutter) 20px; } .mobile-menu__search input { flex: 1; min-width: 0; min-height: 56px; padding: 0 20px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; font: inherit; } .mobile-menu__search button .icon { width: 24px; height: 24px; } .mobile-menu__search button { width: 56px; flex: none; border: 0; border-radius: 50%; background: var(--c-primary); color: #fff; cursor: pointer; } .accordion { display: grid; gap: 8px; margin: 0 var(--gutter); padding: 0; list-style: none; } .accordion__item { position: relative; background: #fff; border-radius: 16px; overflow: hidden; } .accordion__bar { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 12px; padding: 12px 18px 12px 24px; border: 0; background: transparent; color: var(--c-text); font: 700 1.25rem / 1.25 var(--f-body); cursor: pointer; text-align: left; } .accordion__name { flex: 1; } .accordion__bar .icon { width: 24px; height: 24px; transition: transform var(--dur-2) var(--ease); } .accordion__bar[aria-expanded="true"] { background: var(--b-tint); } .accordion__bar[aria-expanded="true"] .icon { transform: rotate(180deg); } .accordion__bar:focus-visible { outline-offset: -4px; } .accordion__panel { margin: 0; padding: 4px 18px 12px 24px; list-style: none; background: var(--b-tint); } .accordion__panel li + li { border-top: 1px solid rgba(29,31,43,.12); } .accordion__panel a { display: flex; align-items: center; min-height: 56px; padding: 8px 0; color: var(--c-text); font-size: 1.1875rem; text-decoration: none; } .accordion__panel a:hover { text-decoration: underline; } .mobile-menu__links { margin: 20px var(--gutter) 8px; padding: 0; list-style: none; } .mobile-menu__links a { display: flex; align-items: center; min-height: 56px; border-bottom: var(--bd-hair); color: var(--c-text); font-size: 1.1875rem; font-weight: 600; text-decoration: none; } .mobile-menu__contact { display: grid; gap: 4px; margin: 16px var(--gutter) 0; } .mobile-menu__contact > a { display: flex; align-items: center; gap: 12px; min-height: var(--tap); color: var(--c-text); font-size: 1.1875rem; } /* 5. Components ------------------------------------------------------------ */ /* Buttons */ .btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 10px 26px; border: 1.5px solid var(--c-primary); border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font: 700 var(--fs-ui) / 1.2 var(--f-body); text-align: center; text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .btn:hover, .wp-block-button__link:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[aria-current] { background: var(--c-primary-dark); border-color: var(--c-primary-dark); box-shadow: inset 0 -3px 0 rgba(255,255,255,.4); } .btn--outline, .is-style-outline .wp-block-button__link { background: #fff; color: var(--c-primary); } .btn--outline:hover, .is-style-outline .wp-block-button__link:hover { background: var(--c-primary-tint); color: var(--c-primary-dark); border-color: var(--c-primary); } .btn--lg { min-height: var(--btn-h-lg); padding-inline: 30px; font-size: 1.1875rem; } .btn--brand { background: var(--b-fill); border-color: var(--b-fill); color: var(--b-on); } .btn--brand:hover { background: var(--b-fill); border-color: var(--c-text); color: var(--b-on); } .btn--light { background: #fff; border-color: #fff; color: var(--c-text); } .btn--light:hover { background: var(--c-sand); border-color: var(--c-sand); color: var(--c-text); } .btn--block { width: 100%; } .btn .icon { width: 20px; height: 20px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--c-primary); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: .22em; } .link-arrow:hover { color: var(--c-primary-dark); text-decoration-thickness: 2.5px; } .link-arrow .icon { width: 20px; height: 20px; transition: transform var(--dur-1) var(--ease); } .link-arrow:hover .icon { transform: translateX(3px); } /* Large colour buttons (TVK block) */ .block-buttons { display: grid; gap: 16px; } .block-buttons { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .block-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 88px; padding: 18px 24px; background: #fff; color: var(--c-text); font: 700 var(--fs-h3) / 1.2 var(--f-display); letter-spacing: -.01em; text-decoration: none; position: relative; overflow: hidden; border: var(--bd-card); border-radius: var(--r-lg); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .block-button:hover { color: var(--c-text); text-decoration: underline; box-shadow: var(--sh-md); transform: translateY(-2px); } .block-button .icon { width: 28px; height: 28px; color: var(--b-ink); } /* Chips (filters, quick links) */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--chip-h); padding: 8px 20px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font-size: var(--fs-small); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .chip:hover { border-color: var(--c-text); color: var(--c-text); text-decoration: none; background: var(--c-sand); } .chip.is-active { background: var(--c-text); border-color: var(--c-text); color: #fff; } .chip.is-active::before, .chip[data-brand].is-active::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 0; box-shadow: none; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; } .chip[data-brand]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--b-fill); flex: none; } .chip[data-brand].is-active { background: var(--b-tint); border: 2px solid var(--b-ink); color: var(--c-text); } .chip[data-brand].is-active::before { background: var(--c-text); } .chip__count { font-weight: 400; color: var(--c-muted); } .chip.is-active .chip__count { color: inherit; opacity: .85; } .filters { padding: 20px 24px; background: #fff; border: var(--bd-card); border-radius: var(--r-lg); } .filter-group + .filter-group { margin-top: 18px; } .filter-group__label { display: block; margin-bottom: 8px; font-weight: 700; font-size: var(--fs-small); } @media (min-width: 720px) { .filter-group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; } .filter-group + .filter-group { margin-top: 12px; padding-top: 12px; border-top: var(--bd-hair); } .filter-group__label { margin: 12px 0 0; } } .filters-wrap > summary { list-style: none; margin-bottom: 12px; } .filters-wrap > summary::-webkit-details-marker { display: none; } @media (min-width: 1024px) { .filters-wrap > summary { display: none; } } .filter-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 24px 0; scroll-margin-top: calc(var(--sticky-top) + 24px); } .filter-summary p { margin: 0; font-weight: 700; } .view-toggle { display: inline-flex; padding: 3px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; } .view-toggle a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); color: var(--c-text); font-weight: 600; text-decoration: none; } .view-toggle a:hover { background: var(--c-sand); } .view-toggle a[aria-current] { background: var(--c-text); color: #fff; } /* House tag */ .house-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--c-muted); font-weight: 600; font-size: var(--fs-small); text-decoration: none; } a.house-tag { color: var(--c-text); } a.house-tag:hover { text-decoration: underline; } .house-tag__dot { width: 10px; height: 10px; } /* Badges */ .badge { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-text); color: #fff; font-size: var(--fs-min); font-weight: 700; line-height: 1.3; } .badge--tuhistatud { background: var(--c-danger); } .badge--edasi { background: #6b4600; } .badge--valja-muudud { background: var(--c-text); } .badge--past { background: #666; } .badge--free { background: var(--c-free); } /* Event card: the poster is the hero and is never cropped */ .event-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 20px; background: #fff; border: var(--bd-card); box-shadow: var(--sh-xs); border-radius: var(--r-lg); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .event-card:hover { border-color: #cfc8bc; box-shadow: var(--sh-md); transform: translateY(-2px); } .event-card__poster { position: relative; aspect-ratio: 4 / 5; padding: 16px; background: var(--b-mat); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; } .event-card__poster img { width: 100%; height: 100%; object-fit: contain; filter: var(--sh-poster); } .event-card__poster .badge { position: absolute; top: 12px; left: 12px; z-index: 1; } .event-card__noposter { padding: 12px; text-align: center; font: 700 1.5rem / 1.2 var(--f-display); color: var(--b-ink); } .event-card__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 0; flex: 1; } .event-card__house { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--c-muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; } .event-card__date { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 0; color: var(--c-text); font-weight: 700; font-size: var(--fs-small); font-variant-numeric: tabular-nums; } .event-card__date .when { display: inline-block; padding: 4px 10px; background: var(--b-fill); color: var(--b-on); border-radius: var(--r-sm); } .event-card__more { font-weight: 400; color: var(--c-muted); } .event-card__title { margin: 0; font-size: var(--fs-card); line-height: 1.2; letter-spacing: -.005em; } .event-card__title a { color: var(--c-text); text-decoration: none; } .event-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); } .event-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; } .event-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; } .event-card__title a:focus-visible { outline: none; } .event-card__meta { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--c-muted); font-size: var(--fs-small); } .event-card__meta li { display: flex; align-items: flex-start; gap: 8px; } .event-card__meta .icon { width: 18px; height: 18px; margin-top: .2em; } .event-card__actions { position: relative; z-index: 2; margin-top: auto; padding-top: 8px; } .event-card__actions .btn { min-height: 44px; padding-inline: 20px; font-size: var(--fs-small); } .event-card.is-past .event-card__poster img { filter: grayscale(.6) opacity(.8); } /* Featured event */ .featured { display: grid; gap: 28px; align-items: center; padding: clamp(16px, 3vw, 32px); background: #fff; border: var(--bd-card); box-shadow: var(--sh-xs); border-radius: var(--r-xl); } @media (min-width: 860px) { .featured { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } } .featured__poster { display: flex; justify-content: center; padding: 24px; background: var(--b-mat); border-radius: 16px; } .featured__poster img { width: auto; max-width: 100%; max-height: 640px; object-fit: contain; filter: var(--sh-poster); } .featured__label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 700; font-size: var(--fs-small); color: var(--b-ink); } .featured h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); } .featured h2 a { color: inherit; text-decoration: none; } .featured h2 a:hover { text-decoration: underline; } /* Event list rows */ .event-days { display: grid; gap: 36px; } .event-day__title { position: sticky; top: var(--sticky-top); z-index: 5; margin: 0; padding: 14px 0 10px; background: var(--c-bg); border-bottom: var(--bd-hair); font-size: 1.5rem; } .event-rows { margin: 0; padding: 0; list-style: none; } .event-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 20px; align-items: start; padding: 16px 0; border-bottom: var(--bd-hair); } @media (min-width: 720px) { .event-row { grid-template-columns: 150px 72px minmax(0, 1fr) auto; align-items: center; } } .event-row__time { font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; } .event-row__thumb { width: 72px; aspect-ratio: 4 / 5; padding: 6px; background: var(--b-mat); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; } .event-row__thumb img { width: 100%; height: 100%; object-fit: contain; } .event-row__main h3 { margin: 0 0 4px; font-family: var(--f-body); font-size: 1.1875rem; letter-spacing: 0; line-height: 1.3; } .event-row__main h3 a { color: var(--c-text); text-decoration: none; } .event-row__main h3 a::after { content: ""; position: absolute; inset: 0; } .event-row__main h3 a:hover { text-decoration: underline; } .event-row__main p { margin: 0; color: var(--c-muted); font-size: var(--fs-small); } .event-row__cta { position: relative; z-index: 1; } .event-row__cta .btn { min-height: 44px; font-size: var(--fs-small); padding-inline: 20px; } .now-open { padding-block: 32px 0; } .now-open h2 { font-size: var(--fs-h3); margin-bottom: 4px; } @media (min-width: 720px) { .now-open .event-row { grid-template-columns: 210px 72px minmax(0, 1fr) auto; } .now-open .event-row__time { white-space: nowrap; } } /* House card */ .house-card { position: relative; display: flex; flex-direction: column; padding: 8px; background: #fff; border: var(--bd-card); box-shadow: var(--sh-xs); border-radius: var(--r-lg); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .house-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .house-card__img { aspect-ratio: 3 / 2; background: var(--b-mat); border-radius: 14px; overflow: hidden; } .house-card__img img { width: 100%; height: 100%; object-fit: cover; } .house-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 12px; flex: 1; } .house-card h3 { margin: 0; padding-top: 12px; border-top: 4px solid var(--b-fill); font-size: var(--fs-card); } .house-card h3 a { color: var(--c-text); text-decoration: none; } .house-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } .house-card h3 a:hover { text-decoration: underline; } .house-card p { margin: 0; font-size: var(--fs-small); color: var(--c-muted); } .house-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; } .status { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: var(--fs-small); color: var(--c-text); } .status::before { content: ""; width: 12px; height: 12px; margin-top: .4em; border-radius: 50%; background: #999; flex: none; } .status.is-open::before { background: var(--c-open); } .status.is-closed::before { background: var(--c-closed); } .status.is-later::before { background: var(--c-later); } .status__text { display: flex; flex-direction: column; } .status__next { font-weight: 400; color: var(--c-muted); } .info-panel .status, .house-card .status { min-height: 2.9em; } .house-card .status__next { font-size: var(--fs-min); line-height: 1.4; } /* News card */ .post-card { position: relative; display: flex; flex-direction: column; padding: 8px 8px 20px; background: #fff; border: var(--bd-card); box-shadow: var(--sh-xs); border-radius: var(--r-lg); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .post-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .post-card__img { aspect-ratio: 3 / 2; background: var(--c-sand); border-radius: 14px; overflow: hidden; margin-bottom: 14px; } .post-card__img img { width: 100%; height: 100%; object-fit: cover; } .post-card__img.is-empty { display: flex; align-items: center; justify-content: center; background: var(--c-primary-tint); } .post-card__img.is-empty img { width: 90px; height: 90px; object-fit: contain; } .post-card > :not(.post-card__img) { margin-inline: 12px; } .post-card time { color: var(--c-muted); font-size: var(--fs-small); } .post-card :is(h2, h3) { margin: 4px 12px 8px; font-size: var(--fs-card); line-height: 1.2; } .post-card :is(h2, h3) a { color: var(--c-text); text-decoration: none; } .post-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } .post-card :is(h2, h3) a:hover { text-decoration: underline; } .post-card p { margin: 0 12px; font-size: var(--fs-small); color: var(--c-muted); } .post-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; } /* Hobby group card */ .group-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } .group-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; background: #fff; border: var(--bd-card); border-radius: var(--r-lg); transition: box-shadow var(--dur-2) var(--ease); } .group-card:hover { box-shadow: var(--sh-md); } .group-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; } .group-card :is(h2, h3) { margin: 0; font-size: var(--fs-card); line-height: 1.2; } .group-card :is(h2, h3) a { color: var(--c-text); text-decoration: none; } .group-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } .group-card :is(h2, h3) a:hover { text-decoration: underline; } .group-card__times { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; } .group-card__times li { display: flex; gap: 10px; font-weight: 700; } .group-card__times .day { min-width: 104px; font-weight: 400; } .group-card__meta { margin: 0; color: var(--c-muted); font-size: var(--fs-small); } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .tags li { padding: 3px 12px; background: var(--c-sand); border-radius: var(--r-pill); font-size: var(--fs-min); } /* Weekly schedule */ .week { display: grid; gap: 32px; min-width: 0; } .week__day { min-width: 0; } .week__day :is(h2, h3) { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--c-text); font-size: var(--fs-h3); } .week__day.is-today :is(h2, h3)::after { content: "täna"; margin-left: 12px; padding: 3px 12px; background: var(--c-primary); color: #fff; border-radius: var(--r-pill); font: 700 var(--fs-min) / 1.3 var(--f-body); vertical-align: middle; } .week__rows { margin: 0; padding: 0; list-style: none; } .week__rows li { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: var(--bd-hair); } .week__rows .time { font-weight: 700; font-variant-numeric: tabular-nums; } .week__rows a { font-weight: 600; color: var(--c-text); } .week__rows a::after { content: ""; position: absolute; inset: 0; } .week__rows li:hover a { text-decoration-thickness: 2px; } .week__rows .sub { display: block; color: var(--c-muted); font-size: var(--fs-small); } .h3 { font-family: var(--f-display); font-size: var(--fs-h3); } /* Facts list */ .facts { display: grid; margin: 0; padding: 0; list-style: none; } .facts > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: var(--bd-hair); } .facts > li:first-child { padding-top: 4px; } .facts .icon { width: 24px; height: 24px; color: var(--b-ink); margin-top: 3px; } .facts__label { display: block; font-size: var(--fs-small); color: var(--c-muted); font-weight: 400; } .facts__value { font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .facts__value ul { margin: 6px 0 0; padding: 0; list-style: none; font-weight: 400; } .facts__value ul li + li { margin-top: 4px; } .facts details summary { cursor: pointer; font-weight: 400; color: var(--c-primary-dark); text-decoration: underline; min-height: 44px; display: flex; align-items: center; } /* Icon list */ .icon-list { margin: 0; padding: 0; list-style: none; } .icon-list li { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; } .icon-list .icon { margin-top: .6em; width: 20px; height: 20px; } .icon-list a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; overflow-wrap: anywhere; } /* Tables */ .hours-table, .price-table table, .entry-content table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .hours-table caption { text-align: left; font-weight: 700; margin-bottom: 8px; } .hours-table th, .hours-table td { height: 56px; padding: 8px 12px; border-bottom: var(--bd-hair); text-align: left; font-weight: 400; } .hours-table td { text-align: right; font-weight: 700; } .hours-table tr.is-today th, .hours-table tr.is-today td { background: var(--b-tint); font-weight: 700; border-bottom-color: transparent; } .hours-table tr.is-today th { border-radius: var(--r-md) 0 0 var(--r-md); } .hours-table tr.is-today td { border-radius: 0 var(--r-md) var(--r-md) 0; } .hours-table td { white-space: nowrap; } :is(.contact-card, .aside-box) .hours-table :is(th, td) { height: 48px; padding: 6px 10px; } .today-badge { display: inline-block; margin-left: 8px; padding: 1px 10px; background: var(--b-fill); color: var(--b-on); border-radius: var(--r-pill); font-size: var(--fs-min); font-weight: 700; } .price-table { margin-bottom: 32px; } .price-table__title { margin-bottom: 8px; } .price-table th, .price-table td, .entry-content th, .entry-content td { padding: 12px 10px; border-bottom: var(--bd-hair); text-align: left; vertical-align: top; } .price-table thead th, .entry-content thead th { border-bottom: 2px solid var(--c-text); color: var(--c-muted); font-size: var(--fs-min); font-weight: 700; } .price-table th:first-child, .price-table td:first-child { padding-left: 0; } .price-table__price { white-space: nowrap; font-weight: 700; text-align: right !important; } .price-table thead th:last-child { text-align: right; } .price-table__note { display: block; font-size: var(--fs-small); color: var(--c-muted); } .price-source { font-size: var(--fs-small); color: var(--c-muted); } .table-wrap { overflow-x: auto; } /* Breadcrumbs */ .breadcrumbs { padding-top: 16px; font-size: var(--fs-small); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; padding: 0; list-style: none; } .breadcrumbs li { display: inline-flex; align-items: center; } .breadcrumbs li + li::before { content: "›"; margin: 0 8px; color: var(--c-muted); } .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); } .breadcrumbs [aria-current] { color: var(--c-muted); } /* Pagination */ .pagination { margin-top: 48px; } .pagination ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; list-style: none; } .pagination a, .pagination span.current, .pagination span.dots { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 52px; min-height: 52px; padding: 0 18px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font-weight: 700; text-decoration: none; } .pagination a:hover { border-color: var(--c-text); background: var(--c-sand); } .pagination span.current { background: var(--c-text); border-color: var(--c-text); color: #fff; } .pagination span.dots { border-color: transparent; background: none; } .pagination .icon { width: 20px; height: 20px; } /* Notices */ .alert { --alert-rule: #b07d00; position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px 18px 28px; border-radius: var(--r-md); background: var(--c-warning-bg); } .alert p { margin: 0; min-width: 0; } .alert a, .aside-box a, .contact-card a, .person a, .event-body a { overflow-wrap: anywhere; } .alert a { display: inline-flex; align-items: center; min-height: 44px; } .alert--danger { --alert-rule: var(--c-danger); background: #fcebec; } .alert--info { --alert-rule: var(--c-primary); background: var(--c-primary-tint); } .alert .icon { width: 26px; height: 26px; margin-top: 2px; } .empty-state { padding: 40px 32px; background: #fff; border: var(--bd-card); border-radius: var(--r-lg); text-align: center; } .empty-state p { margin: 0 auto 18px; max-width: 52ch; font-size: var(--fs-lead); } .empty-state--inline { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 18px 24px; background: var(--c-sand); border: 0; text-align: left; } .empty-state--inline p { margin: 0; font-size: inherit; } .empty-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 18px 24px; background: #fff; border: var(--bd-card); border-radius: var(--r-lg); } .empty-inline p { margin: 0; } /* Social links */ .social-links { display: flex; gap: 8px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: var(--bd-hair); border-radius: 50%; background: #fff; color: var(--c-text); } .social-link:hover { border-color: var(--c-text); color: var(--c-text); } .social-link .icon { width: 24px; height: 24px; } /* Photo before the footer */ .photo-band-wrap { padding-bottom: var(--section-y); } .photo-band { aspect-ratio: 32 / 9; overflow: hidden; border-radius: var(--r-xl); background: var(--c-sand); } .photo-band img { width: 100%; height: 100%; object-fit: cover; } /* Lightbox */ .lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 70px 16px 16px; border: 0; background: rgba(20, 21, 30, .96); } .lightbox::backdrop { background: rgba(0, 0, 0, .8); } .lightbox[open] { display: flex; align-items: center; justify-content: center; } .lightbox__img { max-width: 100%; max-height: calc(100vh - 90px); width: auto; height: auto; object-fit: contain; cursor: zoom-in; } .lightbox__close { position: fixed; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 1.5px solid #fff; border-radius: var(--r-pill); background: #111; color: #fff; font: 700 var(--fs-small) var(--f-body); cursor: pointer; } .lightbox__close:focus-visible { outline-color: #fff; } .lightbox__hint { position: fixed; left: 16px; top: 22px; margin: 0; color: #fff; font-size: var(--fs-min); } .lightbox.is-zoomed { display: block; overflow: auto; padding: 70px 0 0; } .lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; width: max(200vw, 100%); max-width: var(--natural, none); cursor: zoom-out; margin: 0 auto; } @media (min-width: 900px) { .lightbox.is-zoomed .lightbox__img { width: auto; } } /* Gallery */ .gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; } .gallery-grid button { display: block; width: 100%; padding: 0; border: 0; background: var(--c-sand); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-2) var(--ease); } .gallery-grid button:hover img { transform: scale(1.03); } /* Entry content (block editor) */ .entry-content { max-width: var(--measure); } .page-content.entry-content { max-width: none; padding-bottom: var(--section-y); } .page-content.entry-content > :not(.tvk-block):not(.alignwide):not(.alignfull):not(.sec):not(.price-houses) { max-width: var(--measure); } .entry-content > * { margin-bottom: 1.1em; } .entry-content > .alignwide { max-width: var(--container); } .entry-content h2 { margin-top: 1.6em; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); } .entry-content h3 { margin-top: 1.4em; } .entry-content ul, .entry-content ol { padding-left: 1.3em; } .entry-content li + li { margin-top: .35em; } .entry-content img { height: auto; border-radius: var(--r-md); } .entry-content figcaption { font-size: var(--fs-small); color: var(--c-muted); margin-top: 8px; } .entry-content blockquote { margin-left: 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--c-primary); font-size: var(--fs-lead); } .entry-content .wp-block-image, .entry-content .wp-block-gallery { margin-block: 1.6em; } .entry-content details { padding: 14px 20px; border: var(--bd-hair); border-radius: var(--r-md); background: #fff; } .entry-content summary { cursor: pointer; font-weight: 700; } .entry-content .wp-block-buttons { gap: 12px; } .entry-content iframe { max-width: 100%; } .entry-content .tvk-block { max-width: var(--container); margin-block: 8px 48px; } .entry-content .tvk-block ul { padding-left: 0; } .entry-content .tvk-block li + li { margin-top: 0; } .entry-content .tvk-block h3 { margin-top: 0; } .entry-content .tvk-block .section-head h2 { margin-top: 0; } .entry-content > .tvk-block:first-child { margin-top: 0; } .has-kultuurikoda-background-color { background: #fef3e5; } .has-muuseum-background-color { background: #e0f5f9; } .has-tamsalu-background-color { background: #fadfe6; } .has-lehtse-background-color { background: #f7e5db; } .has-porkuni-background-color { background: #dce9e9; } .has-primary-background-color { background: var(--c-primary); color: #fff; } .has-surface-background-color, .has-sand-background-color { background: var(--c-sand); } .has-background { padding: 24px; border-radius: var(--r-lg); } /* Forms */ .search-form { display: flex; gap: 8px; max-width: 600px; } .search-form input[type="search"] { flex: 1; min-width: 0; min-height: 56px; padding: 0 20px; border: var(--bd-control); border-radius: var(--r-pill); background: #fff; font: inherit; } .search-form button { min-height: 56px; padding: 0 26px; border: 0; background: var(--c-primary); color: #fff; font: 700 var(--fs-ui) var(--f-body); border-radius: var(--r-pill); cursor: pointer; } .search-form button:hover { background: var(--c-primary-dark); } /* 6. Pages ----------------------------------------------------------------- */ /* Home: split hero on paper */ .hero-split { padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 56px); } .hero-split__inner { display: grid; gap: 32px; align-items: center; } @media (min-width: 960px) { .hero-split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } } .hero-split h1 { margin: 0 0 20px; font-size: var(--fs-display); line-height: 1; letter-spacing: -.025em; } .hero__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--c-primary); font: 700 var(--fs-small) / 1.3 var(--f-body); letter-spacing: 0; } .dots { display: inline-flex; gap: 4px; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: #f6a848; } .dots i:nth-child(2) { background: #23b9d6; } .dots i:nth-child(3) { background: #dc1d50; } .dots i:nth-child(4) { background: #c74600; } .dots i:nth-child(5) { background: #086462; } .hero-split .lead { max-width: 36ch; margin: 0 0 28px; color: var(--c-text); } .hero-split__more { margin: 14px 0 0; } .hero-split__media { margin: 0; } .hero-split__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px rgba(29,31,43,.06); background: var(--c-sand); } /* House page: title on paper, rounded photo, overlapping info card */ .house-hero { padding-bottom: 0; } .house-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding-block: clamp(8px, 2vw, 20px) clamp(20px, 2.5vw, 32px); } .house-hero__head h1 { margin: 0; } .house-hero__head .lead { max-width: 44ch; margin: 16px 0 0; color: var(--c-text); } .house-hero__img { overflow: hidden; border-radius: var(--r-xl); background: var(--b-mat); } .house-hero__img img { width: 100%; height: auto; aspect-ratio: 16 / 5; max-height: 360px; object-fit: cover; } .info-panel { position: relative; z-index: 2; overflow: hidden; display: grid; gap: 4px 28px; margin-top: -64px; margin-inline: clamp(0px, 2vw, 32px); padding: 28px 28px 24px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); } @media (min-width: 600px) { .info-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .info-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .info-panel__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 12px 0; } .info-panel__item > .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--b-tint); color: var(--b-ink); } .info-panel__label { display: block; font-size: var(--fs-min); font-weight: 600; color: var(--c-muted); } .info-panel__value { font-weight: 700; } .info-panel__value a { color: var(--c-text); overflow-wrap: anywhere; } .info-panel a { display: inline-flex; align-items: center; min-height: 44px; } .services-wrap > * { max-width: 880px; } .inpage-nav { margin: 28px 0 0; } .inpage-nav ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .collage { position: relative; padding-bottom: 18%; } .collage__a img, .collage__b img { width: 100%; height: auto; border-radius: var(--r-xl); } .collage__b { position: absolute; left: -6%; bottom: 0; width: 58%; border: 6px solid var(--c-bg); border-radius: 28px; box-shadow: var(--sh-lg); } @media (max-width: 959px) { .collage { padding-bottom: 0; } .collage__b { position: static; width: 70%; margin: -40px 0 0 auto; } } .statement { text-align: center; } .statement p { max-width: 60ch; margin: 0 auto 32px; font-size: var(--fs-lead); } /* Single event */ .event-layout { display: grid; gap: 36px; padding-block: 24px var(--section-y); } @media (min-width: 900px) { .event-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } } .event-poster { position: relative; padding: clamp(16px, 2.5vw, 28px); background: var(--b-mat); border-radius: var(--r-xl); } .event-poster button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .event-poster img { width: 100%; height: auto; border-radius: var(--r-xs); filter: var(--sh-poster); } .event-poster__zoom { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-weight: 700; color: var(--c-primary-dark); } @media (min-width: 900px) { .event-poster { position: sticky; top: 24px; } } .event-head h1 { font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1.08; margin: 12px 0 20px; } .event-head .badge { margin-right: 8px; } .ticket-box { margin: 24px 0; display: grid; gap: 12px; } .event-tools { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 8px; } .event-tools a, .event-tools button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--c-primary-dark); font: 700 var(--fs-small) var(--f-body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .event-body { margin-top: 32px; } .program { margin-top: 40px; } .program__day h3 { margin: 28px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--c-text); } .program__rows { margin: 0; padding: 0; list-style: none; } .program__rows li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: var(--bd-hair); } .program__rows .time { font-weight: 700; font-variant-numeric: tabular-nums; } .program__rows .where { display: block; color: var(--c-muted); font-size: var(--fs-small); } .sponsors { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 16px; } .sponsors img { max-height: 80px; width: auto; } /* Video (event pages and the video block): still image first, player on click */ .video-embed { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: var(--r-xl); overflow: hidden; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-facade { position: absolute; inset: 0; display: block; color: #fff; } .video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; } .video-facade__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; max-width: 90%; padding: 14px 26px; border-radius: var(--r-pill); background: #fff; color: var(--c-text); font-weight: 700; text-align: left; box-shadow: var(--sh-lg); } .video-facade__play .icon { width: 32px; height: 32px; color: var(--c-primary); } .video-facade:hover .video-facade__play { text-decoration: underline; } /* Single hobby group, contact page */ .group-layout { display: grid; gap: 40px; padding-block: 24px var(--section-y); } @media (min-width: 900px) { .group-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; } } .aside-box { position: relative; overflow: hidden; padding: 30px 28px 26px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .aside-box :is(h2, h3) { font-size: var(--fs-h3); } .person { padding: 14px 0; border-bottom: var(--bd-hair); } .person:last-child { border-bottom: 0; } .person__name { display: block; font-weight: 700; } .person__role { display: block; color: var(--c-muted); font-size: var(--fs-small); } .person a { display: inline-flex; align-items: center; min-height: 44px; } .contact-card { position: relative; overflow: hidden; padding: 30px 28px 26px; background: #fff; border: var(--bd-card); border-radius: var(--r-lg); } .contact-card h2 { font-size: var(--fs-h3); } /* Search results – .search-results is on too (WordPress class), so the list rules are scoped to the