/* ═══════════════════════════════════════════════════════════════════════ 0b. TRIPTYCH BAND TOKENS ← tune here Sits between the hero and the pillar section. Solid dark background guarantees contrast at every viewport size. ═══════════════════════════════════════════════════════════════════════ */ :root { --tri-bg: var(--brand-dark); /* brand dark */ --tri-border: rgba(184, 131, 42, 0.30); --tri-padding-v: calc(var(--tri-fade-h) + 56px); /* always past the fade */ --tri-padding-h: 9%; --tri-num-size: 0.68rem; --tri-title-size: 1.05rem; --tri-body-size: 0.95rem; --tri-body-lh: 1.80; --tri-num-opacity: 0.90; /* · i · gold numeral opacity */ --tri-title-opacity: 1.00; /* title opacity */ --tri-body-opacity: 1.00; /* body copy opacity — raise to 1.00 for full white */ --tri-fade-h: 180px; /* height of ivory→dark and dark→ivory fades */ } /* ═══════════════════════════════════════════════════════════════════════ 0c. TRIPTYCH BAND — standalone dark section Three columns on a solid warm-dark background. Contrast is absolute — no dependency on what's behind it. ═══════════════════════════════════════════════════════════════════════ */ .triptych-band { background: linear-gradient( to bottom, var(--ivory) 0%, var(--tri-bg) var(--tri-fade-h), var(--tri-bg) calc(100% - var(--tri-fade-h)), var(--ivory) 100% ); padding: var(--tri-padding-v) var(--tri-padding-h); display: flex; align-items: stretch; gap: 0; /* borders removed — gradients provide the transition */ } /* Individual panel */ .triptych-panel { flex: 1; padding: 0 20px; text-align: center; position: relative; transition: background 0.30s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .triptych-panel:hover { background: rgba(184, 131, 42, 0.05); } /* Vertical gold separator */ .triptych-panel + .triptych-panel { border-left: 1px solid var(--tri-border); } /* Fine gold thread at top of each panel */ .triptych-panel::before { content: ''; display: block; width: 20px; height: 1px; background: var(--gold); opacity: 0.60; margin: 0 auto 22px; } /* Roman numeral ornament · i · */ .triptych-num { display: block; font-family: var(--f-display); font-size: var(--tri-num-size); font-style: italic; font-weight: 600; letter-spacing: 0.22em; color: rgba(184, 131, 42, var(--tri-num-opacity)); margin-bottom: 11px; } /* Panel title */ .triptych-title { display: block; font-family: var(--f-display); font-size: var(--tri-title-size); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 241, 231, var(--tri-title-opacity)); margin-bottom: 0; } /* Gold hairline between title and body */ .triptych-title::after { content: ''; display: block; width: 20px; height: 1px; background: var(--gold); opacity: 0.50; margin: 14px auto 16px; } /* Body copy — near-full opacity on dark background */ .triptych-body { font-family: var(--f-display); font-size: var(--tri-body-size); font-weight: 400; line-height: var(--tri-body-lh); color: rgba(246, 241, 231, var(--tri-body-opacity)); letter-spacing: 0.01em; margin: 0; } /* * ═══════════════════════════════════════════════════════════════════════ * element_webpage_home_cards.css — Homepage Pillars & Signup Element * Daralbeida.com · DAB-VIS-CSS-EL-HP-CARDS-001 · v2.1 · May 2026 * * Loaded by index.php : * * * PHP partial: api/elements/element_webpage_home_cards.php * * CHANGELOG * ───────── * v2.1 May 2026 — Signup section redesigned. * · Removed dark band entirely (was too heavy, too square) * · Signup now sits on the same ivory as the pillars * · Thinner separator, less padding, lighter weight * · Removed all dark-background overrides (no longer needed) * v2.0 May 2026 — Premium editorial redesign (no card boxes, pillars) * v1.0 May 2026 — Initial release * * TOKENS USED * ─────────── * --section-padding-v/h outer section spacing (css/webpage_home.css) * --pillar-gap column inner padding (css/webpage_home.css) * --pillar-sep-color column divider (css/webpage_home.css) * --signup-padding-v/h signup row spacing (css/webpage_home.css) * --ivory page background (darx_tokens.css) * --ink / --ink-muted text colors (darx_tokens.css) * --gold #B8832A (darx_tokens.css) * --f-display Cormorant Garamond (css/webpage_home.css) * --f-landing Noto Serif (css/webpage_home.css) * --f-mono DM Mono (darx_tokens.css) * * SECTIONS * ──────── * 1. Section wrapper * 2. Section eyebrow * 3. Pillar grid * 4. Pillar card (editorial column) * 5. Signup row (ivory, integrated) * 6. Entrance animations * 7. Responsive * ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ GRAND MAISON PILLAR CARDS — Tuning tokens ═══════════════════════════════════════════════════════════════════════ */ :root { --card-face: #ffffff; /* white card on ivory bg */ --card-face-hover: #fffdf9; /* hover — stays near-white */ --card-border: rgba(184,131,42,0.14); --card-shadow: 0 2px 24px rgba(28,20,16,0.07); --card-shadow-hover: 0 20px 56px rgba(28,20,16,0.15); --card-padding: 52px 44px 60px; --card-gap: 28px; --card-ghost-size: 10rem; /* ghost numeral size */ --card-ghost-opacity: 0.055; --card-illus-w: 48px; --card-illus-opacity: 0.80; --card-num-size: 0.74rem; --card-title-size: 1.90rem; --card-body-size: 1.0rem; --card-body-lh: 1.90; } /* ═══════════════════════════════════════════════════════════════════════ 0d. SECTION MANIFESTO — brand positioning bridge above the cards TUNING ────── --manifesto-max-w column width (default 680px) --manifesto-size body font size (default 1.06rem) --manifesto-opener-size first line (default 1.65rem) ═══════════════════════════════════════════════════════════════════════ */ :root { --manifesto-max-w: 680px; --manifesto-size: 1.06rem; --manifesto-opener-size: 1.65rem; } .section-manifesto { max-width: var(--manifesto-max-w); margin: 0 auto 88px; text-align: center; -webkit-font-smoothing: antialiased; } /* Opening italic sentence */ .manifesto-opener { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: var(--manifesto-opener-size); line-height: 1.28; color: var(--ink); margin: 0 0 36px; letter-spacing: 0.02em; } /* Body paragraphs */ .section-manifesto p { font-family: var(--f-display); font-size: var(--manifesto-size); line-height: 1.88; color: var(--ink-muted); letter-spacing: 0.01em; margin: 0 0 1.5em; } /* Bridge line — the closer before the cards */ .manifesto-bridge { font-family: var(--f-display); font-size: var(--ui-fs-display); font-weight: 600; color: var(--ink); letter-spacing: 0.02em; border-top: 1px solid rgba(184, 131, 42, 0.20); padding-top: 32px; margin-top: 40px; margin-bottom: 0 !important; } .manifesto-bridge em { font-style: italic; color: var(--gold); opacity: 0.85; } /* Gold rule after the manifesto block */ .section-manifesto::after { content: ''; display: block; width: 36px; height: 1px; background: var(--gold); opacity: 0.40; margin: 52px auto 0; } /* ═══════════════════════════════════════════════════════════════════════ 0e. DUAL CARD HEADING — Authentic · Origin, Artisanal · Philosophy... .card-h-attr — small italic gold qualifier (Authentic/Artisanal/Ancestral) .card-h-cat — large uppercase category (Origin/Philosophy/Vision) ═══════════════════════════════════════════════════════════════════════ */ /* Reset h3 pseudo-elements — replaced by span structure below */ .card h3::before, .card h3::after { content: none; } .card h3 { margin-bottom: 0; } /* Small italic qualifier */ .card-h-attr { display: block; font-family: var(--f-display); font-size: var(--ui-fs-value); font-style: italic; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 0; text-transform: none; } /* Gold hairline between qualifier and category */ .card-h-attr::after { content: ''; display: block; width: 24px; height: 1px; background: var(--gold); opacity: 0.45; margin: 13px auto 14px; } /* Large category word */ .card-h-cat { display: block; font-family: var(--f-display); font-size: var(--ui-fs-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); line-height: 1.0; } /* Body text — top margin replaces old h3::after rule */ .card p { margin-top: 22px; } /* ═══════════════════════════════════════════════════════════════════════ 1. SECTION WRAPPER ═══════════════════════════════════════════════════════════════════════ */ .section { padding: var(--section-padding-v) var(--section-padding-h); background: var(--ivory); } /* ═══════════════════════════════════════════════════════════════════════ 2. SECTION EYEBROW ═══════════════════════════════════════════════════════════════════════ */ .section-eyebrow { text-align: center; margin-bottom: 72px; } .section-eyebrow-label { display: block; font-family: var(--f-display); font-size: var(--ui-fs-value); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .section-eyebrow-rule { display: block; width: 36px; height: 1px; background: var(--gold); opacity: 0.55; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════ 3. GRID ═══════════════════════════════════════════════════════════════════════ */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); align-items: start; } /* ═══════════════════════════════════════════════════════════════════════ 4. PILLAR CARD White floating panel with: ::before — soft gold top-accent line (fades in from center) ::after — ghost roman numeral (I / II / III) low-opacity gold All content children sit at z-index 1, above the ghost. ═══════════════════════════════════════════════════════════════════════ */ .card { position: relative; padding: var(--card-padding); overflow: hidden; background: var(--card-face); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); text-align: center; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), background 0.38s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .card:hover { transform: translateY(-8px); box-shadow: var(--card-shadow-hover); background: var(--card-face-hover); } /* Gold top accent — soft gradient centred on the card top edge */ .card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient( to right, transparent, var(--gold) 30%, var(--gold) 70%, transparent ); opacity: 0.55; } /* Ghost numeral — decorative, behind all content */ .card:nth-child(1)::after { content: 'I'; } .card:nth-child(2)::after { content: 'II'; } .card:nth-child(3)::after { content: 'III'; } .card::after { position: absolute; bottom: -28px; right: 6px; font-family: var(--f-display); font-size: var(--card-ghost-size); font-weight: 600; color: var(--gold); opacity: var(--card-ghost-opacity); line-height: 1; pointer-events: none; z-index: 0; letter-spacing: -0.03em; } /* ─── Card content — all above ghost (z-index 1) ────────────────────── */ .card-illustration, .card-num, .card h3, .card p { position: relative; z-index: 1; } /* SVG botanical illustration */ .card-illustration { display: block; width: var(--card-illus-w); height: auto; margin: 0 auto 26px; color: var(--gold); opacity: var(--card-illus-opacity); } /* Roman numeral ornament */ .card-num { display: block; font-family: var(--f-display); font-size: var(--card-num-size); font-style: italic; letter-spacing: 0.20em; color: var(--gold); margin-bottom: 16px; } /* Title */ .card h3 { font-family: var(--f-display); font-size: var(--card-title-size); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 0; line-height: 1.1; } /* Gold rules: above (::before) and below (::after) the title */ .card h3::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.50; margin: 0 auto 18px; } .card h3::after { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.50; margin: 18px auto 22px; } /* Body copy */ .card p { font-family: var(--f-display); font-size: var(--card-body-size); font-weight: 400; line-height: var(--card-body-lh); color: var(--ink-muted); letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════════════ 5. SIGNUP — Luxury minimal One personal italic statement. One underline input. Nothing else. Ivory background — continuous with the page, no dark band. TUNING ────── .signup-statement the invitation sentence (edit in PHP) --signup-pad-v vertical padding (default 80px) ═══════════════════════════════════════════════════════════════════════ */ :root { --signup-pad-v: 80px; } /* ── Container ─────────────────────────────────────────────────────── */ .card-contact { grid-column: 1 / -1; background: var(--ivory); border: none; box-shadow: none; padding: var(--signup-pad-v) var(--signup-padding-h); margin-top: 24px; border-top: 1px solid rgba(184, 131, 42, 0.14); text-align: center; transform: none !important; -webkit-font-smoothing: antialiased; } .card-contact::before, .card-contact::after { content: none !important; } /* ── The one sentence ──────────────────────────────────────────────── */ .signup-statement { font-family: var(--f-display); font-style: italic; font-size: var(--ui-fs-display); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); margin: 0; line-height: 1.25; } /* ── Gold micro-rule ───────────────────────────────────────────────── */ .signup-micro-rule { width: 28px; height: 1px; background: var(--gold); opacity: 0.50; margin: 26px auto 30px; } /* ── Suppress module title, launch note, email link ───────────────── */ .card-contact h3 { display: none; } .card-contact .signup-launch-note { display: none; } .card-contact .signup-email { display: none; } /* ── Form — underline input only, luxury style ─────────────────────── */ .card-contact .signup-form { justify-content: center; align-items: flex-end; gap: 0; max-width: 380px; margin: 0 auto; } .card-contact .signup-form input[type="email"] { background: transparent; border: none; border-bottom: 1px solid rgba(184, 131, 42, 0.40); border-radius: 0; padding: 10px 14px 10px 0; font-family: var(--f-display); font-size: var(--ui-fs-value); font-weight: 600; color: var(--ink); text-align: center; flex: 1; transition: border-color 0.25s ease; } .card-contact .signup-form input[type="email"]:focus { outline: none; background: transparent; border-bottom-color: var(--gold); } .card-contact .signup-form input[type="email"]::placeholder { color: rgba(28, 20, 16, 0.30); font-style: italic; } /* Submit — invisible except for a gold arrow */ .card-contact .signup-form button[type="submit"] { background: transparent; border: none; border-bottom: 1px solid transparent; border-radius: 0; padding: 10px 0 10px 14px; font-family: var(--f-mono); font-size: 0; /* hide text — show only the ::after arrow */ color: transparent; cursor: pointer; transition: border-bottom-color 0.25s ease; flex-shrink: 0; } .card-contact .signup-form button[type="submit"]::after { content: '→'; font-size: var(--ui-fs-display); color: var(--gold); opacity: 0.70; display: block; transition: opacity 0.25s ease, transform 0.25s ease; } .card-contact .signup-form button[type="submit"]:hover::after { opacity: 1.00; transform: translateX(4px); } .card-contact .signup-form button[type="submit"]:disabled::after { opacity: 0.25; } /* ── Status message ────────────────────────────────────────────────── */ .card-contact .signup-status { font-size: var(--ui-fs-value); margin-top: 14px; } .card-contact .signup-status.success { color: var(--gold); } .card-contact .signup-status.error { color: #b94a38; } /* ═══════════════════════════════════════════════════════════════════════ 6. ENTRANCE ANIMATIONS Superseded by IntersectionObserver in homepage_fx.js. CSS animations removed — FX layer adds .fx-hidden / .in-view. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ 7. RESPONSIVE ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { .grid { grid-template-columns: 1fr; gap: 20px; } .triptych-band { padding-left: 4%; padding-right: 4%; } .triptych-panel { padding: 0 12px; } .card { padding: 44px 36px 52px; } } @media (max-width: 600px) { .section { padding: 80px 6%; } .triptych-band { padding-left: 3%; padding-right: 3%; } .triptych-panel { padding: 0 8px; } .triptych-num { font-size: var(--ui-fs-label); } .triptych-title { font-size: var(--ui-fs-label); letter-spacing: 0.18em; } .triptych-body { font-size: var(--ui-fs-label); } .card { padding: 40px 28px 48px; } .section-eyebrow { margin-bottom: 52px; } } /* ═══════════════════════════════════════════════════════════════════════ 8. CHEF STRIP — dark gradient carousel, gold everywhere Background: ivory → brand dark → ivory (same logic as triptych) Cards: dark glass, gold border. Active card: full gold border + glow. Arrows: at each end of the section, large gold. Dots: gold, centred below. TUNING ────── --chef-card-w card width (default 340px) --chef-card-gap gap between cards (default 24px) --chef-fade-h gradient fade height (default 100px) ═══════════════════════════════════════════════════════════════════════ */ :root { --chef-card-w: 340px; --chef-card-gap: 24px; --chef-fade-h: 100px; } /* ── Section: dark gradient ──────────────────────────────────────────── */ .chef-section { position: relative; background: linear-gradient( to bottom, var(--ivory) 0%, var(--brand-dark) var(--chef-fade-h), var(--brand-dark) calc(100% - var(--chef-fade-h)), var(--ivory) 100% ); padding: calc(var(--chef-fade-h) + 40px) 0 calc(var(--chef-fade-h) + 40px); -webkit-font-smoothing: antialiased; } /* Gold hairline top and bottom of the dark zone */ .chef-section::before, .chef-section::after { content: ''; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); opacity: 0.40; } .chef-section::before { top: var(--chef-fade-h); } .chef-section::after { bottom: var(--chef-fade-h); } /* ── Section label ───────────────────────────────────────────────────── */ .chef-section-label { font-family: var(--f-mono); font-size: var(--ui-fs-label); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(184, 131, 42, 0.80); text-align: center; margin: 0 0 48px; } /* ── Slider ──────────────────────────────────────────────────────────── */ .chef-slider { position: relative; overflow: hidden; padding: 16px 0 24px; } /* ── Track ───────────────────────────────────────────────────────────── */ .chef-track { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--chef-card-gap); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* ── Card ────────────────────────────────────────────────────────────── */ .chef-col { flex: 0 0 var(--chef-card-w); padding: 36px 28px 40px; text-align: center; background: rgba(28, 20, 16, 0.55); border: 1px solid rgba(184, 131, 42, 0.22); opacity: 0.42; transform: scale(0.88); transition: opacity 0.50s ease, transform 0.50s ease, border-color 0.50s ease, background 0.50s ease, box-shadow 0.50s ease; cursor: pointer; } /* Active card — full brightness, gold border, inner glow */ .chef-col.active { opacity: 1; transform: scale(1); background: rgba(36, 25, 18, 0.95); border: 1px solid var(--gold); box-shadow: 0 0 0 1px rgba(184, 131, 42, 0.18), 0 0 24px rgba(184, 131, 42, 0.12), 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(184, 131, 42, 0.28), inset 0 -1px 0 rgba(184, 131, 42, 0.14); cursor: default; } /* Gold top accent on active card */ .chef-col.active::before { content: ''; display: block; height: 2px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: -36px -28px 30px; opacity: 0.90; } /* ── Card content ────────────────────────────────────────────────────── */ .chef-stars { display: block; font-size: var(--ui-fs-label); letter-spacing: 0.32em; color: var(--gold); opacity: 0.85; margin-bottom: 16px; } .chef-name { font-family: var(--f-display); font-size: var(--ui-fs-display); font-weight: 500; letter-spacing: 0.06em; color: rgba(246, 241, 231, 0.95); margin: 0; line-height: 1.1; } .chef-name a { text-decoration: none; color: inherit; transition: color 0.22s ease; } .chef-name a:hover { color: var(--gold); } .chef-name::after { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.60; margin: 14px auto 16px; } .chef-context { font-family: var(--f-mono); font-size: var(--ui-fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); opacity: 0.85; margin: 0 0 14px; } .chef-fact { font-family: var(--f-display); font-size: var(--ui-fs-value); line-height: 1.75; color: rgba(246, 241, 231, 0.82); margin: 0; } .chef-fact em { font-style: italic; color: rgba(246, 241, 231, 0.88); } /* ── Arrows — at each end of the section ─────────────────────────────── */ .chef-prev, .chef-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(28, 20, 16, 0.80); border: 1px solid rgba(184, 131, 42, 0.55); color: var(--gold); font-size: var(--ui-fs-display); line-height: 1; font-family: Georgia, serif; cursor: pointer; transition: background 0.22s ease, border-color 0.22s ease; padding: 0; } .chef-prev { left: 24px; } .chef-next { right: 24px; } .chef-prev:hover, .chef-next:hover { background: rgba(184, 131, 42, 0.14); border-color: var(--gold); } /* ── Dots ────────────────────────────────────────────────────────────── */ .chef-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; } .chef-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(184, 131, 42, 0.30); cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .chef-dot.active { background: var(--gold); transform: scale(1.5); } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 960px) { :root { --chef-card-w: 280px; } .chef-prev { left: 12px; } .chef-next { right: 12px; } } @media (max-width: 600px) { :root { --chef-card-w: 240px; --chef-card-gap: 16px; } .chef-section { padding-top: calc(var(--chef-fade-h) + 24px); } .chef-prev { left: 6px; } .chef-next { right: 6px; } } /* ═══════════════════════════════════════════════════════════════════════ 9. PEOPLE WHO CHOSE MOROCCO Quote when available · "Friend of Morocco" when not. Four columns, dark gradient, gold throughout. ═══════════════════════════════════════════════════════════════════════ */ :root { --celeb-fade-h: 90px; --celeb-quote-size: 1.10rem; --celeb-choice-size: 0.92rem; } .celeb-section { position: relative; background: linear-gradient( to bottom, var(--ivory) 0%, var(--brand-dark) var(--celeb-fade-h), var(--brand-dark) 100% ); padding: calc(var(--celeb-fade-h) + 52px) var(--section-padding-h) 56px; -webkit-font-smoothing: antialiased; } .celeb-section::before, .celeb-section::after { content: ''; position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); opacity: 0.38; } .celeb-section::before { top: var(--celeb-fade-h); } .celeb-section::after { bottom: var(--celeb-fade-h); } /* ── Label ───────────────────────────────────────────────────────────── */ .celeb-label { font-family: var(--f-mono); font-size: var(--ui-fs-label); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(184, 131, 42, 0.80); text-align: center; margin: 0 0 56px; } /* ── Grid ────────────────────────────────────────────────────────────── */ .celeb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(184, 131, 42, 0.28); } /* ── Column ──────────────────────────────────────────────────────────── */ .celeb-col { padding: 44px 32px 52px; text-align: center; position: relative; transition: background 0.30s ease; } .celeb-col:hover { background: rgba(184, 131, 42, 0.05); } .celeb-col + .celeb-col { border-left: 1px solid rgba(184, 131, 42, 0.28); } .celeb-col::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.65; margin: 0 auto 22px; } /* ── Mark ────────────────────────────────────────────────────────────── */ .celeb-mark { display: block; font-size: var(--ui-fs-value); color: var(--gold); opacity: 0.75; margin-bottom: 18px; } /* ── Name ────────────────────────────────────────────────────────────── */ .celeb-name { font-family: var(--f-display); font-size: var(--ui-fs-display); font-weight: 500; letter-spacing: 0.04em; color: rgba(246, 241, 231, 0.97); margin: 0; line-height: 1.05; } .celeb-name a { text-decoration: none; color: inherit; transition: color 0.22s ease; } .celeb-name a:hover { color: var(--gold); } .celeb-name::after { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); opacity: 0.55; margin: 15px auto 16px; } /* ── Role ────────────────────────────────────────────────────────────── */ .celeb-role { font-family: var(--f-mono); font-size: var(--ui-fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); opacity: 0.80; margin: 0 0 22px; } /* ── Quote — when available ──────────────────────────────────────────── */ .celeb-quote { font-family: var(--f-display); font-size: var(--celeb-quote-size); font-style: italic; font-weight: 500; line-height: 1.45; color: rgba(246, 241, 231, 0.95); margin: 0 0 0; } .celeb-attr { display: block; font-family: var(--f-mono); font-size: var(--ui-fs-label); font-style: normal; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(184, 131, 42, 0.65); margin: 8px 0 20px; } /* ── Friend of Morocco — when no quote ───────────────────────────────── */ .celeb-friend { display: inline-block; font-family: var(--f-mono); font-size: var(--ui-fs-label); letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(184, 131, 42, 0.45); padding: 5px 12px; margin: 0 0 20px; } /* ── Choice / context ────────────────────────────────────────────────── */ .celeb-choice { font-family: var(--f-display); font-size: var(--celeb-choice-size); line-height: 1.80; color: rgba(246, 241, 231, 0.78); margin: 0; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .celeb-grid { grid-template-columns: repeat(2, 1fr); } .celeb-col:nth-child(3), .celeb-col:nth-child(4) { border-top: 1px solid rgba(184, 131, 42, 0.28); } .celeb-col:nth-child(odd) { border-left: none; } } @media (max-width: 640px) { .celeb-grid { grid-template-columns: 1fr; } .celeb-col + .celeb-col { border-left: none; border-top: 1px solid rgba(184, 131, 42, 0.28); } .celeb-col { padding: 40px 24px 48px; } .celeb-section { padding-left: 6%; padding-right: 6%; } }