/* ============ DESIGN TOKENS ============ */ :root{ --paper: #F3F1EB; --paper-deep: #E7E2D3; --paper-deeper: #D7CFB6; --ink: #17140F; --ink-soft: #5E594C; --gold: #C6A567; --gold-deep: #97772E; --gold-line: #C6A567; --line: #DAD3BE; --surface: #FFFFFF; /* stable brand-panel colors — deliberately constant across light/dark themes, used for textured accent panels (.relief-dark / .relief-ink) so those panels always read as the same deep black surfaces, matching the gold/black/gray brand */ --panel-dark: #17140F; --panel-darker: #0D0B08; --shadow: 20px 30px 60px -30px rgba(20,16,8,0.28); --shadow-sm: 0 8px 20px -12px rgba(20,16,8,0.35); --footer-bg: #121009; --footer-ink: #EDE7D6; --footer-line: #38332A; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 8px; --maxw: 1160px; } /* Dark mode intentionally removed — the client asked for these exact paper/gold shades to stay constant no matter what theme the visitor's phone or computer is set to, so the site no longer follows prefers-color-scheme. */ *{box-sizing:border-box;} html{scroll-behavior:smooth; font-size:117%;} /* global type bump — client asked for larger text everywhere; every font-size in this file is rem/clamp(rem…) based, so this one change scales all of it uniformly. NOTE: deliberately NOT setting overflow-x:hidden here on — that was tried as a fix for the floating-menu hover shift, but it silently breaks header.nav's position:sticky in real browsers (an overflow value other than visible on the root, without an explicit overflow-y, creates a new scroll container that position:sticky can't stick within). The hover-shift is fixed below instead, at its actual source, so the sticky header keeps working. */ body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } img{max-width:100%;display:block;} a{color:inherit;} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;} @media (max-width:640px){ .wrap{padding:0 20px;} } h1,h2,h3{font-family:"EB Garamond", Georgia, serif; font-weight:600; margin:0; text-wrap:balance;} p{line-height:1.75; color:var(--ink-soft); margin:0;} .eyebrow{ font-family:"Montserrat"; font-weight:700; font-size:0.85rem; letter-spacing:0.17em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:11px; } .eyebrow::before{ content:""; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex:none; } .section-head{max-width:640px; margin-bottom:52px;} .section-head h2{font-size:clamp(1.9rem, 3.2vw, 2.7rem); margin-top:14px; line-height:1.15;} .section-head p{margin-top:18px; font-size:1.05rem;} section{padding:112px 0; position:relative; overflow:hidden;} @media (max-width:768px){ section{padding:76px 0;} } .btn{ display:inline-flex; align-items:center; gap:10px; font-family:"Montserrat"; font-weight:600; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; padding:16px 30px; border-radius:999px; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; cursor:pointer; border:1px solid transparent; white-space:nowrap; } .btn-primary{ background:var(--ink); color:var(--paper); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); } .btn-ghost{ border-color:var(--gold-deep); color:var(--ink); } .btn-ghost:hover{ background:var(--paper-deep); transform:translateY(-2px); } hr.hair{ border:none; border-top:1px solid var(--line); margin:0; } /* ============ RELIEF / EMBOSSED TEXTURE ============ */ .relief-light{ position:relative; background-color:var(--paper-deep); background-image: repeating-linear-gradient(135deg, rgba(23,20,15,0.055) 0px, rgba(23,20,15,0.055) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(45deg, rgba(255,255,255,0.55) 0px, rgba(255,255,255,0.55) 1px, transparent 1px, transparent 7px), radial-gradient(circle at 15% 20%, rgba(255,255,255,0.55), transparent 42%), radial-gradient(circle at 88% 82%, rgba(23,20,15,0.07), transparent 46%); box-shadow: inset 0 3px 10px rgba(23,20,15,0.09), inset 0 -3px 10px rgba(255,255,255,0.4); } .relief-dark{ position:relative; background-color:var(--panel-dark); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 7px), radial-gradient(circle at 15% 15%, rgba(198,165,103,0.14), transparent 42%), radial-gradient(circle at 88% 85%, rgba(0,0,0,0.3), transparent 46%); box-shadow: inset 0 3px 12px rgba(0,0,0,0.4), inset 0 -3px 12px rgba(255,255,255,0.05); } .relief-ink{ position:relative; background-color:var(--panel-darker); background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 7px), radial-gradient(circle at 18% 18%, rgba(198,165,103,0.1), transparent 42%), radial-gradient(circle at 88% 85%, rgba(0,0,0,0.3), transparent 46%); box-shadow: inset 0 3px 12px rgba(0,0,0,0.45), inset 0 -3px 12px rgba(255,255,255,0.04); } /* ============ FLOATING SOCIAL ISLAND ============ */ /* Styled after the client's gold/black business card: a pale ivory pill holding gold-ringed badge buttons (echoes the card's circular gold seal), icon glyphs enlarged ~3x over the original mark. Colors are hardcoded rather than themed tokens — deliberately theme-invariant, the same way --panel-dark/--panel-darker stay constant, so this stays the client's "light" card look even when the rest of the page is in dark mode. */ .social-island{ position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; gap:10px; padding:11px 9px; border-radius:999px; background:#FFFFFF; box-shadow:0 20px 45px -20px rgba(20,16,8,0.4); border:1.5px solid #C6A567; } .social-island a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; background:#F6F1E6; border:1.5px solid rgba(198,165,103,0.55); box-shadow:0 8px 18px -12px rgba(20,16,8,0.3); } .social-island a:hover{ background:#EFE6CC; box-shadow:0 10px 22px -10px rgba(20,16,8,0.35); } /* no transform:scale here on purpose — this is a position:fixed island sitting outside any section, so any transform that paints past its own box can grow the page's scrollable area and pop a horizontal scrollbar, which narrows the viewport and visibly shifts this whole right-anchored menu left. Background + shadow give the same "lit up" hover feedback without that risk. */ .social-island a svg{ width:25px; height:25px; stroke:#97772E; fill:none; } .social-island a.phone svg{ fill:#97772E; stroke:none; } @media (max-width:900px){ /* anchor to the bottom-right corner instead of vertical-center — mid-screen placement overlaps body copy once real content fills a narrow viewport. */ .social-island{ top:auto; bottom:14px; right:12px; transform:none; gap:7px; padding:8px 6px; } .social-island a{ width:30px; height:30px; } .social-island a svg{ width:17px; height:17px; } } /* ============ NAV ============ */ header.nav{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:var(--maxw); margin:0 auto; } .brand-mark{ display:flex; flex-direction:column; line-height:1; text-decoration:none; color:var(--ink); } .brand-mark .b1{ font-family:"Montserrat"; font-weight:800; font-size:1.55rem; letter-spacing:0.07em; } .brand-mark .b2{ font-family:"EB Garamond"; font-style:italic; font-weight:500; font-size:0.98rem; letter-spacing:0.22em; color:var(--gold-deep); margin-top:3px;} nav.links{ display:flex; align-items:center; gap:17px; } nav.links a{ font-size:0.69rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); position:relative; padding:6px 0; transition:color .2s ease; white-space:nowrap; } nav.links a:hover{ color:var(--ink); } nav.links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } nav.links a:hover::after{ transform:scaleX(1); } nav.links a.active{ color:var(--ink); } nav.links a.active::after{ transform:scaleX(1); } .nav-cta{ display:flex; align-items:center; gap:18px; } .nav-cta .btn{ padding:11px 22px; font-size:0.72rem; } .burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; } .burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.25s; } @media (max-width:1220px){ nav.links{ position:fixed; top:64px; right:0; bottom:0; left:0; z-index:99; background:var(--paper); flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:36px 32px; gap:26px; transform:translateX(100%); transition:transform .35s ease; overflow-y:auto; } nav.links a{ font-size:1rem; } nav.links.open{ transform:translateX(0); } .burger{ display:block; } .nav-cta .btn-ghost{ display:none; } } /* ============ BREADCRUMB + PAGE INTRO (subpages) ============ */ .breadcrumb{ display:flex; align-items:center; gap:8px; font-size:0.76rem; color:var(--ink-soft); margin-bottom:20px; text-transform:uppercase; letter-spacing:0.05em; } .breadcrumb a{ text-decoration:none; color:var(--ink-soft); transition:color .2s ease; } .breadcrumb a:hover{ color:var(--gold-deep); } .breadcrumb span{ color:var(--gold-deep); } .page-intro{ position:relative; overflow:hidden; padding:64px 0 58px; background: radial-gradient(ellipse 520px 360px at 88% -10%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%), radial-gradient(ellipse 420px 340px at -6% 30%, color-mix(in srgb, var(--ink) 12%, transparent), transparent 70%), var(--paper); border-bottom:1px solid var(--line); } .page-intro h1{ font-size:clamp(2.1rem, 3.8vw, 3.1rem); line-height:1.1; } .page-intro .lead{ margin-top:16px; font-size:1.05rem; max-width:60ch; } .page-intro-arc{ position:absolute; right:-200px; top:-220px; width:520px; height:520px; border-radius:50%; border:1px solid var(--line); pointer-events:none; } /* ============ HERO (Početna) ============ */ .hero{ position:relative; padding:88px 0 76px; overflow:hidden; background: radial-gradient(ellipse 620px 420px at 82% -6%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%), radial-gradient(ellipse 520px 420px at -4% 18%, color-mix(in srgb, var(--ink) 14%, transparent), transparent 70%), var(--paper); } .hero-arc{ position:absolute; right:-220px; top:-220px; width:760px; height:760px; border-radius:50%; border:1px solid var(--line); pointer-events:none; } .hero-arc.two{ right:-340px; top:-140px; width:900px; height:900px; opacity:0.6; } .hero-inner{ position:relative; display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; } .hero-intro{ position:relative; max-width:760px; } .hero-eyebrow{ margin-bottom:22px; } .hero h1{ font-size:clamp(2.5rem, 5.4vw, 4.3rem); line-height:1.06; letter-spacing:-0.01em; } .hero h1 em{ font-style:italic; color:var(--gold-deep); font-weight:500; } .hero p.lead{ margin-top:26px; font-size:1.12rem; max-width:52ch; } .hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; } .hero-signature{ margin-top:56px; display:flex; gap:18px; align-items:flex-start; padding-top:30px; border-top:1px solid var(--line); max-width:52ch; } .hero-signature .num{ font-family:"EB Garamond"; font-style:italic; font-size:2rem; color:var(--gold-deep); line-height:1;} .hero-signature p{ font-size:0.92rem; } .hero-signature strong{ color:var(--ink); font-weight:600; } /* The stats card ("20+ godina iskustva...") has two copies in the markup — one beside the hero text (desktop, original spot), one after the atmosphere banner (mobile only) — CSS toggles which one is shown so only a single copy is ever visible at a given width. */ .hero-card-slot-desktop{ display:block; } .hero-card-slot-mobile{ display:none; } @media (max-width:960px){ .hero-inner{ grid-template-columns:1fr; } .hero-card-slot-desktop{ display:none; } .hero-card-slot-mobile{ display:block; margin-top:48px; } } .hero-card{ position:relative; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:46px 38px; border:1px solid var(--line); color:#F3EFE3; } .hero-card .ring{ width:96px; height:96px; border-radius:50%; border:1px solid rgba(243,239,227,0.55); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; } .hero-card .ring svg{ width:44px; height:44px; } .hero-card h3{ text-align:center; font-size:1.5rem; color:#F3EFE3; } .hero-card p{ text-align:center; margin-top:10px; font-size:0.94rem; color:rgba(243,239,227,0.78); } .hero-card .stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; } .hero-card .stat{ text-align:center; padding:20px 8px; background:rgba(243,239,227,0.08); border-radius:var(--radius-md); border:1px solid rgba(198,165,103,0.28); } .hero-card .stat b{ display:block; font-family:"Montserrat"; font-weight:800; font-size:1.7rem; color:#E9CE94; } .hero-card .stat span{ font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; color:rgba(243,239,227,0.68); } /* ============ BAND PHOTO (Početna) ============ */ /* Framed panel instead of a photo floating loose on bare paper — a soft warm backdrop, brand seal, and a candid accent shot make the section read as a considered photo spread rather than a single cut-out PNG. */ .band-photo-frame{ position:relative; max-width:900px; margin:0 auto 56px; border-radius:var(--radius-lg); padding:52px 44px 0; background: radial-gradient(ellipse 480px 320px at 10% 6%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%), radial-gradient(ellipse 440px 340px at 94% 98%, color-mix(in srgb, var(--ink) 10%, transparent), transparent 70%), var(--paper-deep); border:1px solid var(--line); box-shadow:var(--shadow); } .band-photo-wrap{ display:flex; justify-content:center; align-items:flex-end; margin:0 auto; max-width:820px; } .band-photo{ width:100%; height:auto; max-width:100%; display:block; } .band-photo-badge{ position:absolute; z-index:3; right:40px; bottom:-30px; width:96px; height:96px; border-radius:50%; overflow:hidden; border:4px solid var(--paper); box-shadow:var(--shadow-sm); background:#141210; } .band-photo-badge img{ width:100%; height:100%; object-fit:cover; display:block; } .band-photo-accent{ position:absolute; z-index:3; left:38px; top:-28px; width:128px; height:128px; border-radius:var(--radius-md); overflow:hidden; border:4px solid var(--paper); box-shadow:var(--shadow-sm); transform:rotate(-4deg); } .band-photo-accent img{ width:100%; height:100%; object-fit:cover; display:block; } /* Two more candid corners — Dijana top-right (mirrors Aleksandar top-left), Slađan bottom-left (mirrors the brand-seal badge bottom-right) — so all three members get an equal little snapshot around the group photo. */ .band-photo-accent-2{ position:absolute; z-index:3; right:38px; top:-28px; width:128px; height:128px; border-radius:var(--radius-md); overflow:hidden; border:4px solid var(--paper); box-shadow:var(--shadow-sm); transform:rotate(5deg); } .band-photo-accent-2 img{ width:100%; height:100%; object-fit:cover; display:block; } .band-photo-accent-3{ position:absolute; z-index:3; left:40px; bottom:-30px; width:112px; height:112px; border-radius:var(--radius-md); overflow:hidden; border:4px solid var(--paper); box-shadow:var(--shadow-sm); transform:rotate(-6deg); } .band-photo-accent-3 img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:640px){ /* Bleed the frame past .wrap's own 20px side padding so the group photo actually reads bigger on a phone, instead of shrinking further inside both the frame's padding AND the page gutter. */ .band-photo-frame{ margin-left:-20px; margin-right:-20px; border-radius:0; padding:34px 16px 0; } .band-photo-badge{ width:72px; height:72px; right:16px; bottom:-22px; } .band-photo-accent{ width:92px; height:92px; left:12px; top:-20px; } .band-photo-accent-2{ width:92px; height:92px; right:12px; top:-20px; } .band-photo-accent-3{ width:80px; height:80px; left:12px; bottom:-20px; } } /* ============ MEMBERS ============ */ .members-lead{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; margin-bottom:56px; align-items:stretch;} @media (max-width:860px){ .members-lead{ grid-template-columns:1fr; } } .pull-panel{ border-radius:var(--radius-lg); padding:38px 34px; display:flex; align-items:center; } blockquote.pull{ margin:0; padding:0 0 0 22px; border-left:2px solid rgba(198,165,103,0.55); font-family:"EB Garamond"; font-style:italic; font-size:1.32rem; color:#F3EFE3; line-height:1.5; } blockquote.pull cite{ display:block; margin-top:14px; font-family:"Montserrat"; font-style:normal; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(243,239,227,0.7); } .members-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:760px){ .members-grid{ grid-template-columns:1fr; } } /* ============ ATMOSPHERE BANNER (blurred band photo as mood background) ============ */ .atmosphere-banner{ position:relative; overflow:hidden; border-radius:var(--radius-lg); min-height:56vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 40px; background-size:cover; background-position:center 32%; } .atmosphere-banner::before{ content:""; position:absolute; inset:-20px; background:inherit; background-size:cover; background-position:center 32%; filter:blur(13px) brightness(0.86) saturate(1.05); transform:scale(1.08); z-index:0; } .atmosphere-banner::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(13,11,8,0.48), rgba(13,11,8,0.76)); } .atmosphere-content{ position:relative; z-index:2; max-width:680px; } .atmosphere-content .eyebrow{ justify-content:center; color:#E9CE94; } .atmosphere-content .eyebrow::before{ background:#E9CE94; } .atmosphere-quote{ margin-top:18px; font-family:"EB Garamond"; font-style:italic; color:#F7F3E8; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.55; } @media (max-width:900px){ .atmosphere-banner{ min-height:48vh; } } @media (max-width:640px){ .atmosphere-banner{ min-height:380px; padding:56px 24px; background-position:center 28%; } .atmosphere-banner::before{ background-position:center 28%; } } .member-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 24px; text-align:center; transition:transform .3s ease, box-shadow .3s ease; } .member-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); } .member-card h3{ font-size:1.18rem; } .member-card .role{ margin-top:8px; font-size:0.84rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold-deep); } /* ============ TERMINI (CTA STRIP) ============ */ .cta-strip{ border-radius:var(--radius-lg); padding:56px 52px; color:#F3EFE3; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cta-strip .eyebrow{ color:#E9CE94; } .cta-strip .eyebrow::before{ background:#E9CE94; } .cta-strip h2{ color:#F3EFE3; font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:10px; max-width:30ch; } .cta-strip p{ color:#D8D0C0; margin-top:12px; max-width:46ch; font-size:0.98rem; } .cta-strip .btn-primary{ background:#F3EFE3; color:#17140F; } .cta-strip .phone{ font-family:"EB Garamond"; font-size:1.5rem; font-style:italic; } /* Calendar card + reservation note side by side — fills the wide gutter next to the calendar instead of stacking a short note above/below a tall card. */ .termini-columns{ display:grid; grid-template-columns:2fr 1fr; gap:28px; align-items:stretch; margin-top:104px; /* extra room below the dark cta-strip, was reading cramped */ } @media (max-width:900px){ .termini-columns{ grid-template-columns:1fr; margin-top:76px; } } .termini-notice{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; padding:32px 28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); } .termini-notice .mark{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); font-family:"EB Garamond"; font-style:italic; font-size:1.1rem;} /* Google Calendar embed — same live calendar the client already updates by hand from his phone/computer, just wrapped in a card that matches the rest of the site. The calendar's own internal grid/colors are Google's and stay fixed (cross-origin iframe, no CSS access) — only this outer frame is ours. */ .calendar-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; } .calendar-card-head{ padding:40px 40px 6px; } .calendar-card-head h3{ font-size:1.5rem; margin-top:10px; } .calendar-card-head p{ margin-top:12px; max-width:58ch; } .calendar-embed{ margin:22px 40px 0; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--paper-deep); } .calendar-embed iframe{ width:100%; height:600px; display:block; } .calendar-open-link{ display:inline-flex; align-items:center; gap:7px; margin:18px 40px 36px; font-family:"Montserrat"; font-weight:600; font-size:0.82rem; letter-spacing:0.04em; color:var(--gold-deep); text-decoration:none; transition:color .2s ease, transform .2s ease; } .calendar-open-link:hover{ color:var(--ink); transform:translateX(2px); } @media (max-width:640px){ .calendar-card-head{ padding:30px 22px 6px; } .calendar-embed{ margin:18px 14px 0; } .calendar-embed iframe{ height:480px; } .calendar-open-link{ margin:14px 22px 28px; } } /* ============ REPERTOAR ============ */ .repertoar-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; } @media (max-width:860px){ .repertoar-grid{ grid-template-columns:1fr; gap:40px; } } .repertoar-grid p + p{ margin-top:20px; } .feature-list{ display:flex; flex-direction:column; gap:22px; padding:28px; border-radius:var(--radius-lg); } .feature{ display:flex; gap:18px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); } .feature .mark{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); font-family:"EB Garamond"; font-style:italic; } .feature h4{ font-family:"Montserrat"; font-weight:600; font-size:0.95rem; margin:0 0 6px; color:var(--ink); } .feature p{ font-size:0.9rem; } /* ============ GALLERY ============ */ .gallery-band{ padding:48px 40px; border-radius:var(--radius-lg); } .gallery-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; gap:14px; } @media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } } .tile{ border-radius:var(--radius-md); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:18px; isolation:isolate; border:1px solid rgba(198,165,103,0.22); transition:border-color .35s ease, box-shadow .35s ease; } .tile:hover{ border-color:rgba(198,165,103,0.7); box-shadow:0 18px 40px -18px rgba(20,16,8,0.5); } .tile-img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease; filter:saturate(0.94); } .tile:hover .tile-img{ transform:scale(1.09) rotate(0.6deg); filter:saturate(1.08); } .tile::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 34%, rgba(13,11,8,0.6)); transition:background .35s ease; } .tile:hover::after{ background:linear-gradient(180deg, rgba(13,11,8,0.12) 0%, transparent 38%, rgba(13,11,8,0.72) 100%); } .tile span{ position:relative; z-index:2; color:#F3EFE3; font-family:"Montserrat"; font-weight:600; font-size:0.9rem; letter-spacing:0.05em; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,0.35); transform:translateY(2px); transition:transform .35s ease; } .tile:hover span{ transform:translateY(-2px); } .tile-expand{ position:absolute; z-index:2; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(233,206,148,0.7); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-6px) scale(0.85); transition:opacity .3s ease, transform .3s ease; background:rgba(20,16,8,0.35); backdrop-filter:blur(2px); } .tile:hover .tile-expand{ opacity:1; transform:translateY(0) scale(1); } .tile-expand svg{ width:14px; height:14px; stroke:#E9CE94; fill:none; } .t1{ grid-column:span 4; grid-row:span 3; } .t2{ grid-column:span 2; grid-row:span 3; } .t3{ grid-column:span 2; grid-row:span 3; } .t4{ grid-column:span 2; grid-row:span 3; } .t5{ grid-column:span 2; grid-row:span 3; } .t6{ grid-column:span 3; grid-row:span 2; } .t7{ grid-column:span 3; grid-row:span 2; } @media (max-width:760px){ .t1,.t2,.t3,.t4,.t5,.t6,.t7{ grid-column:span 1; grid-row:span 2; } } .tile{ cursor:pointer; } .tile:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } /* ============ GALLERY LIGHTBOX (click a tile to enlarge) ============ */ html.lightbox-lock{ overflow:hidden; } .lightbox{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:64px 32px; background:rgba(10,8,6,0.92); opacity:0; visibility:hidden; transition:opacity .3s ease; } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox-backdrop{ position:absolute; inset:0; } .lightbox-inner{ position:relative; z-index:1; max-width:min(1100px,92vw); } .lightbox-img{ display:block; width:auto; height:auto; max-width:100%; max-height:80vh; margin:0 auto; border-radius:var(--radius-md); box-shadow:0 30px 70px -20px rgba(0,0,0,0.6); } .lightbox-caption{ margin-top:18px; text-align:center; color:#F3EFE3; font-family:"Montserrat"; font-weight:600; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; } .lightbox-close{ position:absolute; z-index:2; top:-48px; right:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(233,206,148,0.5); background:rgba(20,16,8,0.7); color:#E9CE94; display:flex; align-items:center; justify-content:center; cursor:pointer; } .lightbox-close svg{ width:16px; height:16px; } .lightbox-close:hover{ border-color:rgba(233,206,148,0.9); } @media (max-width:640px){ .lightbox{ padding:22px 16px; } .lightbox-close{ top:auto; bottom:-52px; right:50%; transform:translateX(50%); } } /* ============ VIDEO ============ */ .video-card{ display:grid; grid-template-columns:1.1fr 0.9fr; align-items:stretch; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); } @media (max-width:860px){ .video-card{ grid-template-columns:1fr; } } /* The video now ships as a real .mp4 file alongside the page (the client sent the actual export), played with the browser's native