/* =========================
Fonts (remember to include in ):
========================= */
/* =========================
Design System (data-theme controlled)
========================= */
:root{
/* Core tokens */
--radius: 14px;
--shadow-1: 0 6px 18px rgba(20,20,45,0.06);
/* Spacing scale */
--s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
--s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
/* Typography */
--container: 1120px;
--h1: clamp(2.4rem, 5vw, 3.4rem);
--h2: clamp(1.5rem, 2.8vw, 2rem);
--round: 999px;
}
/* Light (default) */
:root,
html[data-theme="light"]{
--bg: #ffffff;
--text: #0b0b10;
--muted: #5a5f72;
--surface: #f7f7fb;
--surface-2:#fff;
--border: #e6e6ef;
--accent: #6b5bff; /* vivid indigo */
--accent-ink: #ffffff;
--shadow-1: 0 6px 18px rgba(20,20,45,0.06);
color-scheme: light;
}
/* Dark (opt-in) */
html[data-theme="dark"]{
--bg: #0b0b10;
--text: #e9ecf1;
--muted: #a6acc2;
--surface: #14161c;
--surface-2:#0f1117;
--border: #272a35;
--accent: #8b83ff;
--accent-ink: #0b0b10;
--shadow-1: 0 10px 28px rgba(0,0,0,0.35);
color-scheme: dark;
}
/* =========================
Base
========================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
line-height:1.6;
color: var(--text);
background: var(--bg);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis-weight: none;
font-synthesis-style: none;
font-weight: 500;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }
code, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
/* Layout helpers */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }
.section{
padding: clamp(56px, 9vw, 120px) 0;
border-top: 1px solid var(--border);
}
.section > h2{
font: 700 var(--h2)/1.15 "Space Grotesk", system-ui, sans-serif;
letter-spacing: -.01em;
margin: 0 0 var(--s-5);
}
.muted{ color: var(--muted); }
section[id]{ scroll-margin-top: 84px; }
/* =========================
Icons
========================= */
.mi {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 1.25rem;
line-height: 1;
display: inline-flex;
align-items: center;
vertical-align: middle;
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}
.mi--18 { font-size: 1.125rem; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20; }
.mi--24 { font-size: 1.5rem; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24; }
.mi--32 { font-size: 2rem; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 40; }
.mi--fill { font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; }
.with-icon {
display: inline-flex;
align-items: center;
gap: .5rem;
}
/* =========================
Header / Nav
========================= */
.header.sticky{
position: sticky; top:0; z-index: 50;
backdrop-filter: saturate(140%) blur(10px);
background: color-mix(in srgb, var(--bg) 82%, transparent);
border-bottom: 1px solid var(--border);
}
.header-inner{
height: 64px;
display:flex; align-items:center; justify-content:space-between;
}
.brand{
font: 700 1.05rem/1 "Space Grotesk", system-ui, sans-serif;
letter-spacing: .2px;
}
.nav{ display:flex; gap:.35rem; }
.nav a{
padding:.45rem .7rem; border-radius: 8px; color: var(--text);
display: inline-flex; align-items: center; gap: .35rem;
}
.nav a:hover{ background: var(--surface); }
.nav a.active{ position: relative; }
.nav a.active::after{
content:""; position:absolute; left:.5rem; right:.5rem; bottom:-8px;
height:2px; background: var(--accent);
border-radius: 2px;
}
/* =========================
Buttons
========================= */
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:.5rem; padding: .7rem 1.1rem;
border:1px solid var(--border);
border-radius: var(--round);
background: var(--surface-2);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
font-weight: 700;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none; }
.btn-primary{
background: var(--accent);
color: var(--accent-ink);
border-color: transparent;
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* =========================
Grid & Cards
========================= */
.grid{ display:grid; gap: var(--s-4); }
.grid-cards{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card{
background: var(--surface-2);
border:1px solid var(--border);
border-radius: 16px;
padding: clamp(16px, 2vw, 22px);
box-shadow: var(--shadow-1);
display:flex; flex-direction:column; gap:.6rem;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1);
}
.card:hover{
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,.10);
}
.card-title{
margin:.1rem 0 .25rem;
font-weight: 700;
font-family: "Space Grotesk", system-ui, sans-serif;
letter-spacing: -.01em;
}
.card-desc{ margin:0; color: var(--muted); }
.thumb{ aspect-ratio: 16/9; overflow:hidden; border-radius: 10px; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
/* Services / Books grids */
.grid-services{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.s-card .card-title{ font-weight:700; }
.s-card .card-desc{ color:var(--muted); }
.grid-books{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.b-card .card-title{ font-weight:700; }
.b-card .card-desc{ color:var(--muted); }
/* =========================
Hero & About
========================= */
.hero{ padding: var(--s-8) 0 var(--s-7); }
.hero-grid{
display:grid; gap: var(--s-6);
grid-template-columns: 1.1fr .9fr; align-items:center;
}
.hero-kicker{ font-weight:600; color: var(--muted); letter-spacing:.3px; margin-bottom: var(--s-2); }
.hero-title{
font: 700 var(--h1)/1.05 "Space Grotesk", system-ui, sans-serif;
letter-spacing: -.02em;
margin: 0 0 var(--s-3);
}
.hero-sub{ max-width: 60ch; color: var(--muted); margin: 0 0 var(--s-5); }
.hero-actions{ display:flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-art{ margin:0; }
.hero-art img{
width:100%; height:auto; border-radius: 14px; border:1px solid var(--border);
}
.hero-fallback{
height: 280px; border-radius: 14px;
background: linear-gradient(120deg, #e9e8ff, #fff0f6);
border:1px solid var(--border);
}
.about-grid{ display:grid; gap: var(--s-5); grid-template-columns: 2fr 1fr; align-items:start; }
.about-facts{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.about-facts li{
border:1px solid var(--border); border-radius: var(--radius);
padding:.6rem .8rem; background: var(--surface);
}
/* =========================
Skeleton / Reveal
========================= */
.skeleton{
height: 140px;
background: linear-gradient(90deg, var(--surface) 25%, color-mix(in srgb, var(--surface) 80%, #fff) 37%, var(--surface) 63%);
background-size: 200% 100%;
animation: shimmer 1.2s linear infinite;
border-radius: var(--radius);
border:1px solid var(--border);
}
@keyframes shimmer{
0%{ background-position: 200% 0; }
100%{ background-position: -200% 0; }
}
/* Contact / booking layout */
.contact-grid{
display:grid; gap: var(--s-5);
grid-template-columns: 1.2fr 0.8fr;
align-items: start;
}
.booking-iframe{
width: 100%;
min-height: 760px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface-2);
}
.contact-form label{ display:grid; gap:.35rem; margin-bottom:.75rem; }
.contact-form input, .contact-form textarea{
width:100%;
padding: .6rem .75rem;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-2);
color: var(--text);
}
.notice.success{
padding: .9rem 1rem;
border:1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.small{ font-size:.9rem; }
.link{ color: var(--accent); }
/* Reveal (base) */
.reveal{
--reveal-translate: 18px;
--reveal-dur: .65s;
--reveal-delay: 0ms;
opacity:0;
transform: translateY(var(--reveal-translate));
transition:
opacity var(--reveal-dur) cubic-bezier(.2,.7,.2,1) var(--reveal-delay),
transform var(--reveal-dur) cubic-bezier(.2,.7,.2,1) var(--reveal-delay);
}
.is-visible{ opacity:1; transform: none; }
/* Stagger helper */
.reveal-stagger > *{
opacity: 0;
transform: translateY(18px);
transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 70ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 140ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 210ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 280ms; }
/* =========================
Footer
========================= */
.footer{ padding: var(--s-6) 0 var(--s-7); color: var(--muted); }
/* =========================
Modal
========================= */
#modal{ position: relative; z-index: 60; }
.modal-backdrop{
position: fixed; inset: 0; background: color-mix(in srgb, #000 50%, transparent);
display:grid; place-items:center; padding: var(--s-6);
}
.modal{
width:min(820px, 100%); background: var(--surface-2);
border:1px solid var(--border); border-radius: 16px;
box-shadow: 0 30px 60px rgba(0,0,0,.25);
outline:none; position: relative;
}
.modal-body{ padding: var(--s-5); }
.modal-hero{ margin:0; border-bottom:1px solid var(--border); }
.modal-hero img{ border-top-left-radius: 16px; border-top-right-radius: 16px; }
.modal-title{ margin: .8rem 0 .4rem; font-weight: 800; font-size: 1.3rem; font-family: "Space Grotesk", system-ui, sans-serif; }
.modal-desc{ color: var(--muted); }
.modal-close{
position:absolute; top:.7rem; right:.7rem;
width:36px; height:36px; border-radius: var(--round);
display:grid; place-items:center;
border:1px solid var(--border);
background: var(--surface-2);
cursor:pointer;
}
body.no-scroll{ overflow:hidden; }
/* =========================
Responsive
========================= */
@media (max-width: 980px){
.contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
.hero-grid{ grid-template-columns: 1fr; }
.about-grid{ grid-template-columns: 1fr; }
}