new
This commit is contained in:
@@ -157,174 +157,6 @@ body::before {
|
||||
color: var(--warm-white);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HERO
|
||||
============================================================ */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 120px 48px 80px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse 80% 60% at 50% 40%,
|
||||
rgba(184, 150, 90, 0.07) 0%,
|
||||
transparent 70%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 50% 40% at 20% 80%,
|
||||
rgba(26, 24, 20, 0.04) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.hero-eyebrow {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-eyebrow::before,
|
||||
.hero-eyebrow::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--gold-light);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(52px, 7vw, 96px);
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.05;
|
||||
color: var(--charcoal);
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-title em {
|
||||
font-style: italic;
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.hero-ampersand {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(32px, 4vw, 56px);
|
||||
font-weight: 300;
|
||||
color: var(--light-grey);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(14px, 2vw, 18px);
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
color: var(--mid-grey);
|
||||
letter-spacing: 0.06em;
|
||||
margin: 28px auto 0;
|
||||
max-width: 560px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
|
||||
.hero-rule span {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--gold-light));
|
||||
}
|
||||
|
||||
.hero-rule span:last-child {
|
||||
background: linear-gradient(to left, transparent, var(--gold-light));
|
||||
}
|
||||
|
||||
.hero-rule-diamond {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--gold);
|
||||
transform: rotate(45deg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.scroll-cue {
|
||||
position: absolute;
|
||||
bottom: 36px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 1;
|
||||
animation: scrollBob 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scroll-cue span {
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: var(--light-grey);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.scroll-cue-line {
|
||||
width: 1px;
|
||||
height: 36px;
|
||||
background: linear-gradient(to bottom, var(--gold-light), transparent);
|
||||
}
|
||||
|
||||
@keyframes scrollBob {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(6px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SECTION WRAPPER
|
||||
============================================================ */
|
||||
@@ -381,64 +213,51 @@ body::before {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-image: url("asset/banner/1.png");
|
||||
background-size: 100% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.brand-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.brand-card--fine {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.brand-card--lacueor {
|
||||
}
|
||||
|
||||
.brand-card-header {
|
||||
flex-shrink: 0;
|
||||
padding: 32px 52px 20px;
|
||||
padding: 10px 52px 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-card--fine .brand-card-header {
|
||||
background: var(--fine-beige);
|
||||
}
|
||||
|
||||
.brand-card--lacueor .brand-card-header {
|
||||
background: var(--lacueor-dark);
|
||||
}
|
||||
|
||||
.brand-card-gap {
|
||||
flex: 1;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.brand-card-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 20px 52px 40px;
|
||||
padding: 7px 52px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-card--fine .brand-card-footer {
|
||||
background: var(--fine-beige);
|
||||
}
|
||||
|
||||
.brand-card--lacueor .brand-card-footer {
|
||||
background: var(--lacueor-dark);
|
||||
}
|
||||
|
||||
.brands-banner-img {
|
||||
display: none;
|
||||
.brands-banner {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand-card-top-accent {
|
||||
@@ -895,7 +714,7 @@ footer {
|
||||
justify-content: space-between;
|
||||
padding-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
@@ -925,6 +744,91 @@ footer {
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.footer-lang select {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: transparent;
|
||||
color: rgba(247, 244, 239, 0.5);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
color var(--transition);
|
||||
}
|
||||
|
||||
.footer-lang select:hover,
|
||||
.footer-lang select:focus {
|
||||
border-color: var(--gold);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.footer-lang select option {
|
||||
background: var(--dark);
|
||||
color: var(--cream);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SIGN-UP SECTION
|
||||
============================================================ */
|
||||
.signup-section {
|
||||
background: var(--warm-white);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.signup-form {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.signup-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.form-group--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.signup-form textarea {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--light-grey);
|
||||
background: var(--warm-white);
|
||||
color: var(--charcoal);
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.signup-form textarea::placeholder {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
|
||||
.signup-form textarea:focus {
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.12);
|
||||
}
|
||||
|
||||
.signup-form .btn-primary {
|
||||
align-self: center;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
BANNER SELECTOR
|
||||
============================================================ */
|
||||
@@ -980,10 +884,6 @@ footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 100px 24px 72px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
@@ -1001,10 +901,6 @@ footer {
|
||||
padding: 24px 28px 16px;
|
||||
}
|
||||
|
||||
.brand-card-gap {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.brand-card-footer {
|
||||
padding: 16px 28px 32px;
|
||||
}
|
||||
@@ -1041,10 +937,6 @@ footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 88px 20px 64px;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 52px 20px;
|
||||
}
|
||||
@@ -1057,10 +949,6 @@ footer {
|
||||
padding: 20px 24px 14px;
|
||||
}
|
||||
|
||||
.brand-card-gap {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.brand-card-footer {
|
||||
padding: 14px 24px 28px;
|
||||
}
|
||||
@@ -1085,4 +973,13 @@ footer {
|
||||
.brands-notice {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.signup-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user