feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
Yun Chan
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.franchise-hero-copy .section-kicker {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
}
|
||||
|
||||
.franchise-hero h1 {
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
max-width: 560px;
|
||||
margin-top: 52px;
|
||||
padding: 18px 20px;
|
||||
border-left: 3px solid #8ea5ff;
|
||||
border-left: 3px solid var(--blue-soft);
|
||||
background: #2b2926;
|
||||
}
|
||||
|
||||
|
|
@ -299,9 +299,9 @@
|
|||
|
||||
.franchise-timeline li {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr auto;
|
||||
grid-template-columns: 4.5rem minmax(0, 1fr) minmax(9rem, auto);
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
gap: 1.5rem;
|
||||
min-height: 124px;
|
||||
padding: 22px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
|
|
@ -325,10 +325,13 @@
|
|||
}
|
||||
|
||||
.franchise-timeline small {
|
||||
justify-self: end;
|
||||
min-width: 8rem;
|
||||
padding: 6px 9px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cost-section {
|
||||
|
|
@ -337,7 +340,7 @@
|
|||
}
|
||||
|
||||
.cost-section .section-kicker {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
}
|
||||
|
||||
.cost-head {
|
||||
|
|
@ -355,6 +358,7 @@
|
|||
.unknown-cost {
|
||||
padding: 22px;
|
||||
border: 1px solid #625f5a;
|
||||
border-left: 3px solid var(--blue-soft);
|
||||
background: #2a2825;
|
||||
}
|
||||
|
||||
|
|
@ -366,7 +370,7 @@
|
|||
.unknown-cost strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -390,8 +394,10 @@
|
|||
|
||||
.cost-table th,
|
||||
.cost-table td {
|
||||
padding: 17px 14px;
|
||||
padding: 1.125rem 1rem;
|
||||
border-bottom: 1px solid #4f4c47;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -410,7 +416,7 @@
|
|||
}
|
||||
|
||||
.cost-table td:nth-child(3) {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -813,6 +819,12 @@
|
|||
grid-template-columns: 1.2fr 0.8fr 1.4fr;
|
||||
}
|
||||
|
||||
.cost-table th:nth-child(3),
|
||||
.cost-table td:nth-child(3) {
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.franchise-hero {
|
||||
grid-template-columns: 0.95fr 1.05fr;
|
||||
|
|
@ -977,3 +989,38 @@
|
|||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 공개 메인과 같은 초광폭 상한: 사진이 내용보다 먼저 커지지 않는다. */
|
||||
@media (min-width: 120rem) {
|
||||
.franchise-hero {
|
||||
width: min(100%, var(--hero-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(42rem, 1.14fr);
|
||||
margin-inline: auto;
|
||||
border-inline: 1px solid var(--ink-soft);
|
||||
}
|
||||
|
||||
.franchise-hero-copy {
|
||||
width: min(100%, var(--copy-wide));
|
||||
justify-self: end;
|
||||
padding: clamp(5.5rem, 6vw, 8rem) clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
|
||||
.franchise-hero h1 {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(4.25rem, 3.2rem + 2.2vw, 5.5rem);
|
||||
}
|
||||
|
||||
.franchise-hero-media {
|
||||
width: min(100%, var(--media-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.fact-rail .wrap,
|
||||
.model-section .wrap,
|
||||
.site-fit-section .wrap,
|
||||
.franchise-process .wrap {
|
||||
max-width: var(--workbench-wide);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,6 +240,17 @@ fieldset {
|
|||
line-height: 0.98;
|
||||
}
|
||||
|
||||
/* 초광폭에서 바깥 여백을 늘려도 카피 칼럼의 안쪽 폭이 사라지지 않게 한다. */
|
||||
@media (min-width: 120rem) {
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 520px;
|
||||
margin-top: 30px;
|
||||
|
|
@ -373,8 +384,9 @@ fieldset {
|
|||
|
||||
.hero-order button {
|
||||
justify-self: start;
|
||||
margin-top: 12px;
|
||||
padding: 0 0 3px;
|
||||
min-height: 44px;
|
||||
margin: 8px -8px -4px;
|
||||
padding: 8px 8px 7px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid white;
|
||||
background: transparent;
|
||||
|
|
@ -501,7 +513,6 @@ fieldset {
|
|||
}
|
||||
|
||||
.menu-photo,
|
||||
.ingredient-stack,
|
||||
.menu-poster {
|
||||
aspect-ratio: 4 / 3;
|
||||
position: relative;
|
||||
|
|
@ -512,6 +523,7 @@ fieldset {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.menu-number {
|
||||
|
|
@ -527,57 +539,17 @@ fieldset {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ingredient-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
background: var(--steel);
|
||||
}
|
||||
|
||||
.ingredient-stack span {
|
||||
width: 62%;
|
||||
height: 9%;
|
||||
display: block;
|
||||
border-radius: 45% 45% 15% 15%;
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.ingredient-stack .bun {
|
||||
height: 19%;
|
||||
background: #d89643;
|
||||
}
|
||||
|
||||
.ingredient-stack .bun.bottom {
|
||||
height: 11%;
|
||||
border-radius: 10% 10% 35% 35%;
|
||||
}
|
||||
|
||||
.ingredient-stack .pickle {
|
||||
height: 4%;
|
||||
background: #4e6726;
|
||||
}
|
||||
|
||||
.ingredient-stack .cheese {
|
||||
width: 67%;
|
||||
height: 5%;
|
||||
background: var(--cheese);
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
.ingredient-stack .patty {
|
||||
height: 11%;
|
||||
border-radius: 30%;
|
||||
background: #4a2118;
|
||||
}
|
||||
|
||||
.ingredient-stack b {
|
||||
.menu-image-note {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 5px 7px;
|
||||
background: rgb(255 253 248 / 94%);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.menu-poster {
|
||||
|
|
@ -697,7 +669,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.builder-section > .wrap > .section-head .section-kicker {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
}
|
||||
|
||||
.builder-summary .section-kicker {
|
||||
|
|
@ -724,6 +696,10 @@ fieldset {
|
|||
border-bottom: 1px solid #625f5a;
|
||||
}
|
||||
|
||||
.builder-form fieldset + fieldset {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.builder-form legend {
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -733,7 +709,7 @@ fieldset {
|
|||
|
||||
.builder-form legend span {
|
||||
margin-right: 12px;
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
@ -776,7 +752,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.choice-row input:checked + span {
|
||||
border-color: #8ea5ff;
|
||||
border-color: var(--blue-soft);
|
||||
background: var(--blue);
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -786,7 +762,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.choice-row input:focus-visible + span {
|
||||
outline: 3px solid #8ea5ff;
|
||||
outline: 3px solid var(--blue-soft);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -992,18 +968,6 @@ fieldset {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
.save-status {
|
||||
min-height: 23px;
|
||||
margin-top: 10px;
|
||||
color: var(--success);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.save-status.is-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.process-section {
|
||||
padding-block: 0;
|
||||
background: var(--steel);
|
||||
|
|
@ -1097,7 +1061,7 @@ fieldset {
|
|||
.search-box input {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
padding: 8px 0;
|
||||
padding: 8px 12px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
|
|
@ -1109,7 +1073,15 @@ fieldset {
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
outline: 3px solid var(--focus);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.search-box button {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding-inline: 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
|
|
@ -1255,11 +1227,12 @@ fieldset {
|
|||
}
|
||||
|
||||
.map-pin {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding-inline: 8px;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
background: var(--ink);
|
||||
|
|
@ -1269,8 +1242,8 @@ fieldset {
|
|||
|
||||
.map-pin span {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
padding: 4px 7px;
|
||||
top: 56px;
|
||||
padding: 5px 9px;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 10px;
|
||||
|
|
@ -1779,6 +1752,69 @@ fieldset {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 821px) {
|
||||
.hero {
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hero-order {
|
||||
position: static;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
width: auto;
|
||||
min-height: 8.75rem;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.builder-form legend,
|
||||
.field-label,
|
||||
.select-grid label {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.choice-row label > span small,
|
||||
.menu-foot small {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.hero-order {
|
||||
position: static;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.hero-order {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.service-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.service-row p {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.truth-bar,
|
||||
.site-head,
|
||||
|
|
@ -1805,3 +1841,107 @@ fieldset {
|
|||
border: 1px solid #777;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 2026-08-30: 초광폭은 확장이 아니라 독립된 구성 상태다 ─────────── */
|
||||
@media (min-width: 120rem) {
|
||||
.site-head .wrap,
|
||||
.service-strip .wrap,
|
||||
.section > .wrap,
|
||||
.site-foot .wrap {
|
||||
max-width: var(--workbench-wide);
|
||||
}
|
||||
|
||||
.hero {
|
||||
width: min(100%, var(--hero-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(42rem, 1.14fr);
|
||||
margin-inline: auto;
|
||||
border-inline: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
width: min(100%, var(--copy-wide));
|
||||
max-width: none;
|
||||
justify-self: end;
|
||||
padding: clamp(5.5rem, 6vw, 8rem) clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: none;
|
||||
font-size: clamp(4.5rem, 3.6rem + 1.5vw, 5.25rem);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero h1 br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-wide-space {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
width: min(100%, var(--media-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.hero-media img {
|
||||
object-position: 52% center;
|
||||
}
|
||||
|
||||
.hero-order {
|
||||
right: clamp(1.5rem, 3vw, 3.5rem);
|
||||
width: min(21rem, calc(100% - 3rem));
|
||||
}
|
||||
|
||||
.menu-grid,
|
||||
.builder-layout,
|
||||
.store-layout {
|
||||
max-width: var(--workbench-wide);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.builder-layout {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(27rem, 34rem);
|
||||
}
|
||||
|
||||
.process-grid,
|
||||
.franchise-callout {
|
||||
width: min(100%, var(--stage-wide));
|
||||
margin-inline: auto;
|
||||
border-inline: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
/* .wrap's content cap must not silently win over this named wide stage. */
|
||||
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
|
||||
}
|
||||
|
||||
.process-section > .process-grid {
|
||||
max-width: var(--stage-wide);
|
||||
}
|
||||
|
||||
.process-copy {
|
||||
/* Reset both inherited viewport-derived side paddings: leaving the left
|
||||
value in place leaves a 12px text column at a 2560px viewport. */
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
justify-self: stretch;
|
||||
padding-inline: clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
|
||||
.process-media,
|
||||
.franchise-image {
|
||||
min-height: clamp(42rem, 43vw, 52rem);
|
||||
}
|
||||
|
||||
.franchise-copy {
|
||||
max-width: 43rem;
|
||||
padding-inline: clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
--line-strong: #8a8379;
|
||||
--blue: #2147e7;
|
||||
--blue-dark: #1533ac;
|
||||
--blue-soft: #8ea5ff;
|
||||
--blue-pale: #dce4ff;
|
||||
--steel: #d9dcda;
|
||||
--cheese: #ffc642;
|
||||
|
|
@ -18,6 +19,12 @@
|
|||
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
|
||||
--wrap: 1180px;
|
||||
/* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
|
||||
--hero-wide: 2160px;
|
||||
--stage-wide: 1680px;
|
||||
--workbench-wide: 1480px;
|
||||
--copy-wide: 900px;
|
||||
--media-wide: 1120px;
|
||||
--gutter: clamp(18px, 4vw, 52px);
|
||||
--section: clamp(76px, 10vw, 144px);
|
||||
--space-1: 4px;
|
||||
|
|
@ -41,3 +48,15 @@
|
|||
--section: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 120rem) {
|
||||
:root {
|
||||
--wrap: 1320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 150rem) {
|
||||
:root {
|
||||
--wrap: 1400px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue