/* 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%;
text-size-adjust: 100%;
scroll-padding-top: var(--header);
}
: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;
}
b,
strong{
font-weight: var(--font-bold);
}
.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);
}
.wrap.split{
flex-direction: row;
align-items: center;
gap: var(--space-6);
}
.wrap.split > *{
flex: 1 1 0;
min-width: 0;
}
@media (width < 64rem){
.wrap.split{
flex-direction: column;
align-items: stretch;
}
.wrap.split > *{
flex: none;
}
}
.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 var(--fast) var(--ease) reverse both;
}
::view-transition-new(main){
animation: rise var(--base) var(--ease) calc(var(--fast) / 2) both;
}
@keyframes fade{
from { opacity: 0; }
}
@keyframes rise{
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: none; }
}
@media screen and (prefers-reduced-motion: no-preference) and (scripting: enabled){
:is(main > section .wrap > *, .reveal):not(.showing, .shown, .no-reveal, .no-reveal *){
opacity: 0;
}
html:not(.js) :is(main > section .wrap > *, .reveal):not(.no-reveal, .no-reveal *){
animation: rise var(--slow) var(--ease) var(--rescue) both;
}
.showing{
animation: rise var(--slow) var(--ease) var(--reveal-delay, 0ms) both;
}
}
: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{
.grid{ display: grid; }
.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-wrap{ flex-wrap: wrap; }
.items-start{ align-items: flex-start; }
.items-center{ align-items: center; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
@media (width < 40rem){
.stack-m{ flex-direction: column; }
.stack-m > :is(.fit, .fit-sm){ flex: none; }
}
.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4{ grid-template-columns: repeat(4, 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-5{ gap: var(--space-5); }
.gap-6{ gap: var(--space-6); }
.mt-1{ margin-block-start: var(--space-1); }
.mt-3{ margin-block-start: var(--space-3); }
.mb-2{ margin-block-end: var(--space-2); }
.text-xs{ font-size: var(--text-xs); }
.text-sm{ font-size: var(--text-sm); }
.text-lg{ font-size: var(--text-lg); }
.text-xl{ font-size: var(--text-xl); }
.text-center{ text-align: center; }
.bg-surface{ background-color: var(--surface); }
.bg-elevated{ background-color: var(--elevated); }
.fg{ color: var(--text); }
.fg-muted{ color: var(--muted); }
.fg-subtle{ color: var(--subtle); }
.fg-primary{ color: var(--primary); }
.overflow-hidden{ overflow: hidden; }
.aspect-square{ aspect-ratio: 1; }
.cover{ width: 100%; height: 100%; object-fit: cover; }
@media (width >= 64rem){
.tablet-down{ display: 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);
}
hr{
border: none;
border-top: var(--border);
margin-block: var(--space-4);
}
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: var(--base) var(--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"]){
appearance: none;
-webkit-appearance: none;
flex: none;
display: grid;
place-items: center;
inline-size: 1.15rem;
block-size: 1.15rem;
margin: 0;
border: 1px solid var(--border-color);
border-radius: 0.35rem;
background-color: var(--panel);
cursor: pointer;
transition: var(--transition);
transition-property: background-color, border-color;
&:hover{ border-color: var(--primary-line); }
&:checked{
border-color: var(--primary);
background-color: var(--primary);
}
&::before{
font-family: remixicon;
font-size: 0.85rem;
line-height: 1;
color: var(--on-primary);
scale: 0.5;
opacity: 0;
transition: var(--transition);
transition-property: scale, opacity;
}
&:checked::before{
scale: 1;
opacity: 1;
}
}
input[type="checkbox"]::before{ content: "\eb7b"; }
input[type="radio"]{
border-radius: var(--radius-full);
&::before{ content: "\eb7c"; font-size: 0.5rem; }
}
@supports not (appearance: none){
input:is([type="checkbox"], [type="radio"]){ accent-color: var(--primary); }
}
:where(input, select, textarea):disabled{
color: var(--subtle);
-webkit-text-fill-color: var(--subtle);
background-color: var(--elevated);
cursor: not-allowed;
}
.field{
display: flex;
flex-direction: column;
gap: var(--space-1);
& label{
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
& .hint{
font-size: var(--text-sm);
color: var(--muted);
}
&.error{
--ring: color-mix(in srgb, var(--error) 45%, transparent);
}
&.error :is(input, select, textarea){
border-color: var(--error);
}
&.error .hint{
color: var(--error);
}
&.success :is(input, select, textarea){
border-color: var(--success);
}
&.success .hint{
color: var(--success);
}
}
.alert{
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: var(--border);
border-radius: var(--radius);
background-color: var(--panel);
& > i{
flex-shrink: 0;
font-size: var(--text-2xl);
line-height: 1;
}
& > div{
flex: 1;
}
& strong{
display: block;
margin-bottom: var(--space-1);
}
& p{
color: var(--muted);
font-size: var(--text-sm);
}
&.success :is(strong, i){ color: var(--success); }
&.warning :is(strong, i){ color: var(--warning); }
&.error :is(strong, i){ color: var(--error); }
&.info :is(strong, i){ color: var(--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: var(--slow) var(--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: var(--base) var(--ease);
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: var(--base) var(--ease);
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;
&::before{
content: "\f100";
font-family: remixicon;
font-size: var(--text-base);
line-height: 1;
}
&:hover,
&:focus-visible{
opacity: 1;
color: var(--text);
}
}
.consent{
position: fixed;
inset: auto auto calc(var(--space-3) + 2.5rem) var(--space-3);
inline-size: min(21rem, calc(100vw - 2 * var(--space-3)));
max-block-size: calc(100dvh - 6rem);
overflow-y: auto;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-5);
border: var(--border);
border-radius: var(--radius-lg);
background-color: var(--surface);
color: var(--text);
opacity: 0;
translate: 0 0.5rem;
transition: var(--base) var(--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;
}
}
.consent-title{
font-weight: var(--font-bold);
line-height: var(--leading-tight);
}
.consent-text{
margin-block-start: calc(var(--space-3) * -1);
color: var(--muted);
font-size: var(--text-sm);
}
.consent-cats{
display: flex;
flex-direction: column;
border-block: var(--border);
}
.consent-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-3);
font-size: var(--text-sm);
cursor: pointer;
& + &{ border-block-start: var(--border); }
&:has(:focus-visible){ outline: var(--border-focus); outline-offset: 4px; }
}
.consent-acts{
display: flex;
gap: var(--space-2);
& > .btn{
flex: 1;
justify-content: center;
padding: var(--space-2) var(--space-3);
white-space: nowrap;
font-size: var(--text-sm);
}
}
.consent-policy{
color: var(--subtle);
font-size: var(--text-xs);
}
@supports not selector(:popover-open){
.cookie,
.consent{
display: none;
}
}
.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;
scroll-snap-stop: always;
}
&::-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);
}
th{
padding: var(--space-3) var(--space-4);
border-bottom: var(--border);
color: var(--muted);
font-size: var(--text-xs);
font-weight: var(--font-medium);
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
}
thead{
background-color: var(--panel);
}
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);
}
table.striped tbody tr:nth-child(even){
background-color: var(--panel);
}
.table-wrap{
overflow-x: auto;
border: var(--border);
border-radius: var(--radius-lg);
& table{
table-layout: auto;
}
}
}

/* main.css */
@font-face {
font-family: "Body";
src: url("fonts/Manrope-VariableFont_wght.woff2") format("woff2");
font-weight: 300 900;
font-display: swap;
}
@font-face {
font-family: "Display";
src: url("fonts/Zodiak-Variable.woff2") format("woff2");
font-weight: 200 900;
font-display: swap;
}
@font-face {
font-family: "remixicon";
src: url("fonts/remixicon.woff2") format("woff2");
font-display: swap;
}
@layer base {
:root {
color-scheme: dark;
--primary: #7c78ff;
--on-primary: #0d0d1a;
--brand: #5551fe;
--on-brand: #ffffff;
--background: #0a0a0a;
--text: #f2f2f2;
--font-body: "Body", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-heading: "Display", Georgia, "Times New Roman", serif;
--font-ui: var(--font-body);
--space: 1rem;
--radius: 1rem;
--container: var(--container-lg);
--header: 4.5rem;
--section: clamp(3rem, 7vw, 6rem);
--success: #4ade80;
--on-success: #052e16;
--warning: #fbbf24;
--on-warning: #2b1a02;
--error: #f87171;
--on-error: #2b0a0a;
--info: #22d3ee;
--on-info: #04252e;
--surface: color-mix(in srgb, var(--text) 4%, var(--background));
--panel: var(--surface);
--elevated: color-mix(in srgb, var(--text) 10%, var(--background));
--secondary: color-mix(in srgb, var(--text) 8%, var(--background));
--on-secondary: var(--text);
--muted: color-mix(in srgb, var(--text) 70%, var(--background));
--subtle: color-mix(in srgb, var(--text) 60%, var(--background));
--border-color: color-mix(in srgb, var(--text) 12%, var(--background));
--primary-soft: color-mix(in srgb, var(--primary) 8%, var(--background));
--primary-line: color-mix(in srgb, var(--primary) 35%, var(--background));
--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(5 5 10 / 65%);
--shadow-color: #000000;
--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='%2378788c' 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: none;
--shadow: none;
--shadow-md: none;
--shadow-lg: none;
--shadow-xl: none;
--shadow-inner: none;
--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;
--ease: cubic-bezier(0, 0, 0.2, 1);
--fast: 150ms;
--base: 260ms;
--slow: 420ms;
--stagger: 70ms;
--rescue: 1500ms;
--transition: var(--fast) var(--ease);
}
}
@layer components {
.intro,
.card,
.card .body,
.prose,
.hero {
display: flex;
flex-direction: column;
}
.intro {
gap: var(--space-3);
}
.eyebrow {
font-size: var(--text-xs);
font-weight: var(--font-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.lead {
max-width: 46ch;
font-size: var(--text-lg);
color: var(--muted);
}
.prose p,
.card p {
color: var(--muted);
}
.card {
gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius);
background-color: var(--panel);
}
a.card:hover {
color: inherit;
background-color: var(--elevated);
}
.card.media {
gap: 0;
padding: 0;
overflow: hidden;
}
.card.media .body {
flex: 1;
gap: var(--space-4);
padding: var(--space-6);
}
.card.media .body > :last-child {
margin-block-start: auto;
}
.card.work .body p {
font-size: var(--text-sm);
}
.step {
padding: var(--space-5);
background-color: var(--elevated);
}
.step-num {
font-size: var(--text-sm);
font-weight: var(--font-bold);
line-height: 1;
color: var(--muted);
}
.icon-tile {
display: block;
font-size: 2.25rem;
line-height: 1;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-start: var(--space-1);
}
.tag {
padding: 0.2rem 0.7rem;
border-radius: var(--radius-full);
background-color: var(--elevated);
color: var(--muted);
font-size: var(--text-xs);
}
a.card.media:hover .tag {
background-color: var(--secondary);
}
.prose {
gap: var(--space-4);
max-width: 44rem;
}
.work-head {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-7);
align-items: start;
}
@media (width < 64rem) {
.work-head {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
}
@media (width < 40rem) {
.work-head {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
.shot {
display: block;
aspect-ratio: 2 / 3;
border-radius: var(--radius);
}
.mark {
display: block;
inline-size: 100%;
aspect-ratio: 1;
border-radius: var(--radius);
}
.hero {
gap: var(--space-5);
padding: clamp(var(--space-6), 7vw, calc(var(--space-8) * 1.25));
border-radius: var(--radius);
}
}
@layer custom {
input:is([type="checkbox"], [type="radio"]) {
&:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--background)); }
&:checked {
border-color: var(--brand);
background-color: var(--brand);
}
&::before { color: var(--on-brand); }
}
h1 {
font-size: clamp(2rem, 11.5vw, 5rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.02em;
-webkit-hyphens: auto;
hyphens: auto;
}
h2 {
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.015em;
}
h3 {
font-family: var(--font-body);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
}
h4 { font-size: var(--text-sm); letter-spacing: 0.08em; }
button,
.btn,
header nav,
.eyebrow,
.tag {
font-family: var(--font-ui);
}
.prose a:not(.btn),
.card a:not(.btn),
p a:not(.btn) {
text-decoration: underline;
text-underline-offset: 0.2em;
}
a:not(.btn):hover { color: var(--text); }
header nav ul a[aria-current] { color: var(--text); }
.prose h2 {
font-size: var(--text-2xl);
margin-block-start: var(--space-5);
}
.prose h3 {
font-size: var(--text-lg);
margin-block-start: var(--space-2);
}
.prose > :first-child { margin-block-start: 0; }
.btn,
button:where(:not([class])) {
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full);
font-weight: 600;
}
.btn:not(.soft, .outline, .light),
button:where(:not([class])) {
background-color: var(--brand);
color: var(--on-brand);
}
.btn:not(.soft, .outline, .light):hover,
button:where(:not([class])):hover {
background-color: color-mix(in srgb, #000 12%, var(--brand));
}
.btn.outline {
border-color: var(--border-color);
color: var(--text);
}
.btn.outline:hover { background-color: var(--secondary); }
header nav .btn { padding-block: var(--space-2); }
.carousel:focus-visible { outline: var(--border-focus); outline-offset: 4px; }
.skip {
position: absolute;
left: var(--space-4);
top: var(--space-2);
z-index: var(--z-toast);
translate: 0 -200%;
transition: translate var(--transition);
}
.skip:focus-visible { translate: 0 0; }
.accordion summary::marker { content: ""; }
.accordion {
border: none;
background-color: var(--elevated);
}
.accordion details { border-color: var(--background); }
.accordion summary { padding: var(--space-4) var(--space-5); }
.accordion summary + * { padding: 0 var(--space-5) var(--space-4); }
.brand {
--hero: var(--brand);
--on-hero: var(--on-brand);
background-color: var(--hero);
color: var(--on-hero);
}
.brand :is(h1, h2, h3) { color: var(--on-hero); }
.brand .eyebrow { color: color-mix(in srgb, var(--on-hero) 80%, var(--hero)); }
.brand p { color: color-mix(in srgb, var(--on-hero) 88%, var(--hero)); }
.brand .btn {
background-color: color-mix(in srgb, #000 28%, var(--hero));
color: var(--on-hero);
}
.brand .btn:hover { background-color: color-mix(in srgb, #000 42%, var(--hero)); }
.brand .btn.light {
background-color: var(--on-hero);
color: var(--hero);
}
.brand .btn.light:hover { background-color: color-mix(in srgb, var(--hero) 12%, var(--on-hero)); }
.brand .tag {
background-color: color-mix(in srgb, var(--on-hero) 18%, transparent);
color: var(--on-hero);
}
.logo {
display: block;
width: 7.5rem;
aspect-ratio: 5 / 1;
background-color: currentColor;
mask: url("images/logo.svg") center / contain no-repeat;
-webkit-mask: url("images/logo.svg") center / contain no-repeat;
}
footer .logo { width: 6.5rem; }
header nav .logo { order: 0; }
header nav ul { order: 1; }
header nav .nav-end {
order: 2;
display: flex;
align-items: center;
gap: var(--space-3);
margin-inline-start: auto;
}
@media (width >= 64rem) {
header nav { position: relative; }
header nav ul {
position: absolute;
left: 50%;
translate: -50% 0;
}
}
@media (width < 64rem) {
header nav .menu { order: 3; }
header nav .desktop-end { display: none; }
header nav ul {
gap: var(--space-4);
padding: var(--space-5) var(--space-4) var(--space-6);
}
header nav ul .lang-row {
width: 100%;
padding-block-start: var(--space-4);
border-top: var(--border);
}
}
@media (width < 30rem) {
header nav { gap: var(--space-2); }
header nav .logo { width: 5.5rem; }
header nav .btn { padding-inline: var(--space-3); font-size: var(--text-sm); }
}
.lang { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.lang a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
min-height: 1.5rem;
color: var(--subtle);
}
.lang a:hover { color: var(--text); }
.lang a[aria-current] { color: var(--text); font-weight: var(--font-bold); }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-6);
}
.footer-grid nav {
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--text-sm);
}
.footer-grid nav p { color: var(--subtle); }
@media (width < 64rem) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (width < 30rem) {
.footer-grid { grid-template-columns: 1fr; }
}
main > section > .wrap { padding-block: 0; }
main > section { padding-block: var(--section); }
main > section:first-child:has(.hero) { padding-block-start: var(--space-5); }
@media (23rem <= width < 64rem) {
.grid.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.pair > * { grid-column: auto; }
}
@media (width < 40rem) {
.grid.pair { gap: var(--space-3); }
.grid.pair .card:not(.step) {
padding: var(--space-4);
& h3 { font-size: var(--text-lg); }
}
}
}
@layer components {
.offer-center {
display: flex;
align-items: center;
min-block-size: 75vh;
min-block-size: 75svh;
& > .wrap { inline-size: 100%; }
}
.code-cells {
display: flex;
gap: var(--space-4);
padding: 0;
border: none;
& input {
inline-size: 4rem;
padding: var(--space-3) 0;
border: none;
border-radius: var(--radius-sm);
background-color: var(--elevated);
font-family: var(--font-ui);
font-size: var(--text-3xl);
font-weight: var(--font-bold);
line-height: 1.2;
text-align: center;
text-transform: uppercase;
}
}
.offer-head {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-7);
align-items: start;
}
@media (width < 64rem) {
.offer-head {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
}
@media (width < 40rem) {
.offer-head {
grid-template-columns: 1fr;
gap: var(--space-5);
}
}
.offer-card {
gap: var(--space-4);
padding: var(--space-5);
}
.card-actions {
margin-block-start: var(--space-2);
padding-block-start: var(--space-4);
border-block-start: 1px solid color-mix(in srgb, var(--on-hero) 25%, transparent);
& > * {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0;
border: none;
border-radius: 0;
background: none;
color: color-mix(in srgb, var(--on-hero) 80%, var(--hero));
font-family: var(--font-ui);
font-weight: var(--font-medium);
}
& > *:hover {
background: none;
color: var(--on-hero);
}
& .icon { font-size: var(--text-lg); }
}
.offer-code {
font-family: var(--font-ui);
font-size: var(--text-3xl);
font-weight: var(--font-bold);
letter-spacing: 0.15em;
line-height: 1;
margin-inline-end: -0.15em;
}
.facts {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-2) var(--space-5);
& dt { color: var(--muted); }
}
.brand .facts {
& dt { color: color-mix(in srgb, var(--on-hero) 70%, var(--hero)); }
& dd { text-align: right; }
}
.offer-table {
table-layout: auto;
font-size: var(--text-base);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--radius);
overflow: hidden;
& :is(th, td) {
padding: var(--space-4);
border: none;
}
& :is(th, td).num {
text-align: right;
white-space: nowrap;
}
& td {
font-variant-numeric: tabular-nums;
vertical-align: top;
}
& td strong { font-weight: var(--font-bold); }
& del { color: var(--subtle); }
& thead { background-color: var(--elevated); }
& tbody tr:nth-child(odd) { background-color: var(--secondary); }
& tbody tr:nth-child(even) { background-color: var(--background); }
& tbody tr:hover { background-color: var(--elevated); }
}
.offer-desc {
display: block;
margin-block-start: var(--space-1);
color: var(--muted);
font-size: var(--text-sm);
font-variant-numeric: normal;
}
.offer-desc sup { color: var(--primary); }
.offer-note {
padding: var(--space-5);
border-radius: var(--radius);
background-color: var(--background);
}
.offer-fine { max-inline-size: 46rem; }
.totals {
display: grid;
gap: var(--space-2);
}
.total-line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
& dt { color: var(--muted); }
& dd {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
}
.total-line.discount dd { color: var(--primary); }
.total-line.final {
padding-block-start: var(--space-4);
margin-block-start: var(--space-2);
border-block-start: var(--border);
& dt {
color: var(--text);
font-weight: var(--font-medium);
}
& dd {
font-family: var(--font-ui);
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: 1.1;
}
}
.accept-form {
max-inline-size: 44rem;
& fieldset {
padding: 0;
border: none;
}
}
.pick {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-sm);
background-color: var(--secondary);
cursor: pointer;
transition: var(--transition);
transition-property: background-color, color;
&:hover { background-color: var(--elevated); }
&:has(:checked) { background-color: var(--primary-soft); }
&:has(:focus-visible) { outline: var(--border-focus); outline-offset: 2px; }
& > span:first-of-type { flex: 1; }
& strong { display: block; }
& .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
}
.offer-photo {
flex: none;
inline-size: 7rem;
border-radius: var(--radius);
}
.contact-name {
font-size: var(--text-xl);
font-weight: var(--font-medium);
}
.print-head,
.print-only { display: none; }
}
@layer custom {
.card .card-actions a { text-decoration: none; }
.card .card-actions a:hover { color: var(--on-hero); }
main:has(.offer-card) :is(h2, h3) {
font-family: var(--font-body);
letter-spacing: 0;
}
main:has(.offer-card) h2 { font-size: var(--text-3xl); }
.offer-title {
font-size: clamp(2.25rem, 10vw, 3.5rem);
-webkit-hyphens: manual;
hyphens: manual;
text-wrap: balance;
}
@media print {
:root {
color-scheme: light;
--background: #ffffff;
--text: #111111;
--brand: #ffffff;
--on-brand: #111111;
}
header,
footer,
.cookie,
.consent,
.skip,
.no-print,
.btn,
input,
textarea { display: none !important; }
.print-only { display: block; }
.accept-form .field { display: none; }
.print-head {
display: block;
margin-block-end: var(--space-5);
padding-block-end: var(--space-3);
border-block-end: 1px solid #111;
& p { color: #444; font-size: 9pt; }
}
main > section .wrap > *,
.reveal { animation: none; opacity: 1; transform: none; }
main > section { padding-block: 0; }
.offer-center { display: block; min-block-size: 0; }
main > section + section { margin-block-start: var(--space-5); }
main > section > .wrap { max-width: none; padding-inline: 0; }
.card,
.offer-card { padding: var(--space-4); border: 1px solid #ccc; background: none; color: #111; }
.brand :is(h1, h2, h3, p, dt, dd, .eyebrow) { color: #111; }
.bg-surface,
.bg-elevated { background: none; }
h1 { font-size: 20pt; }
h2 { font-size: 14pt; }
.badge,
.tag { border: 1px solid #bbb; background: none; color: #333; }
.offer-table thead,
.offer-table tbody tr { background: none; }
.offer-table :is(th, td) { border-bottom: 1px solid #ddd; }
.offer-table tbody tr:last-child td { border-bottom: none; }
.offer-note,
.pick { border: 1px solid #ccc; background: none; }
.offer-note,
.facts,
.print-head,
.offer-table tr { break-inside: avoid; }
@page { margin: 18mm 16mm; }
}
}
@layer components {
.ticks {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: 0;
list-style: none;
& li {
display: flex;
align-items: start;
gap: var(--space-3);
color: var(--muted);
}
& .icon {
flex: none;
color: var(--primary);
font-size: var(--text-lg);
}
}
.brand .ticks {
& li { color: color-mix(in srgb, var(--on-hero) 88%, var(--hero)); }
& .icon { color: var(--on-hero); }
}
.lp-head {
position: sticky;
top: 0;
z-index: var(--z-sticky);
border-block-end: var(--border);
background-color: color-mix(in srgb, var(--background) 88%, transparent);
backdrop-filter: blur(12px);
& > .wrap {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-3);
}
}
.stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-5) var(--space-7);
}
.stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
& strong {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--font-bold);
line-height: 1;
}
& span {
font-size: var(--text-sm);
color: var(--muted);
}
}
.plan {
position: relative;
gap: var(--space-4);
padding: var(--space-6);
border: var(--border);
background-color: var(--panel);
}
.plan.pick-me {
border-color: var(--primary-line);
background-color: var(--elevated);
}
.plan-tag {
position: absolute;
inset-block-start: calc(var(--space-3) * -1);
inset-inline-start: var(--space-6);
padding: 0.2rem 0.7rem;
border-radius: var(--radius-full);
background-color: var(--primary);
color: var(--on-primary);
font-size: var(--text-xs);
font-weight: var(--font-bold);
}
.plan-price {
display: flex;
align-items: baseline;
gap: var(--space-2);
& strong {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--font-bold);
line-height: 1;
}
& span {
font-size: var(--text-sm);
color: var(--muted);
}
}
.plan .ticks {
gap: var(--space-2);
flex: 1;
& li { font-size: var(--text-sm); }
& .icon { font-size: var(--text-base); }
}
.plan > .btn:last-child { margin-block-start: auto; }
.sticky-cta {
position: fixed;
inset: auto 0 0 0;
z-index: var(--z-sticky);
display: flex;
gap: var(--space-2);
padding: var(--space-3);
padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom));
border-block-start: var(--border);
background-color: color-mix(in srgb, var(--background) 92%, transparent);
backdrop-filter: blur(12px);
& > * { flex: 1; justify-content: center; }
}
@media (width >= 64rem) {
.sticky-cta { display: none; }
}
body:has(.sticky-cta) {
& .cookie { bottom: calc(var(--space-4) + 4.5rem); }
& .consent { inset-block-end: calc(var(--space-4) + 7.5rem); }
}
}
@layer custom {
body:has(.lp-head) h1 {
font-size: clamp(2rem, 4.6vw, 3.25rem);
line-height: 1.06;
}
}