:root { /* ---------------------------------------------------------------- Official Telugu Desam Party palette (ref: telugudesam.org). The party's two brand colours are a golden yellow and a true flag red; the site was previously on a lemon yellow (#FFC400) and an orange-vermilion (#E31E24), which read hotter and less "party". Everything is driven from these tokens so the whole UI shifts here. --charcoal is a legacy name for the strong-accent red (57 uses), kept equal to --red-primary so components stay consistent. ---------------------------------------------------------------- */ --yellow: #FFC400; /* TDP golden yellow */ --tdp-red: #E31E24; /* TDP flag red */ --yellow-hover: #FFD23D; /* lighter gold for hovers */ --yellow-soft: #FFF3CC; /* soft gold wash for fills */ --yellow-deep: #E0A600; /* darker gold, for text/edges on light */ --white: #ffffff; --charcoal: #E31E24; /* = red-primary (legacy accent name) */ --charcoal-mid: #EE4B4F; --red-primary: #E31E24; /* the party red, used everywhere */ --red-light: #EE4B4F; --red-lighter: #F58487; --red-deep: #B71519; /* pressed / deep red */ --red-soft: #FCE1E2; /* soft red tint for backgrounds */ --gray-soft: #FCE1E2; --ink: #1A1A1A; /* near-black text, a touch deeper */ --text: #565656; --muted: #6E6E6E; --surface: #FFFFFF; /* pure white ground, matching the TDP site */ --line: #FFFFFF; /* no grey border -- cards read like the header's white plate */ --shadow: 0 10px 30px rgba(20, 20, 20, .07); /* clean soft lift, like the header plate */ --radius: 22px; --container: 1200px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Manrope", sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, select { font: inherit; } img { max-width: 100%; } .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: -60px; background: var(--yellow); color: var(--charcoal); z-index: 1000; padding: 12px 16px; border-radius: 8px; font-weight: 800; } .skip-link:focus { top: 16px; } /* Header */ .site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; color: var(--white); transition: .25s ease; } .site-header.scrolled { background: rgba(255,255,255,.94); color: var(--ink); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 40px rgba(31,31,31,.08); } .site-header.scrolled .brand-copy small, .site-header.scrolled .primary-nav > a:not(.btn) { color: var(--text); } .site-header.scrolled .primary-nav > a:not(.btn):hover, .site-header.scrolled .primary-nav > a.active { color: var(--charcoal); } .site-header.scrolled .login-link { border-left-color: var(--line); } .site-header.scrolled .menu-toggle span:not(.sr-only) { background: var(--charcoal); } .nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand-mark { width: 46px; height: 46px; border-radius: 14px; background: var(--yellow); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(255,196,0,.2); } .brand-wheel { width: 27px; height: 27px; border: 3px solid var(--charcoal); border-radius: 50%; position: relative; } .brand-wheel::before, .brand-wheel::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--charcoal); border-radius: 50%; } .brand-wheel::after { inset: 10px; background: var(--charcoal); border: 0; } .brand-copy { display: grid; line-height: 1.1; } .brand-copy strong { font-size: 18px; letter-spacing: -.02em; } .brand-copy small { margin-top: 5px; color: rgba(255,255,255,.58); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; } .primary-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; } .primary-nav > a:not(.btn) { color: rgba(255,255,255,.75); transition: .2s; } .primary-nav > a:not(.btn):hover, .primary-nav > a.active { color: var(--white); } .primary-nav > a.active { position: relative; } .primary-nav > a.active::after { content: ""; position: absolute; height: 2px; width: 18px; left: 50%; transform: translateX(-50%); bottom: -12px; background: var(--yellow); border-radius: 4px; } .login-link { border-left: 1px solid rgba(255,255,255,.15); padding-left: 26px; } .menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 9px; cursor: pointer; } .menu-toggle span:not(.sr-only) { display: block; height: 2px; background: white; margin: 5px 0; } /* Buttons */ .btn { min-height: 52px; padding: 0 24px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s; border: 1px solid transparent; } .btn:hover { transform: translateY(-2px); } .btn-yellow { background: var(--yellow); color: var(--charcoal); box-shadow: 0 12px 32px rgba(255,196,0,.18); } .btn-yellow:hover { background: var(--yellow-hover); box-shadow: 0 15px 38px rgba(255,196,0,.26); } .btn-ghost { color: white; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); backdrop-filter: blur(10px); } .btn-ghost:hover { background: rgba(255,255,255,.09); } .btn-dark { width: 100%; background: var(--charcoal); color: white; margin-top: 4px; box-shadow: 0 10px 26px rgba(227,30,36,.18); } .btn-dark:hover { background: var(--charcoal); } .btn-small { min-height: 42px; padding-inline: 18px; border-radius: 10px; } .btn-outline { min-height: 44px; border-color: var(--line); color: var(--ink); background: white; padding-inline: 18px; } .btn-red { background: var(--charcoal); color: var(--white); box-shadow: 0 12px 28px rgba(227,30,36,.16); } .btn-red:hover { background: var(--charcoal); } .service-card:nth-child(3n+2)::before { background: var(--charcoal); } .service-card:nth-child(3n)::before { background: var(--yellow); } .service-card:nth-child(3n+2) .service-icon { border-color: #dddddd; background: var(--gray-soft); color: var(--charcoal); } .service-card:nth-child(3n) .service-icon { border-color: #FFC400; background: var(--yellow-soft); color: #FFC400; } .quick-dock a:nth-child(2) .dock-icon, .quick-dock a:nth-child(4) .dock-icon { background: rgba(227,30,36,.16); color: #f0f0f0; } .quick-dock a:nth-child(3) .dock-icon { background: rgba(227,30,36,.16); color: #ededed; } .stats-strip article:nth-child(2) .stat-icon, .stats-strip article:nth-child(4) .stat-icon { color: var(--charcoal); background: var(--gray-soft); } .stats-strip article:nth-child(3) .stat-icon { color: var(--charcoal); background: var(--gray-soft); } /* Hero */ .future-grid { background-color: var(--charcoal); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 52px 52px; } .hero { min-height: 860px; color: white; position: relative; padding: 150px 0 0; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 44%, rgba(227,30,36,.16), transparent 32%), linear-gradient(90deg, rgba(227,30,36,.98), rgba(227,30,36,.76) 52%, rgba(227,30,36,.62)); } .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 230px; background: linear-gradient(transparent, rgba(227,30,36,.72)); pointer-events: none; } .hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .17; } .glow-one { width: 360px; height: 360px; background: var(--yellow); left: -180px; top: 220px; } .glow-two { width: 400px; height: 400px; background: var(--charcoal); right: -250px; top: 80px; } .hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; gap: 50px; align-items: center; min-height: 570px; } .eyebrow, .section-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #efefef; display: inline-flex; align-items: center; gap: 10px; } .eyebrow span { width: 22px; height: 2px; background: var(--yellow); } .hero h1 { margin: 22px 0 24px; font-size: clamp(48px, 5.3vw, 76px); line-height: 1.015; letter-spacing: -.055em; max-width: 760px; } .hero h1 span { color: var(--yellow); } .hero-lead { color: #fff7f7; max-width: 640px; font-size: 18px; line-height: 1.75; margin: 0; } .telugu-line { font-family: "Noto Sans Telugu", sans-serif; font-size: 15px; color: rgba(255,255,255,.58); margin: 12px 0 0; } .hero-actions { display: flex; gap: 14px; margin-top: 34px; } .trust-row { display: flex; align-items: center; gap: 16px; margin-top: 42px; } .avatar-stack { display: flex; } .avatar-stack span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #EE4B4F; border: 2px solid var(--charcoal); margin-left: -8px; color: var(--yellow); font-size: 10px; font-weight: 800; } .avatar-stack span:first-child { margin-left: 0; } .trust-row > div:last-child { display: grid; } .trust-row strong { font-size: 12px; } .trust-row small { color: #d2d2d2; font-size: 11px; margin-top: 3px; } .hero-visual { position: relative; height: 565px; } .globe { width: 430px; height: 430px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle at 37% 30%, rgba(255,196,0,.15), transparent 36%), radial-gradient(circle, rgba(238,75,79,.92), rgba(227,30,36,.98)); box-shadow: inset -45px -25px 90px rgba(124,18,4,.38), 0 0 100px rgba(227,30,36,.10); overflow: hidden; } .globe::before { content: ""; position: absolute; inset: 14px; border-radius: inherit; border: 1px solid rgba(255,255,255,.05); } .globe-grid { position: absolute; inset: 0; border-radius: 50%; } .globe-lat { background: repeating-radial-gradient(ellipse at center, transparent 0 43px, rgba(255,255,255,.075) 44px 45px); } .globe-long { background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.055) 71px 72px); opacity: .45; transform: rotate(15deg); } .continent { position: absolute; background: rgba(255,196,0,.12); border: 1px solid rgba(255,196,0,.34); filter: drop-shadow(0 0 10px rgba(255,196,0,.13)); } .continent-a { width: 92px; height: 123px; left: 76px; top: 103px; border-radius: 65% 35% 46% 54% / 38% 54% 46% 62%; transform: rotate(-19deg); } .continent-b { width: 140px; height: 115px; right: 71px; top: 104px; border-radius: 48% 52% 62% 38% / 45% 42% 58% 55%; transform: rotate(11deg); } .continent-c { width: 82px; height: 110px; right: 116px; bottom: 72px; border-radius: 45% 55% 62% 38% / 38% 39% 61% 62%; transform: rotate(-20deg); } .node, .map-node { position: absolute; width: 9px; height: 9px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,196,0,.1), 0 0 18px var(--yellow); animation: pulse 2.8s infinite; } .n1 { left: 92px; top: 142px; }.n2 { left: 144px; top: 214px; animation-delay: .7s; }.n3 { right: 93px; top: 145px; animation-delay: 1.1s; }.n4 { right: 133px; top: 242px; animation-delay: .3s; }.n5 { right: 90px; bottom: 95px; animation-delay: 1.5s; }.n6 { left: 204px; bottom: 74px; animation-delay: .9s; } .connection { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,196,0,.7), transparent); transform-origin: left; } .c1 { width: 180px; left: 97px; top: 147px; transform: rotate(14deg); }.c2 { width: 150px; left: 148px; top: 217px; transform: rotate(-18deg); }.c3 { width: 143px; right: 100px; bottom: 103px; transform: rotate(-52deg); } .orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-14deg); border: 1px solid rgba(255,255,255,.08); border-radius: 50%; } .orbit-a { width: 535px; height: 270px; }.orbit-b { width: 590px; height: 340px; transform: translate(-50%,-50%) rotate(38deg); } .ap-sigil { position: absolute; top: 215px; left: 50%; transform: translate(-50%,-50%); width: 108px; height: 128px; clip-path: polygon(44% 0, 67% 15%, 73% 35%, 90% 47%, 83% 69%, 62% 100%, 42% 84%, 33% 62%, 12% 51%, 24% 31%); background: rgba(255,196,0,.91); color: var(--charcoal); display: grid; place-content: center; text-align: center; filter: drop-shadow(0 15px 30px rgba(255,196,0,.23)); } .ap-sigil strong { font-size: 27px; line-height: 1; }.ap-sigil small { font-size: 7px; width: 63px; line-height: 1.3; margin-top: 5px; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; } .sigil-line { height: 1px; width: 37px; background: var(--charcoal); margin: 0 auto 6px; } .chapter-chip { position: absolute; padding: 9px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(227,30,36,.75); backdrop-filter: blur(12px); color: #fff7f7; font-size: 10px; font-weight: 700; box-shadow: 0 12px 35px rgba(0,0,0,.16); } .chapter-chip span { display: inline-block; width: 6px; height: 6px; background: var(--yellow); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 8px var(--yellow); } .chip-us { left: 10px; top: 128px; }.chip-eu { right: 10px; top: 127px; }.chip-apac { right: 22px; bottom: 98px; } .data-card { position: absolute; border: 1px solid rgba(255,255,255,.12); background: rgba(227,30,36,.72); backdrop-filter: blur(15px); border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,.2); } .members-card { left: 12px; bottom: 40px; width: 154px; padding: 14px; display: grid; } .data-card small { color: #cfcfcf; font-size: 8px; letter-spacing: .1em; font-weight: 800; }.members-card strong { font-size: 26px; line-height: 1.3; } .mini-bars { display: flex; gap: 4px; height: 21px; align-items: end; margin-top: 3px; }.mini-bars i { width: 10px; background: var(--yellow); border-radius: 2px; opacity: .8; }.mini-bars i:nth-child(1){height:7px}.mini-bars i:nth-child(2){height:13px}.mini-bars i:nth-child(3){height:10px}.mini-bars i:nth-child(4){height:18px}.mini-bars i:nth-child(5){height:21px} .live-card { right: 12px; top: 58px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }.live-card div { display: grid; }.live-card strong { font-size: 12px; color: #fff; }.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,196,0,.14), 0 0 15px var(--yellow); } .quick-dock { position: relative; z-index: 4; transform: translateY(36px); display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.1); background: rgba(227,30,36,.94); box-shadow: 0 22px 55px rgba(0,0,0,.27); border-radius: 19px; backdrop-filter: blur(20px); overflow: hidden; } .quick-dock a { min-height: 96px; display: flex; align-items: center; gap: 13px; padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.09); transition: .2s; } .quick-dock a:last-child { border-right: 0; }.quick-dock a:hover { background: rgba(255,255,255,.05); } /* The glyph, not the chip. These symbols -- U+2316, U+25CE, U+261E, U+25A1 -- draw well inside their em box, much smaller than a letter does at the same font-size, so 18px in a 40px chip left the red mark floating in yellow. 26px fills the chip without the square and the hexagon touching its corners, measured against all four rather than set for the roundest one. line-height: 1 for the same reason the Connect AP chips needed it: each of these occupies a different slice of its em, so at the inherited line-height place-items centres the line box and the marks sit at four different heights. */ .dock-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,196,0,.1); color: var(--yellow); font-size: 26px; line-height: 1; } .quick-dock a > span:nth-child(2) { display: grid; }.quick-dock strong { font-size: 12px; }.quick-dock small { color: #cdcdcd; font-size: 10px; margin-top: 4px; }.quick-dock b { margin-left: auto; color: var(--yellow); font-size: 15px; } /* Common section */ .section { padding: 112px 0; } .section-heading { margin-bottom: 48px; } .section-kicker { color: #787878; } .section-kicker::before { content: ""; width: 18px; height: 2px; background: var(--yellow); } .section-kicker.light { color: #e4e4e4; } .section-heading h2, .vision-copy h2, .join-layout h2 { margin: 14px 0 0; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -.045em; } .section-heading h2 span { color: #8f8f8f; } .section-heading p { color: var(--text); max-width: 560px; margin: 0; font-size: 16px; } .split-heading { display: flex; justify-content: space-between; align-items: end; gap: 70px; }.split-heading p { padding-bottom: 6px; } .centered { text-align: center; max-width: 750px; margin: 0 auto 50px; }.centered .section-kicker { justify-content: center; }.centered p { margin: 18px auto 0; } .heading-with-action { display: flex; justify-content: space-between; align-items: end; }.text-link { font-weight: 800; font-size: 13px; padding-bottom: 10px; }.text-link span { color: #FFC400; margin-left: 8px; } /* Network */ .network-section { background: #fff; padding-top: 145px; } .network-panel { display: grid; grid-template-columns: 1.35fr .65fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 430px; box-shadow: var(--shadow); } .future-grid-light { background-color: #fafafa; background-image: linear-gradient(rgba(227,30,36,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(227,30,36,.045) 1px, transparent 1px); background-size: 40px 40px; } .map-panel { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--line); } .map-panel::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(255,196,0,.13), transparent 67%); } .world-map { width: 88%; height: 270px; position: relative; filter: drop-shadow(0 12px 28px rgba(227,30,36,.07)); } .map-land { position: absolute; background: #ececec; border: 1px solid #dbdbdb; } .l1{width:23%;height:38%;left:3%;top:17%;border-radius:61% 39% 52% 48% / 53% 44% 56% 47%;transform:rotate(-12deg)} .l2{width:12%;height:39%;left:25%;top:43%;border-radius:44% 56% 60% 40% / 35% 42% 58% 65%;transform:rotate(10deg)} .l3{width:18%;height:23%;left:41%;top:18%;border-radius:63% 37% 61% 39% / 49% 47% 53% 51%} .l4{width:27%;height:42%;right:8%;top:18%;border-radius:43% 57% 55% 45% / 46% 38% 62% 54%;transform:rotate(7deg)} .l5{width:11%;height:17%;right:9%;bottom:10%;border-radius:55% 45% 58% 42% / 57% 45% 55% 43%;transform:rotate(-14deg)} .mn1{left:13%;top:31%}.mn2{left:28%;top:52%;animation-delay:.6s}.mn3{left:47%;top:27%;animation-delay:1.2s}.mn4{right:35%;top:32%;animation-delay:.9s}.mn5{right:20%;top:46%;animation-delay:.3s}.mn6{right:11%;bottom:22%;animation-delay:1.5s}.mn7{right:27%;bottom:31%;animation-delay:.7s} .chapter-finder { padding: 38px; }.chapter-finder h3 { font-size: 25px; line-height: 1.25; letter-spacing: -.03em; margin: 15px 0 8px; }.chapter-finder p { color: var(--text); font-size: 13px; margin: 0 0 24px; }.chapter-finder label { display: grid; gap: 7px; font-size: 10px; font-weight: 800; color: #696969; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 15px; }.chapter-finder select { appearance: none; border: 1px solid var(--line); border-radius: 10px; height: 48px; padding: 0 38px 0 14px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236b7788' stroke-width='1.5' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat calc(100% - 14px) center; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .stats-strip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 18px; margin-top: 22px; overflow: hidden; } .stats-strip article { min-height: 122px; display: flex; align-items: center; justify-content: center; gap: 16px; border-right: 1px solid var(--line); }.stats-strip article:last-child { border: 0; }.stat-icon { color: #FFC400; font-size: 26px; line-height: 1; width: 41px; height: 41px; display: grid; place-items: center; background: #FFC400; border-radius: 12px; }.stats-strip article div { line-height: 1; }.stats-strip strong { font-size: 32px; letter-spacing: -.04em; }.stats-strip b { font-size: 20px; }.stats-strip small { display: block; color: var(--muted); font-size: 10px; margin-top: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; } /* Services */ .services-section { background: var(--surface); } .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .service-card { position: relative; padding: 31px; background: white; border: 1px solid var(--line); border-radius: 18px; min-height: 274px; transition: transform .25s ease, box-shadow .25s ease, border .25s; overflow: hidden; } .service-card::before { content: ""; position: absolute; left: 31px; top: 0; height: 3px; width: 45px; background: var(--yellow); border-radius: 0 0 4px 4px; }.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #dcdcdc; }.service-number { position: absolute; right: 25px; top: 20px; color: #e4e4e4; font-size: 12px; font-weight: 800; }.service-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #FFC400; background: #FFC400; border-radius: 13px; color: #FFC400; font-size: 18px; }.service-card h3 { font-size: 18px; margin: 24px 0 10px; letter-spacing: -.02em; }.service-card p { color: var(--text); font-size: 13px; margin: 0; max-width: 290px; }.service-card a { position: absolute; left: 31px; bottom: 26px; font-size: 11px; font-weight: 800; }.service-card a span { color: #FFC400; margin-left: 6px; } /* Vision */ .vision-section { position: relative; background: var(--charcoal); color: white; overflow: hidden; } .vision-grid-overlay { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, #000, transparent 86%); } .vision-section::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -220px; top: 5%; background: radial-gradient(circle, rgba(227,30,36,.12), transparent 70%); } .vision-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 85px; } .vision-portrait { position: relative; }.portrait-placeholder { height: 530px; border-radius: 26px; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 50% 25%, #555555, #EE4B4F 50%, #E31E24); border: 1px solid rgba(255,255,255,.09); overflow: hidden; box-shadow: 0 30px 75px rgba(0,0,0,.32); }.portrait-placeholder::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(255,196,0,.15); border-radius: 50% 50% 15% 15%; background: radial-gradient(ellipse at 50% 85%, rgba(255,196,0,.12), transparent 60%); }.portrait-placeholder span { position: relative; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.55); }.portrait-placeholder small { position: relative; color: rgba(255,255,255,.35); margin-top: 8px; font-size: 9px; }.portrait-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 16px 19px; border: 1px solid rgba(255,255,255,.1); background: rgba(227,30,36,.73); backdrop-filter: blur(14px); border-radius: 13px; display: grid; }.portrait-caption strong { font-size: 12px; }.portrait-caption small { color: #cfcfcf; font-size: 9px; margin-top: 4px; }.vision-copy h2 { max-width: 680px; }.vision-copy > p { color: #dddddd; max-width: 590px; font-size: 16px; margin: 24px 0; }.vision-copy blockquote { border-left: 2px solid var(--yellow); padding: 4px 0 4px 20px; margin: 28px 0 34px; color: #ffffff; font-size: 17px; font-weight: 600; max-width: 560px; } /* Updates */ .updates-section { background: white; } .filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -17px 0 28px; }.filter-row button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 8px 15px; color: var(--text); font-size: 10px; font-weight: 700; cursor: pointer; }.filter-row button.active { background: var(--charcoal); color: white; border-color: var(--charcoal); } .news-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; }.featured-news { display: grid; grid-template-columns: 1.06fr .94fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; min-height: 390px; }.news-image { position: relative; min-height: 100%; overflow: hidden; }.tech-image { background: radial-gradient(circle at 67% 44%, rgba(255,196,0,.34), transparent 12%), radial-gradient(circle at 50% 50%, #EE4B4F, #E31E24 65%); }.tech-image::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }.tech-rings { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255,196,0,.4); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 35px rgba(255,196,0,.04), 0 0 0 70px rgba(255,196,0,.03); }.tech-rings::before, .tech-rings::after { content: ""; position: absolute; width: 9px; height: 9px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 15px var(--yellow); }.tech-rings::before { left: 14px; top: 60px; }.tech-rings::after { right: 25px; bottom: 38px; }.image-tag { position: absolute; z-index: 2; left: 20px; top: 20px; background: var(--yellow); color: var(--charcoal); padding: 7px 10px; font-size: 8px; font-weight: 900; letter-spacing: .1em; border-radius: 6px; }.news-content { padding: 34px; align-self: center; }.news-meta { color: #FFC400; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.news-content h3 { font-size: 27px; line-height: 1.24; letter-spacing: -.035em; margin: 13px 0; }.news-content p { color: var(--text); font-size: 13px; }.news-content a { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 800; }.news-content a span { color: #FFC400; margin-left: 7px; }.small-news-stack { display: grid; grid-template-rows: repeat(3,1fr); gap: 12px; }.small-news { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 120px 1fr; gap: 17px; align-items: center; transition: .2s; }.small-news:hover { transform: translateX(3px); box-shadow: 0 12px 35px rgba(227,30,36,.06); }.small-thumb { height: 100px; border-radius: 11px; background-color: var(--charcoal-mid); position: relative; overflow: hidden; }.small-thumb::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 17px 17px; }.thumb-one { background: radial-gradient(circle at 35% 40%, rgba(255,196,0,.45), transparent 18%), #EE4B4F; }.thumb-two { background: radial-gradient(circle at 70% 50%, rgba(227,30,36,.34), transparent 24%), #EE4B4F; }.thumb-three { background: radial-gradient(circle at 45% 55%, rgba(227,30,36,.36), transparent 24%), #EE4B4F; }.small-news h3 { font-size: 13px; line-height: 1.4; margin: 5px 0; letter-spacing: -.01em; }.small-news small { color: var(--muted); font-size: 9px; } /* Events */ .events-section { background: var(--surface); } .event-list { display: grid; gap: 12px; }.event-card { min-height: 114px; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; border: 1px solid var(--line); background: white; border-radius: 17px; padding: 13px 20px 13px 13px; transition: .2s; }.event-card:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(227,30,36,.07); }.event-date { height: 86px; border-radius: 13px; background: var(--charcoal); color: white; display: grid; place-content: center; text-align: center; line-height: 1; }.event-date strong { font-size: 29px; }.event-date span { font-size: 9px; color: var(--yellow); font-weight: 900; margin-top: 7px; letter-spacing: .11em; }.event-info { padding-left: 25px; }.event-type { color: #FFC400; background: #FFC400; border-radius: 999px; padding: 5px 8px; font-size: 7px; letter-spacing: .1em; font-weight: 900; }.event-type.online { color: #FFC400; background: #FFC400; }.event-info h3 { margin: 10px 0 4px; font-size: 17px; }.event-info p { margin: 0; color: var(--muted); font-size: 11px; }.event-actions { display: flex; align-items: center; gap: 25px; }.event-actions > a:first-child { font-size: 10px; font-weight: 800; color: var(--text); } /* Join/footer */ .join-section { position: relative; color: white; padding: 85px 0; overflow: hidden; }.join-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(227,30,36,.99), rgba(227,30,36,.72)); }.join-glow { position: absolute; width: 390px; height: 390px; border-radius: 50%; background: rgba(255,196,0,.18); filter: blur(80px); right: -120px; top: -100px; }.join-layout { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 50px; }.join-layout h2 { margin-top: 12px; }.join-layout p { color: #e6e6e6; max-width: 650px; margin: 18px 0 0; }.join-actions { display: flex; gap: 12px; flex-shrink: 0; } .site-footer { background: #E31E24; color: white; padding: 65px 0 22px; }.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: 60px; }.footer-brand p { color: #cfcfcf; font-size: 12px; margin-top: 19px; }.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 12px; }.footer-grid > div > strong { font-size: 11px; margin-bottom: 8px; }.footer-grid > div > a { color: #cfcfcf; font-size: 11px; }.footer-grid > div > a:hover { color: white; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 50px; padding-top: 21px; display: flex; justify-content: space-between; color: #bdbdbd; font-size: 9px; } /* Animation */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: translateY(0); } @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition-duration: .001ms !important; }.reveal { opacity: 1; transform: none; } } /* Responsive */ @media (max-width: 1050px) { .primary-nav { gap: 17px; }.primary-nav .login-link { display: none; } .hero-layout { grid-template-columns: 1fr 1fr; gap: 20px; }.hero-visual { transform: scale(.87); transform-origin: center; } .quick-dock { grid-template-columns: repeat(2,1fr); }.quick-dock a:nth-child(2) { border-right: 0; }.quick-dock a:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); } .network-panel { grid-template-columns: 1.15fr .85fr; }.chapter-finder { padding: 30px; } .service-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 820px) { .site-header { background: rgba(227,30,36,.89); backdrop-filter: blur(16px); }.nav-wrap { height: 74px; } .menu-toggle { display: block; }.primary-nav { position: absolute; left: 20px; right: 20px; top: 68px; padding: 18px; background: #E31E24; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 22px 55px rgba(0,0,0,.3); border-radius: 15px; display: none; flex-direction: column; align-items: stretch; gap: 0; }.primary-nav.open { display: flex; }.primary-nav a, .primary-nav button { padding: 12px; text-align: left; }.primary-nav > a.active::after { display: none; }.primary-nav .btn { margin-top: 7px; } .hero { padding-top: 115px; min-height: auto; }.hero-layout { grid-template-columns: 1fr; text-align: center; }.hero-copy { display: grid; justify-items: center; }.hero h1 { font-size: clamp(43px, 10vw, 62px); }.hero-visual { height: 515px; transform: scale(.85); margin-top: -20px; }.quick-dock { transform: translateY(42px); } .section { padding: 88px 0; }.network-section { padding-top: 125px; }.split-heading, .heading-with-action { display: block; }.split-heading p { margin-top: 20px; }.heading-with-action .text-link { display: inline-block; margin-top: 16px; } .network-panel { grid-template-columns: 1fr; }.map-panel { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); } .stats-strip { grid-template-columns: repeat(2,1fr); }.stats-strip article:nth-child(2) { border-right: 0; }.stats-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .vision-layout { grid-template-columns: 1fr; }.portrait-placeholder { height: 460px; }.vision-copy { padding-bottom: 15px; } .news-grid { grid-template-columns: 1fr; }.featured-news { min-height: 370px; } .join-layout { display: block; }.join-actions { margin-top: 30px; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }.footer-brand { grid-column: 1/-1; } } @media (max-width: 580px) { .container { width: min(calc(100% - 28px), var(--container)); }.brand-copy small { display: none; } .hero { padding-top: 105px; }.hero h1 { font-size: 42px; }.hero-lead { font-size: 15px; }.hero-actions { width: 100%; flex-direction: column; }.hero-actions .btn { width: 100%; }.trust-row { text-align: left; } .hero-visual { transform: scale(.67); height: 415px; margin: -45px -80px 0; }.quick-dock { grid-template-columns: 1fr; }.quick-dock a { min-height: 82px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09) !important; }.quick-dock a:last-child { border-bottom: 0 !important; } .section-heading h2, .vision-copy h2, .join-layout h2 { font-size: 36px; }.section { padding: 76px 0; } .network-section { padding-top: 120px; }.network-panel { border-radius: 17px; }.map-panel { min-height: 290px; }.world-map { height: 210px; }.chapter-finder { padding: 25px; }.select-row { grid-template-columns: 1fr; }.stats-strip { grid-template-columns: 1fr 1fr; }.stats-strip article { min-height: 110px; gap: 10px; }.stats-strip strong { font-size: 27px; }.stat-icon { display: none; } .service-grid { grid-template-columns: 1fr; }.service-card { min-height: 250px; } .portrait-placeholder { height: 420px; }.vision-layout { gap: 50px; }.vision-copy blockquote { font-size: 15px; } .featured-news { grid-template-columns: 1fr; }.news-image { min-height: 230px; }.news-content { padding: 26px; }.news-content h3 { font-size: 23px; }.small-news { grid-template-columns: 96px 1fr; }.small-thumb { height: 90px; } .event-card { grid-template-columns: 70px 1fr; padding-right: 13px; }.event-date { height: 74px; }.event-info { padding-left: 14px; }.event-actions { grid-column: 1/-1; justify-content: flex-end; padding-top: 10px; }.event-info h3 { font-size: 14px; } .join-actions { flex-direction: column; }.join-actions .btn { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }.footer-brand { grid-column: 1/-1; }.footer-bottom { display: grid; gap: 8px; } } /* Yellow–white semantic accents */ .service-card:nth-child(4) .service-icon { border-color: #dddddd; background: var(--gray-soft); color: var(--charcoal); } .service-card:nth-child(4) a { color: var(--charcoal); } .event-card:first-child .event-date { background: var(--charcoal); } .event-card:nth-child(2) .event-date { background: var(--yellow); color: var(--charcoal); } .event-card:nth-child(2) .event-date span { color: var(--charcoal); } .event-card:nth-child(3) .event-date { background: var(--charcoal); } .event-type.urgent { color: var(--charcoal); background: var(--gray-soft); } /* ========================================================= YELLOW + WHITE IMAGE SLIDER HOMEPAGE WITH SOFT RED PHOTOGRAPH OVERLAYS Replace assets/slide-1.svg, slide-2.svg, and slide-3.svg with approved 1600x900 photographs while keeping filenames. ========================================================= */ .home-slider-shell { position: relative; background: var(--white); padding-bottom: 54px; } .hero-slider { position: relative; height: clamp(610px, 76vh, 790px); min-height: 610px; overflow: hidden; background: var(--charcoal); } .hero-slides, .hero-slide { position: absolute; inset: 0; } .hero-slide { opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s ease; } .hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .hero-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.025); transition: transform 7s ease; } .hero-slide.is-active > img { transform: scale(1); } .slide-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(214, 72, 72, .10) 8%, rgba(190, 48, 48, .18) 44%, rgba(142, 24, 24, .52) 76%, rgba(112, 16, 16, .66) 100% ); } .slide-caption-wrap { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: 82px; } .slide-caption { color: var(--white); width: min(850px, 86%); border-left: 6px solid var(--yellow); border-radius: 0 18px 18px 0; padding: 20px 24px 20px 26px; background: linear-gradient(90deg, rgba(132, 18, 18, .30), rgba(184, 52, 52, .12)); border-top: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-shadow: 0 3px 24px rgba(92, 0, 0, .34); box-shadow: 0 18px 48px rgba(100, 10, 10, .16); } .slide-kicker { display: inline-block; color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .19em; margin-bottom: 14px; } .slide-caption h1, .slide-caption h2 { margin: 0; color: var(--white); max-width: 800px; font-size: clamp(42px, 5.3vw, 72px); line-height: 1.03; letter-spacing: -.052em; } .slide-caption h1 span, .slide-caption h2 span { color: var(--yellow); } .slide-caption p { max-width: 700px; color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.7; margin: 17px 0 0; } .slide-actions { display: flex; gap: 13px; margin-top: 24px; } .slider-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.46); background: rgba(164, 36, 36, .34); color: white; font-size: 33px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); transition: .2s; } .slider-arrow:hover { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); } .slider-prev { left: 24px; }.slider-next { right: 24px; } .slider-dots { position: absolute; z-index: 5; right: max(28px, calc((100vw - var(--container))/2 + 20px)); bottom: 38px; display: flex; align-items: center; gap: 9px; } .slider-dots button { width: 9px; height: 9px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.58); cursor: pointer; transition: .25s; } .slider-dots button.is-active { width: 34px; background: var(--yellow); } /* Publication credit on a slide, centred along the top edge. It lives inside its slide, so it fades in and out with it. */ .slide-source { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(18,18,18,.38); backdrop-filter: blur(8px); color: var(--white); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: .2s; } .slide-source:hover, .slide-source:focus-visible { background: var(--yellow); border-color: var(--yellow); color: var(--charcoal); } @media (max-width: 820px) { .slide-source { top: 18px; font-size: 10.5px; padding: 6px 11px; } } .quick-dock-light { margin-top: -34px; transform: none; background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); } .quick-dock-light a { border-right-color: var(--line); } .quick-dock-light a:hover { background: var(--yellow-soft); } .quick-dock-light small { color: var(--text); } .quick-dock-light b { color: var(--charcoal); } .quick-dock-light .dock-icon, .quick-dock-light a:nth-child(2) .dock-icon, .quick-dock-light a:nth-child(3) .dock-icon, .quick-dock-light a:nth-child(4) .dock-icon { color: var(--charcoal); background: var(--yellow); } /* Yellow/white homepage treatment; dark neutrals are retained for readable contrast. */ .future-grid { background-color: var(--charcoal); } .site-header.scrolled .primary-nav > a:not(.btn):hover, .site-header.scrolled .primary-nav > a.active { color: var(--charcoal); } .btn-yellow { color: var(--charcoal); } .btn-dark, .btn-red { background: var(--charcoal); color: var(--white); box-shadow: 0 10px 26px rgba(0,0,0,.16); } .btn-dark:hover, .btn-red:hover { background: #000; } .service-card::before, .service-card:nth-child(3n+2)::before, .service-card:nth-child(3n)::before { background: var(--yellow); } .service-card .service-icon, .service-card:nth-child(3n+2) .service-icon, .service-card:nth-child(3n) .service-icon, .service-card:nth-child(4) .service-icon { border-color: #FFC400; background: var(--yellow-soft); color: var(--charcoal); } .service-card:nth-child(4) a { color: var(--charcoal); } .stats-strip article .stat-icon, .stats-strip article:nth-child(2) .stat-icon, .stats-strip article:nth-child(3) .stat-icon, .stats-strip article:nth-child(4) .stat-icon { color: var(--charcoal); background: var(--yellow-soft); } .future-grid-light { background-image: linear-gradient(rgba(227,30,36,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(227,30,36,.045) 1px, transparent 1px); } .vision-section { background: var(--charcoal); } .vision-section::after { background: radial-gradient(circle, rgba(255,196,0,.15), transparent 70%); } .tech-image { background: radial-gradient(circle at 67% 44%, rgba(255,196,0,.55), transparent 14%), radial-gradient(circle at 50% 50%, #F58487, #E31E24 67%); } .small-thumb, .thumb-one, .thumb-two, .thumb-three { background-color: var(--charcoal-mid); } .thumb-one { background: radial-gradient(circle at 35% 40%, rgba(255,196,0,.55), transparent 18%), #EE4B4F; } .thumb-two { background: radial-gradient(circle at 70% 50%, rgba(255,196,0,.28), transparent 24%), #EE4B4F; } .thumb-three { background: radial-gradient(circle at 45% 55%, rgba(255,196,0,.34), transparent 24%), #EE4B4F; } .event-card:first-child .event-date, .event-card:nth-child(3) .event-date { background: var(--charcoal); } .event-card:nth-child(2) .event-date { background: var(--yellow); color: var(--charcoal); } .event-type.urgent { color: var(--charcoal); background: var(--yellow-soft); } .join-section::before { background: linear-gradient(90deg, rgba(227,30,36,.99), rgba(227,30,36,.82)); } .join-layout p { color: #d9d9d9; } .site-footer { background: #111; } .footer-brand p, .footer-grid > div > a { color: #cfcfcf; } .footer-bottom { color: #aaa; } @media (max-width: 820px) { .site-header { background: rgba(227,30,36,.34); backdrop-filter: blur(12px); } .primary-nav { background: #E31E24; } .hero-slider { height: 680px; min-height: 680px; } .slide-caption-wrap { padding-bottom: 72px; } .slide-caption { width: calc(100% - 70px); } .slider-arrow { width: 42px; height: 42px; } .quick-dock-light { grid-template-columns: repeat(2,1fr); } .quick-dock-light a:nth-child(-n+2) { border-bottom-color: var(--line); } } @media (max-width: 580px) { .hero-slider { height: 640px; min-height: 640px; } .slide-caption-wrap { padding-bottom: 76px; } .slide-caption { width: 100%; border-left-width: 4px; padding: 18px 18px 18px 17px; border-radius: 0 14px 14px 0; } .slide-caption h1, .slide-caption h2 { font-size: 39px; } .slide-caption p { font-size: 14px; line-height: 1.6; } .slide-actions { flex-direction: column; width: 100%; } .slide-actions .btn { width: 100%; } .slider-arrow { display: none; } .slider-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 27px; } .quick-dock-light { grid-template-columns: 1fr; margin-top: 0; border-radius: 0; width: 100%; } .quick-dock-light a { border-bottom-color: var(--line) !important; } .home-slider-shell { padding-bottom: 0; } } /* ========================================================= PERMANENT WHITE LOGO + NAVIGATION STRIPE ========================================================= */ .site-header, .site-header.scrolled { background: rgba(255, 255, 255, .98); color: var(--ink); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(31, 31, 31, .08); box-shadow: 0 8px 28px rgba(31, 31, 31, .08); } .nav-wrap { height: 88px; } /* The supplied lockup. Height is what matters -- it has to sit inside an 88px header with room to breathe -- so height is set and width follows the artwork's own 720x212 ratio. width:auto rather than a fixed pair, so a replacement lockup of a different shape still fits without editing CSS. */ .brand-lockup { height: 62px; width: auto; max-width: 340px; flex: 0 0 auto; object-fit: contain; display: block; } @media (max-width: 820px) { /* Header drops to 74px here, so the lockup comes down with it. */ .brand-lockup { height: 50px; max-width: 260px; } } @media (max-width: 520px) { .brand-lockup { height: 42px; max-width: 210px; } } .brand-logo { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; border-radius: 50%; display: block; } .footer-brand .brand-logo { width: 42px; height: 42px; } /* Second emblem, sitting on the far side of the wordmark. Shares .brand-logo so it matches the first one's size and circular crop exactly. */ .brand-logo-alt { margin-left: 2px; } /* Below this the header is tight enough that two emblems crowd the wordmark. */ @media (max-width: 980px) { .brand-logo-alt { display: none; } } /* Wordmark typography copied from the live NRI TDP logo lockup: Montserrat 900 for the name, Poppins 500 for the tagline. */ /* Both lines start on one vertical line, as in the logo lockup: the "N" of NRI and the "T" of Telugu share a left edge. */ .brand-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; text-align: left; } .brand-copy strong, .brand-copy small { margin: 0; padding: 0; text-indent: 0; } .brand-copy strong { color: var(--red-primary); /* header "NRI" - brand red on white */ font-family: 'Montserrat', sans-serif; font-weight: 900; /* Sized against the tagline so the two lines come out the same width, which is what makes the lockup read as one block rather than two stacked bits. Montserrat 900 runs ~4.8em wide here, Poppins 500 ~13em, so the wordmark needs to be ~2.7x the tagline. */ font-size: 1.7rem; line-height: 1; letter-spacing: 0; } .brand-copy strong span { color: var(--yellow); /* "TDP" - yellow in header and footer */ text-shadow: 0 1px 1px rgba(0, 0, 0, .18); } .brand-copy small, .footer-brand .brand-copy small { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .62rem; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; } .footer-brand .brand-copy strong { /* Keeps the header's wordmark-to-tagline ratio at the footer's smaller size. */ font-size: 1.5rem; /* Same red as the header wordmark, not the legacy --tdp-red. */ color: var(--red-primary); } .brand-copy small, .site-header.scrolled .brand-copy small { color: var(--muted); } .primary-nav > a:not(.btn), .site-header.scrolled .primary-nav > a:not(.btn) { color: #3f3f3f; } .primary-nav > a:not(.btn):hover, .primary-nav > a.active, .site-header.scrolled .primary-nav > a:not(.btn):hover, .site-header.scrolled .primary-nav > a.active { color: var(--ink); } .primary-nav > a.active::after { background: var(--yellow); height: 3px; width: 24px; bottom: -13px; } .login-link, .site-header.scrolled .login-link { border-left-color: var(--line); } .menu-toggle span:not(.sr-only), .site-header.scrolled .menu-toggle span:not(.sr-only) { background: var(--ink); } /* Keep the slider fully visible below the white stripe — must track the .nav-wrap height exactly, or a gap/overlap appears. */ .home-slider-shell { padding-top: 88px; } @media (max-width: 820px) { .site-header, .site-header.scrolled { background: rgba(255, 255, 255, .99); border-bottom: 1px solid var(--line); box-shadow: 0 7px 24px rgba(31, 31, 31, .09); } .nav-wrap { height: 74px; } .home-slider-shell { padding-top: 74px; } .primary-nav { top: 68px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 22px 55px rgba(31, 31, 31, .18); } .primary-nav > a:not(.btn), .primary-nav .login-link { color: var(--ink); } .primary-nav > a:not(.btn):hover, .primary-nav > a.active { background: var(--yellow-soft); color: var(--ink); border-radius: 9px; } .primary-nav .login-link { border-left: 0; } } /* ========================================================= LEADERSHIP QUOTE CARDS — SLIDE 1 ========================================================= */ .leader-quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; max-width: 100%; } .leader-quote { margin: 0; padding: 16px 18px; border-left: 3px solid var(--yellow); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, rgba(96, 10, 10, .42), rgba(150, 34, 34, .20)); border-top: 1px solid rgba(255, 255, 255, .12); border-right: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); box-shadow: 0 14px 34px rgba(90, 8, 8, .20); } .leader-quote p { margin: 0 0 14px; max-width: none; font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.72; color: rgba(255, 255, 255, .96); /* Reserve four line boxes so the Naidu and Lokesh panels render at an identical height. The longer quote never exceeds four lines, so both boxes stay the same size at every width. em tracks the clamped font-size, keeping this correct as the type scales. */ min-height: calc(1.72em * 4); } .leader-quote cite { display: grid; gap: 3px; font-style: normal; } .leader-quote cite strong { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--yellow); } .leader-quote cite span { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .84); } /* Quote-only slides (Naidu, Lokesh) — a narrow panel on the left, matching the portrait proportions of the reference layout. Kept on the left on purpose: the card is drawn with a yellow left border and its corners are rounded on the right only, so it is built to sit against that edge. Centring it horizontally would leave that border floating mid-frame. */ .slide-caption.quote-caption { width: min(470px, 88%); /* No lift; the wrap centres it instead -- see the rule below. It used to be raised by `max(0px, min(4cm, calc(100svh - --hdr - --dock-hang - --fold-gap - 330px)))`, a budget derived from the viewport on the assumption that the slider is sized from the viewport too. On the home route it is not: `.screen[data-route="home"] .hero-slider` sets `height: auto` with `flex: 1 1 auto`, so its real height comes from the flex column. When that came out short, 82px of wrap padding plus a 151px lift plus the card's own height was more than the slider had, and `overflow: hidden` took the card off the top -- the slide looked empty. Slide 3 had the same fault and the same cause. */ margin-bottom: 0; /* The inner .leader-quote card is the only panel wanted here, so strip the outer .slide-caption panel back to a plain wrapper. */ background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Centre the quote card in the slide rather than measuring it up from the bottom. Centring is what makes it safe: a box centred in its container cannot be clipped by that container while it is shorter than it, whatever height the flex column hands the slider. The bottom padding goes with it -- left in place it would push the card above centre by half of itself. Matched on the caption rather than on :nth-child so the rule follows the quote slide if the slides are ever reordered. Where :has() is missing the card falls back to sitting on the wrap's bottom baseline, which is still in frame -- the failure mode is a different position, not a lost card. */ .slide-caption-wrap:has(.quote-caption) { align-items: center; padding-bottom: 0; } @media (max-width: 900px) { .leader-quotes { grid-template-columns: 1fr; gap: 10px; } .leader-quote { padding: 13px 14px; } .leader-quote p { font-size: 16px; line-height: 1.55; margin-bottom: 11px; } .slide-caption.quote-caption { width: 100%; } } /* ========================================================= SLIDER CAPTION POSITIONING FIX `.slide-caption-wrap` was `position: relative`, so it stayed in normal flow and stacked BELOW the slide's full-height instead of over it. `.hero-slider` has `overflow: hidden`, so every caption was clipped out of view — and because it never intersected the viewport, the reveal observer never added `.visible` to slide 1's caption either. Overlaying it on the image restores all three captions. ========================================================= */ .slide-caption-wrap { position: absolute; inset: 0; height: auto; } /* ========================================================= SLIDE 3 — TELUGU TITLE ========================================================= */ .slide-caption.title-caption { width: min(720px, 90%); /* No lift. The slogan sits on the same baseline as the other slides' captions -- the wrap is bottom-aligned with 82px of padding, which also clears the 34px the dock overlaps the slider by. It used to be lifted 4.5cm, capped by `calc(100svh - --hdr - --dock-hang - --fold-gap - 300px)` so the lift "can never push the slogan off the top". That cap described a slider sized from the viewport, and on the home route it is not one: `.screen[data-route="home"] .hero-slider` sets `height: auto` with `flex: 1 1 auto`, so the real height comes from the flex column and can be far short of what the formula assumed. When it was, 82px of padding plus a 170px lift plus the slogan's own two lines and attribution came to more than the slider had, and `overflow: hidden` took the text off the top -- the slide looked empty. Measuring from the bottom edge instead of from a viewport guess is what makes this safe: the caption is now positioned against the box it is actually inside, so it cannot leave it. If a lift is ever wanted back, cap it against the slider's own height (a % or a container query), never against svh. .quote-caption on slide 2 is still built the old way. */ margin-bottom: 0; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Must out-specify the base `.slide-caption h2 { color: var(--white) }` rule, otherwise the first line of the slogan renders white. */ .slide-caption h2.telugu-title { margin: 0; max-width: none; font-family: 'Noto Sans Telugu', sans-serif; font-weight: 700; /* Telugu needs normal tracking and looser leading than the Latin headings — the theme's -.052em would collide the vowel signs. */ letter-spacing: 0; line-height: 1.45; font-size: clamp(30px, 3.1vw, 50px); color: var(--yellow); text-shadow: 0 4px 28px rgba(70, 0, 0, .55); } .slide-caption h2.telugu-title .line-2 { display: block; color: var(--yellow); } /* Quotation marks match the slogan — the whole title is yellow. */ .slide-caption h2.telugu-title .qmark { color: var(--yellow); } /* Attribution line beneath the slogan. */ .telugu-attrib { margin: 20px 0 0; max-width: none; font-family: 'Noto Sans Telugu', sans-serif; font-weight: 500; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65; color: var(--white); text-shadow: 0 3px 20px rgba(70, 0, 0, .5); } .telugu-attrib strong { font-weight: 700; color: var(--white); } @media (max-width: 900px) { .slide-caption.title-caption { width: 100%; } .slide-caption h2.telugu-title { font-size: 27px; line-height: 1.5; } .telugu-attrib { font-size: 14px; margin-top: 14px; } } /* ========================================================= INTERACTIVE WORLD MAP Real per-country geometry (173 countries). Countries render black; hover, keyboard focus or click fills them yellow. ========================================================= */ .world-map { width: 100%; height: 100%; /* Every edge pulls in 2cm, so the map sits smaller and centred inside the panel. Even padding on all four sides, rather than the old 26px/30px/54px, which was uneven because the bottom strip had to clear the legend that no longer exists. */ padding: 2cm; display: grid; place-items: center; filter: none; } .world-svg { width: 100%; height: 100%; display: block; overflow: visible; } .world-svg .cty { /* Cement grey (#8f8f8f, from `.section-heading h2 span`) taken 50% deeper. */ fill: #474747; /* Hairline separator so neighbouring black countries stay readable. */ stroke: #fafafa; stroke-width: .35; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .18s ease; outline: none; } .world-svg .cty:hover, .world-svg .cty:focus-visible, .world-svg .cty.is-selected { fill: var(--yellow); } .world-svg .cty:focus-visible { stroke: var(--charcoal); stroke-width: 1; } /* The decorative radial wash sat behind the fake blobs; it muddies the solid country fills, so tone it down. */ .map-panel::before { opacity: .5; } @media (max-width: 820px) { /* 2cm a side would eat most of a phone's width, so the inset halves. */ .world-map { padding: 1cm; } } /* ========================================================= SLIDER FILLS THE FOLD The hero occupies the viewport minus the fixed header, minus however much of the quick-dock hangs below the slider, minus a margin under the dock. These are declared as variables because the dock REFLOWS: it is one row (98px) only above 1050px. Below that it becomes two rows (194px) and on small phones four rows (330px), so a single hardcoded allowance left the dock 56-330px below the fold. Change a number here, not in four places. ========================================================= */ :root { /* Gold bar (88px) + a 3px red flag-edge. --hdr reserves that space (body padding-top and the hero height math both read it). */ --hdr: 91px; /* The headline ticker sits between the header and the slider, so it comes off the fold like the header does. Kept as its own variable because only Home carries it, and its height changes on small screens. */ --ticker-h: 38px; --dock-hang: 64px; /* dock 98px tall, overlapping the slider by 34px */ --fold-gap: 40px; /* white margin under the dock */ /* Floor: a share of the viewport as well as a pixel minimum. Zoom shrinks the CSS viewport while the header/dock stay a fixed pixel size, so a purely pixel floor let the photo collapse to ~56% of the screen at 200% zoom. The photo keeps priority over the dock when space is tight. */ --hero-min: max(360px, 52svh); } @media (min-width: 901px) and (max-width: 1050px) { /* The theme reflowed the dock to 2 rows below 1050px, doubling its height to 194px and taking ~100px off the photo. Four cards still fit down to 900px, which keeps the hero tall when the page is zoomed. */ .quick-dock { grid-template-columns: repeat(4, 1fr); } .quick-dock a { border-bottom: 0 !important; } } @media (max-width: 900px) { :root { --dock-hang: 160px; --hero-min: max(300px, 52svh); } /* dock is 2 rows */ } @media (max-width: 820px) { :root { --hdr: 77px; } } @media (max-width: 580px) { /* Dock is 4 stacked rows (330px) here, with no overlap onto the slider. */ :root { --dock-hang: 330px; --hero-min: max(280px, 45svh); } } .hero-slider { height: max(var(--hero-min), calc(100vh - var(--hdr) - var(--ticker-h) - var(--dock-hang) - var(--fold-gap))); /* svh = the viewport with mobile browser chrome shown, so the dock is not pushed off-screen on first paint on iOS/Android. */ height: max(var(--hero-min), calc(100svh - var(--hdr) - var(--ticker-h) - var(--dock-hang) - var(--fold-gap))); min-height: 0; } /* The prev arrow sits at the slider's left edge at mid-height, where it runs into the left-aligned caption panels of slides 2 and 3. Indent those two clear of it. Slide 1's panel sits mid-frame and is unaffected. The arrow's geometry sets the number: .slider-prev is 48px wide at left: 24px, so its right edge is 72px in from the slider. The narrowest gutter these captions ever sit at is 20px -- .container is `min(100% - 40px, --container)`, so below 1240px the gutter is a flat 20px -- and 20 + 72 leaves the caption starting 92px in, 20px past the arrow. The upper bound this used to carry (max-width: 1375px) was wrong twice over. --container is not fixed: it steps to 1440px at 1600px viewport and again at 2000px and 2600px, so the gutter does not simply keep growing past 1375px. At a 1600px window it is back down to 80px, which clears the arrow by 8px -- a hair's breadth for a 48px disc with a border and a blur behind it, and the caption sat right in its path. Slide 2 made it plainer still once its card was centred vertically, because that put the card at exactly the arrow's own mid-height band. So the indent now applies at every width that has an arrow. Below 821px `.slider-arrow` is `display: none`, so there is nothing to clear and the captions take the full gutter. */ @media (min-width: 821px) { .hero-slide:not(:first-child) .quote-caption, .title-caption { margin-left: 72px; } } /* The quick-dock is back, so the space below the slider is occupied again and the original spacing applies (the dock overlaps the slider by 34px). */ .home-slider-shell { padding-bottom: var(--fold-gap); } .network-section { padding-top: 96px; } @media (max-width: 820px) { .home-slider-shell { padding-bottom: 0; } .network-section { padding-top: 120px; } } /* ========================================================= KEEP HEADS IN FRAME The slide photos are 1672x941 (aspect 1.78) but the slider box is 2.0-2.6 wide, so `object-fit: cover` scales to width and crops vertically. The default `object-position: 50% 50%` splits that crop evenly, taking ~55px off the top at 1600x900 and ~109px at 1240x560 — right through the subjects' heads, which sit near the top of every shot. Anchoring the top edge moves the whole crop to the bottom (road/crowd) instead. ========================================================= */ .hero-slide > img { object-position: 50% 0%; } /* Slide 1 sits 1.5cm higher than the other two. The extra 1.5cm of height backfills the bottom, so the shift can never expose a gap — at some window shapes `cover` produces no vertical overflow to crop into. */ /* ========================================================= SLIDE 1 CAPTION — SEATED BETWEEN NAIDU AND THE BUDDHA STATUE The replacement photo puts Naidu left of centre (his shoulder ends around 50% of the frame) and the Dhyana Buddha around 81%. The default left-aligned panel landed on his chin, so slide 1's panel is placed in the open sky/city band between the two. Width is capped as a percentage so it shrinks to stay inside that band on narrower windows instead of running into the statue. ========================================================= */ @media (min-width: 821px) { .hero-slide:first-child .slide-caption-wrap { width: 100%; max-width: none; } .hero-slide:first-child .quote-caption { /* 1cm smaller on every side: 2cm off the width, and the padding and type below take the same off the height. Then 2cm left and 3cm down (the lift cap drops from 4cm to 1cm, which lowers it by 3cm). */ width: min(calc(470px - 2cm), 34%); margin-left: calc(50% - 2cm); margin-bottom: max(0px, min(1cm, calc(100svh - var(--hdr) - var(--dock-hang) - var(--fold-gap) - 330px))); } .hero-slide:first-child .leader-quote { padding: 10px 12px; } .hero-slide:first-child .leader-quote p { font-size: clamp(13px, 1vw, 16px); line-height: 1.6; margin-bottom: 9px; min-height: calc(1.6em * 4); } .hero-slide:first-child .leader-quote cite strong { font-size: 14px; } .hero-slide:first-child .leader-quote cite span { font-size: 11px; } } /* All slides show their photographs untinted — no red gradient wash. */ .slide-overlay { background: none; } /* ========================================================= PER-SLIDE FRAMING `cover` scales each photo to the box width and crops the rest vertically, and how much varies enormously with the window. The three are not alike: slides 2 and 3 are 4:3 (1448x1086), slide 1 is 16:9 (1672x941), and their subjects sit at very different heights, so a single shared value would be dragged down to the tightest of them. Each is given its own, checked so the crop never reaches that subject's head at any screen size. slide 1 head 40% down, printed type 56%-78% -> 68% slide 2 head 24.1% down, 63.3% across -> 30% slide 3 3 faces spanning 36.6%-72% -> 57% Slide 1 is the constrained one, because it has to hold two things at once: the Chief Minister's head, 40% down on the left, and the printed headline and standfirst, which run from 56% to 78% on the right. The crop window has to contain that whole 40%-78% band, so unlike a face it cannot simply be avoided from one side. Being 16:9 the slide loses less height to `cover` than the other two -- about 32% in a 2.6:1 box against their 50% -- which is what makes the band fit at all. Solving both edges at once leaves a usable window of 53%-83%, the binding case being a wide, short laptop at roughly 3.4:1 where only half the picture survives. 68% sits in the middle of that window, and on an ordinary window it also keeps the Buddha statue and the construction work along the bottom. ========================================================= */ .hero-slide:nth-child(1) > img { object-position: 50% 68%; } .hero-slide:nth-child(2) > img { object-position: 50% 30%; } /* Slide 3 carries three faces that must all stay whole. NTR's turban starts 36.6% down and the lowest chin sits near 72%, so the crop has to contain that entire band, not merely avoid the top of it. Solving both constraints at every screen size leaves a usable window of 53.3%-61.0% (the binding case is a wide, short window, where only 40% of the photo survives). 57% sits in the middle of that window. */ .hero-slide:nth-child(3) > img { object-position: 50% 57%; } /* Slide 2 raised until Lokesh's hair meets the top edge of the slider, just under the header. Derived rather than guessed: his hair starts 24.13% down the photo, and the photo is 4:3, so its scaled height is 0.75 x the box width. His hairline therefore sits 0.2413 x 0.75 = 0.181 x box width from the top, whatever the screen. The box is full-bleed, so that is 18.1vw less the scrollbar; the +6.7px leaves a constant ~4px so the hair is never actually clipped. Negative because a length in object-position measures the image's top edge DOWN from the box's - a positive value would open a gap instead. 16/10 and wider only: on a squarer box `cover` leaves no vertical overflow to move into, and the offset would expose a gap at the bottom. */ @media (min-aspect-ratio: 16/10) { .hero-slide:nth-child(2) > img { object-position: 50% calc(6.7px - 18.1vw); } } /* ========================================================= ANCHOR LANDING The header is fixed, so a plain anchor jump parks the target's top edge underneath it. `scroll-margin-top` offsets each jump by the header height plus a little breathing room. The Chapters / Find My Chapter anchor now sits on the map panel itself rather than the section, so clicking either stops with the panel and locator filling the screen instead of leaving them below the fold. ========================================================= */ #network, #services, #connect-ap, #professional-network, #events, #updates, #about, #join { scroll-margin-top: calc(var(--hdr) + 18px); } /* Connect AP targets the P4 card itself, which sits inside the service grid rather than at a section boundary. Without its own offset the jump stops with the previous section's closing paragraph still filling the top of the screen; this parks the card just under the header instead. */ #connect-ap { scroll-margin-top: calc(var(--hdr) + 24px); } /* Slide 2's panel, 1cm smaller on every side: 2cm off the width, with the padding and type taking the equivalent off the height. */ @media (min-width: 821px) { .hero-slide:nth-child(2) .quote-caption { width: min(calc(470px - 2cm), 88%); } .hero-slide:nth-child(2) .leader-quote { padding: 10px 12px; } .hero-slide:nth-child(2) .leader-quote p { font-size: clamp(13px, 1vw, 16px); line-height: 1.6; margin-bottom: 9px; min-height: calc(1.6em * 4); } .hero-slide:nth-child(2) .leader-quote cite strong { font-size: 14px; } .hero-slide:nth-child(2) .leader-quote cite span { font-size: 11px; } } /* Quote text carries the emphasis; the attribution sits back. Manrope is the theme's own text face, so the quote now sits with the rest of the page rather than reading as a pull-quote lifted from another design, which is how the Lora italic looked. Upright bold also holds up far better than italic serif at this size over a photograph. */ .leader-quote p { font-family: "Lora", Georgia, serif; font-style: normal; font-weight: 700; letter-spacing: 0; } /* The names were asking for Montserrat 500, but only 700/800/900 were being downloaded, so the browser substituted a heavier cut and they stayed bold. The lighter weights are now requested, and 400 sets the names back. */ .leader-quote cite strong { font-weight: 400; } /* One single yellow is now used for every yellow surface. These elements sit ON that surface, so their text/glyph must stay dark or it would vanish - the same yellow-background/charcoal-text pairing .btn-yellow already uses. */ .service-icon, .event-type, .event-type.online, .stat-icon { color: var(--charcoal); } /* ========================================================= RED SURFACE SYSTEM Former charcoal/black visual surfaces now use: Primary red #E31E24 and lighter red #EE4B4F. Neutral ink remains for readable body copy on white. ========================================================= */ .btn-dark, .btn-red { background: var(--red-primary); } .btn-dark:hover, .btn-red:hover { background: var(--red-light); color: #1f1f1f; } .future-grid, .vision-section, .hero-slider { background-color: var(--red-primary); } .site-footer { background: var(--red-primary); } .tech-image { background: radial-gradient(circle at 67% 44%, rgba(255,196,0,.55), transparent 14%), radial-gradient(circle at 50% 50%, var(--red-light), var(--red-primary) 67%); } .small-thumb, .thumb-one, .thumb-two, .thumb-three { background-color: var(--red-light); } .primary-nav.open { background: #ffffff; } @media (max-width: 820px) { .primary-nav { background: #ffffff; } } /* ========================================================= BALANCED COMMON SECTION THEME Vision 2047 and Join the Global Network now follow the same white / soft-surface / yellow-accent language used by the surrounding homepage sections. Red is retained as an accent instead of a full-bleed background. ========================================================= */ /* VISION 2047 — light section with a contained feature card */ .vision-section, .future-grid.vision-section { background: var(--surface); color: var(--ink); overflow: hidden; } .vision-grid-overlay { opacity: .55; background-image: linear-gradient(rgba(31,31,31,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(31,31,31,.028) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, #000, transparent 90%); } .vision-section::after { width: 480px; height: 480px; right: -210px; top: 8%; background: radial-gradient(circle, rgba(255,196,0,.22), transparent 70%); } .vision-layout { padding: 42px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); } .vision-portrait { border-radius: 22px; } .portrait-placeholder { background: radial-gradient(circle at 50% 22%, rgba(255,196,0,.30), transparent 34%), linear-gradient(145deg, #fdfdfd, #FFFBC2 58%, #ffe8e3); border: 1px solid #EAE7BD; box-shadow: 0 22px 55px rgba(31,31,31,.10); } .portrait-placeholder::before { border-color: rgba(227,30,36,.18); background: radial-gradient(ellipse at 50% 85%, rgba(255,196,0,.26), transparent 62%); } .portrait-placeholder span { color: var(--ink); } .portrait-placeholder small { color: var(--muted); } .portrait-caption { border: 1px solid rgba(227,30,36,.14); background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 12px 32px rgba(31,31,31,.09); } .portrait-caption small { color: var(--muted); } .vision-copy .section-kicker.light { color: var(--red-primary); } .vision-copy h2 { color: var(--ink); } .vision-copy > p { color: var(--text); } .vision-copy blockquote { color: var(--ink); background: var(--yellow-soft); border-left: 4px solid var(--yellow); border-radius: 0 14px 14px 0; padding: 18px 20px; } /* JOIN — white/soft-yellow CTA card rather than a full red band */ .join-section { position: relative; color: var(--ink); padding: 88px 0; overflow: hidden; background: linear-gradient(rgba(31,31,31,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(31,31,31,.025) 1px, transparent 1px), var(--surface); background-size: 52px 52px; } .join-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,196,0,.16), rgba(255,255,255,.55) 54%, rgba(238,75,79,.08)); pointer-events: none; } .join-glow { width: 380px; height: 380px; right: -100px; top: -120px; background: rgba(255,196,0,.26); filter: blur(75px); } .join-layout { padding: 42px 46px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: 24px; box-shadow: var(--shadow); } .join-layout::after { content: ""; position: absolute; right: 30px; bottom: 24px; width: 90px; height: 6px; border-radius: 999px; background: var(--red-primary); opacity: .85; } .join-layout .section-kicker.light { color: var(--red-primary); } .join-layout h2 { color: var(--ink); } .join-layout p { color: var(--text); } /* Filled red at rest — what used to be the hover state. */ .join-actions .btn-ghost { color: #ffffff; border-color: var(--red-primary); background: var(--red-primary); backdrop-filter: none; } /* Hover still has to say something, so it lifts to the lighter red the other red buttons use (.btn-dark:hover) rather than staying inert. */ .join-actions .btn-ghost:hover { color: #1f1f1f; border-color: var(--red-light); background: var(--red-light); } @media (max-width: 820px) { .vision-layout, .join-layout { padding: 28px; } .join-layout::after { right: 24px; bottom: 18px; width: 58px; } } @media (max-width: 580px) { .vision-layout, .join-layout { padding: 22px; border-radius: 18px; } .join-section { padding: 72px 0; } } /* ========================================================= MATCHED FOOTER + RED CHAPTER MAP UPDATE Footer now follows the common light theme instead of a full red background. The interactive world map now uses red country fills instead of dark charcoal fills. ========================================================= */ /* Light footer matching the rest of the site */ .site-footer { background: linear-gradient(180deg, #fdfdfd 0%, var(--surface) 100%); color: var(--ink); border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 196, 0, .45); } .footer-grid { gap: 56px; } .footer-brand p, .footer-grid > div > a, .footer-bottom { color: var(--text); } /* Column headings only. The footer wordmark's "NRI" keeps the brand red set above, so it is deliberately not in this selector list. */ .footer-grid > div > strong { color: var(--ink); } .footer-brand .brand-copy strong span { color: var(--yellow); text-shadow: none; } .footer-brand .brand-copy small { color: var(--muted); } .footer-grid > div > a:hover { color: var(--red-primary); } .footer-bottom { border-top: 1px solid var(--line); } /* Global map on Chapters section. Countries rest in brand yellow and fill with the CTA red (--red-primary) on hover, focus or click. The wash behind them follows the resting colour so the panel reads as one piece. */ .map-panel::before { background: radial-gradient(circle, rgba(255, 196, 0, .16), transparent 67%); opacity: .85; } .world-svg .cty { fill: var(--yellow); stroke: #fdfdfd; } .world-svg .cty:hover, .world-svg .cty:focus-visible, .world-svg .cty.is-selected { fill: var(--red-primary); } /* Fill and focus ring can no longer share a colour, so the ring goes dark. */ .world-svg .cty:focus-visible { stroke: var(--ink); stroke-width: 1; } /* ========================================================= MAP COUNTRY TOOLTIP Replaces the browser's native bubble, which was slow to appear, impossible to style, and unreliable on small countries. Positioned by transform from the viewport origin, so it must stay out of the hit-testing path or it would sit under the cursor and flicker. ========================================================= */ .map-tip { position: fixed; top: 0; left: 0; z-index: 120; /* above the fixed header's 100 */ pointer-events: none; padding: 8px 14px; border-radius: 999px; background: rgba(31, 31, 31, .93); color: #fff; font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; box-shadow: 0 10px 30px rgba(31, 31, 31, .28); backdrop-filter: blur(6px); opacity: 0; transition: opacity .14s ease; will-change: transform; } .map-tip.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .map-tip { transition: none; } } /* ========================================================= CHAPTER PROFILE DRAWER Slides in from the left when a country is clicked. Sits above the fixed header (z-index 100) and the map tooltip (120). `visibility` is switched with a zero-length transition delayed to the end of the slide-out, so the panel is genuinely inert once closed rather than parked off-screen and still tabbable. ========================================================= */ .drawer-scrim { position: fixed; inset: 0; z-index: 130; background: rgba(31, 31, 31, .38); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; } .drawer-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; } .country-drawer { position: fixed; top: 0; left: 0; z-index: 140; width: min(380px, 88vw); height: 100%; padding: 34px 30px; overflow-y: auto; background: linear-gradient(180deg, #fdfdfd 0%, var(--surface) 100%); border-right: 1px solid var(--line); box-shadow: 24px 0 60px rgba(31, 31, 31, .17); transform: translateX(-100%); visibility: hidden; transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s; } .country-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s; } .drawer-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .drawer-close:hover { background: var(--red-soft); border-color: var(--red-primary); color: var(--red-primary); } .drawer-close:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } .drawer-kicker { display: block; margin-top: 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; } .country-drawer h3 { margin: 10px 0 0; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 27px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); } /* The president card, standing where the capital fact used to. Given its own treatment rather than a <dl> row because it leads with a face: portrait on the left, name and designation set against it. */ .drawer-lead { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--yellow-soft); } /* The source photograph is a room shot, not a headshot -- the face occupies only the middle third of it, so simply fitting it to a small circle would render him unrecognisably small. The circle is a window instead, and the image is laid inside it enlarged and offset until the head fills the frame. Derived from the photograph rather than nudged into place. In the source the head runs from 8% to 54% down and is centred at 48% across, 31% down. Scaling to 150% makes that head about three quarters of the circle's height, which is the usual proportion for an avatar; the offsets below are then simply what puts its centre at the centre of the circle. All in percentages, so the framing holds if the circle is ever resized. */ .drawer-lead-photo { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); background: var(--surface); } .drawer-lead-photo img { position: absolute; /* Beats the `img { max-width: 100% }` reset, which would otherwise clamp this back to the circle's width and undo the whole zoom. */ max-width: none; width: 150%; height: auto; left: -22%; top: -1%; } .drawer-lead-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .drawer-lead-copy strong { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--ink); } .drawer-lead-copy small { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); } /* ---- "tap a country" hint ---- The map panel is the positioning context (.map-panel is already relative), so this pins to its top-left corner, mirroring the country filter opposite. The countries read as artwork; without this nothing says they respond. aria-hidden in the markup: the countries are already buttons with their own labels, so a screen reader is told this by the controls themselves and does not need the visual hint repeated. */ .map-hint { position: absolute; z-index: 3; top: 22px; left: 24px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; pointer-events: none; /* never in the way of the map underneath */ } @media (max-width: 700px) { .map-hint { top: 14px; left: 14px; font-size: 10px; padding: 5px 10px; } } /* ========================================================= NRI NEXUS: SERVICE PANEL AND REQUESTS ========================================================= */ .nexus-panel { margin-top: 4px; } .np-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px 16px 0 0; border-bottom: 0; background: var(--yellow-soft); } .np-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--yellow); color: var(--charcoal); font-size: 19px; } .np-title { flex: 1 1 auto; min-width: 0; } .np-title h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -.01em; color: var(--ink); } .np-title p { margin: 3px 0 0; font-size: 13px; color: var(--text); } .np-count { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--muted); } /* The sub-services. Small cards, three abreast, so a category reads as a set of things that can be done rather than a wall of prose. */ .np-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; border: 1px solid var(--line); border-bottom: 0; background: var(--white); } .np-card { display: grid; gap: 5px; align-content: start; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s, box-shadow .16s, background .16s; } .np-card:hover { border-color: var(--red-primary); box-shadow: 0 6px 18px rgba(227, 30, 36, .09); } .np-card:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } .np-card.is-chosen { border-color: var(--red-primary); background: var(--red-soft); } .np-card strong { font-size: 13.5px; font-weight: 800; color: var(--ink); } .np-card small { font-size: 11.5px; line-height: 1.5; color: var(--muted); } .np-pick { justify-self: start; margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--red-primary); } .np-card.is-chosen .np-pick { color: var(--charcoal); } .np-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--surface); } .np-cta .btn { width: auto; flex: none; } .np-cta-note { font-size: 12.5px; color: var(--muted); } /* The membership gate. Deliberately not styled as an error: being asked to join is a step forward, not something going wrong, so it reads like the rest of the panel with the way on made obvious. */ .np-gate { display: flex; align-items: flex-start; gap: 15px; flex-wrap: wrap; margin-top: 14px; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--red-primary); border-radius: 0 16px 16px 0; background: var(--red-soft); } .npg-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--red-primary); color: var(--white); font-size: 17px; } .npg-copy { flex: 1 1 260px; min-width: 0; } .npg-copy strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); } .npg-copy p { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--text); max-width: 58ch; } .npg-for { display: inline-block; margin-top: 9px; padding: 4px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--muted); } .npg-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } .npg-actions .btn { width: auto; } .np-form { margin-top: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); } .np-form-head { margin: 0 0 14px; font-size: 13px; font-weight: 800; color: var(--ink); } .np-warn { margin: 12px 0 0; padding: 9px 12px; border-left: 3px solid var(--yellow); background: var(--surface); border-radius: 0 9px 9px 0; font-size: 12px; color: var(--muted); } .np-form-actions { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; } .np-form-actions .btn { width: auto; } .np-done { margin: 14px 0 0; padding: 13px 16px; border: 1px solid var(--line); border-left: 3px solid var(--red-primary); border-radius: 0 12px 12px 0; background: var(--red-soft); font-size: 13px; color: var(--ink); } /* ---- requests raised ---- */ .tickets { margin-top: 26px; } .tk-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .tk-head h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 900; color: var(--ink); } .tk-note { font-size: 12px; color: var(--muted); } .tk { padding: 15px 18px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); } .tk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tk-ref { padding: 3px 9px; border-radius: 7px; background: var(--charcoal); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .04em; } .tk-top strong { font-size: 14px; color: var(--ink); } .tk-cat { font-size: 11.5px; color: var(--muted); } .tk-state { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .tk-raised { background: var(--yellow-soft); color: #696200; border: 1px solid var(--yellow); } .tk-assigned { background: var(--red-soft); color: var(--red-primary); border: 1px solid rgba(227,30,36,.3); } .tk-resolved { background: #e6f6ec; color: #0a8a3f; border: 1px solid rgba(10,138,63,.25); } .tk-detail { margin: 10px 0 0; font-size: 13px; color: var(--text); } /* Raised -> Assigned -> Resolved, drawn as a rail so where a request has got to is read at a glance instead of from a word. */ .tk-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: stage; } .tk-rail li { position: relative; padding: 22px 8px 0; text-align: center; } /* The rail itself, and the marker on it. */ .tk-rail li::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--line); } .tk-rail li::after { content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); } .tk-rail li.done::before { background: var(--red-primary); } .tk-rail li.done::after { background: var(--red-primary); border-color: var(--red-primary); } /* The line should not stick out past the first and last markers. */ .tk-rail li:first-child::before { left: 50%; } .tk-rail li:last-child::before { right: 50%; } .tk-rail span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); } .tk-rail li.done span { color: var(--ink); } .tk-rail small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); } /* Named tk-with, not tk-assigned: that class already belongs to the Assigned status chip, and sharing it gave this line the chip's pill styling. */ .tk-with { margin: 12px 0 0; font-size: 12.5px; color: var(--text); } .tk .linkish { margin-top: 10px; font-size: 12px; } @media (max-width: 900px) { .np-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .np-grid { grid-template-columns: 1fr; } .np-head { flex-wrap: wrap; } .np-count { order: -1; } .tk-state { margin-left: 0; } } /* `hidden` sets display:none, which .event-list's display:grid beats -- so a hidden list went on showing, and Global displayed the member's own events above the rest. Same trap as the map filters. */ .event-list[hidden] { display: none; } /* Where a global event is, said on the card. In your own country's list it would be noise; in a list spanning chapters it is the first thing you need. */ .ev-country { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--yellow-soft); border: 1px solid var(--yellow); font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #696200; vertical-align: middle; } /* ---- events scope: the count line under the My Country / Global tabs ---- */ .evs-count { margin: -14px 0 20px; font-size: 12.5px; color: var(--muted); } /* Empty until app.js has decided what to say, and an empty line still owns its margins -- so it takes itself out of the flow rather than opening a gap. */ .evs-count:empty { display: none; } /* Sits with the three filter boxes, aligned to their inputs rather than to their labels, so it reads as part of the same row. */ .ev-clear { align-self: end; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; transition: .18s; } .ev-clear:hover { border-color: var(--red-primary); color: var(--red-primary); } .ev-clear:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } .ev-clear[hidden] { display: none; } /* A country with nothing scheduled says so and points at the way out, rather than leaving an empty list that reads as a broken page. */ .ev-none { margin: 0; padding: 18px 20px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); font-size: 13.5px; color: var(--muted); } /* The figures now sit ABOVE the map rather than under it, so the numbers are read first and the map is given the room below. Its old margin-top pushed it away from the heading; here it needs a margin underneath instead. */ .screen[data-route="chapters"] .stats-strip { margin-top: 0; margin-bottom: 22px; } /* ---- demonstration sign-ins (delete with demo-members.js) ---- Dashed and neutral on purpose: this block must never be mistaken for part of the product. */ .demo-signins { margin-top: 22px; padding: 16px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); } .ds-note { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--muted); } .ds-note strong { color: var(--ink); } .ds-list { display: grid; gap: 8px; } .ds-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s, box-shadow .18s; } .ds-card:hover { border-color: var(--red-primary); box-shadow: 0 4px 14px rgba(227, 30, 36, .1); } .ds-card:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } .ds-who strong { display: block; font-size: 14px; font-weight: 800; color: var(--ink); } .ds-who small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); } .ds-place { text-align: right; flex: none; } .ds-place em { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: var(--red-primary); } .ds-place small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); } .ds-current { margin: 12px 0 0; font-size: 12.5px; color: var(--text); } @media (max-width: 520px) { .ds-card { flex-direction: column; align-items: flex-start; gap: 6px; } .ds-place { text-align: left; } } /* The signed-in constituency panel: the same shell as the picker, marked out so it does not read as another form to fill in. */ .hp-mine { background: var(--red-soft); } .hp-switch { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); } .hp-switch a { color: var(--red-primary); } /* A button that has to sit inside a sentence. Reset to look like the link it behaves as, while staying a real button for keyboard and screen readers. */ .linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--red-primary); font-weight: 700; text-decoration: underline; cursor: pointer; } .linkish:hover { color: var(--charcoal); } .join-done { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 0 12px 12px 0; background: var(--surface); font-size: 13px; line-height: 1.6; color: var(--text); } /* ========================================================= MEMBERSHIP PICKER Two cards, each one the label of a real radio. The radio itself is taken out of the flow rather than hidden with display:none, so it can still take focus -- :focus-visible on it is what draws the ring on the card. ========================================================= */ .plan-picker { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; /* fieldsets default to min-content, which blocks the grid inside from shrinking on narrow screens */ } .plan-picker legend { padding: 0; margin-bottom: 12px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; } .plan { position: relative; display: block; padding: 18px 18px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s; } .plan:hover { border-color: rgba(227, 30, 36, .4); } .plan input { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--red-primary); cursor: pointer; } .plan.is-selected { border-color: var(--red-primary); background: var(--red-soft); box-shadow: 0 8px 24px rgba(227, 30, 36, .12); } .plan:has(input:focus-visible) { outline: 2px solid var(--red-primary); outline-offset: 2px; } .plan-body { display: block; padding-right: 26px; } .plan-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .plan-name { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -.01em; color: var(--ink); } .plan-badge { padding: 3px 9px; border-radius: 999px; background: var(--red-primary); color: var(--white); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .plan-badge-soft { background: var(--yellow); color: var(--charcoal); } .plan-fee { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--ink); } .plan-fee small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: lowercase; } .plan-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; } .plan-points li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.45; color: var(--text); } .plan-points li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); } .plan-summary { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--yellow); background: var(--surface); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.55; color: var(--text); } .app-form-check { flex-direction: row !important; align-items: flex-start; gap: 9px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--text); } .app-form-check input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--red-primary); } @media (max-width: 700px) { .plan-grid { grid-template-columns: 1fr; } } /* ========================================================= HEADLINE TICKER A thin strip under the header on Home, running right to left. The track holds the headlines twice and travels exactly half its own width, so the loop closes on itself with no visible jump. Duration comes from app.js, set from the rendered width, so a longer list of stories moves at the same speed rather than taking longer. ========================================================= */ .news-ticker { display: flex; align-items: stretch; height: 38px; border-bottom: 1px solid var(--line); background: var(--white); overflow: hidden; } .nt-tag { flex: none; display: grid; place-items: center; padding: 0 14px; background: var(--red-primary); color: var(--white); font-size: 10px; font-weight: 800; letter-spacing: .16em; } /* The mask fades the headlines out at both ends instead of letting them meet a hard edge, which is what makes the movement read as continuous. */ .nt-window { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 46px), transparent); } .nt-track { display: flex; align-items: center; height: 100%; width: max-content; will-change: transform; animation: nt-scroll var(--nt-duration, 40s) linear infinite; } @keyframes nt-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* The doubled copy is a plain span, so it has to lay out like the track. */ .nt-track > span { display: flex; align-items: center; } .news-ticker:hover .nt-track, .nt-track:focus-within { animation-play-state: paused; } .nt-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 26px; white-space: nowrap; text-decoration: none; font-size: 12.5px; color: var(--text); } .nt-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); } .nt-title { font-weight: 700; color: var(--ink); } .nt-item:hover .nt-title { color: var(--red-primary); } .nt-dash { color: var(--muted); font-size: 12px; } /* The publication is set in an italic serif against the headline's sans, the way a paper's name is set apart in print. Lora is already loaded for the Telugu slide caption, so this costs no extra font. A <cite> rather than a <span>: it is a work being credited, which is what the element is for, and browsers italicise it by default. */ .nt-src { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 12px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--muted); } /* The strip always scrolls -- that is the point of it, and it is what the site owner asked for. Machines with the OS "reduce animations" setting turned on (which is a common default on Windows) get the same movement at a gentler pace rather than a dead strip, and pause-on-hover above means anyone can stop it to read a headline. */ @media (prefers-reduced-motion: reduce) { /* The site-wide reset near the top of this file sets `animation: none !important` on `*`, which killed the ticker outright on any machine with the OS "reduce animations" setting on -- a common Windows default, and the reason the strip looked frozen. A plain animation-duration cannot outrank that, so the shorthand is restated here, !important, at higher specificity. The strip is meant to always move; the concession to the setting is a gentler pace, and pause-on-hover above lets anyone stop it to read. The slowdown is 1.25x, not more: at 1.6x a full pass took 97 seconds, which reads as not moving at all -- the very thing being fixed. */ .nt-track { animation: nt-scroll var(--nt-duration, 40s) linear infinite !important; animation-duration: calc(var(--nt-duration, 40s) * 1.25) !important; } } @media (max-width: 700px) { :root { --ticker-h: 34px; } .news-ticker { height: 34px; } .nt-tag { padding: 0 10px; font-size: 9px; } .nt-item { padding: 0 18px; font-size: 11.5px; } .nt-src { display: none; } } /* ========================================================= DISTRICT / CONSTITUENCY PICKER ON CONNECT AP ========================================================= */ .home-place { margin: 0 0 30px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--yellow-soft); } .hp-intro h3 { margin: 6px 0 6px; font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 900; letter-spacing: -.01em; color: var(--ink); } .hp-intro p { margin: 0 0 16px; font-size: 13.5px; color: var(--text); max-width: 62ch; } .hp-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; } .hp-field { display: block; } .hp-field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .hp-field select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } /* Disabled reads as "not yet", not as broken. */ .hp-field select:disabled { color: var(--muted); background: var(--surface); cursor: default; } .hp-field select:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 1px; } .hp-result { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); } .hp-head { display: flex; align-items: center; gap: 13px; } /* The seat number, as it appears on an electoral roll. */ .hp-no { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--red-primary); color: var(--white); font-size: 15px; font-weight: 900; } .hp-head strong { display: block; font-size: 16px; font-weight: 800; color: var(--ink); } .hp-head small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); } .hp-empty { margin: 14px 0 0; font-size: 13px; font-style: italic; color: var(--muted); } .hp-actions { margin-top: 14px; } .hp-actions .btn { width: auto; } @media (max-width: 700px) { .hp-controls { grid-template-columns: 1fr; } .home-place { padding: 18px 16px; } } /* Shown only while demo-stats.js is loaded. Deliberately plain and slightly loud, so nobody reads the figure above as a party record. */ .drawer-demo-note { margin: 10px 0 0; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 11px; font-style: italic; line-height: 1.4; } /* ---- NRI TDP strength ---- The single figure the chapter panel carries, so it is set as one stat rather than a row in a list: the number leads, the label sits under it. */ .drawer-strength { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); } .ds-head { margin: 0 0 6px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .ds-value { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--red-primary); } /* A chapter with no figure yet reads as unpublished, not as zero members. */ .ds-value.is-empty { font-size: 14px; font-weight: 500; font-style: italic; color: var(--muted); } .ds-sub { margin: 5px 0 0; font-size: 12px; color: var(--muted); } /* ---- the state step and what it reveals ---- */ .drawer-step { margin-top: 20px; } .drawer-step-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .drawer-select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .drawer-select:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 1px; } .drawer-step-note { margin: 0; color: var(--muted); font-size: 12.5px; font-style: italic; } /* The chapter step sits directly under the state select and had no space of its own, so its label crowded the control above it -- the two steps read as one block. This gives it the same breathing room the state step gets from the panel above, so the sequence looks like the two steps it is. */ #drawerChapterStep { margin-top: 18px; } .drawer-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .drawer-block-head { margin: 0 0 12px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .drawer-contact > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); } .drawer-contact dt { flex: 0 0 66px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .drawer-contact dd { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .drawer-contact dd a { color: var(--red-primary); text-decoration: none; } .drawer-contact dd a:hover { text-decoration: underline; } /* Blocks with nothing behind them yet say so, in the same voice as the unpublished fact rows above. */ .drawer-unpublished { margin: 0; color: var(--muted); font-size: 12.5px; font-style: italic; } @media (prefers-reduced-motion: reduce) { .country-drawer, .drawer-scrim { transition: none; } } /* ========================================================= MAP TOOLBAR The Chapter Locator side panel is gone, so the map runs the full width of the panel and its legend and location filters sit in a compact strip above it instead of inside it. ========================================================= */ .network-panel { grid-template-columns: 1fr; } .map-panel { border-right: 0; } /* ========================================================= LOCATION FILTERS Shared by the Chapters map and the Events list, so both look and behave identically. Naked by design: no fill or border until hover, so they sit lightly on whatever is behind them. ========================================================= */ .place-filters { display: flex; flex-wrap: wrap; gap: 12px; } .place-filters label { display: grid; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .place-filters select, .place-filters input { min-width: 152px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background-color: #fff; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } /* Chrome ships the datalist arrow at opacity 0 and only fades it in on hover, which left the field looking like plain text at rest. Pinning it to 1 keeps the browser's own arrow on show at all times — better than drawing a second chevron ourselves, which produced two arrows side by side on hover. */ .place-filters input::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; } .place-filters select:hover, .place-filters input:hover { border-color: #c9c9c9; } .place-filters select:focus-visible, .place-filters input:focus-visible { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(227, 30, 36, .12); } /* Placeholders read as hints, not as a chosen value. */ .place-filters input::placeholder { color: var(--muted); font-weight: 500; } /* The map's set is pinned to the panel's top-right corner. The panel's 2cm inset leaves that corner as empty background rather than artwork, so the controls stay legible over it. */ .map-panel .place-filters { position: absolute; top: 20px; right: 24px; z-index: 3; } /* The Events set sits directly beneath its heading. */ .events-filters { margin: 0 0 26px; } @media (max-width: 820px) { .place-filters { width: 100%; } .place-filters label { flex: 1 1 150px; } .place-filters select, .place-filters input { width: 100%; min-width: 0; } } @media (max-width: 580px) { .site-footer { background: #fdfdfd; } } /* ========================================================= /* ========================================================= FEATURED INITIATIVE SLIDER Full-width slot at the head of the member-services grid, rotating through P4, Brand AP, and AP EDB. Emblems live in assets/*.svg; each wrapper carries a data-fallback monogram used if the file fails to load. ========================================================= */ .feature-slider { grid-column: 1 / -1; position: relative; } /* Slides share one grid cell, so the slot is as tall as the tallest slide and nothing jumps when the active slide changes. */ .feature-track { display: grid; } .feature-card { grid-area: 1 / 1; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 40px; padding: 38px 40px; min-height: 0; background: linear-gradient(120deg, #ffffff 55%, var(--yellow-soft)); border-color: #F0E98A; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease; } .feature-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .feature-card::before { background: var(--yellow); left: 40px; } /* the base service card lifts on hover; a rotating panel should sit still */ .feature-card:hover { transform: none; box-shadow: none; border-color: #F0E98A; } /* the base card pins its link to the card corner; keep this one in the copy */ .feature-card a { position: static; display: inline-flex; align-items: center; font-size: 12px; } .feature-logo-wrap { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 14px 34px rgba(31, 31, 31, .10); } /* square frame: the emblems are discs/lockups, a round wrapper clipped them */ .feature-logo { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .feature-logo-wrap.logo-missing::after { content: attr(data-fallback); font-size: 46px; font-weight: 800; letter-spacing: -2px; color: var(--red-primary); } .feature-kicker { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: var(--red-primary); background: var(--red-soft); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; } .feature-card h3 { font-size: 25px; line-height: 1.25; margin: 0 0 6px; } .feature-sub { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 12px; } .feature-card > .feature-copy > p { max-width: 62ch; } .feature-points { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 8px; } .feature-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); } .feature-points li span { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; color: var(--charcoal); background: var(--yellow-soft); border: 1px solid #FFC400; } /* controls */ .feature-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; } .feature-dots { display: flex; gap: 8px; } .feature-dots button { width: 26px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: #e6e2d2; cursor: pointer; transition: background .25s ease, width .25s ease; } .feature-dots button.is-active { background: var(--yellow); width: 40px; } .feature-arrows { display: flex; gap: 8px; } .feature-arrows button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .feature-arrows button:hover { background: var(--yellow-soft); border-color: #FFC400; } .feature-arrows button:focus-visible, .feature-dots button:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } @media (max-width: 820px) { .feature-card { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; padding: 32px 26px; } .feature-logo-wrap { width: 170px; } .feature-points li { text-align: left; } .feature-card h3 { font-size: 22px; } .feature-controls { justify-content: center; flex-direction: column-reverse; } } @media (prefers-reduced-motion: reduce) { .feature-card { transition-duration: .01ms; } .feature-dots button { transition: none; } } /* ========================================================= PROFESSIONAL NETWORK SUB-BLOCK A second service grid inside NRI Assistance. The cards inherit everything from .service-card; the only thing missing is air between the two grids, since .centered zeroes the top margin. ========================================================= */ #professional-network { margin-top: 92px; } @media (max-width: 820px) { #professional-network { margin-top: 64px; } } /* ========================================================= APP SHELL The site is a routed application rather than a scrolling document: a fixed header, one screen visible at a time, and scrolling confined to whichever screen is open. Only the panel scrolls, never the page, so the header and footer never move. ========================================================= */ :root { --app-footer-h: 46px; } html { height: 100%; } body { height: 100svh; padding-top: var(--hdr); display: flex; flex-direction: column; overflow: hidden; } .app-shell { flex: 1 1 auto; min-height: 0; /* lets the panel shrink instead of pushing the footer off */ position: relative; } .screen { display: none; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .screen.is-active { display: block; animation: screen-in .28s cubic-bezier(.22, .61, .36, 1) both; } @keyframes screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Home is composed to fit exactly, so it never scrolls. */ .screen[data-route="home"] { overflow: hidden; } /* Section padding was tuned for a long scrolling page; inside a viewport-height panel it wastes most of the screen. */ .screen .section, .screen .screen-section { padding: 34px 0 44px; } .screen .network-section { padding-top: 22px; } .screen .section-heading { margin-bottom: 26px; } .screen .section-heading h2, .screen .vision-copy h2 { font-size: clamp(28px, 3vw, 40px); } /* Vertically centred screens (the login card). */ .screen-centered { min-height: 100%; display: grid; place-items: center; } .container.narrow { width: min(560px, calc(100% - 40px)); } /* Join is the one narrow page carrying two membership cards abreast. At 560px they are squeezed to about 240px each, which is too tight for a price, a badge and four benefit lines, so this page gets a wider column. Sign-in, still a short form, keeps the original width. */ .screen[data-route="join"] .container.narrow { width: min(860px, calc(100% - 40px)); } /* ---- tiles: the category / service choosers ---- */ .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } .tile { display: grid; gap: 4px; padding: 18px 20px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .tile:hover { transform: translateY(-2px); border-color: #d8d8d8; box-shadow: 0 12px 30px rgba(31, 31, 31, .07); } .tile.is-active { border-color: var(--red-primary); box-shadow: 0 12px 30px rgba(227, 30, 36, .12); } .tile-icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 6px; border: 1px solid #FFC400; border-radius: 10px; background: var(--yellow-soft); color: var(--red-primary); font-size: 15px; } .tile strong { font-size: 15px; color: var(--ink); } .tile small { color: var(--muted); font-size: 11.5px; } /* ---- tab bar: Events and About ---- */ .tab-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .tab { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .tab:hover { border-color: #d0d0d0; } .tab.is-active { background: var(--red-primary); border-color: var(--red-primary); color: #fff; } .tab-panel[hidden] { display: none; } .tab-panel.is-active { animation: screen-in .22s ease both; } /* ---- content card used across the new screens ---- */ .info-card { padding: 30px 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 34px rgba(31, 31, 31, .05); } .info-card h3 { margin: 0 0 10px; font-size: 21px; color: var(--ink); } .info-card p { margin: 0 0 10px; color: var(--text); max-width: 70ch; } /* ---- salient features: the numbered specification list on a scheme panel. Upper-roman rather than the browser default, because the source documents number them that way and a reader checking a figure against the original needs to be looking at the same item number. */ .salient-title { margin: 24px 0 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .salient { margin: 0 0 10px; /* Roman numerals run to XII here and grow wider as they go; a fixed indent wide enough for the longest keeps every line of text on one left edge. */ padding-left: 3.4em; max-width: 70ch; color: var(--text); list-style: upper-roman; } .salient li { margin-bottom: 9px; padding-left: 5px; } .salient li::marker { color: var(--red-primary); font-weight: 700; font-size: 12.5px; } /* Marks copy that has not been through sign-off. */ .draft-note { color: var(--red-primary); font-size: 12px; font-weight: 700; } /* ---- forms ---- */ .app-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; } .app-form label { display: grid; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .app-form-wide { grid-column: 1 / -1; } .app-form input, .app-form select, .app-form textarea { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; } .app-form input:focus-visible, .app-form select:focus-visible, .app-form textarea:focus-visible { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(227, 30, 36, .12); } .app-form .btn { justify-self: start; } .auth-card h2 { margin: 10px 0 0; font-size: 30px; letter-spacing: -.03em; } .auth-alt { margin: 18px 0 0; color: var(--muted); font-size: 13px; } .auth-alt a { color: var(--red-primary); font-weight: 700; } /* ---- compact footer bar, replacing the four-column footer ---- */ .app-footer { flex: 0 0 auto; height: var(--app-footer-h); background: #fdfdfd; border-top: 1px solid var(--line); } .app-footer-bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11.5px; } /* Party lines carried in the footer bar: an English standfirst beside the copyright, and the salute set in the party red so it reads as an emblem rather than more small print. */ .app-footer-bar .foot-copy em { font-style: normal; color: var(--text); font-weight: 700; } .foot-slogan { margin: 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--red-primary); white-space: nowrap; } .foot-slogan .foot-sep { color: var(--yellow-deep); margin: 0 5px; } .app-footer-links { display: flex; gap: 18px; } .app-footer-links a { color: var(--text); font-weight: 700; } .app-footer-links a:hover { color: var(--red-primary); } /* Connect AP carried four tracks and took four columns, because three would have stranded a lone tile on a second row. It carries six now -- the four project tracks and the two leaders -- so three columns is exactly right: two full rows, nothing orphaned. The rule stays rather than being deleted because the base .tile-grid is already three; keeping it here means the next person to add or remove a track has one obvious place to do the arithmetic. Six tiles at four across would strand two. */ @media (min-width: 981px) { .screen[data-route="connect-ap"] .tile-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .tile-grid { grid-template-columns: 1fr; } .app-form { grid-template-columns: 1fr; } .app-footer-bar .foot-slogan { display: none; } /* Home has too much to fit a short phone viewport, so it may scroll there. */ .screen[data-route="home"] { overflow-y: auto; } } /* ---- Home fits its panel exactly ---- The hero was sized for the old scrolling page: it cleared the fixed header with its own 88px padding and computed its height from the whole viewport. Inside a screen panel that already excludes the header and footer, both double-count -- hence the gap under the header and the dock falling off the bottom. Let flex do the arithmetic instead. */ /* The headline ticker sits inside this panel, above the slider shell. The shell was still taking height:100% of the panel, so the panel came out exactly one ticker taller than the space available -- and because Home is overflow:hidden by design, that 38px was simply unreachable: no scrollbar, no way to get to it. Flex does the arithmetic here too. The screen becomes a column, the ticker takes its own height, and the shell takes whatever is left, so the ticker can change height without anything else needing to know. */ .screen[data-route="home"] { display: none; /* .screen.is-active turns this back on */ flex-direction: column; } .screen[data-route="home"].is-active { display: flex; } .screen[data-route="home"] .news-ticker { flex: 0 0 auto; } .screen[data-route="home"] .home-slider-shell { flex: 1 1 auto; min-height: 0; /* or a flex item refuses to shrink below content */ height: auto; padding: 0; display: flex; flex-direction: column; } .screen[data-route="home"] .hero-slider { flex: 1 1 auto; height: auto; min-height: 240px; } /* Dock overlaps the foot of the hero, as in the reference composition. */ .screen[data-route="home"] .quick-dock { flex: 0 0 auto; transform: none; position: relative; z-index: 4; margin: -34px auto 16px; } @media (max-width: 700px) { .screen[data-route="home"] .home-slider-shell { height: auto; min-height: 100%; } .screen[data-route="home"] .hero-slider { min-height: 60svh; } } /* ========================================================= ABOUT US Imported journey / leadership / milestones content, restyled onto this site's light palette: white cards, warm neutrals, yellow and red accents. The source project's dark backgrounds are deliberately not carried over. ========================================================= */ .about-screen .panel-eyebrow { margin: 26px 0 14px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .about-screen .panel-eyebrow:first-child { margin-top: 0; } /* ---- Our Story ---- */ .story-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; } .story-copy h3 { margin: 0 0 14px; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 27px; letter-spacing: -.02em; color: var(--ink); } .story-copy p { margin: 0 0 12px; color: var(--text); font-size: 15px; line-height: 1.7; max-width: 60ch; } .story-figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); } .story-figure img { display: block; width: 100%; height: 340px; object-fit: cover; } .story-figure figcaption { padding: 12px 16px; color: var(--muted); font-size: 12px; } /* ---- Vision & Mission ---- */ .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .vm-card h3 { margin: 10px 0 12px; font-size: 22px; line-height: 1.3; } .vm-card blockquote { margin: 16px 0 0; padding-left: 16px; border-left: 3px solid var(--yellow); color: var(--ink); font-family: 'Lora', Georgia, serif; font-style: italic; } .vm-list { margin: 14px 0 0; padding-left: 18px; color: var(--text); font-size: 14px; line-height: 1.9; } /* ---- People ---- */ .people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .person-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: center; transition: transform .2s ease, box-shadow .2s ease; } .person-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(31, 31, 31, .08); } .person-photo { width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: var(--yellow-soft); border: 2px solid var(--yellow); } .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .person-card h4 { margin: 0 0 4px; font-size: 15px; color: var(--ink); } .person-role { margin: 0; color: var(--red-primary); font-size: 11.5px; font-weight: 700; } .person-quote { margin: 10px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.6; font-style: italic; } .people-grid-sm .person-photo { width: 72px; height: 72px; } /* Leader cards — message + WhatsApp / Call actions */ .leader-card { display: flex; flex-direction: column; padding: 24px 20px 20px; border-radius: 20px; position: relative; overflow: hidden; } .leader-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--red-primary), var(--yellow)); } .leader-card .person-photo { width: 104px; height: 104px; border-width: 3px; box-shadow: 0 8px 22px rgba(214,199,0,.22); } .leader-card h4 { font-size: 16.5px; font-weight: 800; } .leader-card .person-role { font-size: 11px; line-height: 1.4; } .leader-card .person-quote { position: relative; margin: 14px 0 18px; padding: 12px 14px; background: var(--surface, #f7f7f7); border-radius: 12px; font-style: normal; color: var(--text); font-size: 12.5px; line-height: 1.55; flex: 1; } .leader-card .person-quote::before { content: "\201C"; position: absolute; top: 2px; left: 8px; font-family: Georgia, serif; font-size: 26px; color: var(--yellow); opacity: .55; line-height: 1; } .leader-contact { display: flex; gap: 10px; margin-top: auto; } .lc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 10px; border-radius: 12px; font-weight: 700; font-size: 13px; text-decoration: none; border: 0; cursor: pointer; transition: transform .12s, filter .15s, background .15s; } .lc-btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .lc-btn:active { transform: translateY(1px); } .lc-wa { background: #25D366; color: #fff; box-shadow: 0 6px 16px rgba(37,211,102,.32); } .lc-wa:hover { filter: brightness(1.05); } .lc-call { background: var(--red-primary); color: #fff; box-shadow: 0 6px 16px rgba(227,30,36,.26); } .lc-call:hover { filter: brightness(1.05); } .lc-btn.is-off { box-shadow: none; cursor: default; opacity: .45; } .lc-btn.is-off:hover { filter: none; } /* ---- Milestones ---- */ .milestone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .milestone-card { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; border-top: 3px solid var(--yellow); transition: transform .2s ease, box-shadow .2s ease; } .milestone-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(31, 31, 31, .08); } .milestone-card h4 { margin: 0 0 8px; font-size: 16px; color: var(--ink); } .milestone-card p { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.65; } @media (max-width: 980px) { .story-split, .journey-stage, .vm-grid { grid-template-columns: 1fr; } .people-grid, .milestone-grid { grid-template-columns: repeat(2, 1fr); } .journey-hero { height: 240px; } } @media (max-width: 640px) { .people-grid, .milestone-grid { grid-template-columns: 1fr; } .journey-thumbs { grid-auto-flow: row; grid-auto-columns: auto; } .journey-thumb { height: 140px; } .story-figure img { height: 220px; } } /* ========================================================= JOURNEY — ported from the nritdp-journey-updated project Same structure as the source: a dark collage stage the slides translate through, with a year rail alongside. Colours are mapped onto this site's tokens, and the surrounding page keeps its light theme rather than the source's full-page dark treatment. ========================================================= */ .journey { display: grid; grid-template-columns: 1fr 260px; gap: 22px; align-items: stretch; padding: 20px; border-radius: 22px; /* A soft yellow bed, echoing the source page without a hard colour block. */ background: linear-gradient(160deg, rgba(255, 196, 0, .22), rgba(255, 196, 0, .05)); } .journey-stage { position: relative; height: clamp(400px, 58svh, 620px); overflow: hidden; border-radius: 18px; border: 1px solid rgba(31, 31, 31, .12); box-shadow: 0 18px 44px rgba(31, 31, 31, .18); background: #160d08; } .journey-track { height: 100%; transition: transform 1s cubic-bezier(.65, 0, .35, 1); will-change: transform; } .jr-slide { position: relative; height: 100%; overflow: hidden; } /* ---- collage: the images are the slide's background ---- */ .jr-collage { position: absolute; inset: 0; display: grid; gap: 3px; background: #160d08; } .jr-cell { position: relative; overflow: hidden; margin: 0; } .jr-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 6s ease-out; } .jr-slide.active .jr-cell img { transform: scale(1); } .jr-n1 { grid-template-columns: 1fr; } .jr-n2 { grid-template-columns: 1fr 1fr; } .jr-n3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; } .jr-n3 .jr-cell-1 { grid-row: 1 / span 2; } .jr-n4 { grid-template-columns: 1.7fr 1fr; grid-template-rows: repeat(3, 1fr); } .jr-n4 .jr-cell-1 { grid-row: 1 / span 3; } .jr-n5 { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .jr-n5 .jr-cell-1 { grid-row: 1 / span 2; } .jr-more { position: absolute; top: 16px; right: 16px; z-index: 3; font-weight: 800; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .28); padding: 5px 12px; border-radius: 50px; } /* A tile that must not be cropped, over a blurred copy of itself. */ .jr-cell-whole { background: #1a0f09; } .jr-cell-whole img:not(.jr-cellblur) { position: relative; z-index: 1; object-fit: contain; transform: none; } .jr-slide.active .jr-cell-whole img:not(.jr-cellblur) { transform: none; } .jr-cellblur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); filter: blur(26px) brightness(.5) saturate(.5); } /* ---- doc mode: archival scans shown whole ---- */ .jr-doc { display: block; background: #160d08; } .jr-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(34px) brightness(.78) saturate(.5); } .jr-docgrid { position: absolute; z-index: 1; top: 4.5%; bottom: 23%; left: 50%; transform: translateX(-50%); width: min(94%, 1160px); display: grid; gap: 16px; place-items: stretch; } .jr-d1 { grid-template-columns: 1fr; } .jr-d2 { grid-template-columns: 1fr 1fr; } .jr-d3 { grid-template-columns: repeat(3, 1fr); } .jr-d4 { grid-template-columns: repeat(2, minmax(0, 520px)); grid-template-rows: 1fr 1fr; justify-content: center; } .jr-d5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; } .jr-doc .jr-cell { background: transparent; border-radius: 6px; } .jr-doc .jr-cell img { width: 100%; height: 100%; object-fit: contain; transform: none; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55)); } .jr-slide.active .jr-doc .jr-cell img { transform: none; } .jr-cell.jr-missing { background: linear-gradient(135deg, #2b160f, #5c2a12); } .jr-cell.jr-missing img { visibility: hidden; } .jr-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b160f, #5c2a12); } .jr-empty img { width: 120px; opacity: .28; filter: grayscale(1); } /* ---- scrim keeps the overlaid caption readable on any photo ---- */ .jr-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 32%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.30) 100%), linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.10) 55%, transparent 100%); } /* ---- caption ---- */ .jr-caption { position: absolute; z-index: 3; left: 0; bottom: 0; max-width: min(640px, 72%); padding: 0 34px 34px; opacity: 0; transform: translateY(22px); transition: opacity .7s ease .25s, transform .7s ease .25s; } .jr-slide.active .jr-caption { opacity: 1; transform: none; } .jr-year { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; letter-spacing: .5px; color: var(--ink); background: linear-gradient(135deg, var(--red-primary), var(--yellow)); padding: 5px 14px; border-radius: 50px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); } .jr-year i { font-style: normal; } .jr-caption h4 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(19px, 2.4vw, 28px); line-height: 1.25; color: #fff; margin: 0 0 10px; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); } .jr-caption p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.7); } .jr-caption p.jr-te { font-family: 'Noto Sans Telugu', 'Manrope', sans-serif; font-size: 14.5px; line-height: 1.85; } .jr-docslide .jr-caption { max-width: min(1080px, 92%); padding-bottom: 26px; } /* ---- arrows ---- */ .journey-arrow { position: absolute; right: 20px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.42); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: .25s; opacity: 0; } .journey-stage:hover .journey-arrow, .journey-arrow:focus-visible { opacity: 1; } .journey-arrow:hover { background: var(--red-primary); border-color: var(--red-primary); } .journey-arrow.up { top: 20px; } .journey-arrow.down { top: 68px; } /* ---- year rail ---- */ .journey-rail { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: clamp(400px, 58svh, 620px); padding-right: 4px; scrollbar-width: thin; } .jr-tick { position: relative; display: block; text-align: left; cursor: pointer; background: transparent; border: 0; border-left: 2px solid rgba(31, 31, 31, .14); padding: 8px 0 8px 14px; transition: .3s; } .jr-tick-year { display: block; font-weight: 800; font-size: 12px; color: var(--muted); transition: .3s; } .jr-tick-title { display: block; font-size: 13px; line-height: 1.35; color: var(--text); transition: .3s; } .jr-tick:hover { border-left-color: var(--yellow); } .jr-tick.active { border-left-color: var(--red-primary); } .jr-tick.active .jr-tick-year { color: var(--red-primary); font-size: 15px; } .jr-tick.active .jr-tick-title { color: var(--ink); font-weight: 700; } @media (max-width: 980px) { .journey { grid-template-columns: 1fr; } .journey-rail { flex-direction: row; max-height: none; overflow-x: auto; padding-bottom: 8px; } .jr-tick { flex: 0 0 auto; min-width: 168px; border-left: 0; border-top: 2px solid rgba(31,31,31,.14); padding: 10px 12px 0 0; } .jr-tick.active { border-top-color: var(--red-primary); } .journey-arrow { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .journey-track { transition: none; } .jr-cell img, .jr-caption { transition: none; } } /* ========================================================= MERGED AUTH ENTRY Login and Join share one nav item. It stays quiet next to the section links — a bordered chip rather than the old filled button — and each auth card carries a switch between the two. ========================================================= */ /* Filled yellow with red text, as the old "Join NRI TDP" button was. */ .auth-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid #FFC400; border-radius: 999px; background: var(--yellow); color: var(--red-primary); font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 22px rgba(255, 196, 0, .22); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .auth-link:hover, .auth-link[aria-current="page"] { background: var(--yellow-hover); border-color: var(--yellow-hover); box-shadow: 0 10px 26px rgba(255, 196, 0, .3); } /* The glyph already matches the red text, so it just needs sizing. */ .auth-ico { font-size: 12px; } /* The old rule drew a separator on .login-link, which no longer exists; the chip has its own border, so a little space is all that is needed. The colour has to be restated here: `.primary-nav > a:not(.btn)` sets every nav link to #3f3f3f and outranks .auth-link on its own. */ .site-header .primary-nav > a.auth-link, .site-header.scrolled .primary-nav > a.auth-link { margin-left: 8px; color: var(--red-primary); } .auth-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; } .auth-switch a { padding: 6px 16px; border-radius: 999px; color: var(--text); font-size: 12.5px; font-weight: 700; transition: background .2s ease, color .2s ease; } .auth-switch a:hover { color: var(--ink); } .auth-switch a.is-active { background: var(--red-primary); color: #fff; } /* ========================================================= COMMUNITY FORUMS (prototype) Directory on the left, thread list or thread on the right. Sits inside the NRI Nexus panel and scrolls with it. ========================================================= */ .forum { display: grid; gap: 16px; } /* ---- activity strip ---- */ .forum-pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 16px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; } .pulse-stat { display: grid; } .pulse-stat strong { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 22px; color: var(--ink); line-height: 1; } .pulse-stat span { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; } .pulse-open strong { color: var(--red-primary); } .pulse-live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; } .pulse-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red-primary); box-shadow: 0 0 0 4px rgba(227,30,36,.15); } .forum-body { display: grid; grid-template-columns: 274px 1fr; gap: 16px; align-items: start; } /* ---- directory ---- */ .forum-dir { display: grid; gap: 18px; } .forum-group { border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow: hidden; } .forum-group + .forum-group { margin-top: 8px; } .forum-group-toggle { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; padding: 12px 13px; background: #fff; border: 0; text-align: left; transition: background .2s ease; } .forum-group-toggle:hover { background: var(--surface); } .forum-group.is-open .forum-group-toggle { background: var(--yellow-soft); } .fg-label { display: grid; gap: 3px; min-width: 0; } .fg-label { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .fg-label small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; } .fg-count { margin-left: auto; flex: 0 0 auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 10.5px; font-weight: 800; text-align: center; } .forum-group.is-open .fg-count { background: #fff; border-color: var(--yellow); } .fg-chev { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--text); font-size: 17px; line-height: 1; transition: transform .25s ease, background .2s ease, color .2s ease; } .forum-group-toggle:hover .fg-chev { background: #eee; } .forum-group.is-open .fg-chev { transform: rotate(180deg); background: var(--red-primary); color: #fff; } .forum-group-body { padding: 8px 8px 4px; border-top: 1px solid var(--line); } .forum-group-body[hidden] { display: none; } .forum-item { display: grid; gap: 3px; width: 100%; text-align: left; cursor: pointer; padding: 11px 13px; margin-bottom: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .forum-item:hover { transform: translateX(2px); border-color: #d6d6d6; box-shadow: 0 8px 20px rgba(31,31,31,.06); } .forum-item.is-active { border-color: var(--red-primary); box-shadow: 0 8px 20px rgba(227,30,36,.12); } .forum-item-top { display: flex; align-items: center; gap: 7px; } .forum-item strong { font-size: 13.5px; color: var(--ink); } .forum-item small { color: var(--text); font-size: 11.5px; line-height: 1.4; } .forum-item-meta { color: var(--muted); font-size: 10.5px; font-weight: 700; } .forum-hot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,196,0,.28); } /* ---- main column ---- */ .forum-main { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; min-height: 320px; } .forum-welcome h3 { margin: 0 0 8px; font-size: 20px; color: var(--ink); } .forum-welcome p { margin: 0 0 16px; color: var(--text); font-size: 14px; line-height: 1.7; max-width: 62ch; } .forum-jump { display: flex; flex-wrap: wrap; gap: 8px; } .forum-chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--yellow-soft); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; } .forum-chip:hover { border-color: var(--yellow); } .forum-head { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; } .forum-head h3 { margin: 4px 0 4px; font-size: 19px; color: var(--ink); line-height: 1.3; } .forum-blurb { margin: 0; color: var(--muted); font-size: 12.5px; } .forum-crumb { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; } .forum-crumb button { background: 0; border: 0; padding: 0; color: var(--red-primary); font: inherit; cursor: pointer; } .forum-head-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .forum-head-links .btn { width: auto; } .forum-filters { display: flex; gap: 7px; margin-bottom: 12px; } .forum-filter { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; } .forum-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } /* ---- threads ---- */ .thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .thread-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: .2s; } .thread-row:hover { background: #fff; border-color: #d6d6d6; box-shadow: 0 8px 22px rgba(31,31,31,.06); } .th-main { display: grid; gap: 4px; min-width: 0; } .th-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; } .th-meta { color: var(--muted); font-size: 11.5px; } .th-meta em { font-style: normal; color: var(--red-primary); font-weight: 700; } .th-side { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; } .th-count { color: var(--muted); font-size: 11px; font-weight: 700; } .th-flag { padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; } .th-flag.is-pin { background: var(--yellow-soft); color: #696200; border: 1px solid var(--yellow); } .th-flag.is-ans { background: #e8f5ec; color: #1d6b39; border: 1px solid #bfe3cb; } .th-flag.is-open { background: var(--red-soft); color: var(--red-primary); border: 1px solid rgba(227,30,36,.3); } /* ---- one thread ---- */ .post { padding: 15px 17px; margin-bottom: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .post p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.7; } .post.is-op { background: #fff; border-left: 3px solid var(--yellow); } .post.is-accepted { background: #f2faf5; border-color: #bfe3cb; } .post-by { margin: 0 0 6px !important; color: var(--muted); font-size: 11.5px; font-weight: 700; } .post-by em { font-style: normal; color: var(--red-primary); } .post-tick { color: #1d6b39; } .forum-reply { display: grid; gap: 10px; justify-items: start; margin-top: 14px; } .forum-reply .btn { width: auto; } .forum-reply textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; } .forum-reply textarea:focus-visible { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(227,30,36,.12); } .forum-note { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; font-style: italic; } .forum-note-top { margin: 0 0 12px; color: var(--red-primary); font-style: normal; font-weight: 700; } .forum-empty { color: var(--muted); font-size: 13px; } @media (max-width: 980px) { .forum-body { grid-template-columns: 1fr; } .forum-dir { grid-auto-flow: row; } .pulse-live { margin-left: 0; } } /* ========================================================= FORUMS FEATURE CARD Same materials as every other card on the site — white, hairline border, soft shadow — with a warm yellow wash so it still leads the section. The earlier dark panel stood outside the palette. ========================================================= */ .forum-feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; padding: 30px 32px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(900px 260px at 8% 0%, rgba(255, 196, 0, .28), transparent 60%), linear-gradient(180deg, #fdfdfd 0%, #ffffff 70%); box-shadow: 0 14px 36px rgba(31, 31, 31, .06); } .ff-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--yellow); border: 1px solid #FFC400; color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .12em; } .forum-feature h3 { margin: 12px 0 8px; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); } .forum-feature p { margin: 0 0 18px; color: var(--text); font-size: 14.5px; line-height: 1.7; max-width: 54ch; } .ff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .ff-actions .btn { width: auto; } .ff-live { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; } .ff-live strong { color: var(--red-primary); } .ff-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red-primary); box-shadow: 0 0 0 4px rgba(227, 30, 36, .14); } .ff-preview { display: grid; gap: 8px; } .ff-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); } .ff-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 196, 0, .28); flex: 0 0 auto; } .ff-row-main { display: grid; gap: 2px; min-width: 0; } .ff-row-main strong { color: var(--ink); font-size: 12.5px; } .ff-row-main small { color: var(--muted); font-size: 11px; } .ff-row-meta { margin-left: auto; color: var(--muted); font-size: 10.5px; font-weight: 700; white-space: nowrap; } .forum-back { margin-bottom: 16px; padding: 9px 18px; border: 1px solid var(--red-primary); border-radius: 999px; background: var(--red-primary); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } /* Lifts to the lighter red, as the other filled red buttons do. */ .forum-back:hover { background: var(--red-light); border-color: var(--red-light); color: #1f1f1f; } @media (max-width: 900px) { .forum-feature { grid-template-columns: 1fr; padding: 24px; } .ff-preview { display: none; } } /* ========================================================= CONNECT AP — SCHEME PANELS Each track ends in a sign-in gate, because taking part (adopting a family or a village, opening a proposal) is a member action rather than something the public page can complete. ========================================================= */ .scheme-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 18px; padding: 16px 18px; border: 1px dashed rgba(227, 30, 36, .34); border-radius: 14px; background: linear-gradient(135deg, rgba(255,226,221,.55), rgba(255,196,0,.10)); } .gate-ico { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: #fff; border: 1px solid var(--yellow); color: var(--red-primary); font-size: 15px; } .gate-copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 240px; } .gate-copy strong { color: var(--ink); font-size: 14px; } .gate-copy small { color: var(--text); font-size: 12px; line-height: 1.5; } .scheme-gate .btn { flex: 0 0 auto; } /* The four tracks folded inside Invest in AP. */ .subtile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; } .subtile { padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .subtile:hover { transform: translateY(-2px); border-color: #d8d8d8; box-shadow: 0 10px 26px rgba(31, 31, 31, .06); } .subtile-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 9px; background: var(--yellow-soft); border: 1px solid #FFC400; color: var(--red-primary); font-size: 13px; } .subtile h4 { margin: 0 0 6px; font-size: 14.5px; color: var(--ink); } .subtile p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.6; } @media (max-width: 760px) { .subtile-grid { grid-template-columns: 1fr; } } /* ========================================================= MEMBERSHIP CALL TO ACTION Follows every screen, bottom-right, clear of the footer bar. Its wording is the same "Join NRI TDP" line on every route (see setCta in app.js) so the prompt is recognised at a glance rather than re-read on each page. ========================================================= */ .member-cta { position: fixed; right: 22px; bottom: calc(var(--app-footer-h) + 18px); z-index: 90; /* under the chapter drawer (140) and map tip (120) */ display: inline-flex; align-items: center; gap: 12px; max-width: min(340px, calc(100vw - 44px)); padding: 11px 16px; border-radius: 999px; background: var(--yellow); border: 1px solid #FFC400; box-shadow: 0 14px 34px rgba(31, 31, 31, .2); color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; animation: cta-in .4s cubic-bezier(.22, .61, .36, 1) both; } .member-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(31, 31, 31, .26); } .member-cta[hidden] { display: none; } @keyframes cta-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .mc-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--red-primary); color: #fff; font-size: 13px; } .mc-copy { display: grid; gap: 1px; min-width: 0; } .mc-copy strong { font-size: 13.5px; line-height: 1.2; } .mc-copy small { color: #605A00; font-size: 11px; line-height: 1.3; } .mc-arrow { flex: 0 0 auto; color: var(--red-primary); font-size: 15px; font-weight: 800; } @media (max-width: 700px) { .member-cta { right: 14px; bottom: calc(var(--app-footer-h) + 12px); padding: 10px 14px; } .mc-copy small { display: none; } } @media (prefers-reduced-motion: reduce) { .member-cta { animation: none; transition: none; } } /* Tiles whose icon is a real logo rather than a glyph: bigger, on white, and uncropped, so marks with fine detail (the Adopt a Village crest) stay legible at tile size. The umbrella "Invest in AP" tile keeps its glyph. */ .tile-icon-logo { width: 68px; height: 68px; padding: 6px; margin-bottom: 10px; border-radius: 14px; background: #fff; border-color: var(--line); } .tile-icon-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .tile:hover .tile-icon-logo, .tile.is-active .tile-icon-logo { border-color: var(--yellow); } /* ========================================================= FORUM HOME Leads with the thing only a diaspora forum has: questions answered across borders. The routes read as journeys rather than list rows. ========================================================= */ .forum-home { display: grid; gap: 20px; } /* ---- ask box ---- */ .ask-box { display: flex; gap: 10px; } .ask-box input { flex: 1 1 auto; min-width: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 15px; font-weight: 600; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .ask-box input:focus-visible { outline: none; background: #fff; border-color: var(--red-primary); box-shadow: 0 0 0 4px rgba(227, 30, 36, .1); } /* .btn-dark carries width:100% from the old layout; inline uses must undo it. */ .ask-box .btn { flex: 0 0 auto; width: auto; border-radius: 999px; } .ask-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: -10px; } .ask-tags > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ask-tag { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .ask-tag:hover { background: var(--yellow-soft); border-color: var(--yellow); } /* ---- live head ---- */ .live-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; } .live-head h3 { margin: 0; font-size: 19px; color: var(--ink); } .live-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; } .live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--red-primary); box-shadow: 0 0 0 0 rgba(227, 30, 36, .5); animation: live-ping 2s ease-out infinite; } @keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(227, 30, 36, .45); } 70% { box-shadow: 0 0 0 9px rgba(227, 30, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 30, 36, 0); } } /* ---- the routes ---- */ .route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .route { display: grid; grid-template-columns: 92px 1fr 92px minmax(0, 1.6fr) auto; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; animation: route-in .45s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * 70ms); } @keyframes route-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .route-end { display: grid; gap: 1px; min-width: 0; } .route-end strong { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .route-end small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; } .route-to { text-align: right; justify-items: end; } /* The travelling dot is the whole point: it reads as a journey, not a row. */ .route-line { position: relative; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); } .route-line::after { content: ''; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--red-primary); } .route-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red-primary); box-shadow: 0 0 0 3px rgba(227,30,36,.16); animation: route-travel 3.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--i) * 260ms); } @keyframes route-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } } .route-topic { color: var(--text); font-size: 13px; line-height: 1.4; } .route-time { color: #1d6b39; font-size: 11.5px; font-weight: 800; white-space: nowrap; } /* ---- stats + helpers ---- */ .forum-splits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .forum-split { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; } .forum-split-wide { grid-column: span 2; background: #fff; } .forum-split h4 { margin: 0 0 10px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .split-figure { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 30px; line-height: 1; color: var(--red-primary); } .split-note { margin: 6px 0 0; color: var(--text); font-size: 11.5px; line-height: 1.4; } .helper-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .helper { display: flex; align-items: center; gap: 11px; } .helper-av { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 800; } .helper-main { display: grid; gap: 1px; min-width: 0; } .helper-main strong { font-size: 13px; color: var(--ink); } .helper-main small { color: var(--muted); font-size: 11px; } .helper-count { margin-left: auto; display: grid; justify-items: end; } .helper-count strong { font-size: 14px; color: var(--red-primary); } .helper-count small { color: var(--muted); font-size: 10px; } @media (max-width: 1100px) { .forum-splits { grid-template-columns: repeat(2, 1fr); } .forum-split-wide { grid-column: span 2; } } @media (max-width: 760px) { .route { grid-template-columns: 1fr auto; gap: 6px 10px; } .route-line, .route-end small { display: none; } .route-to { text-align: left; justify-items: start; } .route-topic { grid-column: 1 / -1; } .forum-splits { grid-template-columns: 1fr; } .forum-split-wide { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .route, .route-line i, .live-pill i { animation: none; } .route-line i { left: calc(100% - 8px); } } /* ---- chapter forums: region filter and the member's own chapter ---- */ .region-bar { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; } .region-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 10.5px; font-weight: 800; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .region-chip:hover { border-color: #d0d0d0; } .region-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .home-prompt { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.5; } .home-clear { margin: 4px 0 2px; padding: 0; border: 0; background: 0; color: var(--muted); font-size: 10.5px; font-weight: 700; cursor: pointer; text-decoration: underline; } .home-clear:hover { color: var(--red-primary); } /* Pinned chapter: a yellow edge and a quiet tag, not a different card. */ .forum-item.is-home { border-left: 3px solid var(--yellow); } .forum-mine { padding: 1px 7px; border-radius: 999px; background: var(--yellow-soft); border: 1px solid var(--yellow); color: #696200; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* ========================================================= FORUM HOME — ask, pods, queue ========================================================= */ .ask-hero { padding: 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(700px 220px at 10% 0%, rgba(255,196,0,.26), transparent 62%), #fff; } .ask-hero h3 { margin: 0 0 6px; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; color: var(--ink); } .ask-hero > p { margin: 0 0 16px; color: var(--text); font-size: 14px; max-width: 60ch; } .answer-card { margin-top: 16px; padding: 20px 22px; border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 14px; background: var(--surface); animation: screen-in .26s ease both; } .answer-flag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--yellow-soft); border: 1px solid var(--yellow); color: #696200; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .answer-card h4 { margin: 0 0 8px; font-size: 16px; color: var(--ink); } .answer-card p { margin: 0 0 10px; color: var(--text); font-size: 14px; line-height: 1.7; max-width: 68ch; } .answer-credit { color: var(--muted) !important; font-size: 12px !important; } .answer-credit strong { color: var(--red-primary); } .answer-actions .btn { width: auto; } .answer-miss { border-left-color: var(--red-primary); } /* ---- pods ---- */ .live-sub { color: var(--muted); font-size: 12px; } .pod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pod { padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; } .pod:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,31,31,.07); } .pod-phase { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .pod-active-now { background: var(--red-soft); border: 1px solid rgba(227,30,36,.3); color: var(--red-primary); } .pod-filling-up { background: var(--yellow-soft); border: 1px solid var(--yellow); color: #696200; } .pod-forming { background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .pod h4 { margin: 9px 0 2px; font-size: 15px; color: var(--ink); } .pod-when { margin: 0 0 8px; color: var(--muted); font-size: 11.5px; font-weight: 700; } .pod-note { margin: 0 0 12px; color: var(--text); font-size: 12px; line-height: 1.5; } .pod-bar { height: 4px; border-radius: 4px; background: var(--surface); overflow: hidden; } .pod-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); } .pod-foot { margin: 8px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; } /* ---- queue + routes side by side ---- */ .home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .queue-card { padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; animation: screen-in .24s ease both; } .queue-topic { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .queue-q { margin: 10px 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); } .queue-by { margin: 0 0 16px; color: var(--muted); font-size: 12px; } .queue-actions { display: flex; align-items: center; gap: 10px; } .queue-actions .btn { width: auto; } .queue-skip { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; } .queue-skip:hover { border-color: #d0d0d0; } .queue-count { margin: 12px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; } .queue-done { margin: 0; padding: 24px 22px; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; color: var(--text); font-size: 13px; } @media (max-width: 1100px) { .pod-grid { grid-template-columns: repeat(2, 1fr); } .home-split { grid-template-columns: 1fr; } } @media (max-width: 700px) { .pod-grid { grid-template-columns: 1fr; } } /* ---- getting back out of a forum ---- The way home used to be a small text link in the breadcrumb, which was easy to miss. These are proper buttons, sitting above the heading. */ .forum-up { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .forum-up:hover { background: var(--yellow-soft); border-color: var(--yellow); } .forum-ups { display: flex; flex-wrap: wrap; gap: 8px; } .forum-ups .forum-up { margin-bottom: 14px; } /* ---- live sessions ---- */ .session-list { display: grid; gap: 9px; } .session { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; } .session:hover { border-color: #d8d8d8; box-shadow: 0 10px 24px rgba(31,31,31,.06); } /* Only the live one earns the red edge. */ .session-live { border-left: 3px solid var(--red-primary); } .session-soon { border-left: 3px solid var(--yellow); } .session-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 300px; } .session-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .session-live .session-state { color: var(--red-primary); } .session-soon .session-state { color: #696200; } .session-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-primary); animation: live-ping 2s ease-out infinite; } .session h4 { margin: 2px 0 0; font-size: 15px; color: var(--ink); } .session-topic { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.45; } .session-meta { margin: 2px 0 0; color: var(--muted); font-size: 11px; } .session-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .session-act .btn { width: auto; } .session-remind { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .session-remind:hover { border-color: var(--yellow); background: var(--yellow-soft); } .session-remind.is-set { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .session-forum { padding: 0; border: 0; background: 0; color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; } .session-forum:hover { color: var(--red-primary); text-decoration: underline; } .session-note { flex: 1 1 100%; margin: 4px 0 0; color: var(--muted); font-size: 11.5px; font-style: italic; } @media (max-width: 700px) { .session-act { width: 100%; } } /* ========================================================= NAV DROPDOWN ========================================================= */ .nav-menu { position: relative; display: inline-flex; align-items: center; } .nav-caret { font-style: normal; font-size: 9px; margin-left: 5px; transition: transform .2s ease; display: inline-block; } .nav-menu.is-open .nav-caret { transform: rotate(180deg); } .nav-drop { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px); z-index: 110; display: grid; gap: 2px; min-width: 250px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(31, 31, 31, .14); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .nav-menu.is-open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease, visibility 0s; } /* A hover bridge, so the pointer can cross the gap without the menu closing. */ .nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .nav-drop a { display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; color: var(--ink); transition: background .18s ease; } .nav-drop a:hover { background: var(--yellow-soft); } .nav-drop a[aria-current="page"] { background: var(--surface); } .nav-drop strong { font-size: 13px; } .nav-drop small { color: var(--muted); font-size: 11px; font-weight: 500; } @media (max-width: 980px) { /* In the stacked mobile menu the items simply sit under their parent. */ .nav-menu { display: block; } .nav-drop { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; min-width: 0; padding: 4px 0 4px 12px; border: 0; box-shadow: none; background: transparent; } .nav-caret { display: none; } } /* ========================================================= NEWS & MEDIA ========================================================= */ .media-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } .media-chip { padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .media-chip:hover { border-color: #d0d0d0; } .media-chip.is-active { background: var(--red-primary); border-color: var(--red-primary); color: #fff; } .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .media-card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .media-card:hover { transform: translateY(-3px); border-color: #d8d8d8; box-shadow: 0 14px 34px rgba(31,31,31,.08); } /* The lead stories now rotate in the trending strip above the grid, so the grid itself is uniform cards. */ .media-shot { position: relative; height: 170px; background: var(--yellow-soft); overflow: hidden; } .media-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .media-shot.is-blank { background: linear-gradient(135deg, var(--yellow-soft), var(--red-soft)); } .media-flag { position: absolute; top: 12px; left: 12px; padding: 4px 11px; border-radius: 999px; background: var(--red-primary); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .media-body { padding: 18px 20px; display: grid; align-content: start; gap: 8px; } .media-meta { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .media-body h3 { margin: 0; font-size: 16px; line-height: 1.35; color: var(--ink); } .media-body p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.6; } .media-source { margin-top: 4px; color: var(--red-primary); font-size: 12px; font-weight: 700; } .media-source:hover { text-decoration: underline; } @media (max-width: 1000px) { .media-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .media-grid { grid-template-columns: 1fr; } } /* ---- trending strip ---- */ .media-hero { position: relative; /* Still a fixed height, for the reason the old comment gave: without one .mh-shot has no definite height either, the image's height:100% falls back to auto, and a tall newspaper scan renders at natural size. But 150px was too small to show a picture or a paragraph -- the scan was cropped to a band and the blurb was clamped mid-sentence. 300px gives both room. The strip is taller and everything below moves down, which is the trade that was asked for. 420px rather than 300: the frame's HEIGHT is what sizes a portrait picture, since contain fits the tall side first. The 0.48 newspaper clipping paints 142px wide at 300px tall and 202px at 420px -- the difference between a thumbnail and something you can read a headline off. Landscape slides gain nothing from the extra height and simply sit in more air, which is the cost. */ height: 420px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 12px 30px rgba(31, 31, 31, .06); } /* A track that slides horizontally: the next story comes in from the right as the current one leaves to the left. */ .mh-track { display: flex; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .mh-slide { flex: 0 0 100%; height: 100%; display: grid; grid-template-columns: .8fr 1.2fr; } /* These four pictures run from a 0.48 newspaper clipping to a 1.78 landscape still. No single crop flatters that spread: cover cut the clipping down to a band of headline, and contain alone would have left white rails beside the tall ones. So the frame is filled with a blurred, over-scaled copy of the picture and the whole picture is laid on top -- the same treatment the P4 campaign poster takes in the Connect AP gallery. Nothing is cropped, nothing is barred, and the fill is always in the picture's own colours because it is the picture. --shot is set on the element by the renderer. */ /* No display:grid / place-items:center here, and that is deliberate. Centring the image as a grid item replaces align-self: stretch, which leaves the grid area with no definite height for the img's height:100% to resolve against -- so it fell back to natural size and a 309x647 clipping laid out a 1003px-tall box inside a 298px frame, overflowing it exactly as before. object-fit: contain already centres the picture inside its box; the box just has to be the size of the frame. */ .mh-shot { position: relative; height: 100%; min-height: 0; background: var(--yellow-soft); overflow: hidden; isolation: isolate; } .mh-shot::before { content: ""; position: absolute; /* Past every edge, so the blur has material to work with -- a blur that starts at the edge fades out and the rails come back, paler. */ inset: -10%; background-image: var(--shot); background-size: cover; background-position: center; filter: blur(24px) saturate(1.1); transform: scale(1.06); z-index: 0; } .mh-shot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; } .mh-shot.is-blank { background: linear-gradient(135deg, var(--yellow-soft), var(--red-soft)); } /* padding-right clears the arrows: .slider-next sits at right:14px and is 34px wide, and both arrows are vertically centred -- exactly where the blurb's longest line ends. Without this the last word of a two-line summary sits under the button. */ .mh-body { padding: 18px 68px 30px 26px; display: grid; align-content: center; gap: 7px; overflow: hidden; } .mh-flag { justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--red-primary); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .mh-body h3 { margin: 0; font-size: 17px; line-height: 1.3; color: var(--ink); /* Unclamped. Two lines cut the longer headlines mid-phrase, and at 300px there is room for whatever they run to. */ } .mh-body p { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.55; /* Also unclamped -- this was ending summaries mid-sentence, which is worse than a taller strip. The longest of the four is 342 characters and it fits; a much longer one would want trimming in media-data.js rather than a clamp that hides the problem. */ } .mh-dots { position: absolute; left: 18px; bottom: 9px; z-index: 3; display: flex; gap: 7px; } .mh-dots button { width: 22px; height: 4px; border: 0; border-radius: 4px; padding: 0; background: var(--line); cursor: pointer; transition: background .2s ease, width .2s ease; } .mh-dots button:hover { background: #d0d0d0; } .mh-dots button.is-active { width: 30px; background: var(--red-primary); } .mh-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s ease, background .2s ease, border-color .2s ease; } .media-hero:hover .mh-arrow, .mh-arrow:focus-visible { opacity: 1; } .mh-arrow:hover { background: var(--yellow-soft); border-color: var(--yellow); } .mh-arrow.slider-prev { right: 54px; } .mh-arrow.slider-next { right: 14px; } @media (max-width: 800px) { .media-hero { height: auto; } .mh-slide { grid-template-columns: 1fr; grid-template-rows: 200px auto; } .mh-shot { height: 200px; } .mh-body { padding: 16px 18px 34px; } .mh-body h3 { font-size: 16px; } .mh-body p { font-size: 12px; } .mh-arrow { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mh-track { transition-duration: .01ms; } } /* ---- social links in the footer bar ---- The footer row and the slide-out dock show the same five accounts. The dock is the quick-reach copy on interior pages; this is the one that has always been in the footer, and it stays on every route -- including Home, where the dock is switched off and this would otherwise be the only place they appear. Markup is cloned from the dock by app.js. */ .app-social { display: flex; align-items: center; gap: 6px; margin-left: auto; } .app-social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: color .2s ease, background .2s ease, transform .2s ease; } .app-social svg { width: 19px; height: 19px; fill: currentColor; display: block; } /* An account not yet decided is marked `hidden` in the dock rather than deleted, so the nth-child brand colours below keep lining up with the right platform. display:grid above out-votes the UA sheet's [hidden] rule, so the opt-out has to be stated -- the same way .event-list and .tab-panel do it. Covers both rows: the footer icons are clones of the dock's. */ .app-social a[hidden], .sd-bar a[hidden] { display: none; } /* Each mark takes its own brand colour on hover, on a soft neutral disc. */ .app-social a:hover { background: var(--surface); transform: translateY(-1px); } .app-social a:nth-child(1):hover { color: #000000; } /* X */ .app-social a:nth-child(2):hover { color: #1877F2; } /* Facebook */ .app-social a:nth-child(3):hover { color: #E4405F; } /* Instagram */ .app-social a:nth-child(4):hover { color: #25D366; } /* WhatsApp */ .app-social a:nth-child(5):hover { color: #FF0000; } /* YouTube */ .app-social a:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } @media (max-width: 520px) { .app-social { gap: 2px; } .app-social a { width: 30px; height: 30px; } .app-social svg { width: 17px; height: 17px; } } /* ========================================================= SLIDE-OUT SOCIAL DOCK A slim bar pinned to the right edge, sitting off-screen with only its arrow tab showing. Clicking the tab slides the bar out from the right; clicking again (or Escape, or anywhere else on the page) puts it back. HOW THE HIDING WORKS The whole dock is translated right by exactly the bar's width, so the bar clears the viewport and the tab -- which sits to the LEFT of the bar in the flex row -- is what ends up against the edge. Opening is then simply translate 0. One transform moves both pieces together, so the tab travels with the bar and stays attached to its edge throughout, instead of the two animating apart. The width is a variable rather than a literal because it appears in the closed transform, and the two must agree exactly or the bar peeks out. ========================================================= */ .social-dock { --sd-w: 54px; position: fixed; top: 50%; right: 0; z-index: 60; display: flex; /* centre, not stretch: stretching made the tab as tall as the bar, which read as a red slab down the edge instead of a small handle */ align-items: center; transform: translate(var(--sd-w), -50%); transition: transform .34s cubic-bezier(.22, .8, .3, 1); } .social-dock.is-open { transform: translate(0, -50%); } /* The tab. Rounded on its outer edge only, so closed it reads as a handle growing out of the screen edge rather than a floating button. */ .sd-tab { flex: none; width: 26px; height: 62px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px 0 0 10px; background: var(--red-primary); color: var(--white); cursor: pointer; box-shadow: -3px 0 14px rgba(0, 0, 0, .18); transition: background .2s ease; } .sd-tab:hover { background: #e02200; } .sd-tab:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; } .sd-arrow { font-size: 13px; line-height: 1; transition: transform .34s cubic-bezier(.22, .8, .3, 1); } /* Chevron points left when closed (pull me out) and right when open (put me back), so the control always says what it will do next. */ .social-dock.is-open .sd-arrow { transform: rotate(180deg); } .sd-bar { flex: none; width: var(--sd-w); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0; background: var(--white); border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; box-shadow: -8px 0 28px rgba(0, 0, 0, .12); } .sd-bar a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: color .2s ease, background .2s ease, transform .2s ease; } .sd-bar svg { width: 19px; height: 19px; fill: currentColor; display: block; } /* Each mark takes its own brand colour on hover, on a soft neutral disc. */ .sd-bar a:hover { background: var(--surface); transform: scale(1.12); } .sd-bar a:nth-child(1):hover { color: #000000; } /* X */ .sd-bar a:nth-child(2):hover { color: #1877F2; } /* Facebook */ .sd-bar a:nth-child(3):hover { color: #E4405F; } /* Instagram */ .sd-bar a:nth-child(4):hover { color: #25D366; } /* WhatsApp */ .sd-bar a:nth-child(5):hover { color: #FF0000; } /* YouTube */ .sd-bar a:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } /* Closed, the links are off-screen but still focusable, so a keyboard user would tab into a bar they cannot see. Taking them out of the tab order while closed means the tab button is the only way in, which is the point. */ .social-dock:not(.is-open) .sd-bar { visibility: hidden; } .social-dock:not(.is-open) .sd-bar, .social-dock:not(.is-open) .sd-bar a { pointer-events: none; } /* Not on Home. The home screen already ends in the dock of quick actions and carries the hero and ticker, so the tab is one more thing on the busiest route; it belongs on the quieter interior pages. Removed rather than hidden so nothing about it is focusable or announced there. */ body[data-route="home"] .social-dock { display: none; } /* The member CTA sits bottom-right; on short screens the dock's vertical centre gets close to it, so the dock lifts clear. */ @media (max-height: 620px) { .social-dock { top: 38%; } } @media (max-width: 520px) { .social-dock { --sd-w: 46px; } .sd-bar a { width: 32px; height: 32px; } .sd-bar svg { width: 17px; height: 17px; } .sd-tab { width: 22px; height: 54px; } } @media (prefers-reduced-motion: reduce) { .social-dock, .sd-arrow { transition-duration: .01ms; } } /* ========================================================= AUTH + ADMIN + REQUESTS (Supabase integration) New components layered on the existing yellow/white system. ========================================================= */ .form-error { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--red-soft); color: #8e1818; font-size: 14px; font-weight: 600; } /* Admin tabs reuse the .tab look; this only lays them out. */ .admin-tabs { display: flex; gap: 8px; margin: 18px 0 22px; flex-wrap: wrap; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .admin-table th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .admin-table td.muted { color: var(--muted); } .admin-filter { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; font-weight: 600; } .admin-filter select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; } .admin-controls { display: flex; gap: 20px; flex-wrap: wrap; margin: 14px 0; } .admin-controls label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; } .admin-controls select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 180px; } .admin-thread { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; } /* Status chips + comment bubbles, shared by the member and admin views. */ [class^="status-"], [class*=" status-"] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface); color: var(--ink); } .status-raised { background: var(--yellow-soft); } .status-assigned { background: #dcefff; } .status-in_review { background: #fff0d6; } .status-resolved { background: #dcf5e2; } .status-closed { background: var(--line); color: var(--muted); } .cmt { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; } .cmt-public { background: var(--surface); } .cmt-internal { background: #FFFCD1; border: 1px dashed var(--yellow); } .cmt b { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; color: var(--muted); } /* Member request thread + reply box in NRI Hub. */ .tk-thread { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .tk-reply { display: flex; gap: 8px; margin-top: 8px; } .tk-reply input { flex: 1; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; } @media (max-width: 640px) { .admin-table { display: block; overflow-x: auto; white-space: nowrap; } .admin-controls { gap: 12px; } } /* ========================================================= ADMIN CONSOLE (sidebar layout, CRUD, chips) ========================================================= */ .admin-shell { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; } .admin-side { position: sticky; top: calc(var(--hdr) + 16px); } .admin-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; } .admin-nav-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border: 0; background: transparent; border-radius: 12px; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; } .admin-nav-item span { width: 20px; text-align: center; color: var(--muted); } .admin-nav-item:hover { background: var(--surface); } .admin-nav-item.is-active { background: var(--yellow-soft); color: var(--ink); } .admin-nav-item.is-active span { color: var(--ink); } .admin-main { min-width: 0; } .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .admin-head h3 { margin: 0; } /* Add-forms and the danger delete button */ .admin-add { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .admin-add h4 { margin: 0 0 12px; } .admin-add-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; } .admin-add-grid input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; } .btn-small.danger { color: #8e1818; border-color: #f2c4c4; } .btn-small.danger:hover { background: var(--red-soft); } /* User cards + role/service chips */ .user-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; background: var(--white); } .user-id { display: flex; flex-direction: column; margin-bottom: 10px; } .user-id small { color: var(--muted); } .user-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .mini-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); width: 64px; flex: none; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); } .chip input { accent-color: var(--yellow); } @media (max-width: 820px) { .admin-shell { grid-template-columns: 1fr; gap: 16px; } .admin-side { position: static; } .admin-nav { flex-direction: row; flex-wrap: wrap; } .admin-add-grid { grid-template-columns: 1fr; } .mini-label { width: 100%; } } /* ---- Admin Users: search, role tags, create form ---- */ .admin-search { width: 100%; max-width: 340px; margin: 4px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; } .user-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .user-tags { display: flex; gap: 6px; flex-wrap: wrap; } .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface); color: var(--ink); } .tag-admin, .tag-dev { background: var(--ink); color: #fff; } .tag-team-lead { background: var(--yellow); color: var(--ink); } .tag-volunteer { background: #dcefff; } .tag-reviewer { background: #fff0d6; } .tag-member { background: var(--surface); color: var(--muted); } .user-edit { margin-top: 12px; } .user-edit > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--red-primary); list-style: none; width: max-content; } .user-edit > summary::-webkit-details-marker { display: none; } .user-edit[open] > summary { margin-bottom: 8px; } .nu-hint { margin-top: 10px; font-size: 12px; } /* ========================================================= ADMIN CONSOLE — "Staff console" design system (scoped to .ac) Dark focused sidebar, warm off-white workspace, TDP yellow used only for active state and key figures. Echoes the party journey rail as the request status signature. ========================================================= */ .screen[data-route="admin"] { padding: 0; } .ac { --ac-ink: #17181c; --ac-ink-soft: #24262e; --ac-canvas: #ffffff; /* white ground, matching the site */ --ac-panel: #ffffff; --ac-line: #e9e9e9; --ac-line-2: #f0f0f0; --ac-yellow: #FFC400; /* TDP gold */ --ac-red: #E31E24; /* TDP flag red */ --ac-text: #34353a; --ac-muted: #8c8c8c; display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100dvh - var(--hdr)); background: var(--ac-canvas); color: var(--ac-text); font-family: "Manrope", system-ui, sans-serif; } /* ---- sidebar ---- */ .ac-side { background: var(--ac-ink); color: #dadada; display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: var(--hdr); height: calc(100dvh - var(--hdr)); } .ac-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; } .ac-brand img { border-radius: 8px; } .ac-brand span { display: flex; flex-direction: column; line-height: 1.15; font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: -.01em; color: #fff; font-size: 16px; } .ac-brand small { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #818181; margin-top: 3px; } .ac-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .ac-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 0; background: transparent; border-radius: 10px; font: inherit; font-weight: 600; font-size: 14.5px; color: #b9b9b9; cursor: pointer; text-align: left; border-left: 2px solid transparent; transition: background .15s, color .15s; } .ac-nav-item i { font-style: normal; width: 18px; text-align: center; font-size: 15px; color: #818181; } .ac-nav-item:hover { background: var(--ac-ink-soft); color: #fff; } .ac-nav-item.is-active { background: var(--ac-ink-soft); color: #fff; border-left-color: var(--ac-yellow); } .ac-nav-item.is-active i { color: var(--ac-yellow); } .ac-me { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid #2E2C28; } .ac-me-id { display: flex; flex-direction: column; } .ac-me-id strong { color: #fff; font-size: 14px; } .ac-me-id small { color: #848484; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; } .ac-me-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; } .ac-me-role { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #2c2e37; color: var(--ac-yellow); } .ac-signout { width: 100%; padding: 9px; border: 1px solid #34363f; background: transparent; color: #c8c8c8; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; } .ac-signout:hover { background: var(--ac-ink-soft); color: #fff; } /* ---- main + topbar ---- */ .ac-main { min-width: 0; display: flex; flex-direction: column; } .ac-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 30px; background: var(--ac-panel); border-bottom: 1px solid var(--ac-line); position: sticky; top: var(--hdr); z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,.05); } .ac-top h1 { margin: 0; font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ac-ink); } .ac-top-actions { display: flex; gap: 10px; align-items: center; } .ac-body { padding: 26px 30px 60px; } /* ---- KPI strip ---- */ .ac-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .ac-kpi { background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; } .ac-kpi-hi { border-top: 3px solid var(--ac-yellow); } .ac-kpi-num { font-family: "Montserrat", sans-serif; font-size: 34px; font-weight: 800; color: var(--ac-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; } .ac-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-muted); } /* ---- card surface ---- */ .ac-card { background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: 16px; padding: 8px 20px 12px; box-shadow: 0 1px 2px rgba(20,20,20,.03); } .ac .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0 4px; margin: 0; border: 0; } .ac .admin-head h3 { margin: 0; font-family: "Montserrat", sans-serif; font-size: 15px; font-weight: 700; color: var(--ac-ink); } /* ---- tables ---- */ .ac .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ac .admin-table th { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; color: var(--ac-muted); font-weight: 700; padding: 12px 12px; border-bottom: 1px solid var(--ac-line); text-align: left; } .ac .admin-table td { padding: 13px 12px; border-bottom: 1px solid var(--ac-line-2); vertical-align: middle; } .ac .admin-table tr:last-child td { border-bottom: 0; } .ac .admin-table tbody tr:hover { background: #f9f9f9; } .ac .ac-key { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--ac-ink); } .ac .ac-glyph { font-size: 18px; } .ac .admin-table td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ac-ink); } /* ---- status pills ---- */ .ac [class^="status-"], .ac [class*=" status-"] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ac-line-2); color: var(--ac-ink); } .ac [class^="status-"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; } .ac .status-raised { background: #FFFCCF; color: #7B7300; } .ac .status-assigned { background: #e2effb; color: #235a86; } .ac .status-in_review { background: #ffe9c9; color: #8a5300; } .ac .status-resolved { background: #dcf3e2; color: #216b3a; } .ac .status-closed { background: var(--ac-line); color: var(--ac-muted); } /* ---- filters, controls ---- */ .ac .admin-filter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ac-muted); } .ac .admin-filter select, .ac .admin-controls select, .ac .admin-search, .ac .admin-add-grid input, .ac .admin-add-grid select, .ac .admin-add select { padding: 9px 12px; border: 1px solid var(--ac-line); border-radius: 9px; font: inherit; background: #fff; color: var(--ac-text); } .ac .admin-search { max-width: 320px; } .ac .admin-controls { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 16px; } .ac .admin-controls label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ac-muted); } /* ---- request detail: journey-style status rail (signature) ---- */ .ac-rail { list-style: none; display: flex; gap: 0; margin: 8px 0 20px; padding: 0; } .ac-rail li { flex: 1; position: relative; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-muted); padding-top: 22px; } .ac-rail li span { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ac-line); z-index: 1; } .ac-rail li::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--ac-line); } .ac-rail li:first-child::before { display: none; } .ac-rail li.done { color: var(--ac-ink); } .ac-rail li.done span { background: var(--ac-yellow); border-color: var(--ac-yellow); } .ac-rail li.done::before { background: var(--ac-yellow); } /* ---- comments thread ---- */ .ac .admin-thread { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; } .ac .cmt { margin: 0; padding: 10px 14px; border-radius: 11px; font-size: 14px; line-height: 1.5; } .ac .cmt-public { background: #f5f5f5; } .ac .cmt-internal { background: #fff7d6; border: 1px dashed var(--ac-yellow); } .ac .cmt b { text-transform: uppercase; font-size: 10px; letter-spacing: .08em; color: var(--ac-muted); font-weight: 700; } /* ---- add-forms ---- */ .ac .admin-add { margin-top: 20px; padding: 20px; border: 1px solid var(--ac-line); border-radius: 16px; background: #fafafa; } .ac .admin-add h4 { margin: 0 0 14px; font-family: "Montserrat", sans-serif; font-size: 14px; color: var(--ac-ink); } .ac .admin-add-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .ac .btn-small.danger { color: #9a1b0b; border-color: #f0c7c0; background: #fff; } .ac .btn-small.danger:hover { background: #fdeae6; } /* ---- users ---- */ .ac .user-card { border: 1px solid var(--ac-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; background: var(--ac-panel); } .ac .user-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ac .user-id { display: flex; flex-direction: column; } .ac .user-id strong { color: var(--ac-ink); } .ac .user-id small { color: var(--ac-muted); font-size: 12.5px; } .ac .user-tags { display: flex; gap: 6px; flex-wrap: wrap; } .ac .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--ac-line-2); color: var(--ac-ink); } .ac .tag-admin, .ac .tag-dev { background: var(--ac-ink); color: #fff; } .ac .tag-team-lead { background: var(--ac-yellow); color: var(--ac-ink); } .ac .tag-volunteer { background: #e2effb; color: #235a86; } .ac .tag-reviewer { background: #ffe9c9; color: #8a5300; } .ac .tag-member { background: var(--ac-line-2); color: var(--ac-muted); } .ac .user-edit { margin-top: 12px; border-top: 1px solid var(--ac-line-2); padding-top: 10px; } .ac .user-edit > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ac-sun-ink); list-style: none; width: max-content; } .ac .user-edit > summary::-webkit-details-marker { display: none; } .ac .user-line { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .ac .mini-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-muted); width: 64px; flex: none; padding-top: 6px; font-weight: 700; } .ac .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--ac-line); border-radius: 999px; font-size: 13px; cursor: pointer; background: #fff; } .ac .chip input { accent-color: var(--ac-yellow); } .ac .form-error { margin: 10px 0 0; padding: 9px 13px; border-radius: 9px; background: #fdeae6; color: #9a1b0b; font-size: 13px; font-weight: 600; } /* ---- responsive ---- */ @media (max-width: 900px) { .ac { grid-template-columns: 1fr; } .ac-side { position: static; height: auto; } .ac-nav { flex-direction: row; flex-wrap: wrap; } .ac-me { margin-top: 16px; } .ac-kpis { grid-template-columns: repeat(2, 1fr); } .ac-top, .ac-body { padding-left: 18px; padding-right: 18px; } .ac .admin-add-grid { grid-template-columns: 1fr; } .ac .admin-table { display: block; overflow-x: auto; white-space: nowrap; } } /* ========================================================= ADMIN CONSOLE v2 — warm "staff console" (final) Rising-sun brand, cream workspace, sunburst status stepper. Overrides the earlier .ac system. Typography was Fraunces + Inter + JetBrains Mono -- a console type system of its own, on the one part of the site only signed-in people see. It now uses the site's own faces: Lora where Fraunces was, Manrope where Inter was, and the system mono stack the membership card number already used in place of JetBrains Mono. Same roles, same sizes and weights; only the families change, and the console stops needing a second webfont request. ========================================================= */ .ac { --ac-sun: #FFC400; --ac-sun-deep: #E0A600; --ac-ember: #E31E24; /* TDP gold + flag red */ /* --ac-sun-deep is a FILL: 1.43:1 on white, so it can hold dark ink but cannot be ink. Roughly 25 rules were setting it as a text colour, which is why small gold labels across both consoles were ghosts. This is the same hue taken down to where it reads -- 7.1:1 on white. Use --ac-sun-ink for text, --ac-sun-deep for borders, fills and accent-color. */ --ac-sun-ink: #605A00; --ac-ink: #1A1A1A; --ac-ink-soft: #4A4A4A; --ac-faint: #8A8A8A; --ac-cream: #ffffff; --ac-cream2: #FFF6DB; --ac-paper: #ffffff; --ac-line: #ECECEC; --ac-line-soft: #F4F4F4; --raised-bg:#FFF3D6; --raised-fg:#6E6700; --assigned-bg:#E4EDFF; --assigned-fg:#2C4D8C; --review-bg:#EFE6FF; --review-fg:#5B3EA6; --resolved-bg:#DFF4E4; --resolved-fg:#17692F; --closed-bg:#ECE7DC; --closed-fg:#6B6250; display: grid; grid-template-columns: 264px minmax(0,1fr); min-height: calc(100dvh - var(--hdr)); background: var(--ac-cream); color: var(--ac-ink); font-family: "Manrope", sans-serif; letter-spacing: -.006em; } /* ---- sidebar ---- */ .ac-side { background: var(--ac-ink); color: #F2ECDD; display: flex; flex-direction: column; padding: 20px 16px; position: sticky; top: var(--hdr); height: calc(100dvh - var(--hdr)); } .ac-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; } .ac-mark { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 50% 120%, var(--ac-sun), var(--ac-sun-deep) 72%); box-shadow: 0 6px 18px rgba(255,196,0,.32); } .ac-mark svg { width: 25px; height: 25px; } .ac-brand-txt { display: flex; flex-direction: column; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17px; color: #fff; line-height: 1; } .ac-brand-txt small { font-family: "Manrope", sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .02em; color: #B6AD97; margin-top: 5px; } .ac-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .ac-nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; background: transparent; border-radius: 10px; font: inherit; font-weight: 500; font-size: 14px; color: #D9D1BF; cursor: pointer; text-align: left; transition: background .15s, color .15s; } .ac-nav-item i { font-style: normal; width: 18px; text-align: center; opacity: .85; } .ac-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; } .ac-nav-item.is-active { background: linear-gradient(90deg, rgba(255,196,0,.18), rgba(255,196,0,.04)); color: #fff; } .ac-nav-item.is-active i { color: var(--ac-sun); opacity: 1; } .ac-me { margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid rgba(255,255,255,.08); } .ac-me-id { display: flex; flex-direction: column; } .ac-me-id strong { color: #fff; font-size: 14px; } .ac-me-id small { color: #B6AD97; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; } .ac-me-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 11px; } .ac-me-role { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255,196,0,.16); color: var(--ac-sun); } .ac-signout { width: 100%; padding: 9px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #E8E0CE; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; } .ac-signout:hover { background: rgba(255,255,255,.06); color: #fff; } /* ---- main + topbar ---- */ .ac-main { min-width: 0; display: flex; flex-direction: column; } .ac-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; background: var(--ac-cream); border-bottom: 1px solid var(--ac-line); position: sticky; top: var(--hdr); z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,.05); } .ac-top h1 { margin: 0; font-family: "Lora", Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ac-ink); } .ac-top-actions { display: flex; gap: 10px; align-items: center; } .ac-body { padding: 26px 32px 64px; } /* ---- KPI strip ---- */ .ac-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; } .ac-kpi { position: relative; background: var(--ac-paper); border: 1px solid var(--ac-line); border-radius: 16px; padding: 18px 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0,.05); } .ac-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac-line); } .ac-kpi-hi::before { background: var(--ac-sun); } .ac-kpi-num { display: block; font-family: "Manrope", sans-serif; font-size: 33px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); line-height: 1.05; } .ac-kpi-label { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ac-faint); } /* ---- cards ---- */ .ac-card { background: var(--ac-paper); border: 1px solid var(--ac-line); border-radius: 18px; padding: 6px 22px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0,.05); } .ac .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 6px; margin: 0; border: 0; } .ac .admin-head h3 { margin: 0; font-family: "Lora", Georgia, serif; font-size: 17px; font-weight: 600; color: var(--ac-ink); } /* ---- tables ---- */ .ac .admin-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ac .admin-table th { text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; color: var(--ac-faint); font-weight: 700; padding: 12px 12px; border-bottom: 1px solid var(--ac-line); text-align: left; } .ac .admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--ac-line-soft); vertical-align: middle; color: var(--ac-ink-soft); } .ac .admin-table tr:last-child td { border-bottom: 0; } .ac .admin-table tbody tr:hover { background: #f9f9f9; } .ac .ac-ref { display: inline-flex; align-items: center; gap: 7px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--ac-ink); } .ac .ac-ref::before { content: ""; width: 5px; height: 15px; border-radius: 3px; background: var(--ac-sun); flex: none; } .ac .ac-key { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--ac-ink); } .ac .ac-glyph { font-size: 18px; } /* ---- status pills ---- */ .ac [class^="status-"], .ac [class*=" status-"] { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ac-cream2); color: var(--ac-ink-soft); } .ac [class^="status-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ac .status-raised { background: var(--raised-bg); color: var(--raised-fg); } .ac .status-assigned { background: var(--assigned-bg); color: var(--assigned-fg); } .ac .status-in_review { background: var(--review-bg); color: var(--review-fg); } .ac .status-resolved { background: var(--resolved-bg); color: var(--resolved-fg); } .ac .status-closed { background: var(--closed-bg); color: var(--closed-fg); } /* ---- filters, controls, inputs ---- */ .ac .admin-filter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ac-faint); } .ac select, .ac input, .ac textarea { color: var(--ac-ink); } .ac .admin-filter select, .ac .admin-controls select, .ac .admin-search, .ac .admin-add-grid input, .ac .admin-add-grid select, .ac .admin-add select, .ac #dCommentBody { padding: 9px 12px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; background: #fff; } .ac .admin-search { max-width: 340px; margin: 2px 0 16px; } .ac .admin-controls { display: flex; gap: 24px; flex-wrap: wrap; margin: 8px 0 18px; } .ac .admin-controls label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ac-faint); } /* ---- buttons (console) ---- */ .ac .btn { border-radius: 10px; font-weight: 600; } .ac .btn-dark { background: var(--ac-sun); color: var(--ac-ink); box-shadow: 0 2px 0 var(--ac-sun-deep); } .ac .btn-dark:hover { background: #FFF02A; } .ac .btn-outline { background: #fff; border: 1px solid var(--ac-line); color: var(--ac-ink); } .ac .btn-outline:hover { background: var(--ac-cream2); } .ac .btn-small { padding: 7px 13px; font-size: 13px; } .ac .btn-small.danger { color: #9a1b0b; border-color: #EBC7BF; background: #fff; box-shadow: none; } .ac .btn-small.danger:hover { background: #FCEAE5; } /* ---- request detail: sunburst status stepper (signature) ---- */ .ac-rail { list-style: none; display: flex; margin: 6px 0 22px; padding: 0; } .ac-rail li { flex: 1; position: relative; text-align: center; padding-top: 27px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-faint); } .ac-rail li span { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ac-line); z-index: 1; } .ac-rail li::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--ac-line); } .ac-rail li:first-child::before { display: none; } .ac-rail li.done { color: var(--ac-ink); } .ac-rail li.done span { background: var(--ac-sun); border-color: var(--ac-sun-deep); } .ac-rail li.done::before, .ac-rail li.current::before { background: var(--ac-sun-deep); } .ac-rail li.current { color: var(--ac-sun-ink); } .ac-rail li.current span { background: var(--ac-sun); border-color: var(--ac-sun-deep); } .ac-rail li.current span::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ac-sun); opacity: .5; animation: acpulse 2.4s ease-out infinite; } @keyframes acpulse { 0% { transform: scale(.7); opacity: .6; } 70% { transform: scale(1.3); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ac-rail li.current span::after { animation: none; } } .ac #adminDetail > h3 { font-family: "Lora", Georgia, serif; font-weight: 600; } /* ---- comments ---- */ .ac .admin-thread { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; } .ac .cmt { margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--ac-ink-soft); } .ac .cmt-public { background: var(--ac-cream2); } .ac .cmt-internal { background: #FFF7D6; border: 1px solid #F2EDA8; } .ac .cmt b { text-transform: uppercase; font-size: 10px; letter-spacing: .08em; color: var(--ac-faint); font-weight: 700; } /* ---- add forms ---- */ .ac .admin-add { margin-top: 22px; padding: 22px; border: 1px solid var(--ac-line); border-radius: 18px; background: #f9f9f9; } .ac .admin-add h4 { margin: 0 0 14px; font-family: "Lora", Georgia, serif; font-size: 15px; font-weight: 600; color: var(--ac-ink); } .ac .admin-add-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 14px; } /* ---- users ---- */ .ac .user-card { border: 1px solid var(--ac-line); border-radius: 16px; padding: 16px 18px; margin-bottom: 11px; background: var(--ac-paper); box-shadow: 0 1px 2px rgba(0, 0, 0,.04); } .ac .user-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ac .user-id { display: flex; flex-direction: column; } .ac .user-id strong { color: var(--ac-ink); } .ac .user-id small { color: var(--ac-faint); font-size: 12.5px; } .ac .user-tags { display: flex; gap: 6px; flex-wrap: wrap; } .ac .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--ac-cream2); color: var(--ac-ink-soft); } .ac .tag-admin, .ac .tag-dev { background: var(--ac-ink); color: #fff; } .ac .tag-team-lead { background: var(--ac-sun); color: var(--ac-ink); } .ac .tag-volunteer { background: var(--assigned-bg); color: var(--assigned-fg); } .ac .tag-reviewer { background: var(--review-bg); color: var(--review-fg); } .ac .tag-member { background: var(--ac-cream2); color: var(--ac-faint); } .ac .user-edit { margin-top: 12px; border-top: 1px solid var(--ac-line-soft); padding-top: 12px; } .ac .user-edit > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ac-sun-ink); list-style: none; width: max-content; } .ac .user-edit > summary::-webkit-details-marker { display: none; } .ac .user-line { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .ac .mini-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-faint); width: 62px; flex: none; padding-top: 7px; font-weight: 700; } .ac .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ac-line); border-radius: 999px; font-size: 13px; cursor: pointer; background: #fff; } .ac .chip:has(input:checked) { background: var(--ac-sun); border-color: var(--ac-sun-deep); font-weight: 600; } .ac .chip input { accent-color: var(--ac-sun-deep); } .ac .form-error { margin: 10px 0 0; padding: 9px 13px; border-radius: 10px; background: #FCEAE5; color: #9a1b0b; font-size: 13px; font-weight: 600; } .ac .nu-hint { color: var(--ac-faint); } /* ---- responsive ---- */ @media (max-width: 900px) { .ac { grid-template-columns: 1fr; } .ac-side { position: static; height: auto; } .ac-nav { flex-direction: row; flex-wrap: wrap; } .ac-me { margin-top: 16px; } .ac-kpis { grid-template-columns: repeat(2,1fr); } .ac-top, .ac-body { padding-left: 18px; padding-right: 18px; } .ac .admin-add-grid { grid-template-columns: 1fr; } .ac .admin-table { display: block; overflow-x: auto; white-space: nowrap; } } /* ========================================================= ADMIN CONSOLE v3 — compact + popups (modals) ========================================================= */ /* tighter chrome: reclaim the wasted header/body space */ .ac-top { padding: 12px 30px; } .ac-top h1 { font-size: 20px; } .ac-body { padding: 20px 30px 56px; } .ac-kpis { gap: 12px; margin-bottom: 18px; } .ac-kpi { padding: 14px 18px; } .ac-kpi-num { font-size: 28px; } .ac-card { padding: 4px 20px 10px; } .ac .admin-table th { padding: 10px 12px; } .ac .admin-table td { padding: 11px 12px; } .ac .admin-head { padding: 12px 0 4px; } /* compact user rows (no more inline-expand that grew the page) */ .ac-card-flush { padding: 0; overflow: hidden; } .ac .user-row { display: grid; grid-template-columns: 1fr auto minmax(72px,auto) auto; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--ac-line-soft); } .ac .user-row:last-child { border-bottom: 0; } .ac .user-row:hover { background: #f9f9f9; } .ac .user-svc { font-size: 12.5px; white-space: nowrap; text-align: right; } /* modal / popup */ .ac .ac-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0,.48); display: grid; place-items: center; z-index: 9999; padding: 20px; animation: acfade .14s ease; } .ac .ac-modal { background: #fff; border-radius: 20px; width: min(560px, 100%); max-height: 88vh; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0,.32); animation: acpop .18s cubic-bezier(.2,.8,.3,1); } .ac .ac-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--ac-line); position: sticky; top: 0; background: #fff; z-index: 1; } .ac .ac-modal-head h3 { font-family: "Lora", Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ac-ink); margin: 0; } .ac .ac-modal-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--ac-faint); cursor: pointer; padding: 0 6px; border-radius: 8px; } .ac .ac-modal-x:hover { background: var(--ac-cream2); color: var(--ac-ink); } .ac .ac-modal-body { padding: 22px; } .ac .ac-modal-body .admin-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .ac .ac-modal-body .admin-add-grid input, .ac .ac-modal-body .admin-add-grid select { padding: 10px 12px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; background: #fff; width: 100%; } .ac .ac-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .ac .chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; max-height: 210px; overflow: auto; flex: 1; } @keyframes acfade { from { opacity: 0; } to { opacity: 1; } } @keyframes acpop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ac .ac-scrim, .ac .ac-modal { animation: none; } } @media (max-width: 640px) { .ac .user-row { grid-template-columns: 1fr auto; row-gap: 8px; } .ac .user-svc { text-align: left; } .ac .ac-modal-body .admin-add-grid { grid-template-columns: 1fr; } } /* ========================================================= ADMIN ROUTE — full-screen console (hide marketing chrome) The site header/footer/CTA/ticker are for the public site; the staff console owns the whole viewport instead of sitting under the nav. ========================================================= */ body[data-route="admin"] .site-header, body[data-route="admin"] #memberCta, body[data-route="admin"] .member-cta, body[data-route="admin"] #socialDock, body[data-route="admin"] .social-dock, body[data-route="admin"] .app-footer, body[data-route="admin"] #newsTicker, body[data-route="admin"] .news-ticker { display: none !important; } /* No header to clear on this route, so the console starts at the very top. */ body[data-route="admin"] { --hdr: 0px; } body[data-route="admin"] .app-shell, body[data-route="admin"] #app { padding-top: 0 !important; } /* ---- Admin: back-to-site link, nav badge, locked chip ---- */ .ac-backlink { display: block; margin: 8px 4px 0; padding: 9px 12px; border-radius: 10px; color: #B6AD97; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; } .ac-backlink:hover { background: rgba(255,255,255,.06); color: #fff; } .ac-nav-item { position: relative; } .ac-nav-badge { margin-left: auto; min-width: 20px; text-align: center; font-size: 11px; font-weight: 700; background: var(--ac-sun); color: var(--ac-ink); padding: 1px 7px; border-radius: 999px; } .ac .chip-locked { opacity: .6; cursor: not-allowed; } .ac .chip-locked input { cursor: not-allowed; } /* ========================================================= JOIN — "Become a verified member" enrollment Split layout: value + a live membership card on the left, the enrolment form on the right. Marketing-side palette (TDP yellow). ========================================================= */ /* The header offset was being counted twice. body already carries padding-top: var(--hdr) to clear the fixed header, and this added another var(--hdr) on top of it, so the page opened on ~88px of empty space before anything began. Only the 44px of breathing room was ever intended. min-height is 100% rather than 100vh for the same reason: this section lives inside .screen, which is already the full height of the app shell below the header, so 100vh made it a header taller than its own container and put a scroll on a page that fits. */ .join-screen { padding: 44px 0 72px; min-height: 100%; background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); } .join-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } /* Sticky inside .screen, which is the scroll container -- so this offset is measured from the top of that container, not the viewport, and must not carry the header height either. */ .join-aside { position: sticky; top: 40px; } .join-title { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.03em; margin: 10px 0 14px; color: var(--ink); line-height: 1.04; } .join-lead { font-size: 16px; line-height: 1.65; color: var(--text); max-width: 470px; } /* Live membership card — the signature element. */ .mcard { position: relative; overflow: hidden; margin: 26px 0 30px; width: 100%; max-width: 420px; aspect-ratio: 1.62 / 1; border-radius: 20px; padding: 22px 24px; color: var(--ink); background: linear-gradient(135deg, #FFF248 0%, var(--yellow) 48%, #F0DF00 100%); box-shadow: 0 24px 50px rgba(214,199,0,.32), inset 0 1px 0 rgba(255,255,255,.55); display: flex; flex-direction: column; } .mcard-sheen { position: absolute; inset: 0; background: radial-gradient(120% 85% at 100% 0%, rgba(255,255,255,.55), transparent 55%); pointer-events: none; } .mcard-top { display: flex; align-items: center; gap: 9px; position: relative; } .mcard-top img { border-radius: 7px; background: #fff; padding: 2px; } .mcard-brand { font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: .02em; font-size: 15px; } .mcard-name { margin-top: auto; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.01em; position: relative; transition: color .2s; } .mcard:not(.is-filled) .mcard-name { color: rgba(31,31,31,.42); } .mcard-meta { font-size: 13px; font-weight: 600; color: rgba(31,31,31,.72); margin-top: 4px; position: relative; } .mcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; position: relative; } .mcard-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: .14em; font-size: 13px; } .mcard-verified { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #17692f; } /* Benefits */ .join-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; max-width: 450px; } .join-benefits li { display: grid; grid-template-columns: 9px 1fr; gap: 13px; align-items: start; } .join-benefits li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); margin-top: 6px; box-shadow: 0 0 0 4px var(--yellow-soft); } .join-benefits b { font-weight: 800; font-size: 14.5px; color: var(--ink); } .join-benefits span { display: block; font-size: 13.5px; color: var(--text); margin-top: 2px; line-height: 1.5; } /* Form panel */ .join-panel { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 30px 32px; box-shadow: var(--shadow); } .join-panel .auth-switch { margin-bottom: 6px; } .plan-toggle { border: 0; padding: 0; margin: 16px 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .plan-toggle .plan { position: relative; display: block; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; cursor: pointer; transition: border-color .15s, background .15s; } .plan-toggle .plan input { position: absolute; opacity: 0; width: 0; height: 0; } .plan-toggle .plan.is-selected { border-color: var(--yellow); background: var(--yellow-soft); } .plan-toggle .plan:focus-within { box-shadow: 0 0 0 3px rgba(255,196,0,.3); } .plan-toggle .pt-body { display: flex; flex-direction: column; gap: 3px; } .plan-toggle .pt-body strong { font-weight: 800; font-size: 15px; color: var(--ink); } .plan-toggle .pt-body small { font-size: 12px; color: var(--muted); } .plan-summary { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; } .join-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .join-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text); } .join-form .app-form-wide { grid-column: 1 / -1; } .join-form input, .join-form select { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: #fff; } .join-form input:focus, .join-form select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,196,0,.28); } .join-form .app-form-check { flex-direction: row; align-items: center; gap: 9px; font-weight: 500; color: var(--muted); font-size: 13px; } .join-form .app-form-check input { accent-color: var(--yellow); width: 17px; height: 17px; } .join-form .btn { margin-top: 4px; justify-content: center; } .join-fineprint { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); margin: 2px 0 0; } .join-note { grid-column: 1 / -1; background: var(--yellow-soft); color: #696200; border: 1px solid var(--yellow); padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; } @media (max-width: 900px) { .join-wrap { grid-template-columns: 1fr; gap: 30px; } .join-aside { position: static; } .mcard { max-width: 380px; } } @media (max-width: 560px) { .join-form { grid-template-columns: 1fr; } .join-panel { padding: 22px 18px 26px; border-radius: 18px; } } /* Join benefits as a 2x2 card grid (was a stacked list) */ .join-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 480px; margin-top: 6px; } .jb { border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; background: #fff; } /* The four benefit icons are line art with no plate of their own, so the chip is painted here -- the same chip .hub-card-ic gives the NRI Hub icons, so the two screens use one icon language. They were multi-colour drawings on their own gradient plate: dark strokes, white fills, a red accent and a yellow band each. Beside the Hub's single red stroke on a plain chip they read as busy and dark, which is what they were. Tried and reverted: yellow strokes on a red chip, to pull the party symbol's own pairing onto this screen. It measured fine -- 3.88:1 -- but red plates under four icons carried far more weight on the page than four line icons should, so the soft-yellow chip is back. */ .jb-ico { display: block; width: 34px; height: 34px; margin-bottom: 10px; padding: 5px; background: var(--yellow-soft); border: 1px solid #FFC400; border-radius: 10px; box-sizing: border-box; } .jb b { display: block; font-weight: 800; font-size: 14px; color: var(--ink); } .jb span { display: block; font-size: 12.5px; color: var(--text); margin-top: 3px; line-height: 1.45; } @media (max-width: 560px) { .join-benefits { grid-template-columns: 1fr; } } /* ========================================================= MEMBER PORTAL (reuses the .ac console shell) ========================================================= */ /* Full-screen on the account route too */ body[data-route="account"] .site-header, body[data-route="account"] #memberCta, body[data-route="account"] .member-cta, body[data-route="account"] #socialDock, body[data-route="account"] .social-dock, body[data-route="account"] .app-footer, body[data-route="account"] #newsTicker, body[data-route="account"] .news-ticker { display: none !important; } body[data-route="account"] { --hdr: 0px; } body[data-route="account"] .app-shell, body[data-route="account"] #app { padding-top: 0 !important; } /* Card view */ .mp-cardwrap { display: grid; grid-template-columns: 380px 1fr; gap: 22px; align-items: start; } .mp-card { max-width: 380px; } .mp-details h3 { font-family: "Lora", Georgia, serif; font-size: 16px; margin: 0 0 12px; } .mp-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ac-line-soft); font-size: 14px; } .mp-row:last-child { border-bottom: 0; } .mp-row span { color: var(--ac-faint); } .mp-row b { color: var(--ac-ink); font-weight: 600; text-align: right; } /* Raise view */ .mp-form { max-width: 560px; } .mp-form h3 { font-family: "Lora", Georgia, serif; font-size: 17px; margin: 4px 0 16px; } .mp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: 600; font-size: 13px; color: var(--ac-faint); } .mp-field input, .mp-field select, .mp-field textarea { padding: 10px 12px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; color: var(--ac-ink); background: #fff; } .mp-form-actions { margin-top: 4px; } .mp-note { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: var(--ac-cream2); font-size: 14px; color: var(--ac-ink-soft); } /* Requests view */ .mp-req { margin-bottom: 14px; } .mp-req-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 4px; } .mp-req-head strong { font-size: 15px; color: var(--ac-ink); } .mp-req-head .mcard-id { color: var(--ac-ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; letter-spacing: .08em; } .mp-rail { margin: 10px 0 14px; } .mp-req-desc { color: var(--ac-ink-soft); font-size: 14px; line-height: 1.55; margin: 4px 0 10px; } .mp-thread { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; } .mp-reply { display: flex; gap: 8px; } .mp-reply input { flex: 1; padding: 9px 12px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; } .mp-empty { text-align: center; padding: 36px 20px; } .mp-empty h3 { font-family: "Lora", Georgia, serif; margin: 0 0 6px; } .mp-empty .btn { margin-top: 14px; } /* Membership (subscription) view */ .mp-sub-lead { font-size: 15px; color: var(--ac-ink-soft); margin: 0 0 20px; max-width: 640px; } .mp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; } .mp-plan { border: 1px solid var(--ac-line); border-radius: 18px; padding: 22px; background: #fff; } .mp-plan.is-current { border-color: var(--ac-sun-deep); box-shadow: 0 0 0 3px rgba(255,196,0,.22); } .mp-plan-top { display: flex; align-items: baseline; justify-content: space-between; } .mp-plan-top strong { font-family: "Lora", Georgia, serif; font-size: 22px; } .mp-plan-top span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ac-faint); } .mp-plan-tag { color: var(--ac-ink-soft); font-size: 14px; margin: 8px 0 14px; } .mp-plan ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; } .mp-plan li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ac-ink-soft); } .mp-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ac-sun-ink); font-weight: 800; } .mp-plan-current { font-size: 13px; font-weight: 700; color: var(--ac-sun-ink); } @media (max-width: 760px) { .mp-cardwrap { grid-template-columns: 1fr; } .mp-plans { grid-template-columns: 1fr; } } /* ========================================================= CONSOLE / PORTAL — light sidebar to match the main site (white + yellow, real logo, line icons) — overrides the dark v2 shell. ========================================================= */ .ac-side { background: #fff; color: var(--ac-ink); border-right: 1px solid var(--ac-line); } .ac-logo { border-radius: 9px; } .ac-brand-txt { color: var(--ac-ink); } .ac-brand-txt small { color: var(--ac-faint); } .ac-ico { width: 19px; height: 19px; flex: none; color: var(--ac-faint); } .ac-nav-item { color: var(--ac-ink-soft); } .ac-nav-item:hover { background: var(--ac-cream2); color: var(--ac-ink); } .ac-nav-item.is-active { background: var(--yellow-soft); color: var(--ac-ink); } .ac-nav-item.is-active .ac-ico { color: var(--ac-sun-ink); } .ac-me { border-top: 1px solid var(--ac-line); } .ac-me-id strong { color: var(--ac-ink); } .ac-me-id small { color: var(--ac-faint); } .ac-me-role { background: var(--yellow-soft); color: #7B7300; } .ac-signout { border-color: var(--ac-line); color: var(--ac-ink-soft); } .ac-signout:hover { background: var(--ac-cream2); color: var(--ac-ink); } .ac-backlink { color: var(--ac-faint); } .ac-backlink:hover { background: var(--ac-cream2); color: var(--ac-ink); } /* Three membership tiers */ .plan-toggle-3 { grid-template-columns: repeat(3, 1fr); } .mp-plans { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .plan-toggle-3 { grid-template-columns: 1fr; } } @media (max-width: 900px) { .mp-plans { grid-template-columns: 1fr; } } /* ========================================================= MEMBER PORTAL v2 — polished raise form, requests, plans Overrides the plainer first-pass styles. ========================================================= */ .mp-form { max-width: 640px; } .mp-form h3 { font-family: "Lora", Georgia, serif; font-size: 21px; font-weight: 600; margin: 6px 0 4px; color: var(--ac-ink); } .mp-form-sub { color: var(--ac-faint); font-size: 14px; margin: 0 0 22px; line-height: 1.5; } .mp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mp-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .mp-field, .mp-field > span { font-weight: 700; font-size: 12.5px; color: var(--ac-ink-soft); letter-spacing: .01em; } .mp-field input[type=text], .mp-field input[type=email], .mp-field input[type=tel], .mp-field select, .mp-field textarea { padding: 11px 13px; border: 1px solid var(--ac-line); border-radius: 11px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ac-ink); background: #fff; } .mp-field input:focus, .mp-field select:focus, .mp-field textarea:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.28); } .mp-field textarea { resize: vertical; line-height: 1.55; } /* Priority pills */ .mp-prio { display: flex; gap: 8px; flex-wrap: wrap; } .mp-prio-opt { padding: 8px 17px; border: 1px solid var(--ac-line); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; font-size: 13px; color: var(--ac-ink-soft); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .mp-prio-opt:hover { background: var(--ac-cream2); } .mp-prio-opt.is-on { border-color: transparent; color: #fff; } .mp-prio-opt.prio-low.is-on { background: #6E6E6E; } .mp-prio-opt.prio-normal.is-on { background: var(--ac-ink); } .mp-prio-opt.prio-high.is-on { background: #8A8000; } .mp-prio-opt.prio-urgent.is-on { background: #D23B22; } /* Upload dropzone */ .mp-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; border: 1.5px dashed var(--ac-line); border-radius: 14px; background: #fbfbfb; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; } .mp-drop:hover { border-color: var(--ac-sun-deep); background: #FFFBEC; } .mp-drop-ico { font-size: 22px; color: var(--ac-sun-ink); } .mp-drop b { font-size: 14px; color: var(--ac-ink); font-weight: 700; } .mp-drop small { font-size: 12px; color: var(--ac-faint); } .mp-files { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; } .mp-file { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--ac-line); border-radius: 10px; background: #fff; font-size: 13px; } .mp-file-name { flex: 1; color: var(--ac-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-file-size { color: var(--ac-faint); font-size: 12px; flex: none; } .mp-file-x { border: 0; background: transparent; color: var(--ac-faint); font-size: 19px; cursor: pointer; line-height: 1; padding: 0 4px; } .mp-file-x:hover { color: #D23B22; } .mp-form-actions { margin-top: 8px; } .mp-form-actions .btn { padding: 12px 24px; } .mp-note { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #DFF4E4; color: #17692F; font-size: 14px; font-weight: 600; } .mp-note a { color: #17692F; text-decoration: underline; } /* My requests — ticket cards */ .mp-req { margin-bottom: 16px; padding: 18px 20px 20px; } .mp-req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .mp-req-id { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .mp-req-id .mcard-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .05em; color: var(--ac-ink); background: var(--ac-cream2); padding: 5px 9px; border-radius: 8px; flex: none; margin-top: 1px; } .mp-req-title strong { display: block; font-size: 15.5px; color: var(--ac-ink); } .mp-req-title small { display: block; font-size: 12.5px; color: var(--ac-faint); margin-top: 3px; } .mp-req-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .prio-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .prio-badge.prio-high { background: #FFECD1; color: #9a5b00; } .prio-badge.prio-urgent { background: #FBDDD6; color: #9a1b0b; } .prio-badge.prio-low { background: #f0f0f0; color: #5b6472; } .mp-req .mp-rail { margin: 18px 0 14px; } .mp-req-desc { color: var(--ac-ink-soft); font-size: 14px; line-height: 1.6; margin: 4px 0 12px; } .mp-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .mp-att { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--ac-line); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ac-ink); cursor: pointer; } .mp-att:hover { background: var(--ac-cream2); } .mp-att-ico { font-size: 14px; } .mp-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mp-thread:empty { margin: 0; } .mp-reply { display: flex; gap: 8px; } .mp-reply input { flex: 1; padding: 10px 13px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; } .mp-reply input:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.25); } .mp-empty { text-align: center; padding: 44px 20px; } .mp-empty h3 { font-family: "Lora", Georgia, serif; font-size: 20px; margin: 0 0 6px; } /* Membership plans v2 */ .mp-sub-lead { font-size: 15px; color: var(--ac-ink-soft); margin: 0 0 22px; max-width: 680px; line-height: 1.5; } .mp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 940px; } .mp-plan { border: 1px solid var(--ac-line); border-radius: 20px; padding: 26px 24px; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s; } .mp-plan:hover { box-shadow: 0 14px 40px rgba(0, 0, 0,.1); } .mp-plan.is-current { border-color: var(--ac-sun-deep); box-shadow: 0 0 0 3px rgba(255,196,0,.22); } .mp-plan-top { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; } .mp-plan-top strong { font-family: "Lora", Georgia, serif; font-size: 25px; font-weight: 600; color: var(--ac-ink); } .mp-plan-top span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ac-faint); } .mp-plan-tag { color: var(--ac-ink-soft); font-size: 13.5px; margin: 8px 0 18px; line-height: 1.45; } .mp-plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; flex: 1; } .mp-plan li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ac-ink-soft); line-height: 1.4; } .mp-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ac-sun-ink); font-weight: 800; } .mp-plan .btn { width: 100%; justify-content: center; } .mp-plan-current { text-align: center; font-size: 13px; font-weight: 800; color: var(--ac-sun-ink); background: var(--yellow-soft); border-radius: 11px; padding: 11px; } @media (max-width: 760px) { .mp-grid2 { grid-template-columns: 1fr; } .mp-plans { grid-template-columns: 1fr; } } /* ========================================================= Logo lockup in console/portal sidebar, logo on the member card, and auth-aware nav (hide Join/Login once signed in). ========================================================= */ .ac-brand { flex-direction: column; align-items: flex-start; gap: 5px; } .ac-lockup { width: 220px; max-width: 100%; height: auto; display: block; } .ac-sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac-faint); font-weight: 700; } .mcard-top img, .mcard-logo { width: 26px; height: 26px; border-radius: 6px; background: #fff; padding: 2px; flex: none; object-fit: contain; } /* Signed in: no Join/Login link or "Become a Member" CTA. Signed out: shown. */ body[data-member="in"] .auth-link { display: none; } body[data-member="in"] #memberCta { display: none !important; } /* ========================================================= RAISE A REQUEST — two-panel with a live ticket-stub preview ========================================================= */ .mp-ticket-wrap { display: grid; grid-template-columns: 1.4fr .9fr; gap: 26px; align-items: start; } .mp-ticket-wrap .mp-form { max-width: none; } .mp-ticket-side { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 16px; } .ticket-card { position: relative; background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0,.14); } .tc-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-radius: 16px 16px 0 0; background: linear-gradient(135deg, #FFF248, var(--ac-sun) 55%, #F0DF00); color: var(--ac-ink); } .tc-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .tc-ref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: .12em; font-size: 13px; } .tc-perf { position: relative; height: 1px; border-top: 2px dashed var(--ac-line); } .tc-perf::before, .tc-perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--ac-cream); border: 1px solid var(--ac-line); } .tc-perf::before { left: -9px; } .tc-perf::after { right: -9px; } .tc-body { padding: 18px 20px 20px; } .tc-service { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .tc-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--yellow-soft); color: #A39800; font-size: 20px; flex: none; } .tc-svc-txt strong { display: block; font-family: "Lora", Georgia, serif; font-size: 17px; color: var(--ac-ink); } .tc-svc-txt small { display: block; font-size: 12.5px; color: var(--ac-faint); margin-top: 1px; } .tc-line { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ac-line-soft); } .tc-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-faint); } .tc-v { font-size: 13.5px; font-weight: 700; color: var(--ac-ink); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-v.is-empty { color: var(--ac-faint); font-weight: 500; } .tc-subject { margin: 14px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--ac-ink); line-height: 1.35; } .tc-desc { font-size: 13.5px; color: var(--ac-ink-soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .tc-subject.is-empty, .tc-desc.is-empty { color: var(--ac-faint); font-weight: 400; font-style: italic; } .tc-subject.is-empty { font-weight: 500; } .tc-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ac-line); font-size: 13px; color: var(--ac-ink-soft); font-weight: 600; } .tc-clip { font-size: 14px; } .prio-badge.prio-normal { background: var(--ac-ink); color: #fff; } /* upgraded dropzone drag state */ .mp-drop.is-drag { border-color: var(--ac-sun-deep); background: #FFF6D6; } /* "what happens next" */ .mp-next { border: 1px solid var(--ac-line); border-radius: 14px; padding: 18px 20px; background: #fbfbfb; } .mp-next h4 { margin: 0 0 12px; font-family: "Lora", Georgia, serif; font-size: 15px; color: var(--ac-ink); } .mp-next ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; } .mp-next li { position: relative; padding-left: 34px; font-size: 13.5px; color: var(--ac-ink-soft); line-height: 1.45; counter-increment: step; } .mp-next li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--ac-sun); color: var(--ac-ink); font-weight: 800; font-size: 12px; display: grid; place-items: center; } @media (max-width: 980px) { .mp-ticket-wrap { grid-template-columns: 1fr; } .mp-ticket-side { position: static; } } /* ========================================================= MY REQUESTS — chat conversation + composer ========================================================= */ .mp-convo { margin-top: 14px; border-top: 1px solid var(--ac-line-soft); padding-top: 15px; } .mp-convo-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-faint); margin-bottom: 12px; } .mp-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .mp-thread:empty { display: none; } .mp-msg { max-width: 84%; display: flex; flex-direction: column; gap: 3px; } .mp-msg.team { align-self: flex-start; } .mp-msg.mine { align-self: flex-end; align-items: flex-end; } .mp-msg-meta { font-size: 11px; color: var(--ac-faint); font-weight: 600; padding: 0 6px; } .mp-bubble { padding: 10px 14px; border-radius: 15px; font-size: 14px; line-height: 1.5; } .mp-msg.team .mp-bubble { background: var(--ac-cream2); color: var(--ac-ink); border-bottom-left-radius: 5px; } .mp-msg.mine .mp-bubble { background: var(--ac-sun); color: var(--ac-ink); border-bottom-right-radius: 5px; } .mp-noconvo { color: var(--ac-faint); font-size: 13px; font-style: italic; margin: 0 0 12px; } .mp-composer { display: flex; gap: 10px; align-items: center; } .mp-composer input { flex: 1; padding: 12px 16px; border: 1px solid var(--ac-line); border-radius: 999px; font: inherit; font-size: 14px; background: #fff; } .mp-composer input:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.25); } .mp-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ac-sun); color: var(--ac-ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 0 var(--ac-sun-deep); transition: background .12s, transform .1s; } .mp-send:hover { background: #FFF02A; } .mp-send:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ac-sun-deep); } .mp-send svg { width: 19px; height: 19px; } /* ========================================================= MY CARD — flip membership card (front/back) + request stats ========================================================= */ .mp-cardgrid { display: grid; grid-template-columns: 400px 1fr; gap: 28px; align-items: start; } .mp-cardcol { max-width: 400px; } .mp-side { display: flex; flex-direction: column; gap: 18px; } .flip-cap { text-align: center; font-size: 12px; color: var(--ac-faint); margin: 14px 0 0; } /* request stats */ .mp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .mp-stat { background: #fff; border: 1px solid var(--ac-line); border-radius: 15px; padding: 16px 14px; text-align: center; } .mp-stat-num { display: block; font-family: "Manrope", sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); line-height: 1; } .mp-stat-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-faint); margin-top: 6px; } .mp-stat-total { border-top: 3px solid var(--ac-sun); } .mp-stat-started .mp-stat-num { color: #7A7100; } .mp-stat-approved .mp-stat-num { color: #17692F; } .mp-stat-declined .mp-stat-num { color: #9a1b0b; } /* flip card */ .flip { perspective: 1300px; width: 100%; max-width: 400px; aspect-ratio: 1.6 / 1; cursor: pointer; outline: none; } .flip:focus-visible { outline: 3px solid var(--ac-sun-deep); outline-offset: 4px; border-radius: 22px; } .flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1); } .flip.is-flipped .flip-inner { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 20px; overflow: hidden; padding: 22px 24px; display: flex; flex-direction: column; } .flip-front { background: linear-gradient(135deg, #FFF248 0%, var(--yellow) 48%, #F0DF00 100%); color: var(--ink); box-shadow: 0 24px 50px rgba(214,199,0,.32); } .flip-back { transform: rotateY(180deg); background: linear-gradient(140deg, #2b2418, #17130c); color: #f3ead2; box-shadow: 0 24px 50px rgba(0, 0, 0,.42); } .fc-top { display: flex; align-items: center; gap: 9px; position: relative; z-index: 1; } .fc-brand { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .02em; } .fc-name { margin-top: auto; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.01em; position: relative; z-index: 1; } .fc-meta { font-size: 13px; font-weight: 600; color: rgba(31,31,31,.72); margin-top: 3px; position: relative; z-index: 1; } .fc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; position: relative; z-index: 1; } .fc-no { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: .1em; font-size: 13px; } /* back */ .fb-strip { height: 34px; background: #0c0a06; margin: -22px -24px 14px; } .fb-body { display: flex; flex-direction: column; flex: 1; } .fb-brand { color: var(--yellow); margin-bottom: 8px; } .fb-note { font-size: 11.5px; color: rgba(243,234,210,.72); line-height: 1.5; margin: 0 0 12px; } .fb-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .fb-row b { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; } .fb-bars { height: 26px; margin: 12px 0; border-radius: 3px; opacity: .85; background: repeating-linear-gradient(90deg, #f3ead2 0 2px, transparent 2px 4px, #f3ead2 4px 7px, transparent 7px 9px, #f3ead2 9px 11px, transparent 11px 16px); } .fb-tag { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .04em; color: var(--yellow); text-align: center; margin-top: auto; } @media (max-width: 860px) { .mp-cardgrid { grid-template-columns: 1fr; } .mp-cardcol { max-width: 400px; } .mp-stats { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= MY REQUESTS — list rows + labeled detail view ========================================================= */ .rq-list { display: flex; flex-direction: column; gap: 10px; } .rq-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 15px 18px; border: 1px solid var(--ac-line); border-radius: 14px; background: #fff; font: inherit; cursor: pointer; transition: box-shadow .15s, border-color .15s; } .rq-row:hover { border-color: var(--ac-sun-deep); box-shadow: 0 8px 24px rgba(0, 0, 0,.08); } .rq-ref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .05em; color: var(--ac-ink); background: var(--ac-cream2); padding: 5px 9px; border-radius: 8px; } .rq-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rq-main strong { font-size: 15px; color: var(--ac-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rq-main small { font-size: 12.5px; color: var(--ac-faint); } .rq-pills { display: flex; align-items: center; gap: 8px; } .rq-chev { font-size: 24px; color: var(--ac-faint); line-height: 1; } .rq-back { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--ac-sun-ink); cursor: pointer; padding: 4px 2px; margin-bottom: 14px; } .rq-detail { padding: 24px 26px 26px; } .rd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rd-head-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .rd-head-main .mcard-id { align-self: flex-start; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .05em; color: var(--ac-ink); background: var(--ac-cream2); padding: 5px 9px; border-radius: 8px; } .rd-head-main h2 { font-family: "Lora", Georgia, serif; font-size: 22px; font-weight: 600; color: var(--ac-ink); margin: 0; line-height: 1.2; } .rq-detail .mp-rail { margin: 20px 0 22px; } .rd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ac-line); border: 1px solid var(--ac-line); border-radius: 12px; overflow: hidden; } .rd-item { background: #fff; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; } .rd-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-faint); } .rd-v { font-size: 14px; font-weight: 600; color: var(--ac-ink); } .rd-block { margin-top: 22px; } .rd-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-faint); margin-bottom: 10px; } .rd-desc { font-size: 14.5px; line-height: 1.65; color: var(--ac-ink-soft); margin: 0; white-space: pre-wrap; } .rd-none { color: var(--ac-faint); font-size: 13.5px; font-style: italic; margin: 0; } @media (max-width: 620px) { .rq-row { grid-template-columns: auto 1fr auto; } .rq-chev { display: none; } .rd-grid { grid-template-columns: 1fr; } } /* Admin request detail — manage controls + composer with internal toggle */ .rd-controls { display: flex; gap: 20px; flex-wrap: wrap; } .rd-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ac-ink-soft); } .rd-controls select { padding: 10px 12px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; background: #fff; min-width: 210px; } .ad-composer { display: flex; align-items: center; gap: 10px; } .ad-composer input[type="text"] { flex: 1; padding: 12px 16px; border: 1px solid var(--ac-line); border-radius: 999px; font: inherit; font-size: 14px; background: #fff; } .ad-composer input[type="text"]:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.25); } .ad-internal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ac-ink-soft); white-space: nowrap; cursor: pointer; } .ad-internal input { accent-color: var(--ac-sun-deep); } .mp-msg.is-internal .mp-bubble { background: #FFF7D6 !important; border: 1px dashed var(--ac-sun); color: var(--ac-ink); } /* Team lead — "My team" section */ .team-svcs { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0 6px; } .admin-table td small.muted { font-weight: 400; } /* Rejected status — pill + banner (off the linear stepper) */ .ac .status-rejected { background: #FBDDD6; color: #9a1b0b; } .rail-rejected { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #FBDDD6; color: #9a1b0b; font-weight: 700; font-size: 14px; margin: 18px 0; } .rail-rejected span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #9a1b0b; color: #fff; font-size: 14px; } /* Request detail — Approve / Reject action buttons */ .rd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .act-btn { padding: 11px 20px; border-radius: 11px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid transparent; transition: background .12s, transform .1s; } .act-btn:active { transform: translateY(1px); } .act-approve { background: #1f9d55; color: #fff; box-shadow: 0 2px 0 #16794a; } .act-approve:hover { background: #1c8f4d; } .act-reject { background: #A31400; color: #fff; border-color: #A31400; box-shadow: 0 2px 0 #7c0f00; } .act-reject:hover { background: #8a1100; } .act-neutral { background: var(--ac-ink); color: #fff; border-color: var(--ac-ink); } .act-neutral:hover { background: #34291a; } .act-assign { background: var(--ac-sun); color: var(--ac-ink); border-color: var(--ac-sun); } .act-assign:hover { background: var(--ac-sun-deep); } /* ========================================================= SERVICE REQUESTS v3 — journey tracker · outcome · docs grid · action zone ========================================================= */ .rq-journey { margin: 22px 0 6px; padding: 20px 6px 4px; } .rq-track { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; } .rq-track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 15px; height: 3px; background: var(--ac-line); border-radius: 3px; } .rq-fill { position: absolute; left: 10%; top: 15px; height: 3px; background: linear-gradient(90deg, var(--ac-sun), var(--ac-sun-deep)); border-radius: 3px; transition: width .5s ease; } .rq-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .rq-node .bead { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #fff; border: 3px solid var(--ac-line); color: var(--ac-faint); z-index: 1; } .rq-node.done .bead { background: #1f9d55; border-color: #1f9d55; color: #fff; } .rq-node.current .bead { background: var(--ac-sun); border-color: var(--ac-sun-deep); color: var(--ac-ink); box-shadow: 0 0 0 5px rgba(255,196,0,.24); } .rq-node .lab { font-size: 11.5px; font-weight: 700; color: var(--ac-ink); } .rq-node.upcoming .lab { color: var(--ac-faint); font-weight: 600; } .rq-node .when { font-size: 10px; color: var(--ac-faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .rq-says { display: flex; gap: 11px; align-items: flex-start; background: var(--ac-cream2); border-radius: 13px; padding: 13px 16px; margin: 14px 0 4px; font-size: 13.5px; color: var(--ac-ink-soft); } .rq-outcome { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 15px 18px; margin: 16px 0 4px; } .rq-outcome .oic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; color: #fff; } .rq-outcome strong { display: block; font-size: 14px; } .rq-outcome span { font-size: 12.5px; color: var(--ac-ink-soft); } .rq-outcome.ok { background: #E4F3E8; } .rq-outcome.ok .oic { background: #17692F; } .rq-outcome.ok strong { color: #17692F; } .rq-outcome.no { background: #FBE6E1; } .rq-outcome.no .oic { background: #A31400; } .rq-outcome.no strong { color: #A31400; } .rq-outcome.closed { background: var(--ac-cream2); } .rq-outcome.closed .oic { background: var(--ac-ink); } .rq-outcome.closed strong { color: var(--ac-ink); } .docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .doc-card { display: flex; align-items: center; gap: 13px; border: 1px solid var(--ac-line); border-radius: 13px; padding: 13px 14px; background: #fff; transition: border-color .15s, box-shadow .15s; } .doc-card:hover { border-color: var(--ac-sun-deep); box-shadow: 0 8px 20px rgba(0, 0, 0,.07); } .doc-chip { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 700; color: #fff; } .doc-chip.pdf { background: #C4341F; } .doc-chip.img { background: #2C7A4B; } .doc-chip.doc { background: #B9770A; } .doc-chip.xls { background: #1E7A55; } .doc-chip.link { background: var(--ac-ink); font-size: 17px; } .doc-chip.file { background: #6B6252; } .doc-card .dm { min-width: 0; flex: 1; } .doc-card .dm strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-card .dm small { font-size: 11.5px; color: var(--ac-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .doc-card .dl { border: 1px solid var(--ac-line); background: var(--ac-cream); border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ac-ink); padding: 7px 12px; cursor: pointer; white-space: nowrap; } .doc-card .dl:hover { background: var(--ac-sun); border-color: var(--ac-sun); } .doc-thumb { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto; background: var(--ac-cream2); display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* documents attached to a conversation message */ .msg-atts { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; } .msg-atts .doc-card { padding: 8px 10px; gap: 10px; } .msg-atts .doc-chip, .msg-atts .doc-thumb { width: 34px; height: 34px; } .msg-atts .doc-card .dm strong { font-size: 12.5px; } .mp-msg.mine .msg-atts { align-self: stretch; } /* composer: attach button + staged file chips */ .mp-attach { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ac-line); background: #fff; color: var(--ac-ink-soft); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; } .mp-attach:hover { background: var(--ac-cream2); border-color: var(--ac-sun-deep); color: var(--ac-ink); } .mp-attach svg { width: 18px; height: 18px; } .composer-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .composer-atts:empty { display: none; } .catt { display: inline-flex; align-items: center; gap: 8px; background: var(--ac-cream2); border: 1px solid var(--ac-line); border-radius: 100px; padding: 5px 6px 5px 13px; font-size: 12px; font-weight: 600; color: var(--ac-ink); } .catt button { border: 0; background: rgba(0,0,0,.09); color: var(--ac-ink); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 13px; display: grid; place-items: center; padding: 0; } .catt button:hover { background: var(--ac-ember); color: #fff; } .mp-bubble a { color: inherit; text-decoration: underline; font-weight: 600; word-break: break-word; } .rd-actionzone { border: 1.5px solid var(--ac-sun); background: linear-gradient(180deg, #FFFBEA, #fff); border-radius: 16px; padding: 18px 20px; margin-bottom: 6px; } .rd-actionzone .az-h { font-family: "Lora", Georgia, serif; font-size: 15px; font-weight: 600; margin: 0 0 3px; } .rd-actionzone .az-sub { font-size: 12.5px; color: var(--ac-faint); margin: 0 0 15px; } .rd-actionzone .rd-actions { margin-bottom: 0; } .az-divider { height: 1px; background: var(--ac-line); margin: 16px 0; } .az-assign { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .az-assign label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ac-ink-soft); } .az-assign select { padding: 10px 12px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; background: #fff; min-width: 220px; } .az-mini { font-size: 11.5px; color: var(--ac-faint); margin: 10px 0 0; } @media (max-width: 640px) { .docs-grid { grid-template-columns: 1fr; } .rq-node .lab { font-size: 10px; } .az-assign select { min-width: 100%; } } /* ========================================================= CONSOLE NAV VISIBILITY BY ROLE (CSS-enforced) JS stamps body[data-ac-role]; without the admin/lead flag these stay hidden. ========================================================= */ #adminNav [data-admin-only], #adminNav [data-teamlead], #adminNav [data-ov] { display: none !important; } body[data-ac-role="admin"] #adminNav [data-admin-only] { display: flex !important; } body[data-ac-role="admin"] #adminNav [data-teamlead], body[data-ac-role="lead"] #adminNav [data-teamlead] { display: flex !important; } /* Overview (Dashboard + News) — admins and administrators */ body[data-ac-role="admin"] #adminNav [data-ov], body[data-ac-role="administrator"] #adminNav [data-ov] { display: flex !important; } /* An administrator is focused: only the overview tabs, nothing else */ body[data-ac-role="administrator"] #adminNav [data-admin-tab]:not([data-ov]) { display: none !important; } /* Membership plan cards — show the price as a real price */ .mp-plan-top { flex-direction: column; gap: 3px; } .mp-plan-top span { font-family: "Lora", Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ac-sun-ink); text-transform: none; letter-spacing: 0; } /* Join — selectable plan cards with benefits */ .plan-cards { border: 0; padding: 0; margin: 16px 0 14px; display: grid; gap: 10px; } .plan-cards .plan { position: relative; display: block; border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; } .plan-cards .plan:hover { border-color: #F0E87A; } .plan-cards .plan input { position: absolute; opacity: 0; width: 0; height: 0; } .plan-cards .plan.is-selected { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,196,0,.25); background: #fdfdfd; } .plan-cards .plan:focus-within { box-shadow: 0 0 0 3px rgba(255,196,0,.3); } .pc-body { display: block; } .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pc-head strong { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 17px; color: var(--ink); } .pc-head em { font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 800; font-size: 18px; color: #A39800; white-space: nowrap; } .pc-head em small { font-size: 11px; font-weight: 700; color: var(--muted); } .pc-tag { display: block; font-size: 12.5px; color: var(--muted); margin: 3px 0 9px; } .pc-points { display: flex; flex-wrap: wrap; gap: 5px 14px; } .pc-points span { position: relative; padding-left: 16px; font-size: 12px; color: var(--text); } .pc-points span::before { content: "\2713"; position: absolute; left: 0; color: #1f9d55; font-weight: 800; } /* ========================================================= MEMBERSHIP CARD v2 — premium physical-card look ========================================================= */ .flip-face { padding: 0; display: flex; flex-direction: column; } .flip-front { background: linear-gradient(135deg, #FFF466 0%, #FFC400 44%, #E6D600 100%); color: #241E12; position: relative; overflow: hidden; box-shadow: 0 26px 54px rgba(214,199,0,.34); } .flip-front::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 92% -8%, rgba(255,255,255,.5), transparent 46%), repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 8px, transparent 8px 17px); } .mc-shine { position: absolute; top: -60%; left: -35%; width: 55%; height: 220%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); pointer-events: none; } .mc-row { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .mc-top { padding: 20px 22px 0; } .mc-brand { display: flex; align-items: center; gap: 9px; } .mc-brand img { width: 30px; height: 30px; border-radius: 7px; background: #fff; padding: 2px; } .mc-brand span { display: flex; flex-direction: column; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 14px; line-height: 1; } .mc-brand small { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,31,31,.6); margin-top: 4px; } .mc-tier { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(31,31,31,.16); padding: 4px 11px; border-radius: 999px; } .mc-chip { width: 44px; height: 34px; margin: 15px 0 0 22px; border-radius: 7px; background: linear-gradient(135deg, #F0E76A, #9D931A); position: relative; z-index: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); } .mc-chip::after { content: ""; position: absolute; inset: 6px 5px; border: 1px solid rgba(0,0,0,.22); border-radius: 4px; background: repeating-linear-gradient(rgba(0,0,0,.18) 0 1px, transparent 1px 6px); } .mc-number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 19px; font-weight: 600; letter-spacing: .2em; padding: 13px 22px 0; position: relative; z-index: 1; } .mc-bottom { padding: 12px 22px 20px; align-items: flex-end; margin-top: auto; } .mc-holder { display: flex; flex-direction: column; min-width: 0; } .mc-label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,31,31,.6); } .mc-holder strong { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .02em; margin-top: 2px; } .mc-holder small { font-size: 11px; font-weight: 600; color: rgba(31,31,31,.7); margin-top: 2px; } .mc-verified { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #241E12; flex: none; background: radial-gradient(circle at 30% 30%, #fff, #FFF466 55%, #E6D600); box-shadow: 0 2px 6px rgba(0,0,0,.22); } /* back */ .flip-back { background: linear-gradient(150deg, #2b2418, #141009); color: #efe6ce; box-shadow: 0 26px 54px rgba(0, 0, 0,.44); } .mc-strip { height: 42px; background: #0b0906; margin-top: 20px; } .mc-sign { margin: 16px 22px 0; height: 34px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: repeating-linear-gradient(45deg, #efe6ce 0 6px, #E3E0BA 6px 12px); } .mc-sign-label { font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a6f4f; } .mc-sign-name { font-family: "Lora", Georgia, serif; font-style: italic; color: #241E12; font-size: 16px; } .mc-barcode { height: 26px; margin: 14px 22px 0; border-radius: 3px; background: repeating-linear-gradient(90deg, #efe6ce 0 2px, transparent 2px 4px, #efe6ce 4px 7px, transparent 7px 9px, #efe6ce 9px 11px, transparent 11px 16px); } .mc-back-body { padding: 12px 22px 18px; display: flex; flex-direction: column; flex: 1; } .mc-back-body p { font-size: 10px; color: rgba(239,230,206,.62); line-height: 1.5; margin: 0 0 auto; } .mc-back-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } .mc-back-row span:first-child { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .08em; } .mc-back-tag { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 11px; color: var(--yellow); } /* ========================================================= NRI TDP branded loader ========================================================= */ .nri-loader { position: fixed; inset: 0; z-index: 99999; display: none; place-items: center; background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .nri-loader.is-on { display: grid; } .nri-loader-box { display: flex; flex-direction: column; align-items: center; gap: 14px; } .nri-spin { width: 66px; height: 66px; border-radius: 50%; border: 5px solid rgba(255,196,0,.22); border-top-color: #FFC400; animation: nri-spin .8s linear infinite; display: grid; place-items: center; } .nri-spin-sun { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 120%, #FFF248, #E3D300 70%); box-shadow: 0 0 14px rgba(255,196,0,.6); } @keyframes nri-spin { to { transform: rotate(360deg); } } .nri-loader-txt { font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: .16em; font-size: 13px; color: #1f1f1f; text-transform: uppercase; } .nri-loader-msg { font-size: 12px; color: #7a7a7a; margin-top: -6px; } @media (prefers-reduced-motion: reduce) { .nri-spin { animation-duration: 2.4s; } } /* ========================================================= MEMBERSHIP CARD — Concept C "Global Diaspora" (scoped .mccard) ========================================================= */ .mccard { perspective: 1300px; width: 100%; max-width: 400px; aspect-ratio: 1.6 / 1; cursor: pointer; } .mccard .flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1); } .mccard.is-flipped .flip-inner { transform: rotateY(180deg); } .mccard .flip-face { position: absolute; inset: 0; padding: 0; display: block; overflow: hidden; border-radius: 20px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mccard .flip-front.c-front { color: #241E12; background: radial-gradient(120% 90% at 80% 6%, rgba(255,255,255,.55), transparent 44%), radial-gradient(95% 85% at 10% 104%, rgba(227,30,36,.18), transparent 52%), linear-gradient(150deg, #FFF684 0%, #FFC400 42%, #E3D300 100%); box-shadow: 0 26px 54px rgba(152,141,0,.4); } .mccard .flip-back.c-back { transform: rotateY(180deg); color: #241E12; background: radial-gradient(120% 90% at 82% 8%, rgba(255,255,255,.4), transparent 46%), linear-gradient(150deg, #FFC400, #E3D300 55%, #C8BA00); box-shadow: 0 26px 54px rgba(152,141,0,.4); } .mccard .rays { position: absolute; right: -40px; top: -40px; width: 230px; height: 230px; z-index: 1; opacity: .9; } .mccard .globe { position: absolute; left: -30px; bottom: -46px; width: 200px; height: 200px; z-index: 1; opacity: .32; } .mccard .glow { position: absolute; right: 36px; top: 26px; width: 96px; height: 96px; border-radius: 50%; z-index: 1; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 68%); filter: blur(6px); } .mccard .edge { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06); } .mccard .shine { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.05) 55%, transparent 70%); transform: translateX(-120%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); mix-blend-mode: screen; } .mccard:hover .shine { transform: translateX(120%); } .mccard .pad { position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column; z-index: 4; } .mccard .row { display: flex; align-items: flex-end; justify-content: space-between; } .mccard .lockup { display: flex; align-items: center; gap: 11px; } .mccard .sun-mark { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0,.32), 0 0 0 2px rgba(255,255,255,.85); } .mccard .brand-txt .name { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 19px; letter-spacing: .01em; line-height: 1; color: #241E12; } .mccard .brand-txt .sub { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; margin-top: 4px; opacity: .72; } .mccard .field-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8px; letter-spacing: .24em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; } .mccard .holder-name { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 23px; letter-spacing: -.01em; line-height: 1; color: #1a1408; } .mccard .location { font-size: 11px; font-weight: 500; margin-top: 6px; opacity: .85; } .mccard .cardnum { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 15px; letter-spacing: .14em; margin-top: 10px; color: #A31400; } .mccard .verified { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #17692F; align-self: flex-end; } .mccard .verified svg { width: 12px; height: 12px; } .mccard .stripe { position: absolute; left: 0; right: 0; top: 32px; height: 42px; z-index: 3; background: linear-gradient(#322F07, #241E12); box-shadow: inset 0 1px 2px rgba(255,255,255,.08), inset 0 -1px 2px rgba(0,0,0,.4); } .mccard .back-body { z-index: 4; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; gap: 12px; } .mccard .glow-rule { height: 1px; background: linear-gradient(90deg, transparent, #A31400, transparent); opacity: .45; } .mccard .mc-qrrow { display: flex; gap: 12px; align-items: center; } .mccard .qr { width: 56px; height: 56px; border-radius: 6px; padding: 4px; background: #fff; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .mccard .qr svg { width: 100%; height: 100%; display: block; } .mccard .fineprint { font-size: 8.5px; line-height: 1.5; opacity: .66; } .mccard .barcode { height: 30px; border-radius: 3px; opacity: .82; background: repeating-linear-gradient(90deg, #241E12 0 2px, transparent 2px 4px, #241E12 4px 7px, transparent 7px 9px, #241E12 9px 11px, transparent 11px 16px); } .mccard .strapline { font-family: "Lora", Georgia, serif; font-weight: 600; font-style: italic; font-size: 15px; color: #A31400; } .mccard .back-brand { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; opacity: .7; } @media (prefers-reduced-motion: reduce) { .mccard .shine { transition: none; } } /* Upgrade banner (free members) + payment success */ .upgrade-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #241E12, #3a3320); color: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 22px; } .upgrade-banner .ub-txt { display: flex; flex-direction: column; gap: 2px; } .upgrade-banner strong { font-size: 15px; } .upgrade-banner span { font-size: 13px; color: rgba(255,255,255,.78); } .pay-success { background: #DFF4E4; color: #17692F; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; font-weight: 600; } .pay-success code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: rgba(31,110,60,.12); padding: 2px 6px; border-radius: 5px; } /* Member-since line on the card */ .mccard .cardsince { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; margin-top: 7px; } /* Locked card for free (Regular) members */ .locked-card { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1.6/1; border-radius: 20px; background: linear-gradient(150deg, #FFFBC9, #FCF6A0 55%, #F6EB5A); border: 1.5px dashed rgba(163,20,0,.35); overflow: hidden; box-shadow: 0 20px 44px rgba(152,141,0,.28); } .locked-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 120px at 80% 10%, rgba(255,255,255,.7), transparent 70%), radial-gradient(140px 120px at 10% 108%, rgba(227,30,36,.14), transparent 72%); } .lc-inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px; color: #241E12; } .lc-lock { font-size: 26px; filter: drop-shadow(0 2px 4px rgba(152,141,0,.35)); } .lc-inner strong { font-family: "Lora", Georgia, serif; font-size: 18px; color: #1a1408; } .lc-inner p { font-size: 12.5px; line-height: 1.5; color: rgba(0, 0, 0,.7); max-width: 290px; margin: 0; } .lc-inner .btn { margin-top: 6px; } .lc-inner .btn.btn-yellow { background: #241E12; color: #FFC400; box-shadow: 0 4px 14px rgba(0, 0, 0,.3); } .lc-inner .btn.btn-yellow:hover { background: #34291a; } /* Upgrade banner v2 */ .upgrade-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #FFC400, #F0DF00 58%, #E3D300); color: #241E12; border-radius: 18px; padding: 18px 22px; margin-bottom: 22px; box-shadow: 0 12px 34px rgba(152,141,0,.28); } .upgrade-banner::before { content: ""; position: absolute; right: -30px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 68%); filter: blur(4px); pointer-events: none; } .upgrade-banner::after { content: ""; position: absolute; left: -40px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(227,30,36,.18), transparent 70%); pointer-events: none; } .upgrade-banner .ub-txt { position: relative; display: flex; flex-direction: column; gap: 3px; } .upgrade-banner strong { font-family: "Lora", Georgia, serif; font-size: 16px; color: #1a1408; } .upgrade-banner span { font-size: 13px; color: rgba(0, 0, 0,.72); } .upgrade-banner .btn { position: relative; } .upgrade-banner .btn.btn-yellow { background: #241E12; color: #FFC400; box-shadow: 0 4px 14px rgba(0, 0, 0,.3); } .upgrade-banner .btn.btn-yellow:hover { background: #34291a; } /* ========================================================= MEMBERSHIP PAGE v2 — gold party plan cards ========================================================= */ .memb-lead { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(120deg, #FFFBCC, #FCF6A0); border: 1px solid rgba(227,211,0,.45); border-radius: 16px; padding: 18px 20px; margin-bottom: 24px; max-width: 980px; } .memb-lead-ic { width: 46px; height: 46px; border-radius: 13px; background: #241E12; color: #FFC400; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; } .memb-lead strong { font-family: "Lora", Georgia, serif; font-size: 17px; color: #1a1408; display: block; margin-bottom: 3px; } .memb-lead p { margin: 0; font-size: 13.5px; color: var(--ac-ink-soft); line-height: 1.5; } .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; align-items: stretch; } .plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--ac-line); border-radius: 20px; padding: 26px 24px; transition: transform .15s, box-shadow .15s, border-color .15s; } .plan:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0,.1); } .plan.featured { border-color: var(--ac-sun); box-shadow: 0 18px 44px rgba(227,211,0,.2); background: #FFFFFF; } .plan.current { border-color: var(--ac-sun-deep); box-shadow: 0 0 0 3px rgba(255,196,0,.28); } .plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #241E12; color: #FFC400; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0,.3); } .plan-name { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 22px; color: var(--ac-ink); } .plan-price { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 2px; } .plan-price b { font-family: "Lora", Georgia, serif; font-size: 34px; font-weight: 600; color: #1a1408; line-height: 1; } .plan-price span { font-size: 12.5px; color: var(--ac-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .plan-tag { color: var(--ac-ink-soft); font-size: 13px; margin: 11px 0 18px; line-height: 1.45; } .plan-feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; flex: 1; } .plan-feats li { position: relative; padding-left: 27px; font-size: 13px; color: var(--ac-ink-soft); line-height: 1.4; } .plan-feats li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,196,0,.28); } .plan-feats li::after { content: "\2713"; position: absolute; left: 4.5px; top: 0.5px; font-size: 11px; font-weight: 800; color: #6D6500; } .plan-cta { width: 100%; border: 0; border-radius: 12px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px; padding: 13px; cursor: pointer; transition: filter .12s, background .12s; } .plan-cta.gold { background: linear-gradient(120deg, #FFC400, #E3D300); color: #241E12; box-shadow: 0 5px 16px rgba(227,211,0,.35); } .plan-cta.gold:hover { filter: brightness(1.04); } .plan-cta.ghost { background: #fff; color: var(--ac-ink); border: 1px solid var(--ac-line); } .plan-cta.ghost:hover { background: var(--ac-cream2); border-color: var(--ac-sun-deep); } .plan-current-pill { text-align: center; font-weight: 800; font-size: 13px; color: #1a1408; background: linear-gradient(120deg, #FFC400, #F0DF00); border-radius: 12px; padding: 13px; } .memb-foot { font-size: 12px; color: var(--ac-faint); margin: 18px 0 0; max-width: 980px; } @media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } } /* In-page image preview (lightbox) */ .nri-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0,.82); display: none; align-items: center; justify-content: center; padding: 30px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .nri-lightbox.is-open { display: flex; } .nlb-inner { position: relative; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; } .nlb-inner img { max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #fff; } .nlb-cap { color: #fff; font-size: 13px; font-weight: 600; } .nlb-x { position: absolute; top: -16px; right: -16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #241E12; font-size: 22px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .nlb-x:hover { background: var(--ac-sun); } /* ========================================================= ANNOUNCEMENTS — member banner popup + admin news manager ========================================================= */ .ann-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .25s; } .ann-overlay.is-open { opacity: 1; pointer-events: auto; } .ann-modal { width: 100%; max-width: 460px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0,.4); transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; max-height: 86vh; } .ann-overlay.is-open .ann-modal { transform: none; } .ann-head { position: relative; display: flex; align-items: center; gap: 13px; padding: 20px 22px; background: linear-gradient(120deg, #FFC400, #F0DF00 60%, #E3D300); } .ann-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0, 0, 0,.25); object-fit: cover; } .ann-eyebrow { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(0, 0, 0,.7); } .ann-htitle { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 18px; color: #1a1408; margin-top: 2px; } .ann-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0,.14); color: #241E12; font-size: 19px; cursor: pointer; display: grid; place-items: center; } .ann-x:hover { background: rgba(0, 0, 0,.26); } .ann-scroll { overflow-y: auto; padding: 4px 22px; } .ann-card { padding: 18px 0; border-bottom: 1px solid var(--ac-line); } .ann-card:last-child { border-bottom: 0; } .ann-card h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ac-ink); margin: 0; } .ann-card time { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--ac-faint); margin: 4px 0 9px; } .ann-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ac-ink-soft); white-space: pre-wrap; } .ann-foot { padding: 16px 22px 20px; border-top: 1px solid var(--ac-line); } .ann-foot .btn { width: 100%; justify-content: center; } .news-list { display: flex; flex-direction: column; gap: 12px; } .news-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; background: #fff; border: 1px solid var(--ac-line); border-radius: 14px; padding: 16px 18px; } .news-item.is-off { opacity: .6; } .news-item-main { min-width: 0; } .news-item-top { display: flex; align-items: center; gap: 10px; } .news-item-top strong { font-family: "Lora", Georgia, serif; font-size: 16px; color: var(--ac-ink); } .news-off-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-faint); background: var(--ac-cream2); padding: 3px 8px; border-radius: 100px; } .news-item-main p { margin: 6px 0 10px; font-size: 13.5px; color: var(--ac-ink-soft); line-height: 1.5; } .news-aud { font-size: 11.5px; color: var(--ac-faint); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .aud-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; } .aud-regular { background: #EDE7D6; color: #6b5f3f; } .aud-annual { background: #FFFBC2; color: #6D6500; } .aud-lifetime { background: linear-gradient(120deg, #FFC400, #E3D300); color: #241E12; } .news-item-acts { display: flex; gap: 8px; flex: 0 0 auto; } .news-del { color: #A31400; border-color: #f0c2b8; } .news-del:hover { background: #FBE6E1; } .news-form { display: flex; flex-direction: column; gap: 14px; } .news-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ac-ink-soft); } .news-form input, .news-form textarea { padding: 11px 13px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 400; color: var(--ac-ink); background: #fff; resize: vertical; } .news-form input:focus, .news-form textarea:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.25); } .news-aud-lbl { font-size: 12.5px; font-weight: 700; color: var(--ac-ink-soft); display: block; margin-bottom: 8px; } .aud-picks { display: flex; gap: 10px; flex-wrap: wrap; } .aud-pick { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ac-line); border-radius: 100px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ac-ink); cursor: pointer; user-select: none; } .aud-pick input { accent-color: var(--ac-sun-deep); } .aud-pick:has(input:checked) { border-color: var(--ac-sun-deep); background: #FFF7D6; } /* Announcement link/news thumbnail card */ .ann-link-card { display: flex; align-items: stretch; margin-top: 12px; border: 1px solid var(--ac-line); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color .15s, box-shadow .15s; background: #fff; } .ann-link-card:hover { border-color: var(--ac-sun-deep); box-shadow: 0 8px 22px rgba(0, 0, 0,.1); } .alc-thumb { width: 104px; flex: 0 0 auto; background: var(--ac-cream2); display: grid; place-items: center; overflow: hidden; } .alc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 76px; } .alc-noimg { font-size: 26px; color: var(--ac-sun-ink); min-height: 76px; width: 100%; display: grid; place-items: center; } .alc-body { padding: 11px 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; } .alc-title { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 13.5px; color: var(--ac-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .alc-dom { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ac-sun-ink); text-transform: uppercase; } /* Member News feed (sidebar tab) */ .news-feed { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .nf-item { background: #fff; border: 1px solid var(--ac-line); border-left: 3px solid var(--ac-sun); border-radius: 16px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0,.05); } .nf-date { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-sun-ink); margin-bottom: 8px; } .nf-item h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 19px; color: var(--ac-ink); margin: 0; line-height: 1.3; } .nf-item p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ac-ink-soft); white-space: pre-wrap; } .nf-item .ann-link-card { max-width: 440px; margin-top: 14px; } /* ========================================================= NRI HUB — clean white service directory (design-taste: trust-first, one confident red accent, low density, restrained motion) ========================================================= */ .screen[data-route="nri-hub"] { background: #ffffff; } .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; } .hub-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 32px 22px 26px; cursor: pointer; font: inherit; opacity: 0; transform: translateY(12px); animation: hubUp .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d,0ms); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s; } @keyframes hubUp { to { opacity: 1; transform: none; } } .hub-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0, 0, 0,.1); border-color: #e9e9e9; } .hub-card:active { transform: translateY(-2px) scale(.994); } .hub-card:focus-visible { outline: 2px solid var(--cc, #3B82F6); outline-offset: 3px; } /* soft pastel chip, coloured per category (--cc icon, --cb tint) */ .hub-card-ic { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; background: var(--cb, #E9F1FE); color: var(--cc, #3B82F6); margin-bottom: 18px; transition: transform .32s cubic-bezier(.2,1.5,.4,1), box-shadow .28s; } .hub-card:hover .hub-card-ic { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 24px color-mix(in srgb, var(--cc) 26%, transparent); } .hub-card-ic svg { width: 30px; height: 30px; } .hub-card strong { display: block; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 19px; color: #1a2233; letter-spacing: -.01em; margin-bottom: 12px; } .hub-card-go { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #a2a8b4; transition: color .2s; } .hub-card:hover .hub-card-go { color: var(--cc, #3B82F6); } .hub-card-go span { transition: transform .2s; } .hub-card:hover .hub-card-go span { transform: translateX(4px); } /* overlay — respects [hidden], never blocks clicks when closed */ .hub-modal-ov { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0,.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .24s; } .hub-modal-ov:not([hidden]) { display: flex; } .hub-modal-ov.is-open { opacity: 1; pointer-events: auto; } /* modal — BLOCK layout so it is always exactly content height (no gaps) */ .hub-modal { position: relative; width: 100%; max-width: 560px; max-height: 90vh; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0,.34); transform: translateY(16px) scale(.97); transition: transform .28s cubic-bezier(.2,.8,.2,1); } .hub-modal-ov.is-open .hub-modal { transform: none; } .hub-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cc, var(--red-primary)); z-index: 4; } .hub-modal .nexus-panel { display: block; margin: 0; padding: 0; border: 0; background: none; } .hub-modal-x { position: absolute; top: 18px; right: 18px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f2f2f2; color: #666666; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } .hub-modal-x:hover { background: var(--red-primary); color: #fff; } /* header — light, with a single red icon chip as the accent (calm, not heavy) */ .hs-head { display: flex; align-items: center; gap: 16px; padding: 26px 28px 20px; background: #fff; } .hs-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--cb, #E9F1FE); color: var(--cc, #3B82F6); display: grid; place-items: center; flex: 0 0 auto; } .hs-icon svg { width: 28px; height: 28px; } .hs-title h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 23px; margin: 0; letter-spacing: -.01em; color: #1c1a17; } .hs-title p { margin: 4px 0 0; font-size: 12.5px; color: #837d74; line-height: 1.4; } /* body — the only scrolling region */ .hs-body { max-height: 46vh; overflow-y: auto; padding: 6px 28px 12px; } .hs-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a3a3a3; padding: 14px 0 2px; } .hs-list { list-style: none; margin: 0; padding: 0; } .hs-item { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-bottom: 1px solid #f1f1f1; } .hs-item:last-child { border-bottom: 0; } .hs-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px; background: var(--cb, #E9F1FE); position: relative; } .hs-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cc, #3B82F6); } .hs-item-txt strong { display: block; font-size: 14.5px; font-weight: 700; color: #211e19; } .hs-item-txt small { display: block; font-size: 12.5px; color: #8b857b; line-height: 1.45; margin-top: 1px; } /* footer — compact, fits under the list */ .hs-foot { padding: 16px 28px 18px; border-top: 1px solid #eeeeee; background: #fafafa; } .hs-foot .np-request { width: 100%; justify-content: center; } .hs-foot-note { display: block; text-align: center; font-size: 12px; color: #8b857b; margin-top: 10px; } .hs-gate { display: block; } .hs-gate-note { margin: 0 0 12px; font-size: 12.5px; color: #7f7a70; line-height: 1.45; text-align: center; } .hs-gate-btns { display: flex; gap: 10px; } .hs-gate-btns .btn { flex: 1; justify-content: center; margin: 0; white-space: nowrap; min-height: 46px; } .hub-modal .btn-red { background: var(--red-primary); color: #fff; box-shadow: 0 8px 20px rgba(227,30,36,.22); transition: background .15s, transform .1s; } .hub-modal .btn-red:hover { background: var(--red-light); color: #1f1f1f; } .hub-modal .btn-red:active { transform: translateY(1px); } .hub-modal .btn-outline { background: #fff; border: 1.5px solid #e0e0e0; color: #1f1f1f; transition: border-color .15s, color .15s, transform .1s; } .hub-modal .btn-outline:hover { border-color: var(--red-primary); color: var(--red-primary); } .hub-modal .btn-outline:active { transform: translateY(1px); } .hub-modal .np-form { padding: 16px 28px 20px; border-top: 1px solid #eeeeee; background: #fafafa; } .hub-modal .np-form-head { font-size: 13px; font-weight: 700; color: #211e19; margin: 0 0 10px; } .hub-modal .np-form-actions { display: flex; gap: 10px; margin-top: 12px; } .hub-modal .np-form-actions .btn { flex: 1; justify-content: center; margin: 0; } @media (max-width: 820px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } .hs-gate-btns { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .hub-card { animation: none; opacity: 1; transform: none; } } /* ========================================================= MEMBER DASHBOARD v2 — warm, clean, pastel accents ========================================================= */ .dash-sect { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-faint); margin: 28px 0 14px; } .dash-sect:first-child { margin-top: 0; } /* greeting hero — light warm card, dark ink, a soft sunrise glow */ .dash-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 34px 34px; background: linear-gradient(115deg, #fdfdfd 0%, #FFF6DE 55%, #FFFBC2 100%); border: 1px solid #F2EEBE; box-shadow: 0 18px 44px rgba(200,187,10,.12); } .dash-hero-in { position: relative; z-index: 2; } .dash-date { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-sun-ink); } .dash-hero h2 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 30px; margin: 9px 0 8px; letter-spacing: -.015em; color: #241E12; display: flex; align-items: center; gap: 11px; } .dash-wave { display: inline-block; transform-origin: 70% 70%; animation: dashWave 2.8s ease-in-out infinite; } @keyframes dashWave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } } .dash-hero p { margin: 0; font-size: 15px; color: #7a6a3a; max-width: 56ch; line-height: 1.5; } /* a sun with rays, top-right, gently rotating */ .dash-sun { position: absolute; z-index: 1; top: -46px; right: -46px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,196,0,.9) 0 22%, rgba(255,196,0,.28) 30%, transparent 62%); pointer-events: none; } .dash-sun::after { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,196,0,.35) 9deg 12deg, transparent 13deg 30deg); animation: dashSpin 40s linear infinite; } @keyframes dashSpin { to { transform: rotate(360deg); } } /* quick actions — white cards, soft pastel coloured icon (per --cc/--cb) */ .qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .qa-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; background: #fff; border: 1px solid var(--ac-line); border-radius: 18px; padding: 20px; cursor: pointer; font: inherit; opacity: 0; transform: translateY(10px); animation: dashUp .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d,0ms); transition: transform .2s, box-shadow .2s, border-color .2s; } @keyframes dashUp { to { opacity: 1; transform: none; } } .qa-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0,.1); border-color: color-mix(in srgb, var(--cc) 40%, #fff); } .qa-card:active { transform: translateY(-1px) scale(.99); } .qa-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cb); color: var(--cc); transition: transform .32s cubic-bezier(.2,1.5,.4,1); } .qa-card:hover .qa-ic { transform: translateY(-2px) scale(1.08) rotate(-4deg); } .qa-ic svg { width: 24px; height: 24px; } .qa-tx { display: flex; flex-direction: column; gap: 3px; } .qa-tx strong { font-size: 15px; font-weight: 700; color: var(--ac-ink); } .qa-tx small { font-size: 12.5px; color: var(--ac-faint); line-height: 1.4; } .qa-go { position: absolute; top: 20px; right: 20px; font-size: 18px; color: #d8d2c4; transition: transform .2s, color .2s; } .qa-card:hover .qa-go { color: var(--cc); transform: translateX(4px); } /* news feed — 2-column grid of cards, clickable thumbnails */ .dash-news { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .dn-item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; padding: 14px; transition: transform .18s, border-color .15s, box-shadow .15s; } .dn-item:hover { transform: translateY(-3px); border-color: var(--ac-sun); box-shadow: 0 14px 30px rgba(0, 0, 0,.09); } .dn-thumb { width: 88px; height: 78px; flex: 0 0 auto; border-radius: 12px; overflow: hidden; background: var(--ac-cream2); display: block; } .dn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .dn-tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .dn-tx time { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-sun-ink); } .dn-tx h4 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 15px; color: var(--ac-ink); margin: 0; line-height: 1.3; } .dn-tx p { margin: 0; font-size: 12.5px; color: var(--ac-ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dn-more { font-size: 12px; font-weight: 700; color: var(--ac-sun-ink); text-decoration: none; align-self: flex-start; } .dn-more:hover { text-decoration: underline; } .dn-empty { grid-column: 1 / -1; background: #fff; border: 1px dashed var(--ac-line); border-radius: 16px; padding: 28px; text-align: center; } @media (max-width: 1000px) { .qa-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .dash-news { grid-template-columns: 1fr; } } @media (max-width: 560px) { .qa-grid { grid-template-columns: 1fr; } .dash-hero h2 { font-size: 25px; } .dash-hero { padding: 26px 24px; } } @media (prefers-reduced-motion: reduce) { .dash-wave, .dash-sun::after, .qa-card { animation: none; opacity: 1; transform: none; } } /* ========================================================= MEMBER PROFILE — photo, details form, contributions ========================================================= */ .pf-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; } .pf-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 82px; } .pf-photo { background: #fff; border: 1px solid var(--ac-line); border-radius: 20px; padding: 26px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .pf-avatar { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #FFFBCC, var(--ac-sun)); color: #625B00; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 40px; box-shadow: 0 10px 24px rgba(227,211,0,.28); } .pf-avatar img { width: 100%; height: 100%; object-fit: cover; } .pf-photo .btn { margin-top: 2px; } .pf-photo-name { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ac-ink); margin: 6px 0 0; } .pf-photo-no { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--ac-faint); margin: 0; } .pf-card { max-width: 300px; } .pf-form { display: flex; flex-direction: column; gap: 20px; } .pf-sect { background: #fff; border: 1px solid var(--ac-line); border-radius: 18px; padding: 22px 24px; } .pf-sect-h { margin-bottom: 16px; } .pf-sect-h h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ac-ink); margin: 0; } .pf-sect-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--ac-faint); } .pf-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; } .pf-f { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ac-ink-soft); } .pf-f.pf-wide { grid-column: 1 / -1; } .pf-f input, .pf-f select, .pf-f textarea { padding: 11px 13px; border: 1px solid var(--ac-line); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 400; color: var(--ac-ink); background: var(--ac-cream); } .pf-f textarea { resize: vertical; } .pf-f input:focus, .pf-f select:focus, .pf-f textarea:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.25); background: #fff; } /* toggle switch */ .pf-switch { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ac-ink); user-select: none; } .pf-switch input { position: absolute; opacity: 0; pointer-events: none; } .pf-switch-track { width: 46px; height: 26px; border-radius: 100px; background: #ddd6c6; position: relative; transition: background .2s; flex: 0 0 auto; } .pf-switch-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; } .pf-switch input:checked + .pf-switch-track { background: var(--ac-sun-deep); } .pf-switch input:checked + .pf-switch-track .pf-switch-dot { transform: translateX(20px); } .pf-switch input:focus-visible + .pf-switch-track { box-shadow: 0 0 0 3px rgba(255,196,0,.35); } /* contribution chips */ .pf-chips { display: flex; flex-wrap: wrap; gap: 9px; } .pf-chip { border: 1.5px solid var(--ac-line); background: var(--ac-cream); border-radius: 100px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ac-ink-soft); cursor: pointer; transition: all .15s; } .pf-chip:hover { border-color: var(--ac-sun-deep); color: var(--ac-ink); } .pf-chip.on { background: var(--ac-sun); border-color: var(--ac-sun); color: #241E12; box-shadow: 0 3px 10px rgba(255,196,0,.3); } .pf-chip.on::before { content: "✓ "; font-weight: 800; } .pf-actions { display: flex; align-items: center; gap: 14px; padding-top: 2px; } .pf-saved { font-size: 13.5px; font-weight: 700; color: #17692F; } @media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } .pf-side { position: static; flex-direction: row; flex-wrap: wrap; } .pf-photo, .pf-card { flex: 1 1 240px; } } @media (max-width: 560px) { .pf-fields { grid-template-columns: 1fr; } } /* ========================================================= ADMIN OVERVIEW DASHBOARD v2 (adb-) — charts, trends, attention ========================================================= */ .adb-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 30px; background: linear-gradient(115deg, #fdfdfd 0%, #FFF6DE 55%, #FFFBC2 100%); border: 1px solid #F2EEBE; box-shadow: 0 16px 40px rgba(200,187,10,.1); margin-bottom: 20px; } .adb-hero-in { position: relative; z-index: 2; } /* Two things were wrong with this line and only one of them was the face. It was monospace, which on the public site is reserved for reference numbers and IDs -- every eyebrow out there is the body face at 800 with wide tracking (.panel-eyebrow, .p4-eyebrow). So it inherits Manrope now and matches them. And it was --ac-sun-deep, #E3D300, on a hero that runs #FDFDFD to #FFFBC2: 1.43:1, which is not low contrast so much as no contrast. Bright gold is a fill colour on this site, not a text colour -- it only ever carries dark ink on top of it. #605A00 is the same hue taken down to where it can be read, 6.58:1 here, and small tracked caps need that margin more than body text does. */ .adb-hero-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #605A00; } .adb-hero h2 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 26px; margin: 6px 0 4px; letter-spacing: -.01em; color: #241E12; } .adb-hero p { margin: 0; font-size: 13.5px; color: #7a6a3a; } .adb-hero-sun { position: absolute; z-index: 1; top: -50px; right: -46px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,196,0,.85) 0 22%, rgba(255,196,0,.26) 30%, transparent 62%); pointer-events: none; } .adb-hero-sun::after { content: ""; position: absolute; inset: -28px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255,196,0,.4) 9deg 12deg, transparent 13deg 30deg); animation: adbSpin 44s linear infinite; } @keyframes adbSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .adb-hero-sun::after { animation: none; } } /* KPI cards */ .adb-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; } .adb-kpi { background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; padding: 18px; position: relative; } .adb-kpi::before { content: ""; position: absolute; left: 18px; top: 18px; width: 30px; height: 3px; border-radius: 3px; background: var(--ac-line); } .adb-kpi-n { display: block; font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); line-height: 1; margin-top: 14px; } .adb-kpi-l { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-faint); margin-top: 8px; } .adb-kpi-s { display: block; font-size: 11.5px; color: var(--ac-ink-soft); margin-top: 5px; } .adb-kpi-s b { color: #C4341F; } .adb-total::before { background: var(--ac-sun); } .adb-open::before { background: #E3D300; } .adb-resolved::before { background: #17692F; } .adb-members::before { background: #E31E24; } .adb-membersall::before { background: #8E1015; } .adb-delta { display: inline-block; font-size: 11px; font-weight: 700; } .adb-delta.up { color: #17692F; } .adb-delta.down { color: #C4341F; } /* volume chart */ .adb-chart { padding: 20px 24px 8px; margin-bottom: 18px; } .adb-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .adb-chart-h h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 16px; color: var(--ac-ink); margin: 0; } .adb-chart-sum { font-size: 12.5px; font-weight: 700; color: var(--ac-ink-soft); } .adb-spark { width: 100%; height: 84px; display: block; margin-top: 10px; } /* grid of panels */ .adb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .adb-panel { padding: 20px 22px; } .adb-panel h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 15.5px; color: var(--ac-ink); margin: 0 0 15px; } .adb-wide { grid-column: 1 / -1; } /* donut */ .adb-donutwrap { display: flex; align-items: center; gap: 18px; } .adb-donut { width: 118px; height: 118px; flex: 0 0 auto; } .adb-donut-n { font-family: "Manrope", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; fill: var(--ac-ink); } .adb-donut-l { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--ac-faint); } .adb-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; } .adb-legend-col { flex-direction: column; gap: 8px; } .adb-lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ac-ink-soft); } .adb-lg i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; } .adb-lg b { color: var(--ac-ink); } /* needs attention */ .adb-nalist { display: flex; flex-direction: column; gap: 12px; } .adb-na { display: flex; gap: 12px; align-items: flex-start; } .adb-na-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; } .adb-na strong { display: block; font-size: 14px; color: var(--ac-ink); } .adb-na small { display: block; font-size: 12px; color: var(--ac-faint); line-height: 1.4; } .adb-allclear { font-size: 13.5px; font-weight: 600; color: #17692F; background: #E4F3E8; border-radius: 12px; padding: 16px; text-align: center; } /* service / country bars */ .adb-srow { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: 12px; padding: 7px 0; } .adb-sname { font-size: 13px; font-weight: 600; color: var(--ac-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adb-strack { height: 9px; border-radius: 100px; background: var(--ac-cream2); overflow: hidden; } .adb-sfill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--ac-sun), var(--ac-sun-deep)); } .adb-cfill { background: linear-gradient(90deg, #FFC400, #A39800); } .adb-sn { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 13px; color: var(--ac-ink); text-align: right; } /* priority list */ .adb-plist { display: flex; flex-direction: column; gap: 2px; } .adb-prow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--ac-line-soft); } .adb-prow:last-child { border-bottom: 0; } .adb-pdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .adb-pname { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ac-ink); } .adb-pn { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 14px; color: var(--ac-ink); } /* member tiers */ .adb-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .adb-tier { border-radius: 13px; padding: 15px 10px; text-align: center; } .adb-tier span { display: block; font-family: "Lora", Georgia, serif; font-size: 24px; font-weight: 600; line-height: 1; } .adb-tier small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; } .adb-t-reg { background: #eeeeee; color: #6b5f3f; } .adb-t-ann { background: #FFFBCC; color: #6D6500; } .adb-t-life { background: linear-gradient(135deg, #FFFBCC, var(--ac-sun)); color: #241E12; } .adb-note { font-size: 12px; color: var(--ac-faint); margin: 14px 0 0; } /* recent */ .adb-recent { display: flex; flex-direction: column; } .adb-rrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ac-line-soft); } .adb-rrow:last-child { border-bottom: 0; } .adb-rref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--ac-ink); background: var(--ac-cream2); padding: 4px 8px; border-radius: 7px; } .adb-rsub { font-size: 14px; color: var(--ac-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1100px) { .adb-kpis { grid-template-columns: repeat(3, 1fr); } .adb-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .adb-kpis { grid-template-columns: repeat(2, 1fr); } .adb-grid { grid-template-columns: 1fr; } .adb-srow { grid-template-columns: 120px 1fr 32px; } } /* dashboard section title + per-service stat cards */ .adb-sect-t { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ac-faint); margin: 4px 0 13px; } .adb-scards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-bottom: 18px; } .adb-scard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; padding: 16px 15px 15px; transition: transform .18s, box-shadow .18s, border-color .18s; } .adb-scard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px color-mix(in srgb, var(--cc) 18%, transparent); border-color: color-mix(in srgb, var(--cc) 40%, #fff); } .adb-scard-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cb); color: var(--cc); margin-bottom: 6px; } .adb-scard-ic svg { width: 21px; height: 21px; } .adb-scard-n { font-family: "Manrope", sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); line-height: 1; } .adb-scard-t { font-size: 12.5px; font-weight: 700; color: var(--ac-ink); line-height: 1.25; } .adb-scard-s { font-size: 11px; color: var(--ac-faint); margin-top: 2px; } @media (max-width: 1100px) { .adb-scards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .adb-scards { grid-template-columns: repeat(2, 1fr); } } /* KPI accents for activity metrics */ .adb-today::before { background: #E31E24; } .adb-engage::before { background: #A39800; } /* two charts side by side */ .adb-charts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .adb-charts2 .adb-chart { margin-bottom: 0; } /* labelled bar chart */ .adb-bars { display: flex; align-items: flex-end; gap: 4px; height: 132px; margin-top: 14px; } .adb-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; min-width: 0; } .adb-bnum { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 700; color: var(--ac-ink-soft); height: 13px; } .adb-btrack { width: 100%; max-width: 26px; flex: 1; display: flex; align-items: flex-end; background: var(--ac-cream2); border-radius: 6px; overflow: hidden; } .adb-bfill { width: 100%; border-radius: 6px 6px 0 0; transition: height .3s ease; } .adb-blbl { font-size: 10.5px; font-weight: 700; color: var(--ac-ink); } .adb-bdow { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-faint); } .adb-bcol.is-we .adb-bdow { color: var(--ac-ember); } .adb-bcol:hover .adb-btrack { background: #ECE3CB; } @media (max-width: 900px) { .adb-charts2 { grid-template-columns: 1fr; } .adb-bdow { display: none; } } /* ========================================================= MEMBER FEEDBACK ========================================================= */ .fb-wrap { max-width: 620px; } .fb-card { padding: 28px 30px; } .fb-card h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 20px; color: var(--ac-ink); margin: 0 0 4px; } .fb-sub { font-size: 13.5px; color: var(--ac-faint); margin: 0 0 22px; line-height: 1.5; } .fb-field { display: block; margin-bottom: 18px; } .fb-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ac-ink-soft); margin-bottom: 8px; } .fb-stars { display: inline-flex; gap: 6px; } .fb-star { border: 0; background: none; cursor: pointer; font-size: 32px; line-height: 1; color: #e2ddcf; padding: 0; transition: transform .12s, color .12s; } .fb-star:hover { transform: scale(1.12); } .fb-star.on { color: var(--ac-sun); text-shadow: 0 2px 8px rgba(255,196,0,.4); } .fb-rtext { display: inline-block; margin-left: 12px; font-size: 13px; font-weight: 700; color: var(--ac-sun-ink); vertical-align: middle; } .fb-field select, .fb-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ac-line); border-radius: 11px; font: inherit; font-size: 14px; color: var(--ac-ink); background: var(--ac-cream); resize: vertical; } .fb-field select:focus, .fb-field textarea:focus { outline: none; border-color: var(--ac-sun); box-shadow: 0 0 0 3px rgba(255,196,0,.25); background: #fff; } .fb-actions { margin-top: 4px; } .fb-done { margin-top: 18px; padding: 20px; background: #E4F3E8; border-radius: 14px; text-align: center; } .fb-done-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 8px; } .fb-done strong { display: block; font-family: "Lora", Georgia, serif; font-size: 17px; color: #17692F; } .fb-done p { margin: 4px 0 0; font-size: 13px; color: #2f7a4c; } /* member portal sidebar — active item polish */ #mpNav .ac-nav-item.is-active { position: relative; } #mpNav .ac-nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--ac-sun-deep); } /* ========================================================= AMARAVATI — PROGRESS & NEWS HUB A dashboard, so it is built on a bright white canvas with depth carried by shadow rather than by tinted fills: white cards on white, separated by elevation the way Stripe and Linear separate a card from a page. Shadows are pure black alpha at every level -- a coloured shadow puts a hue back into the white as soon as two of them overlap. Brand colour is used where it means something and nowhere else: the red status dot marks live data, the yellow rule heads a section, and the yellow monogram marks a government publisher. It is not used to fill panels. ========================================================= */ .amv { /* Was #ECECEC, a pre-token grey left behind when --line moved to #E5E7EB. One border colour on the site. */ --amv-line: var(--line); --amv-sm: 0 1px 2px rgb(0 0 0 / .05); --amv-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --amv-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .06); padding: 30px 32px 26px; /* White, with a red edge. The panel briefly took the tile's pale yellow fill as well, on the reasoning that the tile and the panel are one selection; the fill went too far. At tile size a wash is an accent, at panel size it is the background of half the screen, and it turned the page's largest surface yellow. The border alone carries the relationship, which is all it needed: red says "this belongs to the track you pressed", and white keeps the panel part of the page's canvas rather than a block sitting on it. */ background: #FFFFFF; border: 1px solid var(--red-primary); border-radius: 18px; box-shadow: var(--amv-lg); } /* ---- heading ---- */ /* Two columns: the name of the track on the left, its one line on the right. The same shape the page's own "Engage with Andhra Pradesh" header uses, so the panel reads as part of the page rather than a box dropped into it -- and it costs one row instead of two, which is what pulls the news and the gallery up the screen. align-items: end sits the lede on the heading's baseline rather than floating it at the top of a taller cell. */ .amv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 10px 32px; align-items: end; margin-bottom: 22px; } .amv-top h3 { margin: 10px 0 0; font-size: 22px; color: var(--ink); } .amv-lede { margin: 0 0 3px; color: var(--text); font-size: 14px; line-height: 1.6; } /* One column is not enough width for both, and a 14px line squeezed into a third of a phone screen is worse than a second row. */ @media (max-width: 900px) { .amv-top { grid-template-columns: 1fr; align-items: start; } .amv-lede { margin-bottom: 0; } } /* The one place a live-data cue is earned, so it gets the red. */ .amv-live { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .amv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-primary); box-shadow: 0 0 0 3px rgba(227, 30, 36, .16); animation: amv-pulse 2.4s ease-in-out infinite; } @keyframes amv-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(227, 30, 36, .16); } 50% { box-shadow: 0 0 0 6px rgba(227, 30, 36, .05); } } /* ---- two-column body: news left, gallery right ---- */ .amv-body { display: grid; /* The gallery earns more width now that the news is one box rather than a stack -- the left column no longer needs the room to breathe. */ grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; } .amv-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--amv-line); } .amv-sec-head h4 { position: relative; margin: 0; padding-left: 13px; font-size: 15px; font-weight: 800; color: var(--ink); } .amv-sec-head h4::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--yellow); } .amv-count { font-size: 11.5px; color: var(--muted); } /* ---- news cards ---- */ /* ---- the news box: one item at a time ---- */ .amv-cards { display: block; } .amv-news-stage { overflow: hidden; border-radius: 14px; } .amv-news-track { display: flex; align-items: stretch; transition: transform .6s cubic-bezier(.65, 0, .35, 1); will-change: transform; } /* Each card fills the frame. min-width: 0 stops a long headline from forcing the flex item wider than the stage and shunting the others off by a few pixels each, which compounds across four slides. */ .amv-news-track > .amv-card { flex: 0 0 100%; min-width: 0; transform: none; } .amv-news-track > .amv-card:hover { transform: none; } .amv-card { display: block; padding: 16px 18px; background: #FFFFFF; border: 1px solid var(--amv-line); border-radius: 14px; box-shadow: var(--amv-sm); text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .amv-card:hover, .amv-card:focus-visible { transform: translateY(-3px); border-color: #DEDEDE; box-shadow: var(--amv-md); } .amv-card:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } .amv-card-top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; } /* Publisher monogram. No bundled logos -- see the note in amaravati-data.js. */ .amv-logo { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #F6F6F6; border: 1px solid var(--amv-line); font-size: 11.5px; font-weight: 900; letter-spacing: .02em; color: var(--muted); } .amv-logo.is-official { background: var(--yellow-soft); border-color: #FFC400; color: #797000; } .amv-card-meta { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; } .amv-src { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--ink); } .amv-card-meta time { font-size: 11.5px; color: var(--muted); } .amv-badge { padding: 1px 7px; border-radius: 999px; background: var(--yellow-soft); border: 1px solid #FFC400; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #797000; } .amv-card h5 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; color: var(--ink); } .amv-card p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text); } .amv-more { font-size: 12px; font-weight: 800; color: var(--red-primary); } /* The external-link glyph, one shape reused everywhere. */ .amv-ext { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; } .amv-card-top .amv-ext { margin-left: auto; color: var(--muted); } .amv-card:hover .amv-card-top .amv-ext { color: var(--red-primary); opacity: 1; } /* ---- gallery ---- */ /* One frame at a time, advancing on its own -- the same treatment as the About Us journey, and the same 1s cubic-bezier so the two read as one family. The track slides sideways here because the panel is wide and short, where the journey's is tall and narrow. */ .amv-gallery { display: block; } .amv-gal-stage { overflow: hidden; border: 1px solid var(--amv-line); border-radius: 12px; box-shadow: var(--amv-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .amv-gal-stage:hover { transform: translateY(-3px); border-color: #DEDEDE; box-shadow: var(--amv-md); } .amv-gal-track { display: flex; transition: transform 1s cubic-bezier(.65, 0, .35, 1); will-change: transform; } .amv-shot { flex: 0 0 100%; position: relative; display: block; padding: 0; overflow: hidden; aspect-ratio: 16 / 10; background: #FFFFFF; border: 0; cursor: pointer; } .amv-shot:focus-visible { outline: 2px solid var(--red-primary); outline-offset: -3px; } .amv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .amv-gal-stage:hover .amv-shot img { transform: scale(1.05); } .amv-gal-dots, .amv-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; } .amv-gal-dot, .amv-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #D8D8D8; cursor: pointer; transition: background .2s ease, width .2s ease; } /* The selected dot stays a dot. It used to stretch to a 20px pill with a 4px radius, so the row changed shape as it advanced; now only the colour changes and the row keeps its rhythm. The width transition is left on the base rule -- harmless with nothing to animate, and it is what would carry the pill back if anyone wants it. */ .amv-gal-dot.is-on, .amv-dot.is-on { background: var(--red-primary); } .amv-gal-dot:focus-visible, .amv-dot:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } .amv-shot-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 7px; /* Dark only inside the photograph, where white text needs it. */ background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3; text-align: left; /* Above the picture, not behind it. On a plain frame the caption comes after the <img> in the DOM and painted on top for free, so this was never needed. A bleed frame raises its <img> to z-index 1 to clear the blurred backdrop underneath, and that lifted the photograph over the caption as well -- the text was still there, just covered. Stating a layer here rather than in the bleed rules keeps every frame on one answer. */ z-index: 2; } .amv .scheme-gate { margin-top: 26px; } .amv-foot { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); } .amv-foot a { color: var(--red-primary); } /* ---- lightbox ---- */ .amv-lb-ov { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba(20, 20, 20, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .24s; } .amv-lb-ov:not([hidden]) { display: flex; } .amv-lb-ov.is-open { opacity: 1; pointer-events: auto; } .amv-lb { position: relative; width: 100%; max-width: 900px; max-height: 90vh; background: #FFFFFF; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .4); transform: translateY(16px) scale(.97); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .amv-lb-ov.is-open .amv-lb { transform: none; } .amv-lb-fig { margin: 0; display: grid; } .amv-lb-fig img { width: 100%; max-height: 68vh; object-fit: contain; background: #FAFAFA; display: block; } .amv-lb-fig figcaption { display: grid; gap: 4px; padding: 16px 20px 18px; border-top: 1px solid #ECECEC; } .amv-lb-fig strong { font-size: 15px; color: var(--ink); } .amv-lb-fig span { font-size: 13px; color: var(--text); } .amv-lb-fig small { font-size: 11px; color: var(--muted); } .amv-lb-x, .amv-lb-nav { position: absolute; z-index: 5; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #444; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / .18); transition: background .15s, color .15s, transform .15s; } .amv-lb-x { top: 14px; right: 14px; width: 34px; height: 34px; font-size: 21px; line-height: 1; } .amv-lb-nav { top: 34%; width: 40px; height: 40px; font-size: 26px; line-height: 1; } .amv-lb-prev { left: 14px; } .amv-lb-next { right: 14px; } .amv-lb-x:hover, .amv-lb-nav:hover { background: var(--red-primary); color: #fff; } .amv-lb-nav:active { transform: scale(.94); } /* ---- responsive ---- */ @media (max-width: 1080px) { .amv-body { grid-template-columns: 1fr; } .amv-news-track { transition-duration: .45s; } /* Stacked under the news, the stage has the full width, so it gets a shallower crop rather than a very tall photograph. */ .amv-shot { aspect-ratio: 21 / 9; } } @media (max-width: 620px) { .amv { padding: 22px 18px 20px; } .amv-shot { aspect-ratio: 16 / 10; } .amv-lb-ov { padding: 14px; } .amv-lb-nav { width: 34px; height: 34px; font-size: 22px; } } /* Lift and zoom are decoration; honour a request to switch them off. */ @media (prefers-reduced-motion: reduce) { .amv-card, .amv-shot img, .amv-lb, .amv-gal-stage, .amv-gal-track, .amv-news-track { transition-duration: .01ms; } .amv-card:hover, .amv-gal-stage:hover { transform: none; } .amv-gal-stage:hover .amv-shot img { transform: none; } .amv-dot { animation: none; } } /* ========================================================= CONNECT AP — BRIGHT WHITE CANVAS The page background was never the problem: body is already #FFFFFF. The dullness came from three other places, and all three are fixed here. Tinted fills. The sign-in gate under every track sat on a red-to-yellow gradient, and the constituency panels (currently commented out in index.html) filled a whole band with #FFFBC2. Flat tint over flat tint reads muddy because nothing is lifted off anything. Warm and cool greys mixed together. --surface was #f7f7f7, which is warm (blue channel two below red), and --line was #e8e8e8, which is neutral. Two different greys next to each other is what "washed out" looks like at a glance. Both are now pure neutral -- R, G and B equal, so there is no hue in the greys at all. Coloured shadows. .info-card cast rgba(31,31,31,.05) and the active tile cast a red rgba(227,30,36,.12) glow. Every shadow here is pure black alpha instead: a tinted shadow puts a hue back into the white the moment two of them overlap. *** GREYS ARE NEUTRAL ON PURPOSE. *** Do not reach for Tailwind's #e7e7e7 or slate/zinc ramps here. Those are cool greys -- #e7e7e7 is 229,231,235, so the blue channel runs six above the red and the whole page picks up a faint blue cast. Every value below has R = G = B. Scoped to this route, and --line/--surface/--muted are redefined on the screen rather than at :root, so the brighter values reach every descendant that already reads those tokens and no other screen moves. ========================================================= */ .screen[data-route="connect-ap"] { --line: #FFFFFF; /* white line -- no grey dividers on this route */ --surface: #FFFFFF; /* pure white ground, matching the TDP site */ --muted: #6E6E6E; /* was #7a7a7a -- 4.5:1 was the floor, not the aim */ /* was #636363 (95,99,104) -- Google's grey, and the last cool value on the page: its blue channel runs nine above the red, which is exactly the cast this route is meant not to have. #606060 is neutral and the contrast is unchanged at 7.0:1 on white. */ --text: #606060; /* Clean neutral elevation so white cards read on white -- no grey cast. */ --cap-sm: 0 1px 3px rgb(0 0 0 / .05); --cap-md: 0 6px 16px rgb(0 0 0 / .07); --cap-lg: 0 12px 28px rgb(0 0 0 / .08); background: #FFFFFF; } /* The second line of the heading sat at #8f8f8f: 3:1, which large text is allowed but which is most of where "washed out" came from. */ .screen[data-route="connect-ap"] .section-heading h2 span { color: #6F6F6F; } /* The kicker was #787878 -- a green-grey, green channel twelve above red. The last chromatic near-grey on the route. #6F6F6F is neutral and clears 4.5:1 on white, which this size needs. */ .screen[data-route="connect-ap"] .section-kicker { color: #6F6F6F; } /* ---- track tiles ---- */ /* These were outlines with no rest elevation, so they read as drawn-on rectangles rather than cards. A small shadow at rest gives the hover somewhere to travel from. */ .screen[data-route="connect-ap"] .tile { background: #FFFFFF; box-shadow: var(--cap-sm); } .screen[data-route="connect-ap"] .tile:hover { border-color: #DEDEDE; box-shadow: var(--cap-md); } /* Selection stays the red border. The glow under it goes neutral -- a red shadow on white is exactly the tint this page is getting rid of. */ .screen[data-route="connect-ap"] .tile.is-active { border-color: var(--red-primary); box-shadow: var(--cap-md); } /* ---- content cards ---- */ .screen[data-route="connect-ap"] .info-card { background: #FFFFFF; box-shadow: var(--cap-lg); } .screen[data-route="connect-ap"] .subtile { background: #FFFFFF; box-shadow: var(--cap-sm); } .screen[data-route="connect-ap"] .subtile:hover { border-color: #DEDEDE; box-shadow: var(--cap-md); } .screen[data-route="connect-ap"] .tab { background: #FFFFFF; box-shadow: var(--cap-sm); } .screen[data-route="connect-ap"] .tab:hover { border-color: #DEDEDE; } /* ---- the sign-in gate ---- */ /* The dashed red border is what marks this as a members-only action, so it stays. The gradient behind it does not: it was the muddiest patch left on the page, and the border already carries the message. */ .screen[data-route="connect-ap"] .scheme-gate { background: #FFFFFF; box-shadow: var(--cap-sm); } /* ---- constituency panels ---- Commented out in index.html at the moment. These rules are kept so that uncommenting brings them back white rather than back to the #FFFBC2 and #FFE2DD fills they used to carry. */ .screen[data-route="connect-ap"] .home-place { background: #FFFFFF; border: 1px solid var(--line); box-shadow: var(--cap-md); } /* The signed-in variant still has to read as "yours" rather than as another empty form, so it keeps a red hairline instead of a red fill. */ .screen[data-route="connect-ap"] .hp-mine { background: #FFFFFF; border-color: rgba(227, 30, 36, .28); } .screen[data-route="connect-ap"] .hp-field select { background: #FFFFFF; box-shadow: var(--cap-sm); } .screen[data-route="connect-ap"] .hp-field select:disabled { background: var(--surface); box-shadow: none; } .screen[data-route="connect-ap"] .hp-result { background: #FFFFFF; box-shadow: var(--cap-sm); } /* NRI Hub — FAQ accordion (Grievances) */ .hs-faqs { display: flex; flex-direction: column; } .hs-faq { border-bottom: 1px solid #eeeeee; } .hs-faq:last-child { border-bottom: 0; } .hs-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; color: #201d18; padding: 15px 0; } .hs-faq-x { position: relative; width: 16px; height: 16px; flex: 0 0 auto; } .hs-faq-x::before, .hs-faq-x::after { content: ""; position: absolute; background: var(--cc, #E68A00); border-radius: 2px; transition: transform .2s, opacity .2s; } .hs-faq-x::before { left: 0; right: 0; top: 7px; height: 2px; } .hs-faq-x::after { top: 0; bottom: 0; left: 7px; width: 2px; } .hs-faq.open .hs-faq-x::after { transform: rotate(90deg); opacity: 0; } .hs-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .hs-faq.open .hs-faq-a { max-height: 260px; } .hs-faq-a p { margin: 0 0 15px; font-size: 13px; color: #6f6a60; line-height: 1.55; } .hs-faq-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .hs-faq-foot span { font-size: 12.5px; color: #7f7a70; } /* ========================================================= P4 — Public, Private & People Partnership (Connect AP) ========================================================= */ .p4 { display: flex; flex-direction: column; gap: 22px; } .p4-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr .9fr; gap: 28px; align-items: center; border-radius: 22px; padding: 34px 34px; color: #fff; background: radial-gradient(120% 120% at 85% 10%, rgba(255,196,0,.28), transparent 46%), linear-gradient(120deg, #2a1005 0%, #5a1608 55%, #7a1e0a 100%); box-shadow: 0 22px 54px rgba(120,30,10,.3); } .p4-hero-copy { position: relative; z-index: 2; } .p4-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); } .p4-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,196,0,.2); } .p4-hero h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 28px; letter-spacing: -.015em; color: #fff; margin: 12px 0 10px; line-height: 1.12; } .p4-hero-copy p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.86); max-width: 54ch; } .p4-hero-copy p strong { color: #fff; } .p4-hero-cta { margin-top: 20px; } .p4-hero-fig { position: relative; z-index: 2; margin: 0; text-align: center; } .p4-hero-photo { width: 100%; max-width: 230px; aspect-ratio: 1/1; object-fit: cover; object-position: center top; border-radius: 18px; border: 3px solid rgba(255,255,255,.25); box-shadow: 0 18px 40px rgba(0,0,0,.35); background: #eee; } .p4-hero-badge { position: absolute; bottom: 34px; right: 6px; width: 58px; height: 58px; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .p4-hero-fig figcaption { margin-top: 12px; font-size: 11.5px; color: rgba(255,255,255,.7); line-height: 1.4; } .p4-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .p4-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; border-top: 3px solid var(--yellow); } .p4-stat b { display: block; font-family: "Lora", Georgia, serif; font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.1; } .p4-stat small { display: block; font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.45; } .p4-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .p4-concept { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; } .p4-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px; } .p4-ic svg { width: 25px; height: 25px; } .p4-golden { border-left: 3px solid var(--yellow); } .p4-golden .p4-ic { background: #FFFBCC; color: #9C9109; } .p4-guide { border-left: 3px solid var(--red-primary); } .p4-guide .p4-ic { background: #FFE7E2; color: var(--red-primary); } .p4-concept h4 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 6px; } .p4-concept p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); } .p4-concept em { color: var(--ink); font-style: italic; font-weight: 600; } .p4-ways-h { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17px; color: var(--ink); margin: 4px 0 12px; } .p4-way-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .p4-way { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; text-align: center; transition: transform .18s, box-shadow .18s, border-color .18s; } .p4-way:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(227,30,36,.1); border-color: transparent; } .p4-way-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(140deg, #FFE7E2, #FFD4CC); color: var(--red-primary); margin-bottom: 12px; } .p4-way-ic svg { width: 23px; height: 23px; } .p4-way strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; } .p4-way small { font-size: 12.5px; color: var(--muted); line-height: 1.45; } .p4-nri { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #241E12, #3a3320); color: #fff; border-radius: 16px; padding: 18px 22px; } .p4-nri-ic { font-size: 20px; color: var(--yellow); flex: 0 0 auto; } .p4-nri p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.85); } .p4-nri strong { color: #fff; } .p4-sources h5 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .p4-source-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .p4-src { display: flex; align-items: flex-start; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .p4-src:hover { border-color: var(--red-primary); box-shadow: 0 10px 24px rgba(227,30,36,.09); transform: translateY(-2px); } .p4-src-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: #f1f1f1; color: #55606e; } .p4-src-ic svg { width: 22px; height: 22px; } .p4-src-official .p4-src-ic { background: #FFE7E2; color: var(--red-primary); } .p4-src-tx { flex: 1; min-width: 0; } .p4-src-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .p4-src-top strong { font-size: 14.5px; color: var(--ink); font-weight: 800; } .p4-src-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #55606e; background: #f1f1f1; padding: 2px 7px; border-radius: 100px; } .p4-src-tag.tag-gov { color: var(--red-primary); background: #FFE7E2; } .p4-src-tx small { display: block; font-size: 12.5px; color: var(--text); margin: 4px 0 6px; line-height: 1.45; } .p4-src-dom { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--muted); } .p4-src-go { flex: 0 0 auto; color: #bcbcbc; align-self: center; transition: color .15s, transform .15s; } .p4-src-go svg { width: 17px; height: 17px; } .p4-src:hover .p4-src-go { color: var(--red-primary); transform: translate(2px,-2px); } .p4-foot { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; } .p4-foot a { color: var(--red-primary); font-weight: 600; } @media (max-width: 900px) { .p4-stats { grid-template-columns: repeat(2, 1fr); } .p4-two, .p4-way-grid, .p4-source-list { grid-template-columns: 1fr; } .p4-hero { grid-template-columns: 1fr; text-align: center; } .p4-hero-copy p { max-width: none; } .p4-eyebrow { justify-content: center; } .p4-hero-fig { max-width: 260px; margin: 0 auto; } } @media (max-width: 560px) { .p4-hero { padding: 26px 22px; } } /* P4 — official handbooks (PDF cards) */ .p4-books h5 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .p4-book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .p4-book { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .p4-book:hover { border-color: var(--red-primary); box-shadow: 0 10px 24px rgba(227,30,36,.1); transform: translateY(-2px); } .p4-book-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: #C4341F; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; } .p4-book-tx { flex: 1; min-width: 0; } .p4-book-tx strong { display: block; font-size: 14.5px; color: var(--ink); } .p4-book-tx small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .p4-book-dl { flex: 0 0 auto; color: var(--red-primary); } .p4-book-dl svg { width: 20px; height: 20px; } @media (max-width: 900px) { .p4-book-grid { grid-template-columns: 1fr; } } /* ========================================================= P4 — COMPACT (one-screen) VARIANT The P4 tab was a tall vertical stack that scrolled well past the fold. It is rebuilt into the same .amv frame the Amaravati / Vizag / Polavaram hubs use -- header, a two-column body, the sign-in gate, a footnote -- so it fits the viewport without scrolling and reads as one of the set. All the content is kept, just denser: concepts and "three ways" on the left, the key figures, handbooks and press links on the right. ========================================================= */ .p4v-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; } .p4v-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .p4v-cons { display: grid; gap: 8px; } .p4v-con { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--cap-sm); } .p4v-con.p4-golden { border-left: 3px solid var(--yellow); } .p4v-con.p4-guide { border-left: 3px solid var(--red-primary); } .p4v-con .p4-ic { width: 40px; height: 40px; margin: 0; flex: 0 0 auto; } .p4v-con .p4-ic svg { width: 21px; height: 21px; } .p4v-con-tx h4 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 15.5px; color: var(--ink); margin: 1px 0 3px; } .p4v-con-tx p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text); } .p4v-con-tx em { color: var(--ink); font-style: italic; font-weight: 600; } .p4v-ways-h { display: block; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 13px; color: var(--ink); margin: 1px 0 6px; } .p4v-way-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .p4v-way { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; font-size: 11.5px; font-weight: 700; color: var(--ink); } .p4v-way-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, #FFE7E2, #FFD4CC); color: var(--red-primary); } .p4v-way-ic svg { width: 17px; height: 17px; } .p4v .p4-nri { padding: 9px 14px; gap: 11px; } .p4v .p4-nri p { font-size: 12.5px; line-height: 1.45; } .p4v-side { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .p4v-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .p4v-stat { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--yellow); border-radius: 12px; padding: 8px 11px; } .p4v-stat b { display: block; font-family: "Lora", Georgia, serif; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.1; } .p4v-stat small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.3; } .p4v-links { display: flex; flex-direction: column; gap: 7px; } .p4v-link { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 8px 11px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .p4v-link:hover { border-color: var(--red-primary); box-shadow: 0 8px 20px rgba(227,30,36,.08); transform: translateY(-1px); } .p4v-link-gov { border-left: 3px solid var(--red-primary); } .p4v-link-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #f1f1f1; color: #55606e; } .p4v-link-ic svg { width: 18px; height: 18px; } .p4v-link-gov .p4v-link-ic { background: #FFE7E2; color: var(--red-primary); } .p4v-pdf { background: #C4341F; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .04em; } .p4v-link-tx { flex: 1; min-width: 0; } .p4v-link-tx strong { display: block; font-size: 13px; color: var(--ink); font-weight: 800; } .p4v-link-tx small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; line-height: 1.3; } .p4v-link-go { flex: 0 0 auto; color: #bcbcbc; font-size: 16px; line-height: 1; } .p4v-link:hover .p4v-link-go { color: var(--red-primary); } .p4v-press { margin: 3px 0 0; font-size: 11px; color: var(--muted); line-height: 1.7; } .p4v-press a { color: var(--red-primary); font-weight: 700; text-decoration: none; margin: 0 3px; } .p4v-press a:hover { text-decoration: underline; } .p4v .scheme-gate { margin-top: 10px; flex-wrap: nowrap; } /* Keep the sign-in button its own width so the gate stays one row (~60px) rather than the copy pushing a full-width button onto a second line. */ .p4v .scheme-gate .btn { flex: 0 0 auto; width: auto; white-space: nowrap; } .p4v-foot { margin-top: 8px; } @media (max-width: 620px) { .p4v .scheme-gate { flex-wrap: wrap; } } @media (max-width: 900px) { .p4v-body { grid-template-columns: 1fr; } } /* Join — "check your inbox" confirmation MODAL (email verification on) */ .ec-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(26,20,14,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .26s; } .ec-overlay:not([hidden]) { display: flex; } .ec-overlay.is-open { opacity: 1; } .ec-modal { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 24px; padding: 38px 32px 30px; text-align: center; box-shadow: 0 44px 100px rgba(26,20,14,.4); transform: translateY(16px) scale(.96); transition: transform .3s cubic-bezier(.2,.8,.2,1); } .ec-overlay.is-open .ec-modal { transform: none; } .ec-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, var(--red-primary), var(--yellow)); } .ec-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f0f0f0; color: #666666; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; } .ec-x:hover { background: var(--red-primary); color: #fff; } .ec-ic { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, #FFFBCC, #FFC400); color: #6D6500; margin-bottom: 16px; box-shadow: 0 10px 26px rgba(255,196,0,.35); animation: ecPop .45s cubic-bezier(.2,1.5,.4,1) both; } .ec-ic svg { width: 36px; height: 36px; } .ec-ic .ec-tick { stroke-dasharray: 14; stroke-dashoffset: 14; animation: ecTick .5s ease .35s forwards; } @keyframes ecPop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes ecTick { to { stroke-dashoffset: 0; } } .ec-modal h3 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 24px; color: var(--ink); margin: 0 0 10px; } .ec-modal > p { margin: 0 auto 20px; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 34ch; } .ec-modal strong[data-confirm-email] { color: var(--red-primary); } .ec-code { background: var(--surface, #f7f7f7); border: 1px solid var(--line); border-radius: 15px; padding: 16px; margin: 0 0 16px; } .ec-code-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; } .jc-otp { display: flex; gap: 10px; } .jc-otp input { flex: 1; min-width: 0; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 22px; letter-spacing: 8px; font-weight: 700; color: var(--ink); padding: 12px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; } .jc-otp input:focus { outline: none; border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(227,30,36,.2); } .jc-otp .btn { white-space: nowrap; } #joinOtpErr { text-align: center; margin: 8px 0 0; } .ec-note { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; } .ec-note .linkish { color: var(--red-primary); font-weight: 600; } .ec-signin { display: inline-flex; } @media (prefers-reduced-motion: reduce) { .ec-ic, .ec-ic .ec-tick { animation: none; stroke-dashoffset: 0; } } /* ========================================================= ADMIN FEEDBACK VIEW (fbv-) ========================================================= */ .fbv-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; } .fbv-kpi { background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; padding: 18px; border-top: 3px solid var(--ac-sun); } .fbv-kpi-n { display: block; font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); line-height: 1; } .fbv-kpi-n small { font-size: 18px; color: var(--ac-sun-ink); } .fbv-kpi-l { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-faint); margin-top: 8px; } .fbv-list { display: flex; flex-direction: column; gap: 12px; } .fbv-item { background: #fff; border: 1px solid var(--ac-line); border-radius: 15px; padding: 18px 20px; } .fbv-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fbv-stars { font-size: 16px; letter-spacing: 1px; } .fbv-star { color: #e2ddcf; } .fbv-star.on { color: var(--ac-sun); } .fbv-cat { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ac-sun-ink); background: #FFFBCC; padding: 3px 10px; border-radius: 100px; } .fbv-date { margin-left: auto; font-size: 12px; color: var(--ac-faint); } .fbv-msg { margin: 12px 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ac-ink-soft); } .fbv-nomsg { color: var(--ac-faint); font-style: italic; } .fbv-who { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--ac-ink); } .fbv-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFFBCC, var(--ac-sun)); color: #625B00; font-size: 12px; font-weight: 800; } @media (max-width: 700px) { .fbv-summary { grid-template-columns: 1fr; } } /* The membership card carries the party emblem and the full NRI TDP lockup, both sitting straight on the card with no white plate behind them. The rules are scoped through .mcard-top because a generic ".mcard-top img" further up sets a 26px square, which would squash a wide lockup. */ .mcard-top .mcard-lockup { width: auto; height: 54px; max-width: 58%; flex: none; padding: 0; background: none; border-radius: 0; box-shadow: none; object-fit: contain; } @media (max-width: 520px) { .mcard-top .mcard-lockup { height: 42px; max-width: 54%; } } /* The leadership badge on the membership card: NTR, Nara Lokesh and Chandrababu Naidu, already round with its own gold ring in the asset. Absolutely placed rather than in the flow, because it has to sit in the gap between the plan chip (which ends at y=62 on the 420x259 card) and the member name (which starts at y=135), on the right edge with the chip. */ /* Scoped through .mcard-top: a generic ".mcard-top img" further up sets a 26px square, and the badge sat at 26px until this outranked it -- the same trap the lockup hit. */ .mcard-top .mcard-leaders { /* The white ring round the badge was not in the artwork -- a generic ".mcard-top img" rule gives every image in this row background:#fff and 2px of padding, which on a round image reads as a white rim. Both are reset here; the lockup already resets them for the same reason. */ background: none; padding: 0; /* In the top row now, immediately right of the lockup, rather than absolutely placed lower down. The party emblem that used to lead the row is gone: with the leadership badge beside the wordmark the row carried three marks, and the badge is the one that says whose card this is. */ width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 5px rgba(0, 0, 0, .14), 0 8px 18px rgba(0, 0, 0, .18); } /* The badge is in the header row now, so the name and country have the full width back -- the padding here was only ever clearing an overlap. */ @media (max-width: 420px) { .mcard-top .mcard-leaders { width: 44px; height: 44px; } } /* ========================================================= MEMBERSHIP CARD — ONE GOLD PER TIER The card takes its own gold from the plan being chosen, so picking a tier is visible on the thing you are buying rather than only named in a chip. The three are a ladder in one hue, not three different colours: same brand yellow, taken progressively deeper. Regular is light honey, Annual is the brand gold, Lifetime is a deep amber. Read together they say cheap, better, best without any of them looking like a mistake. Gradients cannot be transitioned, so the swap is instant and only the shadow eases -- that reads as the card settling rather than as a colour animation stuttering through a midpoint nobody chose. Text stays var(--ink) on all three; the deepest gold is still light enough to carry near-black at well over 7:1. ========================================================= */ .mcard { transition: box-shadow .32s cubic-bezier(.22, .61, .36, 1); } /* Regular — light honey */ .mcard[data-plan="regular"] { background: linear-gradient(135deg, #FFF8A0 0%, #FFF24D 52%, #FFC400 100%); box-shadow: 0 20px 44px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .6); } /* Annual — the brand gold */ .mcard[data-plan="annual"] { background: linear-gradient(135deg, #FFF248 0%, #FFC400 48%, #EFDE00 100%); box-shadow: 0 22px 48px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .55); } /* Lifetime — deep amber, the heaviest of the three */ .mcard[data-plan="lifetime"] { background: linear-gradient(135deg, #FFF355 0%, #EFDE00 45%, #C9BB00 100%); box-shadow: 0 26px 54px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .5); } @media (prefers-reduced-motion: reduce) { .mcard { transition-duration: .01ms; } } /* Keep the lockup and the emblem crisp on every tier. The lockup's "TDP" is the brand yellow, so on the deeper Annual and Lifetime golds it was sinking into the card -- the wordmark looked half erased even though nothing about it had changed. The fix is a halo, not a plate. Stacked drop-shadow() filters follow the artwork's own outline, so the mark gets a hairline of light around its actual shape rather than sitting on a white rectangle -- which is what was removed on purpose. A single dark shadow underneath keeps it from looking like it is glowing. Deliberately not done: recolouring the yellow letters. That is the official mark; making it legible is our problem, not the logo's. */ .mcard-top .mcard-lockup { /* Offset shadows only. A 0 0 glow follows the alpha outline into the enclosed counters of D and P and fills them with white, which looked like a fault in the logo. An offset shadow shifts instead of spreading, so the counters stay open. */ filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)) drop-shadow(0 2px 5px rgba(0, 0, 0, .18)); } /* ========================================================= JOIN — TIGHTEN THE PLAN PICKER The three plan cards were 467px of the form column on their own, which is what pushed the first form field below the fold. Nothing is removed here: all three plans, all nine benefit lines and the summary strip stay exactly as they were. Only the spacing around them changes. The benefits become a real two-column grid rather than a wrapping flex row. Wrapping produced ragged rows whose height depended on how long each label happened to be; a grid gives two even columns and one predictable row height, which is both tidier and shorter. ========================================================= */ .plan-cards { gap: 8px; margin: 12px 0 10px; } .plan-cards .plan { padding: 11px 14px; } .pc-head strong { font-size: 15.5px; } .pc-head em { font-size: 16.5px; } .pc-tag { font-size: 12px; margin: 1px 0 6px; } .pc-points { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; } .pc-points span { font-size: 11.5px; line-height: 1.45; } .plan-summary { padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.55; } .app-form.join-form { margin-top: 12px; } /* Narrow panels cannot carry two columns of benefit text. */ @media (max-width: 560px) { .pc-points { grid-template-columns: 1fr; } } /* Join form: the same tightening as the plan picker, and for the same reason -- eight fields at 74px a row put the submit button a long way below the fold. Field count, labels and order are untouched; only the rhythm changes. Inputs stay at 41px tall, which is still a comfortable target. */ .join-form.app-form { gap: 11px; } .join-form.app-form label { gap: 4px; } .join-form.app-form input, .join-form.app-form select, .join-form.app-form textarea { padding: 9px 12px; } /* ========================================================= JOIN — PREMIUM SELECTION, DEFERRED FORM Nothing is removed here. All three plans, all nine benefit lines, the summary strip and every one of the nine form fields are still on the page; the form simply waits behind one button until a plan has been chosen. ========================================================= */ /* ---- the plan cards ---- */ /* Unselected stay flat white so the chosen one is the only thing with weight on it. Border-width does not change between states -- a 1.5px to 2px jump would shift the text inside by half a pixel and make the row twitch on every selection. The ring does the work instead. */ .plan-cards .plan { background: #FFFFFF; transition: background .28s ease, border-color .2s ease, box-shadow .28s cubic-bezier(.22, .61, .36, 1), transform .28s cubic-bezier(.22, .61, .36, 1); } .plan-cards .plan:hover { border-color: #EBE37A; } .plan-cards .plan.is-selected { background: linear-gradient(135deg, #FFFCF0 0%, #FFF6D6 55%, #FFFAB8 100%); border-color: #FFC400; box-shadow: 0 0 0 3px rgba(255, 196, 0, .3), 0 10px 22px -6px rgba(0, 0, 0, .16); transform: translateY(-1px); } /* ---- continue button ---- */ .join-continue { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 2px; padding: 13px 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #FFF24D 0%, var(--yellow) 52%, #F0DF00 100%); color: var(--ink); font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .01em; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3); transition: box-shadow .2s ease, transform .12s ease, filter .2s ease; } .join-continue:hover { filter: brightness(1.04); box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .34); } .join-continue:active { transform: translateY(1px); } .join-continue:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } /* A chevron drawn in CSS rather than shipped as an icon: it is two borders, and it has to rotate, which an <img> cannot do without a second file. */ .join-continue .jc-chev { width: 8px; height: 8px; border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; /* Points right: this moves the panel on to the next step, it does not open a drawer underneath. */ transform: rotate(-45deg) translate(-1px, -1px); } /* ---- the two steps ---- */ /* They occupy the same place, so the swap is a cross-fade with a short rise rather than a slide: a slide implies the other step is still there, just off to one side, which is not what happens. */ .join-step { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1); } .join-step.is-in { opacity: 1; transform: none; } /* ---- the chosen-plan bar in step 2 ---- */ .join-chosen { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 11px 14px; border: 1.5px solid #FFC400; border-radius: 12px; background: linear-gradient(135deg, #FFFCF0 0%, #FFF6D6 55%, #FFFAB8 100%); box-shadow: 0 0 0 3px rgba(255, 196, 0, .22); } .jch-label { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .jch-name { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 14.5px; color: var(--ink); } .jch-fee { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 14.5px; color: #A39800; margin-left: auto; } .jch-change { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; background: #fff; font-size: 11.5px; font-weight: 800; color: var(--ink); cursor: pointer; transition: border-color .15s ease, color .15s ease; } .jch-change:hover { border-color: var(--red-primary); color: var(--red-primary); } .jch-change:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .plan-cards .plan, .join-step, .join-continue { transition-duration: .01ms; } .join-step { transform: none; } .plan-cards .plan.is-selected { transform: none; } } /* ========================================================= MEMBERSHIP CARD — LIFETIME IS THE FLAGSHIP Regular and Annual are golds. Lifetime used to be gold into charcoal into near-black, and the black was doing the work of looking expensive. The black is gone and nothing replaced it: the card is gold the whole way across, and what makes it the flagship is the finish rather than a second colour. Modelled on the reference gold membership card -- banded metallic foil, a brushed diagonal grain, an engraved bracket frame and the emblem set as a medallion. It stays in the brand yellow, so it sits beside the other two tiers as the same family, one grade up. Foregrounds mostly inherit here, because the defaults are already tuned for near-black ink on yellow and this card is yellow. Only the verified mark is restated, and only because of where it sits. ========================================================= */ .mcard[data-plan="lifetime"] { /* Metal, not a flat fill. What separates a gold card from a yellow one is that the light does not fall evenly across it: a real foil runs deep at the shaded corners, blows out to near-white where it catches the light, and bands in between. So the ramp alternates rather than fading once -- deep gold, brand gold, a pale blown highlight, back to gold, and deep again at the far corner. Both ends stop at #A39800 rather than going darker. That is the floor at which the card's near-black ink still clears AA: 5.55:1 there, against 3.38:1 if the corners ran on to #7B7300. The bottom-right corner is exactly where the member number and the verified mark sit, so the deep end is not somewhere text can be sacrificed. Over it, a fine diagonal at 10% white -- the brushed grain. It reads as the surface catching light rather than as stripes. */ background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 9px), linear-gradient(115deg, #A39800 0%, #C9BB00 7%, #FFC400 19%, #FFFAC2 31%, #EFE45E 39%, #FFC400 51%, #E3D300 63%, #FFF6A8 75%, #C9BB00 88%, #A39800 100%); /* A white hairline inside the radius, a bright top edge, and a gold cast to the drop shadow -- the shadow a gold object throws is warm, not grey. */ box-shadow: 0 26px 54px rgba(122, 113, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .62); /* Dark gold rather than near-black: same hue as the card, run down to where it carries. Everything small on the card takes this. */ color: #2B2800; } /* Text on the flagship is struck in the card's own metal rather than in ink. Two values, not one, because the constraint is different at each size. The name is 24px bold, which WCAG counts as large text at 3.0:1, so it can sit at #454000 -- light enough to read as gold lettering rather than as something merely dark. Everything else is small text at 4.5:1, which the gold only reaches once it is down at #2B2800. Both are measured against #A39800, the deepest the ramp goes, since the deep corner is exactly where the number and the verified mark sit. Not available: white. The reference card sets white on a mid-tone gold and even there it is only 1.98:1; on our brand yellow it is 1.21:1 and would disappear. White would need the field itself darkened to #7A7100 or below, which is a bronze card, not a gold one. */ .mcard[data-plan="lifetime"] .mcard-name { color: #454000; } .mcard[data-plan="lifetime"]:not(.is-filled) .mcard-name { color: rgba(69, 64, 0, .45); } /* The alpha the other tiers use would land this at 3.8:1 in the deep corner, so on this card the meta line is solid. */ .mcard[data-plan="lifetime"] .mcard-meta { color: #2B2800; } .mcard[data-plan="lifetime"] .mcard-id { color: #2B2800; } /* The bracket frame, taken from the reference card: a rounded hairline inset from the edge, open across the middle of the top and bottom so it reads as two corner brackets rather than a box. The reference draws it in white. That works on its mid-tone gold; on ours white is 1.21:1 and would vanish, so the line is engraved instead -- a deep gold stroke at 4.1:1 with a white highlight dropped underneath it. Which is what an engraved line on foil actually looks like. */ .mcard[data-plan="lifetime"]::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(122, 113, 0, .5); border-radius: 13px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)); -webkit-mask-image: linear-gradient(90deg, #000 0 27%, transparent 27% 73%, #000 73% 100%); mask-image: linear-gradient(90deg, #000 0 27%, transparent 27% 73%, #000 73% 100%); } /* The leadership badge becomes the reference's medallion: a white ring, a gold ring outside it, and a warm shadow to lift it off the foil. */ .mcard[data-plan="lifetime"] .mcard-leaders { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 0 0 3.5px rgba(122, 113, 0, .5), 0 4px 10px rgba(122, 113, 0, .38); } /* The verified tick is a green tuned for flat yellow; at the card's deep bottom-right corner it falls to 2.3:1. On the flagship it takes the same dark gold as the rest -- 5.01:1 at worst -- and the tick glyph carries the "confirmed" meaning on its own. */ .mcard[data-plan="lifetime"] .mcard-verified { color: #2B2800; } /* The card changes colour when the plan changes, so the change should be visible. Gradients cannot tween, so the swap is instant and the shadow eases -- that reads as the card settling rather than as a colour animation stepping through a midpoint nobody picked. */ .mcard { transition: box-shadow .34s cubic-bezier(.22, .61, .36, 1), color .34s ease; } /* Dashboard v3 — feedback pulse, revenue, volunteer supply, workload */ .adb-fbkpi { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; } .adb-fbkpi-n { font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); line-height: 1; } .adb-fbkpi-n small { font-size: 18px; color: var(--ac-sun-ink); } .adb-fbkpi-s { font-size: 12px; color: var(--ac-faint); } .adb-fblist { display: flex; flex-direction: column; gap: 10px; } .adb-fb { border-left: 3px solid var(--ac-sun); padding: 2px 0 2px 12px; } .adb-fb-top { display: flex; align-items: center; gap: 8px; } .adb-fst { color: #e2ddcf; font-size: 12px; } .adb-fst.on { color: var(--ac-sun); } .adb-fb-who { font-size: 11.5px; font-weight: 700; color: var(--ac-ink); } .adb-fb p { margin: 3px 0 0; font-size: 12.5px; color: var(--ac-ink-soft); line-height: 1.45; } .adb-morelink { margin-top: 14px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ac-sun-ink); cursor: pointer; } .adb-morelink:hover { text-decoration: underline; } .adb-rev { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--ac-line-soft); } .adb-rev-n { font-family: "Manrope", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #17692F; line-height: 1; } .adb-rev-l { font-size: 12px; color: var(--ac-faint); } .adb-revrow { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13.5px; color: var(--ac-ink-soft); border-bottom: 1px solid var(--ac-line-soft); } .adb-revrow:last-child { border-bottom: 0; } .adb-revrow b { color: var(--ac-ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; } .adb-vfill { background: linear-gradient(90deg, #FFC400, #A39800); } .adb-worktop { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .adb-worktag { font-size: 12.5px; color: var(--ac-ink-soft); background: var(--ac-cream2); border-radius: 100px; padding: 6px 14px; } .adb-worktag b { color: var(--ac-ink); } /* ========================================================= CONNECT AP — FIT THE WHOLE TRACK ON ONE SCREEN The point of this page is that a visitor sees a track without doing anything: the tiles rotate on their own, the news box rotates inside them, and the gallery rotates beside that. None of it works if the panel starts below the fold, so the route is compressed until it fits a 900px viewport with nothing to scroll. Nothing is removed. Every one of these is spacing or type size, and the measurements below are the ones that were actually taken: section padding 78 -> 40 heading block 157 -> ~70 (one line, and smaller on this route) tile row 196 -> ~130 panel padding 56 -> 40 sign-in gate 164 -> ~70 (one row instead of two) Scoped to this route. The same tiles and heading styles are used on other screens that have room for them. ========================================================= */ .screen[data-route="connect-ap"] .section, .screen[data-route="connect-ap"] .screen-section { padding: 20px 0 20px; } .screen[data-route="connect-ap"] .section-heading { margin-bottom: 16px; } /* No font-size here on purpose. This heading was shrunk to clamp(24px, 2.4vw, 32px) while the whole route was being squeezed onto one screen, and it ended up two steps below every other screen's heading. It inherits `.screen .section-heading h2` again -- clamp(28px, 3vw, 40px), the same size Chapters and the rest use -- so the site has one heading size rather than a per-route one. Only the spacing is tuned here. */ .screen[data-route="connect-ap"] .section-heading h2 { line-height: 1.1; margin-top: 8px; } /* The heading and its standfirst share a row here, so the 70px gutter the stacked layout needs is too much. The heading runs to two lines again, so the standfirst aligns to the bottom rather than to the middle -- centred against a two-line heading it floated between the lines. */ .screen[data-route="connect-ap"] .split-heading { gap: 40px; align-items: end; } .screen[data-route="connect-ap"] .section-heading p { font-size: 14px; } /* ---- the track tiles ---- These four are the route into everything on this screen, so they are sized to be the thing you look at first rather than a compact row above the panel. They were shrunk here to buy vertical space; the panel below can give it back, and four tiles across a 981px-plus grid have the width to carry it. Scaled as a set -- padding, icon, both type sizes and the gap together -- because bumping only the box leaves small type marooned in a large tile. */ .screen[data-route="connect-ap"] .tile-grid { gap: 16px; margin-bottom: 22px; } .screen[data-route="connect-ap"] .tile { padding: 22px 24px; gap: 5px; /* The tile is the thing being made bigger, not what is drawn inside it. Content alone only ever gives the box the height of an icon plus two lines, so the size has to be stated. */ min-height: 176px; /* With slack in the box, put it all in the first row: the icon sits at the top, and the title, its line and the description stay together at the bottom, so the empty space lands between them where it reads as room rather than as a gap in the text. Four rows because of .tile-desc. */ grid-template-rows: 1fr auto auto auto; } /* One square chip for all four. Three tracks are line glyphs and P4 is the one real mark, and 44px is what that mark needs: it holds a letterform, a wheel of figures and two lines of Telugu, and below about 40px those stop being shapes and become texture. The glyphs come up to meet it rather than it going down to a glyph's chip. The chip must be identical on all four. Sizing the emblem separately from its siblings is what read as the row being out of alignment, and this file has now made that mistake twice. */ .screen[data-route="connect-ap"] .tile-icon { width: 44px; height: 44px; margin-bottom: 0; font-size: 19px; border-radius: 12px; align-self: start; /* Glyph icons sit in a line box, and ▲ ∿ ⚓ each occupy a different slice of their em. At the inherited line-height the box is taller than the mark and place-items centres the box, not the mark, so the three sat at three different heights. Collapsing the line box to the glyph fixes it. */ line-height: 1; } .screen[data-route="connect-ap"] .tile strong { font-size: 17px; } /* The <small> is the label -- three or four words naming the track. The description below it is the sentence. Keeping them at different weights and colours is what stops the tile reading as two subtitles. */ .screen[data-route="connect-ap"] .tile small { font-size: 12px; line-height: 1.35; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .screen[data-route="connect-ap"] .tile-desc { margin-top: 6px; font-size: 12.5px; line-height: 1.5; font-weight: 500; color: var(--text); } /* No .tile-icon-emblem override here, deliberately. It used to need one: the emblem is artwork rather than a glyph and stops being shapes below about 40px, so against a 26px glyph chip it had to be sized up to 42px on its own. That exception is what made the row look misaligned -- one chip a few pixels out of step with its three neighbours. At the shared 44px the floor is met without it, and the emblem keeps the same chip, fill and hairline as the glyphs. Its plate and 3px padding come from the base rule further down. If these chips are ever shrunk below 40px, that exception comes back. */ /* Geometry only for the two portrait chips -- the chip's own fill, border and hairline are left to .tile-icon / .tile-icon-emblem above, so these two sit in whatever the theme gives the other four rather than carrying colours of their own. What a photograph does need that a mark does not: a round crop, because a face in a rounded square reads as an ID badge, and `cover` rather than `contain`, because `contain` letterboxes a portrait inside a landscape chip and shrinks the head to nothing. The chip keeps the row's size, so all six stay one row of identical chips. */ .screen[data-route="connect-ap"] .tile-icon-face { padding: 2px; place-items: center; } .screen[data-route="connect-ap"] .tile-icon-face img { /* 100% of the chip, not a stated px size: the portrait then follows the chip wherever the chip goes, including down to 40px at the short-laptop breakpoint, and cannot drift out of step with the other four. */ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 12%; /* a head sits high in a portrait; centring cuts the forehead */ } /* ---- the panel ---- */ .screen[data-route="connect-ap"] .amv { padding: 20px 24px 18px; } .screen[data-route="connect-ap"] .amv-top { margin-bottom: 14px; } .screen[data-route="connect-ap"] .amv-foot { margin-top: 10px; } /* The gate was 138px because the copy and the button stacked. On one row it is the height of the button, and it still wraps on a narrow screen. */ .screen[data-route="connect-ap"] .amv .scheme-gate { margin-top: 14px; padding: 10px 14px; gap: 10px 14px; align-items: center; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-ico { width: 30px; height: 30px; font-size: 13px; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-copy strong { font-size: 13px; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-copy small { font-size: 11.5px; } /* Below this the page is a single column and scrolling is expected, so the compression is relaxed rather than squeezing type on a phone. */ @media (max-width: 900px) { .screen[data-route="connect-ap"] .section, .screen[data-route="connect-ap"] .screen-section { padding: 26px 0 32px; } .screen[data-route="connect-ap"] .tile { padding: 14px 16px; } } /* The last 69px. The gallery drives the body height now that it is 380px wide, so a shallower crop is where the room is -- 16:9 rather than 16:10 costs nothing legible and the lightbox still shows every photograph whole. The rest is a few pixels each off the rhythm. */ .screen[data-route="connect-ap"] .amv-shot { aspect-ratio: 16 / 9; } .screen[data-route="connect-ap"] .section, .screen[data-route="connect-ap"] .screen-section { padding: 14px 0 14px; } .screen[data-route="connect-ap"] .amv-sec-head { margin-bottom: 10px; padding-bottom: 8px; } .screen[data-route="connect-ap"] .amv-card { padding: 12px 14px; } .screen[data-route="connect-ap"] .amv-card p { margin-bottom: 8px; } .screen[data-route="connect-ap"] .amv-gal-dots, .screen[data-route="connect-ap"] .amv-dots { margin-top: 8px; } .screen[data-route="connect-ap"] .amv { padding: 18px 24px 14px; } .screen[data-route="connect-ap"] .amv-top { margin-bottom: 12px; } .screen[data-route="connect-ap"] .amv-foot { margin-top: 8px; } @media (max-width: 900px) { .screen[data-route="connect-ap"] .amv-shot { aspect-ratio: 21 / 9; } } /* The last of it. Taken off the blocks with the most slack rather than shaving type again -- a page that fits by making the words smaller has not really been made to fit. */ .screen[data-route="connect-ap"] .section-heading { margin-bottom: 8px; } .screen[data-route="connect-ap"] .tile-grid { margin-bottom: 8px; } .screen[data-route="connect-ap"] .amv-foot { margin-top: 6px; } /* Short laptops. A 1280x800 screen has about 100px less room than the 900px this route was fitted to, so it tightens further rather than everyone living with the tighter spacing. Keyed on viewport height, because that is the thing actually running out. */ @media (min-width: 901px) and (max-height: 860px) { .screen[data-route="connect-ap"] .section, .screen[data-route="connect-ap"] .screen-section { padding: 10px 0 10px; } .screen[data-route="connect-ap"] .section-heading { margin-bottom: 6px; } /* The chips do NOT shrink here, and that is the point of this pair of rules rather than an oversight. At 22px -- what this breakpoint used to set -- the P4 emblem renders about 14px across inside its padding and stops being a mark at all, while its three glyph siblings stay perfectly legible; one chip turning to mush while the others do not is what read as the row being out of alignment. 40px is the floor the emblem needs, so the height comes out of the box instead: less padding, a shorter min-height, same four chips. */ .screen[data-route="connect-ap"] .tile { padding: 14px 16px; min-height: 132px; } .screen[data-route="connect-ap"] .tile-icon { width: 40px; height: 40px; margin-bottom: 0; font-size: 17px; } .screen[data-route="connect-ap"] .tile-grid { margin-bottom: 6px; } .screen[data-route="connect-ap"] .amv { padding: 14px 20px 12px; } .screen[data-route="connect-ap"] .amv-top { margin-bottom: 8px; } .screen[data-route="connect-ap"] .amv-shot { aspect-ratio: 2 / 1; } .screen[data-route="connect-ap"] .amv .scheme-gate { margin-top: 8px; padding: 7px 12px; } .screen[data-route="connect-ap"] .amv-sec-head { margin-bottom: 7px; padding-bottom: 6px; } .screen[data-route="connect-ap"] .amv-card { padding: 10px 12px; } .screen[data-route="connect-ap"] .amv-card p { line-height: 1.5; margin-bottom: 6px; } .screen[data-route="connect-ap"] .amv-foot { display: none; } } /* ========================================================= NRI HUB — COMPACT, AND ON THE BRAND Same treatment as Connect AP, for the same reason: the six services are the page, and two of them sat below the fold on a 1280x800 screen while a 40px three-line heading took the top third. Nothing is removed -- every service, its name, its icon and its "view services" line are untouched. This is spacing, type size and colour. Measured before and after: section padding 78 -> 44 heading block 201 -> ~120 one service card 205 -> ~150 card grid 433 -> ~320 which is about 27% off the section. ========================================================= */ /* Clean white, like Connect AP. This route was #f8f8f8. */ .screen[data-route="nri-hub"] { background: #FFFFFF; } .screen[data-route="nri-hub"] .section, .screen[data-route="nri-hub"] .screen-section { padding: 20px 0 24px; } .screen[data-route="nri-hub"] .section-heading { margin-bottom: 16px; } /* Shrunk for the same reason Connect AP's was, and restored for the same reason: one heading size across the site. See the note on the Connect AP rule above. */ .screen[data-route="nri-hub"] .section-heading h2 { line-height: 1.12; } .screen[data-route="nri-hub"] .section-heading p { font-size: 14px; } /* ---- the service cards ---- */ /* Connect AP's tile language: hairline border, 16px radius, a small shadow at rest so the card reads as a card rather than an outline, and a lift on hover. The old 26px-shadow hover was doing the work a rest state should. */ .screen[data-route="nri-hub"] .hub-grid { gap: 14px; margin-top: 4px; } .screen[data-route="nri-hub"] .hub-card { padding: 18px 16px 16px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); } .screen[data-route="nri-hub"] .hub-card:hover { transform: translateY(-3px); border-color: #DEDEDE; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); } /* The chips were six different hues -- blue, purple, teal, orange -- which is category colour, not brand. One yellow-and-red chip across all six, the same mark Connect AP uses for its tracks. The per-service --cc is left alone: the service modal still uses it for its own accent. */ .screen[data-route="nri-hub"] .hub-card-ic { width: 60px; height: 60px; border-radius: 17px; margin-bottom: 14px; background: var(--yellow-soft); border: 1px solid #FFC400; color: var(--red-primary); } .screen[data-route="nri-hub"] .hub-card-ic svg { width: 28px; height: 28px; } .screen[data-route="nri-hub"] .hub-card:hover .hub-card-ic { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px rgba(227, 30, 36, .18); } .screen[data-route="nri-hub"] .hub-card strong { font-size: 19px; margin-bottom: 9px; } .screen[data-route="nri-hub"] .hub-card-go { font-size: 11px; } /* Short laptops: the tier that was missing, which is where the last two services were falling off. */ @media (min-width: 901px) and (max-height: 860px) { .screen[data-route="nri-hub"] .section, .screen[data-route="nri-hub"] .screen-section { padding: 14px 0 16px; } .screen[data-route="nri-hub"] .section-heading { margin-bottom: 10px; } .screen[data-route="nri-hub"] .hub-card { padding: 14px 14px 12px; } .screen[data-route="nri-hub"] .hub-card-ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 9px; } .screen[data-route="nri-hub"] .hub-card-ic svg { width: 22px; height: 22px; } .screen[data-route="nri-hub"] .hub-card strong { font-size: 16px; margin-bottom: 6px; } .screen[data-route="nri-hub"] .hub-grid { gap: 11px; } } /* The focus ring and the hover colour on the "view services" line still came from the per-service --cc, which is where the blue was coming from -- a visible non-brand blue every time a card was tabbed to or clicked. Both are brand red on this route now. --cc itself is untouched: the service modal still uses it for its own top bar and accents. */ .screen[data-route="nri-hub"] .hub-card:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 3px; } /* Red by default, not only on hover. It is the card's action and the only link in it, so there is nothing for it to compete with -- and a grey link that turns red on hover reads as disabled until you touch it. */ .screen[data-route="nri-hub"] .hub-card-go, .screen[data-route="nri-hub"] .hub-card:hover .hub-card-go { color: var(--red-primary); } /* The arrow keeps the same colour as the words rather than inheriting the old muted tone. */ .screen[data-route="nri-hub"] .hub-card-go span { color: inherit; } /* Fill the screen rather than sitting in the top half. Compressing the section made it short enough that it ended around 530px on a 900px screen, leaving a third of the page empty under the cards. The fix is not to put the padding back -- it is to let the grid take the room that is there. The section becomes a full-height column, the grid takes the space the heading does not, and the two card rows share it equally. grid-auto-rows: 1fr rather than a fixed height, so this holds at any viewport without a magic number: the cards are simply as tall as the page allows, and the page still never scrolls. */ .screen[data-route="nri-hub"] .section { min-height: 100%; display: flex; flex-direction: column; } .screen[data-route="nri-hub"] .section > .container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* The cards size to their content, and the leftover room goes above and below the grid rather than inside every card. Stretching them to fill the page put the whole surplus between the last bullet and "View services" -- six cards each with a hole in them. Centring the block instead uses the same space without opening a gap in anything. Rows still stretch to the tallest card in the row, so the "View services" links line up across a row even when one service's names wrap further. */ .screen[data-route="nri-hub"] .hub-grid { flex: 0 0 auto; grid-auto-rows: auto; } /* Start at the top of the screen, not centred in it. Centring balanced the block when the cards were short, but it pushed the kicker a long way down the page; with a three-line heading the content fills from the top on its own. */ .screen[data-route="nri-hub"] .section > .container { justify-content: flex-start; } /* The card's contents centre in whatever height it ends up with, instead of sitting at the top of a tall box. */ /* Taller viewports give the icon and title room to grow with the card, so a 1080p screen does not show six mostly-empty rectangles. */ @media (min-height: 1000px) { .screen[data-route="nri-hub"] .hub-card-ic { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 18px; } .screen[data-route="nri-hub"] .hub-card-ic svg { width: 34px; height: 34px; } .screen[data-route="nri-hub"] .hub-card strong { font-size: 22px; margin-bottom: 11px; } .screen[data-route="nri-hub"] .hub-card-go { font-size: 11.5px; } } /* ---- service card: icon and title top-left, what it covers, then the link ---- The card was centred with nothing but a name in it, which is why it looked empty once it grew to fill the page. It now says what the service actually covers, so the height is carrying content rather than air. The icons are untouched -- same glyphs, same yellow-and-red chip. */ .screen[data-route="nri-hub"] .hub-card { align-items: stretch; text-align: left; justify-content: flex-start; padding: 18px 18px 14px; } .screen[data-route="nri-hub"] .hub-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } /* The chip stops being a block above the title and becomes the title's mark, so it must not stretch in the flex row. */ .screen[data-route="nri-hub"] .hub-card-head .hub-card-ic { margin-bottom: 0; flex: 0 0 auto; } .screen[data-route="nri-hub"] .hub-card-head strong { margin-bottom: 0; text-align: left; line-height: 1.2; } .screen[data-route="nri-hub"] .hub-card-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 7px; } .screen[data-route="nri-hub"] .hub-card-list li { position: relative; padding-left: 16px; font-family: "Manrope", sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--text); text-align: left; } /* A small red disc rather than a bullet glyph: it lines up on the first line of a wrapped item instead of drifting with the text. */ .screen[data-route="nri-hub"] .hub-card-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--red-primary); } /* Pushed to the bottom of whatever height the card ends up with, and centred there -- it is the card's action, not another list item. */ .screen[data-route="nri-hub"] .hub-card-go { margin-top: auto; padding-top: 12px; justify-content: center; text-align: center; } @media (min-width: 901px) and (max-height: 860px) { .screen[data-route="nri-hub"] .hub-card-list li { font-size: 12px; } .screen[data-route="nri-hub"] .hub-card-list { gap: 5px; } .screen[data-route="nri-hub"] .hub-card-head { margin-bottom: 9px; } } /* Plain white, told apart from the page by elevation alone. This has now been three things. Whitesmoke #F5F5F5 was rejected as grey, correctly -- darken a white and that is what you get. A warm #FFFCF0 was tried next, on the reasoning that two whites can only differ by hue once lightness is off the table, and it did work: same lightness, warmer, not grey. It was still a tint on a page that is meant not to have one, and it is back off. So the separation is the hairline and the shadow, and nothing else. That is the same language the cards on Connect AP and the hubs use -- white on white, told apart by depth. If a visible difference in FILL is wanted again, #FFFCF0 is the value that achieved it without going grey. */ .stats-strip { background: #FFFFFF; border-color: var(--line); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 20px -8px rgb(0 0 0 / .1); } /* Cells stay transparent so the strip is one surface, split only by its dividers. */ .stats-strip article { background: transparent; border-right-color: var(--line); } .stats-strip article:last-child { border-right: 0; } /* Event rows get the same separation as the stats strip on Chapters: white on white, told apart by elevation rather than by tint. They were already #FFFFFF with a hairline and no shadow, which on a white page is barely a card at all -- the same problem the strip had. The shadow is a touch lighter than the strip's because these stack seven deep and one heavy drop repeated down a column reads as noise. */ .event-card { background: #FFFFFF; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -8px rgb(0 0 0 / .1); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .event-card:hover { transform: translateY(-2px); border-color: #DEDEDE; box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 12px 26px -10px rgb(0 0 0 / .16); } @media (prefers-reduced-motion: reduce) { .event-card { transition-duration: .01ms; } .event-card:hover { transform: none; } } /* NRI Hub headings take the same typeface as Connect AP. The service card titles and the panel title were a serif while every heading on Connect AP is Manrope at 700-800 -- so the two screens read as two different sites. Manrope here, matched in weight to the Connect AP panel heading rather than merely swapped in family, because a serif at 600 and a sans at 600 do not carry the same weight on screen. This override predates the console moving onto the site's faces; the serif it was written against is Lora now, and this rule still stands, because the point was the family being wrong for this screen and not which serif. */ .screen[data-route="nri-hub"] .hub-card strong { font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -.01em; } #hubModal .hs-title h3 { font-family: "Manrope", sans-serif; font-weight: 800; } /* ---- NRI Hub service cards: the same separation as the Chapters strip ---- These were #FFFFFF with a hairline and a 1px contact shadow, which on a white page is barely a card at all -- the same problem the stats strip and the event rows had before they were fixed. The fill is already right and stays right: tinting it grey would make it the one grey block on a white site, which is the trade that was already rejected once. So the separation comes from elevation, exactly as it does on Chapters: a contact shadow to seat the edge plus an ambient shadow to lift the whole card off the page. The ambient layer matches .event-card rather than .stats-strip -- six of these tile a grid, and the strip's heavier drop repeated six times reads as noise where one wide strip carries it fine. */ .screen[data-route="nri-hub"] .hub-card { box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -8px rgb(0 0 0 / .1); } /* Hover has to clear the new rest state -- the old hover was shallower in its ambient layer than this rest is, so lifting would have read as settling. */ .screen[data-route="nri-hub"] .hub-card:hover { box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 12px 26px -10px rgb(0 0 0 / .16); } /* ---- P4 becomes the fourth hub, not a fourth layout ---- The P4 track used to carry a bespoke panel. It is the sibling hub now, and the rules below are what that costs. The track icon went the long way round and the history is worth keeping, because two of the three answers were wrong for reasons that recur. It started as .tile-icon-logo -- 68px, white ground, the emblem as an <img> -- but the connect-ap rule sizing tiles to 26px is more specific and won, so a 512px emblem rendered at 14px across and read as a smudge. It was then redrawn as a line glyph to match the three siblings, which was legible and was not the P4 mark. The emblem is back, at a size that can actually carry it. Sizing a real mark to a glyph's chip is the mistake; matching the sibling shape is not worth losing the identity. */ /* Glyph tracks -- Amaravati, Polavaram, Visakhapatnam. */ .tile-icon svg { width: 62%; height: 62%; display: block; } /* The P4 track carries the real emblem rather than a glyph, because the emblem is the programme's own mark and a drawn substitute is not it. That needs more room than the 26px chip its three siblings use. An emblem is not a glyph: this one holds a letterform, a wheel of figures, a numeral and two lines of Telugu, and below roughly 40px those stop being shapes and become texture. So this chip is larger, and it drops the yellow fill and the gold hairline -- the emblem's own ground is white and its outer ring is green, and a yellow plate behind a green ring is two badges fighting. White ground, hairline border, the emblem at full bleed inside it. */ .tile-icon-emblem { /* Yellow fill and gold hairline, inherited from .tile-icon rather than overridden -- the chip is the same chip its three siblings use, and the emblem is what sits in it. An earlier version painted this one white on the reasoning that a yellow plate behind the emblem's green ring was two badges fighting. It isn't: the emblem's own disc is white, so on yellow it reads as a badge ON the chip, and breaking the row's one chip colour for a single track costs more than the clash it was avoiding. */ padding: 3px; box-sizing: border-box; } .tile-icon-emblem img { width: 100%; height: 100%; object-fit: contain; display: block; } /* 2. Portraits in a landscape frame. The frame is 16:9 and every image fills it -- no white bars. A portrait can only be cropped or barred, and bars were rejected on sight. Photographs therefore crop, which is what the other three hubs do to every frame they carry: a photograph loses its edges and is still the photograph. That needs no rule at all, it is the default. A campaign creative cannot crop -- its words are its content, and a 16:9 crop takes the headline off the top and the helpline off the bottom. It asks for fit: 'bleed' instead: the frame is filled with a blurred, over-scaled copy of the poster itself, and the whole poster is laid on top of it. No bars, nothing cut, and the fill is always in the artwork's own colours because it IS the artwork. The renderer passes the image url as --shot for exactly this. */ /* A crop has a subject, and the middle of the file is not always it. A head-and-shoulders portrait cropped dead-centre to 16:9 loses the crown of the head, which reads as a mistake rather than as a crop. `focus` in the data file moves the crop window; leave it off and it stays centred. */ .amv-shot img { object-position: var(--focus, center); } /* fit: 'contain' -- show the whole image, do not crop it. This is only ever right when the image's own ground matches the frame's, which is why it is used for exactly one frame: a studio portrait on white, in a frame that paints white. The two meet invisibly, so nothing reads as a bar. On any image with its own background this leaves visible margins and 'bleed' is the rule you want instead. */ .amv-shot[data-fit="contain"] img { object-fit: contain; } .amv-gal-stage:hover .amv-shot[data-fit="contain"] img { transform: none; } .amv-shot[data-fit="bleed"] { isolation: isolate; } .amv-shot[data-fit="bleed"]::before { content: ""; position: absolute; /* Over-scaled so the blur has material past every edge; a blur that starts at the edge fades to transparent and the bars come back, paler. */ inset: -12%; background-image: var(--shot); background-size: cover; background-position: center; filter: blur(26px) saturate(1.15); transform: scale(1.08); z-index: 0; } .amv-shot[data-fit="bleed"] img { position: relative; z-index: 1; object-fit: contain; } /* The zoom-on-hover would slide the poster against a backdrop that is the same picture, which reads as a printing error rather than as motion. */ .amv-gal-stage:hover .amv-shot[data-fit="bleed"] img { transform: none; } /* The caption spans the frame, but on a bleed frame the frame is wider than the picture: the photograph is centred and the leftover is blurred bar. A left-aligned caption therefore starts out on the bar, off the picture it is captioning. Centring puts it back over the photograph, which is where it reads. Only bleed frames are centred -- everywhere else the picture fills the frame and left is right. */ .amv-shot[data-fit="bleed"] .amv-shot-cap { text-align: center; } /* ---- Lifetime card: the name in gold, WITHDRAWN ---- A gradient-gold name struck with background-clip: text used to live here, with a near-black drop shadow lifting it off the card. It was the right answer for the card it was written against -- gold running into charcoal, where a cream name read as plain white and the dark end gave the gold glyphs something to sit on. That card is gone. The Lifetime tier is now gold edge to edge with no dark end at all, which takes both of that treatment's supports away at once: a gold name on a gold ground has nothing to separate it, and the shadow that would have separated it is the near-black the card was rebuilt to remove. The name is flat dark gold now -- see .mcard-name further up, where the value is chosen against #A39800, the deepest the field reaches. Kept as a note rather than deleted quietly, because the reasoning is sound and would apply again the moment this card carries a dark end. */ /* ---- The chosen-plan chip has to work for a tier with no price ---- Regular carries no price, so #chosenFee renders empty. The chip used to right-align its contents by hanging margin-left: auto off the fee itself, which only works while every tier has one -- with no fee the auto margin goes with it and Change drifts back toward the name, and an empty span still eats a flex gap. The push now comes from the name instead, which is always present, so the right-hand group holds its position whether or not there is a price. */ .join-chosen .jch-name { margin-right: auto; } .join-chosen .jch-fee { margin-left: 0; } .join-chosen .jch-fee:empty { display: none; } /* ---- NRI Hub heading: the three C's have to stay in a column ---- The heading reads Connecting / Collaborate / Create down the left edge, and those three capitals lining up is the point of it. That makes the two <br>s load-bearing rather than cosmetic: if line one wraps, "to" drops onto a line of its own and the column becomes C / t / C / C. At the restored 40px, line one measures 613px against a 591px column, so it wrapped by 22px. The fix is width, not a smaller heading -- shrinking the type is what put this route out of step with the rest of the site in the first place. So the standfirst yields instead: it is capped rather than taking an equal share, and the gutter closes from 70px to 36px. That leaves the heading over 700px at container width, roughly 90px of headroom over what line one needs, which is enough that it does not re-wrap on the way down to the 820px breakpoint where the whole thing stacks and the question stops applying. */ .screen[data-route="nri-hub"] .split-heading { gap: 36px; } .screen[data-route="nri-hub"] .split-heading > div { flex: 1 1 auto; min-width: 0; } .screen[data-route="nri-hub"] .split-heading p { flex: 0 1 430px; } /* Between the 820px stacking breakpoint and roughly 1000px the two columns are both too narrow: the heading loses line one to a wrap even with the standfirst capped. Stacking early hands the heading the full container, which is the only thing that keeps the three C's aligned down there. */ @media (max-width: 1010px) { .screen[data-route="nri-hub"] .split-heading { display: block; } .screen[data-route="nri-hub"] .split-heading p { margin-top: 12px; max-width: 62ch; } } /* ---- Connect AP: breathing room under the heading, and a selected tile ---- 1. The gap under the heading. Chapters and every other screen use the base .section-heading margin-bottom of 48px. Connect AP had been cut to 8px -- one of several places the route was squeezed to fit one screen -- so the tiles sat almost against the heading. It takes the standard 48px now, like the screen it is being compared to. */ /* 48px was the base value and it read as a hole once the heading grew to two lines -- the tiles lost their connection to it. 28px still separates them clearly at this heading size without the row floating free. */ .screen[data-route="connect-ap"] .section-heading { margin-bottom: 28px; } /* 2. The selected track. Selection was carried by a red border alone, which outlines the tile without ever filling it, so at a glance the row read as four identical cards with one of them ringed. A pale yellow wash fills the chosen one instead, and the border stays, so selection is now legible from the shape of the block rather than from its outline. The wash is deliberately far paler than the icon chip's --yellow-soft: the chip is a small mark that can take a strong tint, a whole card at that strength would shout across the row. Exactly one tile carries it at a time. .is-active is set by the tab handler and cleared from the others in the same pass, so pressing a second track returns the first to plain white with no extra bookkeeping here. */ .screen[data-route="connect-ap"] .tile.is-active { background: #FFFFFF; /* white -- the red border marks the active tile, no cream wash */ } /* Hover on an unselected tile must not look like selection. It keeps the white ground and only lifts, which is what it already did -- stated here so the rule above is not later "tidied" onto .tile:hover as well. */ .screen[data-route="connect-ap"] .tile:not(.is-active):hover { background: #FFFFFF; } /* The 48px heading gap costs about 40px, and Connect AP was sitting exactly on one screen, so it went 10px over. Taking that back from the section's bottom padding rather than from the gap: padding below the last element is the cheapest 10px on the page, and the gap is the thing that was asked for. */ .screen[data-route="connect-ap"] .section, .screen[data-route="connect-ap"] .screen-section { padding: 8px 0 10px; } /* ---- "More →" on News & Media ---- Stands where the filter chips do, and is swapped for them when pressed, so the row holds its place in the layout in either state. Styled as the same link the NRI Hub cards use for "View services": small, uppercase, wide-tracked, red, with an arrow that slides on hover. It is a <button> rather than an <a> because it reveals content on this page rather than going anywhere -- the look is shared, the semantics are not. */ .media-more-row { margin: 6px 0 18px; } .media-more { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; cursor: pointer; /* It is an <a> now rather than a <button>: the jump is the browser's. That means text-decoration has to be turned off, which a button never needed. */ text-decoration: none; font: inherit; /* 14px against the hub link's 11px. This one is the only control on the page and has to be found without hunting; "View services" sits inside a card that has already drawn the eye. */ font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-primary); transition: color .2s ease; } .media-more span { font-size: 16px; line-height: 1; transition: transform .25s ease; } .media-more:hover span { transform: translateX(4px); } .media-more:focus-visible { outline: 2px solid var(--red-primary); outline-offset: 4px; border-radius: 3px; } /* Scroll target. The header is fixed, so a bare jump would land the filter row underneath it; the margin pushes the anchor down by the header height plus a little air. */ .media-archive { scroll-margin-top: 108px; } @media (prefers-reduced-motion: reduce) { .media-more span { transition: none; } .media-more:hover span { transform: none; } } /* ---- the header must not tint the page below it ---- .site-header carried `box-shadow: 0 8px 28px rgba(31,31,31,.08)`. A 28px blur at 8px offset spills roughly 36px down the page, and that spill is a grey wash over the top of every route -- measured at the left margin it ran (237,237,237) at the border, then 245, 246, 248 ... fading to white around y=122. On a page that is meant to be one clean white canvas, that band was the single most visible thing left that was not white. The separation stays; it just stops being a glow. A hairline at --line draws the edge in one pixel and paints nothing below it, which is the Stripe/Linear treatment this was aiming at in the first place -- those headers are a rule, not a shadow. The border also moves off rgba(31,31,31,.08): composited on white that is (237,237,237), a fourth near-grey that predates the token and does not match anything else. --line is the border colour everywhere else. */ .site-header, .site-header.scrolled { border-bottom: 1px solid var(--line); box-shadow: none; } /* The "OUR MILESTONES" dot, back to red. It was declared red at .amv-dot with a pulsing red halo, and then a second bare `.amv-dot` rule further down -- written for the pagination dots inside .amv-news-dots and .amv-gal-dots -- set background: #D8D8D8. Same specificity, later in the file, so it won, and the live indicator was left as a grey centre inside a red halo. That mismatch is the whole tell: the halo is a box-shadow, which the later rule never touched. Scoped to .amv-live so the pagination dots keep their grey; an inactive page dot is meant to read as inactive. Colour only -- the size, the halo and the pulse are all as they were. */ .amv-live .amv-dot { background: var(--red-primary); } /* The other half of the same collision. The pagination dots inherit the live indicator's halo and its pulse animation, because the later `.amv-dot` rule overrides background/size but never box-shadow or animation. So four static page dots were each carrying a 3px red glow and pulsing on a 2.4s loop -- and at 7px apart the glows merge into one pink smear behind the row, which is most of why it did not read as "just dots". A page indicator is not a live indicator. The halo and the pulse belong to .amv-live alone. */ .amv-news-dots .amv-dot, .amv-gal-dots .amv-gal-dot { box-shadow: none; animation: none; } /* ---- the map hint reads as a live badge ---- It was a translucent white pill with grey text, which on a white panel is almost not there. It takes the TRENDING badge's treatment instead: solid brand red, white letters, pill radius. Same object, said out loud. The border and the backdrop-filter both go. A hairline on a solid fill draws a second edge nobody asked for, and a 6px blur behind an opaque background is work the compositor does for nothing. */ .map-hint { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--red-primary); backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; font-weight: 800; letter-spacing: .06em; } /* The live dot, inverted. On the Connect AP panels this mark is a red dot with a red halo on white; here the ground IS red, so a red dot would be invisible. It becomes white on white — the same idea, the same 7px, the same 2.4s pulse, read against the opposite background. */ .map-hint-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); animation: map-hint-pulse 2.4s ease-in-out infinite; } @keyframes map-hint-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .10); } } @media (prefers-reduced-motion: reduce) { .map-hint-dot { animation: none; } } /* ========================================================= LARGE SCREENS — 1600px and up Everything below 1600px was already fluid and is left alone: the container is min(100% - 40px, --container), the grids collapse on max-width queries, and nothing overflows at any width from 360px up (checked at thirteen widths). The gap in the system was at the TOP end. --container was a flat 1200px with no breakpoint above it, so past about 1400px the page stopped growing and the screen just added margin: 1920 FHD 1200px content, 360px each side 63% of the screen 2560 QHD 27-32 1200px content, 680px each side 47% 3440 ultrawide 1200px content, 1120px each side 35% 3840 4K / TV 1200px content, 1320px each side 31% Content using a third of a television is the "oversized empty space" problem, and the fix is not simply a wider column -- a 3000px line of body text is unreadable. It is a wider column AND larger type AND more generous spacing, so the page keeps its proportions and just gets bigger, the way it would if you stepped back from it. Steps rather than one continuous clamp, because these are real device classes -- a 27" desktop, a 34" ultrawide, a TV across a room -- and each wants a different reading distance. --container is a token, so widening it moves every .container on the site at once. ========================================================= */ /* Two padding systems on this site and both need lifting: `.section` on the marketing pages, and `.screen .screen-section` on the app screens, which is the more specific of the two and was quietly winning every time a bare `.section` rule was written against it. Connect AP and NRI Hub are excluded by name. Both are built to fit one screen without scrolling, and their padding is tuned to the pixel for that; on a tall display there is room to spare, but growing them buys nothing and risks the property they were built around. */ @media (min-width: 1600px) { :root { --container: 1440px; } .section { padding: 128px 0; } .section-heading { margin-bottom: 56px; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .screen-section { padding: 48px 0 64px; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .network-section { padding-top: 34px; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .section-heading { margin-bottom: 38px; } } @media (min-width: 2000px) { :root { --container: 1600px; } .section { padding: 144px 0; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .screen-section { padding: 60px 0 80px; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .section-heading { margin-bottom: 46px; } /* Headings are the one type ramp that is already fluid (clamp with a vw term), so they only need their ceiling lifted to keep growing here. */ .screen .section-heading h2, .screen .vision-copy h2 { font-size: clamp(40px, 2.6vw, 52px); } .section-heading p { font-size: 17px; } } @media (min-width: 2600px) { :root { --container: 1800px; } .section { padding: 168px 0; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .screen-section { padding: 76px 0 96px; } .screen:not([data-route="connect-ap"]):not([data-route="nri-hub"]) .section-heading { margin-bottom: 56px; } .screen .section-heading h2, .screen .vision-copy h2 { font-size: clamp(52px, 2.4vw, 64px); } .section-heading p { font-size: 18px; } } /* Card grids gain a column instead of stretching. Three 600px cards on an ultrawide is a worse answer than four 450px ones: the card was designed around a shape, and widening it past that just stretches its contents. */ @media (min-width: 2000px) { .service-grid { grid-template-columns: repeat(4, 1fr); } .screen[data-route="nri-hub"] .hub-grid { grid-template-columns: repeat(3, 1fr); } } /* The gutter grows with the screen too. A 20px margin either side of a 1800px column on a 4K display reads as a page bleeding off its own edges; these are the only two places the 40px in .container is not enough. */ @media (min-width: 1600px) { .container { width: min(calc(100% - 96px), var(--container)); } } @media (min-width: 2600px) { .container { width: min(calc(100% - 160px), var(--container)); } } /* ---- very large screens: scale the whole interface, not just the column ---- Widening the container fixed the horizontal emptiness but not the other half of the problem: 783 of this stylesheet's font-sizes are in px, so on a 4K panel every label, price and paragraph stays physically small no matter how wide the page gets. Rewriting 783 declarations to rem was not the trade; scaling the rendered interface is. `zoom` is the right tool here specifically because it is NOT transform: scale -- it reflows layout rather than stretching a bitmap, so text stays sharp, hit targets grow with their buttons, and media queries below still evaluate against the real viewport. It is a step back from the screen, not a magnifying glass over it. THE HEIGHT COMPENSATION IS NOT OPTIONAL. body is `height: 100svh`, and under zoom that resolves to 100svh of ZOOMED units -- 1.5x too tall. The footer is pushed below the fold and the page grows a vertical scrollbar it is explicitly built not to have: measured 324px of overflow at 1.15, 756px at 1.35, 1080px at 1.5. Dividing the height by the same factor cancels it exactly, and all three tiers then measure zero overflow in both axes with the footer in view. If a tier's zoom is ever changed, its height divisor has to change with it. Container widths are lower than they would be without zoom, because zoom multiplies them: 1700px at 1.5 paints 2550 device pixels. */ /* The stepped body-zoom ladder that used to live here (1.12 / 1.3 / 1.5 at 2000 / 2600 / 3400px) is now a single continuous curve driven from app.js (proportionalZoom), so the layout keeps the same proportions at EVERY width rather than jumping at three breakpoints. The column-widening --container ladder above (1440/1600/1800) is kept -- genuinely wide screens still earn more columns on top of the uniform zoom. */ /* ========================================================= GOLD TDP HEADER (page-by-page redesign — the header) The bar is now party gold with a red flag-edge underneath, the same two colours as the logo. Because the lockup's globe, "TDP" and swoosh are yellow on transparent, they would vanish on gold, so the logo sits on a clean white plate. Nav is bold ink, turning party-red on hover and for the current page; the call to action is a solid red pill (a yellow chip would disappear on gold). Appended last so it wins on source order. ========================================================= */ .site-header, .site-header.scrolled { background: linear-gradient(180deg, #FFD22E 0%, var(--yellow) 60%, #F5BB00 100%); color: var(--ink); border-bottom: 3px solid var(--red-primary); /* Neutral shadow -- a gold-tinted one cast a warm cream band onto the white body below the header, which read as an off-white page background. */ box-shadow: 0 4px 14px rgba(31, 31, 31, .10); -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---- nav as pills: the current page is a crisp white pill, hover lifts into a translucent one. The pill replaces the underline. ---- */ .primary-nav > a:not(.btn) { padding: 7px 13px; border-radius: 999px; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .site-header .primary-nav > a:not(.btn):hover { background: rgba(255, 255, 255, .55); color: var(--red-primary); } .site-header .primary-nav > a.active { background: #fff; color: var(--red-primary); box-shadow: 0 3px 10px rgba(150, 100, 0, .20); } .primary-nav > a.active::after { display: none; } /* pill replaces underline */ /* ---- CTA: a divider, then a solid red pill with a nudging arrow ---- */ .site-header .primary-nav > a.auth-link { position: relative; margin-left: 24px; padding-right: 20px; } .site-header .primary-nav > a.auth-link::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: rgba(0, 0, 0, .16); } .site-header .primary-nav > a.auth-link::after { content: "\2192"; /* → */ margin-left: 4px; font-weight: 800; transition: transform .18s ease; } .site-header .primary-nav > a.auth-link:hover::after { transform: translateX(3px); } /* ---- scroll: the bar shrinks and the shadow deepens; the body offset follows so nothing gaps under the bar. Progressive enhancement -- if .scrolled never toggles, the bar simply stays full height. ---- */ body { transition: padding-top .26s ease; } .site-header .nav-wrap, .site-header .brand-lockup { transition: height .26s ease; } .site-header.scrolled .nav-wrap { height: 66px; } .site-header.scrolled .brand-lockup { height: 48px; } .site-header.scrolled { box-shadow: 0 8px 24px rgba(31, 31, 31, .14); border-bottom-width: 2px; } body:has(.site-header.scrolled):not([data-route="admin"]):not([data-route="account"]) { --hdr: 69px; } @media (max-width: 820px) { .site-header.scrolled .nav-wrap { height: 60px; } body:has(.site-header.scrolled):not([data-route="admin"]):not([data-route="account"]) { --hdr: 63px; } } /* No logo plate: the lockup sits straight on the gold bar, so the white card, its padding and its drop shadow all come off together -- leaving any one of them behind would show as a floating white edge or a shadow with nothing casting it. All three logo PNGs are already transparent, so nothing else is needed for them to sit on the bar itself. The plate had a second job, though: roughly a third of the lockup is yellow ink (#F0D800) and the bar is gold (#FFC400), so those strokes have almost no contrast left without it. The drop-shadow below re-draws that lost edge -- a tight, low-opacity dark rim that reads as definition rather than as a shadow. drop-shadow (not box-shadow) so it follows the artwork's alpha instead of boxing it. */ .site-header .brand { background: none; padding: 0; border-radius: 0; box-shadow: none; } .site-header .brand-lockup, .site-header .brand-logo { filter: drop-shadow(0 1px 1px rgba(90, 45, 0, .45)); } /* Bold ink nav; party-red on hover / current page. Tighter gap because the pills carry their own padding, and nowrap so "Connect AP"/"NRI Hub" never break onto a second line. */ .primary-nav { font-weight: 800; gap: 4px; } .primary-nav > a:not(.btn) { white-space: nowrap; } .site-header .primary-nav > a:not(.btn), .site-header.scrolled .primary-nav > a:not(.btn) { color: var(--ink); letter-spacing: .005em; } .site-header .primary-nav > a:not(.btn):hover, .site-header .primary-nav > a.active, .site-header.scrolled .primary-nav > a:not(.btn):hover, .site-header.scrolled .primary-nav > a.active { color: var(--red-primary); } .primary-nav > a.active::after { background: var(--red-primary); height: 3px; width: 24px; bottom: -13px; } /* CTA: solid party-red pill, white text — the strong action on gold. */ .site-header .primary-nav > a.auth-link, .site-header.scrolled .primary-nav > a.auth-link { background: var(--red-primary); border-color: var(--red-primary); color: #fff; box-shadow: 0 8px 22px rgba(227, 30, 36, .32); } .site-header .primary-nav > a.auth-link:hover, .site-header .primary-nav > a.auth-link[aria-current="page"] { background: var(--red-deep); border-color: var(--red-deep); color: #fff; } .auth-link .auth-ico { color: #fff; } /* Hamburger bars read on gold. */ .menu-toggle span:not(.sr-only), .site-header.scrolled .menu-toggle span:not(.sr-only) { background: var(--ink); } @media (max-width: 820px) { /* Keep the gold bar on phones; the open menu is a clean white sheet. */ .site-header, .site-header.scrolled { background: linear-gradient(180deg, #FFD22E, var(--yellow)); } .primary-nav, .primary-nav.open { background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 22px 55px rgba(120, 80, 0, .30); } .site-header .primary-nav > a:not(.btn) { color: var(--ink); } .site-header .primary-nav > a:not(.btn):hover, .site-header .primary-nav > a.active { color: var(--red-primary); } } /* ========================================================= PURE-WHITE GROUND BELOW THE HEADER The party site sits on plain white. This whitens the big below-header areas -- the screens, their full-width sections and the footer bar -- that were carrying a faint off-white (#f8f8f8 / #FAFAFA / #fdfdfd). The small chips, tags and hover states keep their subtle --surface grey, since those rely on it to read against white; only the page grounds change. ========================================================= */ .app-shell, .screen, .screen .section, .screen .screen-section, .services-section, .events-section, .updates-section, .app-footer, .screen[data-route="nri-hub"], .screen[data-route="events"], .screen[data-route="chapters"], .screen[data-route="connect-ap"] { background: #ffffff; } /* ========================================================= EVERY PAGE ON PURE WHITE (final override — wins over route rules) The content pages were still reading grey from route-specific and token backgrounds. This pins the page GROUNDS -- the shell and every screen, plus the member/account grounds -- to pure white. Colour-on-purpose sections (join, vision) keep their own fills; only the neutral grounds are forced. The header is deliberately NOT included, so it stays exactly as it is. ========================================================= */ html, body, #app, .app-shell, .screen, .screen[data-route], .ac, .ac-body, .ac-shell, .member-shell { background-color: #ffffff !important; } /* Flatten decorative warm washes on the Chapters map so the panel reads fully white (the yellow radial glow behind the map was the off-white tint). */ .map-panel::before { background: none !important; opacity: 0 !important; } .map-panel, .network-panel { background: #ffffff !important; } /* ========================================================= CHAPTERS — "Global Network" best-design pass Premium white stat cards with a gold->red top accent (the header's flag edge, echoed), a red icon chip and big bold numbers; the map framed as a clean titled card. Pure white throughout, defined by soft shadow. ========================================================= */ /* Two-column body: stat cards stacked vertically on the left, the map filling the right and pulled up beside them. Heading spans the full width on top. */ .screen[data-route="chapters"] .container { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px 22px; align-items: start; } .screen[data-route="chapters"] .section-heading { grid-column: 1 / -1; margin-bottom: 2px; } /* The two columns finish level, and neither one is the one that decides it. .container is align-items: start, so the stat column sat at whatever four cards happened to add up to while the map card next to it was a different height -- close enough to look like a mistake rather than a choice. align-self: stretch overrides that start for this item only, so the column takes the full row height, and grid-auto-rows: 1fr then splits it equally between however many cards are in it. The row itself is still sized by whichever side is naturally taller, which is why this works in both directions: a taller map pulls the cards down to meet it, and a fifth card would push the map's height: 100% up to meet them. Nothing here states a height, so nothing has to be re-tuned when either side's content changes. auto-rows rather than grid-template-rows: repeat(4, 1fr) deliberately -- the count is not written down anywhere, so adding or removing a stat card needs no CSS change. */ .screen[data-route="chapters"] .stats-strip { grid-column: 1; align-self: stretch; border: 0; border-radius: 0; overflow: visible; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 14px; margin: 0; } .screen[data-route="chapters"] .network-panel { grid-column: 2; margin: 0; height: 100%; } @media (max-width: 900px) { .screen[data-route="chapters"] .container { grid-template-columns: 1fr; } .screen[data-route="chapters"] .stats-strip { grid-template-columns: 1fr 1fr; } /* Reset the desktop explicit placement -- otherwise grid-column:2 on the panel auto-creates a second column and it stays beside the cards. */ .screen[data-route="chapters"] .stats-strip, .screen[data-route="chapters"] .network-panel { grid-column: 1 / -1; } .screen[data-route="chapters"] .network-panel { height: auto; } .screen[data-route="chapters"] .stats-strip { align-self: auto; grid-auto-rows: auto; } } @media (max-width: 480px) { .screen[data-route="chapters"] .stats-strip { grid-template-columns: 1fr; } .screen[data-route="chapters"] .map-head { flex-wrap: wrap; gap: 12px; } .screen[data-route="chapters"] .map-head-r { width: 100%; } } .screen[data-route="chapters"] .stats-strip article { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; gap: 15px; min-height: 0; padding: 22px 20px 20px; background: #fff; border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.055); transition: transform .2s ease, box-shadow .2s ease; } .screen[data-route="chapters"] .stats-strip article:hover { transform: translateY(-3px); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.09); } .screen[data-route="chapters"] .stats-strip article::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); } .screen[data-route="chapters"] .stat-icon { width: 46px; height: 46px; flex: 0 0 auto; border: 0; display: grid; place-items: center; border-radius: 13px; background: #FFF3CC; color: var(--red-primary); font-size: 20px; } .screen[data-route="chapters"] .stats-strip article div { line-height: 1; } .screen[data-route="chapters"] .stats-strip strong { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 30px; color: var(--ink); letter-spacing: -.03em; } .screen[data-route="chapters"] .stats-strip b { color: var(--red-primary); font-size: 17px; font-weight: 800; margin-left: 1px; } .screen[data-route="chapters"] .stats-strip small { display: block; margin-top: 7px; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; } @media (max-width: 900px) { .screen[data-route="chapters"] .stats-strip { grid-template-columns: 1fr 1fr; } } /* Map framed as a titled white card */ .screen[data-route="chapters"] .network-panel { border: 0 !important; border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.06); overflow: hidden; } /* ========================================================= CHAPTERS — heading + map card best-design pass 2 ========================================================= */ /* Heading: gold kicker, big tight headline with a gold->red gradient second line (the header's two colours), clean standfirst. */ .screen[data-route="chapters"] .section-kicker { color: var(--yellow-deep); } .screen[data-route="chapters"] .section-heading h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.025em; color: var(--ink); } .screen[data-route="chapters"] .section-heading h2 span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .screen[data-route="chapters"] .section-heading p { color: var(--text); font-size: 14.5px; line-height: 1.6; } /* Map card header: live cue + title left, legend + filter right. */ .screen[data-route="chapters"] .network-panel { display: flex; flex-direction: column; } .screen[data-route="chapters"] .map-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 16px 22px 12px; flex-wrap: wrap; } .screen[data-route="chapters"] .map-head-l { display: flex; align-items: center; gap: 12px; } .screen[data-route="chapters"] .map-live { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--red-primary); box-shadow: 0 0 0 4px rgba(227, 30, 36, .16); animation: amv-pulse 2.4s ease-in-out infinite; } .screen[data-route="chapters"] .map-head-tx strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); } .screen[data-route="chapters"] .map-head-tx small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .screen[data-route="chapters"] .map-head-r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .screen[data-route="chapters"] .map-legend { display: flex; align-items: center; gap: 14px; } .screen[data-route="chapters"] .map-legend .ml { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .screen[data-route="chapters"] .map-legend .ml::before { content: ""; width: 11px; height: 11px; border-radius: 3px; } .screen[data-route="chapters"] .map-legend .ml-in::before { background: var(--red-primary); } .screen[data-route="chapters"] .map-legend .ml-ch::before { background: var(--yellow); } /* filter as a clean control */ .screen[data-route="chapters"] .map-head .place-filters { gap: 8px; } .screen[data-route="chapters"] .map-head .place-filters label { grid-auto-flow: column; align-items: center; gap: 9px; } .screen[data-route="chapters"] .map-head .place-filters input { min-width: 168px; height: 40px; border: 1px solid #E7E7E7; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } /* the on-map hint is redundant now the header says it */ .screen[data-route="chapters"] .map-hint { display: none; } .screen[data-route="chapters"] .map-panel { padding-top: 2px; } /* ========================================================= CONNECT AP — best-design pass (matches Chapters + header) Gold kicker, gold->red gradient headline, and the flag-edge accent bar on the track tiles. Same TDP system, pure white, soft-shadow definition. ========================================================= */ .screen[data-route="connect-ap"] .section-kicker { color: var(--yellow-deep); } .screen[data-route="connect-ap"] .section-heading h2 { letter-spacing: -.025em; color: var(--ink); } .screen[data-route="connect-ap"] .section-heading h2 span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .screen[data-route="connect-ap"] .section-heading p { color: var(--text); font-size: 14.5px; line-height: 1.6; } /* Track tiles: gold->red top accent, like the header's flag edge and the Chapters stat cards. One bar on all six -- same gradient, same full strength. It used to sit at .45 and come up to full only on the active tile and on hover, which is why the first tile's bar looked like a different colour from its five neighbours: it is the active one, so it alone was ever at full. Selection is already carried by the tile's red border, so the bar does not need to carry it too. */ .screen[data-route="connect-ap"] .tile { position: relative; overflow: hidden; } .screen[data-route="connect-ap"] .tile::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); opacity: 1; } /* the icon chip in the tile: gold wash, red glyph -- matches Chapters stats */ .screen[data-route="connect-ap"] .tile .tile-icon { background: #FFF3CC; color: var(--red-primary); border: 0; } /* ========================================================= MOTION — staggered card entrance + icon hover micro-interaction Deliberate, not scattered: the track tiles and stat cards rise in sequence when the page opens, and their icon chip springs a touch on hover. ========================================================= */ @keyframes tdp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .screen[data-route="connect-ap"] .tile, .screen[data-route="chapters"] .stats-strip article { animation: tdp-rise .55s cubic-bezier(.22, .61, .36, 1) both; } .screen[data-route="connect-ap"] .tile:nth-child(1), .screen[data-route="chapters"] .stats-strip article:nth-child(1) { animation-delay: .06s; } .screen[data-route="connect-ap"] .tile:nth-child(2), .screen[data-route="chapters"] .stats-strip article:nth-child(2) { animation-delay: .14s; } .screen[data-route="connect-ap"] .tile:nth-child(3), .screen[data-route="chapters"] .stats-strip article:nth-child(3) { animation-delay: .22s; } .screen[data-route="connect-ap"] .tile:nth-child(4), .screen[data-route="chapters"] .stats-strip article:nth-child(4) { animation-delay: .30s; } /* Connect AP carries six tiles now. Without these two the fifth and sixth fall through to a 0s delay and rise first, ahead of the four they follow -- the stagger has to be as long as the row is. Same .08s step. */ .screen[data-route="connect-ap"] .tile:nth-child(5) { animation-delay: .38s; } .screen[data-route="connect-ap"] .tile:nth-child(6) { animation-delay: .46s; } /* Icon chip springs on hover */ .screen[data-route="connect-ap"] .tile .tile-icon, .screen[data-route="chapters"] .stats-strip .stat-icon { transition: transform .28s cubic-bezier(.2, 1.5, .4, 1); } .screen[data-route="connect-ap"] .tile:hover .tile-icon, .screen[data-route="chapters"] .stats-strip article:hover .stat-icon { transform: translateY(-2px) scale(1.08) rotate(-3deg); } @media (prefers-reduced-motion: reduce) { .screen[data-route="connect-ap"] .tile, .screen[data-route="chapters"] .stats-strip article { animation: none; } } /* ========================================================= CONNECT AP — Milestones card This block used to shrink the tracks into small horizontal chips as well: .tile-desc was hidden, the tile was re-gridded to "icon name / icon sub", the chip came down to 40px and the 176px floor was removed. That override has been dropped so the tiles are the full-size cards the base rules around line 8010 describe -- icon at the top, name, label and the description sentence -- which is the size they are on dev. Nothing replaces it here: the base rules were never edited, so removing the override is all that is needed. Do not reintroduce a size for these tiles at this end of the file; change it at line 8010 and every breakpoint follows. ========================================================= */ /* Milestones card: tighten the frame and rise in after the tiles. */ .screen[data-route="connect-ap"] .amv { padding: 20px 26px 18px; animation: tdp-rise .55s cubic-bezier(.22, .61, .36, 1) both; /* One step past the last tile, so the sequence still finishes on the card. At the old .34s it landed between tiles four and five. */ animation-delay: .54s; } .screen[data-route="connect-ap"] .amv-top { margin-bottom: 14px; } @media (prefers-reduced-motion: reduce) { .screen[data-route="connect-ap"] .amv { animation: none; } } /* ========================================================= CONNECT AP — compact sign-in gate on the Milestones card It was a tall two-ish row block; now a tight one-row bar with a small icon chip, so it stops eating the card's height. ========================================================= */ .screen[data-route="connect-ap"] .amv .scheme-gate { margin-top: 12px; padding: 9px 14px; gap: 8px 12px; align-items: center; flex-wrap: nowrap; border-radius: 12px; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-ico { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; flex: 0 0 auto; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-copy { flex: 1 1 auto; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-copy strong { font-size: 12.5px; } .screen[data-route="connect-ap"] .amv .scheme-gate .gate-copy small { font-size: 11px; line-height: 1.4; } .screen[data-route="connect-ap"] .amv .scheme-gate .btn { flex: 0 0 auto; width: auto; padding: 8px 15px; font-size: 12px; white-space: nowrap; } @media (max-width: 620px) { .screen[data-route="connect-ap"] .amv .scheme-gate { flex-wrap: wrap; } } /* ========================================================= NRI HUB — consistent heading + card accent (matches the system) ========================================================= */ .screen[data-route="nri-hub"] .section-kicker { color: var(--yellow-deep); } .screen[data-route="nri-hub"] .section-heading h2 { letter-spacing: -.02em; } .screen[data-route="nri-hub"] .section-heading h2 span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .screen[data-route="nri-hub"] .section-heading p { color: var(--text); font-size: 14.5px; line-height: 1.6; } /* flag-edge accent on the service cards (faint at rest, full on hover) */ .screen[data-route="nri-hub"] .hub-card { position: relative; overflow: hidden; } .screen[data-route="nri-hub"] .hub-card::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); opacity: .45; transition: opacity .2s ease; } .screen[data-route="nri-hub"] .hub-card:hover::after { opacity: 1; } /* ========================================================= NRI HUB — motion & micro-interactions The cards already fan in on load (staggered via --d). On hover they lift, the icon springs, the "View services" arrow slides, and the list nudges -- deliberate motion, not scattered. ========================================================= */ .screen[data-route="nri-hub"] .hub-card-ic { transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), box-shadow .28s; } .screen[data-route="nri-hub"] .hub-card:hover .hub-card-ic { transform: translateY(-3px) scale(1.08) rotate(-3deg); } .screen[data-route="nri-hub"] .hub-card-go { transition: color .2s ease; } .screen[data-route="nri-hub"] .hub-card:hover .hub-card-go { color: var(--red-primary); } .screen[data-route="nri-hub"] .hub-card-go span { display: inline-block; transition: transform .2s ease; } .screen[data-route="nri-hub"] .hub-card:hover .hub-card-go span { transform: translateX(5px); } .screen[data-route="nri-hub"] .hub-card-list li { transition: transform .2s ease; } .screen[data-route="nri-hub"] .hub-card:hover .hub-card-list li { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .screen[data-route="nri-hub"] .hub-card-ic, .screen[data-route="nri-hub"] .hub-card-go span, .screen[data-route="nri-hub"] .hub-card-list li { transition: none; transform: none; } } /* ========================================================= NRI HUB — compact so the six cards + heading fit one screen (no scroll) ========================================================= */ .screen[data-route="nri-hub"] .section, .screen[data-route="nri-hub"] .screen-section { padding: 14px 0 16px; } .screen[data-route="nri-hub"] .section-heading { margin-bottom: 12px; } .screen[data-route="nri-hub"] .section-heading h2 { font-size: clamp(23px, 2.5vw, 33px); line-height: 1.08; } .screen[data-route="nri-hub"] .section-heading p { font-size: 13.5px; } .screen[data-route="nri-hub"] .hub-grid { gap: 12px; margin-top: 2px; } .screen[data-route="nri-hub"] .hub-card { padding: 14px 15px 13px; } .screen[data-route="nri-hub"] .hub-card-head { margin-bottom: 10px; gap: 11px; } .screen[data-route="nri-hub"] .hub-card-ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 0; } .screen[data-route="nri-hub"] .hub-card-ic svg { width: 22px; height: 22px; } .screen[data-route="nri-hub"] .hub-card-head strong { font-size: 16.5px; } .screen[data-route="nri-hub"] .hub-card-list { gap: 5px; } .screen[data-route="nri-hub"] .hub-card-list li { font-size: 12px; line-height: 1.4; } .screen[data-route="nri-hub"] .hub-card-go { margin-top: 11px; font-size: 10.5px; } /* ========================================================= EVENTS — premium compact cards in a 2-col grid (fits one screen, no scroll) ========================================================= */ .screen[data-route="events"] .section, .screen[data-route="events"] .screen-section { padding: 14px 0 16px; } .screen[data-route="events"] .section-heading { margin-bottom: 12px; } .screen[data-route="events"] .section-kicker { color: var(--yellow-deep); } .screen[data-route="events"] .section-heading h2 { letter-spacing: -.025em; } .screen[data-route="events"] .section-heading h2 span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .screen[data-route="events"] .section-heading p { font-size: 14px; } /* tabs, count, filters compact */ .screen[data-route="events"] .tab-bar { margin-bottom: 8px; } .screen[data-route="events"] .evs-count { margin: 0 0 10px; font-size: 12px; color: var(--muted); font-weight: 600; } .screen[data-route="events"] .events-filters { gap: 10px; margin-bottom: 14px; } .screen[data-route="events"] .events-filters input { height: 40px; border: 1px solid #E7E7E7; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* two-column grid of compact cards */ .screen[data-route="events"] .event-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .screen[data-route="events"] .event-card { min-height: 0; grid-template-columns: 58px 1fr auto; align-items: center; gap: 0; padding: 12px 14px 12px 12px; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.05); position: relative; overflow: hidden; } .screen[data-route="events"] .event-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--yellow), var(--red-primary)); opacity: .55; transition: opacity .2s ease; } .screen[data-route="events"] .event-card:hover { transform: translateY(-3px); box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 16px 36px rgba(0,0,0,.09); } .screen[data-route="events"] .event-card:hover::before { opacity: 1; } .screen[data-route="events"] .event-date { height: 58px; width: 58px; border-radius: 12px; } .screen[data-route="events"] .event-date strong { font-size: 22px; } .screen[data-route="events"] .event-date span { font-size: 8px; margin-top: 4px; } .screen[data-route="events"] .event-info { padding-left: 14px; min-width: 0; } /* event-type badge was yellow-on-yellow (invisible) -- make it a readable gold pill */ .screen[data-route="events"] .event-type, .screen[data-route="events"] .event-type.online { background: var(--yellow-soft); color: #8a6a00; font-size: 8px; padding: 4px 8px; } .screen[data-route="events"] .event-info h3 { font-size: 14px; margin: 5px 0 3px; line-height: 1.25; } .screen[data-route="events"] .event-info p { font-size: 10.5px; } .screen[data-route="events"] .event-actions { flex-direction: column; align-items: flex-end; gap: 6px; } .screen[data-route="events"] .event-actions > a:first-child { font-size: 9px; } .screen[data-route="events"] .event-actions .btn { padding: 7px 13px; font-size: 11px; } /* staggered entrance */ .screen[data-route="events"] .event-card { animation: tdp-rise .5s cubic-bezier(.22,.61,.36,1) both; } .screen[data-route="events"] .event-card:nth-child(odd) { animation-delay: .06s; } .screen[data-route="events"] .event-card:nth-child(even) { animation-delay: .12s; } @media (prefers-reduced-motion: reduce) { .screen[data-route="events"] .event-card { animation: none; } } @media (max-width: 760px) { .screen[data-route="events"] .event-list { grid-template-columns: 1fr; } } /* Events — final tighten so all 7 events fit with no scroll */ .screen[data-route="events"] .section-heading h2 { font-size: clamp(27px, 3vw, 40px); } .screen[data-route="events"] .section-heading { margin-bottom: 10px; } .screen[data-route="events"] .evs-count { margin: 0 0 8px; } .screen[data-route="events"] .events-filters { margin-bottom: 10px; } .screen[data-route="events"] .event-list { gap: 10px; } .screen[data-route="events"] .event-card { padding: 10px 12px 10px 10px; } .screen[data-route="events"] .event-date { height: 52px; width: 52px; } .screen[data-route="events"] .event-date strong { font-size: 20px; } /* ========================================================= EVENTS — one-row filter toolbar (search pills), tighter tabs/count Stacked labels replaced by a magnifier icon + placeholder, so the three filters sit in a single compact row and the events start higher. ========================================================= */ .screen[data-route="events"] .tab-bar { margin: 0 0 6px; } .screen[data-route="events"] .evs-count { margin: 0 0 8px; } .screen[data-route="events"] .events-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; } .screen[data-route="events"] .events-filters label { position: relative; margin: 0; } /* keep the label for screen readers, hide it visually (placeholder describes it) */ .screen[data-route="events"] .events-filters label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .screen[data-route="events"] .events-filters input { height: 42px; min-width: 210px; padding: 0 16px 0 40px; border: 1px solid #E7E7E7; border-radius: 999px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m15 15-3.6-3.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; box-shadow: 0 1px 2px rgba(0,0,0,.04); font-weight: 600; } .screen[data-route="events"] .events-filters input:hover { border-color: #d6d6d6; } .screen[data-route="events"] .events-filters input:focus { border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(227,30,36,.12); outline: none; } .screen[data-route="events"] .ev-clear { height: 42px; border: 0; background: none; color: var(--red-primary); font-weight: 800; font-size: 12px; cursor: pointer; } /* Events — last trim to bring the 7th event fully into view at 768px */ .screen[data-route="events"] .section, .screen[data-route="events"] .screen-section { padding: 10px 0 12px; } .screen[data-route="events"] .section-heading { margin-bottom: 8px; } .screen[data-route="events"] .section-heading h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.06; } .screen[data-route="events"] .event-list { gap: 9px; } /* ========================================================= EVENTS — premium segmented selector (My Country | Global) + final fit ========================================================= */ .screen[data-route="events"] .tab-bar { display: inline-flex; padding: 4px; gap: 3px; margin: 0 0 8px; background: #fff; border: 1px solid #EAEAEA; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .screen[data-route="events"] .tab-bar .tab { border: 0; background: none; border-radius: 999px; padding: 8px 20px; font-weight: 800; font-size: 12.5px; color: var(--muted); cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .screen[data-route="events"] .tab-bar .tab.is-active { background: var(--red-primary); color: #fff; box-shadow: 0 3px 10px rgba(227,30,36,.28); } .screen[data-route="events"] .tab-bar .tab:not(.is-active):hover { color: var(--red-primary); } .screen[data-route="events"] .evs-count { margin: 0 0 8px; font-size: 11.5px; } /* a hair tighter so all 7 events clear the fold at 768px */ .screen[data-route="events"] .event-card { padding: 9px 12px 9px 10px; } .screen[data-route="events"] .event-date { height: 50px; width: 50px; } .screen[data-route="events"] .event-date strong { font-size: 19px; } /* ========================================================= ABOUT / OUR LEGACY — consistent heading, segmented tabs, tighter fit ========================================================= */ .screen[data-route="about"] .section, .screen[data-route="about"] .screen-section { padding: 12px 0 14px; } .screen[data-route="about"] .section-heading { margin-bottom: 12px; } .screen[data-route="about"] .section-kicker { color: var(--yellow-deep); } .screen[data-route="about"] .section-heading h2 { letter-spacing: -.025em; } .screen[data-route="about"] .section-heading h2 span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .screen[data-route="about"] .section-heading p { font-size: 14px; } /* segmented tab control (Journey | Our Story | Vision & Mission | Milestones) */ .screen[data-route="about"] .tab-bar { display: inline-flex; padding: 4px; gap: 3px; margin-bottom: 12px; background: #fff; border: 1px solid #EAEAEA; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .screen[data-route="about"] .tab-bar .tab { border: 0; background: none; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 12.5px; color: var(--muted); cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .screen[data-route="about"] .tab-bar .tab.is-active { background: var(--red-primary); color: #fff; box-shadow: 0 3px 10px rgba(227,30,36,.28); } .screen[data-route="about"] .tab-bar .tab:not(.is-active):hover { color: var(--red-primary); } /* ========================================================= VISIONARIES + NEWS & MEDIA — consistent heading (gold kicker + gradient) ========================================================= */ .screen[data-route="visionaries"] .section-kicker, .screen[data-route="media"] .section-kicker { color: var(--yellow-deep); } .screen[data-route="visionaries"] .section-heading h2, .screen[data-route="media"] .section-heading h2 { letter-spacing: -.025em; } .screen[data-route="visionaries"] .section-heading h2 span, .screen[data-route="media"] .section-heading h2 span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .screen[data-route="visionaries"] .section, .screen[data-route="visionaries"] .screen-section, .screen[data-route="media"] .section, .screen[data-route="media"] .screen-section { padding: 12px 0 14px; } .screen[data-route="visionaries"] .section-heading, .screen[data-route="media"] .section-heading { margin-bottom: 14px; } /* ========================================================= FORMS + LOGIN/JOIN — visible input edges & consistent TDP theme --line is white (for flat cards), so form controls need their own edge. ========================================================= */ .app-form input, .app-form select, .app-form textarea { border-color: #E3E3E3; } .app-form input:hover, .app-form select:hover, .app-form textarea:hover { border-color: #cfcfcf; } /* gold kicker on both auth pages */ .screen[data-route="login"] .section-kicker, .screen[data-route="join"] .section-kicker { color: var(--yellow-deep); } /* login card: premium white with a flag-edge top accent */ .screen[data-route="login"] .auth-card { position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 22px 54px rgba(0,0,0,.09); } .screen[data-route="login"] .auth-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); } .screen[data-route="login"] .auth-card { animation: tdp-rise .5s cubic-bezier(.22,.61,.36,1) both; } /* ========================================================= LOGIN / JOIN — match Connect AP theme (segmented switch, gradient, icons) ========================================================= */ /* Auth switch as a visible segmented control (was invisible: --surface/--line are white). White track, red active pill -- same as Connect AP / Events. */ .auth-switch { background: #fff; border: 1px solid #EAEAEA; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .auth-switch a { color: var(--muted); font-weight: 800; padding: 7px 18px; } .auth-switch a:hover { color: var(--red-primary); } .auth-switch a.is-active { background: var(--red-primary); color: #fff; box-shadow: 0 3px 10px rgba(227,30,36,.28); } /* Join title gradient (matches the Connect AP / Chapters headline treatment) */ .join-title span { background: linear-gradient(90deg, var(--yellow-deep) 0%, var(--red-primary) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Join benefit icons: gold-soft chip + red glyph, like Connect AP's chips */ .join-benefits .jb-ico { background: var(--yellow-soft); border-radius: 12px; padding: 6px; box-sizing: content-box; } /* Connect AP milestones — description prominent, key figures in party red */ .screen[data-route="connect-ap"] .amv-lede { font-size: 14.5px; color: var(--text); line-height: 1.55; } .amv-hi { color: var(--red-primary); font-weight: 800; } /* ========================================================= FOOTER — defined party strip (was white-on-white, invisible) Red flag-edge on top (mirrors the header), soft lift, party lines in colour. ========================================================= */ .app-footer { background: #fff; border-top: 2px solid var(--red-primary); box-shadow: 0 -8px 22px rgba(20, 20, 20, .05); } .app-footer-bar .foot-copy { color: var(--muted); font-weight: 600; } .app-footer-bar .foot-copy em { color: var(--ink); font-weight: 800; font-style: normal; } .app-footer-bar .foot-slogan { color: var(--red-primary); font-weight: 800; } .app-footer-bar .foot-slogan .foot-sep { color: var(--yellow-deep); } .app-social a:hover { color: var(--red-primary); } /* ========================================================= MEMBER/ADMIN PORTAL — final match to Chapters (red-accented active nav) Sidebar is already white + gold-soft active; add the header's red accent. ========================================================= */ .ac-nav-item.is-active { border-left: 3px solid var(--red-primary); } .ac-nav-item.is-active .ac-ico, .ac-nav-item.is-active i { color: var(--red-primary); } /* KPI cards get the gold->red flag-edge, like the Chapters stat cards */ .ac-kpi { position: relative; overflow: hidden; } .ac-kpi::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); } .ac-kpi-hi { border-top-color: transparent; } /* ========================================================= HOME — premium quick-dock: 4 flag-edge cards with motion ========================================================= */ .quick-dock-light { background: transparent; border: 0; box-shadow: none; overflow: visible; gap: 14px; padding: 0; } .quick-dock-light a { position: relative; overflow: hidden; min-height: 0; padding: 18px 18px; gap: 13px; background: #fff; border: 0 !important; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 14px 32px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; animation: tdp-rise .55s cubic-bezier(.22, .61, .36, 1) both; } .quick-dock-light a::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--red-primary)); } .quick-dock-light a:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 22px 46px rgba(0,0,0,.12); } .quick-dock-light a:nth-child(1) { animation-delay: .06s; } .quick-dock-light a:nth-child(2) { animation-delay: .13s; } .quick-dock-light a:nth-child(3) { animation-delay: .20s; } .quick-dock-light a:nth-child(4) { animation-delay: .27s; } /* Become a Member -- the primary action */ .quick-dock-light a:nth-child(2) { box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 16px 36px rgba(227,30,36,.16); } .quick-dock-light a:nth-child(2)::before { height: 4px; } /* icon spring + arrow slide on hover */ .quick-dock-light .dock-icon { transition: transform .3s cubic-bezier(.2, 1.5, .4, 1); } .quick-dock-light a:hover .dock-icon { transform: translateY(-2px) scale(1.1) rotate(-4deg); } .quick-dock-light b { transition: transform .2s ease; } .quick-dock-light a:hover b { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .quick-dock-light a { animation: none; } } /* dock chip icons are now SVGs */ .dock-icon svg { width: 22px; height: 22px; display: block; } /* ========================================================= FOOTER in the header's gold -- party bookend Gold gradient (same as the header), red flag-edge on top (mirrors the header's red bottom edge). Text goes dark on gold; slogan stays red. ========================================================= */ .app-footer { background: linear-gradient(180deg, #FFD22E 0%, var(--yellow) 55%, #F5BB00 100%); border-top: 3px solid var(--red-primary); box-shadow: 0 -6px 20px rgba(176, 128, 4, .18); } .app-footer-bar .foot-copy { color: #5A4600; font-weight: 600; } .app-footer-bar .foot-copy em { color: var(--ink); font-weight: 800; font-style: normal; } .app-footer-bar .foot-slogan { color: var(--red-primary); font-weight: 800; } .app-footer-bar .foot-slogan .foot-sep { color: var(--ink); } .app-social a { color: var(--ink); } .app-social a:hover { color: var(--red-primary); } /* Footer text: black & red combination, bold (gold background unchanged) */ .app-footer-bar { font-weight: 800; } .app-footer-bar .foot-copy { color: #111111; font-weight: 800; } .app-footer-bar .foot-copy em { color: var(--red-primary); font-weight: 900; } .app-footer-bar .foot-slogan { color: #111111; font-weight: 900; } .app-footer-bar .foot-slogan .foot-sep { color: var(--red-primary); } /* Footer social marks: one red, not five brand colours. They were near-black at rest and each took its own platform colour on hover -- X black, Facebook blue, Instagram pink, WhatsApp green, YouTube red -- so the row changed colour under the pointer and read as five logos rather than as one set of links belonging to this site. All five now sit in the party red at rest, and the five nth-child hover colours are overridden back to it so nothing breaks the row on hover. The rest state is --red-deep rather than --red-primary, and that is a contrast decision, not a taste one: this bar is the gold gradient, and the party red on it measures 3.24 / 2.94 / 2.68 across #FFD22E, #FFC400 and #F5BB00 -- under the 3:1 that WCAG asks of an icon at two of the three stops. --red-deep gives 4.63 / 4.19 / 3.83 and is still plainly the same red. On hover the disc turns white underneath, so --red-primary is safe there and doubles as the interaction cue. The five nth-child overrides are written out one selector per platform rather than as a blanket rule, because the originals are that specific and a shorter selector would lose to them. */ .app-social a { color: var(--red-deep); } .app-social a:hover, .app-social a:nth-child(1):hover, .app-social a:nth-child(2):hover, .app-social a:nth-child(3):hover, .app-social a:nth-child(4):hover, .app-social a:nth-child(5):hover { color: var(--red-primary); } /* ========================================================= MOBILE FIT — Chapters & Connect AP (no sideways scroll) 1fr grid tracks default to minmax(auto,1fr): a wide child (the map, a tile) forces the track past the viewport and clips the whole column. minmax(0,1fr) + min-width:0 let the columns shrink to the phone width. ========================================================= */ @media (max-width: 900px) { .screen[data-route="chapters"] .container { grid-template-columns: minmax(0,1fr) !important; } .screen[data-route="chapters"] .network-panel, .screen[data-route="chapters"] .map-panel, .screen[data-route="chapters"] .stats-strip, .screen[data-route="chapters"] .stats-strip article { min-width: 0; } .screen[data-route="chapters"] .world-map { width: 100%; max-width: 100%; height: auto; aspect-ratio: 2 / 1; } .screen[data-route="chapters"] .map-head { flex-wrap: wrap; } .screen[data-route="chapters"] .map-head-r { width: 100%; } .screen[data-route="connect-ap"] .tile, .screen[data-route="connect-ap"] .amv, .screen[data-route="connect-ap"] .info-card { min-width: 0; } .screen[data-route="connect-ap"] .tile-desc, .screen[data-route="connect-ap"] .amv p, .screen[data-route="connect-ap"] .amv-lede { overflow-wrap: anywhere; } } @media (max-width: 600px) { .screen[data-route="connect-ap"] .tile-grid { grid-template-columns: minmax(0,1fr) !important; } } /* Safety net: phones never scroll sideways (inner overflow-x:auto still works) */ @media (max-width: 700px) { .screen[data-route="chapters"], .screen[data-route="connect-ap"] { overflow-x: hidden; } } /* ========================================================= MOBILE FIT — Member / Admin portal (<=900px) The sidebar becomes an off-canvas drawer: a hamburger in the top bar slides it in from the left over a tap-to-close scrim; main content is full width. ========================================================= */ .ac-burger { display: none; } @media (max-width: 900px) { .ac { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: calc(100dvh - var(--hdr)); } /* the drawer itself */ .ac-side { position: fixed; top: 0; left: 0; z-index: 320; width: min(284px, 84vw); height: 100dvh; overflow-y: auto; flex-direction: column; padding: 18px 16px; border-right: 1px solid var(--ac-line); transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 42px rgba(0,0,0,.2); } .ac.is-drawer-open .ac-side { transform: translateX(0); } /* tap-to-close scrim behind the drawer */ .ac-drawer-scrim { position: fixed; inset: 0; z-index: 310; display: block; background: rgba(0,0,0,.46); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; } .ac.is-drawer-open .ac-drawer-scrim { opacity: 1; visibility: visible; transition: opacity .3s ease; } /* vertical nav inside the drawer (overrides the older row rule) */ .ac-side { gap: 0; } .ac-nav { flex-direction: column; flex-wrap: nowrap; gap: 3px; margin-top: 6px; overflow: visible; } .ac-nav-item { flex: 0 0 auto; width: 100%; border-radius: 10px; white-space: normal; } .ac-me { margin-top: auto; } /* hamburger button in the top bar */ .ac-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; margin-right: 2px; border: 1px solid var(--ac-line); border-radius: 11px; background: #fff; color: var(--ac-ink); cursor: pointer; } .ac-burger svg { width: 20px; height: 20px; } .ac-burger:active { background: var(--ac-cream2); } .ac-top { padding: 12px 16px; gap: 10px; } .ac-top h1 { font-size: 19px; } .ac-body { padding: 16px 14px 48px; } .ac-kpis { grid-template-columns: repeat(2,1fr); } .ac .admin-table { display: block; overflow-x: auto; white-space: nowrap; } .ac .admin-add-grid { grid-template-columns: 1fr; } /* keep the page behind the drawer from scrolling sideways */ .screen[data-route="admin"], .screen[data-route="account"] { overflow-x: hidden; } } @media (max-width: 520px) { .ac-kpis { grid-template-columns: 1fr; } .ac-top h1 { font-size: 18px; } } /* ========================================================= CONNECT AP — milestones/gallery fit on mobile & any screen The stacked amv-body used 1fr (=minmax(auto,1fr)); the news headline and the gallery image forced the track wider than the phone, clipping both. Let the single column shrink and keep the image/news inside it. ========================================================= */ @media (max-width: 1080px) { .amv-body { grid-template-columns: minmax(0, 1fr) !important; } .amv-main, .amv-side, .amv-cards, .amv-news-stage, .amv-news-track, .amv-card, .amv-gallery, .amv-gal-stage, .amv-gal-track { min-width: 0; } .amv-card h5, .amv-card p, .amv-shot-cap, .amv-news-track .amv-card * { overflow-wrap: anywhere; } .amv-shot img { width: 100%; } }