/* css/fonts.css */
 @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* css/tokens.css */
 :root { --ink: #0d3b52; --ink-2: #12506d; --navy: #0b2947; --panel: #e8f2f6; --panel-2: #dcebf2; --line: rgba(13, 59, 82, 0.12); --line-strong: rgba(13, 59, 82, 0.24); --paper: #f3f9fb; --paper-2: #e6f1f5; --fog: #5a7d8c; --muted: #7c9aa8; --text-dark: #0d2b38; --text-body: #3d5c69; --card-line: #dce8ee; --field-line: #cfdfe7; --signal: #0da052; --signal-deep: #078841; --signal-mid: #4cc184; --signal-soft: #cfe9db; --signal-on-dark-1: #d8f5e6; --signal-on-dark-2: #a9edc9; --signal-on-dark-3: #7fe0b0; --ink-3: #17627f; --cyan: #0e93c2; --cid-blue: #1b4fd8; --gold: #cb9a4a; --white: #ffffff; --events: #16708c; --events-soft: rgba(22, 112, 140, 0.12); --events-line: rgba(22, 112, 140, 0.3); --news: #07733a; --news-soft: rgba(7, 115, 58, 0.12); --news-line: rgba(7, 115, 58, 0.3); --danger: #c0392b; --danger-soft: rgba(192, 57, 43, 0.10); --warning: #b7791f; --warning-soft: rgba(183, 121, 31, 0.12); --success: var(--signal-deep); --success-soft: rgba(13, 160, 82, 0.12); --info-soft: rgba(27, 79, 216, 0.09); --r: 14px; --r-sm: 9px; --r-lg: 22px; --maxw: 1240px; --maxw-text: 760px; --topbar-h: 80px; --ff-disp: 'Manrope', 'Segoe UI', sans-serif; --ff-body: 'Source Sans 3', 'Segoe UI', sans-serif; --ff-mono: 'JetBrains Mono', 'Cascadia Mono', monospace; --shadow-card: 0 18px 40px -22px rgba(13, 59, 82, 0.35); --shadow-pop: 0 20px 48px -20px rgba(13, 59, 82, 0.28); }
/* css/base.css */
 * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } body { font-family: var(--ff-body); background: var(--paper); color: var(--text-dark); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } :target, [id]:not(body) { scroll-margin-top: calc(var(--topbar-h) + 24px); } img { max-width: 100%; display: block; } ::selection { background: var(--signal); color: var(--ink); } :focus-visible { outline: 2px solid var(--cid-blue); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--cid-blue); color: var(--white); padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-family: var(--ff-disp); font-weight: 600; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
