:root{ --red: #b91f2b; --red-dark: #7f141d; --red-deep: #4a0d12; --gold: #b6892f; --gold-light: #d9b56a; --ink: #241f18; --ink-soft: #55493b; --cream: #faf5ea; --cream-dark: #f0e6d3; --paper: #fffdf8; --line: #e3d6bc; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --radius: 14px; --radius-sm: 8px; --shadow: 0 18px 40px -18px rgba(36, 31, 24, 0.35); --shadow-soft: 0 10px 30px -14px rgba(36, 31, 24, 0.25); --display: 'Cinzel', serif; --body: 'Work Sans', sans-serif; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--body); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; } h1, h2, h3{ font-family: var(--display); line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: 0.01em; } h1{ font-size: clamp(2.1rem, 5vw, 3.6rem); } h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); } h3{ font-size: 1.25rem; } p{ margin: 0 0 var(--sp-4); color: var(--ink-soft); } .container{ max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-5); } section{ padding: clamp(40px, 5.2vw, 68px) 0; } .eyebrow{ display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-3); } .eyebrow::before{ content: ""; width: 22px; height: 2px; background: var(--gold); display: inline-block; } .lede{ font-size: 1.08rem; max-width: 620px; color: var(--ink-soft); } .lede.center{ margin-left: auto; margin-right: auto; text-align: center; } /* Buttons */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 13px 26px; border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover{ transform: translateY(-1px); } .btn-primary{ background: var(--gold); color: var(--red-deep); box-shadow: 0 10px 24px -10px rgba(182, 137, 47, 0.65); } .btn-primary:hover{ background: var(--gold-light); } .btn-ghost{ border-color: rgba(250, 245, 234, 0.55); color: var(--paper); background: rgba(250, 245, 234, 0.06); } .btn-ghost:hover{ background: rgba(250, 245, 234, 0.14); } .btn-outline{ border-color: var(--red); color: var(--red); background: transparent; } .btn-outline:hover{ background: var(--red); color: var(--paper); } .btn svg{ width: 17px; height: 17px; flex-shrink: 0; } /* Scroll reveal (progressive enhancement: only active once .js is on ) */ .js .reveal{ opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); } .js .reveal.in{ opacity: 1; transform: none; } .js .reveal-group .reveal:nth-child(2){ transition-delay: 0.08s; } .js .reveal-group .reveal:nth-child(3){ transition-delay: 0.16s; } .js .reveal-group .reveal:nth-child(4){ transition-delay: 0.24s; } .js .reveal-group .reveal:nth-child(5){ transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce){ .reveal, .js .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; } .float-anim, .glow-pulse, .hero-badge-ring img{ animation: none !important; } } /* Subtle dot texture reused on alt sections for cohesion */ .section-alt{ position: relative; overflow: hidden; background: var(--cream-dark); } .section-alt::after{ content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.6px); background-size: 30px 30px; pointer-events: none; } .section-alt .container{ position: relative; } /* Header */ header{ position: sticky; top: 0; z-index: 50; background: rgba(250, 245, 234, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav-wrap{ display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) clamp(14px, 4vw, 64px); width: 100%; gap: var(--sp-3); } .brand{ display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); min-width: 0; flex-shrink: 1; } .brand img{ width: 42px; height: 42px; flex-shrink: 0; } .brand-text{ line-height: 1.15; min-width: 0; overflow: hidden; } .brand-text strong{ display: block; font-family: var(--display); font-size: 0.95rem; color: var(--red-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-text span{ display: block; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } nav ul{ list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; } nav a{ text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink); position: relative; padding-bottom: 4px; transition: color 0.2s ease; } nav a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } nav a:hover{ color: var(--red); } nav a:hover::after, nav a.active::after{ transform: scaleX(1); } nav a.active{ color: var(--red-dark); } .header-actions{ display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .call-pill{ display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--red); color: var(--paper); padding: 9px 18px; border-radius: 999px; text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: background 0.2s ease; white-space: nowrap; } .call-pill:hover{ background: var(--red-dark); } .menu-toggle{ display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-shrink: 0; } .menu-toggle span{ display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 1px; transition: 0.2s; } /* Hero (home) */ .hero{ position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(22, 6, 9, 0.88) 0%, rgba(120, 18, 28, 0.82) 45%, rgba(16, 4, 7, 0.94) 100%), url('hero-dojo-bg.jpg') center/cover no-repeat; color: var(--paper); padding: var(--sp-9) 0 var(--sp-8); box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.5); } .hero::before{ content: ""; position: absolute; inset: 0; opacity: 0.12; background-image: radial-gradient(circle at 10px 10px, transparent 9px, rgba(250,245,234,0.5) 9.5px, rgba(250,245,234,0.5) 10px, transparent 10.5px); background-size: 46px 46px; pointer-events: none; } .hero-wave{ position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; pointer-events: none; } .hero-wave svg{ width: 100%; height: 64px; display: block; } .hero-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); align-items: center; } .hero-badge-ring{ position: relative; display: flex; justify-content: center; align-items: center; } .hero-badge-ring::before{ content: ""; position: absolute; width: min(400px, 92%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217,181,106,0.42) 0%, rgba(217,181,106,0.12) 55%, transparent 72%); animation: glowPulse 4.5s ease-in-out infinite; pointer-events: none; } @keyframes glowPulse{ 0%, 100%{ transform: scale(0.94); opacity: 0.75; } 50%{ transform: scale(1.04); opacity: 1; } } .hero-badge-ring img{ position: relative; width: min(340px, 80%); filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45)); animation: floatY 5.5s ease-in-out infinite; } @keyframes floatY{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } } .hero h1{ color: var(--paper); margin-bottom: var(--sp-4); text-shadow: 0 4px 28px rgba(0,0,0,0.4); } .hero .lede{ color: rgba(250, 245, 234, 0.88); font-size: 1.12rem; } .hero-cta{ display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); } .trust-strip{ position: relative; border-top: 1px solid rgba(250,245,234,0.18); margin-top: var(--sp-8); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); font-size: 0.85rem; color: rgba(250,245,234,0.8); } .trust-strip strong{ color: var(--gold-light); font-weight: 600; } /* Page hero (inner pages: gallery / contact / certifications) */ .page-hero{ position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(24, 7, 10, 0.89) 0%, rgba(115, 18, 27, 0.83) 50%, rgba(16, 4, 7, 0.94) 100%), url('hero-dojo-bg.jpg') center/cover no-repeat; color: var(--paper); padding: var(--sp-8) 0 var(--sp-7); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5); } .page-hero::before{ content: ""; position: absolute; inset: 0; opacity: 0.14; background-image: radial-gradient(circle at 10px 10px, transparent 9px, rgba(250,245,234,0.5) 9.5px, rgba(250,245,234,0.5) 10px, transparent 10.5px); background-size: 46px 46px; pointer-events: none; } .page-hero .container{ position: relative; z-index: 1; } .page-hero .eyebrow{ color: var(--gold-light); } .page-hero .eyebrow::before{ background: var(--gold-light); } .page-hero h1{ color: var(--paper); text-shadow: 0 4px 28px rgba(0,0,0,0.4); } .page-hero .lede{ color: rgba(250, 245, 234, 0.85); } .page-hero-wave{ position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; pointer-events: none; } .page-hero-wave svg{ width: 100%; height: 54px; display: block; } .breadcrumb{ display: flex; align-items: center; gap: var(--sp-2); font-size: 0.82rem; color: rgba(250,245,234,0.65); margin-bottom: var(--sp-4); } .breadcrumb a{ text-decoration: none; color: rgba(250,245,234,0.85); } .breadcrumb a:hover{ color: var(--gold-light); } /* About */ .about-grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: center; } .kanji-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); box-shadow: var(--shadow-soft); text-align: center; } .kanji-card .glyphs{ font-family: var(--display); color: var(--red); font-size: 2.6rem; letter-spacing: 0.15em; margin-bottom: var(--sp-2); } .kanji-line{ margin-bottom: var(--sp-6); } .kanji-line:last-child{ margin-bottom: 0; } .kanji-line .meaning{ font-size: 0.85rem; color: var(--ink-soft); font-style: italic; } .kanji-line .meaning b{ color: var(--ink); font-style: normal; } .divider-orn{ display: flex; align-items: center; gap: var(--sp-3); color: var(--gold); margin: var(--sp-5) 0; } .divider-orn::before, .divider-orn::after{ content: ""; height: 1px; flex: 1; background: var(--line); } /* Photo strip / highlights (home) */ .photo-strip{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-7); } .photo-strip a{ position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-soft); border: 1px solid var(--line); } .photo-strip img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .photo-strip a:hover img{ transform: scale(1.08); } .photo-strip .cap{ position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-3) var(--sp-3) var(--sp-2); background: linear-gradient(to top, rgba(20,10,10,0.85), transparent); color: var(--paper); font-size: 0.78rem; font-weight: 600; } .strip-more{ text-align: center; margin-top: var(--sp-6); } /* Training */ #training .container{ max-width: 1320px; } .card-grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); } .train-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .train-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--gold); } .train-card .card-head{ display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .icon-badge{ width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--red), var(--red-deep)); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .icon-badge svg{ width: 22px; height: 22px; color: var(--gold-light); } .train-card:hover .icon-badge{ transform: scale(1.08) rotate(-4deg); } .train-card .num{ font-family: var(--display); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.12em; } .train-card h3{ font-size: 1.02rem; margin-bottom: var(--sp-2); color: var(--red-dark); line-height: 1.25; } .train-card p{ font-size: 0.88rem; line-height: 1.5; margin: 0; } .note-line{ margin-top: var(--sp-6); font-size: 0.92rem; color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: var(--sp-4); } /* Grading */ .grading-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; } .doc-card{ background: var(--paper); padding: var(--sp-3); border-radius: var(--radius-sm); box-shadow: var(--shadow); transform: rotate(-2.5deg); border: 1px solid var(--line); transition: transform 0.35s ease, box-shadow 0.35s ease; } .doc-card:hover{ transform: rotate(0deg) scale(1.02); box-shadow: 0 26px 50px -20px rgba(36,31,24,0.45); } .doc-card img{ border-radius: 4px; } .doc-card figcaption{ font-size: 0.8rem; color: var(--ink-soft); padding: var(--sp-3) var(--sp-2) var(--sp-1); text-align: center; } .regd-pill{ display: inline-block; background: var(--red); color: var(--paper); font-weight: 600; font-size: 0.85rem; padding: 8px 16px; border-radius: 999px; margin-bottom: var(--sp-5); } /* Leadership */ .leader-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-7); } .section-head-row{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .slider-controls{ display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .slider-btn{ width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft); transition: all 0.25s ease; } .slider-btn svg{ width: 20px; height: 20px; } .slider-btn:hover{ background: var(--red); color: var(--paper); border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); } .slider-btn:active{ transform: scale(0.95); } .leader-carousel-wrap{ position: relative; margin: 0 calc(-1 * var(--sp-2)); padding: var(--sp-2); } .leader-slider-track{ display: flex; gap: var(--sp-5); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: var(--sp-3) var(--sp-2) var(--sp-5); scrollbar-width: none; -ms-overflow-style: none; } .leader-slider-track::-webkit-scrollbar{ display: none; } .leader-slider-card{ flex: 0 0 320px; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); text-align: center; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .leader-slider-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold); } .leader-slider-card:hover .leader-photo{ transform: scale(1.05); border-color: var(--red); } .leader-slider-card h3{ color: var(--red-dark); font-size: 1.08rem; margin-bottom: 3px; line-height: 1.25; } .leader-slider-card .leader-role{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; margin-bottom: var(--sp-3); } .leader-desc{ font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: var(--sp-4); flex-grow: 1; } .leader-tag{ display: inline-block; background: var(--cream-dark); color: var(--red-dark); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); letter-spacing: 0.02em; } .slider-indicators{ display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: var(--sp-4); } .slider-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--line); cursor: pointer; transition: all 0.3s ease; } .slider-dot.active{ width: 24px; border-radius: 999px; background: var(--red); } .leader-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); text-align: center; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .leader-card:hover{ transform: translateY(-7px); box-shadow: var(--shadow); border-color: var(--gold); } .leader-avatar-wrap{ position: relative; width: 108px; height: 108px; margin: 0 auto var(--sp-4); } .leader-photo{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: var(--shadow-soft); transition: transform 0.35s ease, border-color 0.35s ease; background: var(--cream-dark); } .leader-card:hover .leader-photo{ transform: scale(1.05); border-color: var(--red); } .rank-badge-chip{ position: absolute; bottom: -3px; right: -4px; background: radial-gradient(circle at 30% 25%, var(--red), var(--red-deep)); color: var(--gold-light); font-family: var(--display); font-weight: 700; font-size: 0.72rem; padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--gold); box-shadow: 0 4px 10px rgba(0,0,0,0.25); white-space: nowrap; letter-spacing: 0.03em; } .rank-badge{ position: relative; width: 84px; height: 84px; margin: 0 auto var(--sp-4); border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--red), var(--red-deep)); display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-family: var(--display); font-weight: 700; font-size: 0.95rem; border: 3px solid var(--gold); box-shadow: var(--shadow-soft); transition: transform 0.35s ease; } .leader-card:hover .rank-badge{ transform: scale(1.07); } .rank-badge::after{ content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0.5; } .leader-card h3{ color: var(--red-dark); margin-bottom: 2px; } .leader-role{ font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 600; margin-bottom: var(--sp-3); } .leader-card p{ font-size: 0.92rem; margin: 0; } /* Affiliations */ .chain{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); } .chain-node{ background: var(--cream-dark); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-4); font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease; } .chain-node:hover{ transform: translateY(-3px); box-shadow: var(--shadow-soft); } .chain-node.origin{ background: var(--red); color: var(--paper); border-color: var(--red); } .chain-node.top{ background: var(--gold); color: var(--red-deep); border-color: var(--gold); } .chain-arrow{ color: var(--gold); font-size: 1.1rem; } .chain-col{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .badge-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); } .badge-chip{ display: flex; align-items: center; gap: var(--sp-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-size: 0.88rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .badge-chip:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--gold); } .badge-chip-ioc{ background: linear-gradient(135deg, var(--paper) 0%, rgba(240, 230, 211, 0.8) 100%); border: 1.5px solid var(--gold); box-shadow: 0 4px 14px rgba(182, 137, 47, 0.18); } .badge-chip-ioc:hover{ border-color: var(--red); box-shadow: 0 8px 20px rgba(185, 31, 43, 0.2); } .fed-logo{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid var(--gold); padding: 1px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform 0.25s ease; } .badge-chip:hover .fed-logo{ transform: scale(1.1) rotate(4deg); border-color: var(--red); } .fed-logo-ioc{ width: 44px; height: 44px; border-radius: 50%; background: #ffffff; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform 0.25s ease; } .badge-chip:hover .fed-logo-ioc{ transform: scale(1.1); border-color: var(--red); } .fed-logo-boa{ width: 44px; height: 44px; border-radius: 50%; background: #ffffff; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform 0.25s ease; } .badge-chip:hover .fed-logo-boa{ transform: scale(1.1) rotate(6deg); border-color: var(--red); } .fed-logo-pill{ width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--gold), var(--gold-light)); color: var(--red-deep); font-family: var(--display); font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--gold); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .badge-chip .abbr{ display: block; font-family: var(--display); font-weight: 700; color: var(--red-dark); font-size: 0.95rem; line-height: 1.15; } .badge-chip .full{ display: block; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.35; margin-top: 2px; } .proof-wrap{ text-align: center; margin-top: var(--sp-5); } .proof-wrap img{ width: 100%; max-width: 720px; margin: 0 auto; display: block; border-radius: var(--radius-sm); box-shadow: var(--shadow); border: 1px solid var(--line); object-fit: contain; transition: box-shadow 0.35s ease; } .proof-wrap img:hover{ box-shadow: 0 24px 50px -15px rgba(0,0,0,0.35); } .proof-wrap figcaption{ margin-top: var(--sp-4); font-size: 0.85rem; color: var(--ink-soft); } /* CTA banner (home, contact, about, reused before footer) */ #cta .container, .section-cta .container, section:has(.cta-banner) .container{ max-width: 1360px; width: 100%; } .cta-banner{ position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(22, 6, 9, 0.88) 0%, rgba(125, 20, 29, 0.84) 50%, rgba(18, 5, 7, 0.92) 100%), url('dojo-bg.jpg') center/cover no-repeat; color: var(--paper); border-radius: var(--radius); padding: var(--sp-8) var(--sp-8); text-align: center; border: 1.5px solid rgba(212, 160, 23, 0.4); box-shadow: 0 24px 55px -15px rgba(0, 0, 0, 0.5), inset 0 0 100px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; width: 100%; } .cta-banner:hover{ box-shadow: 0 28px 65px -15px rgba(0, 0, 0, 0.6), 0 0 30px rgba(182, 137, 47, 0.2); } .cta-banner h2{ color: var(--paper); margin-bottom: var(--sp-3); } .cta-banner p{ color: rgba(250,245,234,0.9); max-width: 680px; margin-left: auto; margin-right: auto; font-size: 1.02rem; } .cta-banner .hero-cta{ justify-content: center; margin-top: var(--sp-5); } /* Gallery page */ .filter-row{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); margin-bottom: var(--sp-2); } .filter-chip{ border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-soft); font-family: var(--body); font-weight: 600; font-size: 0.85rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .filter-chip:hover{ border-color: var(--gold); color: var(--ink); } .filter-chip.active{ background: var(--red); border-color: var(--red); color: var(--paper); } .album{ padding-top: var(--sp-7); scroll-margin-top: 90px; } .album:first-of-type{ padding-top: var(--sp-6); } .album-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); } .album-head h2{ font-size: 1.5rem; color: var(--red-dark); } .album-count{ font-size: 0.8rem; color: var(--gold); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .gallery-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .gallery-item{ position: relative; display: block; border: none; padding: 0; cursor: zoom-in; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--cream-dark); box-shadow: var(--shadow-soft); border: 1px solid var(--line); } .gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } .gallery-item:hover img{ transform: scale(1.08); } .gallery-item::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,10,10,0.5), transparent 45%); opacity: 0; transition: opacity 0.25s ease; } .gallery-item:hover::after{ opacity: 1; } .gallery-item .zoom-hint{ position: absolute; right: var(--sp-3); bottom: var(--sp-3); width: 30px; height: 30px; border-radius: 50%; background: rgba(250,245,234,0.92); color: var(--red-dark); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .gallery-item:hover .zoom-hint{ opacity: 1; transform: none; } .gallery-item .zoom-hint svg{ width: 15px; height: 15px; } /* Lightbox */ .lightbox{ position: fixed; inset: 0; z-index: 100; background: rgba(15, 9, 8, 0.92); display: none; align-items: center; justify-content: center; padding: var(--sp-6); } .lightbox.open{ display: flex; } .lightbox figure{ margin: 0; max-width: min(920px, 92vw); max-height: 88vh; text-align: center; } .lightbox img{ max-width: 100%; max-height: 76vh; border-radius: var(--radius-sm); box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); margin: 0 auto; } .lightbox figcaption{ color: rgba(250,245,234,0.85); font-size: 0.9rem; margin-top: var(--sp-4); } .lightbox-close, .lightbox-prev, .lightbox-next{ position: fixed; background: rgba(250,245,234,0.1); border: 1.5px solid rgba(250,245,234,0.4); color: var(--paper); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(250,245,234,0.22); } .lightbox-close{ top: var(--sp-5); right: var(--sp-5); } .lightbox-prev{ left: var(--sp-5); top: 50%; transform: translateY(-50%); } .lightbox-next{ right: var(--sp-5); top: 50%; transform: translateY(-50%); } .lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width: 20px; height: 20px; } @media (max-width: 700px){ .lightbox-prev{ left: var(--sp-2); } .lightbox-next{ right: var(--sp-2); } .lightbox-close{ top: var(--sp-2); right: var(--sp-2); } } /* Certifications page */ .cert-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-7); } .cert-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: zoom-in; } .cert-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); } .cert-card .frame{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-dark); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); } .cert-card .frame img{ width: 100%; height: 100%; object-fit: contain; background: #ffffff; padding: 4px; display: block; } .cert-card .frame-fallback{ color: var(--ink-soft); font-size: 0.85rem; font-style: italic; text-align: center; padding: var(--sp-4); } .cert-card figcaption{ padding: var(--sp-4); font-size: 0.88rem; color: var(--ink-soft); } .cert-card figcaption b{ display: block; color: var(--ink); margin-bottom: 2px; font-size: 0.95rem; } .memb-table{ margin-top: var(--sp-7); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .memb-row{ display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--line); } .memb-row:last-child{ border-bottom: none; } .memb-row dt{ padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--red-dark); background: var(--cream-dark); font-size: 0.88rem; } .memb-row dd{ margin: 0; padding: var(--sp-4) var(--sp-5); color: var(--ink-soft); font-size: 0.92rem; } @media (max-width: 640px){ .memb-row{ grid-template-columns: 1fr; } .memb-row dt{ padding-bottom: var(--sp-2); } } .sign-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); } .sign-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: var(--sp-4); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sign-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); } .sign-photo{ width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2.5px solid var(--gold); box-shadow: var(--shadow-soft); } .sign-card .role{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-weight: 600; margin-bottom: 4px; } .sign-card h3{ color: var(--red-dark); font-size: 1.05rem; margin-bottom: 4px; } .sign-card p{ font-size: 0.85rem; margin: 0; } /* Contact page */ .contact-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-7); } .contact-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow 0.3s ease, transform 0.3s ease; } .contact-card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); } .contact-card .body{ padding: var(--sp-6); } .contact-card .tag{ font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--gold); margin-bottom: var(--sp-2); display: block; } .contact-card address{ font-style: normal; color: var(--ink); margin-bottom: var(--sp-5); font-size: 1.02rem; } .contact-card .cta-row{ display: flex; flex-wrap: wrap; gap: var(--sp-3); } .contact-card iframe{ width: 100%; height: 240px; border: 0; display: block; } .btn-sm{ padding: 10px 18px; font-size: 0.85rem; } .org-strip{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); margin-top: var(--sp-7); } .org-fact{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-5); box-shadow: var(--shadow-soft); } .org-fact .tag{ font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--gold); display: block; margin-bottom: var(--sp-2); } .org-fact p{ margin: 0; color: var(--ink); font-weight: 600; font-size: 0.98rem; } .org-fact span.sub{ display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; margin-top: 2px; } .whatsapp-fab{ position: fixed; bottom: 22px; right: 22px; z-index: 60; background: #25D366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4); text-decoration: none; transition: transform 0.2s ease; } .whatsapp-fab svg{ width: 28px; height: 28px; } .whatsapp-fab:hover{ transform: scale(1.08); } .top-fab{ position: fixed; bottom: 22px; left: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--gold); color: var(--red-dark); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .top-fab.show{ opacity: 1; transform: none; pointer-events: auto; } .top-fab svg{ width: 18px; height: 18px; } /* Footer */ footer{ position: relative; background: var(--ink); color: rgba(250,245,234,0.72); padding: var(--sp-8) 0 var(--sp-6); } footer .container{ max-width: none; padding: 0 clamp(20px, 4vw, 64px); } .footer-wave{ position: absolute; left: 0; right: 0; top: -1px; transform: translateY(-99%); line-height: 0; pointer-events: none; } .footer-wave svg{ width: 100%; height: 54px; display: block; } .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-7); } .footer-brand{ display: flex; gap: var(--sp-5); align-items: center; } .footer-brand img{ width: 108px; height: 108px; flex-shrink: 0; } .footer-brand strong{ display: block; font-family: var(--display); color: var(--paper); font-size: 1.15rem; margin-bottom: var(--sp-2); } .footer-brand p{ color: rgba(250,245,234,0.6); font-size: 0.88rem; margin: 0; } footer h4{ color: var(--paper); font-family: var(--body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--sp-4); } footer ul{ list-style: none; padding: 0; margin: 0; } footer li{ margin-bottom: var(--sp-3); font-size: 0.9rem; } footer a{ text-decoration: none; color: rgba(250,245,234,0.72); } footer a:hover{ color: var(--gold-light); } .footer-bottom{ border-top: 1px solid rgba(250,245,234,0.14); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: 0.8rem; color: rgba(250,245,234,0.5); } /* Graceful photo fallback (used wherever a real photo may not be uploaded yet) */ .photo-badge{ position: relative; width: 140px; height: 140px; margin: 0 auto var(--sp-5); border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); box-shadow: var(--shadow-soft); background: radial-gradient(circle at 30% 25%, var(--red), var(--red-deep)); } .photo-badge img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-badge .fallback-text{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-family: var(--display); font-weight: 700; font-size: 0.9rem; text-align: center; padding: var(--sp-3); line-height: 1.3; } .whatsapp-fab{ position: fixed; bottom: 22px; right: 22px; z-index: 70; background: #25D366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.5), 0 6px 16px -4px rgba(0,0,0,0.3); text-decoration: none; transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease; animation: wa-pulse 2.8s infinite; } @keyframes wa-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.65), 0 10px 25px -5px rgba(37, 211, 102, 0.5); } 60%{ box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 10px 25px -5px rgba(37, 211, 102, 0.5); } 100%{ box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 25px -5px rgba(37, 211, 102, 0.5); } } .whatsapp-fab svg{ width: 30px; height: 30px; } .whatsapp-fab:hover{ transform: scale(1.12); animation: none; box-shadow: 0 16px 32px -4px rgba(37, 211, 102, 0.65); } .top-fab{ position: fixed; bottom: 22px; left: 22px; z-index: 70; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--gold); color: var(--red-dark); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(36, 31, 24, 0.3); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease; } .top-fab.show{ opacity: 1; transform: none; pointer-events: auto; } .top-fab:hover{ background: var(--red); color: var(--paper); border-color: var(--red); transform: translateY(-3px); box-shadow: 0 12px 24px -6px rgba(185, 31, 43, 0.4); } /* Float animation for Hero Badge */ @keyframes badge-float{ 0%, 100%{ transform: translateY(0px) rotate(0deg); } 50%{ transform: translateY(-7px) rotate(1.2deg); } } .hero-badge-ring img{ animation: badge-float 6s ease-in-out infinite; } /* Governing body & examiner board (About page) */ .grade-group{ margin-top: var(--sp-8); } .grade-group:first-child{ margin-top: var(--sp-7); } .grade-group h3{ color: var(--red-dark); font-size: 1.15rem; margin-bottom: 4px; } .grade-group .grade-note{ font-size: 0.88rem; color: var(--ink-soft); margin-bottom: var(--sp-5); } .examiner-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .examiner-card{ display: flex; align-items: center; gap: var(--sp-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .examiner-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--gold); } .examiner-avatar-wrap{ position: relative; width: 58px; height: 58px; flex-shrink: 0; } .examiner-photo{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 3px 8px rgba(0,0,0,0.14); transition: transform 0.25s ease, border-color 0.25s ease; background: var(--cream-dark); } .examiner-card:hover .examiner-photo{ transform: scale(1.08); border-color: var(--red); } .mini-badge-chip{ position: absolute; bottom: -3px; right: -5px; background: radial-gradient(circle at 30% 25%, var(--red), var(--red-deep)); color: var(--gold-light); font-family: var(--display); font-weight: 700; font-size: 0.58rem; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,0.25); white-space: nowrap; line-height: 1.2; } .examiner-card .mini-badge{ width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--red), var(--red-deep)); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-family: var(--display); font-weight: 700; font-size: 0.68rem; text-align: center; line-height: 1.15; } .examiner-card .info h4{ font-family: var(--display); color: var(--red-dark); font-size: 0.95rem; margin: 0 0 2px; } .examiner-card .info span{ display: block; font-size: 0.78rem; color: var(--ink-soft); } .examiner-card .info .reg{ color: var(--gold); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; margin-top: 2px; } /* Enquiry form (Contact page) */ .enquiry-card{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-7); box-shadow: var(--shadow-soft); } .form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .form-field{ display: flex; flex-direction: column; gap: 6px; } .form-field.full{ grid-column: 1 / -1; } .form-field label{ font-size: 0.85rem; font-weight: 600; color: var(--ink); } .form-field input, .form-field select, .form-field textarea{ font-family: var(--body); font-size: 0.95rem; padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--cream); color: var(--ink); outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--gold); background: var(--paper); } .form-field textarea{ resize: vertical; min-height: 110px; } .form-actions{ margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .form-note{ font-size: 0.82rem; color: var(--ink-soft); margin: 0; } .form-success{ display: none; align-items: center; gap: var(--sp-3); background: var(--cream-dark); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-5); font-size: 0.9rem; color: var(--ink); } .form-success.show{ display: flex; } .form-success svg{ width: 20px; height: 20px; color: var(--red); flex-shrink: 0; } @media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } .enquiry-card{ padding: var(--sp-5); } } /* Responsive */ @media (max-width: 960px){ .card-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .section-head-row{ flex-direction: column; align-items: flex-start; gap: var(--sp-3); } } @media (max-width: 860px){ .hero-grid, .about-grid, .grading-grid{ grid-template-columns: 1fr; gap: var(--sp-6); } .hero-grid{ text-align: left; } .hero-badge-ring{ order: -1; margin-bottom: var(--sp-4); } .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-5); } .footer-brand{ grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); } .footer-brand img{ width: 68px; height: 68px; margin-bottom: var(--sp-1); } .footer-brand strong{ font-size: 1.12rem; line-height: 1.25; } .footer-brand p{ font-size: 0.88rem; line-height: 1.5; } nav{ display: none; } .menu-toggle{ display: block; } /* Compact icon-only call pill on mobile */ .header-actions .call-pill{ padding: 9px; width: 38px; height: 38px; justify-content: center; gap: 0; } .header-actions .call-pill span.txt{ display: none; } .photo-strip{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .badge-grid{ grid-template-columns: repeat(2, 1fr); } nav.open{ display: block; position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 253, 248, 0.98); backdrop-filter: blur(12px); border-bottom: 1.5px solid var(--line); padding: var(--sp-5) var(--sp-6); box-shadow: 0 16px 36px -10px rgba(36, 31, 24, 0.25); animation: slideNav 0.28s ease; } @keyframes slideNav{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } } nav.open ul{ flex-direction: column; gap: var(--sp-4); } nav.open a{ display: block; font-size: 1.05rem; color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--cream-dark); } nav.open a::after{ display: none; } } @media (max-width: 680px){ section{ padding: var(--sp-7) 0; } .container{ padding: 0 var(--sp-4); } .chain{ flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); } .chain-arrow{ transform: rotate(90deg); margin: 2px 0; } .chain-col{ flex-direction: row; gap: var(--sp-3); } .card-grid{ grid-template-columns: 1fr; } .badge-grid{ grid-template-columns: 1fr; } .doc-card{ transform: rotate(0); } .proof-wrap img{ transform: rotate(0); } .leader-slider-card{ flex: 0 0 86%; } .whatsapp-fab{ bottom: 16px; right: 16px; width: 50px; height: 50px; } .whatsapp-fab svg{ width: 26px; height: 26px; } .top-fab{ bottom: 16px; left: 16px; width: 42px; height: 42px; } .cta-banner{ padding: var(--sp-6) var(--sp-4); } .cta-banner .hero-cta{ flex-direction: column; gap: var(--sp-3); } .cta-banner .hero-cta .btn{ width: 100%; } .filter-row{ flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); } .filter-chip{ font-size: 0.8rem; padding: 6px 14px; } .examiner-grid{ grid-template-columns: 1fr; } .sign-grid{ grid-template-columns: 1fr; } .org-strip{ grid-template-columns: 1fr; gap: var(--sp-3); } .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-3); } footer li{ font-size: 0.85rem; line-height: 1.45; } footer h4{ font-size: 0.82rem; margin-bottom: var(--sp-3); } } @media (max-width: 420px){ .brand-text span{ display: none; } .brand img{ width: 38px; height: 38px; } .hero-cta{ flex-direction: column; width: 100%; gap: var(--sp-3); } .hero-cta .btn{ width: 100%; } .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-3); } }