/* ============================================================================ Kehra Kultuurikoda — public design system Variant C / Ööploom. The only stylesheet the public site loads. The legacy public CSS is retired; nothing here layers on top of it. Token names describe the role a color plays, never the color a prototype happened to hold first. The three base values are owner-editable in admin and arrive as custom properties on ; everything else is derived here or by ThemeService. ============================================================================ */ :root { /* --- base three, overridden inline by ThemeService --- */ --theme-primary: #151116; /* near-black plum, dark surfaces */ --theme-accent: #b99255; /* champagne gold, decorative accent */ --theme-surface: #faf8f3; /* ivory page base */ /* --- derived by ThemeService, defaults mirror Variant C --- */ --theme-primary-soft: #30202b; --theme-primary-deep: #0c090d; --theme-accent-on-light: #785629; /* accent as TEXT on light: must hold 4.5:1 */ --theme-accent-on-dark: #d9bd82; --theme-surface-alt: #f3eee4; --theme-surface-sunk: #e5ded2; --theme-primary-rgb: 21 17 22; --theme-deep-rgb: 12 9 13; /* --- fixed, not owner-editable --- */ --ink: #201c1d; --muted: #665f5c; --line: rgba(32, 28, 29, .18); --on-dark: #fff; --on-dark-soft: rgba(255, 255, 255, .72); --on-dark-mute: rgba(255, 255, 255, .62); /* Taken from the approved prototype unchanged. The narrow sans is what makes the small uppercase labels sit tight; a normal-width fallback widens them. */ --serif: "Iowan Old Style", Baskerville, "Times New Roman", serif; --sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --max: 1320px; --gutter: clamp(20px, 4vw, 64px); --section-y: clamp(100px, 12vw, 180px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; color: var(--ink); background: var(--theme-surface); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; width: 100%; height: auto; } a { color: inherit; } button, input, textarea, select { font: inherit; } h1, h2, h3, h4, p { margin-top: 0; } ul, ol { margin-top: 0; } .wrap { width: min(var(--max), calc(100% - var(--gutter) - var(--gutter))); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 12px 18px; color: var(--on-dark); background: var(--theme-primary); transform: translateY(-150%); } .skip-link:focus { transform: none; } :focus-visible { outline: 3px solid var(--theme-accent-on-dark); outline-offset: 4px; box-shadow: 0 0 0 6px var(--theme-primary); } /* ============================ TYPE ======================================= */ .display { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .79; letter-spacing: -.06em; font-size: clamp(56px, 8vw, 124px); } .display-sm { font-size: clamp(44px, 5.6vw, 84px); line-height: .86; } .display em, .display i { font-style: italic; font-weight: 400; } .on-dark .display em, .display .accent-dark { color: var(--theme-accent-on-dark); } .display .accent-light { color: var(--theme-accent-on-light); } .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--theme-accent-on-light); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .22em; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; } .eyebrow.light { color: var(--on-dark-soft); } .eyebrow.plain::before { display: none; } .lede { font-family: var(--serif); font-size: clamp(19px, 2vw, 26px); line-height: 1.38; color: var(--muted); } .on-dark .lede { color: var(--on-dark-soft); } .prose p { margin-bottom: 18px; } .prose p:last-child { margin-bottom: 0; } .prose a { color: var(--theme-accent-on-light); } .prose ul { padding-left: 20px; margin-bottom: 18px; } .prose li { margin-bottom: 8px; } .prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.03em; margin: 48px 0 18px; } .prose h3 { font-size: 20px; margin: 32px 0 12px; } /* ============================ BUTTONS ==================================== */ .button { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 60px; padding: 0 24px; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s, color .2s, background .2s, border-color .2s; } .button:hover { transform: translateY(-3px); } .button-accent { color: var(--theme-primary); background: var(--theme-accent); } .button-accent:hover { background: var(--theme-accent-on-dark); } .button-outline { color: var(--on-dark); background: rgb(var(--theme-primary-rgb) / .28); border-color: rgba(255,255,255,.65); } .button-outline:hover { color: var(--theme-primary); background: var(--theme-surface-alt); border-color: var(--theme-surface-alt); } .button-surface { color: var(--theme-primary); background: var(--theme-surface-alt); } .button-dark { color: var(--on-dark); background: var(--theme-primary); } .button-dark:hover { background: var(--theme-primary-soft); } /* Submit buttons that close a form column and fill it. */ .button-block { width: 100%; } .text-link { display: inline-flex; align-items: center; gap: 16px; padding: 5px 0; font-size: 13px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid currentColor; } .text-link.light { color: var(--on-dark); } .text-link.dark { color: var(--ink); } /* ============================ HEADER ===================================== */ .site-header { /* Sticky, so the navigation is reachable from anywhere on the page. It is transparent over the hero and takes a solid background once scrolled. */ position: sticky; z-index: 100; top: 0; margin-bottom: -92px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 92px; padding: 14px var(--gutter); color: var(--on-dark); /* No rule while the header floats over the hero: a hairline there reads as a stripe drawn across the photograph. It belongs only to the solid header, where it separates two surfaces that actually meet. */ border-bottom: 0; transition: min-height .25s, padding .25s, background-color .25s, border-color .25s; } .site-header.is-solid { min-height: 72px; padding-block: 8px; background: var(--theme-primary); } .site-header.is-solid .wordmark-mark { width: 42px; height: 42px; } /* Without scripting nothing toggles is-solid, so the header would stay transparent over light sections and its white text would vanish. Give it the solid treatment from the start instead. */ @media (scripting: none) { .site-header { background: var(--theme-primary); } } .wordmark { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; line-height: .9; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; } /* The real mark. The artwork is black on transparent, so it is flipped to the header's own colour rather than shipped in a second light variant. */ .wordmark-mark { width: 48px; height: 48px; flex: none; object-fit: contain; filter: brightness(0) invert(1); } .wordmark-copy { font-size: 13px; letter-spacing: .04em; } .desktop-nav { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 1.6vw, 28px); padding-inline: 24px; } .desktop-nav a { position: relative; color: inherit; text-decoration: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; } .desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; } .desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } /* Mobile navigation is
: it opens with CSS alone and survives no-JS. */ .mobile-nav { display: none; } .mobile-nav summary { display: grid; place-content: center; gap: 7px; width: 46px; height: 46px; color: inherit; border: 1px solid currentColor; border-radius: 50%; cursor: pointer; list-style: none; } .mobile-nav summary::-webkit-details-marker { display: none; } .mobile-nav summary span:not(.sr-only) { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .2s; } .mobile-nav[open] summary span:nth-child(2) { transform: translateY(4px) rotate(45deg); } .mobile-nav[open] summary span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); } .mobile-panel { position: absolute; top: 58px; right: 0; width: min(340px, calc(100vw - var(--gutter) - var(--gutter))); padding: 22px; color: var(--on-dark); background: var(--theme-primary); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 70px rgba(0,0,0,.35); } .mobile-panel nav { display: grid; } .mobile-panel nav a { padding: 12px 0; font-family: var(--serif); font-size: 25px; line-height: 1.1; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.15); } .mobile-terms { display: inline-block; margin-top: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .mobile-panel > p { margin: 22px 0 0; color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; } /* ============================ HERO ======================================= */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--on-dark); background: var(--theme-primary); } /* Bleed a pixel past the top and bottom edges. The hero is sized in svh, so a fractional viewport height rounds the image short and leaves a hairline of the section's own dark background showing against the light section below. The hero clips overflow, so the extra pixel is never visible — it only closes the seam. */ .hero-image { position: absolute; inset: -1px 0; } .hero-image img { width: 100%; height: calc(100% + 2px); object-fit: cover; object-position: center 52%; } /* Crop preference for an event's own banner: which part of the picture the shared frame keeps when it has to cut. */ .hero-focus-top img { object-position: center 12%; } .hero-focus-bottom img { object-position: center 88%; } .hero-focus-left img { object-position: 12% 52%; } .hero-focus-right img { object-position: 88% 52%; } .hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--theme-primary-rgb) / .93) 0%, rgb(var(--theme-primary-rgb) / .7) 40%, rgb(var(--theme-primary-rgb) / .18) 72%), linear-gradient(0deg, rgb(var(--theme-deep-rgb) / .58), transparent 42%); } /* Copy sits high on the page: the hero CTAs were removed, so the block no longer needs to hang at the bottom edge. */ .hero-copy { position: relative; z-index: 2; min-width: 0; width: min(850px, calc(100% - 340px)); margin-left: var(--gutter); padding: 150px 0 clamp(180px, 22vh, 260px); align-self: flex-start; } .hero h1 { font-size: clamp(56px, 7.6vw, 116px); } .hero h1 em { color: var(--theme-accent-on-dark); font-style: italic; } .hero-intro { max-width: 610px; margin: 34px 0 0; color: rgba(255,255,255,.8); font-family: var(--serif); font-size: clamp(19px, 2vw, 26px); line-height: 1.38; } .hero-event { position: absolute; z-index: 3; right: var(--gutter); bottom: 0; width: clamp(245px, 23vw, 330px); padding: 25px 28px 28px; color: var(--theme-primary); background: var(--theme-surface-alt); } .event-label { margin: 0 0 28px; padding-bottom: 13px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; border-bottom: 1px solid rgb(var(--theme-primary-rgb) / .3); } .event-date { display: flex; align-items: center; gap: 12px; } .event-date strong { font-family: var(--serif); font-size: 50px; font-weight: 400; line-height: 1; } .event-date span { font-size: 10px; font-weight: 900; line-height: 1.25; letter-spacing: .14em; } .hero-event h2 { margin: 26px 0 20px; color: var(--theme-accent-on-light); font-family: var(--serif); font-size: clamp(44px, 4.6vw, 66px); font-weight: 400; font-style: italic; line-height: .78; letter-spacing: -.05em; } .hero-event p { font-size: 13px; font-weight: 700; margin-bottom: 0; } .event-flag { display: inline-block; margin-top: 16px; padding: 6px 12px; color: var(--theme-primary); background: var(--theme-accent); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; } .event-links { display: grid; gap: 10px; margin-top: 25px; padding-top: 14px; border-top: 1px solid rgb(var(--theme-primary-rgb) / .3); } .event-links a { display: flex; justify-content: space-between; color: inherit; font-size: 10px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .11em; } .event-links .event-register { padding: 12px 14px; color: var(--on-dark); background: var(--theme-primary); } /* The whole card is the click target: one link, stretched over the card. */ .event-links .event-register::after { content: ""; position: absolute; inset: 0; } /* Inner pages get a shorter hero without the event card. The frame is a locked 620px on desktop: a height, not a minimum, so no page's hero grows or shrinks with the length of its own copy. The complete kicker + H1 + lead block is centered as one block — and because the sticky header floats over the top 92px of the hero, the block carries that same 92px above it, which lands its optical centre in the part of the frame the header actually leaves visible. */ .page-hero { min-height: 0; height: 620px; align-items: center; } .page-hero .hero-copy { width: min(900px, calc(100% - var(--gutter) * 2)); padding: 92px 0 0; align-self: center; } .page-hero h1 { font-size: clamp(48px, 6.4vw, 96px); } /* ============================ SECTIONS =================================== */ .section { position: relative; padding: var(--section-y) 0; } .section-surface { background: var(--theme-surface-alt); } .section-paper { background: var(--theme-surface); } .section-dark { color: var(--on-dark); background: var(--theme-primary); } .section-dark .eyebrow { color: var(--on-dark-soft); } .split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 11vw; align-items: end; } .split h2 { color: var(--theme-primary); } .section-dark .split h2 { color: var(--on-dark); } .split h2 i, .form-heading i { display: inline-block; margin-left: 10%; color: var(--theme-accent-on-light); font-style: italic; } .section-dark .split h2 i { color: var(--theme-accent-on-dark); } .split-copy .large-copy { margin-bottom: 26px; color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 2.2vw, 31px); line-height: 1.35; } .split-copy > p:not(.eyebrow):not(.large-copy) { margin-bottom: 30px; color: var(--muted); } /* Two equal squares, tight gap. */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(65px, 8vw, 110px); } .duo figure { margin: 0; } .duo img { aspect-ratio: 1 / 1; object-fit: cover; } .duo figcaption { display: flex; gap: 16px; padding-top: 13px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; } /* ============================ EVENT FEATURE ============================== */ .event-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 820px; color: var(--on-dark); background: var(--theme-primary); } .event-poster { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(40px, 7vw, 100px); color: var(--theme-primary); background: var(--theme-surface-alt); isolation: isolate; } .event-poster::before, .event-poster::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgb(var(--theme-primary-rgb) / .18); border-radius: 50%; top: 48%; left: 45%; transform: translate(-50%, -50%); } .event-poster::before { width: 68vw; height: 68vw; } .event-poster::after { width: 42vw; height: 42vw; } .poster-top { position: absolute; top: 38px; right: 40px; left: 40px; display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; letter-spacing: .16em; border-top: 1px solid var(--theme-primary); padding-top: 12px; } /* Who is playing. This line used to be a tagline and was sized like one; it now carries the performers, which is the second thing a visitor reads after the party's name, so it scales with the poster. The tracking eases off as the size grows — .18em is a whisper at 11px and a gap at 22px. */ .poster-kicker { margin: 0 0 26px; font-size: clamp(15px, 1.6vw, 22px); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; } .event-poster h2 { margin: 0; font-family: var(--serif); font-size: clamp(80px, 10vw, 168px); font-weight: 400; line-height: .68; letter-spacing: -.07em; } .event-poster h2 i { color: var(--theme-accent-on-light); font-style: italic; font-weight: 400; } /* Second half of an event title: gold italic, as the design sets it. */ .title-accent { color: var(--theme-accent-on-light); font-style: italic; font-weight: 400; } .hero-event h2 .title-accent, .hero-event h2 i { color: inherit; } .poster-place { margin: 45px 0 0; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; } .poster-burst { position: absolute; right: 11%; bottom: 18%; display: grid; place-items: center; width: 105px; height: 105px; padding: 16px; color: var(--theme-surface-alt); background: var(--theme-primary); border-radius: 50%; font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1; text-align: center; } .event-details { display: flex; flex-direction: column; justify-content: center; padding: clamp(65px, 8vw, 130px); } .event-details h3 { max-width: 650px; margin: 0 0 30px; font-family: var(--serif); font-size: clamp(44px, 5vw, 74px); font-weight: 400; line-height: .98; letter-spacing: -.04em; } .event-details > p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.65); font-size: 18px; } .event-details dl { max-width: 590px; margin: 38px 0 40px; border-top: 1px solid rgba(255,255,255,.2); } .event-details dl div { display: grid; grid-template-columns: 110px 1fr; gap: 30px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.2); } .event-details dt { color: var(--theme-accent-on-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; } .event-details dd { margin: 0; font-family: var(--serif); font-size: 18px; } .event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; } /* ============================ RENTAL PANELS ============================== */ /* The heading block that opens the rental section, held clear of the panels. */ .rental-head { margin-bottom: 90px; } .panels { display: grid; gap: 26px; } .panel { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; min-height: 470px; color: var(--on-dark); background: var(--theme-primary); } .panel.reverse { grid-template-columns: .9fr 1.1fr; background: var(--theme-surface-sunk); color: var(--ink); } .panel figure { min-height: 430px; margin: 0; overflow: hidden; } .panel figure img { width: 100%; height: 100%; object-fit: cover; } .panel.reverse figure { order: 2; } .panel-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 85px); } .panel-copy h3 { margin: 0 0 20px; font-family: var(--serif); font-size: clamp(39px, 4.6vw, 68px); font-weight: 400; line-height: .95; letter-spacing: -.04em; } .panel-copy > p:not(.eyebrow) { color: rgba(255,255,255,.62); } .panel.reverse .panel-copy > p:not(.eyebrow) { color: var(--muted); } .panel-copy a { align-self: flex-start; display: flex; gap: 18px; margin-top: 25px; padding-bottom: 4px; font-size: 11px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid currentColor; } .facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 95px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .facts > div { display: flex; align-items: center; gap: 18px; padding: 36px 24px; border-right: 1px solid var(--line); } .facts > div:last-child { border-right: 0; } .facts strong { color: var(--theme-accent-on-light); font-family: var(--serif); font-size: clamp(55px, 6vw, 84px); font-weight: 400; line-height: 1; letter-spacing: -.06em; } .facts span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; } /* ============================ HISTORY CAROUSEL =========================== */ .history-inner { display: grid; gap: clamp(65px, 8vw, 110px); } .history-inner > * { min-width: 0; } .history-copy { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; align-items: end; } .history-copy .eyebrow { grid-column: 1 / -1; margin-bottom: -30px; } /* "Vanast sepikojast" is long: at the shared display size it overran its column, so this heading gets its own scale and is allowed to wrap. */ .history-copy h2 { font-size: clamp(36px, 4.2vw, 64px); overflow-wrap: break-word; hyphens: auto; } .history-copy > p:not(.eyebrow) { align-self: end; max-width: 560px; margin: 0 0 55px; color: rgba(255,255,255,.7); font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); } .history-copy .text-link { grid-column: 2; justify-self: start; margin-top: -38px; } .carousel-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 20px; } .carousel-head > p { margin: 0; color: var(--on-dark-mute); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; } .carousel-controls { display: flex; gap: 8px; } .carousel-controls button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; color: var(--on-dark); background: transparent; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; cursor: pointer; transition: color .2s, background .2s, opacity .2s; } .carousel-controls button:hover:not(:disabled) { color: var(--theme-primary); background: var(--theme-surface-alt); } .carousel-controls button:disabled { opacity: .28; cursor: default; } /* Scrollable on its own: without JS this is still a usable horizontal list. */ .carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 43%); gap: 16px; padding: 0 0 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: var(--theme-accent) rgba(255,255,255,.12); scrollbar-width: thin; } .carousel figure { margin: 0; scroll-snap-align: start; } .carousel img { aspect-ratio: 16 / 10; object-fit: cover; } .carousel figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 13px; color: var(--on-dark-mute); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; } .carousel figcaption span { color: var(--theme-accent-on-dark); font-weight: 900; } /* Full-bleed variant: the track spans the viewport and keeps the page gutter only as breathing room at each end. */ /* Uniform 4:3 frames at one height. Five of the six photographs are already 4:3, so only the panorama is cropped; 16:9 would have cropped the other five instead. Whatever does not fit the viewport is what the arrows are for — the strip is never squeezed to make it fit. The base .carousel rules above must stay above this block: they carry the same specificity, so whichever is written last wins, and with the base last its 16/10 silently replaced the 4:3 locked here. */ .carousel-full { grid-auto-columns: auto; padding-inline: var(--gutter); } .carousel-full figure { width: max-content; } .carousel-full img { aspect-ratio: 4 / 3; height: clamp(340px, 46vh, 580px); width: auto; max-width: none; object-fit: cover; } .section-photostory { padding-block: clamp(130px, 16vw, 240px); } /* ============================ CONTACT BAND =============================== */ .contact-band { position: relative; min-height: 750px; overflow: hidden; background: var(--theme-surface-alt); padding: var(--section-y) 0; } .contact-band .eyebrow { color: var(--theme-primary); } .contact-band h2 { max-width: 920px; color: var(--theme-primary); } .contact-band h2 i { color: var(--theme-accent-on-light); font-style: italic; } .contact-inner > p:not(.eyebrow) { max-width: 590px; margin: 46px 0 35px 10%; color: rgb(var(--theme-primary-rgb) / .75); font-family: var(--serif); font-size: clamp(20px, 2vw, 27px); } .contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-left: 10%; } .phone-link { color: var(--theme-primary); font-family: var(--serif); font-size: 22px; font-weight: 700; text-underline-offset: 5px; } .contact-address { position: absolute; z-index: 2; right: var(--gutter); bottom: 50px; width: 240px; color: var(--theme-primary); } .contact-address p { margin-bottom: 12px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; } .contact-address address { margin-bottom: 18px; font-family: var(--serif); font-size: 18px; font-style: normal; } .contact-address a { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; } /* ============================ CARDS / PANELS ============================= */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .card { padding: clamp(28px, 3vw, 44px); background: var(--theme-surface-alt); border: 1px solid var(--line); } .card h3 { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; letter-spacing: -.02em; } .card p { color: var(--muted); margin-bottom: 14px; } .card p:last-child { margin-bottom: 0; } .card a { color: var(--theme-accent-on-light); } .card .num { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; background: var(--theme-primary); color: var(--theme-accent-on-dark); font-size: 13px; font-weight: 900; } .definitions { border-top: 1px solid var(--line); margin: 0; } .definitions div { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--line); } .definitions dt { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; align-self: center; } .definitions dd { margin: 0; } /* The rental facts list stands away from the copy above it. */ .rental-facts { margin-top: 56px; } .notice { padding: 22px 26px; background: var(--theme-surface-alt); border-left: 3px solid var(--theme-accent); } .notice strong { color: var(--theme-primary); } /* Openers and closers: a heading or notice that sets the distance to the block following it, and a card that stands alone after a card grid. */ .cards-heading { margin-bottom: 44px; } .terms-notice { margin-bottom: 48px; } .contact-cards { margin-top: 20px; } .card-standalone { margin-top: 20px; } /* ============================ RENTAL PERIOD ============================== */ /* The three fields that decide the booking, and what follows from them. They replace the four fixed package cards: the rate is hourly, so the visitor picks the hours instead of the nearest block that fits. */ .period-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; } .period-row .field { margin-bottom: 0; } /* The estimate reads as one line of consequence under the choice, not as a second form. The figure is set in the serif so the eye lands on it. */ .period-summary { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin-top: 22px; padding: 20px 24px; background: var(--theme-surface-alt); border-left: 3px solid var(--theme-accent); font-size: 15px; color: var(--muted); } .period-summary b { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: var(--theme-accent-on-light); } .period-nextday { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--theme-accent-on-light); } /* ============================ FORMS ====================================== */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .field { display: grid; gap: 7px; margin-bottom: 18px; } /* The small uppercase label: over a form field, and over the sharing row. */ .field label, .event-share-title { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .field .req { color: var(--theme-accent-on-light); } input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], input[type=password], select, textarea { width: 100%; padding: 15px 16px; font-size: 16px; color: var(--ink); background: var(--theme-surface); border: 1px solid var(--line); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--theme-accent-on-light); } textarea { resize: vertical; min-height: 130px; } input[type=checkbox], input[type=radio] { accent-color: var(--theme-accent-on-light); width: 18px; height: 18px; flex: none; } .check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--muted); line-height: 1.5; } .check a { color: var(--theme-accent-on-light); } .hint { font-size: 13px; color: var(--muted); } fieldset { border: 0; padding: 0; margin: 0 0 10px; } legend { padding: 0; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .form-errors { padding: 20px 24px; margin-bottom: 26px; background: var(--theme-primary); color: var(--on-dark); } .form-errors p { margin: 0 0 6px; } .form-errors p:last-child { margin-bottom: 0; } /* The spam trap. Off-screen and one pixel rather than display:none, so a bot filling every field still fills it; the tabindex keeps it out of the way of real visitors. Qualified with the element, because the shared input rule above is an attribute selector of equal weight: as a bare class this loses width and height to it and the trap grows to a full-size field parked off-screen. */ input.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* The inquiry opens with the two weekday rates as comparable facts. The final price note is visually quieter, so it cannot be mistaken for a third rate. */ .form-heading { margin-bottom: 28px; } .rental-pricing { max-width: 900px; margin-bottom: 56px; } .rental-pricing h3 { margin: 0 0 14px; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; } .rental-rate-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .rental-rate { display: grid; gap: 9px; margin: 0; padding: 24px 32px 24px 0; } .rental-rate + .rental-rate { padding-right: 0; padding-left: 32px; border-left: 1px solid var(--line); } .rental-rate span { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .04em; } .rental-rate strong { color: var(--theme-primary); font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; } .rental-pricing-note { position: relative; max-width: 680px; margin: 24px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.6; } .rental-pricing-note::before { content: ''; position: absolute; top: .45em; bottom: .45em; left: 0; width: 2px; background: var(--theme-accent); } .rental-pricing-note strong { color: var(--theme-primary); } .inquiry-fields { margin-top: 40px; } .inquiry-fields .hint { margin-top: 12px; } /* ============================ GALLERY + LIGHTBOX ========================= */ /* Absorbed from the retired assets/gallery.css so the feature survives the stylesheet retirement rather than being carried as a legacy exception. */ /* Nothing stands between the hero and the photographs: the grid opens the page itself, a hairline below the hero rather than a section's height below it. */ .section-gallery { padding-top: 3px; } /* Full page width, hairline gaps: the photographs form one surface rather than a set of cards. */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; } .gallery-item { display: block; position: relative; overflow: hidden; text-decoration: none; } .gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; } .gallery-item:hover img { transform: scale(1.04); } .lb { position: fixed; inset: 0; z-index: 900; display: none; } .lb.is-open { display: block; } .lb-backdrop { position: absolute; inset: 0; background: rgb(var(--theme-deep-rgb) / .93); } .lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 60px 20px; } .lb-img { max-width: min(1400px, 92vw); max-height: 82vh; width: auto; object-fit: contain; } .lb-caption { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--on-dark-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; } .lb-close, .lb-nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; color: var(--on-dark); background: rgb(var(--theme-primary-rgb) / .7); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; } .lb-close:hover, .lb-nav:hover { color: var(--theme-primary); background: var(--theme-surface-alt); } .lb-close { top: 20px; right: 20px; } .lb-prev { top: 50%; left: 20px; transform: translateY(-50%); } .lb-next { top: 50%; right: 20px; transform: translateY(-50%); } /* gallery.js toggles .is-on while an image loads. */ .lb-spinner { position: absolute; display: none; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--theme-accent); border-radius: 50%; animation: lb-spin .8s linear infinite; } .lb-spinner.is-on { display: block; } @keyframes lb-spin { to { transform: rotate(360deg); } } /* ============================ EVENT LIST ================================= */ .event-list { display: grid; gap: 20px; } /* The row is the page's main object, so it carries real weight: a gold edge, a large date and a title at heading scale. */ .event-row { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(34px, 4vw, 52px) clamp(28px, 3.5vw, 56px); background: var(--theme-surface-alt); border: 1px solid var(--line); border-left: 4px solid var(--theme-accent); text-decoration: none; transition: background .2s, border-color .2s, transform .2s; } .event-row:hover { background: var(--theme-surface-sunk); transform: translateY(-2px); } .event-row .event-date { gap: 16px; } .event-row .event-date strong { font-family: var(--serif); font-size: clamp(64px, 7vw, 104px); font-weight: 400; line-height: .8; letter-spacing: -.05em; color: var(--theme-accent-on-light); } .event-row .event-date span { font-size: 12px; letter-spacing: .16em; color: var(--muted); } .event-row h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 72px); line-height: .92; letter-spacing: -.04em; } .event-row .when { margin: 14px 0 0; color: var(--muted); font-size: 15px; } .event-empty { padding: 60px 30px; text-align: center; border: 1px dashed var(--line); color: var(--muted); } /* An empty list is a quiet state: the heading drops below display scale and the link that follows the explanation stands away from it. */ .event-empty h3 { font-size: 32px; } .event-empty > p + p { margin-top: 24px; } /* The event page is a poster, not an ordinary inner page: a full-width banner, then the event announcing itself down the middle. The sticky header sits over the banner, so the wash exists to keep the navigation readable rather than to carry any copy. */ .event-banner { position: relative; height: clamp(320px, 46vw, 620px); overflow: hidden; background: var(--theme-primary); } .event-banner-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--theme-deep-rgb) / .62) 0%, rgb(var(--theme-deep-rgb) / .12) 34%, transparent 62%), linear-gradient(0deg, rgb(var(--theme-deep-rgb) / .3), transparent 30%); } /* The event owns the page, so the composition sits close under the banner rather than being marooned in a full section's worth of empty space. The ordinary --section-y rhythm is deliberately not used here: it separates unrelated sections, and the banner, the identity and the facts are one continuous announcement. */ .event-lead { padding: clamp(44px, 5vw, 72px) 0 clamp(52px, 6vw, 84px); } .event-lead-inner { max-width: 1040px; margin-inline: auto; text-align: center; } .event-lead-inner .eyebrow { justify-content: center; margin-bottom: 20px; } .event-lead-inner h1 { margin-bottom: 0; } .event-performers { margin: clamp(20px, 2.4vw, 30px) 0 0; color: var(--theme-accent-on-light); font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; line-height: 1.1; text-transform: uppercase; letter-spacing: .12em; } /* The facts read as one row on desktop and stack on narrow screens. Each item is a term above its value, so nothing depends on a fixed label column, and the values are ordinary readable copy rather than fine print. */ .event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(22px, 3vw, 44px); margin: clamp(36px, 4vw, 56px) 0 0; padding: clamp(26px, 3vw, 36px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .event-facts div { display: grid; gap: 6px; align-content: start; } .event-facts dt { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; } .event-facts dd { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; } .event-facts dd span { display: block; color: var(--muted); font-size: 17px; } .event-description { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; } /* A line break the owner typed is a line break on the page. Blank lines still make paragraphs; this is only about the breaks inside one. */ .event-description p { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; white-space: pre-line; } .event-description p:last-child { margin-bottom: 0; } /* The event's video shares the column its words are set in. The 16:9 frame belongs to this component, not to a pasted embed code: the owner gives the page a link, so the page decides how wide the player is — the text column on desktop, the full viewport width on a phone. */ .event-video { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; } .event-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } /* Everything practical sits below the event in one column: what else to know, how you get in, and how you put your name down. It follows the description directly instead of opening a second full-height section under it. */ .event-support { padding: clamp(52px, 6vw, 84px) 0 clamp(72px, 8vw, 120px); } .event-support-inner { display: grid; gap: clamp(28px, 3.4vw, 44px); max-width: 760px; margin-inline: auto; } /* The same display voice as the event name above, one step down in size: the section headings belong to the event, not to a form. */ .event-support-inner h2 { margin-bottom: 16px; font-family: var(--serif); font-size: clamp(38px, 4.4vw, 60px); font-weight: 400; line-height: .86; letter-spacing: -.06em; } .event-support-copy { text-align: center; } .event-support-copy p { font-size: clamp(18px, 1.5vw, 20px); white-space: pre-line; } .event-support-copy p:last-child { margin-bottom: 0; } .event-admission { text-align: center; } .event-admission-lead { color: var(--theme-primary); font-size: clamp(20px, 1.8vw, 24px); } .event-admission .button { margin-top: 10px; } .event-registration { scroll-margin-top: 92px; } .event-registration-deadline { color: var(--theme-accent-on-light); font-weight: 700; } /* The card a past event shows where its sign-up used to be. It carries the same anchor, so a stale form posted at the endpoint still lands on the answer instead of at the top of the banner. */ .event-past { scroll-margin-top: 92px; text-align: center; } .event-past p:last-child { margin-bottom: 0; } /* The event's own Facebook page. A text link on the same centered column, for the same reason the sharing row below is unboxed: the page keeps one thing to press, and a second button here would take that back. `a { color: inherit }` is the site default, so the accent is what marks this as somewhere to go. Spacing comes from the .event-support-inner grid gap, like every sibling. */ .event-facebook-link { margin: 0; text-align: center; } .event-facebook-link a { color: var(--theme-accent-on-light); font-weight: 700; } /* Sharing closes the same column. Three small marks, centered and unboxed: the page already has one thing to press, and this must not read as a second. */ .event-share { display: grid; justify-items: center; gap: 10px; } .event-share-title { margin: 0; } .event-share-links { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; } .event-share-links a { display: block; color: var(--theme-primary); line-height: 0; transition: color .2s, transform .2s; } .event-share-links a:hover, .event-share-links a:focus-visible { color: var(--theme-accent-on-light); transform: translateY(-2px); } .event-share-links svg { display: block; width: 30px; height: 30px; fill: currentColor; } .event-share-note { margin: 0; color: var(--muted); font-size: 14px; } /* Silent until the script has something to say, and taking no room until then. */ .event-share-note:empty { display: none; } /* The registration outcome sits at the top of the form card; when the form is still there, it must not touch its heading. */ .card .notice + h3 { margin-top: 26px; } /* Map runs edge to edge and closes the section, so no page background shows beneath it. */ .map-section { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; } .map-full { display: block; width: 100%; border: 0; } /* ============================ FOOTER ===================================== */ .site-footer { padding: 55px var(--gutter) 25px; color: var(--on-dark-soft); background: var(--theme-primary); } .footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding-bottom: 45px; } .footer-brand { color: var(--on-dark); } .footer-top nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; } .footer-top nav a { font-size: 11px; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; } .back-top { justify-self: end; display: grid; place-items: center; width: 48px; height: 48px; color: var(--on-dark); text-decoration: none; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; border-top: 1px solid rgba(255,255,255,.16); } /* ============================ RESPONSIVE ================================= */ @media (max-width: 1180px) { .site-header { grid-template-columns: 1fr auto auto; } .desktop-nav { display: none; } .mobile-nav { position: relative; display: block; } .hero-copy { width: min(740px, calc(100% - 320px)); } .hero-event { width: 255px; } .split { gap: 7vw; } .event-feature { min-height: 700px; } .event-details { padding: 65px; } .panel { min-height: 400px; } .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { html { scroll-padding-top: 70px; } body { font-size: 16px; } .site-header { min-height: 74px; padding-block: 10px; margin-bottom: -74px; } .wordmark-mark { width: 42px; height: 42px; } .wordmark-copy { font-size: 11px; } /* One column. The copy and the event card are both in flow, so a row direction squeezes them side by side into two unreadable columns at phone width; they belong under one another. */ .hero { min-height: auto; flex-direction: column; align-items: stretch; } .hero-wash { background: linear-gradient(180deg, rgb(var(--theme-primary-rgb) / .83) 0%, rgb(var(--theme-primary-rgb) / .47) 58%, rgb(var(--theme-primary-rgb) / .94) 100%); } .hero-copy { align-self: stretch; width: auto; max-width: calc(100vw - var(--gutter) * 2); margin: 0 var(--gutter); padding: 125px 0 40px; } .hero h1 { max-width: 100%; font-size: clamp(42px, 12vw, 58px); line-height: .86; } .hero-intro { font-size: 18px; margin-top: 24px; } .hero-event { position: relative; inset: auto; width: auto; margin: 30px var(--gutter) 40px; } /* Mobile is content-safe: the locked 620px is a desktop rule, and longer Estonian copy must never be clipped to hold it. */ .page-hero { height: auto; } .page-hero .hero-copy { padding: 125px 0 60px; } .split, .history-copy, .form-grid, .cards-2 { grid-template-columns: 1fr; gap: 34px; } .split h2 i, .history-copy h2 i, .form-heading i { margin-left: 0; } .history-copy .text-link { grid-column: 1; margin-top: 0; } .history-copy > p:not(.eyebrow) { margin-bottom: 0; } .history-copy .eyebrow { margin-bottom: 0; } .duo { grid-template-columns: 1fr 1fr; gap: 10px; } .event-feature { grid-template-columns: 1fr; min-height: 0; } .event-poster { min-height: 560px; padding: 50px 25px; } .event-poster h2 { font-size: clamp(80px, 26vw, 130px); } .event-details { padding: 70px var(--gutter); } .event-actions { flex-direction: column; align-items: stretch; } /* Mobile shows the whole poster, not a slice of it. The frame stops being a fixed height and the image simply scales to the viewport at its own aspect ratio, so nothing that matters is cropped away on a phone. */ .event-banner { height: auto; } .event-banner .hero-image { position: static; inset: auto; } /* With an automatic height the box already has the image's own ratio, so cover has nothing left to crop and the focus classes stop applying — which is the point: focus is for the desktop frame, not a stand-in for showing the whole picture here. */ .event-banner .hero-image img { height: auto; } .event-facts { grid-template-columns: 1fr 1fr; gap: 24px; } .button { width: 100%; } .panel, .panel.reverse { grid-template-columns: 1fr; } .panel figure, .panel.reverse figure { order: 0; min-height: 300px; } .panel-copy { padding: 44px 25px 50px; } .facts { grid-template-columns: 1fr; margin-top: 60px; } .facts > div { border-right: 0; border-bottom: 1px solid var(--line); } .facts > div:last-child { border-bottom: 0; } .carousel { grid-auto-columns: minmax(260px, 82%); } .contact-band { min-height: 0; } .contact-inner > p:not(.eyebrow), .contact-actions { margin-left: 0; } .contact-actions { align-items: stretch; flex-direction: column; } .contact-address { position: static; width: auto; margin-top: 55px; padding-top: 25px; border-top: 1px solid rgb(var(--theme-primary-rgb) / .25); } /* Under 800px the three period fields stack; two time inputs side by side leave neither wide enough to read. */ .rental-rate-grid { grid-template-columns: 1fr; } .rental-rate, .rental-rate + .rental-rate { padding: 20px 0; } .rental-rate + .rental-rate { border-top: 1px solid var(--line); border-left: 0; } .period-row { grid-template-columns: 1fr; } .period-row .field { margin-bottom: 18px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .definitions div { grid-template-columns: 1fr; gap: 4px; } .event-row { grid-template-columns: 1fr; gap: 18px; } .lb-prev { left: 10px; } .lb-next { right: 10px; } .footer-top { grid-template-columns: 1fr auto; } .footer-top nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } .footer-bottom { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .button:hover { transform: none; } } /* ============================ DATE PICKER ================================ */ /* Estonian calendar, attached by kehra.js. Without the script the field stays a native date input and none of this applies. */ .field { position: relative; } .datepick { position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 6px; width: min(320px, 100%); padding: 14px; color: var(--on-dark); background: var(--theme-primary); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 70px rgba(0,0,0,.4); } .datepick[hidden] { display: none; } .datepick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .datepick-head strong { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; } .datepick-head button { width: 32px; height: 32px; padding: 0; cursor: pointer; font-size: 18px; color: var(--on-dark); background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; } .datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .datepick-dow { display: grid; place-items: center; height: 28px; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: var(--on-dark-mute); } .datepick-grid button { height: 36px; padding: 0; cursor: pointer; font-size: 14px; color: var(--on-dark); background: transparent; border: 0; } .datepick-grid button:hover { background: rgba(255,255,255,.12); } .datepick-grid button.is-chosen { color: var(--theme-primary); background: var(--theme-accent); font-weight: 900; } .datepick-grid button:disabled { cursor: not-allowed; color: var(--on-dark-mute); opacity: .35; } .datepick-grid button:disabled:hover { background: transparent; } input.has-picker { cursor: pointer; }