/* css/layout.css */
 .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(243, 249, 251, 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background 0.3s; } .topbar.is-scrolled { background: rgba(243, 249, 251, 0.97); } .topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .brand { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 0 0 auto; } .brand-logo { height: 52px; width: auto; display: block; flex: 0 0 auto; object-fit: contain; } .nav { display: flex; align-items: center; gap: 2px; min-width: 0; } .nav .nav-link { font-size: 1.05rem; color: var(--text-body); padding: 9px 8px; border-radius: 8px; font-weight: 500; transition: 0.2s; letter-spacing: 0.01em; white-space: nowrap; } .nav .nav-link:hover { color: var(--ink); background: rgba(27, 79, 216, 0.07); } .nav .nav-link.active { color: var(--cid-blue); background: var(--info-soft); } .nav-item { position: relative; display: flex; align-items: center; } .nav-caret { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; margin-left: -6px; border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; } .nav-item:hover > .nav-caret, .nav-item:focus-within > .nav-caret { color: var(--cid-blue); } .nav-menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 270px; max-width: 340px; padding: 8px; margin: 0; list-style: none; background: var(--white); border: 1px solid var(--card-line); border-radius: 12px; box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.16s, transform 0.16s, visibility 0.16s; } .nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: none; } .nav-menu li { display: block; } .nav-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; line-height: 1.35; color: var(--text-body); transition: 0.15s; } .nav-menu a:hover, .nav-menu a:focus-visible { color: var(--ink); background: rgba(27, 79, 216, 0.07); } .nav-group-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font-family: inherit; font-size: 0.88rem; line-height: 1.35; font-weight: 500; color: var(--text-body); text-align: left; cursor: pointer; transition: 0.15s; } .nav-group-toggle:hover, .nav-group-toggle:focus-visible { color: var(--ink); background: rgba(27, 79, 216, 0.07); } .nav-group-toggle[aria-expanded="true"] { color: var(--ink); font-weight: 600; } .nav-group-chevron { flex: none; color: var(--muted); transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1), color 0.15s; } .nav-group-toggle:hover .nav-group-chevron { color: var(--cid-blue); } .nav-group-toggle[aria-expanded="true"] .nav-group-chevron { transform: rotate(180deg); color: var(--cid-blue); } .nav-group-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.24s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s; } .js-nav .nav-group-panel { grid-template-rows: 0fr; opacity: 0; } .js-nav .nav-group-panel > * { overflow: hidden; } .js-nav .nav-group-toggle[aria-expanded="true"] + .nav-group-panel { grid-template-rows: 1fr; opacity: 1; } .nav-group-items { list-style: none; margin: 0 0 0 13px; padding: 2px 0 4px 9px; border-left: 2px solid var(--card-line); } .nav-group-items a { font-size: 0.85rem; padding: 7px 10px; } .nav-item:nth-last-child(-n + 2) > .nav-menu { left: auto; right: 0; } .topbar-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .signout-form { display: inline-flex; margin: 0; } .account { position: relative; display: flex; align-items: center; } .account-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; transition: 0.18s; } .account-btn svg { stroke: currentColor; fill: none; } .account:hover > .account-btn, .account:focus-within > .account-btn, .account-btn:focus-visible { border-color: var(--cid-blue); color: var(--cid-blue); background: var(--info-soft); } .account-menu { left: auto; right: 0; min-width: 200px; max-width: none; } .account:hover > .account-menu, .account:focus-within > .account-menu { opacity: 1; visibility: visible; transform: none; } .account-menu .signout-form { display: block; } .account-menu a, .account-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font-family: inherit; font-size: 0.88rem; line-height: 1.35; font-weight: 500; color: var(--text-body); text-align: left; cursor: pointer; transition: 0.15s; } .account-menu a:hover, .account-menu a:focus-visible, .account-menu button:hover, .account-menu button:focus-visible { color: var(--ink); background: rgba(27, 79, 216, 0.07); } .account-menu svg { flex: none; stroke: currentColor; fill: none; color: var(--muted); } .lang { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; font-family: var(--ff-mono); font-size: 0.72rem; } .lang button, .lang a { background: transparent; border: 0; color: var(--fog); padding: 7px 11px; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: 0.06em; transition: 0.2s; line-height: 1.2; } .lang .on { background: var(--cid-blue); color: var(--white); font-weight: 600; } .menu-btn { display: none; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; align-items: center; justify-content: center; } .drawer-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(4, 10, 18, 0.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: 0.3s; } .drawer-overlay.open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: -420px; width: min(420px, 88vw); height: 100%; z-index: 201; background: var(--white); border-left: 1px solid var(--line-strong); transition: right 0.38s cubic-bezier(0.6, 0, 0.2, 1); overflow-y: auto; padding: 26px 26px 50px; } .drawer.open { right: 0; } .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .drawer-head b { font-family: var(--ff-mono); font-size: 0.84rem; color: var(--cid-blue); letter-spacing: 0.16em; text-transform: uppercase; } .drawer-close { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; } .drawer nav a { display: block; padding: 11px 12px; border-radius: var(--r-sm); color: var(--text-body); font-size: 0.94rem; transition: 0.2s; } .drawer nav a:hover { background: rgba(27, 79, 216, 0.07); color: var(--ink); } .drawer nav a.sub { padding-left: 32px; font-size: 0.84rem; color: #6d8b98; } .drawer nav a.sub-2 { padding-left: 52px; font-size: 0.8rem; } .drawer-sep { height: 1px; background: var(--line); margin: 14px 0; } main { animation: view-fade 0.5s ease; } @keyframes view-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .page { padding: 120px 0 100px; background: var(--paper); } .page.dark { background: linear-gradient(180deg, var(--panel), var(--panel-2)); color: var(--text-dark); } .page + .page { padding-top: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .page-head { margin-bottom: 56px; } .section-head { font-family: var(--ff-disp); font-weight: 700; font-size: clamp(1.28rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.25; color: var(--ink-2); } .page-head .error-status { font-family: var(--ff-mono); font-size: 0.95rem; letter-spacing: 0.12em; color: var(--fog); margin-bottom: 14px; } .page-head .page-head-name { font-family: var(--ff-disp); font-weight: 600; font-size: clamp(1.02rem, 1.6vw, 1.22rem); letter-spacing: -0.01em; line-height: 1.3; color: var(--ink-2); margin-bottom: 10px; } .page-head h2 { font-family: var(--ff-disp); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(2.2rem, 4.5vw, 3.45rem); margin-bottom: 22px; color: var(--ink); } .page-head p { font-size: 1.06rem; color: var(--text-body); } .page-cover { position: relative; margin-bottom: 56px; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--r); border: 1px solid var(--card-line); background: var(--panel-2); } .page-cover-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); } .page-head.is-wide { max-width: 1060px; margin-left: auto; margin-right: auto; } .page-head.is-wide p { font-size: clamp(1.06rem, 1.3vw, 1.14rem); line-height: 1.75; } .page-column { max-width: var(--maxw-text); margin-left: auto; margin-right: auto; } .site-footer { --footer-navy: var(--navy); --footer-green: #7ac142; --footer-text: #e8edf3; --footer-muted: #c3cedb; --footer-divider: rgba(255, 255, 255, 0.15); background: var(--footer-navy); color: var(--footer-text); padding: 56px 0 0; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-bottom: 40px; } .footer-brand { max-width: 260px; } .footer-brand img { width: 100%; max-width: 230px; height: auto; } .footer-col-title { color: var(--footer-green); font-family: var(--ff-disp); font-size: 1rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 18px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; } ul.footer-nav-list { display: block; columns: 2; column-gap: 48px; } .footer-nav-list li { break-inside: avoid; margin-bottom: 14px; } .footer-col a { display: inline-block; font-size: 0.94rem; color: var(--footer-text); opacity: 0.92; transition: 0.2s; } .footer-col a:hover { color: var(--footer-green); opacity: 1; } .footer-contact { max-width: 300px; } .footer-contact-item { display: flex; gap: 12px; margin-bottom: 18px; font-size: 0.94rem; line-height: 1.5; color: var(--footer-text); opacity: 0.95; } .footer-contact-icon { flex: none; margin-top: 2px; color: var(--footer-green); line-height: 0; } .footer-contact-item a { color: inherit; transition: 0.2s; } .footer-contact-item a:hover { color: var(--footer-green); } .footer-socials { list-style: none; display: flex; gap: 4px; margin: 18px 0 0 -7px; } .footer-socials a, .footer-social-pending { width: 32px; height: 32px; border-radius: 8px; color: var(--footer-text); opacity: 0.7; display: grid; place-items: center; transition: 0.2s; } .footer-socials a:hover, .footer-socials a:focus-visible { opacity: 1; color: var(--footer-green); background: rgba(255, 255, 255, 0.08); } .footer-social-pending { cursor: default; } .footer-divider { border: none; border-top: 1px solid var(--footer-divider); margin: 0; } .footer-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 26px 0; } .footer-ministry { display: flex; align-items: center; gap: 16px; } .footer-ministry img { width: 52px; height: 52px; flex: none; filter: brightness(0) invert(1); } .footer-ministry-text { font-family: var(--ff-disp); font-size: 0.94rem; font-weight: 800; line-height: 1.35; letter-spacing: 0.3px; text-transform: uppercase; } .footer-legal { margin-left: auto; font-size: 0.88rem; } .footer-legal a { color: var(--footer-muted); text-decoration: underline; text-underline-offset: 3px; } .footer-legal a:hover { color: var(--white); } .footer-copyright { font-size: 0.88rem; color: var(--footer-muted); margin-left: 20px; }
/* css/components.css */
 .pix { display: flex; gap: 3px; align-items: flex-end; } .pix i { width: 9px; height: 9px; background: var(--cid-blue); display: block; border-radius: 1px; } .pix i.g { background: var(--signal); } .pix i.o { opacity: 0.35; } .pix-stair { display: grid; grid-template-columns: repeat(4, 10px); grid-auto-rows: 10px; gap: 3px; } .pix-stair i { background: var(--cid-blue); border-radius: 1px; display: block; } .pix-deco { position: absolute; display: grid; grid-template-columns: repeat(4, 14px); grid-auto-rows: 14px; gap: 4px; pointer-events: none; opacity: 0.9; } .pix-deco i { border-radius: 2px; display: block; } .btn { font-family: var(--ff-disp); font-weight: 600; font-size: 0.94rem; padding: 15px 28px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: 0.22s; display: inline-flex; align-items: center; gap: 10px; } .btn-primary { background: var(--cid-blue); color: var(--white); } .btn-primary:hover { background: var(--ink); transform: translateY(-2px); } .btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--cid-blue); color: var(--cid-blue); } .btn-sm { padding: 10px 18px; font-size: 0.86rem; border-radius: var(--r-sm); } .btn-block { width: 100%; justify-content: center; } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .grid { display: grid; gap: 22px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .card { --card-pad: 30px; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); padding: var(--card-pad); transition: 0.25s; position: relative; overflow: hidden; } .card:hover { border-color: var(--cid-blue); transform: translateY(-4px); box-shadow: var(--shadow-card); } .card.is-static { cursor: default; } .card.is-quiet { cursor: default; background: var(--white); border-color: var(--line); } .card.is-quiet:hover { border-color: var(--line); } .card .idx { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--cid-blue); letter-spacing: 0.1em; margin-bottom: 16px; } .card h4 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.28rem; margin-bottom: 10px; letter-spacing: -0.02em; color: var(--ink); } .card p { font-size: 0.94rem; color: var(--text-body); line-height: 1.55; } .card .ico, .contact-card .ico { width: 46px; height: 46px; border-radius: 11px; margin-bottom: 18px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(27, 79, 216, 0.1), rgba(13, 160, 82, 0.12)); border: 1px solid rgba(27, 79, 216, 0.22); } .card .ico svg, .contact-card .ico svg { width: 24px; height: 24px; stroke: var(--cid-blue); fill: none; } .card .ico.center { margin: 0 auto 20px; } .card-split { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; } .card-split .ico { flex: none; margin-bottom: 0; } .card-split-body { flex: 1; min-width: 260px; } .card-split-body h4 { font-weight: 600; } .pathway-card { display: flex; flex-direction: column; } .card .doc-open { margin-top: auto; padding-top: 16px; font-family: var(--ff-disp); font-weight: 700; font-size: 0.9rem; color: var(--cid-blue); } .sector-card { cursor: pointer; } .sector-card .tag { position: absolute; top: 22px; right: 22px; font-family: var(--ff-mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; } .sector-cover { position: relative; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 22px; aspect-ratio: 21 / 7; flex: none; overflow: hidden; background: var(--panel-2); } .sector-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: 0.58; filter: saturate(0.78); transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, filter 0.35s ease; } .card:hover .sector-cover-img { opacity: 0.82; filter: saturate(0.95); transform: scale(1.04); } .sector-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0.72) 84%, var(--white) 100% ); } .sector-card .arrow { margin-top: 18px; font-size: 0.85rem; color: var(--cid-blue); font-weight: 600; display: flex; align-items: center; gap: 6px; font-family: var(--ff-disp); } .sector-photo { position: relative; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 34px; aspect-ratio: 21 / 9; overflow: hidden; background: var(--panel-2); isolation: isolate; } .sector-photo-media { position: absolute; inset: 0; animation: sector-photo-settle 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .sector-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } .card:hover .sector-photo-img { transform: scale(1.045); } .sector-photo-caption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(20px, 3.2vw, 38px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; background: linear-gradient( 180deg, rgba(13, 59, 82, 0) 0%, rgba(13, 59, 82, 0.38) 45%, rgba(13, 59, 82, 0.88) 100% ); } .sector-photo-tag { font-family: var(--ff-mono); font-size: clamp(0.55rem, 1.6vw, 0.66rem); letter-spacing: clamp(0.08em, 0.35vw, 0.14em); text-transform: uppercase; color: var(--white); padding: 6px clamp(10px, 1.1vw, 13px); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sector-photo-rise 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .sector-photo-title { font-family: var(--ff-disp); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--white); text-shadow: 0 2px 20px rgba(13, 59, 82, 0.5); animation: sector-photo-rise 1.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .sector-photo::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 2; height: 3px; background: linear-gradient(90deg, var(--cid-blue), var(--signal) 55%, var(--cyan)); transform-origin: left; animation: sector-photo-rule 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes sector-photo-settle { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } } @keyframes sector-photo-rise { 0%, 32% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes sector-photo-rule { 0%, 40% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; margin-top: 20px; } .split-visual { aspect-ratio: 4 / 3; border-radius: 18px; position: relative; overflow: hidden; background: var(--ink); border: 1px solid var(--line-strong); } .split-visual .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; } .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 10px; } .stat { background: var(--white); padding: 34px 28px; position: relative; } .stat::before { content: ""; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 2px; background: var(--cid-blue); opacity: 0.35; box-shadow: 0 12px 0 var(--signal); } .stat .num { display: flex; align-items: baseline; font-family: var(--ff-disp); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--cid-blue); letter-spacing: -0.03em; line-height: 1; } .stat .num small { font-size: 0.5em; color: var(--signal); margin-left: 0.4em; } .stat .num-value { font-variant-numeric: tabular-nums; } .stat .cap { font-size: 0.9rem; color: var(--text-body); margin-top: 10px; } .page-sections { display: flex; flex-direction: column; gap: 40px; margin-top: 10px; } .page-section { scroll-margin-top: calc(var(--topbar-h) + 24px); } .page-section + .page-section { border-top: 1px solid var(--line); padding-top: 40px; } .page-section:focus { outline: none; } .page-section-title { font-family: var(--ff-disp); font-weight: 700; font-size: 1.38rem; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; } .page-section-title::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--cid-blue), var(--signal)); transform-origin: left; } .page-section:target .page-section-title { color: var(--signal-deep); } .page-section-body { color: var(--text-body); font-size: 1rem; line-height: 1.7; } .page-section-body p + p { margin-top: 16px; } .page-sections.is-illustrated { max-width: 1060px; margin-left: auto; margin-right: auto; gap: 52px; } .page-sections.is-illustrated { margin-top: clamp(28px, 3.4vw, 44px); } .page-section.has-figure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); align-items: center; column-gap: clamp(26px, 3.4vw, 46px); } .page-section.has-figure.is-flipped > .page-figure { grid-column: 2; grid-row: 1; } .page-section.has-figure.is-flipped > .page-section-text { grid-column: 1; grid-row: 1; } .page-figure { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); border: 1px solid var(--card-line); background: var(--panel-2); box-shadow: var(--shadow-card); } .page-figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .page-figure:hover img { transform: scale(1.04); } .page-figure.is-contained { aspect-ratio: auto; border: 0; box-shadow: none; background: transparent; } .page-figure.is-contained img { height: auto; object-fit: fill; } .page-figure.is-contained:hover img { transform: none; } .page-section.is-plain > .page-section-text { max-width: var(--maxw-text); } .service-steps { grid-column: 1 / -1; margin-top: clamp(26px, 3vw, 38px); } .service-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .service-step { display: flex; scroll-margin-top: calc(var(--topbar-h) + 24px); } .service-step:focus { outline: none; } .service-step-card { position: relative; overflow: hidden; flex: 1; padding: clamp(18px, 2vw, 24px); border-radius: var(--r); border: 1px solid var(--card-line); background: var(--white); transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out; } .service-step-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 34px; height: 3px; background: linear-gradient(90deg, var(--cid-blue), var(--signal)); transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .service-step-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-card); } .service-step-card:hover::before { width: 100%; } .service-step:target .service-step-card { border-color: var(--signal); } .service-step:target .service-step-card::before { width: 100%; } .service-step-title { display: block; margin-top: 4px; font-family: var(--ff-disp); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; } .service-step-body { color: var(--text-body); font-size: 0.94rem; line-height: 1.65; } .js-reveal .page-section > .page-figure, .js-reveal .page-section > .page-section-text, .js-reveal .page-section .service-step { opacity: 0; transform: translateY(16px); } .js-reveal .page-section .page-section-title::after { transform: scaleX(0); } .js-reveal .page-section.is-revealed > .page-figure, .js-reveal .page-section.is-revealed > .page-section-text, .js-reveal .page-section.is-revealed .service-step { opacity: 1; transform: none; transition: opacity 0.55s ease-out, transform 0.55s ease-out; } .js-reveal .page-section.is-revealed .page-section-title::after { transform: scaleX(1); transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s; } .js-reveal .page-section.is-revealed > .page-section-text { transition-delay: 0.1s; } .js-reveal .page-section.is-revealed .service-step:nth-child(1) { transition-delay: 0.16s; } .js-reveal .page-section.is-revealed .service-step:nth-child(2) { transition-delay: 0.25s; } .js-reveal .page-section.is-revealed .service-step:nth-child(3) { transition-delay: 0.34s; } @media (prefers-reduced-motion: reduce) { .js-reveal .page-section.is-revealed > .page-figure, .js-reveal .page-section.is-revealed > .page-section-text, .js-reveal .page-section.is-revealed .service-step { transition-duration: 0.55s !important; } .js-reveal .page-section.is-revealed .page-section-title::after { transition-duration: 0.7s !important; } } @media (max-width: 860px) { .page-section.has-figure { grid-template-columns: 1fr; row-gap: 22px; } .page-section.has-figure.is-flipped > .page-figure, .page-section.has-figure.is-flipped > .page-section-text { grid-column: auto; grid-row: auto; } } .faq-list { max-width: 860px; } .faq { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--ff-disp); font-weight: 700; font-size: 1.12rem; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq .plus { color: var(--cid-blue); font-size: 1.3rem; transition: 0.3s; flex: none; } .faq[open] .plus { transform: rotate(45deg); } .faq .fa { padding: 0 26px 24px; color: var(--text-body); font-size: 0.98rem; line-height: 1.6; } .faq .fa-more { margin-top: 14px; } .faq .fa-more a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--cid-blue); } .faq .fa-more svg { transition: transform 0.18s; } .faq .fa-more a:hover svg { transform: translateX(3px); } .faq .fa-files { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .faq .fa-files a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--card-line); border-radius: var(--r); color: var(--ink); font-weight: 600; transition: border-color 0.18s, background 0.18s; } .faq .fa-files a:hover { border-color: var(--cid-blue); background: var(--paper); } .faq .fa-files svg { flex: none; color: var(--cid-blue); } .faq .fa-file-meta { margin-left: auto; padding-left: 12px; color: var(--fog); font-weight: 400; font-size: 0.86rem; white-space: nowrap; } .faq-empty { max-width: 860px; color: var(--fog); } .sus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 10px; } .sus { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } .sus:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-card); } .sus h4 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.2rem; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .sus p { color: var(--text-body); font-size: 0.94rem; } .prose p { margin-bottom: 18px; color: var(--text-body); font-size: 1.02rem; } .prose h3 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.45rem; margin: 34px 0 14px; letter-spacing: -0.02em; color: var(--ink); } .prose h3:first-child { margin-top: 0; } .prose ul, .prose ol { margin: 0 0 18px 20px; color: var(--text-body); } .prose li { margin-bottom: 8px; } .prose a.link, .prose a { color: var(--cid-blue); border-bottom: 1px solid var(--cid-blue); font-weight: 600; word-break: break-word; } .prose img { border-radius: var(--r); margin: 8px 0 20px; } .prose blockquote { border-left: 3px solid var(--signal); padding-left: 18px; margin: 0 0 18px; color: var(--fog); font-style: italic; } .contact-head { text-align: center; margin-bottom: 56px; } .contact-head h1 { font-family: var(--ff-disp); font-size: clamp(2.05rem, 3.8vw, 2.7rem); font-weight: 800; color: var(--ink); margin-bottom: 14px; } .contact-head p { font-size: 1rem; color: var(--muted); max-width: 62ch; margin: 0 auto; } .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: start; } .contact-card { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); padding: 32px; } .contact-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--info-soft); color: var(--cid-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .contact-card h2 { font-family: var(--ff-disp); font-size: 1.27rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; } .contact-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; margin-bottom: 6px; } .contact-mails { margin-top: 6px; } .contact-card .field input, .contact-card .field textarea { background: var(--white); } .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 7px; color: var(--text-body); } .field input, .field textarea, .field select { width: 100%; padding: 13px 15px; border: 1px solid var(--field-line); border-radius: 10px; font-family: var(--ff-body); font-size: 0.95rem; background: var(--paper); transition: 0.2s; color: var(--text-dark); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cid-blue); background: var(--white); } .field textarea { resize: vertical; min-height: 110px; } .field .hint { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); font-weight: 400; } .field input.input-validation-error, .field textarea.input-validation-error, .field select.input-validation-error { border-color: var(--danger); background: var(--danger-soft); } .field-validation-error, .validation-summary-errors { color: var(--danger); font-size: 0.82rem; display: block; margin-top: 6px; } .validation-summary-errors ul { margin: 0; padding-left: 18px; } .validation-summary-valid { display: none; } .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .alert { border-radius: var(--r-sm); padding: 14px 18px; font-size: 0.92rem; margin-bottom: 18px; border: 1px solid transparent; display: flex; gap: 10px; align-items: flex-start; } .alert-success { background: var(--success-soft); border-color: rgba(13, 160, 82, 0.35); color: var(--signal-deep); } .alert-danger { background: var(--danger-soft); border-color: rgba(192, 57, 43, 0.35); color: var(--danger); } .alert-warning { background: var(--warning-soft); border-color: rgba(183, 121, 31, 0.35); color: var(--warning); } .alert-info { background: var(--info-soft); border-color: rgba(27, 79, 216, 0.3); color: var(--cid-blue); } .cta-band { background: linear-gradient(120deg, var(--ink), #14647f 60%, #1c7a63); color: var(--white); border-radius: var(--r-lg); padding: 56px clamp(28px, 5vw, 64px); position: relative; overflow: hidden; margin-top: 20px; } .cta-band .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 100% at 100% 0, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 0, #000, transparent 70%); } .cta-band h3 { font-family: var(--ff-disp); font-weight: 800; font-size: clamp(1.72rem, 3.4vw, 2.55rem); letter-spacing: -0.03em; margin-bottom: 16px; position: relative; max-width: 20ch; color: var(--white); } .cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 52ch; margin-bottom: 28px; position: relative; } .cta-band .btn-primary { background: var(--white); color: var(--ink); } .cta-band .btn-primary:hover { background: var(--signal); color: var(--white); } .cta-band .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.4); } .cta-band .btn-ghost:hover { border-color: var(--white); color: var(--white); } .cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; position: relative; } .cta-band.on-panel { background: var(--panel); color: var(--text-dark); } .cta-band.on-panel h3 { color: var(--ink); } .cta-band.on-panel p { color: var(--text-body); } .cta-band.on-panel .grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); } .cta-band.on-panel .btn-primary { background: var(--cid-blue); color: var(--white); } .cta-band.on-panel .btn-primary:hover { background: var(--ink); } .cta-band.on-panel .btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--ink); border-color: var(--line-strong); } .cta-band.on-panel .btn-ghost:hover { border-color: var(--cid-blue); color: var(--cid-blue); } .cta-band.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(255px, 340px); gap: clamp(28px, 4vw, 56px); align-items: center; } .cta-band-main { position: relative; } .cta-band-main > p:last-child { margin-bottom: 0; } .cta-mailbox { position: relative; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; } .cta-mailbox-label { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-family: var(--ff-disp); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); } .mail-row { display: flex; align-items: center; gap: 10px; } .mail-row + .mail-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .mail-link { flex: 1; min-width: 0; font-family: var(--ff-body); font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; word-break: break-word; transition: color 0.2s, text-decoration-color 0.2s; } .mail-link:hover, .mail-link:focus-visible { color: var(--cid-blue); text-decoration-color: currentColor; } .mail-copy { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fog); cursor: pointer; transition: 0.2s; } .mail-copy:hover, .mail-copy:focus-visible { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.9); color: var(--cid-blue); } .mail-copy-idle, .mail-copy-done { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 0.2s, transform 0.2s; } .mail-copy-done { opacity: 0; transform: scale(0.6); } .mail-copy.is-copied { border-color: var(--signal-deep); background: var(--success-soft); color: var(--signal-deep); } .mail-copy.is-copied .mail-copy-idle { opacity: 0; transform: scale(0.6); } .mail-copy.is-copied .mail-copy-done { opacity: 1; transform: scale(1); } .mail-tip { position: absolute; bottom: calc(100% + 8px); right: 0; padding: 5px 9px; border-radius: var(--r-sm); background: var(--ink); color: var(--white); font-family: var(--ff-body); font-size: 0.74rem; font-weight: 600; line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; } .mail-tip::after { content: ''; position: absolute; top: 100%; right: 11px; border: 5px solid transparent; border-top-color: var(--ink); } .mail-copy.is-copied .mail-tip { opacity: 1; transform: translateY(0); } .doc-list { list-style: none; } .doc-list li { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.55; color: var(--text-body); } .doc-list li:first-child { padding-top: 0; } .doc-list li:last-child { padding-bottom: 0; border-bottom: none; } .doc-list a { color: inherit; transition: color 0.2s; } .doc-list a:hover, .doc-list a:focus-visible { color: var(--cid-blue); text-decoration: underline; text-underline-offset: 3px; } .doc-list a svg { width: 14px; height: 14px; margin-left: 8px; vertical-align: -1px; opacity: 0.5; transition: opacity 0.2s; } .doc-list a:hover svg, .doc-list a:focus-visible svg { opacity: 1; } .doc-source { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; vertical-align: 1px; } .doc-list li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.6em; background: var(--cid-blue); } .empty-state { text-align: center; padding: 64px 30px; } .empty-state h4 { font-family: var(--ff-disp); font-weight: 600; font-size: 1.38rem; margin-bottom: 10px; color: var(--ink); } .empty-state p { color: #576870; max-width: 48ch; margin: 0 auto; } .request-id { font-size: 0.88rem; color: var(--text-body); } .request-id code { font-family: var(--ff-mono); font-size: 0.82rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; word-break: break-all; } .field-consent { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; } .field-consent input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin-top: 2px; padding: 0; accent-color: var(--cid-blue); cursor: pointer; } .field-consent-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .field-consent label { margin-bottom: 0; font-size: 0.88rem; font-weight: 500; line-height: 1.5; cursor: pointer; } .consent-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--cid-blue); } .consent-link:hover { text-decoration: underline; } .field-consent .field-validation-error { grid-column: 2; margin-top: 0; } .field-consent input.input-validation-error { outline: 2px solid var(--danger); outline-offset: 2px; } .legal-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 30px 32px; margin-bottom: 28px; background: var(--panel); border: 1px solid var(--card-line); border-radius: var(--r); } .legal-hero-ministry { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); margin-bottom: 8px; } .legal-hero h1 { font-family: var(--ff-disp); font-size: 1.85rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; } .legal-hero-platform { font-size: 0.95rem; color: var(--text-body); max-width: 52ch; } .legal-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .legal-language-notice { padding: 12px 18px; margin-bottom: 24px; font-size: 0.88rem; color: var(--text-body); background: var(--info-soft); border-left: 3px solid var(--cid-blue); border-radius: var(--r-sm); } .legal-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; } .legal-toc { position: sticky; top: calc(var(--topbar-h) + 18px); padding: 22px 24px; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); } .legal-toc-title { font-family: var(--ff-disp); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); margin-bottom: 12px; } .legal-toc-list { list-style: none; counter-reset: legal-toc; margin: 0; padding: 0; } .legal-toc-list li { counter-increment: legal-toc; } .legal-toc-list a { display: block; padding: 8px 10px 8px 34px; position: relative; font-size: 0.89rem; line-height: 1.45; color: var(--text-body); border-radius: var(--r-sm); border-left: 2px solid transparent; } .legal-toc-list a::before { content: counter(legal-toc) "."; position: absolute; left: 10px; font-family: var(--ff-mono); font-size: 0.78rem; color: var(--muted); } .legal-toc-list a:hover { background: var(--paper); color: var(--ink); } .legal-toc-list a.is-active { background: var(--info-soft); border-left-color: var(--cid-blue); color: var(--ink); font-weight: 600; } .legal-body { padding: 36px 40px; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); } .legal-section + .legal-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); } .legal-section { scroll-margin-top: calc(var(--topbar-h) + 18px); } .legal-section h2 { font-family: var(--ff-disp); font-size: 1.18rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; } .legal-section p { font-size: 0.95rem; line-height: 1.75; color: var(--text-body); max-width: var(--maxw-text); } .legal-section p + p { margin-top: 14px; } .legal-section em { font-style: normal; color: var(--text-dark); background: var(--paper); border-radius: 4px; padding: 1px 5px; } .legal-list { list-style: none; margin: 0; padding: 0; max-width: var(--maxw-text); } .legal-list li { position: relative; padding-left: 20px; font-size: 0.95rem; line-height: 1.7; color: var(--text-body); } .legal-list li + li { margin-top: 12px; } .legal-list li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); } .legal-list strong { color: var(--text-dark); font-weight: 700; } .legal-contact { list-style: none; margin: 0; padding: 20px 22px; background: var(--paper); border: 1px solid var(--card-line); border-radius: var(--r-sm); } .legal-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.6; color: var(--text-body); } .legal-contact li + li { margin-top: 12px; } .legal-contact-icon { flex: none; margin-top: 2px; color: var(--cyan); } .legal-contact a { color: var(--cid-blue); } .legal-contact a:hover { text-decoration: underline; } @media print { .topbar, .drawer, .drawer-overlay, .site-footer, .skip-link, .legal-toc, .legal-hero-actions { display: none !important; } .legal-layout { grid-template-columns: 1fr; } .legal-hero, .legal-body, .legal-contact { border: 0; padding: 0; background: none; } .legal-section + .legal-section { break-inside: avoid; } } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-36 { margin-top: 36px; } .mt-52 { margin-top: 52px; } .mt-56 { margin-top: 56px; } .mt-64 { margin-top: 64px; } .mb-24 { margin-bottom: 24px; } .mb-26 { margin-bottom: 26px; } .captcha-challenge { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; } .captcha-challenge img { display: block; border: 1px solid var(--field-line); border-radius: 10px; background: var(--paper); max-width: 100%; } .captcha-actions { display: flex; gap: 6px; } .captcha-action { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--muted); border: 1px solid var(--field-line); border-radius: 8px; background: var(--paper); transition: 0.2s; } .captcha-action:hover, .captcha-action:focus-visible { color: var(--cid-blue); border-color: var(--cid-blue); background: var(--white); } .field-captcha input[type='text'] { max-width: 220px; font-family: var(--ff-mono); letter-spacing: 0.18em; } .cookie-notice { position: fixed; left: 50%; bottom: 18px; z-index: 150; width: min(780px, calc(100% - 32px)); display: flex; align-items: center; gap: 20px; padding: 16px 20px; background: var(--navy); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-lg); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5); opacity: 0; transform: translate(-50%, 14px); transition: opacity 0.28s, transform 0.28s; } .cookie-notice[hidden] { display: none; } .cookie-notice.is-visible { opacity: 1; transform: translate(-50%, 0); } .cookie-notice :focus-visible { outline-color: var(--white); } .cookie-notice-text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); } .cookie-notice-text a { color: var(--white); text-decoration: underline; } .cookie-notice-dismiss { flex: 0 0 auto; white-space: nowrap; background: var(--white); color: var(--navy); } .cookie-notice-dismiss:hover { background: var(--paper); transform: translateY(-2px); }
/* css/home.css */
 .hero { position: relative; min-height: 100vh; background: var(--paper); color: var(--text-dark); display: flex; align-items: center; overflow: hidden; padding: 120px 0 190px; } .hero-photo { position: absolute; inset: 0; background-image: url("../img/pages/home-hero.jpg"); background-size: cover; background-position: center 60%; filter: saturate(1.16) contrast(1.05); } .hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 62% 52% at 50% 44%, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.48) 45%, transparent 78% ), linear-gradient( 180deg, rgba(243, 249, 251, 0.90) 0%, rgba(243, 249, 251, 0.58) 24%, rgba(232, 242, 246, 0.38) 54%, rgba(243, 249, 251, 0.88) 88%, var(--paper) 100% ); } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 10%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 10%, transparent 78%); opacity: 0.42; } .hero-glow { position: absolute; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 160, 82, 0.20), transparent 62%); bottom: -320px; left: -260px; filter: blur(8px); pointer-events: none; top: auto; right: auto; } .hero-glow.two { background: radial-gradient(circle, rgba(14, 147, 194, 0.19), transparent 62%); top: -280px; right: -200px; left: auto; bottom: auto; } .hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero-code { position: absolute; bottom: 104px; left: clamp(16px, 4vw, 40px); z-index: 3; font-family: var(--ff-mono); font-size: 0.68rem; color: var(--fog); letter-spacing: 0.04em; line-height: 2; display: none; } @media (min-width: 1100px) { .hero-code { display: block; } } .hero-code b { color: var(--cid-blue); } .hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); position: relative; z-index: 2; width: 100%; text-align: center; } .hero h1 { font-family: var(--ff-disp); font-weight: 800; font-size: clamp(2.3rem, 5.8vw, 4.9rem); line-height: 1.03; letter-spacing: -0.03em; max-width: 15ch; margin-bottom: 26px; color: var(--ink); } .hero h1 .g { background: linear-gradient(100deg, var(--signal), var(--cyan)); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-top: 0.18em; padding-bottom: 0.24em; margin-top: -0.18em; margin-bottom: -0.24em; } .hero h1.hero-motto { display: grid; max-width: 19ch; margin: 0 auto 18px; perspective: 900px; } .motto { grid-area: 1 / 1; } .motto:nth-child(n + 2) { visibility: hidden; } .motto-nav { display: none; justify-content: center; gap: 9px; margin-bottom: 30px; } .js-motto .motto-nav { display: flex; } .js-motto .motto { visibility: hidden; } .js-motto .motto.is-in, .js-motto .motto.is-out { visibility: visible; } .motto-unit { display: inline-block; transform-origin: 50% 100%; } .js-motto .motto-unit { --motto-delay: calc(var(--i, 0) * 90ms); opacity: 0; transform: translateY(0.42em) rotateX(-28deg) scale(0.97); filter: blur(7px); } .js-motto .motto.is-in .motto-unit { opacity: 1; transform: none; filter: blur(0); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--motto-delay), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--motto-delay), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--motto-delay); } .js-motto .motto.is-in .g.motto-unit { background-position: 0 0; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--motto-delay), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--motto-delay), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--motto-delay), background-position 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--motto-delay) + 300ms); } .js-motto .motto.is-out .motto-unit { --motto-delay: calc(var(--i, 0) * 45ms); opacity: 0; transform: translateY(-0.34em) scale(0.98); filter: blur(6px); transition: opacity 0.42s ease var(--motto-delay), transform 0.42s ease var(--motto-delay), filter 0.42s ease var(--motto-delay); } .motto-tab { border: 0; background: none; padding: 9px 0; cursor: pointer; display: block; } .motto-tab-track { display: block; width: 46px; height: 3px; border-radius: 99px; background: rgba(13, 59, 82, 0.16); overflow: hidden; transition: background 0.25s; } .motto-tab:hover .motto-tab-track { background: rgba(13, 59, 82, 0.28); } .motto-tab-fill { display: block; height: 100%; border-radius: inherit; background: var(--cid-blue); transform: scaleX(0); transform-origin: left; } .motto-tab.is-active .motto-tab-fill { animation: motto-fill var(--motto-hold, 5200ms) linear forwards; } .is-motto-paused .motto-tab.is-active .motto-tab-fill { animation-play-state: paused; } @keyframes motto-fill { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .js-motto .motto.is-in .motto-unit { transition-duration: 0.8s !important; } .js-motto .motto.is-in .g.motto-unit { transition-duration: 0.8s, 0.8s, 0.8s, 1.1s !important; } .js-motto .motto.is-out .motto-unit { transition-duration: 0.42s !important; } .motto-tab.is-active .motto-tab-fill { animation-duration: var(--motto-hold, 5200ms) !important; } } .hero .lead { font-size: clamp(1rem, 1.5vw, 1.16rem); color: var(--text-dark); max-width: 98ch; margin: 0 auto 38px; font-weight: 400; } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .hero-video { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 6vh 5vw; background: rgba(9, 30, 42, 0.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: hero-video-fade 0.2s both; } @keyframes hero-video-fade { from { opacity: 0; } to { opacity: 1; } } .hero-video video { max-width: 100%; max-height: 82vh; border-radius: var(--r); background: #06161f; box-shadow: 0 36px 80px -28px rgba(0, 0, 0, 0.75); opacity: 0; transform-origin: center; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.26s ease-out; } .hero-video.is-open video { opacity: 1; } .hero-video-skip { position: absolute; top: clamp(14px, 3vh, 26px); right: clamp(14px, 3vw, 26px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--white); font-family: var(--ff-disp); font-size: 0.88rem; font-weight: 700; cursor: pointer; opacity: 0; transition: background 0.18s, border-color 0.18s, opacity 0.3s ease-out 0.34s; } .hero-video.is-open .hero-video-skip { opacity: 1; } .hero-video-skip:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.5); } .hero-video.is-leaving { background: rgb(9, 30, 42); transition: background 0.22s ease-out; } .hero-video.is-leaving video { opacity: 0; transform: scale(0.985); transition: opacity 0.2s ease-in, transform 0.2s ease-in; } .hero-video.is-leaving .hero-video-skip { opacity: 0; transition: opacity 0.12s ease-in; } body.hero-video-open { overflow: hidden; } .hero-stats { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; padding: 0 clamp(16px, 4vw, 40px); } .hero-stats .stat-row { max-width: var(--maxw); margin: 0 auto; border-radius: 18px 18px 0 0; border-bottom: none; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 -10px 40px -26px rgba(13, 59, 82, 0.5); } .hero-stats .stat { background: rgba(255, 255, 255, 0.6); padding: 24px 24px 26px; text-align: center; } .hero-stats .stat::before { display: none; } .hero-stats .stat .num { justify-content: center; font-size: clamp(1.5rem, 2.4vw, 2rem); } .home-priorities { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.54) 8%, rgba(255, 255, 255, 0.30) 20%, rgba(243, 249, 251, 0.40) 46%, rgba(230, 241, 245, 0.6) 82%, var(--paper-2) 100%), url("../img/pages/home-impact.jpg") center / cover no-repeat; padding: clamp(34px, 4vw, 52px) 0 clamp(24px, 3vw, 38px); } .home-priorities::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 44% at 6% 10%, rgba(13, 160, 82, 0.09), transparent 70%), radial-gradient(ellipse 52% 44% at 96% 66%, rgba(14, 147, 194, 0.08), transparent 72%), radial-gradient(ellipse 36% 32% at 64% 4%, rgba(27, 79, 216, 0.04), transparent 70%); animation: priority-drift 38s ease-in-out infinite; will-change: transform; } @keyframes priority-drift { 50% { transform: translate3d(-2.4%, 1.6%, 0) scale(1.05); } } .home-priorities::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(150px, 21vw, 280px); z-index: -1; pointer-events: none; background: url("../img/pages/home-impact-foliage-left.svg") left top / auto 100% no-repeat, url("../img/pages/home-impact-foliage-right.svg") right top / auto 88% no-repeat, url("../img/pages/home-impact-wave.svg") left top / 100% 100% no-repeat; } .impact { --ring: clamp(260px, 46vw, 580px); --node: calc(var(--ring) * 0.24); --orbit-r: calc(var(--ring) * 0.3675); --spin: 84s; position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .impact-heading { font-family: var(--ff-disp); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-align: center; margin: 0 0 clamp(24px, 4vw, 44px); } .impact-rig { position: relative; width: calc(var(--ring) * 0.91); height: calc(var(--ring) * 0.91); margin: 0 auto; } .impact-unit { position: absolute; top: 50%; left: 50%; width: var(--ring); height: var(--ring); transform: translate(-50%, -50%); } .impact-rotor { position: absolute; inset: 0; } .impact-orbit { --step: 60deg; position: absolute; inset: 0; animation: impact-spin var(--spin) linear infinite; } .impact-orbit.n-4 { --step: 90deg; } .impact-orbit.n-5 { --step: 72deg; } .impact-orbit.n-6 { --step: 60deg; } .impact-orbit.n-7 { --step: 51.4286deg; } .impact-orbit.n-8 { --step: 45deg; } .impact-gear { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(22, 112, 140, 0.6); pointer-events: none; } .impact-gear-body { fill: currentColor; fill-opacity: 0.68; fill-rule: evenodd; stroke: none; } .impact-gear-scale { fill: none; stroke: var(--white); stroke-width: 3; stroke-dasharray: 0.55 2.25; stroke-linecap: butt; opacity: 0.5; } .impact-node { --i: 0; position: absolute; top: 50%; left: 50%; width: var(--node); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform: translate(-50%, -50%) rotate(calc(var(--i) * var(--step))) translateY(calc(var(--orbit-r) * -1)) rotate(calc(var(--i) * var(--step) * -1)); } .impact-node:nth-of-type(1) { --i: 0; } .impact-node:nth-of-type(2) { --i: 1; } .impact-node:nth-of-type(3) { --i: 2; } .impact-node:nth-of-type(4) { --i: 3; } .impact-node:nth-of-type(5) { --i: 4; } .impact-node:nth-of-type(6) { --i: 5; } .impact-node:nth-of-type(7) { --i: 6; } .impact-node:nth-of-type(8) { --i: 7; } .impact-node-inner { display: block; animation: impact-spin-back var(--spin) linear infinite; } .impact-node-disc { width: var(--node); height: var(--node); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--node) * 0.045); padding: 0 10%; background: var(--white); border: 1px solid var(--card-line); box-shadow: var(--shadow-card); color: var(--signal-deep); transition: transform 0.25s ease-out, background 0.25s, border-color 0.25s, color 0.25s; } .impact-node-scene { width: calc(var(--node) * 0.34); height: calc(var(--node) * 0.34); } .impact-node-disc { --sc-ink: var(--ink-3); --sc-deep: var(--signal-deep); --sc-green: var(--signal); --sc-mid: var(--signal-mid); --sc-soft: var(--signal-soft); --sc-mark: var(--white); --sc-hole: var(--white); } .impact-node.is-active .impact-node-disc { --sc-ink: var(--white); --sc-deep: var(--signal-on-dark-1); --sc-green: var(--signal-on-dark-2); --sc-mid: var(--signal-on-dark-3); --sc-soft: rgba(255, 255, 255, 0.28); --sc-mark: var(--signal-deep); --sc-hole: var(--signal-deep); } .sc-ink { fill: var(--sc-ink); } .sc-deep { fill: var(--sc-deep); } .sc-green { fill: var(--sc-green); } .sc-mid { fill: var(--sc-mid); } .sc-soft { fill: var(--sc-soft); } .sc-mark { fill: var(--sc-mark); } .sc-hole { fill: var(--sc-hole); } .sc-cut { stroke: var(--sc-hole); stroke-width: 3.4; stroke-linejoin: round; paint-order: stroke; } .impact-node:hover .impact-node-disc { transform: translateY(-3px); border-color: var(--signal); } .impact-node:focus-visible { outline: none; } .impact-node:focus-visible .impact-node-disc { outline: 2px solid var(--cid-blue); outline-offset: 3px; } .impact-node.is-active .impact-node-disc { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--white); } .impact-node-label { font-family: var(--ff-disp); font-size: clamp(0.7rem, 1.1vw, 0.86rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.22; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--ink); } .impact-node.is-active .impact-node-label { color: var(--white); } .impact-core { position: absolute; top: 50%; left: 50%; width: calc(var(--ring) * 0.44); height: calc(var(--ring) * 0.44); transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(10px, 2vw, 20px); text-align: center; background: var(--white); border: 1px solid rgba(14, 147, 194, 0.34); box-shadow: 0 24px 60px -34px rgba(13, 59, 82, 0.45); transition: opacity 0.3s; } .impact-logo { width: calc(var(--ring) * 0.2); height: auto; display: block; } .impact.is-open .impact-rotor, .impact.is-open .impact-node-inner { animation-play-state: paused; } .impact-rig:has(.impact-node:focus-visible) .impact-rotor, .impact-rig:has(.impact-node:focus-visible) .impact-node-inner { animation-play-state: paused; } .impact.is-open .impact-core { opacity: 0.12; } @keyframes impact-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes impact-spin-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .impact-rotor, .impact-node-inner { animation: none; } } .impact-panels { display: grid; gap: 14px; max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; } .impact-panel { position: relative; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); padding: clamp(18px, 2.4vw, 26px); } .impact-panel-title { font-family: var(--ff-disp); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; } .impact-panel-body { color: var(--text-body); font-size: 0.94rem; line-height: 1.65; } .impact-panel-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 10px; margin-top: 14px; } .impact-panel-list a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-left: -8px; border-radius: var(--r-sm); color: var(--ink); font-size: 0.9rem; line-height: 1.3; transition: background 0.18s, color 0.18s; } .impact-panel-list a:hover { background: var(--signal-soft); color: var(--signal-deep); } .impact-panel-mark { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 1px solid var(--card-line); color: var(--signal-deep); } .impact-panel-mark svg { width: 17px; height: 17px; } .impact-panel-close, .impact-hint { display: none; } .js-impact .impact-hint { display: block; margin-top: clamp(18px, 2.4vw, 28px); text-align: center; font-size: 0.86rem; color: var(--fog); } .js-impact .impact-panels { position: absolute; inset: 0 0 auto 0; height: var(--ring); margin: 0; max-width: none; display: grid; place-items: center; pointer-events: none; } .js-impact .impact-panel { display: none; } .js-impact .impact-panel.is-open { display: block; width: min(92%, 440px); max-height: calc(var(--ring) * 0.94); overflow-y: auto; pointer-events: auto; box-shadow: var(--shadow-pop); animation: impact-panel-in 0.26s ease-out both; } .js-impact .impact-panel:focus { outline: none; } .js-impact .impact-panel-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--card-line); background: var(--white); color: var(--fog); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: 0.2s; } .js-impact .impact-panel-close:hover { color: var(--ink); border-color: var(--line-strong); } @keyframes impact-panel-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (max-width: 620px) { .impact-node-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .impact-node-scene { width: calc(var(--node) * 0.58); height: calc(var(--node) * 0.58); } } .home-updates { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 76px 0 84px; } .updates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: stretch; } .updates-col { display: flex; flex-direction: column; } .updates-events { --updates-accent: var(--events); --updates-accent-soft: var(--events-soft); --updates-accent-line: var(--events-line); } .updates-news { --updates-accent: var(--news); --updates-accent-soft: var(--news-soft); --updates-accent-line: var(--news-line); } .updates-head { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 2px solid var(--updates-accent-line); } .updates-mark { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--updates-accent-soft); color: var(--updates-accent); } .updates-head h2 { font-family: var(--ff-disp); font-weight: 800; font-size: clamp(1.6rem, 2.75vw, 2.15rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .update-list { flex: 1; display: grid; grid-auto-rows: min-content; align-content: start; gap: 18px; } .updates-grid.is-aligned .update-list { grid-auto-rows: minmax(0, 1fr); align-content: stretch; } .updates-news .news-card { border-radius: 16px; } .updates-news .news-card-cover { flex: none; aspect-ratio: 16 / 7; } .updates-news .news-card-body { min-height: 0; padding: 16px 18px 18px; } .updates-news .news-card-title { font-size: 1.05rem; } .updates-news .news-card-summary { -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.9rem; } .updates-all { display: flex; justify-content: flex-end; margin-top: 22px; } .updates-all a, .updates-all-pending { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-disp); font-size: 0.92rem; font-weight: 700; color: var(--updates-accent); transition: 0.18s; } .updates-all a:hover { gap: 12px; } .updates-all-pending { color: var(--muted); cursor: default; } @media (max-width: 1100px) { .impact { --ring: clamp(280px, 74vw, 560px); } }
/* css/news.css */
 .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } .news-filters { display: flex; gap: 8px; margin-bottom: 28px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; } .news-filter { flex: none; padding: 7px 15px; border: 1px solid var(--card-line); border-radius: 999px; background: var(--white); font-family: var(--ff-disp); font-weight: 600; font-size: 0.86rem; color: var(--text-body); white-space: nowrap; transition: 0.2s; } .news-filter:hover { border-color: var(--news-line); color: var(--news); } .news-filter.is-active { background: var(--news); border-color: var(--news); color: var(--white); } .news-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--card-line); border-radius: var(--r); overflow: hidden; color: inherit; transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.25s, box-shadow 0.25s; } .news-card:hover { transform: translateY(-3px); border-color: var(--news-line); box-shadow: var(--shadow-card); } .news-card:focus-visible { outline: 2px solid var(--cid-blue); outline-offset: 3px; } .news-card.is-featured { border-top: 3px solid var(--news); } .news-card-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--panel), var(--panel-2)); border-bottom: 1px solid var(--card-line); display: grid; place-items: center; } .news-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .news-card:hover .news-card-cover img { transform: scale(1.04); } .news-card-placeholder svg { width: 26px; height: 26px; stroke: var(--news); fill: none; opacity: 0.45; } .news-card-category { position: absolute; left: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: var(--white); border: 1px solid var(--news-line); font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--news); white-space: nowrap; } .news-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .news-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); } .news-card-location { display: inline-flex; align-items: center; gap: 5px; } .news-card-location svg { stroke: currentColor; fill: none; flex: none; } .news-card-title { font-family: var(--ff-disp); font-weight: 700; font-size: 1.16rem; line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 9px; transition: color 0.2s; } .news-card:hover .news-card-title { color: var(--news); } .news-card-summary { color: var(--text-body); font-size: 0.94rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card-more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-disp); font-weight: 700; font-size: 0.88rem; color: var(--news); } .news-card-more svg { stroke: currentColor; fill: none; transition: transform 0.25s; } .news-card:hover .news-card-more svg { transform: translateX(3px); } .badge-featured { font-family: var(--ff-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); background: var(--success-soft); border: 1px solid rgba(13, 160, 82, 0.3); border-radius: 100px; padding: 3px 10px; } .news-article { max-width: 760px; margin: 0 auto; } .news-article-head { margin-bottom: 34px; } .news-article-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .news-category-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--news-line); background: var(--news-soft); font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--news); transition: 0.2s; } .news-category-chip:hover, .news-category-chip:focus-visible { background: var(--news); color: var(--white); } .news-article h1 { font-family: var(--ff-disp); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(2.05rem, 4vw, 3.1rem); color: var(--ink); margin-bottom: 18px; } .news-article-lead { font-size: 1.14rem; line-height: 1.6; color: var(--text-body); margin-bottom: 20px; } .news-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-family: var(--ff-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); } .news-article-meta-item { display: inline-flex; align-items: center; gap: 6px; } .news-article-meta-item::before { content: "·"; margin-right: 8px; color: var(--line-strong); } .news-article-meta svg { stroke: currentColor; fill: none; flex: none; } .news-article-meta a { color: var(--cid-blue); display: inline-flex; align-items: center; gap: 5px; } .news-article-meta a:hover { text-decoration: underline; text-underline-offset: 3px; } .news-article-cover { margin: 0 0 38px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--card-line); background: var(--panel-2); aspect-ratio: 16 / 9; } .news-article-cover img { width: 100%; height: 100%; object-fit: cover; } .news-share { position: sticky; top: calc(var(--topbar-h) + 24px); display: flex; flex-direction: column; gap: 12px; } .news-share-label { font-family: var(--ff-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .news-share-buttons { display: flex; flex-direction: column; gap: 8px; } .news-share-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--card-line); border-radius: 50%; background: var(--white); color: var(--fog); cursor: pointer; transition: 0.2s; } .news-share-button:hover, .news-share-button:focus-visible { border-color: var(--news-line); background: var(--news-soft); color: var(--news); transform: translateY(-2px); } .news-share-copy-idle, .news-share-copy-done { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 0.2s, transform 0.2s; } .news-share-copy-done { opacity: 0; transform: scale(0.6); } .news-share-copy.is-copied { border-color: var(--signal-deep); background: var(--success-soft); color: var(--signal-deep); } .news-share-copy.is-copied .news-share-copy-idle { opacity: 0; transform: scale(0.6); } .news-share-copy.is-copied .news-share-copy-done { opacity: 1; transform: scale(1); } .news-share-button svg { flex: none; } .news-share-copy svg { stroke: currentColor; fill: none; } .news-gallery { max-width: 1000px; margin-top: 44px; } .news-gallery h2 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.3rem; color: var(--ink); margin-bottom: 18px; } .news-tags { max-width: 760px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .news-tags-label { font-family: var(--ff-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .news-tags ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .news-tags li { padding: 4px 12px; border-radius: 999px; background: var(--panel); font-size: 0.82rem; color: var(--text-body); } .news-tags li::before { content: "#"; margin-right: 3px; color: var(--muted); } .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-disp); font-weight: 600; font-size: 0.9rem; color: var(--cid-blue); margin-bottom: 26px; } .back-link svg { stroke: currentColor; fill: none; transition: transform 0.2s; } .back-link:hover svg { transform: translateX(-3px); } .attachments { max-width: 760px; margin-top: 44px; border-top: 1px solid var(--line); padding-top: 26px; } .attachments h2, .attachments h3 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.18rem; color: var(--ink); margin-bottom: 16px; } .attachment { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--card-line); border-radius: var(--r-sm); background: var(--white); margin-bottom: 10px; transition: 0.2s; } .attachment:hover { border-color: var(--cid-blue); } .attachment .file-icon { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: linear-gradient(135deg, rgba(27, 79, 216, 0.1), rgba(13, 160, 82, 0.12)); border: 1px solid rgba(27, 79, 216, 0.22); } .attachment .file-icon svg { width: 20px; height: 20px; stroke: var(--cid-blue); fill: none; } .attachment .file-name { font-family: var(--ff-disp); font-weight: 600; color: var(--ink); font-size: 0.96rem; } .attachment .file-size { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--muted); margin-left: auto; flex: none; } .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--ff-mono); font-size: 0.8rem; color: var(--text-body); background: var(--white); transition: 0.2s; } .pagination a:hover { border-color: var(--cid-blue); color: var(--cid-blue); } .pagination .current { background: var(--cid-blue); border-color: var(--cid-blue); color: var(--white); font-weight: 600; } .pagination .disabled { opacity: 0.4; } .announcement-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } .announcement { border: 1px solid var(--card-line); border-left: 4px solid var(--cid-blue); border-radius: var(--r-sm); background: var(--white); padding: 20px 24px; } .announcement.severity-important { border-left-color: var(--warning); } .announcement.severity-critical { border-left-color: var(--danger); } .announcement h4 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.14rem; color: var(--ink); margin-bottom: 6px; } .announcement p { color: var(--text-body); font-size: 0.94rem; }
