Repository navigation
Expand file tree
/
Copy pathstyles.css
More file actions
28 lines (27 loc) · 10.8 KB
/
Copy pathstyles.css
File metadata and controls
28 lines (27 loc) · 10.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root { color-scheme: dark; --ink:#07101f; --surface:#0d1830; --surface-2:#111f3e; --paper:#f6f2ea; --muted:#c2cddd; --line:rgba(216,228,255,.17); --blue:#71a7ff; --blue-strong:#3676e9; --gold:#f0bd71; --danger:#ffb4aa; --mono:'DM Mono',monospace; --sans:'Manrope',sans-serif; --serif:'Playfair Display',serif; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--ink); color:var(--paper); font-family:var(--sans); }
a { color:inherit; }
button,input { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #f7c66f; outline-offset:4px; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; transform:translateY(-160%); padding:10px 14px; background:#fff7e5; color:#081325; font-weight:800; transition:transform .18s var(--ease); }
.skip-link:focus { transform:translateY(0); }
.accesspath-shell { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 82% 5%,rgba(43,104,222,.22),transparent 24%),var(--ink); }
.app-header { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 5vw; border-bottom:1px solid var(--line); background:rgba(7,16,31,.72); backdrop-filter:blur(16px); }
.wordmark { display:flex; align-items:center; gap:9px; text-decoration:none; font-size:12px; letter-spacing:.01em; }.wordmark>span { display:grid; place-items:center; width:31px; height:31px; border:1px solid var(--gold); color:var(--gold); font:500 10px var(--mono); }.wordmark strong { text-transform:uppercase; }.wordmark em { color:#a9bad5; font-family:var(--serif); font-size:13px; }
.app-header nav { display:flex; gap:25px; align-items:center; }.app-header nav a { color:#b7c8e7; font:500 10px var(--mono); text-underline-offset:5px; }.app-header nav a:hover { color:white; }
.hero { min-height:430px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:60px; align-items:end; padding:92px 8vw 74px; position:relative; isolation:isolate; overflow:hidden; }.hero::before { content:''; position:absolute; z-index:-1; width:690px; aspect-ratio:1; right:-120px; top:-260px; border:1px solid rgba(136,183,255,.18); border-radius:50%; box-shadow:0 0 0 55px rgba(136,183,255,.04),0 0 0 110px rgba(136,183,255,.03); }.hero::after { content:''; position:absolute; z-index:-1; inset:0; opacity:.25; background-image:linear-gradient(rgba(151,188,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(151,188,255,.16) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,black,transparent 75%); }
.eyebrow { margin:0 0 18px; color:#a9c8ff; font:500 10px var(--mono); letter-spacing:.13em; }.hero h1,.workspace-heading h2,.request-form-section h2,.practice-notes h2 { margin:0; max-width:790px; font-size:clamp(46px,6vw,84px); line-height:.95; letter-spacing:-.06em; }.hero h1 em,.workspace-heading h2 em,.request-form-section h2 em,.practice-notes h2 em { color:#f2c678; font-family:var(--serif); font-weight:500; }.hero-copy { max-width:620px; margin:28px 0 0; color:var(--muted); font-size:16px; line-height:1.7; }.hero-note { align-self:center; padding:20px; border:1px solid rgba(174,203,255,.26); background:linear-gradient(145deg,rgba(37,67,130,.35),rgba(11,24,48,.7)); }.hero-note span { color:#d7e6ff; font:500 9px var(--mono); letter-spacing:.1em; }.hero-note p { color:#bac7db; margin:13px 0 0; font-size:12px; line-height:1.65; }
.workspace { padding:85px 6vw 96px; background:#f3f0ea; color:#08162f; }.workspace-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; max-width:1320px; margin:0 auto 42px; }.workspace-heading .eyebrow,.request-form-section .eyebrow,.practice-notes .eyebrow { color:#305eb6; }.workspace-heading h2 { font-size:clamp(38px,4.6vw,66px); }.workspace-heading>p { max-width:315px; margin:0 0 5px; color:#52617a; font-size:14px; line-height:1.65; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) 315px; max-width:1320px; margin:auto; border:1px solid #d4d9e3; background:#fffdf9; box-shadow:0 24px 55px rgba(11,24,48,.12); }.request-board { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#d9dee7; padding:1px; }.request-column { min-height:385px; padding:18px; background:#f2f4f8; }.request-column header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #d6dce7; padding-bottom:13px; }.request-column h3 { margin:0; color:#263653; font-size:12px; }.request-column header span { display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:999px; background:#dde5f4; color:#37528a; font:500 9px var(--mono); }.request-column ul { list-style:none; padding:0; margin:14px 0; display:grid; gap:10px; }.request-card { width:100%; padding:13px; border:1px solid #d9e0eb; background:white; text-align:left; color:#1f2e48; box-shadow:0 2px 4px rgba(15,33,70,.05); transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease); }.request-card:hover,.request-card.selected { border-color:#6d9bf0; transform:translateY(-2px); box-shadow:0 8px 17px rgba(38,79,157,.13); }.request-card strong,.request-card small { display:block; }.request-card strong { margin:9px 0 5px; font-size:12px; }.request-card small { color:#65728a; font-size:10px; line-height:1.4; }.priority { display:inline-flex; padding:3px 5px; color:#49617f; border:1px solid #dce2ec; font:500 8px var(--mono); text-transform:uppercase; }.priority.high { color:#885129; border-color:#e7c196; background:#fff3df; }
.request-detail { padding:28px 24px; background:#111f3e; color:#ecf2ff; }.request-detail .eyebrow { color:#8db5ff; }.request-detail h3 { margin:0; font-size:28px; line-height:1.08; letter-spacing:-.045em; }.request-detail dl { margin:31px 0 22px; border-top:1px solid rgba(221,234,255,.17); }.request-detail dl>div { display:grid; grid-template-columns:1fr auto; gap:14px; border-bottom:1px solid rgba(221,234,255,.17); padding:12px 0; }.request-detail dt { color:#aab9d0; font:500 9px var(--mono); text-transform:uppercase; }.request-detail dd { margin:0; color:white; font-size:11px; text-align:right; }.detail-copy { color:#b6c5db; font-size:11px; line-height:1.65; }.primary-action { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:10px 14px; border:0; background:#e7efff; color:#10244b; font-size:11px; font-weight:800; transition:transform .16s var(--ease),background .16s var(--ease); }.primary-action:hover { background:white; transform:translateY(-1px); }.primary-action:active { transform:scale(.98); }.request-detail .primary-action { width:100%; margin-top:15px; }.status-message { max-width:1320px; min-height:24px; margin:17px auto 0; color:#315a9c; font:500 10px var(--mono); }
.request-form-section { display:grid; grid-template-columns:1fr minmax(330px,.75fr); gap:90px; align-items:start; padding:100px 9vw; background:linear-gradient(125deg,#b8cef9,#d9e5ff); color:#0e2348; }.request-form-section h2 { font-size:clamp(39px,4.3vw,60px); max-width:550px; }.request-form-section>div>p:last-child { max-width:540px; color:#385273; font-size:14px; line-height:1.7; }.request-form-section form { padding:27px; border:1px solid rgba(36,80,152,.32); background:rgba(249,252,255,.64); box-shadow:0 20px 38px rgba(33,70,137,.12); }.request-form-section label { display:block; color:#183766; font-size:12px; font-weight:800; }.request-form-section input { width:100%; min-height:47px; margin:9px 0 7px; padding:10px 11px; border:1px solid #8eabd9; border-radius:0; color:#0d244e; background:#fff; }.request-form-section input[aria-invalid="true"] { border:2px solid #af442f; background:#fff8f6; }.help-text { color:#4b668d; font-size:11px; line-height:1.5; }.error-text { padding:8px 10px; border-left:3px solid #a73f2c; color:#782d21; background:#fff1ee; font-size:11px; line-height:1.45; }.request-form-section .primary-action { margin-top:11px; background:#173c7d; color:white; }.request-form-section .primary-action:hover { background:#0e2e67; }
.practice-notes { padding:105px 7vw; background:radial-gradient(circle at 85% 20%,rgba(68,132,244,.22),transparent 25%),#081326; }.practice-notes>div:first-child { max-width:850px; }.practice-notes h2 { font-size:clamp(39px,4.5vw,67px); }.practice-grid { max-width:1320px; display:grid; grid-template-columns:repeat(3,1fr); margin:52px auto 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }.practice-grid article { min-height:202px; padding:23px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(15,32,66,.24); transition:background .2s var(--ease); }.practice-grid article:hover { background:rgba(35,69,136,.39); }.practice-grid span { color:#89b4ff; font:500 10px var(--mono); }.practice-grid h3 { margin:29px 0 9px; font-size:15px; }.practice-grid p { margin:0; color:#b8c7dd; font-size:12px; line-height:1.65; }.practice-grid code { color:#d9e8ff; font-family:var(--mono); font-size:.9em; } footer { display:flex; justify-content:space-between; gap:20px; padding:20px 5vw; border-top:1px solid var(--line); background:#07101f; color:#8da0bf; font:500 9px var(--mono); letter-spacing:.06em; }
@media (max-width:900px) { .app-header { padding:0 20px; }.app-header nav { gap:13px; }.wordmark em { display:none; }.hero { grid-template-columns:1fr; gap:25px; padding:75px 24px 56px; }.hero-note { max-width:500px; }.workspace { padding:68px 20px; }.workspace-heading { display:block; }.workspace-heading>p { margin-top:20px; }.workspace-grid { grid-template-columns:1fr; }.request-detail { border-top:1px solid #263c68; }.request-form-section { grid-template-columns:1fr; gap:38px; padding:75px 24px; }.practice-notes { padding:78px 24px; }.practice-grid { grid-template-columns:1fr 1fr; } footer { flex-direction:column; padding:18px 20px; } }
@media (max-width:620px) { .app-header nav a:not(:last-child) { display:none; }.hero h1 { font-size:49px; }.hero-copy { font-size:14px; }.request-board { grid-template-columns:1fr; }.request-column { min-height:0; }.request-detail h3 { font-size:25px; }.practice-grid { grid-template-columns:1fr; }.request-form-section form { padding:20px; } }
@media (prefers-reduced-motion:no-preference) { .hero::before { animation:orbital-drift 14s ease-in-out infinite alternate; }.request-card { animation:rise .5s var(--ease) both; }.request-card:nth-child(2n) { animation-delay:.06s; }.practice-grid article { animation:rise .5s var(--ease) both; }.practice-grid article:nth-child(2n) { animation-delay:.07s; } }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes orbital-drift { from { transform:translate3d(-1%,0,0) rotate(-3deg); } to { transform:translate3d(1.5%,1%,0) rotate(4deg); } }