/* ========================================================================== JAIN PUBLIC SCHOOL KORBA — DESIGN SYSTEM -------------------------------------------------------------------------- Contents 01 Design tokens (colour, type, space, radius, shadow, motion) 02 Light-only theme 03 Reset & base 04 Typography 05 Layout primitives 06 Buttons 07 Scroll progress, top bar, header & navigation 08 Hero 09 Page hero (inner pages) 10 Cards, features, stats 11 Split, quote, prose 12 Tables, accordion, jump list 13 Gallery & lightbox 14 Testimonials, marquee, media embeds 15 Contact & forms 16 CTA band, footer, back-to-top 17 Animation utilities 18 Responsive 19 Print & reduced motion CUSTOMISING Colour -> section 01, the --brand-* / --accent-* ramps. Every component reads the semantic aliases (--surface, --text, --link ...), so re-pointing a ramp restyles the whole site. Theme -> light-only tokens in section 01. Fonts -> --font-display / --font-body in section 01, plus the Google Fonts in each page . Spacing -> --space-* is a strict 8px scale. Use the steps rather than arbitrary values and the vertical rhythm stays correct. ========================================================================== */ /* ========================================================================== 01 DESIGN TOKENS ========================================================================== */ :root { /* --- brand ramp: JGI navy -------------------------------------------- */ --brand-50: #eef2f9; --brand-100: #d6deee; --brand-200: #adbcdc; --brand-300: #7b90c0; --brand-400: #4f66a0; --brand-500: #2d4278; --brand-600: #1f4970; /* legacy Elementor blue */ --brand-700: #1c2953; /* primary brand navy */ --brand-800: #16204a; --brand-900: #0d1533; --brand-950: #070c1f; /* --- accent ramp: JGI gold ------------------------------------------- */ --accent-50: #fff9e6; --accent-100: #fff1c2; --accent-200: #ffe58f; --accent-300: #ffd968; --accent-400: #ffc20e; /* primary brand gold */ --accent-500: #e0a800; --accent-600: #b88700; --accent-700: #977d06; /* legacy deep gold */ --accent-800: #6f5c04; /* --- neutral ramp ----------------------------------------------------- */ --grey-0: #ffffff; --grey-25: #fbfcfe; --grey-50: #f5f8fb; --grey-100: #eef2f7; --grey-200: #e3e8ef; --grey-300: #cbd3e0; --grey-400: #9aa5b8; --grey-500: #6b7280; --grey-600: #4b5563; --grey-700: #374151; --grey-800: #23272f; --grey-900: #14171d; /* --- semantic aliases (fixed light theme) ------------------------------ */ --surface: var(--grey-0); --surface-sunk: var(--grey-50); --surface-raise: var(--grey-0); --border: var(--grey-200); --border-strong: var(--grey-300); --text: var(--grey-800); --text-soft: var(--grey-600); --text-mute: var(--grey-500); --text-head: var(--brand-700); --text-on-dark: #ffffff; --text-on-dark-soft: #c6d2e8; --link: var(--brand-600); --link-hover: var(--brand-700); /* header background, swapped for a translucent blur once scrolled */ --header-bg: var(--surface); /* --- type -------------------------------------------------------------- */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: clamp(1.05rem, 1rem + 0.25vw, 1.15rem); --text-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); --text-2xl: clamp(1.45rem, 1.3rem + 0.75vw, 1.8rem); --text-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.4rem); --text-4xl: clamp(2.1rem, 1.7rem + 2vw, 3.2rem); --text-5xl: clamp(2.5rem, 1.8rem + 3.4vw, 4.4rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.75; /* --- spacing: strict 8px scale ------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 7rem; /* 112px */ /* section rhythm: fluid, but anchored to two steps of the scale */ --section-y: clamp(var(--space-8), 4vw + 1rem, var(--space-16)); /* --- radius -------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px; /* --- elevation ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(13, 21, 51, .06); --shadow-sm: 0 1px 3px rgba(13, 21, 51, .08), 0 1px 2px rgba(13, 21, 51, .04); --shadow: 0 4px 12px rgba(13, 21, 51, .08), 0 2px 4px rgba(13, 21, 51, .04); --shadow-md: 0 12px 24px rgba(13, 21, 51, .10), 0 4px 8px rgba(13, 21, 51, .05); --shadow-lg: 0 24px 48px rgba(13, 21, 51, .14), 0 8px 16px rgba(13, 21, 51, .06); --shadow-glow: 0 8px 28px rgba(255, 194, 14, .35); /* --- motion -------------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-both: cubic-bezier(.65, 0, .35, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: .18s; --dur: .3s; --dur-slow: .6s; /* --- layout -------------------------------------------------------------- */ --wrap: 100%; --wrap-narrow: 880px; --gutter: clamp(16px, 2.6vw, 56px); --header-h: 76px; --topbar-h: 40px; color-scheme: light only; } /* ========================================================================== 03 RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-5)); } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-soft); background: var(--surface); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } img, svg, video, iframe { max-width: 100%; } img, video { height: auto; display: block; } figure { margin: 0; } table { border-collapse: collapse; } button { font: inherit; color: inherit; } ul, ol { padding-left: 1.25em; } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background: var(--accent-400); color: var(--brand-900); } /* skip link — the first thing a keyboard user reaches */ .skip-link { position: fixed; left: 50%; top: 0; z-index: 300; transform: translate(-50%, -140%); padding: var(--space-3) var(--space-5); background: var(--brand-700); color: #fff; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; transition: transform var(--dur) var(--ease-back); } .skip-link:focus { transform: translate(-50%, 0); color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 04 TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-head); font-weight: 700; line-height: var(--leading-snug); margin: 0 0 var(--space-3); text-wrap: balance; } h1 { font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: -.02em; } h2 { font-size: var(--text-4xl); letter-spacing: -.015em; } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } strong, b { color: var(--text); font-weight: 600; } .lead { font-size: var(--text-lg); line-height: 1.7; color: var(--text-soft); } /* uppercase kicker above a heading, with a short leading rule */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-700); margin: 0 0 var(--space-3); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: var(--radius-full); } .eyebrow--gold { color: var(--accent-400); } .rule { width: 64px; height: 4px; border: 0; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent-400), var(--accent-700)); margin: 0 auto var(--space-5); } .rule--left { margin-inline: 0; } /* a word inside a heading, highlighted with a soft gold swash */ .mark { position: relative; white-space: nowrap; isolation: isolate; } .mark::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .04em; height: .32em; z-index: -1; background: var(--accent-400); opacity: .38; border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: mark-in 1s var(--ease-out) .6s forwards; } @keyframes mark-in { to { transform: scaleX(1); } } /* ========================================================================== 05 LAYOUT PRIMITIVES ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* The narrow variant no longer squeezes the container. Prose is capped at the text level instead, so paragraphs stay readable while grids, tables, galleries and media inside the same block still use the full width. */ .wrap--narrow { max-width: var(--wrap); } .wrap--narrow .prose > p, .wrap--narrow .prose > ul, .wrap--narrow .prose > ol, .wrap--narrow .prose > blockquote, .wrap--narrow .prose > .lead { max-width: 92ch; } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(var(--space-7), 3vw, var(--space-10)); } .section--sunk { background: var(--surface-sunk); } /* extra breathing room above a section that opens a page */ .section--pad-top { padding-top: clamp(var(--space-10), 6vw, var(--space-12)); } /* dark section: everything inside flips to the on-dark palette */ .section--dark { background: var(--brand-900); color: var(--text-on-dark-soft); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5, .section--dark h6 { color: var(--text-on-dark); } .section--dark .eyebrow { color: var(--accent-400); } .section--dark .section-head p { color: var(--text-on-dark-soft); } .section--dark a { color: var(--accent-300); } .section--dark a:hover { color: var(--accent-400); } .section-head { max-width: 720px; margin: 0 auto var(--space-8); text-align: center; } .section-head .eyebrow { justify-content: center; } .section-head p { color: var(--text-mute); margin-bottom: 0; } .section-head--left { margin-inline: 0; text-align: left; } .section-head--left .rule { margin-inline: 0; } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* decorative soft blobs behind a section; purely ornamental */ .blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; } .blob--gold { background: var(--accent-200); } .blob--navy { background: var(--brand-200); } /* placement variants — decorative only, never carrying content */ .blob--top-right { width: 340px; height: 340px; top: -60px; right: -80px; } .blob--bottom-left { width: 300px; height: 300px; bottom: -80px; left: -70px; } .section > .wrap { position: relative; z-index: 1; } /* utilities */ .text-center { text-align: center; } .text-left { text-align: left; } .mt-0 { margin-top: 0; } .mt-6 { margin-top: var(--space-6); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .btn-row--center { justify-content: center; } /* ========================================================================== 06 BUTTONS Every button shares the same geometry; only the skin changes. The sheen sweep on hover is a pseudo-element so it costs nothing but a transform. ========================================================================== */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); min-height: 48px; /* touch target */ border: 2px solid transparent; border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; letter-spacing: .01em; text-align: center; cursor: pointer; transition: transform var(--dur) var(--ease-back), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out); } .btn:hover { transform: translateY(-3px); } .btn:hover::before { transform: translateX(120%); } .btn:active { transform: translateY(-1px); } .btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; } .btn--primary { background: var(--accent-400); color: var(--brand-800); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--accent-300); color: var(--brand-800); box-shadow: var(--shadow-glow); } .btn--solid { background: var(--brand-700); color: #fff; box-shadow: var(--shadow-sm); } .btn--solid:hover { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-md); } .btn--ghost { border-color: currentColor; color: var(--text-head); background: transparent; } .btn--ghost:hover { background: var(--text-head); border-color: var(--text-head); color: var(--surface); } .btn--on-dark { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; } .btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--brand-700); } .btn--sm { padding: var(--space-2) var(--space-4); min-height: 40px; font-size: var(--text-xs); } .btn--block { width: 100%; } /* ========================================================================== 07 SCROLL PROGRESS, TOP BAR, HEADER & NAVIGATION ========================================================================== */ /* --- reading progress bar pinned above the header --------------------- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3px; background: linear-gradient(90deg, var(--accent-400), var(--accent-600)); transform: scaleX(0); transform-origin: left; will-change: transform; } /* --- utility bar above the header -------------------------------------- */ .topbar { background: var(--brand-900); color: var(--text-on-dark-soft); font-size: var(--text-sm); line-height: 1.4; } .topbar__inner { min-height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-2); } .topbar__list { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .topbar a { color: #dbe3f0; display: inline-flex; align-items: center; gap: var(--space-2); } .topbar a:hover { color: var(--accent-400); } .topbar svg { width: 14px; height: 14px; fill: var(--accent-400); flex: none; } .topbar__social { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .topbar__social a { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-back); } .topbar__social a:hover { background: var(--accent-400); transform: translateY(-2px) scale(1.06); } .topbar__social a:hover svg { fill: var(--brand-800); } .topbar__social svg { width: 13px; height: 13px; fill: #fff; } .topbar__social--stack { margin-top: var(--space-4); } /* --- sticky header ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid transparent; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } /* once scrolled the header shrinks, frosts and gains a hairline */ .site-header.is-stuck { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .site-header__inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); transition: min-height var(--dur) var(--ease-out); } .site-header.is-stuck .site-header__inner { min-height: 62px; } .brand { display: inline-flex; align-items: center; flex: none; } .brand img { max-height: 54px; width: auto; transition: max-height var(--dur) var(--ease-out); } .site-header.is-stuck .brand img { max-height: 44px; } /* --- desktop navigation --------------------------------------------------- */ .nav { display: flex; align-items: center; gap: var(--space-1); } .nav > ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .nav a { display: block; padding: var(--space-2) var(--space-3); color: var(--text-head); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-xs); white-space: nowrap; } /* animated underline that wipes in from the left */ .nav > ul > li > a { position: relative; } .nav > ul > li > a::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px; height: 2px; border-radius: 2px; background: var(--accent-400); transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out); } .nav > ul > li > a:hover::after, .nav > ul > li.is-current > a::after { transform: scaleX(1); transform-origin: left; } .nav li.is-current > a { color: var(--link); font-weight: 700; } /* --- dropdowns ------------------------------------------------------------- */ .nav .has-sub { position: relative; } /* The caret is a ::before because ::after is the animated underline. Flex ordering puts it after the label anyway. */ .nav .has-sub > a { display: inline-flex; align-items: center; } .nav .has-sub > a::before { content: ""; order: 1; flex: none; width: .38em; height: .38em; margin-left: .45em; margin-top: -.15em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform var(--dur) var(--ease-out); } .nav .sub { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; min-width: 260px; padding: var(--space-2); list-style: none; margin: 0; background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: top left; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur); } .nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nav .sub a { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-soft); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); } .nav .sub a:hover { background: var(--surface-sunk); color: var(--text-head); padding-left: var(--space-4); } .header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; } /* --- theme toggle ---------------------------------------------------------- */ /* --- hamburger ------------------------------------------------------------- */ .nav-toggle { display: none; flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span { position: relative; display: block; width: 20px; height: 2px; background: var(--text-head); border-radius: 2px; transition: background var(--dur-fast) var(--ease-out); } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text-head); border-radius: 2px; transition: transform var(--dur) var(--ease-back), top var(--dur) var(--ease-out); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } /* --- mobile drawer scrim ---------------------------------------------------- */ .nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(7, 12, 31, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility var(--dur); } body.nav-open .nav-scrim { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } /* ========================================================================== 08 HERO ========================================================================== */ .hero { position: relative; isolation: isolate; color: #fff; min-height: min(92vh, 860px); display: grid; align-items: center; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -3; } .hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; /* parallax target */ } /* readability scrim over the photograph */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(105deg, rgba(7, 12, 31, .92) 0%, rgba(13, 21, 51, .78) 45%, rgba(28, 41, 83, .45) 100%); } /* slow drifting gradient wash on top of the scrim */ .hero__glow { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(38% 42% at 18% 28%, rgba(255, 194, 14, .20), transparent 70%), radial-gradient(34% 38% at 78% 72%, rgba(79, 102, 160, .30), transparent 70%); animation: hero-drift 18s var(--ease-both) infinite alternate; pointer-events: none; } @keyframes hero-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } .hero__inner { padding-block: clamp(var(--space-12), 12vw, var(--space-16)); } /* Capping .hero__inner itself would centre it, because it is also a .wrap and inherits margin-inline: auto. Cap the children so the copy stays on the same left edge as the logo above it. */ .hero__inner > * { max-width: 800px; } .hero h1 { color: #fff; margin-bottom: var(--space-4); } .hero .eyebrow { color: var(--accent-400); } .hero__sub { font-size: var(--text-lg); color: #dbe4f2; max-width: 56ch; margin-bottom: var(--space-7); } /* typewriter: a fixed-width slot so the line never reflows as it types */ .type-line { display: inline-block; min-height: 1.1em; } .type-cursor { display: inline-block; width: 3px; height: .92em; margin-left: .06em; vertical-align: -.08em; background: var(--accent-400); animation: caret 1s steps(2) infinite; } @keyframes caret { 50% { opacity: 0; } } /* scroll hint at the foot of the hero */ .hero__scroll { position: absolute; left: 50%; bottom: var(--space-6); z-index: 2; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: #cbd6ea; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; } .hero__scroll span { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.45); border-radius: var(--radius-full); position: relative; } .hero__scroll span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; background: var(--accent-400); border-radius: 2px; animation: scroll-hint 1.8s var(--ease-both) infinite; } @keyframes scroll-hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* ========================================================================== 09 PAGE HERO (inner pages) ========================================================================== */ .page-hero { position: relative; isolation: isolate; color: #fff; background: var(--brand-800); overflow: hidden; } .page-hero__media { position: absolute; inset: 0; z-index: -2; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(13, 21, 51, .93), rgba(31, 73, 112, .70)); } .page-hero__inner { padding-block: clamp(var(--space-8), 6vw, var(--space-12)); } .page-hero h1 { color: #fff; font-size: var(--text-4xl); margin-bottom: var(--space-2); } .page-hero__sub { color: #d6e0f0; max-width: 60ch; margin: var(--space-3) 0 0; } .breadcrumb { font-size: var(--text-sm); color: #b9c6dc; margin: 0; } .breadcrumb a { color: #e3ebf7; } .breadcrumb a:hover { color: var(--accent-400); } .breadcrumb span { opacity: .55; margin-inline: var(--space-2); } .breadcrumb__current { opacity: 1; margin: 0; } /* ========================================================================== 10 CARDS, FEATURES, STATS ========================================================================== */ .card { position: relative; overflow: hidden; background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* gold wash that fades in behind the content on hover */ .card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--accent-50), transparent 60%); opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card:hover::before { opacity: 1; } .card > * { position: relative; } .card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); } .card p { font-size: var(--text-sm); color: var(--text-mute); margin-bottom: 0; } .card__icon { width: 60px; height: 60px; margin-bottom: var(--space-4); display: grid; place-items: center; background: var(--accent-100); border-radius: var(--radius-sm); transition: transform var(--dur) var(--ease-back), background var(--dur) var(--ease-out); } .card:hover .card__icon { transform: translateY(-2px) rotate(-6deg) scale(1.08); background: var(--accent-200); } .card__icon img { width: 34px; height: 34px; object-fit: contain; } .card__icon svg { width: 26px; height: 26px; fill: var(--accent-700); } /* image + caption card */ .feature { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .feature__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-sunk); } .feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .feature:hover .feature__img img { transform: scale(1.08); } .feature__body { padding: var(--space-5); } .feature__body h3, .feature__body h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); } .feature__body p { font-size: var(--text-sm); color: var(--text-mute); margin-bottom: 0; } /* stat strip */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6); } .stat { text-align: center; } .stat__num { display: block; font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; color: var(--accent-400); line-height: 1.1; font-variant-numeric: tabular-nums; } .stat__label { font-size: var(--text-sm); color: var(--text-on-dark-soft); } /* ========================================================================== 11 SPLIT, QUOTE, PROSE ========================================================================== */ .split { display: grid; gap: clamp(var(--space-6), 4vw, var(--space-10)); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-text { grid-template-columns: 1.1fr 1fr; } } .split__media { position: relative; } .split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* thin gold frame offset behind the image */ .split__media::before { content: ""; position: absolute; inset: var(--space-5) calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5); border: 2px solid var(--accent-400); border-radius: var(--radius-lg); z-index: -1; opacity: .5; } .split--reverse .split__media { order: 2; } .quote-card { background: var(--surface-raise); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(var(--space-5), 2vw + 1rem, var(--space-8)); border-top: 5px solid var(--accent-400); } .quote-card blockquote { margin: 0 0 var(--space-5); color: var(--text-soft); } .quote-card blockquote p:first-child::before { content: "\201C"; color: var(--accent-400); font-family: var(--font-display); font-size: 2.6rem; line-height: 0; vertical-align: -.35em; margin-right: .08em; } .quote-card cite { display: block; font-style: normal; } .quote-card cite b { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-head); } .quote-card cite span { font-size: var(--text-sm); color: var(--text-mute); } .portrait { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; } /* --- prose: the body of a converted content page ------------------------- */ .prose { font-size: var(--text-base); } .prose > * + * { margin-top: var(--space-4); } .prose h2 { margin-top: var(--space-10); } .prose h3 { margin-top: var(--space-7); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } /* Now the container runs full width, an inline illustration would stretch the whole viewport. Cap it near the reading measure and centre it. */ .prose img { border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-inline: auto; } .prose > img, .prose > p > img { max-width: min(100%, 860px); height: auto; display: block; } .prose figure img { width: 100%; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: var(--space-2); } .prose li::marker { color: var(--accent-700); } .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose blockquote { margin: var(--space-6) 0; padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: 4px solid var(--accent-400); color: var(--text-soft); font-size: var(--text-lg); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; } .prose [id] { scroll-margin-top: calc(var(--header-h) + var(--space-6)); } .prose .grid, .prose .gallery-grid, .prose .video-embed, .prose .table-wrap { margin-top: var(--space-7); } .prose .card p, .prose .feature__body p { margin-bottom: 0; } .prose--intro { margin-bottom: var(--space-7); } /* recovered "Name / Role" pairs */ .prose .byline { margin-top: var(--space-2); } .prose .byline b { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-head); } .prose .byline span { display: block; font-size: var(--text-sm); color: var(--text-mute); } /* tick list */ .checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); } .checklist li { position: relative; padding-left: var(--space-8); } .checklist li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23977d06' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .85rem no-repeat; } /* ========================================================================== 12 TABLES, ACCORDION, JUMP LIST ========================================================================== */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .table-wrap table { width: 100%; min-width: 620px; font-size: var(--text-sm); background: var(--surface-raise); } .table-wrap th, .table-wrap td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .table-wrap thead th { position: sticky; top: 0; background: var(--brand-700); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; border-bottom: 0; } .table-wrap tbody tr { transition: background var(--dur-fast) var(--ease-out); } .table-wrap tbody tr:nth-child(even) { background: var(--surface-sunk); } .table-wrap tbody tr:last-child td { border-bottom: 0; } .table-wrap tbody tr:hover { background: var(--accent-50); } /* --- accordion ------------------------------------------------------------ */ .accordion { display: grid; gap: var(--space-3); } .accordion details { background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); overflow: hidden; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .accordion details[open] { border-color: var(--border-strong); box-shadow: var(--shadow); } .accordion summary { list-style: none; cursor: pointer; position: relative; padding: var(--space-4) var(--space-10) var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--text-head); transition: background var(--dur-fast) var(--ease-out); } .accordion summary::-webkit-details-marker { display: none; } .accordion summary:hover { background: var(--surface-sunk); } /* plus/minus built from two bars */ .accordion summary::after, .accordion summary::before { content: ""; position: absolute; right: var(--space-5); top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--accent-700); border-radius: 2px; transition: transform var(--dur) var(--ease-back); } .accordion summary::before { transform: rotate(90deg); } .accordion details[open] summary::before { transform: rotate(0); } /* the body slides open; JS sets --h to the measured height */ .accordion__body { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-base); animation: acc-open var(--dur) var(--ease-out); } @keyframes acc-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .accordion__body > *:first-child { margin-top: 0; } .accordion__body .table-wrap { margin-top: var(--space-2); } /* --- in-page jump links --------------------------------------------------- */ .jump-list { margin: 0 0 var(--space-7); } .jump-list ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .jump-list a { display: block; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-raise); color: var(--text-soft); font-size: var(--text-xs); font-weight: 600; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-back); } .jump-list a:hover, .jump-list a:focus-visible { background: var(--brand-700); border-color: var(--brand-700); color: #fff; transform: translateY(-2px); } /* ========================================================================== 13 GALLERY & LIGHTBOX ========================================================================== */ .gallery-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-7); } .gallery-filters button { padding: var(--space-2) var(--space-5); min-height: 42px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-raise); color: var(--text-soft); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-back); } .gallery-filters button:hover { border-color: var(--accent-400); color: var(--text-head); transform: translateY(-2px); } .gallery-filters button[aria-pressed="true"] { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); } .gallery-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--surface-sunk); box-shadow: var(--shadow-xs); cursor: zoom-in; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .gallery-grid figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .gallery-grid figure:hover img { transform: scale(1.09); } .gallery-grid figcaption { position: absolute; inset: auto 0 0 0; padding: var(--space-7) var(--space-4) var(--space-3); font-size: var(--text-sm); color: #fff; background: linear-gradient(transparent, rgba(7, 12, 31, .88)); opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .gallery-grid figure:hover figcaption { opacity: 1; transform: none; } .gallery-grid figure[hidden] { display: none; } /* --- lightbox -------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5, 9, 22, .95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: var(--space-10) var(--space-4); } .lightbox.is-open { display: flex; animation: fade-in var(--dur) var(--ease-out); } .lightbox img { max-width: min(1100px, 94vw); max-height: 84vh; width: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); animation: zoom-in var(--dur) var(--ease-out); } @keyframes zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .lightbox__cap { position: absolute; left: 0; right: 0; bottom: var(--space-4); text-align: center; color: #dbe4f2; font-size: var(--text-sm); padding-inline: var(--space-4); } .lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-back); } .lightbox__btn:hover { background: var(--accent-400); color: var(--brand-800); } .lightbox__prev { left: var(--space-5); } .lightbox__next { right: var(--space-5); } .lightbox__prev:hover { transform: translateY(-50%) translateX(-3px); } .lightbox__next:hover { transform: translateY(-50%) translateX(3px); } .lightbox__close { top: var(--space-4); right: var(--space-5); transform: none; width: 44px; height: 44px; } .lightbox__close:hover { transform: rotate(90deg); } /* ========================================================================== 14 TESTIMONIALS, MARQUEE, MEDIA EMBEDS ========================================================================== */ .tslider { position: relative; max-width: 860px; margin-inline: auto; } .tslider__viewport { overflow: hidden; } .tslider__track { list-style: none; margin: 0; padding: 0; display: flex; transition: transform var(--dur-slow) var(--ease-out); will-change: transform; } .tslider__slide { flex: 0 0 100%; min-width: 0; padding-inline: var(--space-1); } .tcard { background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(var(--space-5), 2vw + 1rem, var(--space-8)); text-align: center; } .tcard__quote { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.55; color: var(--text-head); margin: 0 0 var(--space-5); } .tcard__quote::before { content: "\201C"; color: var(--accent-400); } .tcard__quote::after { content: "\201D"; color: var(--accent-400); } .tcard cite { display: block; font-style: normal; } .tcard cite b { display: block; color: var(--text-head); font-size: var(--text-base); } .tcard cite span { font-size: var(--text-sm); color: var(--text-mute); } .tslider__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); } .tslider__btn { width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-raise); cursor: pointer; display: grid; place-items: center; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-back); } .tslider__btn:hover { background: var(--brand-700); border-color: var(--brand-700); transform: translateY(-2px); } .tslider__btn svg { width: 15px; height: 15px; fill: var(--text-head); } .tslider__btn:hover svg { fill: #fff; } .tslider__prev:hover { transform: translateY(-2px) translateX(-3px); } .tslider__next:hover { transform: translateY(-2px) translateX(3px); } .tslider__dots { display: flex; gap: var(--space-2); } .tslider__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--border-strong); cursor: pointer; transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .tslider__dots button[aria-current="true"] { width: 26px; background: var(--accent-400); } /* logo marquee */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; gap: var(--space-10); width: max-content; animation: marquee 38s linear infinite; } .marquee img { height: 52px; width: auto; object-fit: contain; opacity: .6; filter: grayscale(1); transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); } .marquee img:hover { opacity: 1; filter: none; } @keyframes marquee { to { transform: translateX(-50%); } } /* embeds */ .video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); line-height: 0; border: 1px solid var(--border); } .map-embed iframe { width: 100%; height: 440px; border: 0; } /* ========================================================================== 15 CONTACT & FORMS ========================================================================== */ .contact-grid { display: grid; gap: clamp(var(--space-6), 3vw, var(--space-10)); } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.1fr; } } .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); } .info-list li { display: flex; gap: var(--space-4); align-items: flex-start; } .info-list__icon { flex: none; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--accent-100); display: grid; place-items: center; transition: transform var(--dur) var(--ease-back); } .info-list li:hover .info-list__icon { transform: translateY(-2px) scale(1.06); } .info-list__icon svg { width: 19px; height: 19px; fill: var(--accent-700); } .info-list h3 { margin-bottom: var(--space-1); font-size: var(--text-base); } .info-list p, .info-list a { margin: 0; font-size: var(--text-sm); color: var(--text-soft); display: block; } .info-list a:hover { color: var(--link); } /* --- form ------------------------------------------------------------------ */ .form { display: grid; gap: var(--space-5); } .form__row { display: grid; gap: var(--space-5); } @media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } } .form__field { position: relative; } .form label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-head); margin-bottom: var(--space-2); } .form input, .form select, .form textarea { width: 100%; padding: var(--space-3) var(--space-4); min-height: 48px; font: inherit; font-size: var(--text-sm); color: var(--text); background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent); } .form textarea { min-height: 140px; resize: vertical; } /* validation states, applied by JS rather than :invalid so they only show after the field has been touched */ .form__field.is-invalid input, .form__field.is-invalid select, .form__field.is-invalid textarea { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, .16); } .form__field.is-valid input, .form__field.is-valid select, .form__field.is-valid textarea { border-color: #2e9e5b; } .form__error { display: block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 500; color: #d64545; opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--dur) var(--ease-out), max-height var(--dur) var(--ease-out); } .form__field.is-invalid .form__error { opacity: 1; max-height: 4em; } .form__note { font-size: var(--text-xs); color: var(--text-mute); } /* success panel that replaces the form once it submits */ .form__success { display: none; text-align: center; padding: var(--space-8) var(--space-5); background: var(--surface-raise); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .form__success.is-shown { display: block; animation: fade-up var(--dur-slow) var(--ease-out); } .form__success h3 { margin-bottom: var(--space-2); } .form__success p { color: var(--text-mute); margin-bottom: 0; } /* the tick draws itself */ .tick { width: 66px; height: 66px; margin: 0 auto var(--space-5); } .tick circle, .tick polyline { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .tick circle { stroke: var(--accent-400); stroke-dasharray: 166; stroke-dashoffset: 166; animation: tick-ring .7s var(--ease-out) forwards; } .tick polyline { stroke: var(--accent-500); stroke-dasharray: 48; stroke-dashoffset: 48; animation: tick-mark .4s var(--ease-out) .55s forwards; } @keyframes tick-ring { to { stroke-dashoffset: 0; } } @keyframes tick-mark { to { stroke-dashoffset: 0; } } /* ========================================================================== 16 CTA BAND, FOOTER, BACK-TO-TOP ========================================================================== */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--brand-800) 0%, var(--brand-600) 100%); color: #fff; } .cta-band::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 194, 14, .22), transparent 65%); pointer-events: none; } .cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-5); align-items: center; padding-block: clamp(var(--space-7), 4vw, var(--space-10)); } @media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1fr auto; } } .cta-band h2 { color: #fff; margin-bottom: var(--space-2); } .cta-band p { color: #cdd8ea; margin: 0; } .site-footer { background: var(--brand-900); color: #a9b6cd; font-size: var(--text-sm); } .site-footer__main { padding-block: clamp(var(--space-8), 4vw, var(--space-12)); } .site-footer__grid { display: grid; gap: var(--space-7); } @media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1040px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .site-footer h2 { color: #fff; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); position: relative; padding-bottom: var(--space-3); } .site-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--accent-400); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .site-footer a { color: #b9c5da; display: inline-block; } .site-footer a:hover { color: var(--accent-400); transform: translateX(3px); } .site-footer li a { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .site-footer__brand img { max-height: 62px; width: auto; background: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); } .site-footer__contact li { display: flex; gap: var(--space-3); align-items: flex-start; } .site-footer__contact svg { width: 16px; height: 16px; fill: var(--accent-400); flex: none; margin-top: .35em; } .site-footer__contact a:hover { transform: none; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--space-5); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; justify-content: space-between; } .site-footer__bottom p { margin: 0; } .to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 70; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--accent-400); color: var(--brand-800); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-back), visibility var(--dur); } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); } .to-top svg { width: 17px; height: 17px; fill: currentColor; } /* ========================================================================== 17 ANIMATION UTILITIES Elements marked .reveal start hidden and are released by the IntersectionObserver in site.js, which adds .is-in. If JS never runs the fallback rule at the end of this block shows everything. ========================================================================== */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal--left { transform: translateX(-34px); } .reveal--right { transform: translateX(34px); } .reveal--zoom { transform: scale(.94); } .reveal.is-in { opacity: 1; transform: none; } /* staggered children: each step is 80ms, set by --i on the element */ .reveal[style*="--i"] { transition-delay: calc(var(--i, 0) * 80ms); } /* page-load entrance for the hero block */ .load-in > * { opacity: 0; animation: fade-up .8s var(--ease-out) forwards; } .load-in > *:nth-child(1) { animation-delay: .10s; } .load-in > *:nth-child(2) { animation-delay: .22s; } .load-in > *:nth-child(3) { animation-delay: .34s; } .load-in > *:nth-child(4) { animation-delay: .46s; } .load-in > *:nth-child(5) { animation-delay: .58s; } /* Whole-document fade on load. Deliberately pure CSS with no class hook: a script error can then never leave the page blank. */ body { animation: fade-in .45s var(--ease-out) both; } /* No JS: .reveal and .load-in must not stay invisible. site.js removes .no-js from on boot, so these only apply when it never ran. */ .no-js .reveal { opacity: 1; transform: none; } .no-js .load-in > * { opacity: 1; animation: none; } /* ========================================================================== 18 RESPONSIVE Mobile-first is the default above; these are the overrides for the drawer navigation and the narrow-viewport adjustments. Breakpoints: 1080 / 980 (nav) / 768 / 560 / 360. ========================================================================== */ /* Between the drawer breakpoint and roughly 1500px the eight top-level items plus the logo, theme toggle and CTA are a tight fit. Measured at 1280 and 1440 the CTA was being clipped off the right edge, so everything in the bar tightens up through this range rather than the button silently vanishing. */ @media (max-width: 1500px) { .nav a { padding: var(--space-2) var(--space-1); font-size: var(--text-xs); } .nav > ul { gap: 2px; } .nav .sub { min-width: 230px; } .nav .sub a { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); } .header-actions { gap: var(--space-2); } .header-actions .btn { padding-inline: var(--space-4); font-size: var(--text-xs); min-height: 42px; } } /* --- below 980px the nav becomes a slide-in drawer --------------------- */ @media (max-width: 1240px) { .nav-toggle { display: inline-flex; } .nav-toggle { position: relative; z-index: 120; } .header-actions .btn { display: none; } html.no-js .nav-toggle { display: none; } html.no-js .site-header__inner { flex-wrap: wrap; } html.no-js .nav { position: static; width: 100%; padding: 0; background: transparent; box-shadow: none; overflow: visible; transform: none; transition: none; flex-direction: column; align-items: stretch; } .nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(380px, 90vw); padding: var(--space-6) var(--space-5) var(--space-10); background: var(--surface); box-shadow: -16px 0 48px rgba(7, 12, 31, .28); display: block; overflow-y: auto; transform: translateX(102%); transition: transform var(--dur) var(--ease-out); } body.nav-open .nav { transform: none; } .nav > ul { display: block; } .nav > ul > li { border-bottom: 1px solid var(--border); } /* each row slides in behind the drawer, staggered */ body.nav-open .nav > ul > li { animation: fade-up .4s var(--ease-out) backwards; } body.nav-open .nav > ul > li:nth-child(1) { animation-delay: .06s; } body.nav-open .nav > ul > li:nth-child(2) { animation-delay: .10s; } body.nav-open .nav > ul > li:nth-child(3) { animation-delay: .14s; } body.nav-open .nav > ul > li:nth-child(4) { animation-delay: .18s; } body.nav-open .nav > ul > li:nth-child(5) { animation-delay: .22s; } body.nav-open .nav > ul > li:nth-child(6) { animation-delay: .26s; } body.nav-open .nav > ul > li:nth-child(7) { animation-delay: .30s; } body.nav-open .nav > ul > li:nth-child(8) { animation-delay: .34s; } .nav a { padding: var(--space-3) var(--space-1); font-size: var(--text-base); border-radius: 0; } .nav > ul > li > a::after { display: none; } .nav .has-sub > a { display: flex; } .nav .has-sub > a::before { margin-left: auto; margin-top: 0; } .nav .has-sub.is-open > a::before { transform: rotate(-135deg); margin-top: .3em; } .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 var(--space-3) var(--space-4); min-width: 0; display: none; background: transparent; } .nav .has-sub.is-open > .sub { display: block; animation: fade-up .3s var(--ease-out); } .nav .sub a { padding: var(--space-2) var(--space-1); } .nav__cta { margin-top: var(--space-6); display: block; } .nav__cta .btn { width: 100%; } } @media (min-width: 1241px) { .nav__cta { display: none; } } /* --- tablet ------------------------------------------------------------- */ @media (max-width: 768px) { .topbar { display: none; } .topbar__inner { justify-content: center; text-align: center; } .topbar__list { gap: var(--space-4); justify-content: center; font-size: var(--text-xs); } .topbar__address { display: none; } .hero { min-height: auto; } .split__media::before { display: none; } .map-embed iframe { height: 320px; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* --- phone -------------------------------------------------------------- */ @media (max-width: 560px) { .brand img { max-height: 42px; } .site-header.is-stuck .brand img { max-height: 38px; } .btn-row .btn { flex: 1 1 100%; } .hero__scroll { display: none; } .lightbox__prev { left: var(--space-2); } .lightbox__next { right: var(--space-2); } .accordion summary { font-size: var(--text-base); padding-right: var(--space-8); } .tslider__slide { padding-inline: 0; } } /* --- very narrow (360px) ------------------------------------------------- */ @media (max-width: 380px) { .site-header__inner { gap: var(--space-2); } .brand img { max-width: calc(100vw - 101px); } .topbar__list { gap: var(--space-3); } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* ========================================================================== 19 PRINT & REDUCED MOTION ========================================================================== */ @media print { .topbar, .site-header, .site-footer, .to-top, .cta-band, .nav-scrim, .lightbox, .scroll-progress, .hero__scroll { display: none !important; } body { color: #000; background: #fff; } .section { padding-block: var(--space-4); } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; } } /* Honour an explicit request for less motion: keep every end state, drop every transition, animation and parallax. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .load-in > * { opacity: 1; animation: none; } .mark::after { transform: scaleX(1); } .hero__glow, .marquee__track, .hero__scroll span::after { animation: none; } .hero__media img { transform: none; } }