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
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue