feat: add lighthouse and fifth-domain entry flow
This commit is contained in:
parent
674c9e7764
commit
a35d61e227
12 changed files with 1056 additions and 3 deletions
415
product-source/guanghu-knowledge-base/src/styles/world-entry.css
Normal file
415
product-source/guanghu-knowledge-base/src/styles/world-entry.css
Normal file
|
|
@ -0,0 +1,415 @@
|
|||
.world-entry {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
min-width: 860px;
|
||||
min-height: 620px;
|
||||
overflow: hidden;
|
||||
color: #edf4ff;
|
||||
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
background: #06142b;
|
||||
}
|
||||
|
||||
.entry-backdrop,
|
||||
.entry-vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.public-lighthouse .entry-backdrop {
|
||||
background: url('/gh-aios-public-lighthouse.png') center / cover no-repeat;
|
||||
}
|
||||
|
||||
.fifth-vestibule .entry-backdrop {
|
||||
background: url('/fifth-domain-lighthouse.png') center / cover no-repeat;
|
||||
}
|
||||
|
||||
.public-lighthouse .entry-vignette {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(1, 10, 27, .16) 0%, rgba(2, 13, 31, 0) 48%, rgba(1, 10, 24, .72) 100%),
|
||||
radial-gradient(circle at 50% 32%, rgba(85, 131, 205, .08), rgba(0, 6, 19, .18) 64%, rgba(0, 5, 16, .42) 100%);
|
||||
}
|
||||
|
||||
.fifth-vestibule .entry-vignette {
|
||||
background: linear-gradient(90deg, rgba(1, 5, 20, .28), rgba(1, 6, 25, .05) 65%, rgba(2, 4, 17, .2));
|
||||
}
|
||||
|
||||
.entry-brand {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 9px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.entry-brand span {
|
||||
font-size: clamp(24px, 2.7vw, 40px);
|
||||
font-weight: 500;
|
||||
letter-spacing: -.03em;
|
||||
}
|
||||
|
||||
.entry-brand strong {
|
||||
color: #dbe9ff;
|
||||
font-family: "Helvetica Neue", Inter, sans-serif;
|
||||
font-size: clamp(58px, 7.3vw, 108px);
|
||||
font-weight: 400;
|
||||
line-height: .94;
|
||||
letter-spacing: .05em;
|
||||
text-shadow: 0 5px 24px rgba(73, 133, 220, .18);
|
||||
}
|
||||
|
||||
.entry-brand small {
|
||||
color: rgba(232, 240, 255, .82);
|
||||
font-size: clamp(14px, 1.35vw, 21px);
|
||||
font-weight: 400;
|
||||
letter-spacing: .25em;
|
||||
}
|
||||
|
||||
.public-entry-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(720px, 62vw);
|
||||
margin: clamp(72px, 10vh, 120px) auto 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.public-divider {
|
||||
width: 190px;
|
||||
height: 1px;
|
||||
margin: 30px 0 30px;
|
||||
background: linear-gradient(90deg, transparent, rgba(202, 222, 250, .36), transparent);
|
||||
}
|
||||
|
||||
.public-entry-copy h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(42px, 5vw, 68px);
|
||||
font-weight: 500;
|
||||
letter-spacing: .11em;
|
||||
}
|
||||
|
||||
.public-entry-copy > p {
|
||||
margin: 15px 0 34px;
|
||||
color: rgba(228, 237, 252, .72);
|
||||
font-size: clamp(16px, 1.65vw, 24px);
|
||||
letter-spacing: .22em;
|
||||
}
|
||||
|
||||
.public-entry-actions {
|
||||
width: min(570px, 100%);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.public-entry-actions button,
|
||||
.fifth-actions button {
|
||||
min-height: 66px;
|
||||
border: 1px solid rgba(172, 203, 245, .62);
|
||||
border-radius: 12px;
|
||||
background: rgba(13, 35, 72, .38);
|
||||
color: #edf4ff;
|
||||
font: inherit;
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .08em;
|
||||
backdrop-filter: blur(14px);
|
||||
transition: border-color .18s ease, background .18s ease, transform .18s ease;
|
||||
}
|
||||
|
||||
.public-entry-actions button:hover,
|
||||
.fifth-actions button:hover,
|
||||
.public-domain-strip button:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(224, 237, 255, .92);
|
||||
}
|
||||
|
||||
.public-entry-actions .public-primary {
|
||||
border-color: rgba(231, 243, 255, .84);
|
||||
background: linear-gradient(135deg, rgba(222, 237, 255, .92), rgba(131, 181, 243, .82));
|
||||
color: #09214a;
|
||||
box-shadow: 0 12px 35px rgba(65, 128, 216, .18);
|
||||
}
|
||||
|
||||
.public-domain-strip {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 8.5vw;
|
||||
right: 8.5vw;
|
||||
bottom: clamp(116px, 15vh, 168px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
border-bottom: 1px solid rgba(179, 207, 239, .22);
|
||||
}
|
||||
|
||||
.public-domain-strip button {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 86px;
|
||||
padding: 8px 16px 26px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: rgba(230, 239, 252, .84);
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
transition: color .18s ease, border-color .18s ease, transform .18s ease;
|
||||
}
|
||||
|
||||
.public-domain-strip button + button::before {
|
||||
content: '/';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 22px;
|
||||
color: rgba(158, 197, 244, .72);
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.public-domain-strip span,
|
||||
.public-domain-strip strong,
|
||||
.public-domain-strip small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.public-domain-strip span {
|
||||
margin-bottom: 8px;
|
||||
color: rgba(154, 192, 239, .82);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.public-domain-strip strong {
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.public-domain-strip small {
|
||||
margin-top: 8px;
|
||||
color: rgba(208, 222, 242, .64);
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.public-domain-strip button.selected,
|
||||
.public-domain-strip button:focus-visible {
|
||||
border-bottom-color: #b8d6ff;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.public-entry-footer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: 65px;
|
||||
color: rgba(202, 219, 241, .6);
|
||||
font-size: 14px;
|
||||
letter-spacing: .16em;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.public-lighthouse.is-directory .public-entry-copy {
|
||||
margin-top: clamp(45px, 6vh, 75px);
|
||||
}
|
||||
|
||||
.public-lighthouse.is-directory .entry-brand strong {
|
||||
font-size: clamp(46px, 5vw, 74px);
|
||||
}
|
||||
|
||||
.public-lighthouse.is-directory .public-divider {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.public-lighthouse.is-directory .public-domain-strip {
|
||||
bottom: clamp(92px, 12vh, 130px);
|
||||
}
|
||||
|
||||
.public-lighthouse.is-directory .public-domain-strip button {
|
||||
min-height: 118px;
|
||||
}
|
||||
|
||||
.fifth-brand {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 62px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.fifth-brand span { font-size: 27px; }
|
||||
.fifth-brand strong {
|
||||
color: #ffe9b7;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(60px, 6.5vw, 92px);
|
||||
text-shadow: 0 0 24px rgba(255, 201, 116, .16);
|
||||
}
|
||||
.fifth-brand small { color: rgba(255, 237, 204, .82); font-size: 14px; }
|
||||
|
||||
.fifth-domain-rail {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 4vw;
|
||||
top: 15vh;
|
||||
bottom: 23vh;
|
||||
width: 238px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fifth-domain-rail::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
top: 24px;
|
||||
bottom: 32px;
|
||||
width: 1px;
|
||||
background: linear-gradient(#9d83ce, #c6a063 78%, #ffe2a0);
|
||||
box-shadow: 0 0 18px rgba(208, 168, 106, .22);
|
||||
}
|
||||
|
||||
.fifth-domain-rail button {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 58px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-height: 60px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: rgba(235, 231, 247, .86);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fifth-domain-rail button span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(197, 166, 227, .8);
|
||||
border-radius: 50%;
|
||||
background: rgba(11, 11, 41, .74);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.fifth-domain-rail button strong {
|
||||
max-width: 130px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fifth-domain-rail button:focus-visible {
|
||||
outline: 1px solid #ffe1a1;
|
||||
outline-offset: 5px;
|
||||
}
|
||||
|
||||
.fifth-domain-rail button.selected span {
|
||||
border-color: #ffe1a1;
|
||||
color: #ffe5ad;
|
||||
font-size: 27px;
|
||||
box-shadow: 0 0 0 11px rgba(255, 207, 126, .1), 0 0 30px rgba(255, 206, 124, .35);
|
||||
}
|
||||
|
||||
.fifth-domain-rail button.selected strong {
|
||||
color: #ffe1a1;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.fifth-focus-panel {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 27vh;
|
||||
left: max(320px, 24vw);
|
||||
width: min(820px, 56vw);
|
||||
padding: 32px 42px 36px;
|
||||
border: 1px solid rgba(174, 174, 217, .42);
|
||||
border-radius: 18px;
|
||||
background: rgba(6, 12, 43, .68);
|
||||
box-shadow: 0 22px 80px rgba(1, 3, 18, .28);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.fifth-focus-panel > small {
|
||||
color: #f3d49b;
|
||||
font-size: 15px;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.fifth-focus-panel h1 {
|
||||
margin: 7px 0 13px;
|
||||
color: #ffe1a8;
|
||||
font-size: clamp(35px, 3.4vw, 52px);
|
||||
font-weight: 600;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
.fifth-focus-panel dl { margin: 0; }
|
||||
.fifth-focus-panel dl > div {
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
min-height: 63px;
|
||||
border-top: 1px solid rgba(181, 181, 220, .22);
|
||||
}
|
||||
|
||||
.fifth-focus-panel dt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: rgba(234, 230, 246, .72);
|
||||
}
|
||||
.fifth-focus-panel dt svg { width: 22px; height: 22px; stroke-width: 1.6; }
|
||||
.fifth-focus-panel dd { margin: 0; color: rgba(244, 243, 251, .88); }
|
||||
|
||||
.fifth-actions {
|
||||
position: absolute;
|
||||
top: calc(100% + 24px);
|
||||
left: 50%;
|
||||
width: min(650px, 86%);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.fifth-actions button {
|
||||
min-height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.fifth-actions button svg { width: 22px; height: 22px; stroke-width: 1.6; }
|
||||
.fifth-actions .fifth-primary {
|
||||
grid-column: 1 / -1;
|
||||
width: min(510px, 82%);
|
||||
min-height: 82px;
|
||||
justify-self: center;
|
||||
border-color: rgba(255, 238, 189, .92);
|
||||
background: linear-gradient(135deg, rgba(240, 191, 111, .9), rgba(176, 129, 72, .8));
|
||||
color: #fff9ec;
|
||||
font-size: 19px;
|
||||
box-shadow: 0 0 0 3px rgba(255, 216, 144, .16), 0 0 26px rgba(255, 196, 103, .34);
|
||||
}
|
||||
|
||||
@media (max-height: 760px) {
|
||||
.public-entry-copy { margin-top: 38px; }
|
||||
.public-divider { margin: 17px 0; }
|
||||
.public-entry-copy > p { margin-bottom: 22px; }
|
||||
.public-domain-strip { bottom: 82px; }
|
||||
.public-entry-footer { bottom: 28px; }
|
||||
.fifth-brand { top: 24px; }
|
||||
.fifth-focus-panel { top: 25vh; }
|
||||
.fifth-actions { top: calc(100% + 14px); }
|
||||
}
|
||||
Loading…
Reference in a new issue