/* Ultra CSS — ultra.css + components.css + main.css */
@layer reset, base, components, utilities, custom;
/* ultra.css */
@view-transition{
navigation: auto;
}
@layer reset{
*,
*::before,
*::after{
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--header) + var(--space));
}
:focus:not(:focus-visible){
outline: none;
}
button,
input,
select,
textarea{
font: inherit;
color: inherit;
}
button{
background: none;
border: none;
border-radius: 0;
}
a,
button,
input,
select,
textarea{
-webkit-tap-highlight-color: transparent;
}
img,
picture,
svg,
video{
display: block;
max-width: 100%;
height: auto;
}
}
@layer base{
body{
font-family: var(--font-body);
font-weight: var(--font-normal);
font-size: clamp(100%, 0.875rem + 0.5vw, 112.5%);
line-height: var(--leading-base);
color: var(--text);
background-color: var(--background);
overflow-wrap: break-word;
}
h1,
h2,
h3{
font-family: var(--font-heading);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
overflow-wrap: break-word;
}
.icon{
display: inline-block;
vertical-align: 0.035em;
font-family: "remixicon";
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
a{
color: inherit;
font-weight: var(--font-medium);
text-decoration: none;
transition: var(--transition);
transition-property: color, border-color, background-color;
}
a:not(.btn):hover{
color: var(--primary);
}
.wrap{
display: flex;
flex-direction: column;
max-width: var(--container);
margin-inline: auto;
padding: var(--space-4);
}
.btn,
button:where(:not([class])){
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space);
border: 1px solid transparent;
border-radius: var(--radius);
background-color: var(--primary);
color: var(--on-primary);
line-height: var(--leading-tight);
text-align: center;
cursor: pointer;
transition: var(--transition);
transition-property: background-color, color, border-color;
}
.btn:hover,
button:where(:not([class])):hover{
background-color: var(--primary-hover);
}
.btn.soft{
background-color: var(--secondary);
color: var(--on-secondary);
}
.btn.soft:hover{
background-color: var(--secondary-hover);
}
.btn.outline{
background-color: transparent;
border-color: var(--primary-line);
color: var(--primary);
}
.btn.outline:hover{
background-color: var(--primary-soft);
}
main{
view-transition-name: main;
}
::view-transition-old(main){
animation: fade 120ms ease reverse both;
}
::view-transition-new(main){
animation: rise 260ms cubic-bezier(0, 0, 0.2, 1) 60ms both;
}
@keyframes fade{
from { opacity: 0; }
}
@keyframes rise{
from { opacity: 0; transform: translateY(1rem); }
}
@media (prefers-reduced-motion: no-preference){
main > section:first-child .wrap > *{
animation: rise 500ms cubic-bezier(0, 0, 0.2, 1) both;
}
main > section:first-child .wrap > :nth-child(2){ animation-delay: 70ms; }
main > section:first-child .wrap > :nth-child(3){ animation-delay: 140ms; }
main > section:first-child .wrap > :nth-child(4){ animation-delay: 210ms; }
main > section:first-child .wrap > :nth-child(n+5){ animation-delay: 280ms; }
}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
main > section:not(:first-child) .wrap > *,
.reveal{
animation: rise linear both;
animation-timeline: view();
animation-range: entry 10% entry 70%;
}
@media (width < 64rem){
main > section:not(:first-child) .wrap > *:not(:first-child, .reveal){
animation: none;
}
}
}
}
:focus-visible{
outline: var(--border-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
::view-transition-old(*),
::view-transition-new(*){
animation: none !important;
}
}
}
@layer utilities{
.block{ display: block; }
.flex{ display: flex; }
.grid{ display: grid; }
.hidden{ display: none; }
.sr-only{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.row{ display: flex; flex-wrap: wrap; }
.col{ display: flex; flex-direction: column; }
.fit{ flex: 1 1 16rem; }
.flex-1{ flex: 1; }
.items-center{ align-items: center; }
.items-end{ align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (width < 64rem){
:is(.cols-3, .cols-4):not(.no-collapse){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.cols-3, .cols-4):not(.no-collapse) > .span-3{ grid-column: 1 / -1; }
}
@media (width < 40rem){
:is(.cols-2, .cols-3, .cols-4):not(.no-collapse){ grid-template-columns: minmax(0, 1fr); }
:is(.cols-2, .cols-3, .cols-4):not(.no-collapse) > *{ grid-column: 1 / -1; }
}
.gap-1{ gap: var(--space-1); }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.gap-4{ gap: var(--space-4); }
.gap-6{ gap: var(--space-6); }
.mb-3{ margin-block-end: var(--space-3); }
.p-2{ padding: var(--space-2); }
.p-4{ padding: var(--space-4); }
.p-6{ padding: var(--space-6); }
.px-3{ padding-inline: var(--space-3); }
.py-2{ padding-block: var(--space-2); }
.py-4{ padding-block: var(--space-4); }
.pt-4{ padding-block-start: var(--space-4); }
.pb-2{ padding-block-end: var(--space-2); }
.pb-4{ padding-block-end: var(--space-4); }
.text-xs{ font-size: var(--text-xs); }
.text-sm{ font-size: var(--text-sm); }
.text-lg{ font-size: var(--text-lg); }
.text-2xl{ font-size: var(--text-2xl); }
.text-3xl{ font-size: var(--text-3xl); }
.font-heading{ font-family: var(--font-heading); line-height: var(--leading-tight); }
.font-normal{ font-weight: var(--font-normal); }
.font-medium{ font-weight: var(--font-medium); }
.font-bold{ font-weight: var(--font-bold); }
.italic{ font-style: italic; }
.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.uppercase{ text-transform: uppercase; }
.nowrap{ white-space: nowrap; }
.tracking-wider{ letter-spacing: 0.1em; }
.bg{ background-color: var(--background); }
.bg-panel{ background-color: var(--panel); }
.bg-surface{ background-color: var(--surface); }
.bg-primary{ background-color: var(--primary); }
.bg-secondary{ background-color: var(--secondary); }
.fg-muted{ color: var(--muted); }
.fg-primary{ color: var(--primary); }
.fg-on-primary{ color: var(--on-primary); }
.relative{ position: relative; }
.absolute{ position: absolute; }
.inset-0{ inset: 0; }
.overflow-hidden{ overflow: hidden; }
.border{ border: var(--border); }
.border-top{ border-top: var(--border); }
.rounded-sm{ border-radius: var(--radius-sm); }
.rounded-lg{ border-radius: var(--radius-lg); }
.rounded-full{ border-radius: var(--radius-full); }
.shadow-lg{ box-shadow: var(--shadow-lg); }
.z-below{ z-index: var(--z-below); }
.z-dropdown{ z-index: var(--z-dropdown); }
.aspect-photo{ aspect-ratio: 4 / 3; }
.aspect-portrait{ aspect-ratio: 3 / 4; }
.cover{ width: 100%; height: 100%; object-fit: cover; }
.cursor-pointer{ cursor: pointer; }
.list-none{ list-style: none; }
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
transition-property: none !important;
}
}

/* components.css */
@layer components{
section{
padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}
.alt > section:nth-child(even) > *,
:is(.bg-surface, .bg-elevated) > *{
--panel: var(--background);
}
header{
position: sticky;
top: 0;
z-index: var(--z-sticky);
background-color: var(--background);
border-bottom: var(--border);
}
header nav{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
max-width: var(--container);
margin-inline: auto;
padding: var(--space-3) var(--space-4);
& .logo{
flex-shrink: 0;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
}
& .logo:hover{
color: var(--text);
}
& ul{
display: flex;
align-items: center;
gap: var(--space-5);
list-style: none;
}
& ul a{
color: var(--muted);
}
& ul a:hover{
color: var(--text);
}
& ul a[aria-current]{
color: var(--primary);
font-weight: var(--font-bold);
}
}
.menu > summary{
padding: var(--space-2);
font-weight: var(--font-medium);
list-style: none;
cursor: pointer;
}
.menu > summary::-webkit-details-marker{
display: none;
}
@media (width < 64rem){
.menu ~ ul{
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background-color: var(--background);
border-bottom: var(--border);
box-shadow: var(--shadow-md);
transition: 200ms ease;
transition-property: opacity, translate, display;
transition-behavior: allow-discrete;
}
.menu:not([open]) ~ ul{
display: none;
opacity: 0;
translate: 0 -0.5rem;
}
@starting-style{
.menu[open] ~ ul{
opacity: 0;
translate: 0 -0.5rem;
}
}
}
@media (width >= 64rem){
.menu{
display: none;
}
}
footer{
background-color: var(--surface);
border-top: var(--border);
padding-block: var(--space-6);
}
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]){
display: block;
width: 100%;
padding: var(--space-2) var(--space-3);
color: var(--text);
background-color: var(--panel);
border: var(--border);
border-radius: var(--radius);
outline: none;
appearance: none;
transition: var(--transition);
transition-property: border-color, box-shadow;
&:focus{
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring);
}
}
::placeholder{
color: var(--subtle);
opacity: 1;
}
input:is([type="checkbox"], [type="radio"]){
width: 1rem;
height: 1rem;
accent-color: var(--primary);
cursor: pointer;
}
:where(input, select, textarea):disabled{
color: var(--subtle);
-webkit-text-fill-color: var(--subtle);
background-color: var(--elevated);
cursor: not-allowed;
}
.badge{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: calc(var(--space-1) * 0.5) var(--space-2);
border-radius: var(--radius-full);
background-color: var(--elevated);
color: var(--text);
font-size: var(--text-xs);
font-weight: var(--font-medium);
letter-spacing: 0.04em;
line-height: 1.4;
white-space: nowrap;
&.primary{ background-color: var(--primary); color: var(--on-primary); }
&.secondary{ background-color: var(--secondary); color: var(--on-secondary); }
&.success{ background-color: var(--success); color: var(--on-success); }
&.warning{ background-color: var(--warning); color: var(--on-warning); }
&.error{ background-color: var(--error); color: var(--on-error); }
&.info{ background-color: var(--info); color: var(--on-info); }
}
.accordion{
border: var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
interpolate-size: allow-keywords;
& details{
border-bottom: var(--border);
}
& details:last-child{
border-bottom: none;
}
& summary{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4);
font-weight: var(--font-medium);
list-style: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: 400ms ease;
transition-property: background-color;
}
& summary::-webkit-details-marker{
display: none;
}
& summary:active{
background-color: var(--elevated);
transition-duration: 0s;
}
& summary::after{
content: "+";
flex-shrink: 0;
font-size: var(--text-2xl);
line-height: 1;
color: var(--muted);
transition: 260ms cubic-bezier(0, 0, 0.2, 1);
transition-property: transform, color;
}
& summary:hover::after{
color: var(--text);
}
& details[open] > summary::after{
transform: rotate(45deg);
}
& summary + *{
padding: 0 var(--space-4) var(--space-4);
color: var(--muted);
line-height: var(--leading-loose);
}
@media (prefers-reduced-motion: no-preference){
& details::details-content{
block-size: 0;
overflow: hidden;
opacity: 0;
transition: 260ms cubic-bezier(0, 0, 0.2, 1);
transition-property: block-size, opacity, content-visibility;
transition-behavior: allow-discrete;
}
& details[open]::details-content{
block-size: auto;
opacity: 1;
}
}
}
.cookie{
position: fixed;
left: var(--space-3);
bottom: var(--space-3);
z-index: var(--z-sticky);
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border: var(--border);
border-radius: var(--radius-full);
background-color: var(--surface);
color: var(--muted);
opacity: 0.55;
cursor: pointer;
transition: var(--transition);
transition-property: opacity, color;
&:hover,
&:focus-visible{
opacity: 1;
color: var(--text);
}
}
.consent{
position: fixed;
inset: auto auto calc(var(--space-3) + 2.5rem) var(--space-3);
max-width: min(21rem, calc(100vw - 2 * var(--space-3)));
margin: 0;
padding: var(--space-4) var(--space-5);
border: var(--border);
border-radius: var(--radius);
background-color: var(--elevated);
color: var(--text);
box-shadow: var(--shadow-lg);
font-size: var(--text-sm);
opacity: 0;
translate: 0 0.5rem;
transition: 200ms ease;
transition-property: opacity, translate, display, overlay;
transition-behavior: allow-discrete;
&:popover-open{
opacity: 1;
translate: 0 0;
}
}
@starting-style{
.consent:popover-open{
opacity: 0;
translate: 0 0.5rem;
}
}
.lang-hint{
position: fixed;
inset: 0;
width: min(21rem, calc(100vw - 2 * var(--space-4)));
height: max-content;
max-height: calc(100dvh - 2 * var(--space-4));
margin: auto;
padding: 0;
overflow: hidden;
border: var(--border);
border-radius: var(--radius);
background-color: var(--elevated);
color: var(--text);
box-shadow: var(--shadow-xl);
opacity: 0;
scale: 0.96;
translate: 0 0.75rem;
transition: 260ms cubic-bezier(0, 0, 0.2, 1);
transition-property: opacity, scale, translate, display, overlay;
transition-behavior: allow-discrete;
&:popover-open{
opacity: 1;
scale: 1;
translate: 0 0;
}
&::backdrop{
background-color: color-mix(in srgb, var(--shadow-color) 45%, transparent);
opacity: 0;
transition: 260ms ease;
transition-property: opacity, display, overlay;
transition-behavior: allow-discrete;
}
&:popover-open::backdrop{
opacity: 1;
}
& picture{
display: block;
position: relative;
}
& img{
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: 50% 34%;
}
& .hint-close{
position: absolute;
inset: var(--space-2) var(--space-2) auto auto;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: var(--radius-full);
background-color: color-mix(in srgb, var(--background) 80%, transparent);
color: var(--text);
font-size: var(--text-lg);
line-height: 1;
cursor: pointer;
transition: var(--transition);
transition-property: background-color;
&:hover,
&:focus-visible{
background-color: var(--background);
}
}
& .hint-body{
display: grid;
gap: var(--space-5);
padding: var(--space-6) var(--space-5);
text-align: center;
}
& .hint-actions{
display: grid;
gap: var(--space-2);
}
& .hint-ask{
margin: 0;
font-size: var(--text-lg);
line-height: var(--leading-tight);
text-wrap: balance;
}
& .btn{
justify-content: center;
width: 100%;
}
}
@starting-style{
.lang-hint:popover-open{
opacity: 0;
scale: 0.96;
translate: 0 0.75rem;
}
.lang-hint:popover-open::backdrop{
opacity: 0;
}
}
.carousel{
display: flex;
gap: var(--space-4);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
& > *{
flex: 0 0 min(85%, 22rem);
scroll-snap-align: start;
}
&::-webkit-scrollbar{
display: none;
}
}
@media (40rem <= width < 64rem){
.carousel > *{
flex-basis: calc(50% - var(--space-4) / 2);
}
}
@media (width >= 64rem){
.carousel{
overflow: visible;
scroll-snap-type: none;
}
.carousel > *{
flex: 1 1 0;
}
}
table{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: var(--text-sm);
}
td{
padding: var(--space-3) var(--space-4);
border-bottom: var(--border);
vertical-align: middle;
}
tbody tr{
transition: var(--transition);
transition-property: background-color;
}
tbody tr:last-child td{
border-bottom: none;
}
tbody tr:hover{
background-color: var(--elevated);
}

