/* ============================================================ PROFESSIONAL PHILOSOPHY SECTION — STYLES Extracted from the single-file build, in original cascade order. Order matters here — later rules intentionally override earlier ones at equal specificity (e.g. the scroll-reveal block near the end). Do not reorder these sections. ============================================================= */ /* The preview file's own :root / [data-theme="dark"] / *{box-sizing} / html,body{...} / @import block has been removed here — it duplicated (and in two places conflicted with) the real global tokens already in base.css: - html,body{overflow-x:hidden} would have reintroduced the exact bug that broke the sticky nav + fixed hamburger earlier (fixed by keeping overflow-x:hidden on html only, not body). - --teal differed from base.css's value (#0e7490/#22d3ee here vs #128f7c/#2dd4bf in base.css). Resolved by updating base.css's --teal to match this file's value globally, since no other section currently depends on the old one. - The @import for Space Grotesk/Inter is redundant — both are already loaded via in index.html's . --green/--green-soft, which base.css has no equivalent for, are kept here instead — scoped to .phil-body rather than added to base.css's global :root, since only this section currently uses them. Everything below this point relies on activating data-theme="dark" on in index.html for --purple/--blue/ --amber/--teal/--green to resolve to their intended dark values. */ .phil-body{ --green:#2f9e44; --green-soft:rgba(47,158,68,0.12); } [data-theme="dark"] .phil-body{ --green:#8ce99a; --green-soft:rgba(140,233,154,0.14); } .phil-heading, .phil-card__heading, .phil-card__heading--flow, .phil-eyebrow{ font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-style:normal; } .phil-section{ position:relative; z-index:2; background:var(--bg); padding:clamp(56px, 14vw, 72px) clamp(18px, 5vw, 24px) clamp(32px, 9vw, 40px); overflow:hidden; isolation:isolate; } .phil-header{ position:relative; z-index:1; max-width:min(680px, 94vw); margin:0 auto; padding-top:8px; } .phil-bg{ position:absolute; top:0; left:0; right:0; height:200px; background-image:url("../src/mobile philosophy background head-image.jpg"); background-repeat:no-repeat; background-position:right top; background-size:112% auto; z-index:0; pointer-events:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; } .phil-stars{ position:absolute; top:0; right:0; width:min(46%, 320px); height:200px; z-index:0; pointer-events:none; } .phil-star{ position:absolute; width:3px; height:3px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px 2px var(--blue); animation:phil-twinkle 3.2s ease-in-out infinite; } .phil-star--1{ top:22%; left:12%; animation-delay:0s; } .phil-star--2{ top:10%; left:55%; background:var(--purple); box-shadow:0 0 10px 2px var(--purple); animation-delay:0.7s; } .phil-star--3{ top:48%; left:85%; animation-delay:1.4s; } .phil-star--4{ top:68%; left:35%; background:var(--teal); box-shadow:0 0 10px 2px var(--teal); animation-delay:2.1s; } .phil-star--5{ top:34%; left:70%; background:var(--purple); box-shadow:0 0 8px 2px var(--purple); animation-delay:1.8s; } @keyframes phil-twinkle{ 0%, 100%{ opacity:0.3; transform:scale(0.8); } 50%{ opacity:1; transform:scale(1.4); } } @media (prefers-reduced-motion: reduce){ .phil-star{ animation:none; opacity:0.8; } } .phil-eyebrow{ margin:0 0 18px; font-size:clamp(12.5px, 1.6vw, 14.5px); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple); white-space:nowrap; } .phil-heading{ max-width:80%; margin:0 0 22px; font-size:clamp(34px, 4.9vw, 44px); line-height:1.18; font-weight:700; letter-spacing:-0.01em; color:var(--text-hi); } .phil-heading__accent{ display:block; background:linear-gradient(100deg, var(--purple) 0%, var(--blue) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .phil-break--desktop{ display:none; } .phil-intro{ margin:0; max-width:clamp(56ch, 72vw, 64ch); font-size:clamp(16px, 2.1vw, 18.5px); line-height:1.65; color:var(--text-mid); } .phil-divider{ display:flex; align-items:center; gap:14px; margin:36px auto 0; max-width:220px; } .phil-divider__line{ flex:1; height:1px; background:linear-gradient(90deg, var(--card-border), transparent); } .phil-divider__spark{ font-size:13px; color:var(--purple); opacity:0.8; line-height:1; } .phil-body{ position:relative; z-index:1; background:var(--bg); --phil-header-overlap:40px; height:calc(var(--phil-card-count, 5) * 100vh); margin-top:calc(-1 * var(--phil-header-overlap)); } .phil-body-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; } .phil-body-bg{ position:absolute; inset:0; background-image: /* bottom blend into matte black — painted on top, fades the blobs out before the section ends */ linear-gradient(to top, var(--bg) 0%, transparent 14%), /* left blob: amber + teal */ radial-gradient(ellipse 58% 40% at 8% 32%, var(--amber-soft) 0%, transparent 62%), radial-gradient(ellipse 52% 42% at 6% 58%, var(--teal-soft) 0%, transparent 64%), /* right blob: purple (smallest) + teal + green */ radial-gradient(ellipse 34% 26% at 92% 24%, var(--purple-soft) 0%, transparent 58%), radial-gradient(ellipse 60% 44% at 94% 50%, var(--teal-soft) 0%, transparent 62%), radial-gradient(ellipse 64% 48% at 92% 76%, var(--green-soft) 0%, transparent 64%), /* center blob: purple, sized to peek past the card's edges */ radial-gradient(ellipse 48% 58% at 50% 50%, var(--purple-soft) 0%, transparent 68%); background-repeat:no-repeat; background-color:var(--bg); z-index:0; pointer-events:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; } .phil-body-fade{ position:absolute; top:0; left:0; right:0; height:clamp(110px, 29vw, 140px); background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%); z-index:1; } .phil-body-cards{ position:relative; z-index:2; height:100%; } .phil-body-cards .phil-card{ position:absolute; left:20px; right:20px; top:5vh; margin:0 auto; will-change:transform; } .phil-body-cards .phil-card[data-card-index="1"]{ z-index:1; } .phil-body-cards .phil-card[data-card-index="2"]{ z-index:2; } .phil-body-cards .phil-card[data-card-index="3"]{ z-index:3; } .phil-body-cards .phil-card[data-card-index="4"]{ z-index:4; } .phil-body-cards .phil-card[data-card-index="5"]{ z-index:5; } .phil-section, .phil-section *, .phil-body, .phil-body *{ box-sizing:border-box; } .phil-card{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; /* leftover space distributes evenly around the content group instead of collecting into one gap */ max-width:min(680px, 92vw); margin:0 auto; height:max(560px, 82vh); /* tracks the ACTUAL device height, phone or tablet — no artificial ceiling capping it below the real slot height */ background:rgba(9,9,13,0.86); border:1px solid var(--card-border); border-radius:22px; padding:clamp(22px, 5.5vw, 32px) clamp(18px, 5vw, 30px) clamp(26px, 6vw, 36px); box-shadow:var(--shadow); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); /* hover/tap feedback — box-shadow & border only here, since the mobile scroll-pin script drives `transform` via inline styles every frame and would fight a CSS transform transition (that inline style always wins over CSS anyway) */ transition:box-shadow 0.25s ease, border-color 0.25s ease; } .phil-card + .phil-card{ margin-top:24px; } .phil-card__badge{ display:inline-flex; align-self:flex-start; align-items:center; justify-content:center; min-width:44px; height:34px; padding:0 10px; border:1px solid var(--teal); border-radius:8px; color:var(--teal); font-size:15px; font-weight:600; margin-bottom:22px; } .phil-card__heading{ --phil-green:#8ce99a; margin:0 0 18px; font-size:clamp(24px, 4.2vw, 36px); line-height:1.24; font-weight:700; background:linear-gradient(100deg, var(--teal) 0%, var(--phil-green) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .phil-card__body{ display:flex; flex-direction:column; gap:clamp(18px, 2.6vw, 24px); margin-bottom:0; } .phil-card__body p{ margin:0; font-size:clamp(15px, 2.3vw, 18px); line-height:1.55; color:var(--text-mid); } .phil-card__diagram{ --phil-green:#8ce99a; display:block; width:100%; max-width:clamp(230px, 32vw, 320px); margin-top:clamp(20px, 4vw, 28px); margin-left:auto; margin-right:auto; margin-bottom:0; } .phil-card__diagram--icon{ max-width:clamp(140px, 20vw, 190px); } .phil-card__diagram svg{ width:100%; height:auto; display:block; } /* the floated desktop-only diagram duplicates stay hidden below 1024px — the mobile/tablet layouts keep using the original .phil-card__diagram block instead */ .phil-card__diagram--float{ display:none; } .phil-card__heading--flow{ font-size:clamp(21px, 3.23vw, 29px); } .phil-card__heading--flow span{ font-weight:600; color:var(--amber); padding:0 2px; } .phil-concepts{ display:grid; grid-template-columns:1fr 22px 1fr; grid-template-rows:auto 26px auto; grid-template-areas: "c1 a12 c2" "sp sp a23" "c4 a34 c3"; align-items:start; align-content:center; column-gap:12px; row-gap:6px; flex:1; margin-top:20px; } .phil-concept--c1{ grid-area:c1; } .phil-concept--c2{ grid-area:c2; } .phil-concept--c3{ grid-area:c3; } .phil-concept--c4{ grid-area:c4; } .phil-arrow--12{ grid-area:a12; } .phil-arrow--23{ grid-area:a23; } .phil-arrow--34{ grid-area:a34; } .phil-concept{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:rgba(255,255,255,0.035); border:1px solid var(--card-border); border-radius:14px; padding:11px 12px 13px; } .phil-concept__icon{ width:clamp(30px, 4.2vw, 34px); height:clamp(30px, 4.2vw, 34px); flex-shrink:0; } .phil-concept__title{ margin:0; font-size:clamp(16px, 1.9vw, 17.5px); font-weight:700; color:var(--text-hi); } .phil-concept__text{ margin:0; font-size:clamp(12.5px, 2.1vw, 15px); line-height:1.52; color:var(--text-mid); } .phil-concept__hit{ font-weight:700; color:var(--blue); } .phil-hit{ font-weight:700; color:var(--blue); } .phil-arrow{ display:flex; align-items:center; justify-content:center; align-self:center; justify-self:center; height:100%; } .phil-arrow svg{ width:20px; height:auto; display:block; } .phil-arrow--23 svg{ width:14px; } /* ============================================================ PROFESSIONAL PHILOSOPHY — TABLET (768px to 1023px) Purpose-built for this range: not the mobile scroll-pin funnel, not the desktop split-column grid. A static, non-scrolling bento grid using each card's natural vertical/portrait content flow (heading, paragraphs, diagram below — the same internal shape mobile cards already use), arranged two-up with the concepts card spanning full width. ============================================================= */ @media (min-width:768px) and (max-width:1023.98px){ /* ---------- release the scroll-pin funnel ---------- */ .phil-body{ height:auto; margin-top:0; } .phil-body-sticky{ position:relative; /* not static — keeps .phil-body-bg's inset:0 sized to the actual content height below, instead of collapsing */ height:auto; overflow:visible; } /* ---------- header: centered, tablet-scaled (distinct from both mobile's left-aligned fluid type and desktop's 72-104px giant scale) ---------- */ .phil-header{ max-width:640px; margin:0 auto; padding-top:0; text-align:center; } .phil-eyebrow{ font-size:15px; letter-spacing:0.17em; } .phil-heading{ max-width:600px; font-size:clamp(42px, 5.2vw, 56px); line-height:1.15; margin-left:auto; margin-right:auto; } .phil-intro{ max-width:560px; font-size:18px; line-height:1.6; margin-left:auto; margin-right:auto; } .phil-divider{ margin-left:auto; margin-right:auto; } .phil-section{ padding:64px 48px 48px; } /* ---------- body: static bento grid, no absolute positioning, no scroll-driven transforms ---------- */ .phil-body-cards{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "card1 card2" "card3 card3" "card4 card5"; align-items:stretch; gap:24px; max-width:900px; margin:0 auto; padding:48px 40px 72px; height:auto; } .phil-body-cards .phil-card{ position:static; left:auto; right:auto; top:auto; margin:0; max-width:none; width:auto; height:auto; min-height:420px; justify-content:flex-start; /* content packs from the top — no full-slot centering needed in a normal grid cell */ transition:box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .phil-body-cards .phil-card + .phil-card{ margin-top:0; } .phil-body-cards .phil-card[data-card-index="1"]{ grid-area:card1; z-index:auto; } .phil-body-cards .phil-card[data-card-index="2"]{ grid-area:card2; z-index:auto; } .phil-body-cards .phil-card[data-card-index="3"]{ grid-area:card3; z-index:auto; } .phil-body-cards .phil-card[data-card-index="4"]{ grid-area:card4; z-index:auto; } .phil-body-cards .phil-card[data-card-index="5"]{ grid-area:card5; z-index:auto; } /* diagrams sized down to fit a ~400px-wide grid column comfortably */ .phil-body-cards .phil-card__diagram{ max-width:220px; } .phil-body-cards .phil-card__diagram--icon{ max-width:140px; } /* lift + colored ring on hover/tap — same accent language as desktop, declared fresh here so the desktop rule stays untouched */ .phil-body-cards .phil-card:hover, .phil-body-cards .phil-card--pointer-active{ transform:translateY(-4px); } .phil-body-cards .phil-card[data-card-index="1"]:hover, .phil-body-cards .phil-card[data-card-index="1"].phil-card--pointer-active{ border-color:var(--purple); box-shadow:var(--shadow), 0 0 0 1.5px var(--purple); } .phil-body-cards .phil-card[data-card-index="2"]:hover, .phil-body-cards .phil-card[data-card-index="2"].phil-card--pointer-active{ border-color:var(--blue); box-shadow:var(--shadow), 0 0 0 1.5px var(--blue); } .phil-body-cards .phil-card[data-card-index="3"]:hover, .phil-body-cards .phil-card[data-card-index="3"].phil-card--pointer-active{ border-color:var(--green); box-shadow:var(--shadow), 0 0 0 1.5px var(--green); } .phil-body-cards .phil-card[data-card-index="4"]:hover, .phil-body-cards .phil-card[data-card-index="4"].phil-card--pointer-active{ border-color:var(--amber); box-shadow:var(--shadow), 0 0 0 1.5px var(--amber); } .phil-body-cards .phil-card[data-card-index="5"]:hover, .phil-body-cards .phil-card[data-card-index="5"].phil-card--pointer-active{ border-color:var(--teal); box-shadow:var(--shadow), 0 0 0 1.5px var(--teal); } } @media (min-width:1024px){ .phil-body-cards .phil-card{ transition:box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .phil-body-cards .phil-card:hover, .phil-body-cards .phil-card--pointer-active{ transform:translateY(-6px); } /* each card highlights in its own accent color, kept minimal — a thin colored ring on top of the existing ambient shadow. Desktop only (1024px+) — mobile and tablet have their own treatment. */ .phil-body-cards .phil-card[data-card-index="1"]:hover, .phil-body-cards .phil-card[data-card-index="1"].phil-card--pointer-active{ border-color:var(--purple); box-shadow:var(--shadow), 0 0 0 1.5px var(--purple); } .phil-body-cards .phil-card[data-card-index="2"]:hover, .phil-body-cards .phil-card[data-card-index="2"].phil-card--pointer-active{ border-color:var(--blue); box-shadow:var(--shadow), 0 0 0 1.5px var(--blue); } .phil-body-cards .phil-card[data-card-index="3"]:hover, .phil-body-cards .phil-card[data-card-index="3"].phil-card--pointer-active{ border-color:var(--green); box-shadow:var(--shadow), 0 0 0 1.5px var(--green); } .phil-body-cards .phil-card[data-card-index="4"]:hover, .phil-body-cards .phil-card[data-card-index="4"].phil-card--pointer-active{ border-color:var(--amber); box-shadow:var(--shadow), 0 0 0 1.5px var(--amber); } .phil-body-cards .phil-card[data-card-index="5"]:hover, .phil-body-cards .phil-card[data-card-index="5"].phil-card--pointer-active{ border-color:var(--teal); box-shadow:var(--shadow), 0 0 0 1.5px var(--teal); } .phil-wrapper{ position:relative; background-color:var(--bg); background-image: radial-gradient(ellipse 720px 480px at 0% 0%, var(--amber-soft) 0%, transparent 65%), radial-gradient(ellipse 720px 480px at 100% 0%, var(--teal-soft) 0%, transparent 65%), radial-gradient(ellipse 1100px 700px at 50% 0%, var(--purple-soft) 0%, transparent 70%); background-repeat:no-repeat; } .phil-section, .phil-body{ background:transparent; } .phil-bg, .phil-body-bg, .phil-body-fade, .phil-stars{ display:none; } .phil-header{ max-width:min(1500px, 90vw); margin:0 auto; padding-top:0; text-align:center; } .phil-eyebrow{ white-space:normal; font-size:clamp(16px, 1.125vw, 18px); letter-spacing:0.18em; } .phil-heading{ max-width:min(1500px, 90vw); font-size:clamp(72px, 4.5vw, 104px); line-height:1.12; margin-left:auto; margin-right:auto; } .phil-break--desktop{ display:inline; } .phil-intro{ max-width:clamp(700px, 44vw, 760px); font-size:clamp(24px, 1.625vw, 26px); line-height:1.6; margin-left:auto; margin-right:auto; } .phil-divider{ margin-left:auto; margin-right:auto; } .phil-section{ padding:clamp(96px, 6vw, 112px) clamp(40px, 3vw, 56px) clamp(72px, 4.5vw, 88px); } .phil-body{ height:auto; margin-top:0; } .phil-body-sticky{ position:static; height:auto; overflow:visible; } .phil-body-cards{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "card1 card2" "card3 card3" "card4 card5"; align-items:stretch; /* row 1 (01/02) and row 3 (04/05) share the taller card's height */ gap:32px; max-width:min(1680px, 94vw); margin:0 auto; padding:64px clamp(56px, 4vw, 72px) 96px; height:auto; } .phil-body-cards .phil-card{ position:static; left:auto; right:auto; top:auto; margin:0; max-width:none; width:auto; height:auto; } .phil-body-cards .phil-card + .phil-card{ margin-top:0; } .phil-body-cards .phil-card[data-card-index="1"]{ grid-area:card1; z-index:auto; } .phil-body-cards .phil-card[data-card-index="2"]{ grid-area:card2; z-index:auto; } .phil-body-cards .phil-card[data-card-index="3"]{ grid-area:card3; z-index:auto; } .phil-body-cards .phil-card[data-card-index="4"]{ grid-area:card4; z-index:auto; } .phil-body-cards .phil-card[data-card-index="5"]{ grid-area:card5; z-index:auto; } /* ---------- cards 01/02/04/05: landscape cards, single-column text flow — no left/right split. The visible diagram is a duplicate placed inline in the markup (a float needs to sit in the DOM right where the wrap should start; the original .phil-card__diagram is hidden here and still serves the mobile/tablet layouts below 1024px). These cards pair up into the 2-column grid (01+02, 04+05). ---------- */ .phil-body-cards .phil-card[data-card-index="1"], .phil-body-cards .phil-card[data-card-index="2"], .phil-body-cards .phil-card[data-card-index="4"], .phil-body-cards .phil-card[data-card-index="5"]{ position:relative; display:block; } /* clearfix: contains the floated diagram so the card's own height still accounts for it */ .phil-body-cards .phil-card[data-card-index="1"]::after, .phil-body-cards .phil-card[data-card-index="2"]::after, .phil-body-cards .phil-card[data-card-index="4"]::after, .phil-body-cards .phil-card[data-card-index="5"]::after{ content:""; display:table; clear:both; } .phil-body-cards .phil-card[data-card-index="1"] > .phil-card__text, .phil-body-cards .phil-card[data-card-index="2"] > .phil-card__text, .phil-body-cards .phil-card[data-card-index="4"] > .phil-card__text, .phil-body-cards .phil-card[data-card-index="5"] > .phil-card__text{ position:relative; z-index:1; max-width:none; flex:none; } /* the original diagram (used for mobile/tablet, anchored via margin-top:auto) is replaced on desktop by the floated copy */ .phil-body-cards .phil-card[data-card-index="1"] > .phil-card__diagram, .phil-body-cards .phil-card[data-card-index="2"] > .phil-card__diagram, .phil-body-cards .phil-card[data-card-index="4"] > .phil-card__diagram, .phil-body-cards .phil-card[data-card-index="5"] > .phil-card__diagram{ display:none; } /* floated diagram: sits inline just before each card's final paragraph, so only that paragraph's text wraps around it — everything above stays full width */ .phil-card__diagram--float{ display:none; } .phil-body-cards .phil-card[data-card-index="1"] .phil-card__diagram--float, .phil-body-cards .phil-card[data-card-index="2"] .phil-card__diagram--float, .phil-body-cards .phil-card[data-card-index="4"] .phil-card__diagram--float, .phil-body-cards .phil-card[data-card-index="5"] .phil-card__diagram--float{ display:block; float:right; margin:2px 0 14px 26px; } .phil-body-cards .phil-card[data-card-index="1"] .phil-card__diagram--float, .phil-body-cards .phil-card[data-card-index="5"] .phil-card__diagram--float{ width:230px; } .phil-body-cards .phil-card[data-card-index="2"] .phil-card__diagram--float, .phil-body-cards .phil-card[data-card-index="4"] .phil-card__diagram--float{ width:130px; } .phil-card__diagram--float svg{ width:100%; height:auto; display:block; } /* watermark numeral: large & faint, top-right — sits behind the heading text (z-index:0) so nothing overlaps awkwardly */ .phil-body-cards .phil-card[data-card-index="1"] > .phil-card__badge, .phil-body-cards .phil-card[data-card-index="2"] > .phil-card__badge, .phil-body-cards .phil-card[data-card-index="4"] > .phil-card__badge, .phil-body-cards .phil-card[data-card-index="5"] > .phil-card__badge{ position:absolute; top:20px; right:24px; left:auto; bottom:auto; z-index:0; display:block; min-width:0; height:auto; border:none; padding:0; font-size:64px; font-weight:800; line-height:1; color:rgba(255,255,255,0.07); pointer-events:none; user-select:none; } /* keep the heading clear of the watermark numeral's width */ .phil-body-cards .phil-card[data-card-index="1"] .phil-card__heading, .phil-body-cards .phil-card[data-card-index="2"] .phil-card__heading, .phil-body-cards .phil-card[data-card-index="4"] .phil-card__heading, .phil-body-cards .phil-card[data-card-index="5"] .phil-card__heading{ position:relative; z-index:1; padding-right:76px; } /* card 03: same top-right watermark numbering as the other four — it's a wide landscape card rather than a 2-column one, but the numeral sits in the same corner position for consistency */ .phil-body-cards .phil-card[data-card-index="3"] > .phil-card__badge{ position:absolute; top:20px; right:24px; left:auto; bottom:auto; z-index:0; display:block; min-width:0; height:auto; border:none; padding:0; font-size:64px; font-weight:800; line-height:1; color:rgba(255,255,255,0.07); pointer-events:none; user-select:none; } .phil-body-cards .phil-card[data-card-index="3"] .phil-card__heading--flow{ position:relative; z-index:1; padding-right:96px; } .phil-body-cards .phil-card[data-card-index="1"] .phil-card__body, .phil-body-cards .phil-card[data-card-index="2"] .phil-card__body, .phil-body-cards .phil-card[data-card-index="4"] .phil-card__body, .phil-body-cards .phil-card[data-card-index="5"] .phil-card__body{ position:relative; z-index:1; display:block; /* was flex/gap — plain block flow lets the float sit inline with paragraphs */ } .phil-body-cards .phil-card[data-card-index="1"] .phil-card__body p, .phil-body-cards .phil-card[data-card-index="2"] .phil-card__body p, .phil-body-cards .phil-card[data-card-index="4"] .phil-card__body p, .phil-body-cards .phil-card[data-card-index="5"] .phil-card__body p{ margin:0 0 20px; } .phil-body-cards .phil-card[data-card-index="1"] .phil-card__body p:last-child, .phil-body-cards .phil-card[data-card-index="2"] .phil-card__body p:last-child, .phil-body-cards .phil-card[data-card-index="4"] .phil-card__body p:last-child, .phil-body-cards .phil-card[data-card-index="5"] .phil-card__body p:last-child{ margin-bottom:0; } .phil-concepts{ grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr; grid-template-rows:auto; grid-template-areas:"c1 a12 c2 a23 c3 a34 c4"; row-gap:0; flex:initial; margin-top:28px; } .phil-arrow--23 svg{ transform:rotate(-90deg); width:20px; } .phil-arrow--34 svg{ transform:rotate(180deg); } .phil-concept{ height:100%; } } /* ============================================================ PROFESSIONAL PHILOSOPHY — scroll reveal Header (eyebrow/heading/intro/divider) fades + rises into place on every breakpoint. Cards additionally get a one-time "flash" in their own accent color as they arrive — the same purple/ blue/green/amber/teal already used for hover, so a card's color identity is the first thing you see when it appears, not just something you discover on hover. Card fade+rise+flash is scoped to tablet/desktop (768px+): mobile already has its own dramatic entrance via the scroll-pin funnel, so it's left untouched here. ============================================================= */ .phil-eyebrow.phil-reveal, .phil-heading.phil-reveal, .phil-intro.phil-reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1); } .phil-eyebrow.phil-reveal--visible, .phil-heading.phil-reveal--visible, .phil-intro.phil-reveal--visible{ opacity:1; transform:translateY(0); } .phil-divider.phil-reveal{ opacity:0; transition:opacity 0.5s ease; } .phil-divider.phil-reveal--visible{ opacity:1; } .phil-divider.phil-reveal .phil-divider__line{ transform:scaleX(0); transform-origin:center; transition:transform 0.8s cubic-bezier(.16,.84,.44,1) 0.15s; } .phil-divider.phil-reveal--visible .phil-divider__line{ transform:scaleX(1); } .phil-divider.phil-reveal .phil-divider__spark{ opacity:0; transform:scale(0.3); transition:opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s; } .phil-divider.phil-reveal--visible .phil-divider__spark{ opacity:0.8; transform:scale(1); } @media (min-width:768px){ .phil-card.phil-reveal{ opacity:0; transform:translateY(40px) scale(0.97); } /* --visible state, if the animations below were ever skipped for any reason, still lands on the fully-visible resting values */ .phil-card.phil-reveal--visible{ opacity:1; transform:translateY(0) scale(1); } @keyframes phil-rise-in{ from{ opacity:0; transform:translateY(40px) scale(0.97); } to{ opacity:1; transform:translateY(0) scale(1); } } @keyframes phil-flash-purple{ 0%{ box-shadow:var(--shadow), 0 0 0 3px var(--purple), 0 0 46px 6px var(--purple-soft); } 100%{ box-shadow:var(--shadow); } } @keyframes phil-flash-blue{ 0%{ box-shadow:var(--shadow), 0 0 0 3px var(--blue), 0 0 46px 6px var(--blue-soft); } 100%{ box-shadow:var(--shadow); } } @keyframes phil-flash-green{ 0%{ box-shadow:var(--shadow), 0 0 0 3px var(--green), 0 0 46px 6px var(--green-soft); } 100%{ box-shadow:var(--shadow); } } @keyframes phil-flash-amber{ 0%{ box-shadow:var(--shadow), 0 0 0 3px var(--amber), 0 0 46px 6px var(--amber-soft); } 100%{ box-shadow:var(--shadow); } } @keyframes phil-flash-teal{ 0%{ box-shadow:var(--shadow), 0 0 0 3px var(--teal), 0 0 46px 6px var(--teal-soft); } 100%{ box-shadow:var(--shadow); } } /* `animation` is a separate CSS mechanism from `transition` — using it here (instead of a transition, which would collide with and silently replace the hover `transition` declared elsewhere on this same element) keeps hover/tap feedback fully intact after the reveal plays. animation-fill-mode:forwards keeps the card at its revealed opacity/transform once the animation ends. */ .phil-card[data-card-index="1"].phil-reveal--visible{ animation:phil-rise-in 0.7s cubic-bezier(.16,.84,.44,1) forwards, phil-flash-purple 1.1s ease-out; } .phil-card[data-card-index="2"].phil-reveal--visible{ animation:phil-rise-in 0.7s cubic-bezier(.16,.84,.44,1) forwards, phil-flash-blue 1.1s ease-out; } .phil-card[data-card-index="3"].phil-reveal--visible{ animation:phil-rise-in 0.7s cubic-bezier(.16,.84,.44,1) forwards, phil-flash-green 1.1s ease-out; } .phil-card[data-card-index="4"].phil-reveal--visible{ animation:phil-rise-in 0.7s cubic-bezier(.16,.84,.44,1) forwards, phil-flash-amber 1.1s ease-out; } .phil-card[data-card-index="5"].phil-reveal--visible{ animation:phil-rise-in 0.7s cubic-bezier(.16,.84,.44,1) forwards, phil-flash-teal 1.1s ease-out; } /* once the rise-in animation finishes, JS adds this class to cancel the animation outright — an animation with fill-mode:forwards holds its end value with priority even over a later :hover transform, so without this, hovering a card could stop lifting after its first reveal. Handing off to the plain (non-animated) .phil-reveal--visible rule above lets :hover reclaim transform normally, permanently. */ .phil-card.phil-reveal--done{ animation:none !important; } } @media (prefers-reduced-motion: reduce){ .phil-reveal{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; } }