/* ============================================================ GREEN GARDENIA — Liquid Glass Design System Ultra modern · minimal · spacious · rounded Brand accent #3F7D66 used ONLY as button hover gradient ============================================================ */ :root { /* Canvas & ink */ --bg: #F6F7F4; --bg-soft: #EFF2ED; --ink: #131B16; --ink-2: #55605A; --ink-3: #8A948E; /* Brand — reserved for button hover gradients */ --brand: #3F7D66; --brand-grad: linear-gradient(135deg, #5FA98B 0%, #3F7D66 52%, #2A5B49 100%); --logo-green: #407F68; /* Glass */ --glass-w: rgba(255, 255, 255, 0.55); --glass-w-strong: rgba(255, 255, 255, 0.72); --glass-d: rgba(18, 28, 23, 0.30); --glass-line: rgba(255, 255, 255, 0.65); --glass-line-dark: rgba(255, 255, 255, 0.22); /* Radii */ --r-xs: 14px; --r-sm: 20px; --r-md: 28px; --r-lg: 36px; --r-pill: 999px; /* Type — all sans-serif */ --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; --font-accent: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --wrap: 1360px; --gutter: clamp(20px, 4.5vw, 64px); --section: clamp(96px, 12vw, 170px); --shadow-soft: 0 24px 60px -30px rgba(19, 27, 22, 0.22); --shadow-card: 0 18px 44px -22px rgba(19, 27, 22, 0.18); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-weight: 400; color: var(--ink); background: var(--bg); line-height: 1.55; overflow-x: hidden; min-height: 100vh; opacity: 0; transition: opacity 0.7s ease; } body.is-ready { opacity: 1; } /* ============================================================ LOADING SCREEN — animated GG mark The curtain sits inside , so while it's up the body must be visible (otherwise the parent's opacity:0 would hide the curtain too). main.js lifts the curtain, then adds .is-ready to play the hero reveals. ============================================================ */ body.has-preloader { opacity: 1; } .gg-preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--bg); transition: opacity 0.65s var(--ease-out), visibility 0.65s; } .gg-preloader.is-done { opacity: 0; visibility: hidden; } .gg-preloader-inner { display: grid; justify-items: center; gap: 26px; } .gg-preloader-mark svg { width: clamp(74px, 9vw, 104px); height: auto; display: block; color: var(--logo-green); animation: gg-mark-breathe 2.6s ease-in-out 0.9s infinite; } .gg-preloader-mark svg path { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(12px) scale(0.94); animation: gg-mark-in 0.75s var(--ease-out) forwards; } .gg-preloader-mark svg path:nth-child(1) { animation-delay: 0.05s; } .gg-preloader-mark svg path:nth-child(2) { animation-delay: 0.16s; } .gg-preloader-mark svg path:nth-child(3) { animation-delay: 0.27s; } .gg-preloader-mark svg path:nth-child(4) { animation-delay: 0.38s; } @keyframes gg-mark-in { to { opacity: 1; transform: none; } } @keyframes gg-mark-breathe { 0%, 100% { transform: scale(1); opacity: 0.94; } 50% { transform: scale(1.035); opacity: 1; } } /* Thin progress line under the mark */ .gg-preloader-bar { display: block; width: 132px; height: 2px; border-radius: 2px; background: rgba(19, 27, 22, 0.09); overflow: hidden; } .gg-preloader-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--brand-grad); animation: gg-bar 1.5s var(--ease-soft) 0.3s infinite; } @keyframes gg-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } } /* Already seen this visit — skipped before first paint by the inline guard. */ .gg-skip-loader .gg-preloader { display: none; } @media (prefers-reduced-motion: reduce) { .gg-preloader { display: none; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ::selection { background: rgba(63, 125, 102, 0.22); } /* Ambient drifting atmosphere — ultra subtle, desaturated */ .atmosphere { position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(42% 38% at 18% 22%, rgba(213, 224, 214, 0.55), transparent 70%), radial-gradient(36% 34% at 84% 12%, rgba(226, 230, 222, 0.5), transparent 70%), radial-gradient(44% 40% at 78% 86%, rgba(214, 222, 216, 0.45), transparent 70%); animation: atmosphere-drift 26s ease-in-out infinite alternate; } @keyframes atmosphere-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.5%, 0) scale(1.04); } } /* ---------- Layout ---------- */ .wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; } .wrap-wide { width: min(1520px, 100% - var(--gutter) * 1.2); margin-inline: auto; } .section { padding-block: calc(var(--section) * 0.5); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-weight: 450; letter-spacing: -0.03em; line-height: 1.02; } .display { font-size: clamp(2.9rem, 7.2vw, 6.6rem); font-weight: 420; letter-spacing: -0.035em; line-height: 0.99; } .title-xl { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 430; } .title-lg { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 440; } .title-md { font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 480; letter-spacing: -0.02em; } .title-sm { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -0.015em; } /* Accent words — sans-serif weight contrast (no serif, no italic) */ .accent-serif { font-family: var(--font-accent); font-weight: 300; font-style: normal; letter-spacing: -0.025em; } .sub { font-size: clamp(1.02rem, 1.4vw, 1.22rem); color: var(--ink-2); font-weight: 400; max-width: 56ch; line-height: 1.6; } .sub-tight { max-width: 38ch; } /* Section headers — big title + short sub, nothing else */ .sec-head { margin-bottom: clamp(44px, 6vw, 84px); display: grid; gap: 18px; } .sec-head.center { justify-items: center; text-align: center; } .sec-head.split { grid-template-columns: 1fr auto; align-items: end; gap: 32px; } @media (max-width: 767px) { .sec-head.split { grid-template-columns: 1fr; align-items: start; } } /* ============================================================ LIQUID GLASS PRIMITIVES ============================================================ */ .glass { background: linear-gradient(155deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34)); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(19, 27, 22, 0.04), var(--shadow-card); } .glass-dark { background: linear-gradient(155deg, rgba(24, 36, 30, 0.42), rgba(24, 36, 30, 0.26)); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--glass-line-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px -28px rgba(0, 0, 0, 0.4); color: #fff; } /* ---------- Liquid Glass Buttons ---------- */ .btn { --mx: 50%; --my: 50%; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 1.05rem 2rem; border-radius: var(--r-pill); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; color: var(--ink); white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.7); background: radial-gradient(140px 70px at var(--mx) var(--my), rgba(255,255,255,0.75), transparent 65%), linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.26)); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(19, 27, 22, 0.05), 0 14px 34px -16px rgba(19, 27, 22, 0.25); transition: color 0.35s ease, border-color 0.5s ease, transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--brand-grad); opacity: 0; transform: scale(1.06); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); } .btn:hover, .btn:focus-visible { color: #fff; transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 22px 44px -16px rgba(63, 125, 102, 0.55); } .btn:hover::before, .btn:focus-visible::before { opacity: 1; transform: scale(1); } .btn:active { transform: translateY(0) scale(0.985); } .btn .btn-arrow { transition: transform 0.45s var(--ease-out); } .btn:hover .btn-arrow { transform: translateX(4px); } /* Glass button sitting on imagery / dark surfaces */ .btn.on-image { color: #fff; border-color: rgba(255, 255, 255, 0.38); background: radial-gradient(140px 70px at var(--mx) var(--my), rgba(255,255,255,0.34), transparent 65%), linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 34px -14px rgba(0, 0, 0, 0.35); } .btn.btn-lg { padding: 1.2rem 2.5rem; font-size: 1.06rem; } .btn.btn-sm { padding: 0.78rem 1.45rem; font-size: 0.92rem; } /* Round icon button */ .btn-round { width: 54px; height: 54px; padding: 0; border-radius: 50%; flex: 0 0 auto; } /* ---------- Chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.62rem 1.15rem; border-radius: var(--r-pill); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em; background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.35)); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 22px -12px rgba(19,27,22,0.2); color: var(--ink); } .chip.on-image { background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1)); border-color: rgba(255, 255, 255, 0.35); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); } /* ============================================================ NAVIGATION — floating glass pill ============================================================ */ .site-nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; width: min(1280px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 22px; border-radius: var(--r-pill); background: linear-gradient(rgba(20, 32, 26, 0.34), rgba(20, 32, 26, 0.22)); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 18px 44px -20px rgba(0,0,0,0.35); transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, top 0.5s var(--ease-out); color: #fff; } .site-nav.scrolled { top: 12px; background: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.5)); border-color: rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 44px -18px rgba(19,27,22,0.28); color: var(--ink); } .nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .nav-logo svg { height: 34px; width: auto; display: block; } .nav-logo svg path { fill: currentColor; transition: fill 0.5s ease; } .site-nav.scrolled .nav-logo { color: var(--logo-green); } .nav-links { display: flex; align-items: center; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%); } .nav-links a { position: relative; padding: 0.65rem 1.05rem; border-radius: var(--r-pill); font-size: 0.95rem; font-weight: 450; opacity: 0.82; transition: opacity 0.3s ease, background 0.35s ease; } .nav-links a:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); } .site-nav.scrolled .nav-links a:hover { background: rgba(255, 255, 255, 0.75); } .nav-links a.active, .site-nav.scrolled .nav-links a.active { opacity: 1; color: #fff; background: var(--brand); box-shadow: 0 8px 20px -10px rgba(63, 125, 102, 0.7); } .nav-links a.active:hover, .site-nav.scrolled .nav-links a.active:hover { background: var(--brand); } .nav-cta { flex: 0 0 auto; } .nav-cta .btn { padding: 0.82rem 1.55rem; font-size: 0.93rem; } .site-nav:not(.scrolled) .nav-cta .btn { color: #fff; border-color: rgba(255,255,255,0.34); background: radial-gradient(120px 60px at var(--mx) var(--my), rgba(255,255,255,0.3), transparent 65%), linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.07)); } .site-nav:not(.scrolled) .nav-cta .btn:hover { border-color: rgba(255,255,255,0.2); } /* Menu open — force nav into light glass so the logo stays visible */ body.menu-open .site-nav { background: linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.5)); border-color: rgba(255, 255, 255, 0.8); color: var(--ink); } body.menu-open .site-nav .nav-logo { color: var(--logo-green); } /* Burger */ .nav-burger { display: none; width: 46px; height: 46px; border-radius: 50%; position: relative; flex: 0 0 auto; } .nav-burger span { position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.4s var(--ease-out), opacity 0.3s; } .nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); } .nav-burger span:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); } body.menu-open .nav-burger span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } body.menu-open .nav-burger span:nth-child(2) { opacity: 0; } body.menu-open .nav-burger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } /* Mobile overlay menu */ .mobile-menu { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: linear-gradient(160deg, rgba(246,247,244,0.88), rgba(233,238,232,0.92)); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; } .mobile-menu nav { display: grid; gap: 6px; text-align: center; } .mobile-menu nav a { font-size: clamp(2rem, 8vw, 3rem); font-weight: 430; letter-spacing: -0.03em; padding: 0.4rem 2rem; border-radius: var(--r-pill); opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), background 0.3s; } .mobile-menu nav a:hover { background: rgba(255,255,255,0.65); } .mobile-menu nav a.active { background: var(--brand); color: #fff; } body.menu-open .mobile-menu nav a { opacity: 1; transform: none; } .mobile-menu .menu-contact { margin-top: 34px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out) 0.3s, transform 0.6s var(--ease-out) 0.3s; } body.menu-open .mobile-menu .menu-contact { opacity: 1; transform: none; } @media (max-width: 1023px) { .nav-links, .nav-cta { display: none; } .nav-burger { display: block; } .site-nav { padding: 8px 10px 8px 18px; } } /* ============================================================ HERO — inset rounded canvas ============================================================ */ .hero { padding: 10px; } .hero-canvas { position: relative; min-height: max(640px, calc(100svh - 20px)); border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; } .hero-media { position: absolute; inset: -6% 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: hero-zoom 2.6s var(--ease-out) forwards; } @keyframes hero-zoom { to { transform: scale(1); } } .hero-canvas::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(200deg, rgba(10,18,14,0.05) 40%, rgba(10,18,14,0.44) 100%), radial-gradient(90% 60% at 18% 92%, rgba(10,18,14,0.34), transparent 60%); } .hero-content { position: relative; width: 100%; padding: clamp(28px, 5vw, 72px); color: #fff; display: grid; gap: clamp(20px, 2.6vw, 30px); } .hero-content .display { max-width: 12ch; text-wrap: balance; } .hero-content .sub { color: rgba(255, 255, 255, 0.86); } /* Masked line reveal */ /* padding-bottom gives descenders (g, y, p, j) room inside the clip box; the equal negative margin keeps line spacing & layout pixel-identical. */ .line-mask { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; } .line-mask > span { display: block; transform: translateY(115%); transition: transform 1.15s var(--ease-out); transition-delay: var(--ld, 0s); } body.is-ready .line-mask > span { transform: translateY(0); } .hero-fade { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--ld, 0.6s); } body.is-ready .hero-fade { opacity: 1; transform: none; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* Floating glass chips over hero */ .hero-float { position: absolute; z-index: 5; display: inline-flex; flex-direction: column; gap: 2px; padding: 1.05rem 1.5rem; border-radius: var(--r-sm); animation: floaty 7s ease-in-out infinite alternate; } .hero-float strong { font-size: 1.28rem; font-weight: 540; letter-spacing: -0.02em; } .hero-float small { font-size: 0.84rem; opacity: 0.85; font-weight: 400; } @keyframes floaty { from { transform: translateY(-7px); } to { transform: translateY(9px); } } .hero-scroll { position: absolute; right: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); z-index: 6; width: 52px; height: 82px; border-radius: var(--r-pill); display: grid; justify-items: center; padding-top: 16px; } .hero-scroll i { width: 4px; height: 12px; border-radius: 4px; background: rgba(255,255,255,0.9); animation: scroll-dot 2s var(--ease-soft) infinite; } @keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(26px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } /* Inner page hero (short, typographic) */ .page-hero { padding: calc(120px + 6vw) 0 0; } .page-hero .display { max-width: 16ch; text-wrap: balance; } .page-hero .sub { margin-top: 22px; } .page-hero.center { text-align: center; } .page-hero.center .display, .page-hero.center .sub { margin-inline: auto; } /* ============================================================ CARDS ============================================================ */ /* Media card base (services, projects, blog) */ .card { position: relative; border-radius: var(--r-md); overflow: hidden; isolation: isolate; transform: translateZ(0); transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); box-shadow: var(--shadow-card); } .card:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -30px rgba(19, 27, 22, 0.32); } .card-media { position: relative; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); } .card:hover .card-media img { transform: scale(1.06); } /* Service card — tall image, floating glass footer */ .service-card { display: block; aspect-ratio: 4 / 4.6; } .service-card .card-media { position: absolute; inset: 0; z-index: -1; } .service-card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(200deg, transparent 42%, rgba(10, 18, 14, 0.5) 100%); transition: opacity 0.5s ease; } .service-card-body { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; padding: 1.35rem 1.5rem; border-radius: var(--r-sm); color: #fff; display: grid; gap: 4px; } .service-card-body p { font-size: 0.94rem; opacity: 0.85; font-weight: 350; } .service-card-body .card-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } /* Circular "go" arrow that fills with gradient on card hover */ .card-go { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 0.5s var(--ease-out), background 0.45s ease, border-color 0.45s ease; } .card-go svg { width: 18px; height: 18px; stroke: currentColor; transition: transform 0.45s var(--ease-out); } .card:hover .card-go, a.card:hover .card-go { background: var(--brand-grad); border-color: transparent; transform: translateY(-50%) rotate(-45deg); } .card-go.static { position: static; transform: none; } .card:hover .card-go.static { transform: rotate(-45deg); } /* Project card */ .project-card { display: block; aspect-ratio: 4 / 3.4; } .project-card .card-media { position: absolute; inset: 0; z-index: -1; } .project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(198deg, transparent 48%, rgba(10, 18, 14, 0.52) 100%); } .project-card .project-meta { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; color: #fff; } .project-card .project-meta h3 { font-size: 1.3rem; font-weight: 490; letter-spacing: -0.02em; } .project-card .project-meta small { font-weight: 350; opacity: 0.82; font-size: 0.9rem; } .project-card .chip { position: absolute; z-index: 2; top: 18px; left: 18px; } /* Blog card */ .blog-card { display: grid; gap: 0; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.45)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.75); } .blog-card .card-media { aspect-ratio: 16 / 10; } .blog-card .blog-body { padding: 1.5rem 1.6rem 1.7rem; display: grid; gap: 10px; align-content: start; } .blog-card .blog-body time { font-size: 0.86rem; color: var(--ink-3); font-weight: 450; } .blog-card .blog-body h3 { font-size: 1.22rem; font-weight: 490; letter-spacing: -0.018em; line-height: 1.25; } .blog-card .blog-body p { font-size: 0.95rem; color: var(--ink-2); font-weight: 350; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Team card */ .team-card { border-radius: var(--r-md); padding: 2rem 1.8rem 1.9rem; display: grid; justify-items: center; text-align: center; gap: 6px; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } .team-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px -28px rgba(19,27,22,0.3); } .team-avatar { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; font-size: 1.7rem; font-weight: 480; letter-spacing: 0.02em; color: #29473A; background: radial-gradient(80% 80% at 30% 25%, rgba(255,255,255,0.9), rgba(255,255,255,0.25)), linear-gradient(150deg, #DDE7DF, #C4D4C8); border: 1px solid rgba(255,255,255,0.85); box-shadow: inset 0 2px 6px rgba(255,255,255,0.9), 0 16px 34px -16px rgba(19,27,22,0.28); } .team-card h3 { font-size: 1.18rem; font-weight: 510; letter-spacing: -0.015em; } .team-card p { font-size: 0.92rem; color: var(--ink-2); font-weight: 380; } /* Value / feature card */ .value-card { border-radius: var(--r-md); padding: 1.9rem 1.8rem; display: grid; gap: 14px; align-content: start; transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); } .value-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(19,27,22,0.28); } .value-card h3 { font-size: 1.16rem; font-weight: 510; letter-spacing: -0.015em; } .value-card p { font-size: 0.95rem; color: var(--ink-2); font-weight: 360; } .value-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4)); border: 1px solid rgba(255,255,255,0.85); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(19,27,22,0.25); } .value-icon svg { width: 24px; height: 24px; stroke: #33604F; } /* Certificate card */ .cert-card { border-radius: var(--r-sm); padding: 1.5rem 1.6rem; display: flex; align-items: center; gap: 16px; transition: transform 0.5s var(--ease-out); } .cert-card:hover { transform: translateY(-5px); } .cert-card strong { font-size: 1rem; font-weight: 520; letter-spacing: -0.01em; display: block; } .cert-card small { color: var(--ink-2); font-size: 0.86rem; font-weight: 380; } /* Testimonial card */ .testimonial-card { border-radius: var(--r-md); padding: clamp(1.8rem, 3vw, 2.6rem); display: grid; gap: 22px; align-content: start; min-height: 100%; } .testimonial-card blockquote { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 380; letter-spacing: -0.015em; line-height: 1.45; } .testimonial-card .t-author { display: flex; align-items: center; gap: 14px; } .testimonial-card .t-author .team-avatar { width: 52px; height: 52px; font-size: 0.95rem; margin: 0; } .testimonial-card .t-author strong { display: block; font-size: 0.98rem; font-weight: 520; } .testimonial-card .t-author small { color: var(--ink-2); font-size: 0.86rem; } .t-stars { display: flex; gap: 4px; } .t-stars svg { width: 16px; height: 16px; fill: #E8B84B; } /* ============================================================ GRIDS ============================================================ */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 32px); } @media (max-width: 1023px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } } /* ============================================================ FILTERS ============================================================ */ .filter-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: var(--r-pill); } .filter-btn { position: relative; padding: 0.72rem 1.5rem; border-radius: var(--r-pill); font-size: 0.94rem; font-weight: 470; color: var(--ink-2); transition: color 0.35s ease, background 0.45s var(--ease-out), box-shadow 0.45s ease, transform 0.3s ease; } .filter-btn:hover { color: var(--ink); transform: translateY(-1px); } .filter-btn.active { color: var(--ink); background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.75)); box-shadow: inset 0 1px 0 #fff, 0 10px 26px -12px rgba(19,27,22,0.3); } .filter-grid .filter-item { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); } .filter-grid .filter-item.filter-out { opacity: 0; transform: scale(0.9) translateY(14px); pointer-events: none; } .filter-grid .filter-item.filter-hidden { display: none; } /* ============================================================ STATS ============================================================ */ .stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); } .stat-cell { border-radius: var(--r-md); padding: clamp(1.7rem, 2.6vw, 2.5rem) clamp(1.4rem, 2vw, 2.1rem); display: grid; gap: 6px; } .stat-cell .num { font-size: clamp(2.7rem, 4.6vw, 4.3rem); font-weight: 430; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-cell .num sup { font-size: 0.5em; font-weight: 450; } .stat-cell span { color: var(--ink-2); font-size: 0.98rem; font-weight: 400; } .stats-band.six { grid-template-columns: repeat(3, 1fr); } .stats-band.six .num { font-size: clamp(2.2rem, 3.4vw, 3.4rem); } @media (max-width: 1023px) { .stats-band { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .stats-band, .stats-band.six { grid-template-columns: 1fr; } } /* ============================================================ MARQUEE ============================================================ */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; align-items: center; gap: clamp(38px, 5vw, 84px); width: max-content; animation: marquee 42s linear infinite; padding-block: 8px; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 420; letter-spacing: -0.02em; color: var(--ink-3); white-space: nowrap; transition: color 0.4s ease; } .marquee-track span:hover { color: var(--ink); } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ SLIDER ============================================================ */ .slider { position: relative; } .slider-viewport { overflow: hidden; border-radius: var(--r-md); } .slider-track { display: flex; transition: transform 0.85s var(--ease-out); } .slider-slide { flex: 0 0 100%; min-width: 0; padding-inline: 4px; } @media (min-width: 900px) { .slider-slide.half { flex-basis: 50%; } } .slider-nav { display: flex; align-items: center; gap: 12px; } .slider-dots { display: flex; gap: 8px; margin-inline: 10px; } .slider-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(19, 27, 22, 0.18); transition: width 0.45s var(--ease-out), background 0.4s ease; } .slider-dots button.active { width: 26px; border-radius: 6px; background: rgba(19,27,22,0.65); } /* Gallery slider (templates) */ .gallery-slide img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; border-radius: var(--r-md); } /* ============================================================ CTA PANEL ============================================================ */ .cta-panel { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; min-height: clamp(420px, 55vh, 560px); display: grid; place-items: center; text-align: center; color: #fff; padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px); } .cta-panel .cta-bg { position: absolute; inset: 0; z-index: -2; } .cta-panel .cta-bg img { width: 100%; height: 100%; object-fit: cover; } .cta-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,18,14,0.3), rgba(10,18,14,0.55)); } .cta-inner { display: grid; gap: 26px; justify-items: center; max-width: 760px; } .cta-inner .sub { color: rgba(255,255,255,0.85); } /* ============================================================ FORMS — liquid glass ============================================================ */ .form-card { border-radius: var(--r-lg); padding: clamp(1.8rem, 3.4vw, 3rem); } .form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } } .field { display: grid; gap: 8px; } .field label { font-size: 0.88rem; font-weight: 490; color: var(--ink-2); padding-left: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 1rem 1.3rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.85); background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.5)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 #fff, inset 0 2px 8px rgba(19,27,22,0.03); outline: none; transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; font-weight: 420; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(255,255,255,1); background: rgba(255,255,255,0.92); box-shadow: inset 0 1px 0 #fff, 0 12px 30px -14px rgba(63,125,102,0.4); } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355605A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; } .form-success { display: none; text-align: center; padding: clamp(2rem, 5vw, 4rem) 1rem; animation: pop-in 0.7s var(--ease-out); } .form-card.sent form { display: none; } .form-card.sent .form-success { display: grid; gap: 14px; justify-items: center; } @keyframes pop-in { from { opacity: 0; transform: scale(0.92) translateY(16px); } to { opacity: 1; transform: none; } } .success-ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-grad); box-shadow: 0 20px 44px -16px rgba(63,125,102,0.6); animation: floaty 5s ease-in-out infinite alternate; } .success-ring svg { width: 34px; height: 34px; stroke: #fff; } /* Contact info card rows */ .info-row { display: flex; align-items: center; gap: 16px; padding: 1.3rem 1.5rem; border-radius: var(--r-sm); transition: transform 0.5s var(--ease-out); } .info-row:hover { transform: translateY(-4px); } .info-row .value-icon { width: 48px; height: 48px; flex: 0 0 auto; } .info-row strong { display: block; font-size: 1rem; font-weight: 510; } .info-row small { color: var(--ink-2); font-size: 0.88rem; } /* ============================================================ ACCORDION (glass) ============================================================ */ .accordion { display: grid; gap: 12px; } .acc-item { border-radius: var(--r-sm); overflow: hidden; } .acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 1.35rem 1.6rem; font-size: 1.06rem; font-weight: 490; letter-spacing: -0.01em; text-align: left; } .acc-head .acc-x { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.7); box-shadow: inset 0 1px 0 #fff; transition: transform 0.5s var(--ease-out), background 0.4s; } .acc-item.open .acc-x { transform: rotate(45deg); background: var(--brand-grad); color: #fff; } .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); } .acc-item.open .acc-body { grid-template-rows: 1fr; } .acc-body > div { overflow: hidden; } .acc-body p { padding: 0 1.6rem 1.5rem; color: var(--ink-2); font-weight: 370; max-width: 62ch; } /* ============================================================ FOOTER — spacious, no divider lines ============================================================ */ .site-footer { padding: var(--section) 0 0; overflow: hidden; } .footer-cta { display: grid; justify-items: center; text-align: center; gap: 26px; margin-bottom: clamp(70px, 9vw, 130px); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 60px); align-items: start; margin-bottom: clamp(60px, 8vw, 100px); } .footer-brand { display: grid; gap: 18px; } .footer-brand img { width: min(210px, 60%); height: auto; } .footer-brand p { color: var(--ink-2); font-size: 0.95rem; font-weight: 370; max-width: 30ch; } .footer-col h4 { font-size: 0.95rem; font-weight: 540; margin-bottom: 18px; letter-spacing: 0.01em; } .footer-col ul { display: grid; gap: 10px; } .footer-col a { color: var(--ink-2); font-size: 0.95rem; font-weight: 390; transition: color 0.3s, transform 0.3s; display: inline-block; } .footer-col a:hover { color: var(--ink); transform: translateX(3px); } .footer-social { display: flex; gap: 10px; margin-top: 6px; } .footer-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: transform 0.4s var(--ease-out), background 0.4s ease, color 0.4s ease; } .footer-social a:hover { transform: translateY(-4px); background: var(--brand-grad) !important; color: #fff; border-color: transparent; } .footer-social svg { width: 18px; height: 18px; } .footer-watermark-logo { display: block; width: 100%; height: auto; opacity: 0.13; user-select: none; pointer-events: none; transform: translateY(14%); } .footer-bottom { display: flex; justify-content: center; padding-bottom: 26px; } .footer-bottom small { color: var(--ink-3); font-size: 0.86rem; font-weight: 380; } @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ SPLIT / STORY LAYOUTS ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; } .split .split-media { position: relative; } .split .split-media > img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); } .split .split-media .hero-float { position: absolute; } .split-body { display: grid; gap: 22px; } .split-body .sub { max-width: 46ch; } @media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split .split-media > img { aspect-ratio: 16 / 11; } } /* Featured post split card */ .feature-split { display: grid; grid-template-columns: 1.25fr 1fr; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.45)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.75); } @media (max-width: 899px) { .feature-split { grid-template-columns: 1fr; } } /* Contact layout */ .contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; } @media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } } /* Big statement */ .statement { text-align: center; font-size: clamp(1.7rem, 3.6vw, 3.1rem); font-weight: 410; letter-spacing: -0.028em; line-height: 1.22; max-width: 26ch; margin-inline: auto; text-wrap: balance; } .statement .dim { color: var(--ink-3); } /* Process steps */ .step-card { border-radius: var(--r-md); padding: 2rem 1.8rem 1.9rem; display: grid; gap: 12px; align-content: start; } .step-card .step-num { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 380; letter-spacing: -0.045em; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(19, 27, 22, 0.3); } .step-card h3 { font-size: 1.15rem; font-weight: 520; } .step-card p { font-size: 0.94rem; color: var(--ink-2); font-weight: 370; } /* ============================================================ ARTICLE / PROSE (blog template) ============================================================ */ .prose { max-width: 720px; margin-inline: auto; display: grid; gap: 26px; font-size: 1.08rem; font-weight: 380; color: #2E3833; line-height: 1.75; } .prose h2 { font-size: 1.7rem; font-weight: 480; letter-spacing: -0.022em; margin-top: 14px; } .prose .pull-quote { border-radius: var(--r-md); padding: 2rem 2.2rem; font-size: 1.3rem; font-weight: 400; letter-spacing: -0.018em; line-height: 1.45; color: var(--ink); } /* ---- Flexible article sections (text / images / cards) ---- */ .gg-sec { margin-top: clamp(30px, 4vw, 52px); } .gg-sec:first-child { margin-top: 0; } .gg-sec-text, .gg-sec-lead, .gg-sec-heading { max-width: 720px; margin-inline: auto; } .gg-sec-heading h2 { text-wrap: balance; } .gg-sec-lead .sub { font-size: 1.24rem; line-height: 1.6; } /* Images: a run of two sits side by side, the next pair starts a new row. */ .gg-sec-images { max-width: 1040px; margin-inline: auto; } .gg-sec-images:not(.grid-2) { display: block; } .gg-figure { margin: 0; display: grid; gap: 10px; } .gg-figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-soft); display: block; } .gg-sec-images:not(.grid-2) .gg-figure img { aspect-ratio: 16 / 9; } .gg-figure figcaption { font-size: 0.9rem; color: var(--ink-3); font-weight: 380; text-align: center; } /* Cards inside an article get the full content width. */ .gg-sec-cards { max-width: none; } @media (max-width: 860px) { .gg-sec-images.grid-2 { grid-template-columns: 1fr; } .gg-figure img { aspect-ratio: 16 / 10; } } /* Page count on the "Read the Issue" button */ .mag-count { font-size: 0.82rem; font-weight: 420; opacity: 0.6; margin-left: 2px; } /* Magazine reader — message shown when a page image can't be loaded */ .lb-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 24px; text-align: center; color: rgba(255, 255, 255, 0.72); font-size: 0.98rem; font-weight: 380; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .lb-msg.show { opacity: 1; } /* Meta chips row */ .meta-row { display: flex; flex-wrap: wrap; gap: 10px; } /* ============================================================ REVEAL / SCROLL ANIMATIONS ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(30px) scale(0.985); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--rd, 0s); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal="left"] { transform: translateX(-40px); } [data-reveal="right"] { transform: translateX(40px); } [data-reveal="zoom"] { transform: scale(0.94); } [data-reveal="left"].is-in, [data-reveal="right"].is-in, [data-reveal="zoom"].is-in { transform: none; } /* Tilt */ [data-tilt] { transform-style: preserve-3d; } [data-tilt] .tilt-shine { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: radial-gradient(360px 240px at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.22), transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } [data-tilt]:hover .tilt-shine { opacity: 1; } /* Floating decorations */ .float-slow { animation: floaty 8s ease-in-out infinite alternate; } .float-slower { animation: floaty 11s ease-in-out infinite alternate-reverse; } /* Image load fade */ img[loading="lazy"] { opacity: 0; transition: opacity 0.9s ease; } img.img-loaded, img[loading="lazy"].img-loaded { opacity: 1; } /* ============================================================ MISC ============================================================ */ .center { text-align: center; } .mt-lg { margin-top: clamp(40px, 6vw, 72px); } .mt-md { margin-top: clamp(24px, 3.4vw, 44px); } .actions-center { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 72px); } /* Next / prev project nav */ .next-nav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); } .next-nav a { border-radius: var(--r-md); padding: 1.9rem 2rem; display: grid; gap: 6px; transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); } .next-nav a:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -26px rgba(19,27,22,0.3); } .next-nav a small { color: var(--ink-3); font-weight: 420; font-size: 0.88rem; } .next-nav a strong { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 470; letter-spacing: -0.02em; } .next-nav a.align-end { text-align: right; } @media (max-width: 639px) { .next-nav { grid-template-columns: 1fr; } } @media (max-width: 767px) { .hero-float, .hero-scroll { display: none; } .split .split-media .hero-float { display: inline-flex; } } /* ============================================================ CERTIFICATES SLIDER ============================================================ */ .cert-slide { padding-inline: 8px; } .cert-frame { border-radius: var(--r-md); padding: clamp(1.1rem, 2vw, 1.8rem); background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.62)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.8); box-shadow: var(--shadow-card); display: grid; gap: 14px; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } .cert-frame:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(19,27,22,0.28); } .cert-frame .cert-img { aspect-ratio: 4 / 3; border-radius: var(--r-xs); background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(19,27,22,0.05); } .cert-frame .cert-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .cert-frame .cert-cap { font-size: 0.9rem; font-weight: 460; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } /* ============================================================ TEAM — board feature + department grids ============================================================ */ .board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); } @media (max-width: 900px){ .board-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .board-grid { grid-template-columns: 1fr; } } .person-card { border-radius: var(--r-md); overflow: hidden; position: relative; isolation: isolate; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } .person-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px -28px rgba(19,27,22,0.32); } .person-photo { position: relative; aspect-ratio: 3 / 3.5; overflow: hidden; background: linear-gradient(160deg,#E7ECE7,#D3DED5); } .person-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .person-card:hover .person-photo img { transform: scale(1.05); } .person-body { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; padding: 0.85rem 1rem; border-radius: var(--r-sm); color: #fff; } .person-body h3 { font-size: 1.02rem; font-weight: 540; letter-spacing: -0.01em; line-height: 1.15; } .person-body p { font-size: 0.82rem; font-weight: 380; opacity: 0.9; margin-top: 2px; } /* Department block */ .dept { margin-top: clamp(48px, 6vw, 84px); } .dept-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; } .dept-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -0.02em; } .dept-head .dept-count { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); padding: 0.3rem 0.85rem; border-radius: var(--r-pill); background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.8); } .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .staff-card { border-radius: var(--r-sm); padding: 1.4rem 1.2rem 1.5rem; display: grid; justify-items: center; text-align: center; gap: 4px; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .staff-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -26px rgba(19,27,22,0.3); } .staff-photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; background: linear-gradient(160deg,#EAF0EA,#D3DED5); box-shadow: inset 0 2px 6px rgba(255,255,255,0.8), 0 12px 26px -14px rgba(19,27,22,0.3); border: 2px solid rgba(255,255,255,0.9); } .staff-photo img { width: 100%; height: 100%; object-fit: cover; } .staff-card h4 { font-size: 0.98rem; font-weight: 520; letter-spacing: -0.01em; } .staff-card p { font-size: 0.82rem; color: var(--ink-2); font-weight: 380; line-height: 1.3; } /* ============================================================ MAGAZINE — card + lightbox slider ============================================================ */ .mag-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; border-radius: var(--r-lg); padding: clamp(1.4rem, 2.5vw, 2.4rem); background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.45)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.75); } @media (max-width: 640px){ .mag-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } } .mag-thumb { position: relative; width: clamp(150px, 22vw, 230px); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 24px 50px -22px rgba(19,27,22,0.4); transition: transform 0.6s var(--ease-out); } .mag-card:hover .mag-thumb { transform: translateY(-6px) rotate(-1deg); } .mag-thumb img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; } .mag-thumb .mag-badge { position: absolute; top: 10px; left: 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: var(--r-pill); background: rgba(20,32,26,0.5); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mag-body { display: grid; gap: 14px; align-content: center; } .mag-body h3 { font-size: clamp(1.5rem,2.6vw,2.2rem); font-weight: 480; letter-spacing: -0.025em; line-height: 1.05; } .mag-body p { font-size: 1rem; color: var(--ink-2); font-weight: 380; max-width: 46ch; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: clamp(14px, 3vw, 34px); background: rgba(12, 20, 16, 0.6); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .lightbox.open { opacity: 1; pointer-events: auto; } .lightbox-top { display: flex; align-items: center; justify-content: space-between; color: #fff; } .lightbox-top strong { font-weight: 520; font-size: 1.02rem; } .lightbox-close { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.4rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.4s, transform 0.4s; } .lightbox-close:hover { background: rgba(255,255,255,0.26); transform: rotate(90deg); } .lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; } .lightbox-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); opacity: 0; transform: scale(0.98); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .lightbox-stage img.show { opacity: 1; transform: none; } .lightbox-nav { display: flex; align-items: center; justify-content: center; gap: 16px; color: #fff; } .lightbox-nav .lb-count { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 70px; text-align: center; } .lb-arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.3rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.4s, transform 0.4s var(--ease-out); } .lb-arrow:hover { background: rgba(255,255,255,0.28); transform: scale(1.08); } body.lightbox-lock { overflow: hidden; } /* ============================================================ FLIPBOOK MODAL (plugin shortcode) Deliberately NOT display:none while closed — a display:none box has zero size, and flipbook plugins measure their container on init, so they'd come up 0×0 or collapsed. Hiding via visibility/opacity keeps the real dimensions available the whole time. ============================================================ */ .mag-modal { position: fixed; inset: 0; z-index: 220; display: grid; grid-template-rows: auto 1fr; gap: clamp(12px, 2vh, 22px); padding: clamp(14px, 2.4vw, 28px); background: rgba(12, 20, 16, 0.72); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } .mag-modal.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.45s ease, visibility 0s; } .mag-modal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; } .mag-modal-top strong { font-weight: 520; font-size: 1.02rem; } .mag-modal-stage { position: relative; min-height: 0; overflow: auto; border-radius: var(--r-md); } /* Let the plugin's own markup fill the stage rather than fighting it. */ .mag-modal-stage > * { max-width: 100%; } .mag-modal-stage iframe { width: 100%; height: 100%; min-height: 70vh; border: 0; display: block; } /* ============================================================ GOOGLE MAP EMBED ============================================================ */ .map-frame { position: relative; border-radius: var(--r-md); overflow: hidden; min-height: 300px; box-shadow: var(--shadow-card); border: 1px solid rgba(255,255,255,0.7); } .map-frame iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; filter: saturate(1.05); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .line-mask > span { transform: none; } .hero-fade { opacity: 1; transform: none; } }