Claude init file + div. improvements #19
@@ -1,5 +1,3 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Jost:wght@300;400;500&display=swap');
|
|
||||||
|
|
||||||
/* ── Host fills the padded app-root container ───────────────────── */
|
/* ── Host fills the padded app-root container ───────────────────── */
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -41,7 +39,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-family: 'Jost', sans-serif;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
font-size: 0.68rem;
|
font-size: 0.68rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
@@ -85,39 +83,39 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
font-size: clamp(2.8rem, 7.5vw, 5rem);
|
font-size: clamp(2.8rem, 7.5vw, 5rem);
|
||||||
font-weight: 300;
|
font-weight: 200;
|
||||||
letter-spacing: 0.22em;
|
letter-spacing: 0.12em;
|
||||||
color: #f0e6d3;
|
color: #f0e6d3;
|
||||||
margin: 0 0 0.25em;
|
margin: 0 0 0.25em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tagline {
|
.tagline {
|
||||||
font-family: 'Cormorant Garamond', Georgia, serif;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
font-size: clamp(0.7rem, 1.6vw, 0.85rem);
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
font-style: italic;
|
font-style: normal;
|
||||||
color: #c8a96e;
|
color: #c8a96e;
|
||||||
letter-spacing: 0.35em;
|
letter-spacing: 0.22em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin: 0 0 1.1rem;
|
margin: 0 0 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ornament-line {
|
.ornament-line {
|
||||||
width: 44px;
|
width: 32px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: linear-gradient(90deg, transparent, #c8a96e 35%, #c8a96e 65%, transparent);
|
background: linear-gradient(90deg, transparent, #c8a96e 35%, #c8a96e 65%, transparent);
|
||||||
margin: 0 auto 1.1rem;
|
margin: 0 auto 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-family: 'Jost', sans-serif;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: rgba(240, 230, 211, 0.38);
|
color: rgba(240, 230, 211, 0.45);
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.03em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -132,10 +130,10 @@ h1 {
|
|||||||
|
|
||||||
/* ── Individual card ────────────────────────────────────────────── */
|
/* ── Individual card ────────────────────────────────────────────── */
|
||||||
.card {
|
.card {
|
||||||
background: rgba(255, 255, 255, 0.025);
|
background: rgba(255, 255, 255, 0.03);
|
||||||
border: 1px solid rgba(200, 169, 110, 0.13);
|
border: 1px solid rgba(200, 169, 110, 0.15);
|
||||||
border-radius: 4px;
|
border-radius: 12px;
|
||||||
padding: 1.75rem 1rem 1.5rem;
|
padding: 2rem 1.25rem 1.75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -143,7 +141,7 @@ h1 {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: 'Jost', sans-serif;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition:
|
transition:
|
||||||
@@ -157,7 +155,7 @@ h1 {
|
|||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
border-radius: 3px;
|
border-radius: 11px;
|
||||||
background: linear-gradient(145deg, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
|
background: linear-gradient(145deg, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s;
|
transition: opacity 0.3s;
|
||||||
@@ -165,8 +163,8 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.card:hover {
|
||||||
border-color: rgba(200, 169, 110, 0.38);
|
border-color: rgba(200, 169, 110, 0.4);
|
||||||
background: rgba(255, 255, 255, 0.04);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -182,7 +180,7 @@ h1 {
|
|||||||
.icon-wrap {
|
.icon-wrap {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
border-radius: 11px;
|
border-radius: 12px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -209,15 +207,15 @@ h1 {
|
|||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #ede0cc;
|
color: #ede0cc;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.02em;
|
||||||
transition: color 0.25s;
|
transition: color 0.25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-sub {
|
.card-sub {
|
||||||
font-size: 0.68rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
color: rgba(240, 230, 211, 0.32);
|
color: rgba(240, 230, 211, 0.38);
|
||||||
letter-spacing: 0.09em;
|
letter-spacing: 0.06em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Copy card: confirmed state ─────────────────────────────────── */
|
/* ── Copy card: confirmed state ─────────────────────────────────── */
|
||||||
@@ -267,6 +265,6 @@ h1 {
|
|||||||
|
|
||||||
@media (max-width: 380px) {
|
@media (max-width: 380px) {
|
||||||
h1 {
|
h1 {
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.06em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user