/* css/events.css */
 .event-card, .events-page, .event-detail-page { --ev: var(--events); --ev-soft: var(--events-soft); --ev-line: var(--events-line); } .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .event-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--card-line); border-radius: 18px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; position: relative; animation: event-card-in 0.5s both; } .event-grid > .event-card:nth-child(1) { animation-delay: 0.02s; } .event-grid > .event-card:nth-child(2) { animation-delay: 0.08s; } .event-grid > .event-card:nth-child(3) { animation-delay: 0.14s; } .event-grid > .event-card:nth-child(4) { animation-delay: 0.2s; } .event-grid > .event-card:nth-child(5) { animation-delay: 0.26s; } .event-grid > .event-card:nth-child(n + 6) { animation-delay: 0.3s; } @keyframes event-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .event-card:hover { transform: translateY(-4px); border-color: var(--ev-line); box-shadow: var(--shadow-card); } .event-card.is-featured { border-top: 3px solid var(--ev); } .event-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--ev-soft), var(--ev-line)); border-bottom: 1px solid var(--card-line); } .event-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .event-card:hover .event-cover img { transform: scale(1.05); } .event-cover.is-empty { aspect-ratio: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; } .event-cover.is-empty .event-date-badge, .event-cover.is-empty .event-state { position: static; } .event-cover.is-empty .event-date-badge { display: flex; align-items: baseline; gap: 7px; min-width: 0; padding: 6px 12px; } .event-cover.is-empty .event-date-badge .day { font-size: 1.12rem; } .event-cover.is-empty .event-date-badge .month, .event-cover.is-empty .event-date-badge .year { margin-top: 0; } .event-cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ev); opacity: 0.45; background: radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.7), transparent 46%), linear-gradient(135deg, var(--ev-soft), var(--ev-line)); } .event-cover-fallback svg { stroke: currentColor; fill: none; } .event-date-badge { position: absolute; top: 14px; left: 14px; display: grid; justify-items: center; min-width: 62px; padding: 9px 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); box-shadow: 0 8px 20px -12px rgba(13, 59, 82, 0.5); line-height: 1; } .event-date-badge .day { font-family: var(--ff-disp); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); } .event-date-badge .month { margin-top: 3px; font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--ev); } .event-date-badge .year { margin-top: 2px; font-family: var(--ff-mono); font-size: 0.58rem; color: var(--muted); } .event-state { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--white); background: var(--ev); box-shadow: 0 8px 20px -12px rgba(13, 59, 82, 0.6); } .is-past .event-state { background: var(--fog); } .is-cancelled .event-state { background: var(--danger); } .event-card.is-past .event-cover img { filter: saturate(0.72); } .event-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .event-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); } .event-title { font-family: var(--ff-disp); font-weight: 700; font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 9px; } .event-title a { color: var(--ink); transition: color 0.18s; } .event-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .event-title a:hover { color: var(--ev); } .event-card.is-cancelled .event-title a { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; } .event-summary { font-size: 0.93rem; line-height: 1.55; color: var(--text-body); margin-bottom: 14px; } .event-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--card-line); } .event-more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-disp); font-size: 0.88rem; font-weight: 700; color: var(--ev); transition: gap 0.18s; } .event-more svg { stroke: currentColor; fill: none; transition: transform 0.18s; } .event-card:hover .event-more svg { transform: translateX(3px); } .event-scope { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 30px; border: 1px solid var(--card-line); border-radius: 999px; background: var(--white); } .event-scope a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; font-family: var(--ff-disp); font-size: 0.9rem; font-weight: 600; color: var(--text-body); transition: background 0.2s, color 0.2s; } .event-scope a svg { stroke: currentColor; fill: none; } .event-scope a:hover { color: var(--ev); } .event-scope a.is-active { background: var(--ev); color: var(--white); } .events-page .empty-state .event-more { margin-top: 16px; } .event-detail { margin-bottom: 60px; } .event-hero-media { position: relative; aspect-ratio: 21 / 9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--card-line); background: linear-gradient(135deg, var(--ev-soft), var(--ev-line)); margin-bottom: 26px; } .event-hero-media img { width: 100%; height: 100%; object-fit: contain; } .event-hero-media .event-state { top: 18px; right: 18px; padding: 7px 16px; font-size: 0.76rem; } .event-hero-text h1 { font-family: var(--ff-disp); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(2.05rem, 4vw, 3.1rem); color: var(--ink); margin-bottom: 16px; } .event-hero-text .lead { font-size: 1.1rem; line-height: 1.6; color: var(--text-body); } .event-when, .event-where { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--ev); font-family: var(--ff-disp); font-weight: 700; font-size: 1.02rem; } .event-where { margin-top: -4px; color: var(--text-body); font-weight: 600; font-size: 0.96rem; } .event-when svg, .event-where svg { flex: 0 0 auto; } .event-where svg { color: var(--ev); } .event-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 28px 0 0; padding: 16px 20px; border-radius: var(--r); border-left: 4px solid var(--danger); background: var(--danger-soft); color: var(--text-dark); } .event-notice strong { font-family: var(--ff-disp); color: var(--danger); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; } .event-layout { margin-top: 34px; } .event-main { min-width: 0; } .event-gallery { margin-top: 44px; } .event-gallery h2, .event-detail .attachments h2, .event-related h2 { font-family: var(--ff-disp); font-weight: 700; font-size: 1.34rem; color: var(--ink); margin-bottom: 18px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; list-style: none; } .gallery-grid a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; border: 1px solid var(--card-line); background: var(--panel); } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; } .gallery-grid a:hover img { transform: scale(1.06); } .gallery-grid a:focus-visible { outline: 2px solid var(--cid-blue); outline-offset: 2px; } .gallery-caption { position: absolute; inset: auto 0 0 0; padding: 22px 12px 10px; font-size: 0.8rem; line-height: 1.35; color: var(--white); background: linear-gradient(transparent, rgba(13, 43, 56, 0.85)); opacity: 0; transition: opacity 0.25s; } .gallery-grid a:hover .gallery-caption, .gallery-grid a:focus-visible .gallery-caption { opacity: 1; } .gallery-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 5vh 5vw; background: rgba(9, 32, 43, 0.92); animation: gallery-fade 0.2s both; } @keyframes gallery-fade { from { opacity: 0; } to { opacity: 1; } } .gallery-lightbox img { max-width: 100%; max-height: 78vh; border-radius: var(--r); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); animation: gallery-zoom 0.25s both; } @keyframes gallery-zoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } .gallery-lightbox figcaption { margin-top: 16px; max-width: 70ch; text-align: center; color: rgba(255, 255, 255, 0.86); font-size: 0.92rem; } .gallery-lightbox button { position: absolute; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--white); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background 0.18s; } .gallery-lightbox button:hover { background: rgba(255, 255, 255, 0.24); } .gallery-lightbox .lightbox-close { top: 20px; right: 20px; } .gallery-lightbox .lightbox-prev { left: 20px; } .gallery-lightbox .lightbox-next { right: 20px; } body.gallery-open { overflow: hidden; } .event-related { margin-top: 24px; padding-top: 40px; border-top: 1px solid var(--line); } .updates-events .event-card { border-radius: 16px; } .updates-events .event-cover { flex: none; aspect-ratio: 16 / 7; } .updates-events .event-cover.is-empty { aspect-ratio: auto; } .updates-events .event-body { min-height: 0; padding: 16px 18px 18px; } .updates-events .event-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 1.12rem; } .updates-events .event-card.is-cancelled .event-title a { text-decoration: none; } .updates-events .event-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 0.9rem; } .update-empty { flex: 1; display: grid; align-content: center; padding: 26px 22px; border: 1px dashed var(--card-line); border-radius: 16px; background: var(--white); color: var(--text-body); font-size: 0.93rem; } @media (max-width: 720px) { .event-grid { grid-template-columns: 1fr; } .event-hero-media { aspect-ratio: 16 / 9; } .event-actions { flex-direction: column; align-items: stretch; gap: 10px; } .event-scope { width: 100%; justify-content: center; } .event-scope a { flex: 1; justify-content: center; padding: 9px 12px; } .gallery-lightbox button { width: 40px; height: 40px; } .gallery-lightbox .lightbox-prev { left: 8px; } .gallery-lightbox .lightbox-next { right: 8px; } }
