@charset "UTF-8";
/* Reset & Box Model */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
min-width: 0;
text-box: trim-both cap alphabetic;
}
/* Color scheme support for native UI elements */
:root {
color-scheme: light dark;
}
/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
list-style: none;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
overflow-wrap: break-word;
}
/* Better text wrapping for paragraphs */
p {
text-wrap: balance;
}
@supports (text-wrap: pretty) {
p {
text-wrap: pretty;
}
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font-family: inherit;
font-size: inherit;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}
/**
* CSS Custom Properties
* Generated by Color Scale I/O Figma Plugin
*
* Colors generated using contrast-based color generation.
*/
:root {
/* Theme Settings */
--theme-lightness: 100;
--theme-contrast: 1;
--theme-saturation: 100;
--theme-formula: "wcag2";
--theme-output: "HEX";
/* Background */
--background: #F2F0EB;
/* Color Scales */
--color-1-100: #F4EDED; /* Ratio: 1.00 */
--color-1-200: #F9C8B5; /* Ratio: 1.32 */
--color-1-300: #E55313; /* Ratio: 3.30 */
--color-1-400: #CE2D17; /* Ratio: 4.55 */
--color-1-500: #9F0300; /* Ratio: 7.40 */
--color-1-600: #1F0F11; /* Ratio: 16.25 */
--color-2-100: #F1EFEA; /* Ratio: 1.00 */
--color-2-200: #D4D2CC; /* Ratio: 1.32 */
--color-2-300: #89827E; /* Ratio: 3.30 */
--color-2-400: #726B68; /* Ratio: 4.55 */
--color-2-500: #524C4A; /* Ratio: 7.40 */
--color-2-600: #151312; /* Ratio: 16.25 */
/* ============================================
Typography & Layout
============================================ */
/* Typography */
--font-family-text: "Stack Sans Text", 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-family-headline: "Stack Sans Headline", "Stack Sans Text", 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-size-base: 1rem;
--line-height: 1.6;
/* Cap-based spacing - optically aligned to visible text */
--cap-unit: 0.5cap;
}
@supports (text-box: trim-both) {
:root {
--cap-unit: 1cap;
}
}
:root {
/* Font Weights - Base values */
--font-weight-base-thin: 150;
--font-weight-base-normal: 350;
--font-weight-base-medium: 470;
--font-weight-base-bold: 520;
/* Font Weights - Light Mode (use base values directly) */
--font-weight-thin: var(--font-weight-base-thin);
--font-weight-normal: var(--font-weight-base-normal);
--font-weight-medium: var(--font-weight-base-medium);
--font-weight-bold: var(--font-weight-base-bold);
/* Layout */
--spacing-unit: 1.5rem;
--max-width: 960px;
--border-width-base: 1px;
--border-width: var(--border-width-base);
/* ============================================
Semantic Colors - Light Mode (Default)
============================================ */
--color-bg: var(--color-2-200);
--color-text: var(--color-2-500);
--color-title: var(--color-2-400);
--color-accent: var(--color-1-400);
--color-link-hover: var(--color-1-400);
--color-line: var(--color-1-300);
}
/* Fluid Typography - Mobile First */
/* Small mobile (<480px): 1.125rem */
@media (max-width: 30rem) { /* 480px */
:root {
--font-size-base: 1.0625rem;
}
}
/* Tablet (480px-768px): Interpolate from 1.125rem down to 1rem */
@media (min-width: 30rem) and (max-width: 48rem) { /* 480px-768px */
:root {
/* 1.125rem at 30rem → 1rem at 48rem */
--font-size-base: calc(
1rem + 0.0625rem * ((48rem - 100vw) / (48rem - 30rem))
);
}
}
/* ============================================
Mode Classes - Single Source of Truth
============================================ */
/* Light Mode */
:root.mode--light {
/* Color Scales */
--color-1-100: #F4EDED; /* Ratio: 1.00 */
--color-1-200: #F9C8B5; /* Ratio: 1.32 */
--color-1-300: #E55313; /* Ratio: 3.30 */
--color-1-400: #CE2D17; /* Ratio: 4.55 */
--color-1-500: #9F0300; /* Ratio: 7.40 */
--color-1-600: #1F0F11; /* Ratio: 16.25 */
--color-2-100: #F1EFEA; /* Ratio: 1.00 */
--color-2-200: #D4D2CC; /* Ratio: 1.32 */
--color-2-300: #89827E; /* Ratio: 3.30 */
--color-2-400: #726B68; /* Ratio: 4.55 */
--color-2-500: #524C4A; /* Ratio: 7.40 */
--color-2-600: #151312; /* Ratio: 16.25 */
/* Semantic Colors */
--color-bg: var(--color-2-200);
--color-text: var(--color-2-500);
--color-title: var(--color-2-400);
--color-accent: var(--color-1-400);
--color-link-hover: var(--color-1-400);
--color-line: var(--color-1-300);
/* Font Weights */
--font-weight-thin: var(--font-weight-base-thin);
--font-weight-normal: var(--font-weight-base-normal);
--font-weight-medium: var(--font-weight-base-medium);
--font-weight-bold: var(--font-weight-base-bold);
/* Layout */
--border-width: var(--border-width-base);
}
/* Dark Mode */
:root.mode--dark {
/* Color Scales */
--color-1-100: #321216; /* Ratio: 1.00 */
--color-1-200: #640C13; /* Ratio: 1.32 */
--color-1-300: #CC2A16; /* Ratio: 3.30 */
--color-1-400: #E24F15; /* Ratio: 4.55 */
--color-1-500: #FF8600; /* Ratio: 7.40 */
--color-1-600: #F6F2F3; /* Ratio: 16.25 */
--color-2-100: #1E1B1A; /* Ratio: 1.00 */
--color-2-200: #342F2E; /* Ratio: 1.32 */
--color-2-300: #706965; /* Ratio: 3.30 */
--color-2-400: #867F7B; /* Ratio: 4.55 */
--color-2-500: #AAA6A1; /* Ratio: 7.40 */
--color-2-600: #F5F3F0; /* Ratio: 16.25 */
/* Semantic Colors */
--color-bg: var(--color-2-100);
--color-text: var(--color-2-500);
--color-title: var(--color-2-400);
--color-accent: var(--color-1-500);
--color-link-hover: var(--color-1-500);
--color-line: var(--color-1-400);
/* Font Weights */
--font-weight-thin: calc(var(--font-weight-base-thin) - 50);
--font-weight-normal: calc(var(--font-weight-base-normal) - 80);
--font-weight-medium: calc(var(--font-weight-base-medium) - 80);
--font-weight-bold: calc(var(--font-weight-base-bold) - 50);
/* Layout */
--border-width: calc(var(--border-width-base) / 2);
}
/* ============================================
Custom Cursors - Theme Aware
============================================ */
/* Light Mode Cursors */
:root.mode--light {
/* Default Cursor */
}
:root.mode--light html,
:root.mode--light body {
cursor: url('data:image/svg+xml;utf8,') 16 16, auto;
}
:root.mode--light {
/* Pointer Cursor */
}
:root.mode--light a,
:root.mode--light button,
:root.mode--light [role=button],
:root.mode--light .mode:hover {
cursor: url('data:image/svg+xml;utf8,') 16 16, pointer;
}
:root.mode--light {
/* Clicking Cursor */
}
:root.mode--light body.is-clicking,
:root.mode--light body.is-clicking * {
cursor: url('data:image/svg+xml;utf8,') 16 16, pointer !important;
}
/* Dark Mode Cursors */
:root.mode--dark {
/* Default Cursor */
}
:root.mode--dark html,
:root.mode--dark body {
cursor: url('data:image/svg+xml;utf8,') 16 16, auto;
}
:root.mode--dark {
/* Pointer Cursor */
}
:root.mode--dark a,
:root.mode--dark button,
:root.mode--dark [role=button],
:root.mode--dark .mode:hover {
cursor: url('data:image/svg+xml;utf8,') 16 16, pointer;
}
:root.mode--dark {
/* Clicking Cursor */
}
:root.mode--dark body.is-clicking,
:root.mode--dark body.is-clicking * {
cursor: url('data:image/svg+xml;utf8,') 16 16, pointer !important;
}
/* Base Styles */
html {
font-size: var(--font-size-base);
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-family-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Universal Focus Styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 1px dotted var(--color-line);
outline-offset: 2px;
}
body {
line-height: var(--line-height);
min-height: 100vh;
padding-block: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
padding-inline: clamp(var(--spacing-unit), 8vw, var(--spacing-unit) * 2);
text-wrap-style: balance;
display: flex;
justify-content: center;
letter-spacing: 0.0025em;
}
:root.mode--dark body {
letter-spacing: 0.005em;
}
/* Text Selection */
::-webkit-selection,
::selection {
background-color: color-mix(in srgb, var(--color-line) 10%, transparent);
color: color-mix(in srgb, var(--color-2-600) 50%, var(--color-2-500) 50%);
}
:root.mode--dark ::-webkit-selection,
:root.mode--dark ::selection {
background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
color: color-mix(in srgb, var(--color-2-500) 60%, var(--color-2-600) 40%);
}
/* One Size Rule Enforcement */
h1, h2, h3, h4, h5, h6, p, li, span, div, a {
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
font-family: var(--font-family-headline);
}
/* BEM Blocks */
.mode {
position: relative;
top: calc(var(--spacing-unit) * -1);
}
.mode__toggle {
/* Reset button styles */
appearance: none;
border: none;
padding: 0;
background: transparent;
cursor: pointer;
/* Position and size */
position: absolute;
top: calc(var(--spacing-unit) * 1.5);
top: clamp(var(--spacing-unit) * 0.5, 8vw, var(--spacing-unit) * 2);
left: 0;
transform-origin: center center;
transform: translate(-50%, -50%);
width: calc(var(--spacing-unit) * 0.5);
height: calc(var(--spacing-unit) * 0.5);
transition: all 0.2s ease-out;
/* Visual indicator (the circle) */
}
.mode__toggle span {
display: block;
width: 100%;
height: 100%;
transform-origin: center center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--color-line);
border-radius: 50%;
transition: inherit;
}
.mode__toggle {
/* Increase tap target for mobile accessibility (44x44px minimum) */
}
.mode__toggle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 44px;
min-height: 44px;
border-radius: 50%;
}
.mode__toggle:hover span {
width: 125%;
height: 125%;
}
.mode__toggle {
/* Click animation - subtle pulse */
}
.mode__toggle.is-clicking span {
animation: pulse 200ms ease-out;
}
.mode__toggle {
/* Override focus style for this specific button to match its circular shape */
}
.mode__toggle:focus-visible {
outline: 1px dotted var(--color-line);
outline-offset: 8px;
border-radius: 50%;
}
/* Pulse animation keyframes */
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
}
20% {
transform: translate(-50%, -50%) scale(0.92);
}
75% {
transform: translate(-50%, -50%) scale(1.125);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
.page {
width: 100%;
max-width: var(--max-width);
display: flex;
flex-direction: column;
margin-block-start: calc(var(--spacing-unit) * 4);
gap: var(--spacing-unit);
}
.page--not-found {
justify-content: center;
text-align: center;
}
.page--not-found > * {
margin-inline: auto;
width: 100%;
}
.page--not-found .header__title {
font-size: clamp(4rem, 10vw, 12rem);
line-height: 1;
height: clamp(4rem, 10vw, 12rem);
margin-block-end: calc(var(--spacing-unit) * 0.5);
font-weight: 100;
margin-block-start: -0.15em;
}
@supports (text-box-trim: trim-both) {
.page--not-found .header__title {
text-box-trim: trim-both;
margin-block-start: 0;
}
}
.page--not-found p {
font-size: 0.8rem;
}
.page--not-found a {
text-decoration: none;
font-size: 2rem;
}
html[dir=rtl] .page--not-found a {
transform: scaleX(-1);
display: inline-block;
}
.page--home {
position: relative;
}
.header {
max-width: 40ch;
font-family: var(--font-family-headline);
display: flex;
flex-direction: column;
gap: calc(var(--cap-unit) * 1.5);
}
.header__title {
letter-spacing: 0.02em;
color: var(--color-title);
font-weight: var(--font-weight-thin);
font-size: 1.5rem;
}
.header__tagline {
color: var(--color-2-600);
font-weight: calc(var(--font-weight-normal) - 60);
}
.separator {
max-width: 40ch;
height: var(--border-width);
background-color: var(--color-line);
margin-block: calc(var(--cap-unit) * 3);
border: none; /* Reset default hr styles */
}
.content {
display: flex;
flex-direction: column;
gap: clamp(var(--cap-unit) * 3, 4vw, var(--cap-unit) * 4);
max-width: 40ch; /* Optimal reading measure */
}
.footer {
margin-block-start: calc(var(--spacing-unit) * 4);
border-block-start: var(--border-width) solid var(--color-line);
padding-block-start: var(--spacing-unit);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: clamp(var(--spacing-unit) * 0.5, 6vw, var(--spacing-unit));
}
.footer a, .footer__copyright {
font-size: 0.75rem !important;
}
.footer__links {
list-style: none;
display: flex;
gap: calc(var(--spacing-unit) * 0.5);
flex-wrap: wrap;
}
.footer__link {
border-bottom: none;
text-decoration: none;
text-box-trim: none;
padding: 3px 10px;
padding: 0.5cap 1.5cap;
border-radius: 15px;
margin-inline: -2px;
background-color: color-mix(in srgb, var(--color-2-300) 20%, transparent);
position: relative;
letter-spacing: 0.05em;
}
@supports (corner-shape: squircle) {
.footer__link {
border-radius: var(--spacing-unit);
corner-shape: squircle;
margin-inline: -1px;
}
}
.footer__link::before {
content: "";
position: absolute;
inset: calc(var(--spacing-unit) * -0.5);
}
.footer__link:hover {
background-color: color-mix(in srgb, var(--color-1-100) 40%, var(--color-bg) 20%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 22%, transparent), inset 0 0.75px 1px 1.25px rgba(255, 255, 255, 0.4), 0px 0.25px 2px rgba(0, 0, 0, 0.06), 0px 0.5px 4px rgba(0, 0, 0, 0.04);
}
:root.mode--dark .footer__link:hover {
box-shadow: inset 0 0 0 0.75px color-mix(in srgb, var(--color-link-hover) 10%, transparent), inset 0 0.5px 1px -0.25px rgba(255, 255, 255, 0.16), 0px 0.25px 2px rgba(0, 0, 0, 0.1), 0px 0.5px 4px rgba(0, 0, 0, 0.25);
}
.footer__copyright {
color: var(--color-text);
}
/* Links */
a {
color: var(--color-2-600);
text-decoration: underline;
text-decoration-thickness: var(--border-width);
text-underline-offset: calc(var(--cap-unit) * 0.25);
text-decoration-color: var(--color-accent);
transition: color 0.2s ease-in-out;
/* Disable transition during mode switch */
}
:root.mode-switching a {
transition: none;
}
a:hover {
color: var(--color-link-hover);
}