@roottale/cms-renderer-next 0.40.0 → 0.41.0

package/dist/templates.css

@@ -13,10 +13,12 @@
  */
 
 :where([data-roottale-tpl]) {
-  padding-block: clamp(3rem, 8vw, 6rem);
+  container-type: inline-size;
+  padding-block: clamp(3rem, 8cqi, 6rem);
   background: var(--rt-color-background, transparent);
   color: var(--rt-color-foreground, #06162f);
   font-family: var(--rt-font-body, system-ui, -apple-system, sans-serif);
+  word-break: keep-all;
 }
 
 [data-roottale-tpl] :where(.rt-tpl-container) {
@@ -28,7 +30,7 @@
 
 [data-roottale-tpl] :where(.rt-tpl-heading) {
   font-family: var(--rt-font-display, var(--rt-font-body, system-ui, sans-serif));
-  font-size: clamp(1.5rem, 3vw, 2rem);
+  font-size: clamp(1.5rem, 3cqi, 2rem);
   font-weight: 800;
   margin-block: 0 1.5rem;
 }
@@ -64,13 +66,13 @@
 /* ── hero ─────────────────────────────────────────────────────────────────── */
 
 [data-roottale-tpl="hero"] :where(.rt-tpl-hero-inner) {
-  padding-block: clamp(2rem, 6vw, 4rem);
+  padding-block: clamp(2rem, 6cqi, 4rem);
 }
 
 [data-roottale-tpl="hero"][data-variant="split"] :where(.rt-tpl-hero-inner) {
   display: flex;
   align-items: center;
-  gap: clamp(2rem, 5vw, 4rem);
+  gap: clamp(2rem, 5cqi, 4rem);
   flex-wrap: wrap;
 }
 
@@ -103,7 +105,7 @@
 
 [data-roottale-tpl] :where(.rt-tpl-hero-title) {
   font-family: var(--rt-font-display, var(--rt-font-body, system-ui, sans-serif));
-  font-size: clamp(2rem, 6vw, 3.5rem);
+  font-size: clamp(2rem, 6cqi, 3.5rem);
   font-weight: 900;
   line-height: 1.1;
   margin: 0 0 1.25rem;
@@ -224,7 +226,7 @@
   align-items: center;
   gap: 1.5rem;
   text-align: center;
-  padding: clamp(2.5rem, 6vw, 4rem);
+  padding: clamp(2.5rem, 6cqi, 4rem);
   border-radius: var(--rt-radius-md, 0.5rem);
   background: color-mix(
     in srgb,
@@ -236,7 +238,7 @@
 
 [data-roottale-tpl] :where(.rt-tpl-cta-banner-title) {
   font-family: var(--rt-font-display, var(--rt-font-body, system-ui, sans-serif));
-  font-size: clamp(1.5rem, 4vw, 2.25rem);
+  font-size: clamp(1.5rem, 4cqi, 2.25rem);
   font-weight: 800;
   margin: 0;
 }
@@ -247,6 +249,235 @@
   max-inline-size: 40rem;
 }
 
+[data-roottale-tpl] :where(.rt-tpl-sr-only) {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-roottale-tpl="trust"],
+[data-roottale-tpl="contact"] {
+  container-type: inline-size;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  word-break: keep-all;
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-container),
+[data-roottale-tpl="trust"] :where(.rt-tpl-container *),
+[data-roottale-tpl="contact"] :where(.rt-tpl-container),
+[data-roottale-tpl="contact"] :where(.rt-tpl-container *) {
+  box-sizing: border-box;
+}
+
+[data-roottale-tpl="trust"] {
+  padding-block: clamp(2.25rem, 6cqi, 4.5rem);
+}
+
+[data-roottale-tpl="trust"][data-variant="stat-band"] {
+  background: var(--secondary);
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-heading),
+[data-roottale-tpl="contact"] :where(.rt-tpl-heading) {
+  color: var(--foreground);
+  font-family: var(--font-display);
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-stat-band) {
+  display: grid;
+  gap: var(--space-4);
+  align-items: stretch;
+}
+
+@container (min-width: 36rem) {
+  [data-roottale-tpl="trust"] :where(.rt-tpl-trust-stat-band) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 56rem) {
+  [data-roottale-tpl="trust"] :where(.rt-tpl-trust-stat-band) {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo-list),
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-cred-list) {
+  display: grid;
+  gap: var(--space-3);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@container (min-width: 36rem) {
+  [data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo-list),
+  [data-roottale-tpl="trust"] :where(.rt-tpl-trust-cred-list) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 48rem) {
+  [data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo-list),
+  [data-roottale-tpl="trust"] :where(.rt-tpl-trust-cred-list) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo-item) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--space-12);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--card);
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo-link) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo) {
+  max-block-size: var(--space-8);
+  max-inline-size: 100%;
+  filter: grayscale(1) opacity(0.7);
+  transition: filter var(--motion-fast) var(--ease-standard);
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-logo-link:hover .rt-tpl-trust-logo) {
+  filter: grayscale(0) opacity(1);
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-cred-list li) {
+  min-inline-size: 0;
+}
+
+[data-roottale-tpl="trust"] :where(.rt-tpl-trust-disclaimer) {
+  margin-block: var(--space-4) 0;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-leading-normal);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-inner) {
+  display: grid;
+  gap: var(--space-6);
+  align-items: start;
+}
+
+@container (min-width: 56rem) {
+  [data-roottale-tpl="contact"][data-variant="form-map-5050"]
+    :where(.rt-tpl-contact-inner) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  [data-roottale-tpl="contact"][data-variant="split"]
+    :where(.rt-tpl-contact-inner) {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  }
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-info) {
+  display: grid;
+  gap: var(--space-4);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-phone) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: start;
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--accent);
+  color: var(--accent-foreground);
+  font-family: var(--font-display);
+  font-size: clamp(1.25rem, 4cqi, 2rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--font-leading-tight);
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-address) {
+  color: var(--foreground);
+  font-style: normal;
+  line-height: var(--font-leading-body);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-hours) {
+  inline-size: 100%;
+  border-collapse: collapse;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-hours th),
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-hours td) {
+  padding-block: var(--space-2);
+  border-block-end: 1px solid var(--border);
+  text-align: start;
+  vertical-align: top;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-hours th) {
+  color: var(--muted-foreground);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-hours td) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-hours-note) {
+  color: var(--muted-foreground);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map) {
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--muted);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map iframe) {
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-fallback) {
+  margin: 0;
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-map-fallback a) {
+  color: var(--accent-foreground);
+  text-decoration: underline;
+  text-underline-offset: var(--space-1);
+}
+
+[data-roottale-tpl="contact"] :where(.rt-tpl-contact-form) {
+  min-inline-size: 0;
+}
+
 /* ── placeholder (admin preview 의 customSections skeleton) ──────────────── */
 
 [data-roottale-tpl] :where(.rt-tpl-placeholder-box) {