/* css/responsive.css */
 @media (max-width: 1240px) { .nav { display: none; } .menu-btn { display: flex; } } @media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: 34px; } .cta-band.has-aside { grid-template-columns: 1fr; gap: 32px; } .updates-grid { grid-template-columns: 1fr; gap: 48px; } .update-list { grid-auto-rows: auto; } .site-footer { padding-top: 40px; } .footer-top { flex-direction: column; } .footer-bottom { flex-direction: column; align-items: flex-start; } .footer-copyright { margin-left: 0; } .sector-photo, .page-cover { aspect-ratio: 16 / 9; } .news-share { position: static; flex-direction: row; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .news-share-buttons { flex-direction: row; } .news-share-button:hover, .news-share-button:focus-visible { transform: none; } } @media (max-width: 720px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .stat-row { grid-template-columns: 1fr 1fr; } .sus-grid, .contact-grid { grid-template-columns: 1fr; } .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } .legal-body { padding: 26px 22px; } .legal-hero { padding: 24px; } .page { padding: 100px 0 72px; } .page-head { margin-bottom: 40px; } .page-sections { gap: 32px; } .page-section + .page-section { padding-top: 32px; } .cta-band { padding: 40px 24px; } .home-updates { padding: 54px 0 62px; } .home-priorities { padding: 52px 0 56px; } .home-priorities::after { height: 128px; background: url("../img/pages/home-impact-foliage-left.svg") left top / auto 100% no-repeat, url("../img/pages/home-impact-wave.svg") left top / 100% 100% no-repeat; } .hero { min-height: auto; padding: 110px 0 0; flex-direction: column; align-items: stretch; } .hero-photo { opacity: 0.32; } .hero-photo::after { background: linear-gradient(180deg, rgba(243, 249, 251, 0.52), rgba(243, 249, 251, 0.8)); } .hero-inner { flex: none; position: relative; z-index: 3; } .hero-stats { position: relative; inset: auto; z-index: 4; padding: 0 clamp(16px, 4vw, 40px); margin-top: 36px; } .hero-stats .stat-row { border-radius: 16px; border-bottom: 1px solid var(--line); } .hero-code { display: none !important; } .hero h1 { font-size: clamp(2.1rem, 8vw, 3rem); } .btn { padding: 13px 22px; } .cookie-notice { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (max-width: 480px) { .stat-row { grid-template-columns: 1fr; } .card { --card-pad: 24px; } .contact-card { padding: 24px; } .sector-card .tag { position: static; display: block; margin-bottom: 12px; } .sector-photo { aspect-ratio: 4 / 3; } ul.footer-nav-list { columns: 1; } }