/* Theme Name: Midnimo Theme URI: https://ururkamidnimo.com/ Author: Ururka Midnimo Description: Official block theme for Ururka Midnimo. Midnight navy and sky blue with amber accents, the dove emblem, Montserrat headlines and Noto Sans text. Version: 3.1.2 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: midnimo */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :where(a) { text-underline-offset: .18em; text-decoration-thickness: 1px; } /* Header */ .mid-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(10px); background: rgba(5, 28, 60, .94) !important; border-bottom: 1px solid rgba(70, 168, 252, .18); } .admin-bar .mid-header { top: 32px; } @media (max-width: 782px) { .admin-bar .mid-header { top: 46px; } } .mid-logo img { height: 46px; width: auto; display: block; } .mid-header .wp-block-navigation a { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .mid-header .wp-block-navigation a:hover, .mid-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--sky) !important; border-color: var(--wp--preset--color--sky); } .mid-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy) !important; padding: 2rem; } .mid-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.1rem; } /* Buttons */ .wp-block-button__link { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(70, 168, 252, .7); } .is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,.08) !important; box-shadow: none; } /* Hero */ .mid-hero { position: relative; overflow: hidden; } .mid-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 30%, rgba(70,168,252,.35), transparent 60%), radial-gradient(40% 50% at 10% 100%, rgba(70,168,252,.15), transparent 70%); pointer-events: none; } .mid-hero > * { position: relative; } .mid-hero .mid-seal img { filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); max-width: 420px; width: 100%; margin-inline: auto; display: block; } .mid-eyebrow { letter-spacing: .22em; text-transform: uppercase; } .mid-rule { width: 56px; height: 4px; border-radius: 4px; background: var(--wp--preset--color--amber); border: 0; margin-left: 0 !important; } /* Cards */ .mid-card { border-radius: 18px; border: 1px solid var(--wp--preset--color--line); background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; } .mid-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(5,28,60,.45); border-color: rgba(70,168,252,.5); } .mid-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--wp--preset--color--mist); display: grid; place-items: center; font-size: 22px; color: var(--wp--preset--color--sky); } /* Post grid */ .mid-posts .wp-block-post { border-radius: 16px; overflow: hidden; border: 1px solid var(--wp--preset--color--line); background: #fff; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .mid-posts .wp-block-post:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(5,28,60,.45); } .mid-posts .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/10; overflow: hidden; background: var(--wp--preset--color--mist) url('assets/emblem.png') center/72px no-repeat; } .mid-posts .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .mid-posts .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); } .mid-posts .wp-block-post-title a { text-decoration: none; } .mid-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--sky); } .mid-posts .mid-post-body { padding: 1.25rem 1.4rem 1.5rem; flex: 1; } /* Single */ .mid-single .wp-block-post-featured-image img { border-radius: 18px; } .mid-single .wp-block-post-content { font-size: 1.075rem; line-height: 1.8; } .mid-single .wp-block-post-content p { margin-block: 0 1.25em; } /* File downloads (documents on pages) */ .wp-block-file { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; background: #fff; margin-bottom: .75rem; } .wp-block-file a:not(.wp-block-file__button) { font-weight: 600; color: var(--wp--preset--color--navy); text-decoration: none; } .wp-block-file .wp-block-file__button { background: var(--wp--preset--color--navy) !important; color: #fff !important; border-radius: 999px !important; padding: .55rem 1.1rem !important; font-size: .85rem; text-decoration: none; font-weight: 600; } .wp-block-file .wp-block-file__embed { border-radius: 12px; } /* Gallery */ .wp-block-gallery img { border-radius: 12px; } /* Pagination */ .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { padding: .45rem .85rem; border-radius: 999px; text-decoration: none; } .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--navy); color: #fff; } /* Footer */ .mid-footer a { text-decoration: none; } .mid-footer a:hover { color: var(--wp--preset--color--sky) !important; } .mid-footer .mid-emblem img { width: 72px; height: 72px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } .mid-posts .wp-block-post-template { margin-top: 2rem; } :where(h1, h2, h3, h4) a { color: inherit; text-decoration: none; } :where(h1, h2, h3, h4) a:hover { color: var(--wp--preset--color--sky); } .mid-header .wp-block-navigation__container { flex-wrap: nowrap; } @media (max-width: 1100px) { .mid-header .wp-block-navigation a { font-size: .74rem; letter-spacing: .05em; } .mid-logo img { height: 40px; } } /* ===== Round 2: calmer hero, sticky header, amber accents ===== */ header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } .admin-bar header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } } .mid-header { position: relative; top: auto !important; border-bottom: 1px solid rgba(255,255,255,.08); } .mid-header .wp-block-navigation a { font-weight: 500; letter-spacing: .06em; font-size: .78rem; color: rgba(255,255,255,.82) !important; } .mid-header .wp-block-navigation a:hover, .mid-header .wp-block-navigation .current-menu-item > a { color: #fff !important; border-color: var(--wp--preset--color--amber); } h1, h2, h3, h4 { font-optical-sizing: auto; text-wrap: balance; } p { text-wrap: pretty; } .wp-block-button__link:hover { box-shadow: 0 10px 24px -12px rgba(245,158,23,.65); } .mid-btn-ghost .wp-block-button__link { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; } .mid-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.4) !important; box-shadow: none; } .mid-hero { background: #051C3C !important; } .mid-hero::before { background: radial-gradient(45% 60% at 80% 40%, rgba(70,168,252,.13), transparent 70%); } .mid-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,23,.45), transparent); } .mid-hero h1 { color: #fff; } .mid-hero h1 .mid-hl { color: var(--wp--preset--color--amber); } .mid-hero-lede { color: rgba(255,255,255,.72) !important; max-width: 34ch; } .mid-emblem-hero { position: relative; width: min(300px, 70vw); aspect-ratio: 1; margin-inline: auto; } .mid-emblem-hero::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); } .mid-emblem-hero::after { content: ""; position: absolute; inset: -48px; border-radius: 50%; border: 1px dashed rgba(245,158,23,.22); } .mid-emblem-hero img { width: 100%; height: 100%; display: block; position: relative; z-index: 1; filter: drop-shadow(0 24px 48px rgba(0,0,0,.35)); } .mid-eyebrow { letter-spacing: .18em; font-weight: 600 !important; } .mid-eyebrow-amber { color: var(--wp--preset--color--amber) !important; } .mid-eyebrow-dark { color: var(--wp--preset--color--amber-deep) !important; } .mid-icon { background: var(--wp--preset--color--amber-soft); color: var(--wp--preset--color--amber-deep); } .mid-card:hover { border-color: rgba(245,158,23,.55); } .mid-card h3 a:hover, .mid-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--amber-deep) !important; } .mid-posts .wp-block-post-date { color: var(--wp--preset--color--amber-deep); } .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); } .mid-footer a:hover { color: var(--wp--preset--color--amber) !important; } .mid-single .wp-block-post-terms a { color: var(--wp--preset--color--amber) !important; } .wp-block-quote { border-left-color: var(--wp--preset--color--amber) !important; } @media (max-width: 781px) { .mid-hero .mid-hero-media { order: -1; } .mid-emblem-hero { width: 180px; } .mid-emblem-hero::after { inset: -32px; } } .wp-site-blocks :is(h1, h2, h3, h4) a, .editor-styles-wrapper :is(h1, h2, h3, h4) a { color: var(--wp--preset--color--navy); text-decoration: none; } .mid-hero :is(h1, h2) a, .mid-footer :is(h1, h2, h3) a { color: #fff; } .wp-site-blocks :is(h1, h2, h3, h4) a:hover { color: var(--wp--preset--color--amber-deep); } .mid-card h3 { font-size: 1.3rem !important; font-weight: 600; } .mid-card p { font-size: .97rem; line-height: 1.65; } .mid-hero p.mid-hero-lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important; line-height: 1.6; } .mid-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem) !important; line-height: 1.08; } /* ===== Round 3: texture, orbits, hero options ===== */ .mid-hero { isolation: isolate; } .mid-hero::before { background: radial-gradient(45% 60% at 80% 40%, rgba(70,168,252,.12), transparent 70%), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 85%); z-index: -1; } .mid-hero > .mid-grain, .mid-hero .mid-grain { display: none; } .mid-hero { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important; background-color: #051C3C !important; background-size: 220px 220px !important; background-blend-mode: soft-light; } .mid-hero { box-shadow: inset 0 0 0 9999px rgba(5,28,60,.93); } /* orbiting rings */ .mid-emblem-hero::before, .mid-emblem-hero::after { display: none; } .mid-orbit { position: absolute; border-radius: 50%; pointer-events: none; animation: mid-spin 26s linear infinite; } .mid-orbit.o1 { inset: -24px; border: 1px solid rgba(255,255,255,.12); } .mid-orbit.o2 { inset: -54px; border: 1px dashed rgba(245,158,23,.3); animation-duration: 42s; animation-direction: reverse; } .mid-orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #46A8FC; box-shadow: 0 0 0 4px rgba(70,168,252,.18), 0 0 18px rgba(70,168,252,.8); } .mid-orbit.o2 i { background: #F59E17; box-shadow: 0 0 0 4px rgba(245,158,23,.18), 0 0 18px rgba(245,158,23,.8); } .mid-orbit.o2 i.b { top: auto; bottom: -4px; width: 7px; height: 7px; margin-left: -3.5px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); } @keyframes mid-spin { to { transform: rotate(360deg); } } /* option labels (preview only) */ .mid-opt-label { margin: 0 !important; background: #F59E17; color: #051C3C; font: 600 .8rem/1 var(--wp--preset--font-family--heading); letter-spacing: .04em; padding: .7rem clamp(1rem,4vw,2rem); } .mid-opt-label span { background: #051C3C; color: #F59E17; padding: .3rem .6rem; border-radius: 6px; margin-right: .5rem; text-transform: uppercase; letter-spacing: .12em; } .mid-opt-label + * { margin-top: 0 !important; } /* shared custom buttons for B/C */ .mid-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: 999px; font: 600 .875rem/1 var(--wp--preset--font-family--heading); text-decoration: none !important; transition: transform .2s, box-shadow .2s, background-color .2s; } .mid-btn-amber { background: #F59E17; color: #051C3C !important; } .mid-btn-amber:hover { background: #FFB23E; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(245,158,23,.65); } .mid-btn-ghost-a { color: #fff !important; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); } .mid-btn-ghost-a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); } .mid-hb-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; } .mid-hb-actions.center { justify-content: center; } /* Hero B */ .mid-hero-b { padding: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2rem); color: #fff; } .mid-hb-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .mid-hero-b h1 { margin: 1rem 0 0; } .mid-hero-b .mid-hero-lede, .mid-hero-c .mid-hero-lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; margin-top: 1.25rem; } .mid-hb-media { position: relative; height: clamp(340px, 38vw, 470px); } .mid-hb-photo { position: absolute; display: block; overflow: hidden; border-radius: 20px; box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); transition: transform .5s ease; } .mid-hb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.02); } .mid-hb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,28,60,.55)); } .mid-hb-photo.p0 { inset: 0 18% 22% 0; z-index: 2; } .mid-hb-photo.p1 { width: 44%; height: 46%; right: 0; top: 6%; z-index: 1; transform: rotate(3deg); } .mid-hb-photo.p2 { width: 38%; height: 38%; right: 6%; bottom: 0; z-index: 3; transform: rotate(-2deg); } .mid-hb-media:hover .mid-hb-photo.p1 { transform: rotate(5deg) translateY(-4px); } .mid-hb-media:hover .mid-hb-photo.p2 { transform: rotate(-4deg) translateY(4px); } .mid-hb-badge { position: absolute; top: -26px; left: -22px; width: 84px; height: 84px; z-index: 5; border-radius: 50%; box-shadow: 0 0 0 6px #051C3C, 0 16px 30px rgba(0,0,0,.4); animation: mid-float 6s ease-in-out infinite; } .mid-hb-card { position: absolute; left: -18px; bottom: 6%; z-index: 4; width: min(320px, 80%); display: grid; gap: .45rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: rgba(10,42,85,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); color: #fff !important; text-decoration: none !important; box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); transition: transform .25s; } .mid-hb-card:hover { transform: translateY(-3px); } .mid-hb-card strong { font: 600 1rem/1.35 var(--wp--preset--font-family--heading); } .mid-pill { justify-self: start; font: 600 .68rem/1 var(--wp--preset--font-family--heading); letter-spacing: .14em; text-transform: uppercase; color: #051C3C; background: #F59E17; padding: .35rem .6rem; border-radius: 999px; } .mid-hb-date { font-size: .8rem; color: rgba(255,255,255,.65); } @keyframes mid-float { 50% { transform: translateY(-8px); } } @media (max-width: 860px) { .mid-hb-inner { grid-template-columns: 1fr; } .mid-hb-card { left: 0; } .mid-hb-badge { left: 8px; } } /* Hero C */ .mid-hero-c { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) clamp(1rem, 4vw, 2rem); color: #fff; text-align: center; } .mid-hc-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .mid-hc-inner .mid-hero-lede { margin-inline: auto; max-width: 46ch; } .mid-hero-c h1 { margin: 1rem 0 0; font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important; } .mid-hc-star { position: absolute; z-index: 0; width: min(760px, 120vw); left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .9; pointer-events: none; } .mid-hc-star .spin { transform-origin: 0 0; animation: mid-spin 90s linear infinite; } .mid-hc-star .ring { fill: none; stroke: rgba(255,255,255,.07); stroke-width: .5; } .mid-hc-star .ring.dash { stroke: rgba(245,158,23,.18); stroke-dasharray: 2 4; } .mid-hc-star .star { fill: rgba(70,168,252,.06); stroke: rgba(70,168,252,.35); stroke-width: .6; } .mid-hc-star .dot { fill: #F59E17; filter: drop-shadow(0 0 3px rgba(245,158,23,.9)); } .mid-words { display: block; height: 1.12em; overflow: hidden; color: #F59E17; } .mid-words span { display: block; height: 1.12em; animation: mid-words 10s cubic-bezier(.7,0,.3,1) infinite; } @keyframes mid-words { 0%,18% { transform: translateY(0); } 25%,43% { transform: translateY(-100%); } 50%,68% { transform: translateY(-200%); } 75%,93% { transform: translateY(-300%); } 100% { transform: translateY(-400%); } } .mid-values { list-style: none; padding: 0; margin: 2.75rem 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.75rem; font: 500 .8rem/1 var(--wp--preset--font-family--heading); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); } .mid-values li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #F59E17; margin-right: .6rem; vertical-align: middle; } @media (prefers-reduced-motion: reduce) { .mid-orbit, .mid-hc-star .spin, .mid-words span, .mid-hb-badge { animation: none !important; } } /* ===== Round 4: minimal unity hero ===== */ .mid-hero-u { padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1rem, 4vw, 2rem); color: #fff; overflow: hidden; } .mid-hu-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .mid-hero-u h1 { margin: 1.1rem 0 0; font-size: clamp(2.4rem, 5vw, 4rem) !important; line-height: 1.04; letter-spacing: -.025em; font-weight: 700; } .mid-hero-u h1 .mid-hl { display: block; } .mid-hero-u .mid-hero-lede { margin-top: 1.4rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(255,255,255,.66) !important; max-width: 36ch; } .mid-hero-u .mid-eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0; font-size: .78rem; } .mid-hero-u .mid-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: currentColor; } .mid-hu-copy > * { animation: mid-rise .9s cubic-bezier(.2,.7,.2,1) both; } .mid-hu-copy > :nth-child(2) { animation-delay: .08s; } .mid-hu-copy > :nth-child(3) { animation-delay: .16s; } .mid-hu-copy > :nth-child(4) { animation-delay: .24s; } @keyframes mid-rise { from { opacity: 0; transform: translateY(14px); } } .mid-hu-art { margin: 0; position: relative; justify-self: center; width: min(460px, 100%); } .mid-hu-art svg { width: 100%; height: auto; display: block; overflow: visible; } .mid-u-halo { opacity: 0; animation: mid-fade 1.6s 2.2s ease forwards; } .mid-u-ring { fill: none; stroke: rgba(255,255,255,.08); stroke-width: .6; } .mid-u-ring-spin { stroke: rgba(245,158,23,.35); stroke-dasharray: 1 7; stroke-width: 1.2; transform-origin: 0 0; animation: mid-spin 60s linear infinite; } .mid-u-fill { fill: rgba(70,168,252,.07); opacity: 0; animation: mid-fade 1.4s 2.4s ease forwards; } .mid-u-line { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mid-draw 1.6s 1.9s cubic-bezier(.6,0,.2,1) forwards; } .mid-u-dot { fill: rgba(255,255,255,.85); transform: translate(var(--dx), var(--dy)); opacity: 0; animation: mid-gather 2.1s var(--d) cubic-bezier(.7,0,.15,1) forwards; } .mid-u-dot.sky { fill: #46A8FC; } .mid-u-dot.amb { fill: #F59E17; } .mid-u-dot.tip { fill: #F59E17; filter: drop-shadow(0 0 4px rgba(245,158,23,.9)); } .mid-u-dots { animation: mid-breathe 6s 4s ease-in-out infinite; transform-origin: 0 0; } @keyframes mid-gather { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)); } 25% { opacity: .9; } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes mid-draw { to { stroke-dashoffset: 0; } } @keyframes mid-fade { to { opacity: 1; } } @keyframes mid-breathe { 50% { transform: scale(1.025); } } .mid-hu-art figcaption { text-align: center; margin-top: .5rem; font: 500 .74rem/1 var(--wp--preset--font-family--heading); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); opacity: 0; animation: mid-fade 1s 3s ease forwards; } .mid-hu-art figcaption strong { color: #F59E17; font-weight: 600; } @media (max-width: 860px) { .mid-hu-inner { grid-template-columns: 1fr; text-align: left; } .mid-hu-art { width: min(300px, 80vw); order: 2; } } @media (prefers-reduced-motion: reduce) { .mid-u-dot, .mid-u-line, .mid-u-fill, .mid-u-halo, .mid-hu-art figcaption, .mid-hu-copy > * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } } /* ===== Round 5: night → dawn → day journey ===== */ /* Hero: night sky, with dawn rising after the star forms */ .mid-hero.mid-hero-u { box-shadow: none; background: linear-gradient(180deg, #030F22 0%, #051C3C 55%, #0A2A55 100%) !important; position: relative; } .mid-hero-u::after { content: ""; position: absolute; inset: 0; height: auto; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px; opacity: .06; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } .mid-hu-inner { position: relative; z-index: 2; } .mid-dawn { position: absolute; left: 50%; bottom: -55%; width: 160%; aspect-ratio: 2.2; transform: translateX(-50%) translateY(18%); border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(closest-side, rgba(245,158,23,.42), rgba(245,158,23,.16) 38%, rgba(70,168,252,.12) 62%, transparent 78%); opacity: 0; animation: mid-dawnrise 3.2s 2.4s cubic-bezier(.2,.6,.2,1) forwards; } @keyframes mid-dawnrise { to { opacity: 1; transform: translateX(-50%) translateY(0); } } .mid-hero-u { padding-bottom: clamp(6rem, 11vw, 9rem); } .mid-cue { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.35); opacity: 0; animation: mid-fade 1s 3.6s forwards; } .mid-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #F59E17; animation: mid-cue 1.8s 4s ease-in-out infinite; } @keyframes mid-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } } /* Journey: the sky brightens from deep blue to morning light */ .mid-journey { position: relative; color: #fff; padding: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2rem) clamp(7rem, 14vw, 11rem); background: linear-gradient(180deg, #0A2A55 0%, #0F3A70 30%, #1F5C9E 58%, #5FA6E6 80%, #CFE7FC 93%, #EAF5FF 100%); overflow: hidden; } .mid-journey::before { content: ""; position: absolute; left: 50%; top: 0; width: 120%; height: 70%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(245,158,23,.22), transparent 70%); pointer-events: none; } .mid-j-inner { position: relative; max-width: 1100px; margin: 0 auto; text-align: center; } .mid-journey h2 { color: #fff !important; margin: 1rem 0 0; font-size: clamp(2rem, 4vw, 3rem); } .mid-journey h2 .mid-hl { color: #F59E17; } .mid-journey .mid-eyebrow { justify-content: center; display: inline-flex; gap: .7rem; align-items: center; } .mid-j-lede { margin: 1.1rem auto 0; max-width: 52ch; color: rgba(255,255,255,.72); font-size: 1.05rem; } .mid-steps { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; text-align: left; } .mid-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 9px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, #F59E17 50%, #fff 100%); transform-origin: left; } .mid-js .mid-steps::before { transform: scaleX(0); transition: transform 1.8s cubic-bezier(.6,0,.2,1) .2s; } .mid-js .mid-steps.is-in::before { transform: scaleX(1); } .mid-step { position: relative; padding: 2.4rem 1.6rem 1.8rem; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mid-step-dot { position: absolute; top: 2px; left: 1.6rem; width: 16px; height: 16px; border-radius: 50%; } .mid-step.past .mid-step-dot { background: #0A2A55; border: 2px solid rgba(255,255,255,.35); } .mid-step.now .mid-step-dot { background: #F59E17; box-shadow: 0 0 0 6px rgba(245,158,23,.2); animation: mid-pulse 2.4s ease-in-out infinite; } .mid-step.future .mid-step-dot { background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.18), 0 0 28px 6px rgba(255,236,190,.8); } @keyframes mid-pulse { 50% { box-shadow: 0 0 0 12px rgba(245,158,23,0); } } .mid-step-when { display: block; font: 600 .72rem/1 var(--wp--preset--font-family--heading); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); } .mid-step.now .mid-step-when { color: #F59E17; } .mid-step h3 { color: #fff !important; margin: .7rem 0 .5rem; font-size: 1.35rem; } .mid-step p { margin: 0; color: rgba(255,255,255,.75); font-size: .97rem; line-height: 1.6; } .mid-step.past { opacity: .82; } .mid-step.future { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); } /* Morning → day: values, then news */ .mid-sec-values { background: linear-gradient(180deg, #EAF5FF 0%, #F6FAFF 55%, #FFFFFF 100%) !important; } .mid-sec-values .mid-card { background: rgba(255,255,255,.8); } .mid-sec-news { background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%) !important; } /* Bright future: sunrise */ .mid-future { position: relative; overflow: hidden; text-align: center; padding: clamp(5rem, 10vw, 8rem) clamp(1rem, 4vw, 2rem) clamp(6rem, 12vw, 9rem); background: linear-gradient(180deg, #F7F9FC 0%, #FFF6E6 45%, #FFE6BA 100%); color: #051C3C; } .mid-sun { position: absolute; left: 50%; bottom: -260px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; background: radial-gradient(circle, #FFD27A 0%, #F59E17 38%, rgba(245,158,23,.25) 58%, transparent 70%); opacity: .75; pointer-events: none; } .mid-sun::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(245,158,23,.10) 0 4deg, transparent 4deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); animation: mid-spin 120s linear infinite; } .mid-f-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .mid-future h2 { margin: 1rem 0 0; font-size: clamp(2rem, 4.2vw, 3.2rem); color: #051C3C !important; } .mid-f-lede { margin: 1.1rem auto 0; max-width: 46ch; color: #3B4B63; font-size: 1.05rem; } .mid-future .mid-eyebrow { display: inline-flex; gap: .7rem; align-items: center; } .mid-btn-navy { background: #051C3C; color: #fff !important; } .mid-btn-navy:hover { background: #0A2A55; transform: translateY(-1px); box-shadow: 0 12px 26px -14px rgba(5,28,60,.7); } .mid-btn-line { color: #051C3C !important; border: 1px solid rgba(5,28,60,.25); background: rgba(255,255,255,.5); } .mid-btn-line:hover { background: #fff; border-color: rgba(5,28,60,.45); } /* Footer picks up from the warm horizon and settles into night */ .mid-footer { background: linear-gradient(180deg, #0A2A55 0%, #051C3C 40%) !important; position: relative; } .mid-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #F59E17, transparent); opacity: .6; } /* Scroll reveals (only when JS is on) */ .mid-js .mid-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--mid-i, 0) * 90ms); } .mid-js .mid-reveal.is-in { opacity: 1; transform: none; } .mid-js .mid-card.mid-reveal.is-in:hover, .mid-js .mid-posts .wp-block-post.mid-reveal.is-in:hover { transform: translateY(-3px); } @media (max-width: 860px) { .mid-steps { grid-template-columns: 1fr; } .mid-steps::before { left: calc(1.6rem + 7px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(255,255,255,.18), #F59E17 50%, #fff); transform-origin: top; } .mid-js .mid-steps::before { transform: scaleY(0); } .mid-js .mid-steps.is-in::before { transform: scaleY(1); } .mid-step { padding-left: 3.4rem; padding-top: 1.6rem; } .mid-step-dot { top: 1.75rem; left: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .mid-dawn, .mid-cue { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; } .mid-cue { transform: none !important; } .mid-sun::after { animation: none; } } /* seamless: no gaps between full-width sections */ main > .alignfull, main > section, .wp-site-blocks > footer, .wp-site-blocks > main, .is-root-container > main > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .wp-site-blocks > * + * { margin-block-start: 0 !important; } /* ===== Round 6: design-engineering polish pass ===== */ :root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); } /* Buttons: precise transitions, press feedback, hover only on real pointers */ .wp-block-button__link, .mid-btn { transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease; } .wp-block-button__link:hover, .mid-btn:hover, .mid-btn-amber:hover, .mid-btn-navy:hover { transform: none; box-shadow: none; } @media (hover: hover) and (pointer: fine) { .wp-block-button__link:hover, .mid-btn-amber:hover, .mid-btn-navy:hover { transform: translateY(-1px); } .mid-btn-amber:hover, .wp-block-button:not(.mid-btn-ghost) .wp-block-button__link:hover { box-shadow: 0 10px 24px -12px rgba(245,158,23,.65); } .mid-btn-navy:hover { box-shadow: 0 12px 26px -14px rgba(5,28,60,.7); } } .wp-block-button__link:active, .mid-btn:active { transform: scale(.97) !important; box-shadow: none; transition-duration: 100ms; } .mid-btn:focus-visible, .wp-block-button__link:focus-visible, .mid-header a:focus-visible { outline: 2px solid #F59E17; outline-offset: 3px; } /* Cards and posts: lift only on hover-capable devices, quick and precise */ .mid-card, .mid-posts .wp-block-post { transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; } .mid-card:hover, .mid-posts .wp-block-post:hover { transform: none; box-shadow: none; } .mid-posts .wp-block-post-featured-image img { transition: transform 400ms var(--ease-out); } .mid-posts .wp-block-post:hover .wp-block-post-featured-image img { transform: none; } @media (hover: hover) and (pointer: fine) { .mid-card:hover, .mid-posts .wp-block-post:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(5,28,60,.45); } .mid-posts .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); } } .mid-posts .wp-block-post:active { transform: scale(.99); } /* Scroll reveal: shorter distance, strong ease-out, tight stagger; then hand back to hover */ .mid-js .mid-reveal { transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--mid-i, 0) * 60ms); } .mid-js .mid-reveal.is-done { transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease; transition-delay: 0ms; } /* Hero intro: snappier copy, star gather with a true in-out curve */ .mid-hu-copy > * { animation-duration: 600ms; animation-timing-function: var(--ease-out); } .mid-u-dot { animation-duration: 1.8s; animation-timing-function: var(--ease-in-out); } .mid-u-line { animation-delay: 1.7s; animation-duration: 1.2s; animation-timing-function: var(--ease-in-out); } .mid-u-fill, .mid-u-halo { animation-delay: 2s; } .mid-dawn { animation-delay: 2s; animation-duration: 2.6s; animation-timing-function: var(--ease-out); } .mid-hu-art figcaption { animation-delay: 2.4s; } .mid-cue { animation-delay: 2.8s; } /* Pause looping decoration when off screen (set by reveal.js) */ .is-off .mid-u-dots, .is-off .mid-u-ring-spin, .is-off .mid-cue span, .is-off .mid-step-dot, .is-off .mid-sun::after { animation-play-state: paused !important; } /* Reduced motion: keep gentle fades, remove movement */ @media (prefers-reduced-motion: reduce) { .mid-hu-copy > *, .mid-hu-art figcaption, .mid-u-halo, .mid-u-fill { animation: mid-fade 400ms ease both !important; opacity: 0; } .mid-u-dot { animation: mid-fade 400ms ease both !important; opacity: 0; transform: none !important; } .mid-u-line { stroke-dashoffset: 0 !important; animation: none !important; } .mid-dawn { animation: mid-fade 600ms ease both !important; opacity: 0; transform: translateX(-50%) !important; } .mid-u-dots, .mid-u-ring-spin, .mid-cue span, .mid-step-dot, .mid-sun::after { animation: none !important; } .wp-block-button__link:active, .mid-btn:active { transform: none !important; } } @media (hover: none), (pointer: coarse) { .mid-js .mid-reveal.is-in:hover { transform: none; } } /* ===== Round 7: caravan scene (very faint, behind everything) ===== */ .mid-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; animation: mid-scene-in 3s .4s var(--ease-out) forwards; } @keyframes mid-scene-in { to { opacity: .55; } } /* Dunes: barely lighter than the sky, drifting like glaciers */ .mid-dune { transform-box: view-box; } .mid-dune-back { fill: #0B2A56; opacity: .75; animation: mid-glacier 140s ease-in-out infinite alternate; } .mid-dune-mid { fill: #082249; opacity: .9; animation: mid-glacier 110s ease-in-out -40s infinite alternate-reverse; } .mid-dune-front { fill: #0A2A55; animation: mid-glacier 90s ease-in-out -20s infinite alternate; } @keyframes mid-glacier { from { transform: translateX(-28px); } to { transform: translateX(28px); } } /* The tunnel of light on the horizon, under the star */ .mid-tunnel { mix-blend-mode: screen; opacity: .5; } .mid-rays { opacity: .55; animation: mid-sway 60s ease-in-out infinite alternate; } @keyframes mid-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } } .mid-core { transform-box: fill-box; transform-origin: 50% 80%; animation: mid-glow 14s ease-in-out infinite alternate; } @keyframes mid-glow { from { opacity: .55; transform: scale(.94); } to { opacity: .9; transform: scale(1.04); } } .mid-arch { fill: none; stroke: #FFE3A8; stroke-width: 1.4; opacity: 0; animation: mid-arch 18s linear infinite; } @keyframes mid-arch { 0% { transform: scale(.12); opacity: 0; } 15% { opacity: .55; } 80% { opacity: .12; } 100% { transform: scale(1.9); opacity: 0; } } /* The caravan: walks from the foreground dunes into the light, slowly getting lit */ .mid-caravan { color: #01091B; fill: currentColor; opacity: 0; animation: mid-journeywalk 95s linear infinite; } @keyframes mid-journeywalk { 0% { transform: translate(-40px, 790px) scale(1.25); opacity: 0; color: #01091B; } 6% { opacity: .95; } 38% { transform: translate(380px, 712px) scale(1); color: #020D22; } 68% { transform: translate(760px, 662px) scale(.68); color: #0B1E3A; } 86% { transform: translate(960px, 626px) scale(.46); color: #5B4A33; opacity: .95; } 96% { transform: translate(1032px, 614px) scale(.34); color: #F2C77A; opacity: .8; } 100% { transform: translate(1046px, 612px) scale(.3); color: #FFF1D2; opacity: 0; } } .mid-w { animation: mid-bob 1.15s ease-in-out infinite alternate; } .mid-w-camel { animation-duration: 1.45s; } @keyframes mid-bob { to { transform: translateY(-1.2px); } } .mid-lb { visibility: hidden; } .mid-w .mid-la { animation: mid-legA 1.15s steps(1) infinite; animation-delay: inherit; } .mid-w .mid-lb { animation: mid-legB 1.15s steps(1) infinite; animation-delay: inherit; } .mid-w-camel .mid-la, .mid-w-camel .mid-lb { animation-duration: 1.45s; } @keyframes mid-legA { 0% { visibility: visible; } 50% { visibility: hidden; } } @keyframes mid-legB { 0% { visibility: hidden; } 50% { visibility: visible; } } /* Background dots drift like a glacier (seamless 24px loop) */ .mid-hero-u::before { inset: -24px; animation: mid-dotdrift 60s linear infinite; } @keyframes mid-dotdrift { to { transform: translate(24px, 24px); } } /* The dawn breathes very slowly once it has risen */ .mid-hero-u .mid-dawn { animation: mid-dawnrise 2.6s 2s var(--ease-out) forwards, mid-dawnbreath 20s 5s ease-in-out infinite alternate; } @keyframes mid-dawnbreath { from { filter: brightness(1); } to { filter: brightness(1.18); } } /* Paused when off screen; on small screens the scene is even quieter */ .is-off .mid-scene *, .is-off.mid-hero-u::before, .is-off .mid-dawn { animation-play-state: paused !important; } @media (max-width: 860px) { .mid-scene { animation-name: mid-scene-in-sm; } @keyframes mid-scene-in-sm { to { opacity: .4; } } } @media (prefers-reduced-motion: reduce) { .mid-scene { animation: mid-fade 600ms ease both !important; opacity: 0; } .mid-dune, .mid-rays, .mid-core, .mid-w, .mid-la, .mid-lb, .mid-hero-u::before { animation: none !important; } .mid-arch { animation: none !important; opacity: .25; transform: scale(1); } .mid-caravan { animation: none !important; opacity: .9; transform: translate(560px, 690px) scale(.85); } .mid-lb { visibility: hidden !important; } .mid-la { visibility: visible !important; } } /* Hero hands over to the journey section with no seam */ .mid-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,42,85,0) 0%, #0A2A55 92%); } .mid-journey::before { background: radial-gradient(45% 55% at 50% 0%, rgba(245,158,23,.16), transparent 70%); } /* ===== Round 8: interactive hero ===== */ .mid-hero-i .mid-hu-inner { pointer-events: none; } .mid-hero-i .mid-hu-copy, .mid-hero-i .mid-hu-art { pointer-events: auto; } .mid-hero-i .mid-caravan { pointer-events: visiblePainted; cursor: pointer; outline: none; } .mid-hero-i .mid-scene { pointer-events: none; } /* "Watch the journey" chip */ .mid-watch { position: absolute; z-index: 4; left: max(clamp(1rem, 4vw, 2rem), calc((100% - 1200px) / 2)); bottom: 1.6rem; display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .95rem .55rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(5,28,60,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.82); font: 500 .78rem/1 var(--wp--preset--font-family--heading); letter-spacing: .04em; cursor: pointer; opacity: 0; animation: mid-fade 800ms 3.2s var(--ease-out) forwards; transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; } .mid-watch-i { width: 22px; height: 22px; border-radius: 50%; background: #F59E17; position: relative; flex: none; } .mid-watch-i::after { content: ""; position: absolute; left: 8.5px; top: 6.5px; border-left: 7px solid #051C3C; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; } @media (hover: hover) and (pointer: fine) { .mid-watch:hover { background: rgba(5,28,60,.7); border-color: rgba(245,158,23,.5); color: #fff; } } .mid-watch:active { transform: scale(.97); } .mid-watch:focus-visible, .mid-hu-art:focus-visible, .mid-caravan:focus-visible { outline: 2px solid #F59E17; outline-offset: 4px; } /* Star is tappable */ .mid-hero-i .mid-hu-art { cursor: pointer; border-radius: 50%; transition: transform 1100ms var(--ease-in-out); } @media (hover: hover) and (pointer: fine) { .mid-hero-i:not(.is-emblem) .mid-hu-art:hover .mid-u-halo { opacity: 1 !important; filter: brightness(1.6); transition: filter 300ms ease; } .mid-hero-i:not(.is-emblem) .mid-hu-art:hover .mid-u-line { stroke: rgba(255,255,255,.85); } } /* Star → emblem */ .mid-u-emblem { position: absolute; left: 50%; top: 0; width: 86%; height: auto; margin-left: -43%; margin-top: 10.7%; opacity: 0; transform: scale(.82); filter: blur(6px); pointer-events: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms var(--ease-out); z-index: 2; } .mid-hu-copy, .mid-u-line, .mid-u-fill, .mid-hu-art figcaption, .mid-watch, .mid-cue, .mid-scene { transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); } .mid-hero-i.is-emblem .mid-hu-copy { opacity: 0; transform: translateX(-28px); pointer-events: none; } .mid-hero-i.is-emblem .mid-hu-art { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1.3)); z-index: 6; } .mid-hero-i.is-emblem .mid-u-line, .mid-hero-i.is-emblem .mid-u-fill { opacity: 0 !important; } .mid-hero-i.is-emblem .mid-hu-art figcaption, .mid-hero-i.is-emblem .mid-watch, .mid-hero-i.is-emblem .mid-cue { opacity: 0 !important; pointer-events: none; } .mid-hero-i.is-emblem .mid-scene { opacity: .22 !important; } .mid-hero-i.is-emblem .mid-u-emblem { opacity: 1; transform: none; filter: none; transition-delay: 650ms; } .mid-hero-i.is-emblem .mid-u-ring-spin { stroke: rgba(245,158,23,.6); } .mid-emblem-cap { position: absolute; z-index: 7; left: 0; right: 0; bottom: 1.6rem; margin: 0; text-align: center; font: 500 .8rem/1 var(--wp--preset--font-family--heading); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); } .mid-emblem-cap span { color: #F59E17; font-weight: 600; margin-right: .5em; } .mid-hero-i.is-emblem .mid-emblem-cap { opacity: 1; transform: none; transition-delay: 1100ms; } .mid-emblem-close, .mid-story-close { position: absolute; z-index: 12; top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); background: rgba(5,28,60,.5); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 160ms var(--ease-out), background-color 200ms ease, opacity 300ms ease; } .mid-emblem-close { opacity: 0; pointer-events: none; } .mid-hero-i.is-emblem .mid-emblem-close { opacity: 1; pointer-events: auto; transition-delay: 900ms; } .mid-emblem-close:active, .mid-story-close:active { transform: scale(.94); } .mid-hero-i.is-emblem { cursor: zoom-out; } /* Caravan story overlay (inside the hero) */ .mid-story { position: absolute; inset: 0; z-index: 10; overflow: hidden; background: #01050C; clip-path: circle(0px at var(--ox, 30%) var(--oy, 80%)); transition: clip-path 380ms var(--ease-out); } .mid-story.is-open { clip-path: circle(150% at var(--ox, 30%) var(--oy, 80%)); transition: clip-path 900ms var(--ease-in-out); } .mid-story[hidden] { display: none; } .mid-sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 900ms ease, visibility 0s 900ms; } .mid-sc.is-on { opacity: 1; visibility: visible; transition: opacity 900ms ease, visibility 0s; } .mid-sc-art { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.06); transform-origin: 60% 70%; } .mid-sc.is-on .mid-sc-art { animation: mid-kenburns 8s linear forwards; } @keyframes mid-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } } .mid-sc-2 .mid-sc-art { transform-origin: 80% 70%; } .mid-sc-3 .mid-sc-art { transform-origin: 62% 70%; } /* Figures in the story walk; groups drift slowly across */ .mid-sc.is-on .mid-k-b { animation: mid-trudge 9s linear forwards; } .mid-sc.is-on .mid-k-walk { animation: mid-trudge 9s linear forwards; } .mid-sc.is-on .mid-k-c { animation: mid-toward 9s var(--ease-out) forwards; } @keyframes mid-trudge { from { transform: translateX(-30px); } to { transform: translateX(60px); } } @keyframes mid-toward { from { transform: translateX(-60px); } to { transform: translateX(40px); } } .mid-dust ellipse { animation: mid-dust 12s linear infinite; } @keyframes mid-dust { from { transform: translateX(-120px); } to { transform: translateX(160px); } } .mid-pulse-glow { transform-box: fill-box; transform-origin: center; animation: mid-glow 6s ease-in-out infinite alternate; } .mid-gate-arch { transform-box: view-box; transform-origin: 890px 700px; opacity: 0; animation: mid-gate 9s linear infinite; } @keyframes mid-gate { 0% { transform: scale(.15); opacity: 0; } 20% { opacity: .7; } 85% { opacity: .1; } 100% { transform: scale(2.2); opacity: 0; } } .mid-sun4 { transform-box: fill-box; transform-origin: center; animation: mid-glow 8s ease-in-out infinite alternate; } .mid-birds { animation: mid-birds 14s linear infinite; } @keyframes mid-birds { from { transform: translate(-60px, 10px); } to { transform: translate(260px, -30px); } } .mid-flag { transform-box: fill-box; transform-origin: left center; animation: mid-flag 2.4s ease-in-out infinite alternate; } @keyframes mid-flag { from { transform: skewY(-3deg) scaleX(.96); } to { transform: skewY(3deg) scaleX(1); } } .mid-ball { transform-box: fill-box; transform-origin: center bottom; animation: mid-ball .7s ease-in-out infinite alternate; } @keyframes mid-ball { from { transform: translateY(0); } to { transform: translateY(-18px); } } .mid-sc.is-on .mid-run { animation: mid-trudge 9s linear forwards; } .mid-still { animation: none; } .mid-k-d .mid-still { animation: mid-joybob 1.4s ease-in-out infinite alternate; } @keyframes mid-joybob { to { transform: translateY(-2px); } } /* Captions */ .mid-cap { position: absolute; z-index: 3; left: max(clamp(1rem, 4vw, 2rem), calc((100% - 1200px) / 2)); bottom: clamp(1.5rem, 5vw, 3rem); max-width: min(520px, calc(100% - 2rem)); padding: 1.1rem 1.3rem 1.2rem; border-radius: 16px; background: rgba(3,12,28,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; } .mid-cap-light { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.8); color: #051C3C; } .mid-cap-k { margin: 0; font: 600 .7rem/1 var(--wp--preset--font-family--heading); letter-spacing: .18em; text-transform: uppercase; color: #F59E17; } .mid-cap-light .mid-cap-k { color: #B0650A; } .mid-cap-t { margin: .6rem 0 0; font: 600 clamp(1.1rem, 2vw, 1.45rem)/1.3 var(--wp--preset--font-family--heading); letter-spacing: -.01em; } .mid-sc .mid-cap > * { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .mid-sc.is-on .mid-cap > * { opacity: 1; transform: none; } .mid-sc.is-on .mid-cap > :nth-child(1) { transition-delay: 500ms; } .mid-sc.is-on .mid-cap > :nth-child(2) { transition-delay: 600ms; } .mid-sc.is-on .mid-cap > :nth-child(3) { transition-delay: 1400ms; } .mid-cap-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .mid-cap-light .mid-btn-ghost-a { color: #051C3C !important; border-color: rgba(5,28,60,.25); background: rgba(255,255,255,.5); } /* Progress bars + tap zones */ .mid-bars { position: absolute; z-index: 11; top: 1.1rem; left: max(clamp(1rem, 4vw, 2rem), calc((100% - 1200px) / 2)); right: calc(max(clamp(1rem, 4vw, 2rem), calc((100% - 1200px) / 2)) + 56px); display: flex; gap: 6px; } .mid-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; } .mid-bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; } .mid-story-prev, .mid-story-next { position: absolute; z-index: 2; top: 0; bottom: 0; width: 30%; border: 0; background: transparent; cursor: w-resize; padding: 0; } .mid-story-prev { left: 0; } .mid-story-next { right: 0; cursor: e-resize; } .mid-story.is-end .mid-story-next { display: none; } .mid-story-close:focus-visible, .mid-emblem-close:focus-visible { outline: 2px solid #F59E17; outline-offset: 3px; } .is-story .mid-hu-inner, .is-story .mid-watch, .is-story .mid-cue { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .mid-story, .mid-story.is-open { clip-path: none !important; transition: none !important; } .mid-sc.is-on .mid-sc-art, .mid-sc.is-on .mid-k-b, .mid-sc.is-on .mid-k-walk, .mid-sc.is-on .mid-k-c, .mid-sc.is-on .mid-run, .mid-dust ellipse, .mid-gate-arch, .mid-birds, .mid-flag, .mid-ball, .mid-k-d .mid-still, .mid-pulse-glow, .mid-sun4 { animation: none !important; } .mid-sc-art { transform: none; } .mid-gate-arch { opacity: .3; } .mid-hero-i .mid-hu-art, .mid-u-emblem { transition: opacity 400ms ease !important; } .mid-hero-i.is-emblem .mid-hu-art { transform: none; } .mid-hero-i.is-emblem .mid-u-dots { opacity: 0; } } /* story captions sit at the top so the action at the bottom stays visible */ .mid-cap { bottom: auto; top: 2.6rem; } @media (max-width: 600px) { .mid-cap { top: 2.4rem; padding: .9rem 1rem 1rem; } .mid-cap-t { font-size: 1.05rem; } } /* the hero must never scroll internally (focus or arrow keys) */ .mid-hero, .mid-story, .mid-journey, .mid-future { overflow: hidden; overflow: clip; } .mid-hero-i .mid-hit { pointer-events: all; } /* ===== Round 9: story rework ===== */ /* Scenes move forward into the light: the old scene drifts closer as it fades, the new one settles in */ .mid-sc { transform: scale(1.025); transition: opacity 1400ms cubic-bezier(.4,0,.2,1), transform 1600ms cubic-bezier(.4,0,.2,1), visibility 0s 1400ms; } .mid-sc.is-on { transform: none; transition: opacity 1400ms cubic-bezier(.4,0,.2,1), transform 1600ms cubic-bezier(.4,0,.2,1), visibility 0s; } .mid-sc.is-past { transform: scale(1.08); } /* Light bloom: the gateway's light floods the frame, then opens onto tomorrow */ .mid-bloom { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--bx, 62%) var(--by, 62%), #FFFFFF 0, #FFF8E8 16%, rgba(255,228,170,.92) 34%, rgba(255,214,140,.55) 55%, rgba(255,214,140,0) 85%); transform-origin: var(--bx, 62%) var(--by, 62%); } .mid-bloom.is-flash { animation: mid-bloom 1900ms cubic-bezier(.4,0,.2,1) forwards; } .mid-bloom.is-soft { animation: mid-bloom-soft 1500ms ease-in-out forwards; } @keyframes mid-bloom { 0% { opacity: 0; transform: scale(.4); } 32% { opacity: 1; transform: scale(1.4); } 55% { opacity: 1; transform: scale(2); } 100% { opacity: 0; transform: scale(2.4); } } @keyframes mid-bloom-soft { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .45; } 100% { opacity: 0; transform: scale(1.6); } } /* Future scene details */ .mid-rays4 { animation: mid-sway 40s ease-in-out infinite alternate; } .mid-kite { animation: mid-kite 4.5s ease-in-out infinite alternate; } @keyframes mid-kite { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } } .mid-glints rect { animation: mid-glint 3.2s ease-in-out infinite alternate; } .mid-glints rect:nth-child(2) { animation-delay: -1s; } .mid-glints rect:nth-child(3) { animation-delay: -2s; } .mid-glints rect:nth-child(4) { animation-delay: -.5s; } @keyframes mid-glint { from { opacity: .15; } to { opacity: .8; } } .mid-grass path { transform-box: fill-box; transform-origin: bottom center; animation: mid-grass 3.6s ease-in-out infinite alternate; } .mid-grass path:nth-child(3n) { animation-delay: -1.2s; } .mid-grass path:nth-child(3n+1) { animation-delay: -2.4s; } @keyframes mid-grass { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } } .mid-sc.is-on .mid-k-d { animation: none; } .mid-sc-4 .mid-sc-art { transform-origin: 62% 62%; } /* Sound toggle */ .mid-story-sound { position: absolute; z-index: 12; top: 1.1rem; right: calc(1.1rem + 54px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); background: rgba(5,28,60,.5); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 160ms var(--ease-out), background-color 200ms ease; } .mid-story-sound:active { transform: scale(.94); } .mid-story-sound:focus-visible { outline: 2px solid #F59E17; outline-offset: 3px; } .mid-story-sound .off, .mid-story-sound[aria-pressed="false"] .on { display: none; } .mid-story-sound[aria-pressed="false"] .off { display: block; } .mid-bars { right: calc(max(clamp(1rem, 4vw, 2rem), calc((100% - 1200px) / 2)) + 110px); } @media (prefers-reduced-motion: reduce) { .mid-sc, .mid-sc.is-on, .mid-sc.is-past { transform: none !important; } .mid-bloom { display: none; } .mid-rays4, .mid-kite, .mid-glints rect, .mid-grass path { animation: none !important; } } /* ===== Round 10: key words in the captions ===== */ .mid-cap-t { line-height: 1.55; } .mid-cap { padding-bottom: 2.6rem; } .mid-kw { position: relative; display: inline-block; white-space: nowrap; transition: color 300ms var(--ease-out); } .mid-kw-t { position: relative; display: inline-block; } .mid-kw-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .14em; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); } .mid-kw.is-hit { color: #F59E17; } .mid-cap-light .mid-kw.is-hit { color: #B0650A; } .mid-kw.is-hit .mid-kw-t { animation: mid-kwpop 520ms var(--ease-out); } .mid-kw.is-hit .mid-kw-t::after { transform: scaleX(1); } @keyframes mid-kwpop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } } .mid-kw-ic { position: absolute; left: 50%; top: calc(100% + .1em); width: 1.25em; height: 1.25em; margin-left: -.625em; opacity: 0; transform: translateY(-6px) scale(.85); transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out); pointer-events: none; } .mid-kw.is-hit .mid-kw-ic { opacity: 1; transform: none; transition-delay: 300ms; } .mid-kw-gun .mid-kw-ic { width: 1.6em; margin-left: -.8em; } .mid-kw-flash { opacity: 0; } .mid-kw-gun.is-hit .mid-kw-ic { animation: mid-recoil 180ms 900ms 3 ease-out; } .mid-kw-gun.is-hit .mid-kw-flash { animation: mid-flash 180ms 900ms 3; } @keyframes mid-recoil { 0% { transform: translateX(0); } 30% { transform: translateX(-3px); } 100% { transform: translateX(0); } } @keyframes mid-flash { 0%, 100% { opacity: 0; } 20% { opacity: 1; } } .mid-kw-drought.is-hit .mid-kw-ic { animation: mid-heat 1.6s 700ms ease-in-out 2; } @keyframes mid-heat { 50% { transform: translateY(-1px) skewX(4deg); } } .mid-kw-light.is-hit .mid-kw-ic, .mid-kw-star.is-hit .mid-kw-ic { filter: drop-shadow(0 0 6px rgba(245,158,23,.8)); } .mid-kw-dove.is-hit .mid-kw-ic { animation: mid-flutter 900ms 600ms ease-out; } @keyframes mid-flutter { 0% { transform: translateY(0); } 40% { transform: translate(4px, -6px) rotate(-6deg); } 100% { transform: none; } } .mid-kw-grain.is-hit .mid-kw-ic { transform-origin: 50% 100%; animation: mid-grow 900ms 600ms var(--ease-out); } @keyframes mid-grow { from { transform: scaleY(.3); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .mid-kw.is-hit .mid-kw-t, .mid-kw.is-hit .mid-kw-ic { animation: none !important; } } /* give each line room for the icon under its key word */ .mid-cap-t { line-height: 2.3; margin-top: .1rem; } .mid-cap { padding-bottom: 1.4rem; } .mid-kw-ic { top: calc(100% - .28em); width: 1.05em; height: 1.05em; margin-left: -.525em; } .mid-kw-gun .mid-kw-ic { width: 2.1em; height: 1.05em; margin-left: -1.05em; } .mid-cap-actions { margin-top: .4rem; } .mid-kw, .mid-kw-t { line-height: 1.15; vertical-align: baseline; } .mid-kw-t::after { bottom: -.1em; height: .11em; } .mid-kw-ic { top: calc(100% + .22em); } /* ===== Round 11: key words only, no caption card ===== */ .mid-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mid-cap, .mid-cap-light { left: 0; right: 0; top: clamp(4.5rem, 14%, 9rem); bottom: auto; max-width: none; margin: 0 auto; padding: 0 1rem; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: center; pointer-events: none; } .mid-cap .mid-cap-actions { pointer-events: auto; } .mid-kws { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: .4em clamp(1.6rem, 6vw, 5rem); padding-bottom: 1.3em; font: 800 clamp(2.2rem, 6.2vw, 4.8rem)/1.05 var(--wp--preset--font-family--heading); letter-spacing: -.02em; } .mid-sc .mid-cap > .mid-kws { opacity: 1; transform: none; transition: none; } .mid-kws .mid-kw { color: #fff; opacity: 0; transform: translateY(18px) scale(.94); filter: blur(10px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), filter 600ms var(--ease-out), color 500ms ease; text-shadow: 0 6px 40px rgba(0,0,0,.45); } .mid-kws .mid-kw.is-hit { opacity: 1; transform: none; filter: none; color: #F59E17; } .mid-cap-light .mid-kws .mid-kw { color: #13304F; text-shadow: 0 2px 30px rgba(255,255,255,.9); } .mid-cap-light .mid-kws .mid-kw.is-hit { color: #B0650A; } .mid-kws .mid-kw-t::after { height: .05em; bottom: -.06em; } .mid-kws .mid-kw.is-hit .mid-kw-t { animation: mid-kwpop 700ms var(--ease-out); } @keyframes mid-kwpop { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } } .mid-kws .mid-kw-ic { top: calc(100% + .22em); width: .62em; height: .62em; margin-left: -.31em; } .mid-kws .mid-kw-gun .mid-kw-ic { width: 1.24em; height: .62em; margin-left: -.62em; } .mid-kws .mid-kw-ic { filter: drop-shadow(0 4px 16px rgba(0,0,0,.35)); } .mid-cap-light .mid-kws .mid-kw-ic { filter: drop-shadow(0 2px 12px rgba(255,255,255,.8)); } .mid-kws .mid-kw-light.is-hit .mid-kw-ic, .mid-kws .mid-kw-star.is-hit .mid-kw-ic { filter: drop-shadow(0 0 14px rgba(245,158,23,.9)); } .mid-cap .mid-cap-actions { justify-content: center; margin-top: .4rem; opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .mid-sc.is-on .mid-cap .mid-cap-actions { opacity: 1; transform: none; transition-delay: 3200ms; } @media (prefers-reduced-motion: reduce) { .mid-kws .mid-kw { filter: none; transform: none; } } /* ===== Round 12: the Midnimo dove guides the story ===== */ .mid-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .mid-dove { transform-box: view-box; transform-origin: 0 0; opacity: 0; } .mid-dove-glide { animation: mid-glide 2.2s ease-in-out infinite alternate; } @keyframes mid-glide { from { transform: translateY(-4px) rotate(-3deg) scaleY(1); } to { transform: translateY(4px) rotate(2deg) scaleY(.92); } } /* 2: the dove rises out of the dawn light and turns toward the caravan */ .mid-sc-2.is-on .mid-dove-2 { animation: mid-dove2 7.2s var(--ease-out) forwards; } @keyframes mid-dove2 { 0% { transform: translate(890px, 570px) scale(.12); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(720px, 420px) scale(.85); opacity: 1; } } /* 3: it leads the people into the gateway and disappears into the light */ .mid-sc-3.is-on .mid-dove-3 { animation: mid-dove3 7.4s cubic-bezier(.45,0,.2,1) forwards; } @keyframes mid-dove3 { 0% { transform: translate(420px, 420px) scale(1); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(890px, 520px) scale(.18); opacity: 0; } } /* 4: it soars over the green land and settles in the sky */ .mid-sc-4.is-on .mid-dove-4 { animation: mid-dove4 6.5s var(--ease-out) forwards; } @keyframes mid-dove4 { 0% { transform: translate(-90px, 330px) scale(.7) rotate(-6deg); opacity: 0; } 12% { opacity: 1; } 60% { transform: translate(560px, 230px) scale(1.05) rotate(-2deg); } 100% { transform: translate(760px, 300px) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mid-dove-glide { animation: none !important; } .mid-sc-2.is-on .mid-dove-2 { animation: none; opacity: 1; transform: translate(720px, 420px) scale(.85); } .mid-sc-3.is-on .mid-dove-3 { animation: none; opacity: 1; transform: translate(700px, 470px) scale(.6); } .mid-sc-4.is-on .mid-dove-4 { animation: none; opacity: 1; transform: translate(760px, 300px) scale(1); } } /* keep the dove clear of the key words */ @keyframes mid-dove2 { 0% { transform: translate(890px, 580px) scale(.12); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(720px, 500px) scale(.7); opacity: 1; } } @keyframes mid-dove3 { 0% { transform: translate(380px, 500px) scale(.9); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(890px, 560px) scale(.18); opacity: 0; } } @keyframes mid-dove4 { 0% { transform: translate(-90px, 520px) scale(.7) rotate(-6deg); opacity: 0; } 12% { opacity: 1; } 60% { transform: translate(560px, 400px) scale(1) rotate(-2deg); } 100% { transform: translate(850px, 390px) scale(.85); opacity: 1; } } /* ===== Round 13: adaptive header, bento cards, modern news, footer ===== */ /* Header: overlays the first section, adapts tone, compacts, hides on scroll down */ :root { --hdr-h: 74px; } header.wp-block-template-part { position: sticky; top: 0; z-index: 100; transition: transform 450ms var(--ease-out); will-change: transform; } .mid-overlay-header header.wp-block-template-part { margin-bottom: calc(-1 * var(--hdr-h)); } header.wp-block-template-part.is-hidden, .mid-story-open header.wp-block-template-part { transform: translateY(-105%); } .mid-header { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; padding-top: 1.05rem !important; padding-bottom: 1.05rem !important; --hdr-fg: #fff; color: var(--hdr-fg); transition: background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease, padding 350ms var(--ease-out), color 300ms ease; } .mid-header.is-scrolled { padding-top: .6rem !important; padding-bottom: .6rem !important; } .mid-header[data-hdr="dark"].is-scrolled { background: rgba(5,28,60,.6) !important; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom-color: rgba(255,255,255,.08); } .mid-header[data-hdr="light"] { --hdr-fg: #051C3C; } .mid-header[data-hdr="light"].is-scrolled { background: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: rgba(5,28,60,.08); box-shadow: 0 10px 30px -20px rgba(5,28,60,.45); } .mid-header .wp-block-navigation a, .mid-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--hdr-fg) !important; opacity: .86; transition: opacity 200ms ease, color 300ms ease, border-color 200ms ease; } .mid-header .wp-block-navigation a:hover, .mid-header .wp-block-navigation a.is-current { opacity: 1; border-color: var(--wp--preset--color--amber) !important; color: var(--hdr-fg) !important; } .mid-header .wp-block-navigation__responsive-container-open { color: var(--hdr-fg); } .mid-header .wp-block-navigation__responsive-container.is-menu-open { --hdr-fg: #fff; } .mid-logo { position: relative; display: block; } .mid-logo img { transition: opacity 300ms ease, height 350ms var(--ease-out); } .mid-logo .mid-logo-l { position: absolute; left: 0; top: 0; opacity: 0; } .mid-header[data-hdr="light"] .mid-logo-d { opacity: 0; } .mid-header[data-hdr="light"] .mid-logo-l { opacity: 1; } .mid-header.is-scrolled .mid-logo img { height: 38px; } /* the first section of every page leaves room for the overlaid header */ .mid-overlay-header main > .alignfull:first-child, .mid-overlay-header main > .wp-block-group:first-child > .alignfull:first-child { padding-top: calc(var(--hdr-h) + clamp(3rem, 6vw, 5rem)) !important; } .mid-overlay-header .mid-hero-u { padding-top: calc(var(--hdr-h) + clamp(3rem, 7vw, 5.5rem)) !important; } /* Values: bento tiles */ .mid-valsec { padding: clamp(4.5rem, 9vw, 7rem) clamp(1rem, 4vw, 2rem); } .mid-v-inner { max-width: 1200px; margin: 0 auto; } .mid-v-head { max-width: 680px; } .mid-v-head h2 { margin: .8rem 0 0; font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: #051C3C; } .mid-v-lede { margin: .9rem 0 0; color: #5B6B82; font-size: .95rem; } .mid-bento { margin-top: clamp(2.2rem, 4vw, 3.2rem); display: grid; gap: 1.1rem; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; } .mid-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: .7rem; padding: 1.7rem 1.7rem 1.5rem; border-radius: 22px; text-decoration: none !important; color: #1B2B44; background: rgba(255,255,255,.82); border: 1px solid rgba(5,28,60,.08); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 40px -32px rgba(5,28,60,.4); transition: transform 300ms var(--ease-out), box-shadow 300ms ease, border-color 300ms ease; --mx: 50%; --my: 0%; } .mid-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(70,168,252,.16), transparent 60%); } .mid-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(245,158,23,.9), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } @media (hover: hover) and (pointer: fine) { .mid-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(5,28,60,.5); } .mid-tile:hover::before, .mid-tile:hover::after { opacity: 1; } .mid-tile:hover .mid-tile-art { transform: translateY(-4px) scale(1.03); } .mid-tile:hover .mid-tile-more { gap: .7rem; } } .mid-tile:active { transform: scale(.985); } .mid-tile:focus-visible { outline: 2px solid #F59E17; outline-offset: 3px; } .mid-tile-art { width: 92px; height: 92px; flex: none; transition: transform 500ms var(--ease-out); } .mid-tile-k { font: 700 .74rem/1 var(--wp--preset--font-family--heading); letter-spacing: .18em; text-transform: uppercase; color: #B0650A; margin-top: .4rem; } .mid-tile-t { margin: 0; color: #4A5A72; font-size: .98rem; line-height: 1.6; } .mid-tile-more { margin-top: auto; padding-top: .6rem; display: inline-flex; align-items: center; gap: .45rem; font: 600 .86rem/1 var(--wp--preset--font-family--heading); color: #051C3C; transition: gap 250ms var(--ease-out); } .mid-tile-vision { grid-row: span 2; color: #fff; background: radial-gradient(120% 80% at 80% 0%, #123B70 0%, #0A2A55 45%, #051C3C 100%); border-color: rgba(255,255,255,.06); padding: 2.2rem; min-height: 420px; } .mid-tile-vision .mid-tile-art { position: absolute; z-index: -1; width: 380px; height: 380px; right: -90px; top: -70px; opacity: .55; animation: mid-spin 120s linear infinite; } .mid-tile-vision .ring { fill: none; stroke: rgba(255,255,255,.1); } .mid-tile-vision .ring.dash { stroke: rgba(245,158,23,.35); stroke-dasharray: 2 6; } .mid-tile-vision .star { fill: rgba(70,168,252,.08); stroke: rgba(70,168,252,.5); stroke-width: .8; } .mid-tile-vision .pt { fill: #F59E17; filter: drop-shadow(0 0 4px rgba(245,158,23,.9)); } .mid-tile-vision .mid-tile-k { color: #F59E17; margin-top: auto; } .mid-tile-q { margin: 0; font: 600 clamp(1.3rem, 2.2vw, 1.75rem)/1.35 var(--wp--preset--font-family--heading); letter-spacing: -.01em; } .mid-tile-vision .mid-tile-more { color: #fff; } .mid-tile-vision::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(245,158,23,.18), transparent 60%); } .mid-tile-mission { grid-column: span 2; display: grid; grid-template-columns: 110px 1fr; column-gap: 1.4rem; align-content: start; } .mid-tile-mission .mid-tile-art { grid-row: span 3; width: 110px; height: 110px; } .mid-tile-mission .mid-tile-more { grid-column: 2; } .mid-tile-mission .halo { fill: #EEF6FF; } .mid-tile-mission .halo2 { fill: #DCEEFF; } .mid-tile-doc .sheet { fill: #fff; stroke: #C9D8EC; stroke-width: 1.5; } .mid-tile-doc .sheet.back { fill: #EEF6FF; } .mid-tile-doc .lines, .mid-tile-archive .lines { stroke: #9FB3CC; stroke-width: 3; stroke-linecap: round; } .mid-tile-doc .seal { fill: #F59E17; } .mid-tile-doc .sealstar { fill: #fff; } .mid-tile-archive .box { fill: #EEF6FF; stroke: #C9D8EC; stroke-width: 1.5; } .mid-tile-archive .b2 { fill: #DCEEFF; } .mid-tile-archive .b3 { fill: #FFF4E3; stroke: #F5C27A; } @media (max-width: 960px) { .mid-bento { grid-template-columns: 1fr 1fr; } .mid-tile-vision { grid-row: auto; grid-column: span 2; min-height: 340px; } .mid-tile-mission { grid-column: span 2; } } @media (max-width: 620px) { .mid-bento { grid-template-columns: 1fr; } .mid-tile-vision, .mid-tile-mission { grid-column: auto; } .mid-tile-mission { grid-template-columns: 1fr; } .mid-tile-mission .mid-tile-art { grid-row: auto; } .mid-tile-mission .mid-tile-more { grid-column: auto; } } /* News: featured story + compact list */ .mid-sec-news { padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem) !important; } .mid-news-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; max-width: 1200px; margin: 0 auto; } .mid-news-head h2 { margin: .7rem 0 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: #051C3C; } .mid-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .mid-chips a { padding: .5rem .9rem; border-radius: 999px; border: 1px solid #DDE6F1; background: #fff; color: #1B2B44; font: 600 .8rem/1 var(--wp--preset--font-family--heading); text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mid-chips a:hover { border-color: #F59E17; color: #B0650A; background: #FFF8EC; } } .mid-chips a:active { transform: scale(.97); } .mid-news-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: clamp(1.8rem, 3vw, 2.6rem) !important; max-width: 1200px; } .mid-news-grid > * { margin: 0 !important; } .mid-meta { gap: .6rem !important; align-items: center; } .mid-meta .wp-block-post-terms { display: flex; gap: .35rem; font-size: .68rem; } .mid-meta .wp-block-post-terms__separator { display: none; } .mid-meta .wp-block-post-terms a { padding: .28rem .55rem; border-radius: 999px; background: #FFF4E3; color: #B0650A !important; text-decoration: none; letter-spacing: .08em; } .mid-meta .wp-block-post-terms a[href*="/uncategorized/"] { display: none; } .mid-meta .wp-block-post-date { font-size: .7rem; letter-spacing: .1em; color: #5B6B82; } .mid-news-feature .wp-block-post { position: relative; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(5,28,60,.08); box-shadow: 0 30px 60px -40px rgba(5,28,60,.5); } .mid-news-feature .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/9; overflow: hidden; background: #EEF6FF url('assets/emblem.png') center/90px no-repeat; } .mid-news-feature .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mid-news-feature .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); } } .mid-nf-body { padding: 1.4rem 1.6rem 1.6rem; } .mid-news-feature .wp-block-post-title { margin: .8rem 0 0; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; } .mid-news-feature .wp-block-post-title a { color: #051C3C; text-decoration: none; } .mid-news-feature .wp-block-post-excerpt { margin-top: .7rem; color: #4A5A72; font-size: .95rem; } .mid-news-feature .wp-block-post-excerpt__excerpt { margin: 0; } .mid-news-feature .wp-block-read-more { display: inline-block; margin-top: .9rem; font: 600 .86rem/1 var(--wp--preset--font-family--heading); color: #B0650A; text-decoration: none; } .mid-news-list .wp-block-post-template { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .mid-news-list .wp-block-post { border-bottom: 1px solid #E3EAF3; } .mid-news-list .wp-block-post:first-child { border-top: 1px solid #E3EAF3; } .mid-li { gap: 1rem !important; padding: .95rem .4rem; border-radius: 14px; transition: background-color 250ms ease; } @media (hover: hover) and (pointer: fine) { .mid-news-list .wp-block-post:hover .mid-li { background: #fff; } .mid-news-list .wp-block-post:hover .wp-block-post-title a { color: #B0650A; } } .mid-li-thumb { margin: 0; flex: none; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: #EEF6FF url('assets/emblem.png') center/38px no-repeat; } .mid-li-thumb img { width: 100%; height: 100%; object-fit: cover; } .mid-news-list .wp-block-post:not(:has(.wp-block-post-featured-image)) .mid-li::before { content: ""; flex: none; width: 84px; height: 84px; border-radius: 14px; background: #EEF6FF url('assets/emblem.png') center/38px no-repeat; } .mid-li-body { min-width: 0; } .mid-news-list .wp-block-post-title { margin: .45rem 0 0; font-size: 1rem; line-height: 1.38; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mid-news-list .wp-block-post-title a { color: #051C3C; text-decoration: none; transition: color 200ms ease; } .mid-news-list .wp-block-query-pagination { margin-top: 1.1rem; font: 600 .82rem/1 var(--wp--preset--font-family--heading); } .mid-news-list .wp-block-query-pagination a { color: #051C3C; padding: .55rem .9rem; border: 1px solid #DDE6F1; border-radius: 999px; background: #fff; } @media (max-width: 900px) { .mid-news-grid { grid-template-columns: 1fr; } } /* Footer */ .mid-foot { position: relative; overflow: hidden; color: #C9D8EC; background: radial-gradient(90% 120% at 100% 0%, #0E3A75 0%, #0A2A55 35%, #051C3C 75%) !important; padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem) 1.6rem; } .mid-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #F59E17, transparent); opacity: .7; } .mid-foot-mark { position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; opacity: .05; pointer-events: none; } .mid-foot-inner { position: relative; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; } .mid-foot-logo img { width: 170px; height: auto; display: block; } .mid-foot-name { margin: 1.2rem 0 0; color: #fff; font: 600 1rem/1.4 var(--wp--preset--font-family--heading); } .mid-foot-name span { color: #8FA6C4; font-weight: 500; font-size: .85rem; } .mid-foot-vision { margin: .9rem 0 1.4rem; max-width: 40ch; font-size: .92rem; line-height: 1.65; color: #9FB3CC; } .mid-foot-col { display: flex; flex-direction: column; gap: .7rem; } .mid-foot-h { margin: 0 0 .4rem; font: 600 .72rem/1 var(--wp--preset--font-family--heading); letter-spacing: .18em; text-transform: uppercase; color: #F59E17; } .mid-foot-col a { color: #C9D8EC; text-decoration: none; font-size: .94rem; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 200ms ease, background-size 300ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mid-foot-col a:hover { color: #fff; background-size: 100% 1px; } } .mid-foot-doc { display: flex !important; gap: .75rem; align-items: flex-start; padding: .9rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04) !important; line-height: 1.45; } .mid-foot-pdf { flex: none; padding: .35rem .45rem; border-radius: 6px; background: #F59E17; color: #051C3C; font: 700 .62rem/1 var(--wp--preset--font-family--heading); letter-spacing: .08em; } .mid-foot-bar { position: relative; max-width: 1200px; margin: clamp(3rem, 6vw, 4rem) auto 0; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.09); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .82rem; color: #8FA6C4; } .mid-foot-bar p { margin: 0; } .mid-totop { color: #C9D8EC; text-decoration: none; font-weight: 600; } .mid-totop:hover { color: #F59E17; } @media (max-width: 900px) { .mid-foot-inner { grid-template-columns: 1fr 1fr; } .mid-foot-brand { grid-column: span 2; } } @media (max-width: 560px) { .mid-foot-inner { grid-template-columns: 1fr; } .mid-foot-brand { grid-column: auto; } } footer.wp-block-template-part { margin-top: 0 !important; } /* Footer social links */ .mid-social { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; gap: .6rem; } .mid-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #C9D8EC; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04) !important; transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mid-social a:hover { color: #051C3C; background: #F59E17 !important; border-color: #F59E17; } } .mid-social a:active { transform: scale(.94); } .mid-social a:focus-visible { outline: 2px solid #F59E17; outline-offset: 3px; } /* ===== Round 15: mobile menu + overflow fixes ===== */ html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } img, svg, video, iframe { max-width: 100%; } .mid-logo { flex: none; } .mid-logo img { min-width: 96px; } /* Burger shows up to 960px; the inline links show above that */ .mid-burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; color: var(--hdr-fg, #fff); cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out); } .mid-burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; } .mid-burger span:first-child { top: 17px; } .mid-burger span:last-child { top: 25px; right: 17px; } .mid-burger:active { transform: scale(.94); } .mid-burger:focus-visible { outline: 2px solid #F59E17; outline-offset: 2px; } @media (max-width: 960px) { .mid-header .wp-block-navigation { display: none !important; } .mid-burger { display: block; } } /* Full-screen menu panel */ .mid-mnav { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; padding: 1rem clamp(1rem, 5vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom)); color: #fff; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(120% 70% at 100% 0%, #0E3A75 0%, #0A2A55 40%, #051C3C 80%); clip-path: circle(0px at var(--bx, 90%) var(--by, 40px)); transition: clip-path 420ms var(--ease-in-out); } .mid-mnav.is-open { clip-path: circle(150% at var(--bx, 90%) var(--by, 40px)); transition: clip-path 650ms var(--ease-in-out); } .mid-mnav[hidden] { display: none; } .admin-bar .mid-mnav { top: 46px; } .mid-mnav::after { content: ""; position: absolute; right: -140px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 1px dashed rgba(245,158,23,.18); pointer-events: none; } .mid-mnav-top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; } .mid-mnav-top .mid-logo img { height: 40px; width: auto; } .mid-mnav-close { width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 160ms var(--ease-out); } .mid-mnav-close:active { transform: scale(.94); } .mid-mnav-close:focus-visible, .mid-mnav a:focus-visible { outline: 2px solid #F59E17; outline-offset: 3px; } .mid-mnav-links { display: flex; flex-direction: column; margin: clamp(1.5rem, 6vh, 3rem) 0 auto; } .mid-mnav-links a { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff !important; text-decoration: none; font: 700 clamp(1.6rem, 7vw, 2.2rem)/1.15 var(--wp--preset--font-family--heading); letter-spacing: -.02em; opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), color 200ms ease; } .mid-mnav-links a span { font: 600 .72rem/1 var(--wp--preset--font-family--heading); letter-spacing: .14em; color: #F59E17; min-width: 1.6rem; } .mid-mnav-links a[aria-current="page"], .mid-mnav-links a:active { color: #F59E17 !important; } .mid-mnav.is-open .mid-mnav-links a { opacity: 1; transform: none; } .mid-mnav.is-open .mid-mnav-links a:nth-child(1) { transition-delay: 120ms; } .mid-mnav.is-open .mid-mnav-links a:nth-child(2) { transition-delay: 160ms; } .mid-mnav.is-open .mid-mnav-links a:nth-child(3) { transition-delay: 200ms; } .mid-mnav.is-open .mid-mnav-links a:nth-child(4) { transition-delay: 240ms; } .mid-mnav.is-open .mid-mnav-links a:nth-child(5) { transition-delay: 280ms; } .mid-mnav.is-open .mid-mnav-links a:nth-child(6) { transition-delay: 320ms; } .mid-mnav-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-top: 2rem; opacity: 0; transition: opacity 500ms 380ms ease; } .mid-mnav.is-open .mid-mnav-foot { opacity: 1; } .mid-mnav-social { display: flex; gap: .55rem; } .mid-mnav-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #C9D8EC; border: 1px solid rgba(255,255,255,.16); } .mid-mnav-tag { flex-basis: 100%; margin: .4rem 0 0; font: 500 .72rem/1 var(--wp--preset--font-family--heading); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); } html.mid-menu-open, html.mid-menu-open body { overflow: hidden; } html.mid-menu-open header.wp-block-template-part { transform: none !important; } @media (prefers-reduced-motion: reduce) { .mid-mnav, .mid-mnav.is-open { clip-path: none; transition: none; } .mid-mnav-links a, .mid-mnav-foot { transition: none; } } /* Overflow fixes on small screens */ .mid-news-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .mid-news-grid > *, .mid-li-body, .mid-nf-body, .mid-tile, .mid-step, .mid-hu-copy { min-width: 0; } @media (max-width: 900px) { .mid-news-grid { grid-template-columns: minmax(0, 1fr); } } .wp-block-post-title, .mid-tile-q, .mid-tile-t, h1, h2 { overflow-wrap: break-word; } .mid-chips { max-width: 100%; } @media (max-width: 600px) { .mid-news-head { align-items: flex-start; } .mid-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; } .mid-chips::-webkit-scrollbar { display: none; } .mid-chips a { flex: none; } .mid-tile-vision .mid-tile-art { width: 280px; height: 280px; right: -110px; top: -60px; } .mid-li-thumb, .mid-news-list .wp-block-post:not(:has(.wp-block-post-featured-image)) .mid-li::before { width: 68px; height: 68px; } .mid-foot-bar { flex-direction: column; } } .mid-meta, .mid-meta .wp-block-post-terms { flex-wrap: wrap; min-width: 0; max-width: 100%; } .mid-meta .wp-block-post-terms a:nth-of-type(n+3) { display: none; } /* ===== Round 16: single posts and pages ===== */ /* Post hero: the photo blurred into an atmosphere, the title over it */ .mid-post-hero { padding: calc(var(--hdr-h) + 3rem) clamp(1rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5.5rem) !important; overflow: hidden; background: #051C3C; } .mid-post-hero .wp-block-cover__image-background { filter: blur(22px) saturate(1.1); transform: scale(1.15); opacity: .55; } .mid-post-hero .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(180deg, rgba(3,15,34,.55) 0%, rgba(5,28,60,.72) 55%, #051C3C 100%) !important; } .mid-post-hero .wp-block-cover__inner-container { width: 100%; } .mid-back { display: inline-flex; gap: .5rem; align-items: center; color: rgba(255,255,255,.75) !important; text-decoration: none; font: 600 .8rem/1 var(--wp--preset--font-family--heading); letter-spacing: .06em; padding: .55rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); transition: background-color 200ms ease, color 200ms ease; } .mid-back:hover { color: #fff !important; background: rgba(255,255,255,.12); } .mid-post-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.6rem 0 0 !important; font-size: .7rem; } .mid-post-cats .wp-block-post-terms__separator { display: none; } .mid-post-cats a { padding: .32rem .65rem; border-radius: 999px; background: #F59E17; color: #051C3C !important; font: 700 .68rem/1 var(--wp--preset--font-family--heading); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .mid-post-cats a[href*="/uncategorized/"] { display: none; } .mid-post-title { margin: 1rem 0 0 !important; color: #fff !important; font-size: clamp(1.9rem, 4.6vw, 3.4rem) !important; line-height: 1.08 !important; letter-spacing: -.025em; text-wrap: balance; } .mid-post-meta { gap: .4rem 1.2rem !important; margin-top: 1.2rem !important; color: rgba(255,255,255,.7); font-size: .82rem; letter-spacing: .04em; } .mid-post-meta .wp-block-post-date, .mid-post-meta .wp-block-post-time-to-read { color: rgba(255,255,255,.72); } .mid-post-meta .wp-block-post-time-to-read::before { content: "\00b7"; margin-right: 1.2rem; color: #F59E17; } /* Article body */ .mid-post-body { padding: 0 clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem); background: #fff; } .mid-post-figure { position: relative; z-index: 2; margin-top: clamp(-4rem, -6vw, -2.5rem) !important; margin-bottom: clamp(2rem, 4vw, 3rem) !important; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(5,28,60,.6); background: #EEF6FF; } .mid-post-figure img { width: 100%; max-height: 70vh; object-fit: contain; display: block; background: #0A2A55; } .mid-prose { font-size: 1.08rem; line-height: 1.8; color: #24324A; } .mid-prose > p:first-child { font-size: 1.22rem; line-height: 1.7; color: #051C3C; } .mid-prose h2, .mid-prose h3 { margin-top: 2.2em; color: #051C3C; } .mid-prose a { color: #B0650A; text-decoration-thickness: 1px; text-underline-offset: .2em; } .mid-prose img, .mid-prose .wp-block-image img { border-radius: 14px; } .mid-prose .wp-block-image figcaption { text-align: center; } .mid-prose blockquote { margin: 2em 0; padding: .4em 0 .4em 1.4em; border-left: 3px solid #F59E17; font-size: 1.15rem; color: #051C3C; } .mid-prose .wp-block-file { margin: 1.2rem 0; } .mid-prose video, .mid-prose .wp-block-video video { border-radius: 14px; width: 100%; background: #051C3C; } .mid-prose ul li::marker, .mid-prose ol li::marker { color: #F59E17; } .mid-share { display: flex; align-items: center; gap: .55rem; max-width: 740px; margin: 3rem auto 0 !important; padding-top: 1.6rem; border-top: 1px solid #E3EAF3; } .mid-share-k { margin-right: .4rem; font: 600 .72rem/1 var(--wp--preset--font-family--heading); letter-spacing: .16em; text-transform: uppercase; color: #5B6B82; } .mid-share a, .mid-share button { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #051C3C; border: 1px solid #DDE6F1; background: #fff; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .mid-share a:hover, .mid-share button:hover { background: #F59E17; border-color: #F59E17; } } .mid-share a:active, .mid-share button:active { transform: scale(.94); } .mid-share-ok { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .35rem .6rem; border-radius: 8px; background: #051C3C; color: #fff; font: 600 .7rem/1 var(--wp--preset--font-family--heading); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .mid-share button.is-copied .mid-share-ok { opacity: 1; } .mid-more { padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem); background: linear-gradient(180deg, #F7F9FC, #EEF4FB); } .mid-more-head { margin-bottom: 1.8rem; } .mid-more-head h2 { margin: .6rem 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #051C3C; } .mid-more-grid .wp-block-post-template { gap: 1.2rem !important; } .mid-more-grid .wp-block-post-title { font-size: 1.02rem !important; line-height: 1.35; margin-top: .4rem !important; } .mid-more-grid .wp-block-post-title a { color: #051C3C; text-decoration: none; } .mid-post-body-card { padding: 1rem 1.2rem 1.3rem; } .mid-more-grid .wp-block-post.is-current { display: none; } .mid-more-grid .wp-block-post:nth-child(n+4):not(.is-shown) { display: none; } /* Statement pages (Himilo, Hadafka): no plain title, the statement itself is the hero */ .mid-pg-hero { position: relative; overflow: hidden; min-height: 78vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: calc(var(--hdr-h) + 4rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 8vw, 6rem) !important; background: radial-gradient(70% 70% at 50% 40%, #0E3A75 0%, #0A2A55 40%, #051C3C 100%) !important; color: #fff; } .mid-pg-star { position: absolute; left: 50%; top: 50%; width: min(760px, 130vw); transform: translate(-50%, -50%); opacity: .5; pointer-events: none; animation: mid-spin 160s linear infinite; } .mid-pg-star .ring { fill: none; stroke: rgba(255,255,255,.08); } .mid-pg-star .ring.dash { stroke: rgba(245,158,23,.3); stroke-dasharray: 2 6; } .mid-pg-star .star { fill: rgba(70,168,252,.05); stroke: rgba(70,168,252,.35); stroke-width: .6; } .mid-pg-star .pt { fill: #F59E17; } .mid-pg-hero > * { position: relative; } .mid-pg-hero .mid-eyebrow { justify-content: center; display: inline-flex; gap: .7rem; align-items: center; } .mid-statement { max-width: 980px; margin: 1.4rem auto 0; } .mid-statement p { margin: 0; font: 700 clamp(1.7rem, 4.4vw, 3.3rem)/1.18 var(--wp--preset--font-family--heading); letter-spacing: -.02em; color: #fff; text-wrap: balance; } .mid-statement p:empty { display: none; } .mid-pg-kicker { margin: 2rem 0 0; font: 500 .74rem/1 var(--wp--preset--font-family--heading); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); } .mid-pg-pillars { padding: clamp(4rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem); background: linear-gradient(180deg, #EAF5FF, #fff) !important; } .mid-pg-in { max-width: 1200px; margin: 0 auto; } .mid-pillars { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } .mid-pillar { padding: 1.6rem; border-radius: 20px; background: #fff; border: 1px solid rgba(5,28,60,.08); box-shadow: 0 20px 40px -32px rgba(5,28,60,.4); } .mid-pillar-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #FFF4E3; color: #B0650A; } .mid-pillar-ic svg { width: 26px; height: 26px; } .mid-pillar h3 { margin: 1.1rem 0 .4rem; font-size: 1.2rem; color: #051C3C; } .mid-pillar p { margin: 0; color: #4A5A72; font-size: .95rem; line-height: 1.6; } @media (max-width: 900px) { .mid-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .mid-pillars { grid-template-columns: minmax(0, 1fr); } .mid-pg-hero { min-height: 70vh; } } .mid-pg-cta h2 { max-width: 20ch; margin-left: auto; margin-right: auto; } /* Generic pages: a dark band for the header, then full-width content */ .mid-pg-band { min-height: calc(var(--hdr-h) + 1.5rem); padding: 0 !important; background: #051C3C !important; } .mid-pg-content { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem); } .mid-single .mid-post-cats a { color: #051C3C !important; } .mid-post-hero .wp-block-cover__inner-container { max-width: 1200px; margin: 0 auto; } .mid-post-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: auto !important; max-width: 900px; } .mid-pg-hero > svg.mid-pg-star { position: absolute; } /* ===== Round 17: document library (Barnaamijka) and gallery ===== */ .mid-pg-hero-sm { min-height: 0 !important; padding-top: calc(var(--hdr-h) + clamp(4rem, 9vw, 7rem)) !important; padding-bottom: clamp(3.5rem, 7vw, 5.5rem) !important; } .mid-pg-hero-sm .mid-pg-star { width: min(560px, 110vw); } .mid-pg-h1 { margin: 1rem auto .9rem; font: 800 clamp(2.4rem, 6vw, 4.2rem)/1.04 var(--wp--preset--font-family--heading); letter-spacing: -.025em; color: #fff; } .mid-pg-lede { max-width: 46ch; margin: 0 auto; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; color: rgba(255,255,255,.72); } .mid-lib { padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem); background: linear-gradient(180deg, #EAF5FF, #fff 55%) !important; } .mid-lib-head h2 { margin: .5rem 0 2.2rem; font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1.1 var(--wp--preset--font-family--heading); color: #051C3C; letter-spacing: -.02em; } .mid-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); } .mid-doc { display: flex; flex-direction: column; background: #fff; border: 1px solid #DDE6F1; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(5,28,60,.04), 0 12px 32px -18px rgba(5,28,60,.25); transition: transform 240ms var(--ease-out, ease), box-shadow 240ms ease, border-color 240ms ease; } .mid-doc:hover { transform: translateY(-4px); border-color: rgba(245,158,23,.55); box-shadow: 0 2px 4px rgba(5,28,60,.05), 0 24px 48px -22px rgba(5,28,60,.35); } .mid-doc-cover { display: block; padding: 1.4rem 1.4rem 0; background: radial-gradient(90% 80% at 50% 0%, #0E3A75, #051C3C); aspect-ratio: 4 / 3.3; overflow: hidden; } .mid-doc-cover img { display: block; width: 100%; height: auto; border-radius: 6px 6px 0 0; box-shadow: 0 -2px 30px rgba(0,0,0,.35); transition: transform 400ms var(--ease-out, ease); } .mid-doc:hover .mid-doc-cover img { transform: translateY(-6px); } .mid-doc-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem 1.3rem; flex: 1; } .mid-doc-kind { margin: 0; font: 700 .68rem/1 var(--wp--preset--font-family--heading); letter-spacing: .2em; text-transform: uppercase; color: #B0650A; } .mid-doc h3 { margin: .2rem 0 0; font: 700 1.05rem/1.3 var(--wp--preset--font-family--heading); color: #051C3C; } .mid-doc-meta { margin: 0; font-size: .82rem; color: #5B6B82; } .mid-doc-acts { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .mid-doc-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem 1rem; border-radius: 999px; background: #F59E17; color: #051C3C !important; font: 700 .82rem/1 var(--wp--preset--font-family--heading); text-decoration: none !important; transition: background 200ms ease, transform 160ms ease; } .mid-doc-btn:hover { background: #ffb43d; } .mid-doc-btn:active { transform: scale(.97); } .mid-doc-btn svg { width: 15px; height: 15px; } .mid-doc-orig { font-size: .8rem; color: #0A2A55 !important; text-decoration: underline; text-decoration-color: rgba(10,42,85,.25); text-underline-offset: 3px; } .mid-vid { padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem); background: radial-gradient(60% 80% at 80% 20%, #0E3A75, #051C3C 70%) !important; color: #fff; } .mid-vid-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .mid-vid h2 { margin: .6rem 0 1.4rem; font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--wp--preset--font-family--heading); color: #fff; letter-spacing: -.02em; } .mid-vparts { display: flex; flex-wrap: wrap; gap: .5rem; } .mid-vpart { padding: .55rem .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.8); font: 600 .8rem/1 var(--wp--preset--font-family--heading); cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .mid-vpart:hover { border-color: rgba(245,158,23,.7); color: #fff; } .mid-vpart.is-on { background: #F59E17; border-color: #F59E17; color: #051C3C; } .mid-vid-frame { border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.1); } .mid-vid-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #03132a; } @media (max-width: 820px) { .mid-vid-in { grid-template-columns: minmax(0, 1fr); } } .mid-gal { padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem); background: linear-gradient(180deg, #EAF5FF, #fff 50%) !important; } .mid-gal-grid { columns: 3 280px; column-gap: clamp(.8rem, 2vw, 1.3rem); } .mid-gal-it { margin: 0 0 clamp(.8rem, 2vw, 1.3rem); break-inside: avoid; border-radius: 16px; overflow: hidden; background: #DDE6F1; box-shadow: 0 14px 30px -20px rgba(5,28,60,.4); } .mid-gal-it a { display: block; cursor: zoom-in; } .mid-gal-it img { display: block; width: 100%; height: auto; transition: transform 500ms var(--ease-out, ease); } .mid-gal-it:hover img { transform: scale(1.035); } .mid-lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(3,19,42,.92); backdrop-filter: blur(6px); } .mid-lb.is-open { display: flex; animation: mid-lb-in 220ms ease-out; } .mid-lb img { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .mid-lb button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(5,28,60,.6); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; } .mid-lb .x { top: 18px; right: 18px; } .mid-lb .pv { left: 18px; top: 50%; margin-top: -23px; } .mid-lb .nx { right: 18px; top: 50%; margin-top: -23px; } .mid-lb button:hover { border-color: #F59E17; } @keyframes mid-lb-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mid-doc, .mid-doc-cover img, .mid-gal-it img { transition: none; } .mid-lb.is-open { animation: none; } } .mid-doc-cover { display: flex; justify-content: center; align-items: flex-end; aspect-ratio: 4 / 4; padding: 1.3rem 1.3rem 0; } .mid-doc-cover img { width: auto; height: 100%; max-width: 100%; object-fit: cover; object-position: top; } .mid-foot-doc + .mid-foot-doc { margin-top: .6rem; } /* ===== Round 18: brand texture, hero separation, one spacing scale ===== */ :root { --sec-y: clamp(4.5rem, 8vw, 6.5rem); /* every section, top and bottom */ --sec-x: clamp(1rem, 4vw, 2rem); /* side gutter */ --head-gap: clamp(2.25rem, 4vw, 3rem); /* section heading block to its content */ --tex-night: url("assets/tex-night.png"); --tex-day: url("assets/tex-day.png"); --nebula: radial-gradient(55% 45% at 78% 22%, rgba(70,168,252,.13), transparent 70%), radial-gradient(45% 40% at 12% 78%, rgba(118,92,196,.10), transparent 70%), radial-gradient(35% 30% at 50% 100%, rgba(245,158,23,.07), transparent 70%); } /* Night texture: star field + soft nebula on every dark surface */ .mid-hero.mid-hero-u { background: var(--tex-night) 0 0 / 640px repeat, var(--nebula), linear-gradient(180deg, #030F22 0%, #051C3C 72%, #061E44 100%) !important; } .mid-pg-hero { background: var(--tex-night) 0 0 / 640px repeat, var(--nebula), radial-gradient(70% 70% at 50% 40%, #0E3A75 0%, #0A2A55 40%, #051C3C 100%) !important; } .mid-vid { background: var(--tex-night) 120px 80px / 640px repeat, var(--nebula), radial-gradient(60% 80% at 80% 20%, #0E3A75, #051C3C 70%) !important; } .mid-foot { background: var(--tex-night) 300px 0 / 640px repeat, radial-gradient(90% 120% at 100% 0%, #0E3A75 0%, #0A2A55 35%, #051C3C 75%) !important; } .mid-pg-band { background: var(--tex-night) 0 0 / 640px repeat, #051C3C !important; } .mid-mnav { background: var(--tex-night) 0 0 / 640px repeat, var(--nebula), radial-gradient(120% 70% at 100% 0%, #0E3A75 0%, #0A2A55 40%, #051C3C 80%) !important; } .mid-doc-cover { background: var(--tex-night) 0 0 / 420px repeat, radial-gradient(90% 80% at 50% 0%, #0E3A75, #051C3C); } .mid-post-hero.wp-block-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--tex-night) 0 0 / 640px repeat; opacity: .55; } .mid-post-hero .wp-block-cover__inner-container { z-index: 2; } /* Day texture: faint speckle on light surfaces */ .mid-sec-values { background: var(--tex-day) 0 0 / 640px repeat, linear-gradient(180deg, #EAF5FF 0%, #F6FAFF 55%, #FFFFFF 100%) !important; } .mid-sec-news { background: var(--tex-day) 200px 100px / 640px repeat, linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%) !important; } .mid-future { background: var(--tex-day) 0 0 / 640px repeat, linear-gradient(180deg, #F7F9FC 0%, #FFF6E6 45%, #FFE6BA 100%) !important; } .mid-more { background: var(--tex-day) 0 0 / 640px repeat, linear-gradient(180deg, #F7F9FC, #EEF4FB) !important; } .mid-pg-pillars, .mid-lib, .mid-gal { background: var(--tex-day) 0 0 / 640px repeat, linear-gradient(180deg, #EAF5FF, #fff 55%) !important; } /* Hero and "Safarkeenna" are now two distinct sections: a dawn horizon line marks the edge, the hero ends in night and the journey starts a step brighter. */ .mid-hero-fade { display: none !important; } .mid-hero-u { padding-bottom: clamp(5rem, 9vw, 6.5rem) !important; } .mid-journey { background: linear-gradient(180deg, #0F3A70 0%, #164A88 26%, #1F5C9E 52%, #5FA6E6 78%, #CFE7FC 92%, #EAF5FF 100%) !important; } .mid-journey::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(245,158,23,.15) 15%, rgba(255,196,110,.9) 50%, rgba(245,158,23,.15) 85%, transparent 100%); box-shadow: 0 0 18px 2px rgba(245,158,23,.35); } /* One spacing scale */ .mid-journey, .mid-valsec, .mid-sec-news, .mid-future, .mid-more, .mid-pg-pillars, .mid-lib, .mid-vid, .mid-gal, .mid-pg-content { padding: var(--sec-y) var(--sec-x) !important; } .mid-foot { padding-top: var(--sec-y) !important; padding-left: var(--sec-x) !important; padding-right: var(--sec-x) !important; } .mid-pg-hero-sm { padding-top: calc(var(--hdr-h) + var(--sec-y)) !important; padding-bottom: var(--sec-y) !important; } .mid-pg-hero:not(.mid-pg-hero-sm) { padding-top: calc(var(--hdr-h) + var(--sec-y)) !important; padding-bottom: var(--sec-y) !important; min-height: 70vh; } /* heading blocks: eyebrow → title → lede → content */ .mid-journey h2, .mid-valsec h2, .mid-future h2, .mid-sec-news h2, .mid-lib-head h2, .mid-vid h2, .mid-more h2 { margin-top: .9rem !important; } .mid-j-lede, .mid-v-lede, .mid-f-lede { margin-top: 1rem !important; } .mid-steps, .mid-bento, .mid-news-grid, .mid-docs, .mid-gal-grid, .mid-more-grid, .mid-pillars { margin-top: var(--head-gap) !important; } .mid-news-head, .mid-lib-head h2 { margin-bottom: 0 !important; } .mid-hb-actions.center { margin-top: 2rem !important; } .mid-post-hero { padding-top: calc(var(--hdr-h) + var(--sec-y)) !important; padding-bottom: var(--sec-y) !important; } /* ===== Round 19: steady header, one hero button, video modal, scroll cue ===== */ /* Header is fixed (out of the page flow), so compacting it on scroll can no longer push the page up and down. */ header.wp-block-template-part { position: fixed !important; left: 0; right: 0; top: 0; } .admin-bar header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } } @media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } } .mid-overlay-header header.wp-block-template-part { margin-bottom: 0 !important; } body:not(.mid-overlay-header) .wp-site-blocks > main, body:not(.mid-overlay-header) .wp-site-blocks > .wp-block-group:first-of-type { padding-top: var(--hdr-h); } .mid-header { transition: background-color 300ms ease, border-color 300ms ease, padding 300ms var(--ease-out), box-shadow 300ms ease; } /* One hero button */ .mid-hb-actions { margin-top: 2.2rem; } .mid-btn-play { display: inline-flex; align-items: center; gap: .7rem; padding: .85rem 1.5rem .85rem .85rem !important; cursor: pointer; border: 0; font: 700 .95rem/1 var(--wp--preset--font-family--heading); } .mid-play-i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #051C3C; flex: none; } .mid-play-i::after { content: ""; position: absolute; left: 13px; top: 10.5px; border-left: 11px solid #F59E17; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; } .mid-play-i::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(5,28,60,.35); animation: mid-ping 2.4s 3s ease-out infinite; } @keyframes mid-ping { 0% { transform: scale(.85); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } } /* Scroll cue: mouse with a moving wheel, and chevrons cascading down */ .mid-cue { width: auto !important; height: auto !important; margin-left: 0 !important; border: 0 !important; border-radius: 0 !important; transform: translateX(-50%); bottom: 1.4rem !important; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; } .mid-cue-m { position: relative; display: block; width: 24px; height: 38px; border-radius: 13px; border: 1.5px solid rgba(255,255,255,.5); } .mid-cue .mid-cue-m span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #F59E17; animation: mid-wheel 1.6s 3s cubic-bezier(.4,0,.2,1) infinite; } @keyframes mid-wheel { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { transform: translateY(13px); opacity: 0; } } .mid-cue-c { display: flex; flex-direction: column; align-items: center; } .mid-cue-c i { display: block; width: 9px; height: 9px; margin-top: -3px; border-right: 1.5px solid rgba(255,255,255,.75); border-bottom: 1.5px solid rgba(255,255,255,.75); transform: rotate(45deg); opacity: 0; animation: mid-chev 1.6s 3s ease-in-out infinite; } .mid-cue-c i:nth-child(2) { animation-delay: 3.2s; } @keyframes mid-chev { 0% { opacity: 0; transform: translateY(-4px) rotate(45deg); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(5px) rotate(45deg); } } @media (hover: hover) { .mid-cue:hover .mid-cue-m { border-color: #F59E17; } } .is-off .mid-cue-m span, .is-off .mid-cue-c i, .is-off .mid-play-i::before { animation-play-state: paused !important; } /* Video modal */ .mid-vmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(3,19,42,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 260ms ease; } .mid-vmodal[hidden] { display: none; } .mid-vmodal.is-open { opacity: 1; } .mid-vm-box { position: relative; width: min(1100px, 100%); transform: translateY(12px) scale(.98); transition: transform 320ms var(--ease-out); } .mid-vmodal.is-open .mid-vm-box { transform: none; } .mid-vm-box video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; background: #03132a; border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.1); } .mid-vm-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; } .mid-vm-parts button { padding: .55rem .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.8); font: 600 .8rem/1 var(--wp--preset--font-family--heading); cursor: pointer; } .mid-vm-parts button.is-on { background: #F59E17; border-color: #F59E17; color: #051C3C; } .mid-vm-close { position: absolute; top: -56px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(5,28,60,.6); color: #fff; display: grid; place-items: center; cursor: pointer; } .mid-vm-close:hover { border-color: #F59E17; } html.mid-vm-on { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .mid-cue-m span, .mid-cue-c i, .mid-play-i::before { animation: none !important; opacity: 1; } .mid-cue { transform: translateX(-50%) !important; } .mid-vmodal, .mid-vm-box { transition: none; } } /* cue fix: the older ".mid-cue span" rule made the new parts absolute */ .mid-cue { width: 24px !important; margin-left: -12px !important; transform: none !important; } .mid-cue > span.mid-cue-m { position: relative; left: auto; top: auto; margin: 0; width: 24px; height: 38px; background: none; border-radius: 13px; animation: none; } .mid-cue > span.mid-cue-c { position: relative; left: auto; top: auto; margin: 0; width: 24px; height: 14px; background: none; border-radius: 0; animation: none; } .mid-vm-close { top: 12px !important; right: 12px !important; z-index: 2; } /* ===== Round 20: classic article pages, outline hero button, PDF viewer ===== */ /* Articles: no dark header band. Featured image, then author · date · category, then the title. */ .mid-single-classic { background: #fff; } .mid-classic { padding: calc(var(--hdr-h) + clamp(1.5rem, 3vw, 2.5rem)) var(--sec-x) clamp(3rem, 6vw, 4.5rem); } .mid-back-dark { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1.4rem !important; padding: .45rem .8rem .45rem .6rem; border-radius: 999px; color: #0A2A55 !important; background: #EEF4FB; text-decoration: none; font: 600 .8rem/1 var(--wp--preset--font-family--heading); } .mid-back-dark:hover { background: #E2ECF8; } .mid-classic-figure { margin: 0 auto !important; border-radius: 18px; overflow: hidden; background: #EEF4FB; } .mid-classic-figure img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; border-radius: 18px; } .mid-classic-meta { gap: .35rem .9rem !important; margin-top: 1.4rem !important; font: 500 .86rem/1.4 var(--wp--preset--font-family--body, inherit); color: #5B6B82; } .mid-classic-meta > * { margin: 0 !important; } .mid-cm-author { font-weight: 700; color: #051C3C; } .mid-cm-author a { color: inherit !important; text-decoration: none; } .mid-cm-date::before, .mid-cm-cats::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #F59E17; margin-right: .9rem; vertical-align: middle; transform: translateY(-1px); } .mid-cm-cats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .mid-cm-cats .wp-block-post-terms__separator { display: none; } .mid-cm-cats a { padding: .28rem .6rem; border-radius: 999px; background: #FFF4E3; color: #B0650A !important; font: 700 .68rem/1 var(--wp--preset--font-family--heading); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .mid-cm-cats a[href*="/uncategorized/"] { display: none; } .mid-classic-title { margin: .8rem 0 1.8rem !important; color: #051C3C !important; font-size: clamp(1.75rem, 3.8vw, 2.7rem) !important; line-height: 1.15 !important; letter-spacing: -.02em; } .mid-single-classic .mid-share { max-width: 760px; } .mid-single-classic .mid-more { border-top: 1px solid #E6EDF6; } /* Hero: one outline button, so the heading leads */ .mid-hero .mid-btn-play { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.4) !important; box-shadow: none !important; padding: .6rem 1.3rem .6rem .6rem !important; font-weight: 600; } .mid-hero .mid-btn-play:hover { border-color: #F59E17 !important; background: rgba(245,158,23,.08) !important; } .mid-hero .mid-play-i { width: 30px; height: 30px; background: #F59E17; } .mid-hero .mid-play-i::after { left: 11.5px; top: 9px; border-left: 10px solid #051C3C; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .mid-hero .mid-play-i::before { border-color: rgba(245,158,23,.45); } /* PDF viewer */ .mid-pdf { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; background: rgba(3,19,42,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms ease; } .mid-pdf[hidden] { display: none; } .mid-pdf.is-open { opacity: 1; } .mid-pdf-bar { display: flex; align-items: center; gap: .8rem; padding: .75rem clamp(.8rem, 3vw, 1.5rem); color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(5,28,60,.85); } .mid-pdf-t { flex: 1; min-width: 0; font: 600 .9rem/1.3 var(--wp--preset--font-family--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mid-pdf-n { font: 500 .78rem/1 var(--wp--preset--font-family--heading); color: rgba(255,255,255,.6); white-space: nowrap; } .mid-pdf-dl { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; background: #F59E17; color: #051C3C !important; font: 700 .8rem/1 var(--wp--preset--font-family--heading); text-decoration: none !important; white-space: nowrap; } .mid-pdf-dl svg { width: 15px; height: 15px; } .mid-pdf-x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; } .mid-pdf-x:hover { border-color: #F59E17; } .mid-pdf-pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: clamp(.8rem, 3vw, 2rem) clamp(.5rem, 3vw, 2rem) 3rem; } .mid-pdf-pages canvas { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto 1rem; background: #fff; border-radius: 4px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.7); } .mid-pdf-load { color: rgba(255,255,255,.7); text-align: center; padding: 3rem 1rem; font: 500 .9rem/1.4 var(--wp--preset--font-family--heading); } .mid-pdf-frame { display: block; width: 100%; max-width: 980px; height: 100%; min-height: 70vh; margin: 0 auto; border: 0; background: #fff; border-radius: 6px; } html.mid-pdf-on { overflow: hidden; } @media (max-width: 560px) { .mid-pdf-dl span { display: none; } .mid-pdf-n { display: none; } } .mid-classic-title { margin: .8rem auto 1.8rem !important; } .mid-classic > .mid-back-dark { display: flex; width: max-content; margin-left: max(0px, calc((100% - 1040px) / 2)) !important; } .mid-classic-meta { margin-left: auto !important; margin-right: auto !important; } .wp-site-blocks > main.mid-single-classic { padding-top: 0 !important; } /* Document card inside an article (opens in the in-page viewer) */ .mid-doc-embed { display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem; align-items: center; margin: 1.5rem 0 2rem; padding: 1.1rem; border: 1px solid #DDE6F1; border-radius: 18px; background: linear-gradient(180deg, #F7FAFE, #fff); box-shadow: 0 14px 34px -24px rgba(5,28,60,.35); } .mid-doc-embed > a img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 24px -10px rgba(5,28,60,.35); } .mid-doc-embed .k { margin: 0 0 .3rem; font: 700 .68rem/1 var(--wp--preset--font-family--heading); letter-spacing: .18em; text-transform: uppercase; color: #46A8FC; } .mid-doc-embed h3 { margin: 0 0 .35rem !important; font: 700 1.15rem/1.3 var(--wp--preset--font-family--heading) !important; color: #051C3C; } .mid-doc-embed .m { margin: 0 0 1rem !important; font-size: .88rem !important; color: #5B6B82; } .mid-doc-embed .acts { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; } .mid-doc-embed .acts a { text-decoration: none; } @media (max-width: 520px) { .mid-doc-embed { grid-template-columns: 96px 1fr; gap: 1rem; } }