/* Theme Name: Amir Mousavi Theme URI: https://byamir.ir Author: Amir Mousavi Description: قالب اختصاصی پورتفولیوی امیر موسوی، بازیگر و کارگردان تئاتر و سینما. قالب بلوکی کامل (Full Site Editing) با پشتیبانی راست‌به‌چپ. Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.0 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: amir-mousavi Tags: full-site-editing, block-patterns, rtl-language-support, one-column, custom-colors, custom-logo, portfolio */ :root{ --ink: var(--wp--preset--color--ink); --ink-2: var(--wp--preset--color--ink-2); --ink-3: var(--wp--preset--color--ink-3); --curtain: var(--wp--preset--color--curtain); --curtain-deep: var(--wp--preset--color--curtain-deep); --curtain-bright: var(--wp--preset--color--curtain-bright); --gold: var(--wp--preset--color--gold); --gold-soft: var(--wp--preset--color--gold-soft); --gold-dim: var(--wp--preset--color--gold-dim); --parchment: var(--wp--preset--color--parchment); --parchment-dim: var(--wp--preset--color--parchment-dim); --parchment-faint: var(--wp--preset--color--parchment-faint); --line:rgba(242,232,218,.14); --line-strong:rgba(242,232,218,.28); --shadow-soft:0 20px 50px rgba(0,0,0,.4); --shadow-hard:0 30px 70px rgba(0,0,0,.55); --radius-s:3px; --radius-m:8px; --ease:cubic-bezier(.16,.8,.24,1); --dur-s:200ms; --dur-m:420ms; --dur-l:900ms; --font-display: var(--wp--preset--font-family--display); --font-heading: var(--wp--preset--font-family--heading); --font-body: var(--wp--preset--font-family--body); --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.25rem; --space-5:3.5rem; --space-6:5rem; --space-7:3.5rem; } *,*::before,*::after{box-sizing:border-box;} /* overflow-y:scroll (not the default auto) keeps the scrollbar gutter permanently reserved — otherwise the moment the mobile nav locks body scroll (position:fixed), the scrollbar vanishes, the viewport briefly widens by its width, and every full-bleed fixed element (.nav, .hero-bg) snaps to the new width for one frame: a visible flash on open. */ html{-webkit-text-size-adjust:100%; overflow-x:hidden; overflow-y:scroll; max-width:100%;} body{margin:0;background:var(--ink); overflow-x:hidden; max-width:100%; overscroll-behavior-x:none;} .amir-theme{ font-family:var(--font-body); background:var(--ink); color:var(--parchment); line-height:1.7; font-size:16px; overflow-x:hidden; max-width:100vw; overscroll-behavior-x:none; } .amir-theme img{max-width:100%;display:block;} .amir-theme a{color:inherit;} .amir-theme button{font-family:inherit;} .amir-theme ::selection{background:var(--curtain);color:var(--parchment);} .amir-theme :focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:2px; } @media (prefers-reduced-motion:reduce){ .amir-theme *,.amir-theme *::before,.amir-theme *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } .container{ max-width:76rem; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); } .eyebrow{ font-size:.78rem; letter-spacing:.14em; color:var(--gold-soft); font-weight:600; display:flex; align-items:center; gap:.6em; margin:0 0 var(--space-2); } .eyebrow::before{ content:""; width:1.4em; height:1px; background:var(--gold); display:inline-block; } .amir-theme h1,.amir-theme h2,.amir-theme h3{ font-weight:700; margin:0; text-wrap:balance; color:var(--parchment); } .amir-theme h1{font-family:var(--font-display);} .amir-theme h2,.amir-theme h3{font-family:var(--font-heading);} .amir-theme h2{font-size:clamp(1.9rem,1.5rem + 1.8vw,2.7rem); line-height:1.28;} .amir-theme h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem); line-height:1.4;} .amir-theme p{margin:0;} .lede{ font-size:1.1rem; color:var(--parchment-dim); max-width:none; text-wrap:pretty; text-align:justify; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.9em 1.7em; border-radius:var(--radius-s); font-size:.95rem; font-weight:600; cursor:pointer; border:1px solid transparent; transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease); text-decoration:none; min-height:44px; } .btn:active{transform:scale(.97);} .btn-primary{background:var(--gold); color:var(--ink);} .btn-primary:hover{background:var(--gold-soft); box-shadow:0 8px 24px rgba(201,160,74,.28);} .btn-ghost{background:transparent; color:var(--parchment); border-color:var(--line-strong);} .btn-ghost:hover{border-color:var(--gold); color:var(--gold-soft);} /* ---------- Nav ---------- */ .nav{ position:fixed; inset-inline:0; top:0; z-index:60; padding-block:1.1rem; transition:background var(--dur-m) var(--ease), padding var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease); border-bottom:1px solid transparent; } .nav.is-scrolled{ background:rgba(21,10,10,.86); backdrop-filter:blur(10px); padding-block:.75rem; border-color:var(--line); } /* .nav-links (the full-screen mobile menu) is a descendant of .nav and is position:fixed; inset:0, meant to size itself to the real viewport. A backdrop-filter on .nav — active here once scrolled — makes .nav the containing block for that fixed child instead of the viewport, shrinking the "full screen" menu down to .nav's own slim bar. Dropped only while the menu is open (menu-open, toggled in theme.js); the opaque full-screen menu already hides the bar underneath, so there's nothing lost visually. */ .nav.menu-open{backdrop-filter:none;} .nav-row{display:flex; align-items:center; justify-content:space-between; gap:1.5rem;} .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; text-decoration:none; color:var(--parchment); } /* No static logo asset — this is just the reserved size/shadow treatment for the mark; the actual image always comes from WordPress (Appearance -> لوگو و هویت سایت). Empty box (no image) until one is uploaded there. */ .brand-mark{ display:inline-block; flex-shrink:0; width:28px; height:31px; filter:drop-shadow(0 0 8px rgba(201,160,74,.5)); } /* Uploaded logo: scale by height, width follows its own aspect ratio, instead of being squeezed into the default mark's fixed portrait box. */ .brand-mark-img{ width:auto; height:34px; object-fit:contain; } .nav-mark{ font-size:4rem; line-height:1; letter-spacing:.01em; color:var(--gold-soft); text-shadow:0 0 24px rgba(201,160,74,.45); } .nav .brand{gap:.35rem;} .nav .brand-mark{width:32px; height:36px;} .nav .brand-mark-img{width:auto; height:44px;} @media (max-width:860px){ .nav-mark{font-size:3.6rem; position:relative; top:-6px;} } .nav-links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); list-style:none; margin:0; padding:0; } .nav-links a{ text-decoration:none; color:var(--parchment-dim); font-size:.92rem; font-weight:500; position:relative; padding-block:.3rem; transition:color var(--dur-s) var(--ease); } .nav-links a::after{ content:""; position:absolute; inset-inline:0; bottom:-2px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform var(--dur-m) var(--ease); } .nav-links a:hover{color:var(--parchment);} .nav-links a:hover::after{transform:scaleX(1);} .nav-cta{display:flex; align-items:center; gap:1rem;} .nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:var(--radius-s); width:44px; height:44px; align-items:center; justify-content:center; color:var(--parchment); cursor:pointer; position:relative; z-index:80; transition:border-color var(--dur-s) var(--ease); } .nav-toggle:hover{border-color:var(--gold);} .nav-toggle .bar-top,.nav-toggle .bar-mid,.nav-toggle .bar-bottom{ transform-origin:center; transition:transform var(--dur-m) var(--ease), opacity var(--dur-s) var(--ease); } .nav-toggle.is-active .bar-top{transform:translateY(6px) rotate(45deg);} .nav-toggle.is-active .bar-mid{opacity:0;} .nav-toggle.is-active .bar-bottom{transform:translateY(-6px) rotate(-45deg);} @media (max-width:860px){ .nav-links{ position:fixed; inset:0; z-index:70; background:linear-gradient(160deg,var(--ink-2),var(--ink)); flex-direction:column; justify-content:center; gap:2rem; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); overscroll-behavior:none; touch-action:none; } .nav-links.is-open{opacity:1; pointer-events:auto; transform:translateY(0);} .nav-links a{font-size:1.4rem;} .nav-cta .btn-primary{display:none;} .nav-toggle{display:inline-flex;} /* --- BEGIN curtain-style staggered menu reveal (easy to remove: delete from here down to END, nothing else references it) --- Links cascade in one by one on open instead of the whole panel appearing at once; closing stays a single quick fade (no delay), so dismissing the menu doesn't feel slow. */ .nav-links li{ opacity:0; transform:translateY(10px); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); } .nav-links.is-open li{opacity:1; transform:translateY(0);} .nav-links.is-open li:nth-child(1){transition-delay:.05s;} .nav-links.is-open li:nth-child(2){transition-delay:.1s;} .nav-links.is-open li:nth-child(3){transition-delay:.15s;} .nav-links.is-open li:nth-child(4){transition-delay:.2s;} .nav-links.is-open li:nth-child(5){transition-delay:.25s;} .nav-links.is-open li:nth-child(6){transition-delay:.3s;} .nav-links.is-open li:nth-child(7){transition-delay:.35s;} .nav-links.is-open li:nth-child(8){transition-delay:.4s;} .nav-links.is-open li:nth-child(9){transition-delay:.45s;} /* --- END curtain-style staggered menu reveal --- */ } /* ---------- Progress rail ---------- */ .act-rail{ position:fixed; inset-inline-start:1.4rem; top:50%; transform:translateY(-50%); z-index:55; display:flex; flex-direction:column; align-items:center; gap:.85rem; } /* DEMO — idea #2: a spotlight that glides down the rail to the active dot, like a stage light following the actor from scene to scene. */ .act-spotlight{ position:absolute; left:50%; top:0; width:38px; height:38px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(circle, rgba(201,160,74,.55) 0%, rgba(201,160,74,.22) 45%, transparent 72%); filter:blur(1px); transition:top .5s cubic-bezier(.16,1,.3,1); } .act-rail::before{ content:""; position:absolute; top:-1.6rem; bottom:-1.6rem; inset-inline-start:50%; width:1px; background:var(--line); transform:translateX(-50%); z-index:-1; } .act-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); border:none; padding:0; cursor:pointer; position:relative; transition:background var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); } .act-dot::after{ content:attr(data-label); position:absolute; inset-inline-start:1.4rem; top:50%; transform:translateY(-50%); font-size:.72rem; color:var(--parchment-dim); white-space:nowrap; opacity:0; transition:opacity var(--dur-s) var(--ease); pointer-events:none; } .act-dot:hover::after{opacity:1;} .act-dot.is-active{background:var(--gold); transform:scale(1.5);} @media (max-width:960px){ .act-rail{display:none;} } /* WP's automatic gap between root-level blocks (header -> main, and main -> footer) leaves unpainted seams above and below the page content; the hero being full-bleed and fixed behind everything now (see .hero below) means anything unpainted lets it show through, so cancel both. */ /* The 100dvh reservation used to live as margin-top on #about specifically — but with sections now individually toggleable, #about can be display:none, which collapses that margin and breaks the pinned-hero space for whichever section ends up first instead. Reserved on main#top itself so it holds regardless of which section (if any) renders first. Scoped to .has-fixed-hero (front-page.html only) — main#top is shared by every template (blog index, single post, page, 404), none of which have the fixed .hero this space is reserved for; applying it everywhere pushed all of those pages' content down by a full viewport height for nothing. */ main#top{margin-top:0;} main#top.has-fixed-hero{padding-top:100dvh;} footer.wp-block-template-part{margin-top:0;} /* ---------- Hero / slider ---------- */ /* DEMO — parallax/pinned hero: hero stays fixed to the viewport while the rest of the page scrolls up and over it. main's top padding (above) is the matching reservation, so nothing jumps when the hero comes out of flow via position:fixed below. */ .hero{ position:fixed; inset:0; z-index:0; min-height:100dvh; overflow:hidden; background:var(--ink); display:flex; align-items:flex-end; padding-top:5.5rem; contain:layout paint; max-width:100%; /* Keeps this always-present fixed layer permanently GPU-composited on its own layer rather than one the browser creates/tears down on the fly — smooths out the continuous scroll-driven filter/transform below. */ will-change:filter, transform; } .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; opacity:0; transform:scale(1.12); clip-path:inset(10% 0 10% 0); animation:hero-photo-in 1.7s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.15s; } .hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(10,5,5,.94) 4%,rgba(10,5,5,.35) 46%,rgba(10,5,5,.55) 100%); } @keyframes hero-photo-in{ 0%{opacity:0; transform:scale(1.12); clip-path:inset(10% 0 10% 0);} 100%{opacity:1; transform:scale(1); clip-path:inset(0 0 0 0);} } /* Scroll-driven soft-focus: native CSS, tied directly to the scrollbar instead of a JS scroll handler. Browsers without support keep working via the JS fallback in theme.js (which feature-detects and steps aside here). */ @supports (animation-timeline: scroll()) { @keyframes hero-scroll-focus{ to{ filter:blur(10px) brightness(.65); } } @keyframes hero-scroll-zoom{ to{ transform:scale(1.06); } } .hero{ animation-name:hero-scroll-focus; animation-duration:1ms; /* irrelevant once driven by scroll(), required for validity */ animation-timing-function:linear; animation-fill-mode:both; animation-timeline:scroll(root block); animation-range:0 90vh; } .hero-bg{ animation-name:hero-photo-in, hero-scroll-zoom; animation-duration:1.7s, 1ms; animation-timing-function:cubic-bezier(.16,1,.3,1), linear; animation-delay:.15s, 0s; animation-fill-mode:forwards, both; animation-timeline:auto, scroll(root block); animation-range:normal, 0 90vh; animation-composition:replace, add; } } .hero-content{ position:relative; z-index:2; padding-block:0 clamp(3rem,8vh,5.5rem); width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(2rem,5vw,4rem); flex-wrap:wrap; } .hero-text{flex:1 1 26rem; min-width:0;} .hero-text .eyebrow.hero-in{--d:.5s;} .hero-in{ opacity:0; transform:translateY(26px); animation:hero-text-in 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,.5s); } @keyframes hero-text-in{ to{opacity:1; transform:translateY(0);} } .hero-stats{ flex:0 0 auto; display:flex; flex-direction:column; gap:1.15rem; padding-inline-start:1.6rem; border-inline-start:1px solid var(--line-strong); } .hero-stat{display:flex; align-items:center; gap:.85rem;} .hero-stat-icon{width:28px; height:28px; color:var(--gold); flex-shrink:0;} .hero-stat-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-soft); font-variant-numeric:tabular-nums; display:block; line-height:1.1; } .hero-stat-label{color:var(--parchment-dim); font-size:.8rem; display:block; margin-top:.1rem;} .hero-resume-btn{ margin-top:.4rem; width:100%; justify-content:center; font-size:.83rem; padding:.65em 1.1em; gap:.5em; } .hero-resume-btn svg{width:15px; height:15px;} .hero-name{ font-size:clamp(2.6rem,1.9rem + 4.2vw,5.2rem); line-height:1.06; margin-block:.5rem .9rem; color:var(--parchment); text-shadow:0 2px 40px rgba(0,0,0,.5); } .hero-tag{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem); color:var(--parchment-dim); max-width:34rem; margin-bottom:2rem;} .hero-actions{display:flex; gap:1rem; flex-wrap:wrap;} @media (max-width:640px){ .hero-content{padding-block:0 2.6rem; gap:.65rem;} .hero-text .eyebrow{margin-bottom:.25rem;} .hero-name{margin-block:.1rem .2rem;} .hero-tag{margin-bottom:.55rem;} .hero-actions{gap:.5rem; justify-content:center;} .hero-stats{ flex:1 1 100%; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.6rem .8rem; padding-inline-start:0; border-inline-start:none; padding-top:.6rem; border-top:1px solid var(--line-strong); } /* Not justify-content:center — centering the icon+text as one unit made each row's icon sit at a different distance from the cell edge depending on that row's label length, so the icons never lined up into a straight column across rows. Packing from the (RTL) start edge, same as desktop, keeps every icon at the same fixed offset regardless of label width. */ .hero-stat{justify-content:flex-start;} .hero-resume-btn{ grid-column:1 / -1; margin-top:.2rem; } } .hero-scroll-cue{ position:absolute; z-index:2; bottom:1.6rem; inset-inline:0; display:flex; justify-content:center; color:var(--parchment-faint); opacity:0; animation:hero-text-in .8s ease forwards, bob 2.4s ease-in-out 2.1s infinite; animation-delay:1.3s, 2.1s; } .hero-scroll-cue svg{width:22px; height:22px;} @keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} } @media (max-width:640px){ .hero-scroll-cue{bottom:.5rem;} } /* Mirrored against .about-grid on purpose: about's portrait sits on the right (narrow track) with text on the wide left track, so production swaps sides — text on the right (narrow), poster on the left (wide) — for visual rhythm between the two, instead of both images sitting on the same side. */ .production-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;} .prod-content{order:1;} .production-art{ order:2; aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden; position:relative; background-color:var(--ink-3); box-shadow:var(--shadow-hard); border:1px solid var(--line-strong); } .production-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;} .production-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(124,31,42,.4), rgba(0,0,0,.15) 60%); box-shadow:inset 0 0 60px rgba(0,0,0,.55); } @media (max-width:800px){ .production-grid{grid-template-columns:1fr;} .prod-content{order:1;} .production-art{order:2;} } .prod-title{font-size:clamp(2rem,1.5rem + 2.8vw,3.6rem); color:var(--gold-soft); margin-block:.6rem 1rem;} .prod-meta{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; color:var(--parchment-dim); font-size:.95rem; margin-bottom:1.3rem;} .prod-meta span{display:flex; align-items:center; gap:.5rem;} .prod-meta svg{width:16px; height:16px; opacity:.8;} .prod-status{display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; letter-spacing:.05em; color:var(--gold-soft); margin-bottom:.6rem;} .prod-status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px 2px rgba(201,160,74,.5);} .interview{background:radial-gradient(120% 140% at 50% 0%, var(--ink-3), var(--ink) 65%);} .interview-inner{max-width:50rem; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center;} .quote-mark{width:34px; height:26px; color:var(--gold); opacity:.85; margin-bottom:1rem;} .hero-quote{font-family:var(--font-display); font-size:clamp(1.5rem,1.2rem + 2vw,2.6rem); line-height:1.5; max-width:40rem; color:var(--parchment);} .hero-quote-by{margin-top:1.2rem; color:var(--parchment-faint); font-size:.92rem;} .hero-quote-by a{color:var(--gold-soft); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur-s) var(--ease);} .hero-quote-by a:hover{color:var(--gold);} /* ---------- Sections generic ---------- */ /* box-shadow (not margin/border — doesn't touch layout) bleeds each section's own solid background 1px past its own edge on both sides. Papers over a hairline seam some mobile browsers render between two adjacent position:relative siblings sitting in front of the fixed, blurred .hero — a sub-pixel compositing gap that otherwise lets a sliver of the hero show through exactly at the section-to-section boundary. */ .section{ padding-block:var(--space-7); background:var(--ink); position:relative; scroll-margin-top:110px; box-shadow:0 -1px 0 0 var(--ink), 0 1px 0 0 var(--ink); } @media (max-width:820px){ /* On mobile the About/Timeline content is taller than the viewport, so landing right at the nav-clearance line leaves the photo (or later timeline rows) mostly below the fold. Trim the offset down to just past the (shorter, scrolled-state) nav height so more of the section is visible after the jump, without re-hiding the heading behind it. */ .section{scroll-margin-top:52px;} } /* Soften the seam where #about meets the (blurred, fixed) hero underneath — a hard opaque edge looked too sharp against the soft-focus hero, so fade into it instead of cutting straight across. Only the bottom hairline-seam fix (not top) applies here — the transparent top edge is deliberate, and a solid 1px cap there would draw a hard line across the intended blend. */ #about{ background:linear-gradient(to bottom, transparent 0, var(--ink) 220px, var(--ink) 100%); box-shadow:0 1px 0 0 var(--ink); } .section-head{display:flex; flex-direction:column; gap:1rem; margin-bottom:var(--space-5);} /* DEMO — idea #3: theater marquee-sign glow on big section titles. */ .section-head h2{ text-shadow:0 0 10px rgba(201,160,74,.4), 0 0 24px rgba(201,160,74,.22), 0 0 46px rgba(201,160,74,.12); animation:marquee-glow 4.5s ease-in-out infinite; } @keyframes marquee-glow{ 0%,100%{text-shadow:0 0 10px rgba(201,160,74,.4), 0 0 24px rgba(201,160,74,.22), 0 0 46px rgba(201,160,74,.12);} 50%{text-shadow:0 0 14px rgba(201,160,74,.55), 0 0 32px rgba(201,160,74,.3), 0 0 60px rgba(201,160,74,.16);} } .divider{height:1px; background:linear-gradient(90deg,var(--line-strong),transparent); margin-block:var(--space-6);} [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); transition-delay:var(--d,0ms);} [data-reveal].is-in{opacity:1; transform:translateY(0);} /* ---------- About ---------- */ .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;} .about-portrait{ aspect-ratio:4/5; border-radius:var(--radius-m); overflow:hidden; position:relative; background-color:var(--ink-3); box-shadow:var(--shadow-hard); border:1px solid var(--line-strong); } .about-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 15%;} .about-portrait::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(0,0,0,.55);} /* Portrait slides into the frame from the right, instead of the generic fade-up every other [data-reveal] element uses. Watched directly (not via the parent grid — on mobile the grid is tall enough, text stacked above the photo, that observing it fired as soon as the text's top edge appeared, long before the photo itself was anywhere near view). */ .about-portrait[data-reveal]{opacity:0; transform:translateX(180px); transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);} .about-portrait[data-reveal].is-in{opacity:1; transform:translateX(0);} @media (max-width:800px){ /* less scroll distance needed to bring it fully into view on a small screen, so by the time it's noticed the 1.4s version has mostly already played out — slow it down here specifically. */ .about-portrait[data-reveal]{transition:opacity 2.6s var(--ease), transform 2.6s var(--ease);} } .about-body p + p{margin-top:1.1rem;} .about-body p{color:var(--parchment-dim); text-align:justify;} .about-body blockquote{ margin:1.8rem 0 0; padding-inline-start:1.2rem; border-inline-start:2px solid var(--gold); font-family:var(--font-display); font-size:1.3rem; color:var(--parchment); } .about-body blockquote p{color:inherit; text-align:start;} .pull-quote{ margin-top:1.8rem; padding-inline-start:1.2rem; border-inline-start:2px solid var(--gold); font-family:var(--font-display); font-size:1.3rem; color:var(--parchment); } @media (max-width:800px){ .about-grid{grid-template-columns:1fr;} .about-text{order:1;} .about-portrait{order:2;} } /* ---------- Timeline ---------- */ .timeline{position:relative; margin-inline-start:.4rem; padding-inline-start:2.2rem; border-inline-start:1px solid var(--line-strong);} .t-item{position:relative; padding-block:0 var(--space-4);} .t-item:last-child{padding-bottom:0;} .t-item::before{ content:""; position:absolute; inset-inline-start:calc(-2.2rem - 5px); top:.35rem; width:9px; height:9px; border-radius:50%; background:var(--ink); border:2px solid var(--gold); transition:background var(--dur-l) var(--ease), box-shadow var(--dur-l) var(--ease); } .t-item::after{ content:""; position:absolute; inset-inline-start:calc(-2.2rem - 5px); top:.35rem; width:9px; height:9px; border-radius:50%; pointer-events:none; box-shadow:0 0 26px 11px rgba(201,160,74,0); transition:box-shadow var(--dur-l) var(--ease); } .t-item.is-active::before{background:var(--gold); box-shadow:0 0 0 4px rgba(201,160,74,.22);} /* .t-beam below replaces the old halo entirely — leaving both on produced a faint squared-off seam where the two overlapped. */ .t-item.is-active::after{box-shadow:none;} .t-year{font-family:var(--font-display); color:var(--gold-soft); font-size:1.3rem; display:block; margin-bottom:.35rem; transition:text-shadow var(--dur-l) var(--ease);} .t-item.is-active .t-year{text-shadow:0 0 18px rgba(201,160,74,.55);} .t-text{color:var(--parchment-dim); max-width:36rem;} /* Dot sits centered on the row (behind the text vertically), instead of pinned near the top by the year — same on desktop and mobile now. */ .t-item::before, .t-item::after{top:50%; transform:translateY(-50%);} /* The dot itself reads like a little headlight bowl/reflector, and the glow is a proper radial spill from that one point — not a flat rectangle behind the whole row. Starts flush with the rail line/dot (0% stop fully solid, no box edge visible) and reaches almost to the end of the row. */ .t-beam{ /* box's right edge sits exactly flush with the rail line — light only stretches leftward from there, none of it bleeding past the line. */ position:absolute; inset-inline:-2.2rem 0; top:-1.5rem; bottom:-1.5rem; pointer-events:none; z-index:-1; background: radial-gradient(circle 32px at right center, rgba(231,205,147,1) 0%, rgba(231,205,147,.55) 40%, transparent 68%), radial-gradient(ellipse 410px 95px at right center, rgba(201,160,74,.32) 0%, rgba(201,160,74,.16) 40%, transparent 85%); opacity:0; transition:opacity var(--dur-l) var(--ease); } .t-item.is-active .t-beam{opacity:1;} /* ---------- Honors ---------- */ .honors-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem;} .honor-card{ background:linear-gradient(160deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius-m); padding:1.9rem; display:flex; gap:1.1rem; align-items:flex-start; transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); } .honor-card:hover{border-color:var(--gold-dim); transform:translateY(-3px); box-shadow:var(--shadow-soft);} .honor-icon{width:42px; height:42px; flex-shrink:0; color:var(--gold);} .honor-title{font-weight:600; color:var(--parchment); margin-bottom:.3rem;} .honor-meta{color:var(--parchment-faint); font-size:.87rem;} @media (max-width:760px){ .honors-grid{grid-template-columns:1fr;} } /* ---------- Workshops ---------- */ .workshop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:var(--space-5);} .workshop-card{ background:linear-gradient(160deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius-m); padding:2.2rem 1.75rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.9rem; transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); } .workshop-card:hover{border-color:var(--gold-dim); transform:translateY(-3px); box-shadow:var(--shadow-soft);} .workshop-card .honor-icon{width:38px; height:38px; color:var(--gold);} .workshop-card .honor-title{font-size:1.05rem;} .workshop-card .honor-meta{font-size:.88rem; line-height:1.65;} .workshop-cta{display:flex; justify-content:center; margin-top:var(--space-5);} @media (max-width:820px){ .workshop-grid{grid-template-columns:1fr;} } /* ---------- Works ---------- */ .works-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:var(--space-5);} .work-card{ background:linear-gradient(160deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius-m); padding:2.6rem 1.75rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); } .work-card:hover{border-color:var(--gold-dim); transform:translateY(-3px); box-shadow:var(--shadow-soft);} .work-icon{width:60px; height:60px; color:var(--gold);} .work-card .honor-title{font-size:1.15rem;} .work-card .honor-meta{font-size:.9rem; line-height:1.7;} @media (max-width:820px){ .works-grid{grid-template-columns:1fr;} } /* Mobile: as you scroll, whichever card is centered in view gets a subtle zoom to set it apart from the rest — the previous card relaxes back down as the next one takes focus. Driven by theme.js (nearest-to-center). */ @media (max-width:820px){ .work-card.is-focused, .honor-card.is-focused, .workshop-card.is-focused, .testimonial-card.is-focused{ transform:scale(1.045); border-color:var(--gold-dim); box-shadow:var(--shadow-hard); z-index:2; } } /* ---------- Gallery (photos come from FooGallery's admin UI, our own marquee display) ---------- */ .gallery-section{padding-inline:0;} .gallery-marquee{ overflow:hidden; position:relative; direction:ltr; margin-block:var(--space-5) var(--space-4); contain:layout paint; max-width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .gallery-track{ display:flex; gap:1.1rem; width:max-content; animation:gallery-scroll 38s linear infinite; padding-inline:1.5rem; } .gallery-marquee:hover .gallery-track{animation-play-state:paused;} @keyframes gallery-scroll{ from{transform:translateX(-50%);} to{transform:translateX(0);} } .gallery-item{ flex:0 0 auto; width:220px; aspect-ratio:3/4; border-radius:var(--radius-m); overflow:hidden; position:relative; cursor:pointer; border:1px solid var(--line); filter:saturate(.85) brightness(.88); transition:transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease), z-index 0s .45s; } .gallery-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .gallery-item::after{content:""; position:absolute; inset:0; pointer-events:none;} .gallery-item:nth-child(3n+1)::after{background:linear-gradient(160deg, rgba(124,31,42,.3), transparent 60%);} .gallery-item:nth-child(3n+2)::after{background:linear-gradient(160deg, rgba(201,160,74,.22), transparent 60%);} .gallery-item:nth-child(3n)::after{background:linear-gradient(160deg, rgba(0,0,0,.4), transparent 60%);} .gallery-item:hover{ transform:scale(1.1); z-index:5; box-shadow:var(--shadow-hard); filter:saturate(1) brightness(1); transition:transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease), z-index 0s; } .gallery-zoom{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,5,5,.35); opacity:0; transition:opacity .3s var(--ease); } .gallery-item:hover .gallery-zoom{opacity:1;} .gallery-zoom svg{width:26px; height:26px; color:var(--gold-soft);} .lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(5,2,2,.92); opacity:0; visibility:hidden; padding:2rem; transition:opacity .3s ease, visibility 0s .3s; } .lightbox.is-open{opacity:1; visibility:visible; transition:opacity .3s ease;} .lightbox-frame{ width:min(88vw,560px); aspect-ratio:3/4; border-radius:var(--radius-m); overflow:hidden; background-size:cover; background-position:center; box-shadow:var(--shadow-hard); border:1px solid var(--line-strong); transform:scale(.92); transition:transform .35s var(--ease); } .lightbox.is-open .lightbox-frame{transform:scale(1);} .lightbox-close{ position:absolute; top:1.5rem; inset-inline-end:1.5rem; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(21,10,10,.6); color:var(--parchment); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color var(--dur-s) var(--ease); } .lightbox-close:hover{border-color:var(--gold);} @media (max-width:640px){ .gallery-item{width:160px;} } /* ---------- Showreel ---------- */ .showreel-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--shadow-hard); margin-top:var(--space-5); background:#000; } .showreel-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .showreel-controls{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1.5rem; } .showreel-nav{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(21,10,10,.4); color:var(--parchment); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease); } .showreel-nav:hover{border-color:var(--gold); background:rgba(201,160,74,.12);} .showreel-nav svg{width:18px; height:18px;} .showreel-current-title{color:var(--parchment-dim); font-size:.95rem; min-width:12rem; text-align:center;} .showreel-note{color:var(--parchment-faint); font-size:.8rem; text-align:center; margin-top:.9rem;} @media (max-width:640px){ .showreel-current-title{min-width:0; font-size:.85rem;} } /* ---------- Press: aged-newsprint cards, on purpose the one warm/light card in a sea of dark velvet ones — meant to read as an actual press clipping, not just another card with a different gradient. ---------- */ .press-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;} .press-card{ position:relative; overflow:hidden; padding:1.8rem; background:linear-gradient(160deg,var(--parchment),var(--parchment-dim)); border-inline-start:4px solid var(--gold-dim); border-radius:var(--radius-s); box-shadow:var(--shadow-soft); transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); } .press-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hard);} .press-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.05; mix-blend-mode:multiply; } .press-card p{position:relative; font-family:var(--font-heading); font-size:1.15rem; color:var(--ink);} .press-src{position:relative; display:block; margin-top:.9rem; color:var(--parchment-faint); font-size:.85rem;} /* Darkened slightly from --gold-dim (4.01:1 on the parchment card) to clear the 4.5:1 AA contrast minimum for normal-size text (4.75:1). */ .press-src a{color:#7c622f; text-decoration:underline; text-underline-offset:2px; transition:color var(--dur-s) var(--ease);} .press-src a:hover{color:var(--gold);} @media (max-width:820px){ .press-grid{grid-template-columns:1fr;} /* stacked single-column on mobile — alternate each card's entrance left/right instead of the generic fade-up, so they don't all read the same coming down the page. Slower than the generic reveal so the motion itself is easy to actually see once triggered. */ .press-card[data-reveal]{ transform:translateX(90px); transition:opacity 1.6s var(--ease), transform 1.6s var(--ease); } .press-card[data-reveal]:nth-child(even){transform:translateX(-90px);} .press-card[data-reveal].is-in{transform:translateX(0);} } /* ---------- Media videos (video interviews given on other channels) ---------- */ .media-video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:var(--space-5);} .media-video-card{ display:block; border-radius:var(--radius-m); overflow:hidden; background:linear-gradient(160deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line); transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease); } .media-video-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hard); border-color:var(--gold-dim);} .media-video-desc{ display:block; margin:0; padding:1.25rem 1.25rem 0; font-family:var(--font-heading); font-size:1.2rem; line-height:1.65; color:var(--parchment); text-decoration:none; } .media-video-thumb{position:relative; display:block; aspect-ratio:16/9; background:#000; margin-top:1.1rem;} .media-video-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity var(--dur-m) var(--ease);} .media-video-card:hover .media-video-thumb img{opacity:1;} .media-video-body{display:block; padding:1.1rem 1.25rem 1.35rem;} .media-video-title{display:block; font-family:var(--font-heading); font-size:1.05rem; color:var(--parchment); line-height:1.6;} .media-video-channel{display:block; margin-top:.4rem; color:var(--parchment-faint); font-size:.85rem;} .media-video-actions{display:flex; gap:.5rem; margin-top:1.3rem;} .media-video-btn{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.8rem .6rem; border:1px solid var(--gold-dim); border-radius:999px; background:rgba(201,160,74,.12); color:var(--gold-soft); font-weight:600; font-size:clamp(.68rem, 3.3vw, .95rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); } .media-video-btn:hover{border-color:var(--gold); color:var(--ink); background:var(--gold); transform:translateY(-2px);} .media-video-btn svg{width:1.15em; height:1.15em; flex:0 0 auto;} @media (max-width:820px){ .media-video-grid{grid-template-columns:1fr;} } /* ---------- Testimonials ---------- */ .testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;} .testimonial-card{ background:linear-gradient(160deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line); border-radius:var(--radius-m); padding:1.9rem; display:flex; flex-direction:column; gap:1.2rem; transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease); } .testimonial-card:hover{border-color:var(--gold-dim); transform:translateY(-3px); box-shadow:var(--shadow-soft);} .testimonial-card p{font-family:var(--font-heading); font-size:1.1rem; color:var(--parchment); flex:1;} .testimonial-person{display:flex; align-items:center; gap:.8rem;} .testimonial-avatar{ width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden; position:relative; background:linear-gradient(160deg,var(--gold-dim),var(--curtain-deep)); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; color:var(--gold-soft); font-family:var(--font-heading); font-size:1.25rem; font-weight:600; } .testimonial-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .testimonial-name{color:var(--parchment); font-weight:600; font-size:.92rem;} .testimonial-role{color:var(--parchment-faint); font-size:.82rem; margin-top:.15rem;} .testimonial-cta{ margin-top:var(--space-5); background:radial-gradient(120% 160% at 15% 0%,var(--curtain-deep),var(--ink-2) 60%); border:1px solid var(--line); border-radius:var(--radius-m); padding:clamp(1.8rem,4vw,2.6rem); display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; } .testimonial-cta p{color:var(--parchment-dim); font-size:1.02rem; max-width:34rem; margin:0;} @media (max-width:820px){ .testimonial-grid{grid-template-columns:1fr;} } @media (max-width:640px){ .testimonial-cta{flex-direction:column; align-items:flex-start;} } /* ---------- Blog ---------- */ .blog-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem;} .amir-blog-query{margin-top:var(--space-5);} .blog-filter{display:flex; flex-wrap:wrap; gap:.6rem;} .blog-filter-btn{ display:inline-flex; align-items:center; padding:.5em 1.1em; border-radius:999px; border:1px solid var(--line-strong); color:var(--parchment-dim); text-decoration:none; font-size:.85rem; transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), background var(--dur-s) var(--ease); } .blog-filter-btn:hover{border-color:var(--gold-dim); color:var(--parchment);} .blog-filter-btn.is-active{background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:600;} /* WP core search block — restyled to match .field/.btn instead of its own defaults */ .blog-search{margin:0; flex:0 0 auto; width:auto; min-width:16rem;} .blog-search .wp-block-search__label{display:none;} .blog-search .wp-block-search__inside-wrapper{ display:flex; border:1px solid var(--line-strong); border-radius:var(--radius-s); background:rgba(0,0,0,.25); overflow:hidden; } .blog-search .wp-block-search__input{ flex:1; min-width:0; background:transparent; border:0; color:var(--parchment); padding:.7em 1em; font-size:.9rem; font-family:inherit; } .blog-search .wp-block-search__input::placeholder{color:var(--parchment-faint);} .blog-search .wp-block-search__input:focus{outline:none;} .blog-search .wp-block-search__button{ background:var(--gold); color:var(--ink); border:none; padding:.7em 1.2em; font-weight:600; font-size:.85rem; cursor:pointer; transition:background var(--dur-s) var(--ease); } .blog-search .wp-block-search__button:hover{background:var(--gold-soft);} /* auto-fit (not a fixed 3-column count) so a lone post stretches to fill the row instead of sitting narrow in the first column with two empty ones beside it — naturally goes to 2-3 columns once there's enough posts to fill them at >=320px each. */ .blog-grid,.blog-grid-query{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1.5rem;} .blog-cta{display:flex; justify-content:center; margin-top:var(--space-5);} .post-card{ display:flex; flex-direction:column; background:var(--ink-2); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-m); text-decoration:none; color:inherit; transition:border-color var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); } .post-card:hover{border-color:var(--gold-dim); transform:translateY(-3px);} .post-card-img{width:100%; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--ink-3); flex-shrink:0;} .post-card-body{display:flex; flex-direction:column; gap:.9rem; padding:1.7rem; flex:1;} .post-meta{display:flex; align-items:center; flex-wrap:wrap; gap:.9rem; font-size:.8rem; color:var(--parchment-faint);} .post-category{ color:var(--gold-soft); font-weight:600; letter-spacing:.02em; padding-inline-end:.9rem; border-inline-end:1px solid var(--line-strong); } .post-title{font-weight:600; font-size:1.08rem; color:var(--parchment); line-height:1.55;} .post-more{color:var(--gold-soft); font-size:.88rem; display:flex; align-items:center; gap:.4rem; margin-top:auto;} .post-more svg{width:14px; height:14px;} .blog-empty{color:var(--parchment-faint); font-size:.95rem; grid-column:1/-1; text-align:center; padding-block:2rem;} @media (max-width:820px){ .blog-grid,.blog-grid-query{grid-template-columns:1fr;} .blog-search{width:100%; min-width:0;} } /* ---------- Single post: share row, prev/next nav, related ---------- */ /* The divider lives here (guaranteed non-empty) rather than on .post-nav — post-navigation-link renders nothing when there's no adjacent post (true for the very first/only post on the site), which left a stray border-topped empty box beneath the share row. */ .share-buttons{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line); } .share-label{color:var(--parchment-dim); font-size:.88rem;} .share-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--parchment-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease); } .share-btn:hover{border-color:var(--gold); color:var(--gold-soft);} .share-btn svg{width:17px; height:17px;} .post-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:var(--space-5); flex-wrap:wrap;} .post-nav .wp-block-post-navigation-link{font-size:.88rem;} .post-nav .wp-block-post-navigation-link a{ color:var(--parchment-dim); text-decoration:none; display:flex; flex-direction:column; gap:.3rem; transition:color var(--dur-s) var(--ease); } .post-nav .wp-block-post-navigation-link a:hover{color:var(--gold-soft);} .post-nav .wp-block-post-navigation-link__link{color:var(--parchment); font-weight:600; font-size:1rem;} .related-posts{margin-top:var(--space-6);} .related-posts .eyebrow{justify-content:flex-start;} .related-posts .blog-grid{grid-template-columns:repeat(3,1fr); margin-top:1.2rem;} @media (max-width:820px){ .related-posts .blog-grid{grid-template-columns:1fr;} } /* ---------- Newsletter ---------- */ .news-box{ background:radial-gradient(120% 160% at 15% 0%,var(--curtain-deep),var(--ink-2) 60%); border:1px solid var(--line); border-radius:var(--radius-m); padding:clamp(2rem,5vw,3.5rem); display:flex; flex-direction:column; gap:1.6rem; } .news-box > div > .lede{margin-top:.6rem;} .news-form{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;} .field{ display:block; width:100%; flex:1; min-width:220px; background:rgba(0,0,0,.25); border:1px solid var(--line-strong); border-radius:var(--radius-s); padding:.9em 1.1em; color:var(--parchment); font-size:.95rem; min-height:44px; } .field::placeholder{color:var(--parchment-faint);} .field:focus{outline:none; border-color:var(--gold);} /* Custom file-upload control: the native ::file-selector-button carries its label text ("Choose File" / "Browse…") from the browser's own locale, not the page — CSS can restyle it but not translate it. A hidden real input + a normal