/* ============================================================ International Testing Center — Design System Concept: the "admission ticket / boarding pass" as signature motif — official, procedural, credential-driven. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ --ink: #0A4A8A; --ink-2: #073861; --ink-soft: #4C6584; --paper: #EEF1F5; --paper-2: #F8F9FB; --line: #CBD3DE; --line-soft: #DEE3EA; --gold: #E2720F; --gold-2: #F2A15C; --on-gold: var(--ink); --verified: #2E6E52; --white: #FFFFFF; --radius: 3px; --max: 1180px; --font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; --font-en: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* per-partner accent themes, applied via a class on or a wrapper element */ .theme-ets{ --gold:#1B1B1B; --gold-2:#4A4A4A; --on-gold:#fff; } .theme-pearson{ --gold:#2E1FA0; --gold-2:#5445C4; --on-gold:#fff; } .theme-psi{ --gold:#1B2733; --gold-2:#47576A; --on-gold:#fff; } .theme-sfe{ --gold:#98003F; --gold-2:#C23568; --on-gold:#fff; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ar); line-height: 1.65; -webkit-font-smoothing: antialiased; } html[lang="en"] body, body.lang-en{ font-family: var(--font-en); } /* ---------- language visibility switching ---------- */ .ar, .en{ } body:not(.lang-en) .en{ display:none !important; } body.lang-en .ar{ display:none !important; } h1,h2,h3,h4{ font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--ink); } p{ margin: 0 0 1em; color: var(--ink-2); } a{ color: inherit; text-decoration: none; } ul{ margin:0; padding:0; list-style:none; } img,svg{ display:block; max-width:100%; } .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; } .mono{ font-family: var(--font-mono); letter-spacing: .04em; } /* reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ============================================================ HEADER / NAV — styled as a row of ticket stubs ============================================================ */ .site-header{ position: sticky; top:0; z-index: 50; background: var(--white); border-bottom: 3px solid var(--gold); box-shadow: 0 1px 0 var(--line-soft); } .header-row{ display:flex; align-items:center; justify-content:space-between; padding: 12px 24px; gap: 20px; } .header-start{ display:flex; align-items:center; gap:14px; } .brand{ display:flex; align-items:center; gap:14px; color: var(--ink); } .brand img.nh-logo{ height: 48px; width:auto; flex-shrink:0; } .authorized-badge, .brand-text-sub{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight: 700; color: var(--gold); border: 1.5px solid var(--gold); border-radius: 20px; padding: 6px 14px; background: var(--paper-2); white-space:nowrap; } @media (max-width:600px){ .brand-text-sub{ display:none; } } nav.tabs{ display:flex; flex-wrap:wrap; gap:0; } nav.tabs a{ position:relative; padding: 8px 16px; font-size: 14.5px; font-weight: 600; color: var(--ink); border-inline-start: 1px dashed var(--line); white-space:nowrap; } nav.tabs a:first-child{ border-inline-start:none; } nav.tabs a:hover, nav.tabs a.active{ color: var(--gold); } nav.tabs a.active::after{ content:""; position:absolute; inset-inline-start:16px; inset-inline-end:16px; bottom:-13px; height:3px; background: var(--gold); } .lang-toggle{ display:flex; border:1px solid var(--line); border-radius: 20px; overflow:hidden; font-family: var(--font-mono); font-size: 11px; flex-shrink:0; } .lang-toggle button{ background:transparent; border:none; color:var(--ink-soft); padding:6px 12px; cursor:pointer; font-family: var(--font-mono); font-size:11px; letter-spacing:.05em; } .lang-toggle button.active{ background: var(--gold); color: var(--on-gold); font-weight:600; } /* ---------- mobile / tablet menu ---------- */ .menu-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:6px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; color: var(--ink); flex-shrink:0; order:-1; } .menu-toggle svg{ display:block; } .mobile-nav-overlay{ display:none; position:fixed; inset:0; background:rgba(10,20,35,.45); z-index:90; opacity:0; transition:opacity .2s ease; } .mobile-nav-overlay.open{ display:block; opacity:1; } .mobile-nav-panel{ position:fixed; top:0; inset-inline-start:0; height:100%; width:82%; max-width:340px; background: var(--white); z-index:91; box-shadow:0 0 30px rgba(10,20,35,.28); transform: translateX(-105%); transition: transform .25s ease; display:flex; flex-direction:column; overflow-y:auto; } html[dir="rtl"] .mobile-nav-panel{ transform: translateX(105%); } .mobile-nav-panel.open{ transform: translateX(0) !important; } .mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line-soft); } .mobile-nav-head img{ height:28px; width:auto; } .mobile-nav-close{ background:none; border:none; font-size:26px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:4px 8px; } .mobile-nav-links{ display:flex; flex-direction:column; padding:10px 0; } .mobile-nav-links a{ padding:15px 22px; font-size:15.5px; font-weight:600; color: var(--ink); border-bottom:1px dashed var(--line-soft); display:flex; align-items:center; justify-content:space-between; } .mobile-nav-links a:active, .mobile-nav-links a:hover{ background: var(--paper-2); color: var(--gold); } .mobile-nav-links a::after{ content:"›"; color: var(--line); font-size:18px; } html[dir="rtl"] .mobile-nav-links a::after{ content:"‹"; } .mobile-nav-foot{ margin-top:auto; padding:18px 22px; border-top:1px solid var(--line-soft); } @media (max-width: 1000px){ nav.tabs{ display:none; } .menu-toggle{ display:flex; } } .mobile-nav-toggle{ display:none; } /* ============================================================ TICKET / ADMISSION CARD — the signature component ============================================================ */ .ticket{ position:relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; } .ticket-perf{ border-block-start: none; } .ticket .stub-cut{ position:relative; border-block-start: 2px dashed var(--line); margin-block-start: 4px; } .ticket .stub-cut::before, .ticket .stub-cut::after{ content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background: var(--paper); border:1px solid var(--line); } .ticket .stub-cut::before{ inset-inline-start:-9px; } .ticket .stub-cut::after{ inset-inline-end:-9px; } .barcode{ display:block; width:70px; height:20px; opacity:.5; background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px, var(--ink) 11px 14px, transparent 14px 17px); } .pass-side .barcode{ background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 2px, transparent 2px 5px, rgba(255,255,255,.75) 5px 6px, transparent 6px 11px, rgba(255,255,255,.75) 11px 14px, transparent 14px 17px); } /* ---------- program grid cards on homepage ---------- */ .programs{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; } @media (max-width: 900px){ .programs{ grid-template-columns: repeat(2,1fr);} } @media (max-width: 620px){ .programs{ grid-template-columns: 1fr; } } .program-card{ display:flex; flex-direction:column; height:100%; transition: transform .18s ease, box-shadow .18s ease; } .program-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,27,51,.10); } .program-card .top{ padding: 18px 18px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .program-card .code{ font-family: var(--font-mono); font-size:11px; color: var(--gold); border:1px solid var(--gold); border-radius: 20px; padding:3px 10px; letter-spacing:.06em; } .program-card h3{ font-size:19px; margin:0; } .program-card .body{ padding: 0 18px 18px; flex:1; } .program-card .body p{ font-size:14px; margin:0; } .program-card .foot{ padding: 12px 18px; display:flex; align-items:center; justify-content:space-between; border-block-start:2px dashed var(--line); } .program-card .foot .view{ font-size:12.5px; font-weight:600; color: var(--ink); } .program-card .foot .view::after{ content:" ›"; } html[dir="rtl"] .program-card .foot .view::after{ content:" ‹"; } /* ============================================================ HERO ============================================================ */ .hero{ background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--white); padding: 64px 0 84px; position:relative; overflow:hidden; } .hero::after{ content:""; position:absolute; inset-inline-end:-120px; top:-120px; width:360px; height:360px; border-radius:50%; border: 40px solid rgba(224,172,82,.08); } .hero .wrap{ position:relative; z-index:1; } .hero .eyebrow{ font-family: var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-2); margin-bottom:14px; display:flex; align-items:center; gap:10px; } .hero .eyebrow::before{ content:""; width:26px; height:1px; background: var(--gold-2); } .hero h1{ color: var(--white); font-size: clamp(30px, 4.4vw, 50px); max-width: 15ch; margin-bottom:18px; line-height:1.15; } .hero p.lead{ color:#CBD6EC; max-width: 60ch; font-size:16.5px; margin-bottom: 28px; } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:8px; padding: 12px 22px; border-radius: 2px; font-size:14.5px; font-weight:600; border: 1px solid transparent; cursor:pointer; } .btn-gold{ background: var(--gold); color: var(--on-gold); } .btn-gold:hover{ background: var(--gold-2); } .btn-ghost{ border-color: rgba(255,255,255,.4); color: var(--white); } .btn-ghost:hover{ border-color: var(--gold-2); color: var(--gold-2); } .btn-dark{ background:var(--ink); color:var(--white); } .btn-dark:hover{ background:var(--ink-2); } /* hero ticket badge (single orchestrated motion moment) */ .hero-stamp{ position:absolute; inset-inline-end: 60px; bottom: -30px; width:130px; height:130px; border-radius:50%; border: 3px solid var(--gold); color: var(--gold-2); display:flex; align-items:center; justify-content:center; text-align:center; font-family: var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; transform: rotate(-14deg) scale(.85); opacity:0; animation: stampIn .7s .3s cubic-bezier(.2,.9,.25,1.2) forwards; background: rgba(15,27,51,.4); } @keyframes stampIn{ 0%{ opacity:0; transform: rotate(-30deg) scale(.6); } 100%{ opacity:1; transform: rotate(-14deg) scale(1); } } @media (max-width: 900px){ .hero-stamp{ display:none; } } /* ============================================================ SECTIONS ============================================================ */ section{ padding: 68px 0; } .section-head{ margin-bottom: 36px; max-width: 68ch; } .section-head .kicker{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); margin-bottom:10px; display:block; } .section-head h2{ font-size: clamp(24px,3vw,32px); } .section-alt{ background: var(--paper-2); border-block:1px solid var(--line-soft); } /* process steps (real sequence -> numbering justified) */ .steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; position:relative; } @media (max-width: 800px){ .steps{ grid-template-columns:1fr; } } .step{ padding: 26px 24px; position:relative; border-inline-end:1px dashed var(--line); } .steps .step:last-child{ border-inline-end:none; } .step .num{ font-family: var(--font-mono); font-size:13px; color: var(--gold); font-weight:600; margin-bottom:10px; } .step h3{ font-size:16.5px; } .step p{ font-size:14px; } /* stats strip (global acceptance numbers) */ .stats{ display:grid; grid-template-columns: repeat(3,1fr); border:1px solid var(--line); background:var(--white); } @media (max-width:700px){ .stats{ grid-template-columns:1fr; } } .stats .stat{ padding:26px 22px; text-align:center; border-inline-end:1px dashed var(--line); } .stats .stat:last-child{ border-inline-end:none; } .stats .stat .n{ font-family: var(--font-mono); font-size: clamp(28px,3.4vw,38px); font-weight:600; color: var(--ink); display:block; } .stats .stat .l{ font-size:13px; color: var(--ink-soft); margin-top:4px; } .steps-4{ grid-template-columns: repeat(4,1fr) !important; } @media (max-width:900px){ .steps-4{ grid-template-columns: repeat(2,1fr) !important; } } @media (max-width:560px){ .steps-4{ grid-template-columns: 1fr !important; } } /* resource link cards */ .resource-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; } @media (max-width:900px){ .resource-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .resource-grid{ grid-template-columns: 1fr; } } .resource-card{ display:block; padding:18px; border:1px solid var(--line); background:var(--white); border-radius: var(--radius); font-size:13.5px; transition: border-color .15s ease, transform .15s ease; } .resource-card:hover{ border-color: var(--gold); transform: translateY(-2px); } .resource-card .rlabel{ font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--gold); display:block; margin-bottom:8px; } .resource-card .rtitle{ font-weight:600; color:var(--ink); display:block; margin-bottom:4px; } /* partner / exam program logos */ .partner-badge{ display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; } .partner-badge img{ height:30px; width:auto; } .partner-badge span{ font-family: var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--gold-2); } .partner-badge.dual{ gap:16px; padding:12px 18px; border:1px solid var(--line-soft); background:var(--paper-2); border-radius: var(--radius); } .partner-badge.dual .sep{ width:1px; height:26px; background: var(--line); } .partner-badge.dual img{ height:32px; } .exam-logo-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .exam-logo-head img{ height:52px; width:auto; } @media (max-width:480px){ .exam-logo-head img{ height:38px; } } /* skill icon strip */ .skill-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-bottom:24px; } @media (max-width:700px){ .skill-strip{ grid-template-columns: repeat(2,1fr); } } .skill-strip .sk{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:18px 10px; border:1px solid var(--line); background:var(--white); } .skill-strip .sk .icon{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; color: var(--gold); } .skill-strip .sk span.lbl{ font-size:12.5px; font-weight:600; color:var(--ink); } .btn-whatsapp{ background:#25D366; color:#fff; } .btn-whatsapp:hover{ background:#1FB955; } .btn svg{ display:block; } .contact-icons{ display:inline-flex; align-items:center; gap:8px; margin-inline-start:8px; } .contact-icons a{ width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.35); color: inherit; flex-shrink:0; } .contact-icons a.wa{ background:#25D366; border-color:#25D366; color:#fff; } .contact-icons a.call:hover{ border-color: var(--gold-2); color: var(--gold-2); } /* discount / agent code showcase */ .code-showcase{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background: var(--ink); color:var(--white); padding: 22px 28px; border-radius: var(--radius); margin: 20px 0 28px; } .code-showcase .lbl{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#C8D3E8; display:block; margin-bottom:6px; } .code-showcase .code-big{ font-family: var(--font-mono); font-size: clamp(22px,3vw,30px); font-weight:600; color: var(--gold-2); letter-spacing:.04em; } .screenshot-steps{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; } @media (max-width:800px){ .screenshot-steps{ grid-template-columns:1fr; } } .screenshot-steps figure{ margin:0; border:1px solid var(--line); background:var(--white); } .screenshot-steps img{ width:100%; display:block; border-bottom:1px solid var(--line); } .screenshot-steps figcaption{ padding:14px 16px; font-size:13px; color:var(--ink-2); } .screenshot-steps figcaption .num{ font-family: var(--font-mono); color: var(--gold); font-weight:600; margin-inline-end:6px; } /* vendor / certification-provider tag list */ .vendor-box{ max-height: 420px; overflow-y: auto; border: 1px solid var(--line); background: var(--white); padding: 18px 20px; columns: 3; column-gap: 22px; } @media (max-width:800px){ .vendor-box{ columns:2; } } @media (max-width:520px){ .vendor-box{ columns:1; } } .vendor-box .v-item{ break-inside: avoid; font-size:13px; color: var(--ink-2); padding: 5px 0; border-bottom: 1px dotted var(--line-soft); display:flex; align-items:center; gap:6px; } .vendor-box .v-item::before{ content:"•"; color: var(--gold); } .vendor-count{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); margin-bottom:14px; display:block; } /* authorized-center certificate showcase */ .cert-showcase{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items:center; } @media (max-width:800px){ .cert-showcase{ grid-template-columns:1fr; } } .cert-showcase img{ width:100%; border:1px solid var(--line); box-shadow: 0 14px 34px rgba(15,27,51,.10); } /* dense data table (visa requirements) */ table.fmt.dense th, table.fmt.dense td{ padding:10px 12px; font-size:12.8px; } table.fmt.dense td:nth-child(4){ font-family: var(--font-mono); font-size:12px; white-space:nowrap; } .book-link{ display:inline-block; font-family: var(--font-mono); font-size:11.5px; color: var(--gold); border:1px solid var(--gold); border-radius:14px; padding:3px 10px; white-space:nowrap; } .book-link:hover{ background: var(--gold); color: var(--white); } /* why / features */ .features{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; } @media (max-width:800px){ .features{ grid-template-columns:1fr; } } .feature{ padding:22px; border:1px solid var(--line); background:var(--white); border-radius: var(--radius); } .feature .mark{ width:34px; height:34px; border:1.5px solid var(--verified); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--verified); font-family:var(--font-mono); font-size:13px; margin-bottom:12px; } .feature h3{ font-size:16px; } .feature p{ font-size:13.5px; } /* ============================================================ EXAM PAGE HERO — the boarding-pass header ============================================================ */ .exam-hero{ padding: 44px 0 0; background: var(--paper-2); border-block-end:1px solid var(--line-soft); } .exam-hero .breadcrumb{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); margin-bottom:22px; } .exam-hero .breadcrumb a:hover{ color: var(--gold); } .pass{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); display:grid; grid-template-columns: 1fr 240px; box-shadow: 0 16px 40px rgba(15,27,51,.06); margin-bottom: -60px; overflow:hidden; } @media (max-width: 760px){ .pass{ grid-template-columns:1fr; } } .pass-main{ padding: 30px 34px; } .pass-main .kicker{ font-family: var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--gold); text-transform:uppercase; margin-bottom:8px; display:block; } .pass-main h1{ font-size: clamp(26px,3.4vw,38px); margin-bottom:10px; } .pass-main p{ font-size:15px; max-width:60ch; } .pass-fields{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px 24px; margin-block-start:22px; padding-block-start:18px; border-block-start:2px dashed var(--line); } @media (max-width:520px){ .pass-fields{ grid-template-columns: repeat(2,1fr); } } .pass-fields div span.label{ display:block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:4px;} .pass-fields div span.val{ font-size:14px; font-weight:600; color:var(--ink); } .pass-side{ background: var(--ink); color:var(--white); padding: 30px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; border-inline-start: 2px dashed rgba(255,255,255,.25); } @media (max-width:760px){ .pass-side{ border-inline-start:none; border-block-start:2px dashed rgba(255,255,255,.2); flex-direction:row; justify-content:space-between; } } .pass-side .code{ font-family: var(--font-mono); font-size:13px; color: var(--gold-2); letter-spacing:.06em; } .pass-side .barcode span{ background: rgba(255,255,255,.7); } .exam-hero-spacer{ height:60px; } /* format table */ .table-wrap{ overflow-x:auto; } table.fmt{ width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); } table.fmt th, table.fmt td{ text-align: start; padding: 12px 16px; border-block-end:1px solid var(--line-soft); font-size:14px; } table.fmt th{ font-family: var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); background: var(--paper-2); } table.fmt tr:last-child td{ border-block-end:none; } /* who-for list */ .check-list li{ position:relative; padding-inline-start:26px; margin-bottom:10px; font-size:14.5px; color:var(--ink-2); } html[dir="rtl"] .check-list li{ padding-inline-start:26px; padding-inline-end:0; } .check-list li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0; color: var(--verified); font-weight:700; } /* FAQ accordion */ .faq details{ border-block-end:1px solid var(--line-soft); padding: 16px 0; } .faq summary{ cursor:pointer; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; font-family: var(--font-mono); color: var(--gold); font-size:20px; flex-shrink:0; } .faq details[open] summary::after{ content:"−"; } .faq p{ margin-top:10px; font-size:14px; } /* CTA banner */ .cta-band{ background: var(--ink); color: var(--white); text-align:center; padding: 56px 24px; border-radius: var(--radius); } .cta-band h2{ color:var(--white); } .cta-band p{ color:#C8D3E8; max-width:55ch; margin-inline:auto; } .cta-band .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; } /* ============================================================ FOOTER ============================================================ */ footer.site-footer{ background: var(--ink); color:#C8D3E8; padding: 50px 0 24px; margin-top: 40px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 28px; margin-bottom: 30px; } @media (max-width:800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } .footer-grid h4{ color:var(--white); font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); margin-bottom:14px; } .footer-grid ul li{ margin-bottom:8px; font-size:13.5px; } .footer-grid ul li a:hover{ color: var(--gold-2); } .footer-bottom{ border-block-start:1px solid rgba(255,255,255,.15); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8FA0C4; } /* ---------- generic content helpers ---------- */ .two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:start; } @media (max-width:800px){ .two-col{ grid-template-columns:1fr; } } .note-box{ background: var(--paper); border-inline-start: 3px solid var(--gold); padding: 16px 18px; font-size:13.5px; color: var(--ink-2); } html[dir="rtl"] .note-box{ border-inline-start:3px solid var(--gold); border-inline-end:none; }