/* Cenik je tudi vstopna točka za rezervacijo: vrstice so zaradi tbody tr:hover
   videti klikljive, zato naj bodo klikljive zares. Sidro z ::after prekrije
   celo celico, da ni mrtvih klikov na praznem delu vrstice. */
table.book td {
    position: relative;

    /* Vrstico poudari že ozadje (tbody tr:hover), zato barve ne menjamo. */
    & a:hover {
        color: inherit;
    }

    & a::after {
        content: "";
        position: absolute;
        inset: 0;
    }
}
}

/* main.css */
@font-face {
font-family: "Urbanist";
src: url("fonts/Urbanist-Variable-latin.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Urbanist";
src: url("fonts/Urbanist-Variable-latin-ext.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Young Serif";
src: url("fonts/YoungSerif-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "remixicon";
src: url("fonts/remixicon.woff2") format("woff2");
font-display: block;
}
@layer base {
:root {
color-scheme: light;
--primary: #4a6152;
--on-primary: #ffffff;
--background: #fbfaf8;
--text: #1a1309;
--stone: #7b8d83;
--secondary: #dde9e2;
--on-secondary: var(--text);
--font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-heading: "Young Serif", Georgia, "Times New Roman", serif;
--space: 1rem;
--radius: 1.5rem;
--container: var(--container-lg);
--header: 4.5rem;
--success: #146c38;
--on-success: #ffffff;
--warning: #a34c0a;
--on-warning: #ffffff;
--error: #c12a1f;
--on-error: #ffffff;
--info: #0c6b84;
--on-info: #ffffff;
--surface: color-mix(in srgb, var(--stone) 8%, var(--background));
--panel: var(--surface);
--elevated: color-mix(in srgb, var(--stone) 18%, var(--background));
--muted: color-mix(in srgb, var(--text) 74%, var(--background));
--subtle: color-mix(in srgb, var(--text) 64%, var(--background));
--border-color: color-mix(in srgb, var(--stone) 26%, var(--background));
--primary-soft: color-mix(in srgb, var(--primary) 8%, var(--background));
--primary-line: #7f8f84;
--primary-hover: color-mix(in srgb, var(--primary) 88%, var(--text));
--secondary-hover: color-mix(in srgb, var(--secondary) 88%, var(--text));
--ring: color-mix(in srgb, var(--primary) 45%, transparent);
--success-soft: color-mix(in srgb, var(--success) 8%, var(--background));
--warning-soft: color-mix(in srgb, var(--warning) 8%, var(--background));
--error-soft: color-mix(in srgb, var(--error) 8%, var(--background));
--info-soft: color-mix(in srgb, var(--info) 8%, var(--background));
--on-overlay: #ffffff;
--overlay: rgb(26 19 9 / 55%);
--shadow-color: #1a1309;
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a6152' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
--font-normal: 400;
--font-medium: 500;
--font-bold: 700;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--leading-tight: 1.2;
--leading-base: 1.5;
--leading-loose: 1.75;
--space-1: calc(var(--space) * 0.25);
--space-2: calc(var(--space) * 0.5);
--space-3: calc(var(--space) * 0.75);
--space-4: calc(var(--space) * 1.25);
--space-5: calc(var(--space) * 1.5);
--space-6: calc(var(--space) * 2);
--space-7: calc(var(--space) * 3);
--space-8: calc(var(--space) * 4);
--radius-sm: calc(var(--radius) * 0.5);
--radius-lg: calc(var(--radius) * 2);
--radius-xl: calc(var(--radius) * 4);
--radius-full: 9999px;
--border: 1px solid var(--border-color);
--border-focus: 2px solid var(--primary);
--shadow-sm: 0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 8%, transparent);
--shadow: 0 2px 8px 0 color-mix(in srgb, var(--shadow-color) 10%, transparent);
--shadow-md: 0 4px 16px 0 color-mix(in srgb, var(--shadow-color) 12%, transparent);
--shadow-lg: 0 8px 32px 0 color-mix(in srgb, var(--shadow-color) 14%, transparent);
--shadow-xl: 0 16px 48px 0 color-mix(in srgb, var(--shadow-color) 16%, transparent);
--shadow-inner: inset 0 2px 4px 0 color-mix(in srgb, var(--shadow-color) 8%, transparent);
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
--container-sm: 40rem;
--container-md: 64rem;
--container-lg: 80rem;
--container-xl: 96rem;
--transition: 150ms ease;
}
}
@layer custom {
.wrap {
padding: 0 clamp(var(--space-6), 5vw, var(--space-8));
}
:is(h1, h2) {
font-weight: var(--font-normal);
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.75rem, 2.5vw, 2.25rem);
}
h3 {
font-family: var(--font-body);
}
header {
block-size: var(--header);
}
header nav {
block-size: 100%;
}
.media-card {
min-height: var(--card-height, 24rem);
}
#hero {
display: flex;
flex-direction: column;
block-size: calc(100svh - var(--header));
padding-block: 0;
}
#hero .media-card {
--card-height: 0;
flex: 1;
}
#hero .perks-band {
flex: none;
}
#hero .media-card > .wrap {
padding-block: clamp(var(--space-6), 5vw, var(--space-8));
}
#hero h1 {
font-size: clamp(3rem, 8vw, 6rem);
}
#hero .media-card h1,
#hero .media-card p {
color: var(--on-overlay);
text-shadow:
0 1px 2px var(--overlay),
0 2px 16px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}
#hero .btn.outline {
background-color: var(--background);
}
@media (width < 40rem) {
#hero .btn {
--space: 1.125rem;
}
}
@media (height < 34rem) {
#hero h1 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
}
#hero .media-card > .wrap {
padding-block: var(--space-3);
}
#hero .media-card p {
display: none;
}
}
.perks-band {
padding-block: clamp(var(--space-4), 3vw, var(--space-6));
}
.perks .icon {
font-size: clamp(1.75rem, 5.5vw, 2.25rem);
line-height: 1;
}
.perks p {
font-size: clamp(var(--text-xs), 2.6vw, var(--text-sm));
line-height: var(--leading-base);
text-wrap: balance;
}
.cta {
background-color: var(--primary);
color: var(--on-primary);
--muted: color-mix(in srgb, var(--on-primary) 80%, var(--primary));
}
.cta .wrap {
--primary: var(--background);
--on-primary: var(--text);
--primary-hover: color-mix(in srgb, var(--background) 88%, #4a6152);
--ring: color-mix(in srgb, var(--background) 65%, transparent);
}
.btn {
--space: 1.75rem;
padding-block: 1.125rem;
}
header .btn {
--space: 1.25rem;
padding-block: 0.75rem;
}
.footer-credit {
font-weight: inherit;
}
.footer-credit svg {
height: 1em;
width: auto;
fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
.hero-video {
display: none;
}
.hero-still {
display: block;
}
}
@supports not (interpolate-size: allow-keywords) {
.accordion details::details-content {
transition: none;
}
.accordion details[open]::details-content {
block-size: auto;
overflow: visible;
opacity: 1;
}
}
summary {
-webkit-tap-highlight-color: color-mix(in srgb, var(--primary) 15%, transparent);
}
.lang {
& > summary {
list-style: none;
}
& > summary::-webkit-details-marker {
display: none;
}
& > summary:hover,
& a:hover {
background-color: var(--primary-soft);
}
& a:hover {
color: var(--text);
}
& .icon {
transition: rotate var(--transition);
}
&[open] .icon {
rotate: 180deg;
}
& ul {
top: calc(100% + var(--space-2));
inset-inline-end: 0;
inline-size: 12rem;
}
& a[aria-current] {
color: var(--primary);
font-weight: var(--font-bold);
}
@media (prefers-reduced-motion: no-preference) {
&::details-content {
opacity: 0;
translate: 0 -0.25rem;
transition: 160ms ease;
transition-property: opacity, translate, content-visibility;
transition-behavior: allow-discrete;
}
&[open]::details-content {
opacity: 1;
translate: 0 0;
}
}
}
}