/* ==========================================================================
Clean with Kenta — Design System
Tokens first, components second. Every color/spacing/type decision in the
rest of the CSS should trace back to a variable defined here.
========================================================================== */
/* Class rules like `.hero-placeholder { display: grid }` otherwise beat the
UA stylesheet for [hidden], leaving placeholders visible and (for
before/after) pushing the real ![]()
outside overflow:hidden. */
[hidden] { display: none !important; }
:root {
/* --- Brand color ramp --- */
--c-electric-blue: #0A66FF;
--c-deep-blue: #0047CC;
--c-navy: #0D1B2A;
--c-near-black: #0A0F14;
--c-white: #FFFFFF;
--c-mist: #D9DEE6;
/* Derived surfaces (all shades of the ramp above — no new hues) */
--c-navy-raised: #13273a;
--c-navy-line: #223349;
--c-ink: var(--c-white);
--c-ink-dim: var(--c-mist);
--c-ink-faint: #90a0b2;
/* Semantic aliases */
--bg: var(--c-near-black);
--bg-section: var(--c-navy);
--bg-raised: var(--c-navy-raised);
--border: var(--c-navy-line);
--accent: var(--c-electric-blue);
--accent-deep: var(--c-deep-blue);
/* Lighter tint of the same blue for text on dark backgrounds — #0A66FF
itself is ~3.6:1 against --bg and fails WCAG AA (4.5:1) for text. */
--accent-text: #5B9CFF;
--text: var(--c-ink);
--text-dim: var(--c-ink-dim);
--text-faint: var(--c-ink-faint);
/* --- Typography --- */
--font-display: "Archivo Black", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
--font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-accent: "Segoe Script", "Brush Script MT", cursive;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-h1: clamp(2.4rem, 6vw, 5rem);
--fs-h2: clamp(1.7rem, 3.6vw, 2.7rem);
--fs-h3: clamp(1.2rem, 2.2vw, 1.5rem);
--fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-label: 0.75rem;
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.65;
/* --- Spacing scale (4px base) --- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 140px;
/* --- Shape / elevation --- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-sm: 0 4px 16px rgba(0,0,0,.25);
--shadow-md: 0 12px 40px rgba(0,0,0,.35);
--shadow-glow: 0 8px 30px rgba(10,102,255,.35);
/* --- Motion --- */
--dur-fast: 160ms;
--dur-base: 320ms;
--dur-slow: 600ms;
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
/* --- Layout --- */
--container: 1200px;
--container-narrow: 760px;
--gutter: clamp(20px, 4vw, 56px);
/* --- Z-index scale --- */
--z-base: 0;
--z-raised: 10;
--z-nav: 500;
--z-overlay: 800;
--z-modal: 900;
--z-toast: 950;
}
/* ==========================================================================
Reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Keep layout width stable when FAQ locks page scroll (no sideways jump). */
scrollbar-gutter: stable;
/* clip (not hidden) hides sideways overflow without turning into a
vertical scrollport that fights the viewport. */
overflow-x: clip;
}
@media (pointer: coarse) {
html { scrollbar-gutter: auto; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
overscroll-behavior-x: none;
}
body:focus {
outline: none;
}
img { max-width: 100%; display: block; }
/* Defensive default: a bare with no CSS sizing otherwise
falls back to the browser's replaced-element default (~300x150) and can
blow out the layout. Specific components size their own icons above 1em. */
svg { width: 1em; height: 1em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
/* Focus visibility everywhere — never remove without replacing */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: var(--sp-4);
top: -60px;
background: var(--accent);
color: #fff;
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius-sm);
z-index: var(--z-toast);
font-weight: 700;
transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }
/* ==========================================================================
Typography primitives
========================================================================== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-label);
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent-text);
}
.eyebrow::before {
content: "";
width: 24px;
height: 2px;
background: var(--accent);
display: inline-block;
}
h1, .h1 {
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: var(--lh-tight);
text-transform: uppercase;
letter-spacing: .01em;
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
text-transform: uppercase;
letter-spacing: .01em;
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
text-transform: uppercase;
letter-spacing: .02em;
}
.lead {
font-size: var(--fs-lead);
color: var(--text-dim);
max-width: 56ch;
}
.accent-script {
font-family: var(--font-accent);
font-weight: 400;
color: var(--accent-text);
font-size: 1.3em;
text-transform: none;
letter-spacing: 0;
}
/* ==========================================================================
Layout
========================================================================== */
section[id] {
scroll-margin-top: 88px;
}
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--sp-9);
position: relative;
min-width: 0;
max-width: 100%;
}
.section-head {
display: flex;
flex-direction: column;
gap: var(--sp-3);
max-width: var(--container-narrow);
margin-bottom: var(--sp-7);
}
/* ==========================================================================
Campaign — seeking first home
========================================================================== */
.seek-home {
padding-block: var(--sp-8);
background:
radial-gradient(ellipse 80% 120% at 10% 0%, rgba(10,102,255,.18), transparent 55%),
linear-gradient(180deg, rgba(19,39,58,.9), var(--bg));
border-block: 1px solid rgba(90,156,255,.18);
}
.seek-home-inner {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
gap: var(--sp-7);
align-items: end;
}
.seek-home-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-4);
max-width: 40rem;
}
.seek-home-copy h2 {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: -.01em;
}
.seek-home-copy .lead {
margin: 0;
color: var(--text-dim);
}
.seek-home-copy .btn {
margin-top: var(--sp-2);
}
.notify-form {
width: 100%;
max-width: 28rem;
margin-top: var(--sp-4);
display: grid;
gap: var(--sp-3);
}
.notify-label {
font-size: var(--fs-small);
font-weight: 600;
color: var(--text);
}
.notify-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
}
.notify-row input[type="email"] {
flex: 1 1 12rem;
min-height: 48px;
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: rgba(10, 15, 20, .45);
color: var(--text);
font-size: 16px;
}
.notify-row .btn {
margin-top: 0;
}
.notify-hint {
margin: 0;
font-size: .8rem;
color: var(--text-faint);
}
.notify-status {
margin: 0;
font-size: var(--fs-small);
color: var(--accent-text);
}
.notify-status.is-error { color: #ff8f8f; }
.seek-home-priorities h3 {
margin: 0 0 var(--sp-4);
font-size: var(--fs-h3);
font-weight: 700;
}
.seek-priority-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--sp-3);
}
.seek-priority-list li {
position: relative;
padding: 0 0 0 1.35rem;
color: var(--text-dim);
line-height: 1.45;
}
.seek-priority-list li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: .55rem;
height: .55rem;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(10,102,255,.18);
}
@media (max-width: 860px) {
.seek-home-inner {
grid-template-columns: 1fr;
gap: var(--sp-6);
align-items: start;
}
}
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: .02em;
padding: 15px 30px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
min-height: 48px;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
color: #fff;
box-shadow: var(--shadow-glow);
}
.btn--primary:hover { box-shadow: 0 12px 36px rgba(10,102,255,.5); }
.btn--secondary {
background: transparent;
border-color: rgba(217,222,230,.35);
color: var(--text);
}
.btn--secondary:hover { border-color: var(--accent); background: rgba(10,102,255,.08); }
/* ==========================================================================
Cards
========================================================================== */
.card {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-6);
transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover {
border-color: rgba(10,102,255,.45);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.icon-box {
width: 52px;
height: 52px;
border-radius: var(--radius-sm);
display: grid;
place-items: center;
background: linear-gradient(160deg, rgba(10,102,255,.18), rgba(10,102,255,.04));
border: 1px solid rgba(10,102,255,.3);
color: var(--accent);
margin-bottom: var(--sp-4);
}
.icon-box svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
/* ==========================================================================
Value pills (used in hero + about)
========================================================================== */
.value-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
}
.value-pill {
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 8px 16px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.value-pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
/* ==========================================================================
Site header / navigation
========================================================================== */
.site-header {
position: fixed;
inset-inline: 0;
top: 0;
z-index: var(--z-nav);
padding-block: var(--sp-4);
transition: background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
background: rgba(10, 15, 20, .78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--border);
padding-block: var(--sp-3);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
}
.brand {
display: flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: .03em;
font-size: 1.1rem;
}
.brand img {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(10,102,255,.6);
object-fit: cover;
}
.brand .accent-script { text-transform: none; }
.nav-links {
display: flex;
align-items: center;
gap: var(--sp-6);
font-size: var(--fs-small);
font-weight: 600;
}
.nav-links a {
position: relative;
color: var(--text-dim);
padding-block: var(--sp-2);
transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-links a[aria-current="true"] { color: var(--text); }
.nav-home-icon {
width: 1.2em;
height: 1.2em;
display: block;
color: var(--accent-text, var(--accent));
animation: nav-home-pulse 1.1s ease-in-out;
}
.nav-links a.is-home-pulse {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5em;
}
.nav-links a.is-home-pulse::after {
transform: scaleX(0);
}
@keyframes nav-home-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
35% { transform: scale(1.22); opacity: 0.88; }
65% { transform: scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.nav-home-icon { animation: none; }
}
.nav-cta { display: flex; align-items: center; gap: var(--sp-4); }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text);
align-items: center;
justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-menu {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: rgba(10,15,20,.97);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-6);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
/* visibility toggles instantly (not transitioned) so the menu becomes
focusable the moment .is-open is added — only opacity/transform fade. */
transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mobile-menu a {
font-family: var(--font-display);
text-transform: uppercase;
font-size: 1.6rem;
letter-spacing: .02em;
color: var(--text);
}
.mobile-menu .btn { margin-top: var(--sp-4); }
.mobile-menu-close {
position: absolute;
top: var(--sp-5);
right: var(--gutter);
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-raised);
color: var(--text);
display: grid;
place-items: center;
}
.mobile-menu-close svg { width: 20px; height: 20px; }
.nav-links a { white-space: nowrap; }
@media (max-width: 1100px) {
.nav-links, .nav-cta .btn--primary { display: none; }
.nav-toggle { display: inline-flex; }
}
/* ==========================================================================
Hero
========================================================================== */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
/* clip does not create a scroll container, so the mouse wheel reaches the
page immediately instead of being swallowed until the hero is clicked. */
overflow: hidden;
overflow: clip;
isolation: isolate;
}
.hero-media {
position: absolute;
inset: 0;
z-index: -3;
}
.hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* CWK_banner.PNG has Kenta on the left third and the wordmark on the
right. This default suits wide viewports where cover crops little;
see responsive.css for narrower breakpoints, which bias further left
toward Kenta as more of the width gets cropped away (the HTML hero
text already covers the wordmark's job). */
object-position: center 30%;
will-change: transform;
}
.hero-placeholder {
position: absolute;
inset: 0;
background:
radial-gradient(600px 400px at 75% 20%, rgba(10,102,255,.25), transparent 65%),
linear-gradient(160deg, #14263a, var(--c-near-black));
display: grid;
place-items: center;
color: var(--text-faint);
font-size: var(--fs-small);
text-align: center;
padding: var(--sp-6);
}
.hero-scrim {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(180deg, rgba(10,15,20,.55) 0%, rgba(10,15,20,.65) 45%, var(--c-near-black) 100%),
linear-gradient(100deg, rgba(13,27,42,.85) 10%, rgba(10,102,255,.12) 60%, transparent 100%);
}
.hero-water {
position: absolute;
inset: 0;
z-index: -1;
opacity: .5;
mix-blend-mode: screen;
pointer-events: none;
}
.hero-content {
position: relative;
padding-block: calc(var(--sp-10) + 40px) var(--sp-9);
max-width: 780px;
}
.hero-content h1 { margin-block: var(--sp-4); }
.hero-content .lead { margin-bottom: var(--sp-6); }
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-bottom: var(--sp-7);
}
.hero-values { opacity: .9; }
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--c-mist));
z-index: calc(var(--z-nav) + 1);
transition: width 80ms linear;
}
/* ==========================================================================
Videos
========================================================================== */
.videos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--sp-5);
}
.video-card { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border); }
.video-thumb {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
border: 0;
padding: 0;
cursor: pointer;
background: var(--bg);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(10,15,20,.1), rgba(10,15,20,.55));
}
.video-play svg {
width: 56px; height: 56px;
color: #fff;
filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
transition: transform var(--dur-fast) var(--ease-out);
}
.video-thumb:hover .video-play svg { transform: scale(1.08); }
.video-card iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.video-title { padding: var(--sp-4); font-size: .95rem; margin: 0; }
.video-empty {
grid-column: 1 / -1;
text-align: center;
padding: var(--sp-8) var(--sp-6);
border: 1px dashed rgba(120, 180, 255, 0.28);
border-radius: var(--radius-md);
color: var(--text-faint);
background: linear-gradient(180deg, rgba(94, 160, 255, 0.06), transparent 70%);
}
.video-empty-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--sp-4);
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(94, 160, 255, 0.12);
color: var(--accent-text, var(--accent));
}
.video-empty-icon svg { width: 24px; height: 24px; }
.video-empty-title {
display: block;
color: var(--text);
font-size: 1.05rem;
margin-bottom: var(--sp-3);
}
.video-empty p { margin: 0; max-width: 46ch; margin-inline: auto; line-height: 1.55; }
.videos-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-6);
}
.hero-note {
margin: var(--sp-4) 0 0;
max-width: 38rem;
color: var(--text-dim);
font-size: var(--fs-small);
line-height: 1.55;
padding: 10px 14px;
border-left: 3px solid rgba(10,102,255,.65);
background: rgba(10,102,255,.08);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* ==========================================================================
FAQ accordion + reading mode (pop + scroll-to-switch)
========================================================================== */
.faq-section {
position: relative;
overflow: visible;
z-index: 1;
}
.faq-glow {
pointer-events: none;
position: absolute;
inset: 10% 0 auto;
height: 55%;
background:
radial-gradient(ellipse 50% 60% at 50% 40%, rgba(10,102,255,.18), transparent 70%),
radial-gradient(ellipse 30% 40% at 80% 60%, rgba(0,71,204,.12), transparent 70%);
filter: blur(8px);
opacity: .9;
z-index: 0;
}
.faq-scrim {
position: fixed;
inset: 0;
z-index: 80;
overflow: hidden;
/* Dim only — keep brand blue visible underneath */
background: rgba(6, 12, 22, .52);
backdrop-filter: blur(4px) saturate(1.1);
-webkit-backdrop-filter: blur(4px) saturate(1.1);
opacity: 0;
pointer-events: none;
transition: opacity 380ms var(--ease-out);
}
/* Soft caustic shimmer — visible but not a takeover layer */
.faq-scrim-caustics {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
mix-blend-mode: soft-light;
opacity: .38;
transform: scale(1.05);
animation: faq-caustic-drift 22s ease-in-out infinite alternate;
}
.faq-scrim::before {
content: "";
position: absolute;
inset: -12%;
pointer-events: none;
background-image:
radial-gradient(ellipse 32% 38% at 30% 34%, rgba(255, 255, 255, .09) 0%, transparent 58%),
radial-gradient(ellipse 34% 24% at 70% 50%, rgba(91, 156, 255, .11) 0%, transparent 55%),
radial-gradient(ellipse 24% 28% at 48% 72%, rgba(255, 255, 255, .06) 0%, transparent 52%);
background-repeat: no-repeat;
mix-blend-mode: soft-light;
opacity: .45;
filter: blur(22px);
animation: faq-caustic-shift 16s ease-in-out infinite;
}
.faq-scrim::after { content: none; }
body.faq-reading .faq-scrim {
opacity: 1;
pointer-events: auto;
}
@keyframes faq-caustic-drift {
0% { transform: scale(1.04) translate3d(-0.8%, 0, 0); }
100% { transform: scale(1.08) translate3d(1%, 0.7%, 0); }
}
@keyframes faq-caustic-shift {
0%, 100% {
background-position: 0 0, 0 0, 0 0;
transform: translate3d(0, 0, 0);
}
50% {
background-position: 18px -10px, -14px 12px, 8px 10px;
transform: translate3d(0.7%, 0.8%, 0);
}
}
html.faq-reading,
body.faq-reading {
overflow: hidden !important;
overscroll-behavior: none;
}
body.faq-reading .faq-section {
z-index: 90;
position: relative;
}
body.faq-reading .site-header {
z-index: 70;
}
body.faq-reading .faq-section .section-head {
opacity: .1;
filter: saturate(.35) brightness(.7);
transition: opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
pointer-events: none;
}
body.faq-reading .site-header,
body.faq-reading .nav-toggle,
body.faq-reading footer {
opacity: .08;
filter: saturate(.4);
pointer-events: none;
transition: opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
}
/* No nested scrollport on .faq-list — scrollbar borders looked wrong.
Page scroll is locked via html/body overflow; wheel/touch handled in JS. */
.faq-section > .container { position: relative; z-index: 1; }
.faq-list {
max-width: var(--container-narrow);
display: flex;
flex-direction: column;
gap: var(--sp-3);
isolation: isolate;
padding: 12px 8px 20px;
margin: -8px -8px 0;
perspective: 1200px;
}
.faq-item {
--faq-i: 0;
position: relative;
z-index: 1;
border: 1px solid rgba(34,51,73,.95);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(19,39,58,.92), rgba(13,27,42,.88));
padding: 0;
overflow: clip;
transform-origin: center center;
transition:
border-color var(--dur-base) var(--ease-out),
box-shadow 420ms var(--ease-out),
transform 420ms var(--ease-out),
opacity 320ms var(--ease-out),
filter 320ms var(--ease-out),
background var(--dur-base) var(--ease-out),
margin 420ms var(--ease-out);
}
.faq-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--accent), transparent 85%);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
}
.faq-item:hover:not([open]) {
border-color: rgba(10,102,255,.45);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(10,102,255,.12);
}
.faq-item:hover:not([open])::before { opacity: 1; }
/* Open / reading: grow toward user, push neighbors away with margin */
.faq-item[open] {
z-index: 5;
margin-block: 22px;
border-color: rgba(10,102,255,.75);
background:
linear-gradient(145deg, rgba(24,48,72,1), rgba(10,28,52,1));
box-shadow:
0 36px 72px rgba(0,0,0,.55),
0 10px 28px rgba(10,102,255,.22),
0 0 0 1px rgba(91,156,255,.4),
0 0 56px rgba(10,102,255,.28);
transform: scale(1.08);
animation: faq-pop 560ms cubic-bezier(.16, 1.15, .3, 1) both;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.faq-item[open]::before { opacity: 1; width: 4px; }
@keyframes faq-pop {
0% {
transform: scale(.95);
box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
55% {
transform: scale(1.12);
box-shadow:
0 48px 88px rgba(0,0,0,.58),
0 0 64px rgba(10,102,255,.32);
}
100% {
transform: scale(1.08);
box-shadow:
0 36px 72px rgba(0,0,0,.55),
0 10px 28px rgba(10,102,255,.22),
0 0 0 1px rgba(91,156,255,.4),
0 0 56px rgba(10,102,255,.28);
}
}
/* Neighbors stay visible, dimmed, and shift away from the open card */
body.faq-reading .faq-item:not([open]),
.faq-list.has-open .faq-item:not([open]) {
opacity: .22;
filter: saturate(.45) brightness(.65);
z-index: 1;
box-shadow: none;
}
body.faq-reading .faq-item.is-above:not([open]) {
transform: translateY(-10px) scale(.97);
}
body.faq-reading .faq-item.is-below:not([open]) {
transform: translateY(10px) scale(.97);
}
.faq-item summary {
padding: var(--sp-4) var(--sp-5);
cursor: pointer;
font-weight: 700;
list-style: none;
display: block;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
border-radius: var(--radius-md);
}
.faq-item[open] summary { color: var(--c-white); }
.faq-q {
line-height: 1.35;
font-size: clamp(.98rem, 1.5vw, 1.08rem);
}
.faq-body {
padding: 0 var(--sp-5) var(--sp-5);
}
.faq-body p {
color: var(--text-dim);
margin: 0;
line-height: var(--lh-body);
}
.faq-body p + p { margin-top: var(--sp-3); }
@supports (interpolate-size: allow-keywords) {
.faq-section { interpolate-size: allow-keywords; }
.faq-item::details-content {
block-size: 0;
overflow: hidden;
opacity: 0;
transition:
block-size var(--dur-slow) var(--ease-out),
opacity var(--dur-base) var(--ease-out),
content-visibility var(--dur-slow) allow-discrete;
}
.faq-item[open]::details-content {
block-size: auto;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.faq-item,
.faq-item:hover,
.faq-item[open],
.faq-scrim,
.faq-scrim-caustics {
transition: none !important;
animation: none !important;
}
.faq-scrim::before,
.faq-scrim::after {
animation: none !important;
}
.faq-item[open] { transform: none; }
.faq-glow { display: none; }
body.faq-reading .faq-item.is-above:not([open]),
body.faq-reading .faq-item.is-below:not([open]) {
transform: none;
}
}
@media (hover: none) {
.faq-item[open],
.faq-item[open] .faq-body,
.faq-item[open] .faq-body p {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
}
@media (max-width: 560px) {
.faq-list {
padding: 8px 12px 16px;
margin: -4px -4px 0;
}
.faq-item summary {
padding: 14px 14px;
}
.faq-body { padding: 0 14px 14px; }
.faq-item[open] {
margin-block: 16px;
transform: scale(1.02);
}
@keyframes faq-pop {
0% { transform: scale(.97); }
55% { transform: scale(1.04); }
100% { transform: scale(1.02); }
}
}
/* ==========================================================================
Form fields + apply / ansök layout
========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.field label,
.field-label-text {
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-dim);
}
.field .req { color: var(--accent-text); }
.field .opt { font-weight: 500; color: var(--text-faint); }
.field-hint {
margin: 4px 0 0;
font-size: .75rem;
color: var(--text-faint);
line-height: 1.4;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--text);
font-family: inherit;
/* 16px: iOS zooms the page if focused inputs are smaller. */
font-size: 16px;
min-height: 48px;
}
.field select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 36px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(10,102,255,.18);
}
.apply-head { max-width: 720px; }
.apply-form {
max-width: 920px;
margin-inline: auto;
}
.apply-layout {
display: grid;
gap: var(--sp-5);
}
.apply-block {
margin: 0;
padding: var(--sp-5);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background:
linear-gradient(165deg, rgba(19,39,58,.92), rgba(10,15,20,.55));
min-width: 0;
}
.apply-block legend {
padding: 0 8px;
font-family: var(--font-display);
font-size: .95rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text);
}
.apply-block-lead {
margin: 0 0 var(--sp-4);
color: var(--text-dim);
font-size: var(--fs-small);
line-height: 1.5;
}
.apply-grid {
display: grid;
gap: var(--sp-4);
min-width: 0;
}
.apply-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.apply-grid--address {
grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.1fr);
}
.apply-span-2 { grid-column: span 2; }
.apply-span-all { grid-column: 1 / -1; }
.apply-choices {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-3);
}
.apply-choice {
position: relative;
cursor: pointer;
margin: 0;
}
.apply-choice input {
position: absolute;
opacity: 0;
inset: 0;
cursor: pointer;
}
.apply-choice span {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text);
font-weight: 600;
text-align: center;
transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}
.apply-choice em {
display: none;
}
.apply-choice input:focus-visible + span {
box-shadow: 0 0 0 3px rgba(10,102,255,.28);
}
.apply-choice input:checked + span {
border-color: var(--accent);
background: rgba(10,102,255,.12);
box-shadow: inset 0 0 0 1px rgba(10,102,255,.35);
}
.apply-process-link {
margin: 0 0 var(--sp-2);
font-size: var(--fs-small);
}
.apply-process-link a {
color: var(--accent-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.apply-process-link a:hover {
color: var(--text);
}
.apply-dropzone {
position: relative;
border: 1.5px dashed rgba(90,156,255,.45);
border-radius: var(--radius-md);
background: rgba(10,15,20,.35);
min-height: 132px;
overflow: hidden;
}
.apply-dropzone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.apply-dropzone-ui {
display: grid;
place-content: center;
gap: 4px;
text-align: center;
padding: var(--sp-6) var(--sp-4);
color: var(--text-dim);
pointer-events: none;
}
.apply-dropzone-ui strong {
color: var(--text);
font-size: .95rem;
}
.apply-dropzone-ui span { font-size: .82rem; color: var(--text-faint); }
.apply-dropzone.is-dragover {
border-color: var(--accent);
background: rgba(10,102,255,.1);
}
.apply-dropzone.has-photos .apply-dropzone-ui { display: none; }
.apply-dropzone.has-photos .apply-photo-previews {
z-index: 3;
pointer-events: none;
}
.apply-photo-previews {
display: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 12px;
position: relative;
z-index: 1;
}
.apply-photo-previews.has-photos { display: grid; }
.apply-photo-thumb {
position: relative;
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border);
pointer-events: auto;
}
.apply-photo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.apply-photo-thumb button {
position: absolute;
top: 6px;
right: 6px;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: rgba(10,15,20,.8);
color: #fff;
cursor: pointer;
font-size: 1rem;
line-height: 1;
z-index: 3;
}
.apply-consent { margin-top: var(--sp-2); }
.apply-footnote {
margin: 0;
font-size: .82rem;
line-height: 1.55;
color: var(--text-faint);
}
.apply-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-5);
}
.apply-actions .btn { min-width: 200px; }
.field-checkbox {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--fs-small);
color: var(--text-dim);
cursor: pointer;
}
.field-checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.form-hint {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: .78rem;
color: var(--text-faint);
margin: 0;
flex: 1;
min-width: 200px;
}
.form-hint svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
#nominateForm .field-error { color: #ff8080; font-size: var(--fs-small); min-height: 1.2em; margin: var(--sp-4) 0 0; }
#nominateForm.is-success .form-fields,
#nominateForm.is-success .apply-actions,
#nominateForm.is-success .field-error { display: none; }
.nominate-success {
display: none;
text-align: center;
padding: var(--sp-7) var(--sp-5);
color: var(--good, #2ecc71);
font-weight: 600;
border: 1px solid rgba(46,204,113,.28);
border-radius: var(--radius-md);
background: rgba(46,204,113,.08);
}
#nominateForm.is-success .nominate-success { display: block; }
@media (max-width: 820px) {
.apply-grid--2,
.apply-grid--address {
grid-template-columns: 1fr 1fr;
}
.apply-grid--address .apply-span-all { grid-column: 1 / -1; }
.apply-span-2 { grid-column: span 2; }
}
@media (max-width: 640px) {
.apply-block { padding: var(--sp-4); }
.apply-grid--2,
.apply-grid--address {
grid-template-columns: 1fr;
}
.apply-span-2,
.apply-span-all { grid-column: auto; }
.apply-choices { grid-template-columns: 1fr; }
.apply-photo-previews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apply-actions { flex-direction: column; align-items: stretch; }
.apply-actions .btn { width: 100%; min-width: 0; }
}
/* ==========================================================================
Before / after — clip-path wipe (position set in JS for reliability)
========================================================================== */
.before-after {
--ba-pos: 50%;
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
aspect-ratio: 16 / 10;
max-width: var(--container-narrow);
user-select: none;
touch-action: none;
cursor: ew-resize;
isolation: isolate;
box-shadow: var(--shadow-md);
}
.before-after figure { position: absolute; inset: 0; margin: 0; }
.before-after figure img, .before-after figure .placeholder-fill {
position: absolute;
inset: 0;
width: 100%; height: 100%; object-fit: cover;
pointer-events: none;
}
.before-after .placeholder-fill {
display: grid; place-items: center;
color: var(--text-faint);
font-size: var(--fs-small);
text-align: center;
padding: var(--sp-6);
}
.ba-after {
background: #101f2f;
z-index: 1;
}
.ba-before {
background: #1a2c3f;
z-index: 2;
/* Soft feather via mask (set live in JS). Fallback: hard mid split. */
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 41%, transparent 59%);
mask-image: linear-gradient(to right, #000 0%, #000 41%, transparent 59%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
will-change: mask-image, -webkit-mask-image;
}
.before-after.is-animating .ba-before {
transition: none; /* mask gradients don't interpolate cleanly; JS drives frames */
}
.before-after.is-animating .ba-handle {
transition: left 280ms cubic-bezier(.22, 1, .36, 1);
}
.ba-label,
.ba-after-label {
position: absolute;
top: var(--sp-4);
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-pill);
z-index: 2;
pointer-events: none;
backdrop-filter: blur(8px);
}
.ba-label {
left: var(--sp-4);
background: rgba(10,15,20,.72);
color: var(--c-white);
}
.ba-after-label {
right: var(--sp-4);
background: rgba(10,102,255,.88);
color: var(--c-white);
}
/* Soft glow along the wipe so the blend reads as a toning, not a cut */
.ba-handle {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
z-index: 4;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.95) 12%,
#fff 50%,
rgba(255,255,255,.95) 88%,
rgba(255,255,255,0) 100%
);
box-shadow:
0 0 0 1px rgba(10,15,20,.1),
-18px 0 28px -8px rgba(10,15,20,.35),
18px 0 28px -8px rgba(10,102,255,.22);
}
.ba-handle-knob {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--c-near-black);
background:
radial-gradient(circle at 35% 30%, #fff 0%, #f3f6fb 55%, #e7edf6 100%);
border: 2px solid rgba(255,255,255,.95);
box-shadow:
0 8px 24px rgba(10,15,20,.35),
0 0 0 6px rgba(10,102,255,.18);
transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.ba-handle-knob svg { display: block; }
.before-after.is-dragging .ba-handle-knob,
.before-after:active .ba-handle-knob {
transform: translate(-50%, -50%) scale(.94);
box-shadow:
0 4px 14px rgba(10,15,20,.4),
0 0 0 8px rgba(10,102,255,.28);
}
.before-after.is-demo .ba-handle-knob {
box-shadow:
0 8px 24px rgba(10,15,20,.35),
0 0 0 6px rgba(10,102,255,.14);
}
.before-after input[type="range"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
z-index: 5;
/* Native range = reliable drag on desktop + mobile + keyboard. */
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
background: transparent;
}
@media (hover: hover) and (pointer: fine) {
.before-after:hover .ba-handle-knob {
box-shadow:
0 10px 28px rgba(10,15,20,.4),
0 0 0 7px rgba(10,102,255,.22);
}
}
@media (prefers-reduced-motion: reduce) {
.before-after.is-animating .ba-before,
.before-after.is-animating .ba-handle,
.ba-handle-knob {
transition: none;
}
}
/* ==========================================================================
About Kenta
========================================================================== */
.about-grid {
display: grid;
grid-template-columns: minmax(220px, 340px) 1fr;
gap: var(--sp-8);
align-items: center;
}
.about-portrait {
position: relative;
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(10,102,255,.5);
box-shadow: var(--shadow-glow);
justify-self: center;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait.is-placeholder {
display: grid; place-items: center;
background: linear-gradient(160deg, #14263a, var(--c-near-black));
color: var(--text-faint);
font-size: var(--fs-small);
text-align: center;
padding: var(--sp-5);
}
.about-values { margin-top: var(--sp-5); }
.about-copy .lead + .lead { margin-top: var(--sp-4); }
/* Breakpoint overrides for .about-grid live in responsive.css, in a single
cascade, to avoid two stylesheets fighting over the same selector. */
/* ==========================================================================
How it works
========================================================================== */
.steps-rail {
position: relative;
display: grid;
gap: var(--sp-6);
}
.steps-rail::before {
content: "";
position: absolute;
left: 23px;
top: 24px;
bottom: 24px;
width: 2px;
background: var(--border);
}
.steps-rail .step-line-fill {
position: absolute;
left: 23px;
top: 24px;
width: 2px;
height: 0%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
transition: height var(--dur-slow) var(--ease-out);
}
.step {
position: relative;
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--sp-5);
align-items: start;
}
.step-index {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--bg-raised);
border: 1px solid var(--border);
display: grid;
place-items: center;
font-family: var(--font-display);
color: var(--text-faint);
z-index: 1;
transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.step.is-active .step-index {
border-color: var(--accent);
color: var(--accent);
background: rgba(10,102,255,.12);
}
.step h3 { margin-bottom: var(--sp-1); font-size: 1.05rem; }
.step p { color: var(--text-dim); font-size: var(--fs-small); margin: 0; }
/* ==========================================================================
Social
========================================================================== */
.social-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: var(--sp-4);
}
.social-card {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-5);
}
.social-card .icon-box { margin-bottom: 0; flex: none; }
.social-card strong { display: block; font-size: .95rem; }
.social-card span { font-size: var(--fs-small); color: var(--text-faint); }
/* ==========================================================================
Contact / CTA panel
========================================================================== */
.cta-panel {
position: relative;
border-radius: var(--radius-lg);
padding: var(--sp-9) var(--sp-7);
text-align: center;
overflow: hidden;
background: linear-gradient(160deg, var(--bg-raised), var(--bg-section));
border: 1px solid var(--border);
}
.cta-panel::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(500px 300px at 50% 0%, rgba(10,102,255,.22), transparent 70%);
pointer-events: none;
}
.cta-panel h2 { margin-bottom: var(--sp-3); }
.cta-panel .lead { margin-inline: auto; margin-bottom: var(--sp-6); }
.cta-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--sp-4);
position: relative;
}
.contact-field[hidden] { display: none !important; }
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
border-top: 1px solid var(--border);
padding-block: var(--sp-8) var(--sp-6);
}
.footer-top {
display: flex;
justify-content: space-between;
gap: var(--sp-7);
flex-wrap: wrap;
margin-bottom: var(--sp-7);
}
.footer-brand { max-width: 320px; }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-brand p { color: var(--text-faint); font-size: var(--fs-small); }
.footer-cols { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.footer-col h4 {
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-faint);
margin-bottom: var(--sp-3);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a { color: var(--text-dim); font-size: var(--fs-small); }
.footer-col a:hover { color: var(--accent); }
.privacy-modal {
border: none;
padding: var(--sp-5);
margin: 0;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
background: transparent;
color: var(--text);
display: grid;
place-items: center;
}
.privacy-modal:not([open]) {
display: none;
}
.privacy-modal::backdrop {
background: rgba(6, 12, 22, .72);
backdrop-filter: blur(6px) saturate(1.05);
-webkit-backdrop-filter: blur(6px) saturate(1.05);
}
.privacy-modal__panel {
display: flex;
flex-direction: column;
width: min(40rem, calc(var(--app-width, 100dvw) - 2rem));
max-height: min(80vh, 640px);
border: 1px solid rgba(91, 156, 255, .28);
border-radius: var(--radius-lg);
background:
linear-gradient(160deg, rgba(19, 39, 58, .98), rgba(10, 20, 34, .98));
box-shadow:
0 28px 64px rgba(0, 0, 0, .55),
0 0 0 1px rgba(10, 102, 255, .12),
0 0 48px rgba(10, 102, 255, .14);
overflow: hidden;
}
.privacy-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-5) var(--sp-4);
border-bottom: 1px solid var(--border);
}
.privacy-modal__head h2 {
margin: 0;
font-family: var(--font-body);
font-size: clamp(1.05rem, 2vw, 1.25rem);
font-weight: 700;
letter-spacing: .02em;
line-height: 1.3;
}
.privacy-modal__close {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: rgba(255, 255, 255, .03);
color: var(--text-dim);
display: grid;
place-items: center;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.privacy-modal__close svg {
width: 18px;
height: 18px;
}
.privacy-modal__close:hover {
border-color: rgba(10, 102, 255, .55);
color: var(--c-white);
background: rgba(10, 102, 255, .12);
}
.privacy-modal__close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.privacy-modal__body {
padding: var(--sp-5);
overflow-y: auto;
overscroll-behavior: contain;
display: grid;
gap: var(--sp-4);
}
.privacy-modal__body p,
.privacy-modal__body .lead {
margin: 0;
color: var(--text-dim);
font-size: var(--fs-small);
line-height: 1.65;
max-width: none;
}
.contact-form {
display: grid;
gap: var(--sp-4);
position: relative;
}
.contact-modal .privacy-modal__panel {
width: min(28rem, calc(var(--app-width, 100dvw) - 2rem));
}
.contact-form .btn { justify-self: start; min-width: 160px; }
.contact-form .field-error { min-height: 1.2em; margin: 0; color: #ff8080; font-size: var(--fs-small); }
.contact-modal.is-sent .contact-modal__lead,
.contact-modal.is-sent .contact-form { display: none; }
.contact-form__thanks {
display: grid;
gap: var(--sp-3);
padding: var(--sp-2) 0 var(--sp-4);
}
.contact-form__thanks[hidden] { display: none !important; }
.contact-form__thanks-title {
margin: 0;
color: var(--c-white);
font-weight: 700;
font-size: clamp(1.05rem, 2vw, 1.2rem);
}
.contact-form__thanks p {
margin: 0;
color: var(--text-dim);
font-size: var(--fs-small);
line-height: 1.65;
white-space: pre-wrap;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
font-size: var(--fs-small);
color: var(--text-faint);
}
.to-top {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
display: grid;
place-items: center;
color: var(--text-dim);
}
.to-top:hover { border-color: var(--accent); color: var(--accent); }
.to-top svg { width: 18px; height: 18px; }
/* ---------- Admin preview drag-and-drop ---------- */
.is-admin-preview {
cursor: default;
}
.is-admin-preview .btn--magnetic {
transform: none !important;
}
.is-admin-preview [data-dnd-group] [data-dnd-id],
.is-admin-preview [data-dnd-group] [data-dnd-item] {
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
outline: 1px dashed transparent;
outline-offset: 4px;
transition: outline-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}
.is-admin-preview [data-dnd-group] [data-dnd-id]:hover,
.is-admin-preview [data-dnd-group] [data-dnd-item]:hover {
outline-color: rgba(120, 180, 255, 0.55);
}
.is-admin-preview [data-dnd-group].is-dnd-active [data-dnd-id],
.is-admin-preview [data-dnd-group].is-dnd-active [data-dnd-item] {
outline-color: rgba(120, 180, 255, 0.25);
}
.is-admin-preview .is-dnd-dragging {
cursor: grabbing !important;
opacity: 0.65;
outline-color: #6eb0ff !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
z-index: 5;
position: relative;
}
html.is-dnd-pointer,
html.is-dnd-pointer * {
cursor: grabbing !important;
}
.is-admin-preview .site-header {
pointer-events: none;
}
.is-admin-preview .site-header .nav-links {
pointer-events: auto;
}
.is-admin-preview .nav-toggle,
.is-admin-preview .mobile-menu,
.is-admin-preview .intro-veil {
pointer-events: none !important;
}
.is-admin-preview .intro-veil {
display: none !important;
}
.is-admin-preview [data-dnd-locked] {
cursor: default !important;
outline: none !important;
opacity: 0.85;
}
.is-admin-preview [data-admin-panel] {
cursor: pointer;
}
.is-admin-preview [data-admin-panel]:hover {
outline: 1px dashed rgba(120, 180, 255, 0.35);
outline-offset: -2px;
}